Giáo trình Macromedia Dreamweaver 8

Chia sẻ: LeoNguyen.com | Ngày: | Loại File: PDF | Số trang:47

Thêm vào BST

Báo xấu

207
lượt xem 70
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

C1: Click chọn nút Đóng-Close . C2: Double Click lên Biểu tượng của Dreamweaver (góc trên trái của Cửa sổ Dreamweaver). C3: Click chuột phải lên thanh tiêu đề rồi chọn Close . C4: Click chọn menu Exit. Ấn phím Ctrl + Q.Ấn phím Ctrl + F3. Thu gọn/Mở rộng: Click chọn tên khung để thu gọn. Click chọn tên khung để thu gọn. Ẩn/Hiện: Click nút để ẩn khung công cụ. Click nút để hiện khung công cụ. Di chuyển: Trỏ chuột vào các dấu chấm bên cạnh tên khung, khi đó trỏ chuột có biểu tượng , giữ và kéo đến nơi muốn...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giáo trình Macromedia Dreamweaver 8

Giaùo trình Macromedia Dreamweaver 8 Dreamweaver 8 Khởi động-Open,Thoát-Exit - Là 1 chương trình ứng dụng trong bộ Macromedia, dùng để thiết kế Web (tĩnh hoặc động). Dạng Web Cách thiết kế Giới thiệu- Introduction Tĩnh-Static (*) Công cụ-Design (*) Động-Dynamic Mã-Code C1: Click chọn nút > chọn > chọn Macromedia > chọn Macromedia Dreamweaver 8 . Khởi động-Open - Click chọn nút Designer > chọn nút . C1: Click chọn nút Đóng-Close . C2: Double Click lên Biểu tượng của Dreamweaver (góc trên trái của Cửa sổ Thoát-Exit Dreamweaver). C3: Click chuột phải lên thanh tiêu đề rồi chọn Close . C4: Click chọn menu > Exit. Ấn phím Ctrl + Q. Giao diện-Interface Thanh Trình đơn-Menu bar Thanh công cụ- * Thanh công cụ Chèn-Insert: Tool bar, Khung công cụ- Panel - Bật/Tắt: Click chọn menu > chọn Insert. Ấn phím Ctrl + F2. - Chọn nhóm công cụ: Click chọn nút nhóm công cụ > chọn nhóm các công cụ ở khung danh sách . * Khung panel công cụ Thuộc tính-Properties: - Bật/Tắt: Click chọn menu > chọn Properties. leonguyen.com 1
Giaùo trình Macromedia Dreamweaver 8 Ấn phím Ctrl + F3. - Thu gọn/Mở rộng: + Click chọn tên khung để thu gọn. + Click chọn tên khung để thu gọn. - Ẩn/Hiện: + Click nút để ẩn khung công cụ. + Click nút để hiện khung công cụ. - Di chuyển: Trỏ chuột vào các dấu chấm bên cạnh tên khung, khi đó trỏ chuột có biểu tượng , giữ và kéo đến nơi muốn di chuyển. * Khung panel công cụ Tập tin-Files: - Bật/Tắt: Click chọn menu > chọn Files. Ấn phím F8. - Thu gọn/Mở rộng: + Click chọn tên khung để thu gọn. + Click chọn tên khung để thu gọn. - Di chuyển: Trỏ chuột vào các dấu chấm bên cạnh tên khung, khi đó trỏ chuột có biểu tượng , giữ và kéo đến nơi muốn di chuyển. - Ẩn/Hiện: + Click nút để ẩn khung công cụ. + Click nút để hiện khung công cụ. - Chọn thẻ: + Chọn thẻ để quản lý website dưới dạng cây thư mục, tập tin: + Chọn thẻ để quản lý tài nguyên của website gồm: các file ảnh, đa phương tiện, flash, liên kết …: Trong đó: Nút Images để quản lý hình ảnh. Nút Colors để quản lý màu. Nút URLs để quản lý liên kết. Nút Flash để quản lý file Flash. Nút Shockwave để quản lý file Flash. Nút Movies để quản lý phim. Nút Scripts để quản lý đoạn mã nguồn. Nút Templates để quản lý trang Web mẫu. Nút Library để quản lý thư viện. leonguyen.com 2
Giaùo trình Macromedia Dreamweaver 8 - Là Trang Bắt đầu-Start Page. Vùng làm việc- Workspace Site (Thư mục Web) Thư mục Web Thư mục trên máy tính cục bộ (Local site) Thư mục trên mạng cục bộ (LAN) hay Internet (Remote site) Cục bộ - Local Phân loại ` ` ` Từ xa - Remote Site Site images images resource Cấu trúc html Templates Library Tạo mới- * Mở hộp thoại Định nghĩa Site-Site Definition: New C1: Click chọn menu > chọn New Site. C2: Chọn mục trên Trang Bắt đầu-Start Page. - Xuất hiện hộp thoại Định nghĩa Site-Site Definition: leonguyen.com 3
Giaùo trình Macromedia Dreamweaver 8 - Chọn thẻ : B1: Mục Editing Files: - Nhập tên site vào hộp . VD: Truong Tin Viet. - Nhập địa chỉ site vào hộp . VD: http://www.truongtinviet.com. - Click chọn nút . - Click chọn hộp nếu bạn tạo ra web tĩnh. Hay Click chọn hộp nếu bạn tạo ra web động > chọn công nghệ ở hộp , các công nghệ là . - Click chọn nút . - Click chọn hộp để làm việc với tập tin trên máy tính cục bộ trước rồi sau đó sẽ tải lên máy chủ khi cần thiết hay site cục bộ > chọn thư mục Web ở hộp . Hay Click chọn hộp để làm việc trực tiếp với tập tin trên máy chủ thông qua mạng cục bộ hay site từ xa > chọn thư mục Web qua mạng ở hộp . - Click chọn nút . B2: Mục Sharing Files: - Chọn cách thức kết nối với máy chủ ở hộp , các cách thức là leonguyen.com 4
Giaùo trình Macromedia Dreamweaver 8 . o Chọn None khi là site cục bộ (Local site). o Chọn Local/Network khi là site trên mạng cục bộ (Remote site), khi đó chọn thư mục site ở hộp . o Chọn FTP khi là site trên Internet (Remote site), khi đó: Nhập địa chỉ FTP của máy chủ Web vào hộp . VD: www.freewebs.com. Nhập thư mục trên máy chủ Web vào hộp . VD: Để trống nếu dùng thư mục gốc. Nhập tên đăng nhập vào hộp . VD: abcd. Nhập mật khẩu vào hộp . VD: 123456. Click chọn nút để kiểm tra kết nối. - Click chọn nút . - Chọn thẻ : + Chọn Local Info để thiết lập cấu hình cho Site cục bộ: o Nhập tên Site vào hộp . o Nhập thư mục site vào hộp . o Nhập thư mục hình ảnh site vào hộp . + Chọn Remote Info để thiết lập cấu hình cho Site cục bộ: o Chọn cách thức kết nối với máy chủ ở hộp , các cách thức là . Chọn None khi là site cục bộ (Local site). Chọn Local/Network khi là site trên mạng cục bộ (Remote site), khi đó chọn thư mục Web ở hộp . Chọn FTP khi là site trên Internet (Remote site), khi đó: Nhập địa chỉ FTP của máy chủ Web vào hộp . VD: www.freewebs.com. Nhập thư mục trên máy chủ Web vào hộp . VD: Để trống nếu dùng thư mục gốc. Nhập tên đăng nhập vào hộp . VD: abcd. Nhập mật khẩu vào hộp . VD: 123456. Chọn hộp để đồng bộ thư mục site ở cả máy cục bộ và máy chủ. Click chọn nút để kiểm tra kết nối. Lưu-Export * Mở hộp thoại Quản lý Site-Manage Site: leonguyen.com 5
Giaùo trình Macromedia Dreamweaver 8 C1: Click chọn menu > chọn Manage Sites. C2: Click chọn hộp trên khung công cụ Files > chọn Manage Sites. C3: Click chọn mục Desktop trong hộp > chọn bên cạnh. - Xuất hiện hộp thoại Quản lý Site-Manage Site: - Chọn nút > xuất hiện hộp thoại Export Site: - Đặt tên tập tin Site và lưu vào trong thư mục Web. VD: tinviet. - Mở hộp thoại Quản lý Site-Manage Site: Gỡ bỏ- - Click chọn tên site ở khung danh sách. Remove - Click chọn nút . - Mở hộp thoại Quản lý Site-Manage Site: - Click chọn tên site ở khung danh sách. - Click chọn nút > xuất hiện hộp thoại Import Site để chọn tập tin Site đã lưu trong thư mục Web: Mở-Import - Mở hộp thoại Quản lý Site-Manage Site: Hiệu chỉnh- - Click chọn tên site ở khung danh sách. Edit - Click chọn nút > xuất hiện hộp thoại Định nghĩa Site-Site Definition như trên. - Mở hộp thoại Quản lý Site-Manage Site: Sao chép- - Click chọn tên site ở khung danh sách. Duplicate - Click chọn nút . * Chọn danh sách site: Click chọn hộp trên khung panel công cụ Files > chọn tên site. * Xem site: Click chọn hộp trên khung công cụ Files > chọn dạng xem . Xem-View - Local view: Xem site cục bộ. - Remote view: Xem site từ xa. - Testing Server: Xem site được kiểm tra trên server. - Map view: Xem bản đồ site. leonguyen.com 6
Giaùo trình Macromedia Dreamweaver 8 - Nút Connects to remote host để kết nối hay ngắt kết nối với site từ xa (remote site). - Nút Refresh để cập nhật cây thư mục, tập tin. - Nút Get File(s) để chép tập tin từ site từ xa (remote site) cho site cục bộ (local site), tùy thuộc vào Enable File Check In và Check Out. - Nút Put File(s) để chép tập tin từ site cục bộ (local site) cho site từ xa (remote site), tùy thuộc vào Công cụ- Enable File Check In và Check Out. Tool - Nút Check Out File(s) để kiểm tra site từ xa (remote site) từ đó chép vào hay chép đè lên tập tin trên site cục bộ (local site). - Nút Check Out File(s) để kiểm tra site cục bộ (local site) từ đó chép vào hay chép đè lên tập tin trên site từ xa (remote site). - Nút Expand to show local and remote site để mở rộng khung công cụ panel Files cho thấy đồng thời các tập tin trên site cục bộ (local site) và các tập tin trên site từ xa (remote site). Trang-Page (Tập tin Web) Trang mẫu-Template – DWT - Là trang cho phép sử dụng lại những thành phần giống nhau mà không cần phải thiết kế. Khái niệm - Đây là trang bố cục của 1 Website. 1 mục đích Mục đích Thiết kế bộ cụ-Layout Design 2 trang Trang mẫu-Template Các trang dùng Templates index .html Template .html Phân loại *.html - Trong đó: o Trang mẫu-Template: là tập tin .dwt (Dreamweaver Template) với phần thiết kế cho bố cục dùng chung, trong đó có 2 loại vùng: vùng được khóa và vùng không khóa. o Trang sử dụng Template: là tập tin .html bình thường nhưng có bố cục giống y như trang mẫu và bạn chỉ được phép hiệu chỉnh, nhập nội dung mới cho các vùng không khóa. - Khi có sự thay đổi trong trang mẫu thì các vùng khóa của các trang sử dụng Template cũng sẽ tự động cập nhật theo. - Vì thế bạn nên sử dụng Template khi cần tạo ra nhiều trang cùng mẫu thiết kế với thao tác sẽ nhanh hơn nhiều lần. Bật/Tắt thanh - Click chuột phải lên thanh công cụ Insert > chọn Document. công cụ Trang- Document Bật/Tắt thanh - Click chuột phải lên thanh công cụ Insert > chọn Standard. công cụ Chuẩn- Standard Tạo mới-New * Dùng khung công cụ Files-Files Panel: - Chọn thẻ > chọn nút Templates > chọn nút New Template . - Xuất hiện trang mẫu mới ở khung danh sách > nhập tên trang mẫu > ấn phím Enter. * Dùng hộp thoại: - Mở hộp thoại New Document: C1: Click chọn mục trên trang Start. C2: Click chọn nút New trên thanh công cụ Chuẩn. C3: Click chọn menu > chọn New. Ấn phím Ctrl + N. - Xuất hiện hộp thoại New Document: leonguyen.com 7
Giaùo trình Macromedia Dreamweaver 8 - Chọn thẻ : Click chọn mục Basic page trong nhóm Category > chọn HTML template trong nhóm Basic page > chọn nút . - Khi đó Dreamweaver sẽ tạo mới 1 trang mẫu có tên dùng tạm là Untitled-Số được thể hiện dưới dạng thẻ . * Lưu trang: C1: Click chọn nút Save trên thanh công cụ Chuẩn. C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save. C3: Click chọn menu > chọn Save. Ấn phím Ctrl + S. - Xuất hiện hộp thoại Save As: Lưu trữ-Save - Chọn vị trí trang mẫu cần lưu ở hộp . VD: MyWeb. - Gõ tên trang mẫu cần lưu ở hộp > chọn . VD: Template. - Khi đó trang mẫu được lưu với phần mở rộng *.dwt * Cập nhật trang (1 trang): C1: Click chọn nút Save trên thanh công cụ Chuẩn. C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save. C3: Click chọn menu > chọn Save. Ấn phím Ctrl + S. * Cập nhật trang (tất cả trang): C1: Click chọn nút Save trên thanh công cụ Chuẩn. C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save All. C3: Click chọn menu > chọn Save All. * Lưu 1 bản sao của trang: Click chọn menu > chọn Save As. Ấn phím Ctrl + Shift + S. Tiêu đề-Title - Nhập tiêu đề trang ở hộp trên thanh công cụ trang. leonguyen.com 8
Giaùo trình Macromedia Dreamweaver 8 Thiết kế-Design - Nội dung tiếp theo. - Chọn đối tượng muốn không khóa. - Mở hộp thoại New Editable Region: C1: Click chọn nút Templates > xuất hiện danh sách là > chọn Editable Region. Định vùng không khóa C2: Click chọn menu > chọn Template Objects > Editable Region. Ấn phím Ctrl + Alt + V. - Sau đó xuất hiện hộp thoại New Editable Region: + Nhập tên vùng không khóa vào hộp . VD: Noidung. - Khi đó sẽ xuất hiện biểu tượng của vùng không khóa trên trang là . C1: Click chọn nút Preview/Debug in browser trên thanh công cụ Document > chọn loại trình duyệt. Duyệt-Browse C2: Click chọn menu > chọn Preview in Browser > chọn loại trình duyệt. C3: Click chuột phải lên vùng trống trong khung panel công cụ Files > chọn Preview in Browser > chọn loại trình duyệt. Ấn phím F12. * In mã (code) HTML của trang: C1: Click chọn nút Print Code trên thanh công cụ Chuẩn. C2: Click chọn menu > chọn Print Code. Ấn phím Ctrl + P. - Xuất hiện hộp thoại Print: In-Print * In hình ảnh của trang: - Duyệt trang bằng 1 trình duyệt bất kỳ. Click chọn menu > chọn Print. Ấn phím Ctrl + P. * 1 trang: C1: Click chọn nút Close trên thanh thẻ trang. C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Close. C3: Click chọn menu > chọn Close. Đóng-Close Ấn phím Ctrl + W. * Tất cả trang: C1: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Close All. C2: Click chọn menu > chọn Close All. Ấn phím Ctrl + Shift + W. Mở-Open * Dùng khung panel công cụ Files: leonguyen.com 9
Giaùo trình Macromedia Dreamweaver 8 - Chọn thẻ > chọn nút Templates : C1: Double Click lên trang mẫu cần mở. C2: Chọn trang mẫu > chọn nút Edit . * Dùng hộp thoại: C1: Click chọn mục trên trang Start. C2: Click chọn nút Open trên thanh công cụ Chuẩn. C3: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Open. C4: Click chọn menu > chọn Open. Ấn phím Ctrl + O. - Xuất hiện hộp thoại Open: - Chọn vị trí trang trang mẫu cần mở ở hộp . - Chọn trang mẫu cần mở ở khung danh sách bên dưới rồi chọn . VD: Template. Trang thư viện-Library – LBI - Nếu Template được dùng để mô tả cho bố cục tổng thể của trang Web thì Library chỉ quan tâm Khái niệm đến các thành phần độc lập trên trang Web. 1 mục đích Mục đích Trình bày nội dung-Content Insert Bật/Tắt thanh - Click chuột phải lên thanh công cụ Insert > chọn Document. công cụ Trang- Document Bật/Tắt thanh - Click chuột phải lên thanh công cụ Insert > chọn Standard. công cụ Chuẩn- Standard Tạo mới-New * Dùng khung công cụ Files-Files Panel: - Chọn thẻ > chọn nút Library > chọn nút New Library item . - Xuất hiện trang thư viện mới ở khung danh sách > nhập tên trang thư viện > ấn phím Enter. * Dùng hộp thoại: - Mở hộp thoại New Document: C1: Click chọn mục trên trang Start. C2: Click chọn nút New trên thanh công cụ Chuẩn. C3: Click chọn menu > chọn New. Ấn phím Ctrl + N. - Xuất hiện hộp thoại New Document: leonguyen.com 10
Giaùo trình Macromedia Dreamweaver 8 - Chọn thẻ : Click chọn mục Basic page trong nhóm Category > chọn Library item trong nhóm Basic page > chọn nút . - Khi đó Dreamweaver sẽ tạo mới 1 trang thư viện có tên dùng tạm là Untitled-Số được thể hiện dưới dạng thẻ . * Lưu trang: C1: Click chọn nút Save trên thanh công cụ Chuẩn. C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save. C3: Click chọn menu > chọn Save. Ấn phím Ctrl + S. - Xuất hiện hộp thoại Save As: Lưu trữ-Save - Chọn vị trí trang thư viện cần lưu ở hộp . VD: MyWeb. - Gõ tên trang thư viện cần lưu ở hộp > chọn . VD: Template. - Khi đó trang thư viện được lưu với phần mở rộng *.lbi * Cập nhật trang (1 trang): C1: Click chọn nút Save trên thanh công cụ Chuẩn. C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save. C3: Click chọn menu > chọn Save. Ấn phím Ctrl + S. * Cập nhật trang (tất cả trang): C1: Click chọn nút Save trên thanh công cụ Chuẩn. C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save All. C3: Click chọn menu > chọn Save All. * Lưu 1 bản sao của trang: Click chọn menu > chọn Save As. Ấn phím Ctrl + Shift + S. Trình bày-Insert - Nội dung tiếp theo. leonguyen.com 11
Giaùo trình Macromedia Dreamweaver 8 Duyệt-Browse - Giống trang mẫu. In-Print - Giống trang mẫu. Đóng-Close - Giống trang mẫu. * Dùng khung panel công cụ Files: - Chọn thẻ > chọn nút Library : C1: Double Click lên trang thư viện cần mở. C2: Chọn trang thư viện > chọn nút Edit . * Dùng hộp thoại: C1: Click chọn mục trên trang Start. C2: Click chọn nút Open trên thanh công cụ Chuẩn. C3: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Open. C4: Click chọn menu > chọn Open. Ấn phím Ctrl + O. - Xuất hiện hộp thoại Open: Mở-Open - Chọn vị trí trang thư viện cần mở ở hộp . - Chọn trang thư viện cần mở ở khung danh sách bên dưới rồi chọn . VD: Template. Trang-Page - HTML 2 mục đích Mục đích Áp dụng Trang mẫu-Template Chèn Trang thư viện-Library Bật/Tắt thanh công - Click chuột phải lên thanh công cụ Insert > chọn Document. cụ Trang-Document Bật/Tắt thanh công - Click chuột phải lên thanh công cụ Insert > chọn Standard. cụ Chuẩn-Standard Tạo mới-New * Dùng trang Start: Click chọn mục trên trang Start. * Dùng khung panel công cụ Files: Click chuột phải lên vùng trống > chọn New File > nhập tên trang Web kèm theo đuôi (ví dụ index.htm) * Dùng hộp thoại: - Mở hộp thoại New Document: C1: Click chọn mục trên trang Start. C2: Click chọn nút New trên thanh công cụ Chuẩn. C3: Click chọn menu > chọn New. Ấn phím Ctrl + N. - Xuất hiện hộp thoại New Document: leonguyen.com 12
Giaùo trình Macromedia Dreamweaver 8 - Chọn thẻ : Click chọn mục Basic page trong nhóm Category > chọn HTML trong nhóm Basic page > chọn nút . - Khi đó Dreamweaver sẽ tạo mới 1 trang có tên dùng tạm là Untitled-Số được thể hiện dưới dạng thẻ . * Lưu trang: C1: Click chọn nút Save trên thanh công cụ Chuẩn. C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save. C3: Click chọn menu > chọn Save. Ấn phím Ctrl + S. - Xuất hiện hộp thoại Save As: Lưu trữ-Save - Chọn vị trí trang cần lưu ở hộp . VD: MyWeb. - Gõ tên trang cần lưu ở hộp > chọn . - Khi đó trang được lưu với phần mở rộng *.html * Cập nhật trang (1 trang): C1: Click chọn nút Save trên thanh công cụ Chuẩn. C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save. C3: Click chọn menu > chọn Save. Ấn phím Ctrl + S. * Cập nhật trang (tất cả trang): C1: Click chọn nút Save trên thanh công cụ Chuẩn. C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save All. C3: Click chọn menu > chọn Save All. * Lưu 1 bản sao của trang: Click chọn menu > chọn Save As. Ấn phím Ctrl + Shift + S. Áp dụng Trang mẫu- * Áp dụng Trang mẫu-Template: Template - Mở trang muốn áp dụng trang mẫu. leonguyen.com 13
Giaùo trình Macromedia Dreamweaver 8 - Áp dụng: C1: Chọn thẻ > chọn nút Templates > chọn trang mẫu ở khung danh sách > chọn nút . C2: Click chọn menu > chọn Templates > chọn Apply Template to Page. * Cập nhật trang sử dụng Trang mẫu-Template: - Click chọn menu > chọn Templates > chọn Update Current Page. (Cho trang hiện tại) - Click chọn menu > chọn Templates > chọn Entire Page. (Cho trang hiện tại) * Tách ra khỏi Trang mẫu-Template: - Click chọn menu > chọn Templates > chọn Detach from Template. Chèn Trang thư - Chọn thẻ > chọn nút Library > chọn trang mẫu ở khung danh sách > chọn nút viện-Library . Duyệt-Browse - Giống trang mẫu. In-Print - Giống trang mẫu. Đóng-Close - Giống trang mẫu. * Dùng khung panel công cụ Files: - Double Click lên trang cần mở. - Click chuột phải lên trang > chọn Open. * Dùng hộp thoại: C1: Click chọn mục trên trang Start. C2: Click chọn nút Open trên thanh công cụ Chuẩn. C3: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Open. C4: Click chọn menu > chọn Open. Ấn phím Ctrl + O. - Xuất hiện hộp thoại Open: Mở-Open - Chọn vị trí trang cần mở ở hộp . - Chọn trang cần mở ở khung danh sách bên dưới rồi chọn . leonguyen.com 14
Giaùo trình Macromedia Dreamweaver 8 Thiết kế-Design - Thiết kế trang là công đoạn quan trọng trong thiết kế Web, cần những họa sĩ chuyên nghiệp để thiết kế Giới thiệu bố cục cho trang như: logo, banner, nút, nội dung văn bản, hình ảnh … , là công việc đòi hỏi tính mỹ thuật và cần độ chính xác cao. Chế độ-Mode Chuẩn-Standard Phân loại Chế độ- Mở rộng-Expanded Mode Đồ họa-Layout - Chế độ Chuẩn-Standard, Mở rộng Expanded: Thiết kế dựa dựa trên thao tác chèn. - Chế độ Đồ họa-Layout: Thiết kế dựa dựa trên thao tác vẽ. - Click chọn nút nhóm công cụ > chọn nhóm công cụ Layout ở khung danh sách Mở thanh công cụ Layout > khi đó xuất hiện thanh công cụ Layout là: Chuẩn-Standard hay Mở rộng-Expanded * Chuẩn-Standard: Click chọn nút . - Sau đó xuất hiện các công cụ cho thiết kế chế độ Chuẩn là . * Mở rộng-Expanded: Mở chế độ Click chọn nút . Ấn phím F6. - Sau đó xuất hiện các công cụ cho thiết kế chế độ Mở rộng là và thông báo trạng thái là trên vùng thiết kế trang. Bảng-Table Chèn-Insert Chèn - Click chọn nút Table > xuất hiện hộp thoại Table: bảng * Nhóm Kích thước bảng-Table size: - Nhập số dòng vào hộp . VD: 3. - Nhập số cột vào hộp . VD: 1. - Nhập độ rộng của bảng vào hộp . - Nhập độ dày của đường viền bảng vào hộp . VD: 0. - Nhập khoảng cách nội dung ô so với viền ô vào hộp . VD: 0. leonguyen.com 15
Giaùo trình Macromedia Dreamweaver 8 - Nhập khoảng cách giữa các ô vào hộp . VD: 0. * Nhóm Tiêu đề bảng-Header và Tùy chọn-Accessibility: - Chọn vị trí tiêu đề bảng: C1: + Nút : Bảng không có tiêu đề. + Nút : Tiêu đề nằm bên trái bảng. + Nút : Tiêu đề nằm bên trên bảng. + Nút : Tiêu đề nằm bên hai bên trái hay trên bảng. C2: Click chọn vị trí tiêu đề ở hộp , trong đó có các vị trí là . - Nhập nội dung tiêu đề vào hộp . - Nhập chú thích bảng vào hộp . - Khi đó trong vùng thiết kế xuất hiện bảng là . Trong đó: + là Header của bảng-Table Header, Click chọn nút độ rộng của bảng thì xuất hiện menu Header của bảng là . + là Header của cột-Column Header, Click chọn nút mũi tên xuống thì xuất hiện menu Header của cột là . Chèn nội - Có thể chèn văn bản, hình ảnh, đa phương tiện, flash … dung Chọn-Select C1: Đặt con trỏ nháy trong ô. Ô-Cell C2: Click chọn thẻ . Dòng-Row C1: Trỏ chuột vào đầu dòng khi đó con trỏ chuột có biểu tượng là rồi Click chọn. C2: Click chọn thẻ . C1: Trỏ chuột vào đầu cột khi đó con trỏ chuột có biểu tượng là rồi Click chọn. Cột- C2: Chọn nút mũi tên xuống trên Header của cột > khi đó xuất hiện menu Header của cột là Column > chọn Select Column. Bảng- Table C1: Trỏ chuột vào đường viền dưới hay trên bảng khi đó biểu tượng con trỏ chuột là rồi Click chọn. C2: Chọn nút mũi tên xuống trên Header của bảng > khi đó xuất hiện menu leonguyen.com 16
Giaùo trình Macromedia Dreamweaver 8 Header của bảng là > chọn Select Table. C3: Chọn 1 ô trong bảng > Click chuột phải > chọn Table > chọn Select Table. C4: Click chọn thẻ . Hiệu chỉnh-Edit Thêm - Chọn dòng. dòng - Click chuột phải > chọn Table > chọn Insert Row (mặc định là bên trên). - Chọn cột. - C1: Chọn nút mũi tên xuống trên Header của cột > khi đó xuất hiện menu Header của cột là Thêm cột > chọn Insert Column Left để thêm 1 cột vào bên trái cột đã chọn hay chọn Insert Column Right để thêm 1 cột vào bên phải cột đã chọn. C2: Click chuột phải > chọn Table > chọn Insert Column (mặc định là bên trái). - Click chuột phải > chọn Table > chọn Insert Rows or Columns > xuất hiện hộp thoại Insert Rows or Columns: Thêm dòng hoặc cột - Sau đó thêm dòng hay cột tùy ý. Xóa dòng - Chọn dòng > ấn phím Delete. Xóa cột - Chọn cột > ấn phím Delete. Xóa bảng - Chọn bảng > ấn phím Delete. Gộp ô- C1: Chọn 1 nhóm ô trong bảng > Click chuột phải > chọn Table > chọn Merge Cells. Merge C2: Click chọn nút Merges seleted cells using spans trên thanh Thuộc tính của ô. Ấn phím Ctrl + Alt + M. C1: Chọn 1 ô trong bảng > Click chuột phải > chọn Table > chọn Split Cell. C2: Click chọn nút Splits cell in to rows or columns trên thanh Thuộc tính của ô. Ấn phím Ctrl + Alt + S. Tách ô- - Khi đó xuất hiện hộp thoại Split Cell: Split * Tự động: (tùy theo kích thước của trang thiết kế hay cửa sổ trình duyệt) o Dùng nút Tiêu đề cột-Column Header: - Click chọn nút Header của cột > chọn Make Column Autostretch. o Dùng khung Thuộc tính-Properties: Kích - Click chọn hộp để thay đổi kích thước tự động. thước- * Cố định: (không thể thay đổi kích thước lại bằng tay hay tự động nữa) Size o Thiết lập: Click chọn nút Header của cột > chọn Add Spacer Image > khi đó Column Header của cột có dạng . o Xóa bỏ (Cột hiện tại): Click chọn nút Header của cột > chọn Remove Spacer Image. o Xóa bỏ (Tất cả cột): Click chọn nút Remove All Spacers trên khung Thuộc tính. * Chiều cao tự động: o Thiết lập: o Xóa (Hiện tại): Khác o Xóa (Tất cả): - Click chọn nút Header của bảng > chọn: + Clear All Height: xoá chiều cao tự động. + Remove Nesting: gỡ bỏ table con chứa cell. Định dạng-Format leonguyen.com 17
Giaùo trình Macromedia Dreamweaver 8 Ô, Dòng, Cột-Cell, Row, Column * Văn bản trong ô: - Chọn định dạng tiêu đề văn bản ở hộp . - Chọn font chữ ở hộp . - Chọn cỡ chữ ở hộp , các cỡ chữ có thể chọn là , Click chọn hộp thứ 2 để chọn đơn vị cỡ chữ là . - Chọn màu chữ ở hộp Text Color > khi đó xuất hiện hiện bảng màu và biểu tượng con trỏ chuột là để chọn màu. - Chọn nút Bold để chữ đậm. - Chọn nút Italic để chữ nghiêng. - Chọn nút Align Left để canh lề trái văn bản. - Chọn nút Align Center để canh lề giữa văn bản. - Chọn nút Align Right để canh lề phải văn bản. - Chọn nút Align Justify để canh lề 2 bên văn bản. - Chọn nút Unordered List để đánh dấu đầu đoạn. - Chọn nút Ordered List để đánh số đầu đoạn. - Chọn nút Text Outdent để tăng thụt đoạn. - Chọn nút Text Outdent để giảm thụt đoạn. - Chọn hướng ngang của văn bản ở hộp > xuất hiện các danh sách các vị trí trái, giữa, phải . Left-Trái Giữa-Center Phải-Right - Chọn hướng dọc của văn bản ở hộp > xuất hiện các danh sách các vị trí trên, giữa, dưới . Top-Trên Giữa-Middle Dưới-Bottom leonguyen.com 18
Giaùo trình Macromedia Dreamweaver 8 Center (H) Right (H) Left (H) Top (V) Top (V) Top (V) Left (H) Right (H) Middle (V) Middle (V) Left (H) Center (H) Right (H) Bottom (V) Bottom (V) Bottom (V) * Ô, Cột, Dòng: - Nhập chiều rộng ở hộp . - Nhập chiều dài ở hộp . - Chọn hình nền ở hộp . - Chọn màu nền ở hộp . - Chọn màu đường viền ở hộp . Màu viền Màu nền , Hình nền Bảng- Table - Nhập chỉ số bảng hay tên bảng vào hộp . - Nhập số dòng vào hộp . - Nhập số cột vào hộp . - Nhập chiều rộng (theo pixel hay tỉ lệ %) của bảng vào hộp , Click chọn để chọn loại đơn vị là . - Chọn nút Convert Table Widths to Pixels để chuyển đơn vị đo chiều rộng của bảng sang pixel. - Chọn nút Convert Table Widths to Percent để chuyển đơn vị đo chiều rộng của bảng sang phần trăm %. - Nhập chiều dài (theo pixel hay tỉ lệ %) của bảng vào hộp , Click chọn hộp thứ 2 để chọn loại đơn vị là . - Chọn nút Convert Table Heights to Pixels để chuyển đơn vị đo chiều dài của bảng sang pixel. - Chọn nút Convert Table Heights to Percent để chuyển đơn vị đo chiều dài của bảng sang pixel. - Chọn canh lề bảng so với trang ở hộp với các giá trị lề là . Trái Giữa Phải Left Center Right - Nhập độ dày đường viền bảng vào hộp . - Chọn màu nền của bảng ở nút > khi đó xuất hiện hiện bảng màu và biểu tượng con trỏ chuột là để chọn màu. - Chọn màu đường viền của bảng ở nút > khi đó xuất hiện hiện bảng màu và biểu tượng con trỏ chuột là để chọn màu. leonguyen.com 19
Giaùo trình Macromedia Dreamweaver 8 - Chọn hình nền của bảng ở nút . Màu viền Màu nền , Hình nền - Chọn nút Clear Column Widths để xóa chiều rộng thừa. - Chọn nút Clear Row Heigths để xóa chiều dài thừa. Đồ họa-Layout Click chọn nút . Ấn phím Ctrl + F6. Mở chế độ - Sau đó xuất hiện các công cụ cho thiết kế chế độ Layout là và thông báo trạng thái là trên vùng thiết kế trang. 1 Bảng trình bày-Layout Table Nhiều Ô trình bày-Layout Cell Định nghĩa - 1 Bảng Layout gồm có nhiều dòng, mỗi dòng có nhiều Ô Layout, số Ô Layout trên mỗi dòng có thể khác nhau. - 1 trang chỉ có 1 Bảng Layout. - Trong 1 Bảng Layout có thể chứa 1 Bảng Layout con. Bảng trình bày-Layout Table - Click chọn nút Layout Table > khi đó biểu tượng con trỏ chuột có hình . - Giữ vào kéo chuột trên vùng thiết kế trang > khi đó xuất hiện 1 Bảng Layout . Trong đó: - Thẻ cho biết đây là Bảng Layout. Vẽ-Draw - Các Tiêu đề-Header: + Của cột , Click chọn nút độ rộng của cột sẽ xuất hiện menu header của cột là . + Của bảng , Click chọn nút độ rộng của bảng sẽ xuất hiện menu header của bảng là . Hiệu chỉnh-Edit - Trỏ chuột vào thẻ của Bảng Layout > khi đó xuất hiện 2 nút vuông xanh lá xung quanh Bảng Chọn- Select Layout . Xóa-Delete - Chọn Bảng Layout > ấn phím Delete. o Dùng thao tác kéo thả chuột: - Trỏ chuột vào các nút hình vuông xanh lá trên đường viền của Bảng Layout > khi đó biểu tượng con trỏ chuột có các biểu tượng , > giữ và kéo để thay đổi kích thước. Kích thước-Size VD: hay o Dùng khung Thuộc tính-Properties: - Click chọn hộp để thay đổi kích thước bằng tay: - Nhập chiều rộng (đơn vị pixcel) Bảng Layout vào hộp . VD: 740 -> 760. - Nhập chiều cao (đơn vị pixcel) Bảng Layout vào hộp . VD: 500. Màu sắc- Color - Chọn nút > khi đó xuất hiện hiện bảng màu và biểu tượng con trỏ chuột là để chọn màu nền cho Bảng Layout. Khoảng * Văn bản so với viền bảng: Nhập khoảng cách vào hộp . cách- * Giữa các ô trong bảng: Nhập khoảng cách vào hộp . leonguyen.com 20