www.hoasen.edu.

vn

CHƯƠNG 1

TỔNG QUAN VỀ DREAMWEAVER

GV điều phối: ThS. PHẠM THỊ THANH TÂM

Email: tam.phamthithanh@hoasen.edu.vn

uu
 www.hoasen.edu.vn

NỘI DUNG TRÌNH BÀY

TỔNG QUAN VỀ
Website là gì?

WEBSITE
Các thành phần chính

Phân loại website

Giới thiệu
DREAMWEAVER CS6
TỔNG QUAN VỀ

Giao diện làm việc của DW

Quản lý website trong DW

03/13/2023
Các thao tác cơ bản trên trang web

Các chế độ làm việc và xem trang web

uu 2
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

03/13/2023
uu 3
Chương 12: Giới thiệu...
 www.hoasen.edu.vn

1. WEBSITE LÀ GÌ?
 Website là một tập hợp các trang web có liên quan
với nhau, được sở hữu và quản lý bởi một cá nhân,
công ty hay tổ chức.
 Mỗi website có một trang chính gọi là trang chủ
(Home page) và nó được hiển thị đầu tiên trên trình
duyệt web.
 Một website có thể chứa nhiều tập tin gọi là trang
web (web page) với những dữ liệu đa dạng khác
nhau.

03/13/2023
uu 4
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

2. CÁC THÀNH PHẦN CHÍNH

 Các thành phần chính của một website bao gồm:
 Tên miền (Domain name): địa chỉ của một
website (VD: www.hoasen.edu.vn)
 Hosting (Web Hosting): là nơi lưu trữ nội dung
website
 Web content (mã nguồn của website): là thành
phần tạo nên giao diện (văn bản, hình ảnh,
video,..) và các chức năng của một website

03/13/2023
uu 5
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

2. CÁC THÀNH PHẦN CHÍNH (tt)

03/13/2023
uu 6
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

2. CÁC THÀNH PHẦN CHÍNH (tt)

 Dựa vào mục đích sử dụng, một website gồm 02

thành phần chính:
 Front End
 Back End

03/13/2023
uu 7
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

2. CÁC THÀNH PHẦN CHÍNH (tt)

 Front End:
 Là phần giao diện phía ngoài, nơi mọi người có thể
nhìn thấy khi gõ địa chỉ website trên trình duyệt.
 Front end có giao diện đẹp, nội dung đa dạng,
phong phú nhằm thu hút người xem

03/13/2023
uu 8
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

2. CÁC THÀNH PHẦN CHÍNH (tt)

 Back End:
 Là phần dành riêng cho người quản trị website.
 Để truy cập được phần back-end đòi hỏi phải truy
cập đúng đường dẫn và đăng nhập đúng tài khoản
quản trị website.
 Back End có giao diện được thiết kế tương đối đơn
giản, chủ yếu để dùng quản trị web

03/13/2023
uu 9
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

3. PHÂN LOẠI WEBSITE

 Website tĩnh:
 Đặc điểm: được thiết kế bằng ngỗn ngữ HTML +
CSS, không sử dụng các hệ quản trị cơ sở dữ liệu
 Ưu điểm: truy cập nhanh, chi phí đầu tư tương đối
thấp
 Khuyết điểm: nội dung nhàm chán, khó nâng cấp
và mở rộng

03/13/2023
uu 10
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

3. PHÂN LOẠI WEBSITE

 Website động:
 Đặc điểm: sử dụng các hệ quản trị cơ sở dữ liệu và
các ngôn ngữ lập trình cấp cao
 Ưu điểm: nội dung luôn được cập nhật, tương tác
cao đối với người sử dụng
 Khuyết điểm: Tốc độ load chậm hơn so với các
website tĩnh

03/13/2023
uu 11
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

03/13/2023
uu 12
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

1. GIỚI THIỆU
 Adobe Dreamweaver là một phần mềm của hãng
Adobe, chuyên dùng để thiết kế web

03/13/2023
uu 13
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

2. GIAO DIỆN DREAMWEAVER CS6

Tạo các file sử dụng các

ngôn ngữ tương ứng

Chứa các đặc trưng

Mở các trang web
của Dreamweaver
làm việc trong thời
gian gần đây

03/13/2023
Màn hình khởi động (Màn hình Welcome)
uu 14
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

2. GIAO DIỆN DREAMWEAVER CS6 (tt)

Màn hình làm việc

03/13/2023
uu 15
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

2. GIAO DIỆN DREAMWEAVER CS6

(tt)
Menu trong Dreamweaver
Menu Chức năng
File Xử lý các chức năng liên quan đến tập tin
Edit Hỗ trợ các thao tác soạn thảo
View Lựa chọn & cấu hình phần hiển thị
Insert Chọn thẻ và các đối tượng vào vùng soạn thảo
Modify Chình sửa các thành phần của trang
Format Định dạng cách hiển thị cho các thành phần của trang
Commands Hỗ trợ các chức năng liên quan đến mã nguồn
Site Quản lý website và các tập tin, thư mục trong website

03/13/2023
Window Quản lý các cừa sồ
Help Phần tài liệu hướng dẫn sử dụng về Dreamweaver

