1. Giới thiệu về Dreamweaver
Dreamweaver là chương trình dùng để tạo trang web tĩnh, web động rất hay. Dreamweaver là một
thành phần trong bộ sản phẩm của hãng Adobe gồm nhiều sản phẩm như: Photoshop,
Dreamweaver, Fireworks, Acrobat Pro,…
Mở Dreamweaver: Start => (All) Programs => Abobe Dreamweaver …
Lưu ý: Mình đang sử dụng Dreamweave phiên bản CC 2015 nhé!
2. Thao tác với trang
2.1 Tạo trang web
a. Tạo trang HTML trống
Menu File => New => Blank page => HTML => None => Create
b. Tạo trang PHP
Menu File => New => Blank Page => PHP => None => Create
2.2. Xem thử trang web
Gõ phím F12 để xem thử
2.3. Chuyển chế độ làm việc
a. Chế độ Code
Là chế độ để xem và làm việc với code HTML của trang.
b. Chế độ Design
Là chế độ chủ yếu để xem và làm việc với trang. Trang web sẽ hiện gần giống hệt theo ý của bạn
ở chế độ này.
c. Chế độ Split
Chia đôi màn hình. Phía trên hiện code HTML, phía dưới là chế độ Design.
d. Chuyển chế độ của trang
Nhắp nút Code, Design, Split ở trên vùng soạn thảo (thanh Document)
2.4. Lưu trang web
Nhắp menu File => Save /Save As / Save All
5. Mở trang
Nhắp đúp vào tên file trong panel Files.
6. Đổi tên file
Nhắp tên file trong panel Files => gõ phím F2 => gõ tên file mới
3. Màn hình Dreamwevear
3.1 Toolbar Document
Là thanh toolbar chứa các thao tác với tài liệu hiện hành. Toolbar này chứa các nút Design, Code,
Split mà bạn đã dùng.
3.2 Thanh Properties
Là thanh nằm bên dưới vùng soạn thảo. Thanh Properies là nơi hiện các thuộc tính của đối tượng
mà bạn đang chọn. Bạn dùng thanh này để hiệu chỉnh thuộc tính của đối tượng.
Ẩn hiện thanh Properties: Nhắp menu Window => Properties
3.3 Thanh Tag
Là thanh nằm ngang, ngay phía trên thanh Properties. Đây là nơi hiện ra các tag chứa đối tượng
mà bạn đang chọn. Nghĩa là nếu bạn muốn biết một đối tượng nào đó nằm trong các tag nào, hãy
chọn nó rồi nhìn vào thanh này.
4. Panel group
Là vùng nằm dọc bên phải của vùng soạn thảo. Đây là nơi chứa rất nhiều thông tin mà bạn có thể
dùng để tạo và định dạng trang, các panel thường dùng trong đây là Insert, CSS, Files
a. Insert bar
Là toolbar dùng để chèn các đối tượng vào trang web (table, hình, form, div…). Ẩn hiện thanh
này bằng cách vào menu Window => Insert
b. Css bar
Là toolbar dùng để định dạng các tag bằng kỹ thuật CSS. Ẩn hiện thanh này bằng cách vào
menu Window => CSS Designer
c. Css bar
Là toolbar dùng để quản lý các file trong website. Ẩn hiện thanh này bằng cách vào menu
Window => Files
d. Dom bar
Là toolbar dùng để quản lý cấu trúc các tag trong trang theo dạng cấu trúc cây thư mục. Dùng
thanh này để chọn tag, duplicate tag, di chuyển, xóa tag… rất hay, nhất là với các trang web có
cấu trúc phức tạp (dựa trên bootstrap) mà bạn sẽ học sau. Ẩn hiện thanh này bằng cách vào
menu Window => DOM
(còn tiếp)
Xem thêm:
