BÀI 4 – HƯỚNG DẪN SỬ DỤNG CĂN BẢN DREAMWEAVER

TÓM TẮT

• 1 1. Giới thiệu về Dreamweaver
• 2 2. Thao tác với trang
• 3 3. Màn hình Dreamwevear

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 weba. Tạo trang HTML trống Menu File => New => Blank page => HTML => None => Createb. 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ệca. 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, Filesa. 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 => Insertb. 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 Designerc. 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 menuWindow => Filesd. 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)