uu 16
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

3. QUẢN LÝ WEBSITE TRONG

DREAMWEAVER
Các thư mục & tập tin trong một website đơn giản

03/13/2023
uu 17
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

3. QUẢN LÝ WEBSITE TRONG

DREAMWEAVER (tt)
Tổ chức thư mục & tập tin trong một wesite

03/13/2023
uu 18
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

3. QUẢN LÝ WEBSITE TRONG

DREAMWEAVER (tt)
 Tạo website mới

Cách 2
Cách 1

03/13/2023
uu 19
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

3. QUẢN LÝ WEBSITE TRONG

DREAMWEAVER (tt)

Đặt tên website

Chọn thư mục lưu trữ website
(trên máy tính cục bộ)

03/13/2023
uu 20
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

3. QUẢN LÝ WEBSITE TRONG

DREAMWEAVER (tt)

Files Panel sau khi

tạo website

03/13/2023
uu 21
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

3. QUẢN LÝ WEBSITE TRONG

DREAMWEAVER (tt)
 Tạo các thư mục bên trong website: trong Files Panel
> click phải lên thư mục website > chọn New Folder
 Một số thao tác cơ bản khác trên thư mục/tập tin
trong website: click phải lên đối tượng cần thao tác >
chọn Edit > chọn các thao tác tương ứng (Copy,
Rename,…)

03/13/2023
uu 22
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

3. QUẢN LÝ WEBSITE TRONG

DREAMWEAVER (tt)
 Quản lý website: menu Site > chọn Manage Sites

Danh sách các website

đã tạo và làm việc

Thay đổi tên và thư mục

chứa website
Xóa
website

03/13/2023
Tạo website mới

uu 23
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

4. CÁC THAO TÁC CƠ BẢN TRÊN

TRANG WEB
 Tạo trang web mới (trống):
 Cách 1: Trong màn hình Welcome, tại cột Create
New:
 Chọn loại file (HTML, PHP, Javasript,…)
tương ứng với trang web muốn tạo, hoặc
 Click chọn More > (hiển thị màn hình giống ở
Cách 2

03/13/2023
uu 24
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

4. CÁC THAO TÁC CƠ BẢN TRÊN

TRANG WEB (tt)

03/13/2023
uu 25
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

4. CÁC THAO TÁC CƠ BẢN TRÊN

TRANG WEB (tt)
 Cách 2: Trong menu File > chọn New (Ctrl+N)
 Chọn Blank Page (trang web trống), Page
from Template (trang web từ template có sẵn),
…
 Trong cột Page Type, chọn loại trang muốn tạo
(HTML, CSS, PHP,…)
 Trong cột Layout, chọn kiểu bố cục muốn sử
dụng cho trang web

03/13/2023
uu 26
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

4. CÁC THAO TÁC CƠ BẢN TRÊN

TRANG WEB (tt)

03/13/2023
uu 27
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

4. CÁC THAO TÁC CƠ BẢN TRÊN

TRANG WEB (tt)
 Các thao tác cơ bản khác trên trang web: trong Files
Panel > click phải lên trang web muốn thao tác >
chọn Edit

03/13/2023
uu 28
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

5. CÁC CHẾ ĐỘ LÀM VIỆC &

XEM TRANG WEB (tt)
 Chế độ Design:dùng để thiết kế trang web (giống như
màn hình Word)
 Chế độ Code: thao tác với mã HTML
 Chế độ Split: một nửa màn hình là chế độ Design,
một nửa màn hình là chế độ Code
 Chế độ Live: xem trang web trước khi hiển thị trên
trình duyệt (giống chế độ Print Preview trong Word)
 Chế độ Preview in Browser: xem kết quả của trang

03/13/2023
web khi hiển thị trên trình duyệt
uu 29
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

5. CÁC CHẾ ĐỘ LÀM VIỆC &

XEM TRANG WEB (tt)
 Để làm việc và xem trang web ở các chế độ khác
nhau
 Cách 1: chọn nút với chế độ tương ứng trên
Document Toolbars

03/13/2023
 Cách 2: menu View > chọn chế độ muốn xem
uu 30
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

5. CÁC CHẾ ĐỘ LÀM VIỆC &

XEM TRANG WEB
Chế độ Design

03/13/2023
uu 31
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

5. CÁC CHẾ ĐỘ LÀM VIỆC &

XEM TRANG WEB (tt)
Chế độ Code

03/13/2023
uu 32
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

5. CÁC CHẾ ĐỘ LÀM VIỆC &

XEM TRANG WEB (tt)
Chế độ Split

03/13/2023
uu 33
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

5. CÁC CHẾ ĐỘ LÀM VIỆC &

XEM TRANG WEB (tt)
Chế độ Live

03/13/2023
uu 34
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

5. CÁC CHẾ ĐỘ LÀM VIỆC &

XEM TRANG WEB (tt)
Chế độ Preview in Browser

03/13/2023
uu 35
Chương 1: Tổng quan về Dreamweaver
 www.hoasen.edu.vn

HỎI - ĐÁP

03/13/2023
Chúc các bạn snh viên đạt kết quả tốt

uu 36
Chương 1: Tổng quan về Dreamweaver