Giáo trình macromedia dreamweaver 8 ĐẠI HỌC CÔNG NGHỆ THÔNG TIN THÁI NGUYÊN
Giaùo trình Macromedia Dreamweaver 8 Dreamweaver 8 Khởi động-Open,Thoát-Exit Giới thiệu- Introduction - Là 1 chương trình ứng dụng trong bộ Macromedia, dùng để thiết kế Web (tĩnh hoặc động). Khởi động-Open C1: Click chọn nút > chọn > chọn Macromedia > chọn Macromedia Dreamweaver 8 . - Click chọn nút Designer > chọn nút . Thoát-Exit 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. Giao diện-Interface Thanh Trình đơn-Menu bar Thanh công cụ- Tool bar, Khung công cụ- Panel * Thanh công cụ Chèn-Insert: - 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 Dạng Web Tĩnh-Static (*) Động-Dynamic Cách thiết kế Công cụ-Design (*) Mã-Code 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 Vùng làm việc- Workspace - Là Trang Bắt đầu-Start Page. Site (Thư mục Web) Phân loại ` Cục bộ - Local ` ` Từ xa - Remote Cấu trúc Tạo mới- New * Mở hộp thoại Định nghĩa Site-Site Definition: 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 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) Site images Site images resource html Templates Library 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. Gỡ bỏ- Remove - 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 . Mở-Import - 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: Hiệu chỉnh- Edit - 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 Định nghĩa Site-Site Definition như trên. Sao chép- Duplicate - 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 . Xem-View * 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 . - 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 Công cụ- Tool - 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 Enable File Check In và Check Out. - 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 Khái niệm - 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ế. - Đây là trang bố cục của 1 Website. Mục đích Phân loại index.html *.html Template .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 công cụ Trang- Document - Click chuột phải lên thanh công cụ Insert > chọn Document. Bật/Tắt thanh công cụ Chuẩn- Standard - Click chuột phải lên thanh công cụ Insert > chọ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 1 mục đích Thiết kế bộ cụ-Layout Design 2 trang Trang mẫu-Template Các trang dùng Templates 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 trữ-Save * 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: - 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. Định vùng không khóa - 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. 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à . Duyệt-Browse 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. 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-Print * 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 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. Đóng-Close * 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. Ấ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 Khái niệm - 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 đến các thành phần độc lập trên trang Web. Mục đích Bật/Tắt thanh công cụ Trang- Document - Click chuột phải lên thanh công cụ Insert > chọn Document. Bật/Tắt thanh công cụ Chuẩn- Standard - Click chuột phải lên thanh công cụ Insert > chọ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 1 mục đích Trình bày nội dung-Content Insert 10 [...]... leonguyen.com 28 Giaùo trình Macromedia Dreamweaver 8 * Ảnh nền-Background: - 640 x 480 pixels - 80 0 x 600 pixels - 1024 x 7 68 pixels * Biểu tượng-Logo: - Là biểu tượng công ty, tổ chức; thường nằm góc trên bên trái trang - Từ 72 đến 120 pixels * Băng rôn-Banner: - Là hình ảnh quảng cáo, tuyên truyền thông tin quan trọng; thường nằm bên trên trang - Loại nhỏ từ 80 0 x 72 pixels (màn hình 80 0 x 600 pixels),... (tất cả trang): Trình bày-Insert leonguyen.com 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 - Nội dung tiếp theo 11 Duyệt-Browse In-Print Đóng-Close Giaùo trình Macromedia Dreamweaver 8 - Giống trang mẫu... 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... 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 Left (H) Top (V) Center (H) Right (H) Top (V) Top (V) Left (H) Middle (V) Right (H) Middle (V) Left (H) Center (H) Right (H) Bottom (V) Bottom (V) Bottom (V) * Ô, Cột, Dòng: - Nhập... và biểu 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 Mở chế độ Click chọn nút Ấn phím Ctrl + F6 - Sau đó xuất hiện các công cụ cho thiết kế chế độ Layout là trên vùng thiết kế trang và thông báo trạng thái là 1 Bảng trình bày-Layout... bản so với viền bảng: Nhập khoảng cách vào hộp * Giữa các ô trong bảng: Nhập khoảng cách vào hộp leonguyen.com 20 VD: 740 -> 760 VD: 500 và biểu tượng con trỏ chuột là để Giaùo trình Macromedia Dreamweaver 8 Space Ô trình bày-Layout Cell - Click chọn nút vẽ Draw Layout Cell > khi đó biểu tượng con trỏ chuột có hình Vẽ-Draw - Giữ vào kéo chuột trên vùng thiết kế trang > khi đó xuất hiện 1 Ô Layout... viền khung, đặt màu nền … hay thuộc tính tùy vào biến cố chuột - CSS có thể đính kèm trong trang hay lưu riêng thành 1 tập tin kiểu CSS, phục vụ cho nhiều trang leonguyen.com 21 Giaùo trình Macromedia Dreamweaver 8 Trình bày-Insert Văn bản-Text Mở thanh công cụ Text - Click chọn nút nhóm công cụ > khi đó xuất hiện thanh công cụ Text là: > chọn nhóm công cụ Text ở khung danh sách * Mở hộp thoại Page... font chữ nội dung trang Chọn Bộ gõ và Bảng mã leonguyen.com Gõ Tiếng Việt (Unicode) - Click chuột phải lên biểu tượng chương trình gõ Unikey trên thanh Taskbar - Click chọn Bộ gõ là Gõ kiểu VNI và chọn Bảng mã là Unicode (như hình) 22 và biểu Giaùo trình Macromedia Dreamweaver 8 Xuống dòng Nhập văn bản-Type - Ấn phím Shift + Enter để xuống dòng cùng một đoạn (Paragraph) - Ấn phím Enter để xuống dòng...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... 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 Giới thiệu 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ế bố cục cho trang như: logo, banner, nút, nội dung văn bản, hình . Giaùo trình Macromedia Dreamweaver 8 Dreamweaver 8 Khởi động-Open,Thoát-Exit Giới thiệu- Introduction - Là 1 chương trình ứng dụng trong bộ Macromedia, . 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. Định vùng không khóa