Giáo trình DREAMWEAVER

Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Chương 01 TỔNG QUAN VỀ MACROMEDIA DREAMWEAVER Sơ lược Macro Media Dreamweaver Màn hình làm việc Định nghĩa Site Sử dụng bảng điều khiển Site I Sơ Lược Về Dreamweaver Là chương trình dùng để tạo quản lý trang web Phần cốt lõi HTML (HyperText Markup Language - Ngôn ngữ đánh dấu siêu văn bản) Là công cụ mạnh, dễ dùng, công cụ trực quan: Có thể bổ sung Javascrip, biểu mẫu, bảng biểu nhiều loại đối tượng khác mà không cần phải viết dòng mã Cung cấp chế độ làm việc Design WYSIWYG (những thấy có được) chế độ làm việc mã –Code II Màn Hình Làm Việc Khởi động: Start Programs Create New MacroMedia MacroMedia DreamWeaver MX 2004 HTML Màn hình làm việc 2.Thanh trình đơn 1.Thanh tiêu đề Bảng điều khiển 3.Thanh công cụ Insert 4.Thanh công cụ Document Vùng thiết kế 6.Cửa sổ thuộc tính 5.Thanh trạng thái Thanh tiêu đề: Chứa tên tập tin thiết kê Biên so n: D

ng Thành Ph t Trang 78 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Thanh trình đơn: Chứa tập lênh thực chức Thanh công cụ Insert: Chứa nhóm công cụ tạo định dạng đối tượng Thanh công cụ Document: Các hình thức trình bày trang thiết kế Thanh trạng thái: Báo khu vực trang chọn làm việcvà kích thước trang Cửa sổ thuộc tính(Properties):Các thuộc tính đốI tương chọn Bảng điều khiển: Trình bày bảng điều khiển III Định Nghĩa Site Khái quát Site vùng lưu trữ cục máy tính chứa tập tin website bao gồm thư mục chứa tập tin âm thanh, hình ảnh Thiết Lập Cấu Trúc Site Việc tổ chức site cẩn thận từ lúc đầu tiết kiệm thời gian sau Thông thường để xác lập site tạo thư mục gốc đĩa cục chứa tất file web site, sau chép file đến web server Tạo MớI Site Chọn menu Site / Manage Sites New / Site Hộp thoại Site Definition for Unnamed Site hiển thị, có hai lớp (Basic Advanced) Lớp Advanced trình bày tổng quát, lớp Basic trình bày dạng bước (sẽ khác biệt hai lớp này.) Xét lớp Advanced Biên so n: D

ng Thành Ph t Trang 79 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Xác định mục hộp thoại: • [1] Site name: Nhập tên cho site (VD: CLBTinHoc) • [2] Local Root Folder: Xác định thư mục ổ đĩa cục nơi lưu trữ tập tin • [3] Refresh Local File List Automaticaly: Tự động tinh chỉnh thay đổI tập tin có liên quan local site hay không • [4] Default Images Folder: Chỉ định thư mục mặc định lưu trữ tập tin ảnh site • [5] Cache: Chỉ định Cache cục có tạo hay không để cải thiện tốc độ liên kết quản lý tài nguyên site Khuyên nên chọn mục này, nhiên máy không đủ nhớ RAM bỏ qua tùy chọn Xác định xong mục hộp thoại, click OK để tạo site Sites click Done Trở cửa sồ Manage IV Sử Dụng Bảng Điều Khiển Site Bảng điều khiển Site Sử dụng cửa sổ Site cho thao tác quản lý tập tin Site như: tạo trang HTML , xem, mở di chuyển; tạo thư mục xóa thư mục Để mở bảng điều khiển Site nhóm bảng điều khiển chọn Files Các thao tác n lý Local Site Các thao tác quản lý thư mục tập tin tạI cửa sổ Local Site ánh xạ trực tiếp đấn thư mục đĩa cứng a Tạo thư mục Site Click phải tên site(Hoặc thư mục) muốn tạo thư mục New Folder Nhập tên b Tạo tập tin HTML Site Click phảI tên site(Hoặc thư mục) chứa trang HTML Biên so n: D

ng Thành Ph t Trang 80 Bài Gi ng Môn Thi t K Web New File Ph n 4: MacroMedia DreamWeaver Nhập tên c Đổi tên Thư mục tập tin Click phảI tên thư mục(Hoặc tậ p tin ) Edit Rename Nhập tên khác d Nhân đôi tập tin Click phải tên tập tin Edit Duplicate Nhập tên khác e Xóa thư mục tậ p tin HTML Click phảI tên tập tin(hoặc thư mục) Biên so n: D

ng Thành Ph t Edit Delete Trang 81 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Chương 02 THIẾT KẾ TRANG WEB Các thao tác quản lý trang Web Thiết lập thuộc tính trang Tạo định dạng văn Tập tin hình ảnh Tập tin Media Tập tin Flash I Các Thao tác Quản Lý Trang Web Khi tạo site cục bộ, ta tạo trang web để đưa vào site Khi tạo làm việc với trang web, Dreamweaver tự động phát sinh mã nguồn HTML Có cách khác để tạo: Tạo trang web trống hay tạo dựa vào trang web mẫu (template) Tạo trang tài liệu: Chọn menu File / New Hộp thoại New Document hiển thị, Chọn lớp General, chọn Basic page chọn kiểu dạng HTML Nhấn vào nút Create, Lưu trang tài liệu: • Chọn menu lệnh File / Save • Nhập tên cho tập tin chọn thư mục chứa tập tin cần lưu • Click nút Save để lưu Nếu muốn lưu tập tin với tên khác, chọn menu lệnh File / Save as Mở tập tin HTML tồn tại: Chọn menu File / Open, chọn file cần mở nhấn Open để mở Biên so n: D

ng Thành Ph t Trang 82 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver II Thiết Lập Thuộc Tính Trang Tiêu đề trang, ảnh màu nền, màu văn liên kết, lề thuộc tính trang web • Chọn menu Modify/Page Properties Hoặc click chuột phải trên trang thiết kế chọn Page Properties • Hộp thoại Page Properties hiển thị: Thuộc tính chung cho trang: Lớp Appearance (1)-Page Font: Font chữ mặc định cho trang (2)-Size: Cỡ chữ mặc định cho trang (3)-Text color: Màu chữ mặc định cho trang (4)-Background color: Màu trang (5)-BackGround Image: Ảnh cho trang (Ảnh phảI nằm thư mục Site) (6)-Left/Right/Top/Bottom Margin: Lề trang Các thuộc tính chung cho liên kết : Lớp Link (1)-Link Font: Font chữ cho văn liên kết (2)-Size: Cỡ chữ cho văn liên kết (3)-Link color: Màu chữ cho văn liên kết -Visited links: Màu chữ cho văn liên kết viếng thăm -Rollover links: Màu chữ cho văn liên kết rê chuột qua -Active links: Màu chữ cho văn liên kết Click chuột (4)-Underline style: Kiểu gạch chân cho văn liên kết + Never : Không có gạch chân Biên so n: D

ng Thành Ph t Trang 83 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver + Always : Luôn có gạch chân + Show : Hiện thị đường kẽ ngang rê chuột vào + Hide .: Ẩn gạch chân rê chuột vào Tạo mẫu văn đề mục : Lớp Headings Tạo mẫu văn đề mục (Heading1, ) để dùng định dạng Tiêu đề trang: Chọn mục Title/Encoding Title: Nhập tiêu đề cho trang vào mục Encoding: Chọn UTF-8 (nếu trang có sử dụng văn Uniode) III Tạo Và Định Dạng Văn Bản Việc nhập định dạng văn Dreamweaver MX hoàn toàn giống trình soạn thảo văn thông thường Tạo định dạng văn • • Nhập văn trực tiếp cửa sổ Document Để thay đổi Font, kích thước, màu sắc canh lề cho văn chọn sử dụng trình đơn Text truy cập thuộc tính Properties Để nhập văn tiếng Việt, nên sử dụng font bảng mã tương ứng Thông thường nên sử dụng font theo mã Unicode để xem máy Thiết lập thay đổi Font Style: • Chọn văn • Thiết lập tùy chọn sau: o Để thay đổi Font: Chọn tổ hợp font từ Properties (Hay từ menu Text/Font) o Để thay đổi kiểu Font: Click Bold/Italic Properties (Hay chọn kiểu Font menu Text/Style) Biên so n: D

ng Thành Ph t Trang 84 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver o Để thay đổi cỡ chữ: Chọn kích cỡ từ Properties (Hay từ menu Text / Size) kích cỡ từ đến l(Mặc định 3) o Để tăng giảm kích cỡ văn chọn: Chọn kích cỡ tương đối (+1 hay -1 +7 hay -7) từ Properties (Hay từ menu Text / Size) Sử dụng Paragraph Heading: Đặt điểm chèn vào đoạn văn Dùng Format Properties (Hay menu Text/Paragraph Format) để áp dụng đoạn văn chuẩn thẻ Heading Đổi màu văn bản: • Chọn văn muốn đổi màu • Thực hiện: Click ô Text Color Properties (Hay chọn Menu Text/Color) để mở bảng màu , chọn màu bảng Canh chỉnh văn bản: • Chọn văn muốn canh chỉnh hay đặt điểm chèn vào đoạn văn • Click chọn dạng canh lề Properties (Hay chọn menu Text/Align) Thay đổi tổ hợp Font: Sử dụng lệnh Edit Font List để thiết lập tổ hợp font hiển thị Properties menu Text / Font Chọn tổ hợp font từ danh sách phía hộp thoại Edit Font List Các font tổ hợp liệt kê danh sách Chosen Fonts Danh sách Available chứa font cho phép cài đặt Nếu Font tổ hợp cài đặt hiển thị Font mặc định trình duyệt Tạo danh sách mới: • Đặt điểm chèn vị trí muốn tã tạo danh sách(Hoặc nhóm dòng) • Click nút Unordered List hay Ordered List Properties (Hay Menu Text/List chọn kiểu danh sách) ấn Enter để chuyển sang Để hoàn thành danh sách, ấn Enter hai lần Biên so n: D

ng Thành Ph t Trang 85 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Các thuộc tính danh sách: Để xem hay hiệu chỉnh thuộc tính danh sách • Chọn hạng mục danh sách chọn Text / List / Properties (Hay click List Item Properties) Trong hộp thoại List Properties có thuộc tính o List Type: Kiểu đánh dấu danh sách o Style: Kiểu ký tự dùng đánh dấu danh sách o Start Count: Đặt biến bắt đầu đánh dấu cho hạng mục danh sách o New Style: Cho phép chọn kiểu ký tự đánh dấu hạng mục chọn o Reset Count To: Đặt giá trị bắt đầu đánh dấu từ hạng mục chọn Tạo danh sách kết tổ: o Chọn danh sách hạng mục muốn kết tổ o Click nút Text Indent / Text Out Properties (Hay chọn Text/Indent Hoặc Text/Outdent) Sử dụng đường kẻ ngang: Các đường kẻ ngang hữu ích cho việc tổ chức thông tin Trên trang, tách rời văn đối tượng với hay nhiều đường kẻ ngang • Đặt điểm chèn vị trí muốn tạo đường kẻ ngang • Chọn Insert / Horizontal Rule (Hay Click nút Insert Horizontal Rule Panel Objects/HTML) Chỉnh sửa đường kẻ ngang: • Chọn đường kẻ ngang • Chọn điều chỉnh thuộc tính đường kẻ ngang Properties: o W H: định chiều cao bề dày o Align: chọn chế độ canh o Shanding: chọn kiểu bóng đổ Chèn ký hiệu đặc biệt • Đặt điểm chèn vị trí muốn chèn kí hiệu đặc biệt • Chọn Insert/HTML/Special Charcters/ Orter (Hay Click nút Character Panel Objects / Text) Biên so n: D

ng Thành Ph t Trang 86 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Chọn ký hiệu Ok IV Tập Tin Hình Ảnh Khái quát hình ảnh Hình ảnh thành phần quan trọng góp phần trang trí trang web thêm hấp dẫn linh động Tuy nhiên lạI nhân tố gây cản trở tốc độ hiển thị trang web Vì vây cần cân nhắc theo nguyên tăc sau: Màu sắc phảI phù hợp vớI Tone màu chung trang web Đừng lạm dụng nhiều hình ảnh trang Không sử dụng ảnh có kích thước lớn(Nếu cần nên tạo liên kết phóng to) Độ phân giải ảnh thông thường 72dpi Chọn định dạng ảnh phù hợp theo dạng thức loạI ảnh: Jpeg – Jpg : Ảnh tĩnh, hỗ trợ 16 triệu màu, phù hợp với ảnh Gif : Ảnh tĩnh động hỗ trợ 256 màu Swf (Macromedi Flash): Ảnh động véctơ , hỗ trợ 16 triệu màu nhiên để xem máy tính phải cài Flash Plug in Ghi chú: Các hình ảnh phải lưu trữ vào thư mục Site Chèn Ảnh Vào Trang Web a Chèn hình ảnh vào trang Đặt điểm chèn vị trí muốn chèn Click biểu tượng Image công cụ Common (Hoặc trình đơn Insert/ Image) Image Hoặc Tìm chọn ảnh Click Ok Biên so n: D

ng Thành Ph t Trang 87 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Tạo CSS style sheet: TạI cửa sổ CSS Style chọn biểu tượng New Style sheet (Hoặc Click phảI chọn New) Selector Tyle: Chọn kiểu CSS o Class(Can apply to any tag): Định nghĩa kiểu áp dụng lớp thuộc tính định dạng văn Name: Nhập tên cho CSS o Tag(Redefines the locck of a specical tag): Định nghĩa lại thuộc tính thẻ HTML có Tag: Chọn thẻ HTML o Advanced: Định nghĩa thuộc tính cho thẻ đặc biệt hay tất thẻ chứa thuộc tính id riêng biệt Selecttor: Chọn thuộc tính áp dụng trạng thái liên kết A: Link: Ảnh hưởng đến văn có tạo liên kết A: Active: Ảnh hưởng đế liên kết Click chuột vào A:Hover: Ảnh hưởng đến liên kết di chuyển chuột vào A: Visisted: Ảnh hưởng đến liên kết Click Define in: Vị trí lưu trữ CSS o New Style sheet file: Tạo tập tin lưu css (*.css) o This document only: Lưu CSS trang Click OK Nếu chọn New Style sheet file Biên so n: D

ng Thành Ph t Chỉ định vị trí lưu trữ đặt tên(phần mở rộng css) Trang 121 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Thiết lập thuộc tính cho thẻ Sau tạo CSS, hộp thoại Style Defintion hiển thị, yêu cầu thiết lập thuộc tính hộp thoại click OK để có CSS Lớp Type: Các thuộc tính định dạng văn Font: Chọn phông chữ (Nhóm Font định nghĩa (Text/Font/Edit Font List) Size: Cỡ chữ chữ Weight: Độ đậm văn Style: họn dạng thể (Bình thường,Nghiêng,đậm) Variant: Biến thể văn (Bình thường hay in hoa nhỏ) Line Height: Chiều cao dòng văn Case: Đổi dạng chữ (In, thường, hoa nhỡ) Decoration: Xác định kiểu gạch dướI,trên, chữ Color: Màu chữ Lớp Background: Các thuộc tính định dạng Background color: Màu Background image: Ảnh Repeat : Cách thức lợp ảnh (Chỉ lần, theo phương ngang , đứng ) Attachment, Horizaltal, Vertical: Chưa hỗ trợ Lớp Block: Các thuộc tính định dạng khốI văn Word spacing: Khoảng cách từ Biên so n: D

ng Thành Ph t Trang 122 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Letter spacing: Khoảng cách ký tự Vertical Align: Lề theo phương thẳng đứng(hình ảnh) số Text Align: Canh lề Text Indent: Độ thụt dòng Lớp Box: Các thuộc tính kiểm soát vị trí phần tử Lớp Border: Các thuộc tính đường biên phần từ Lớp List: Các thuộc văn danh sách Lớp Positioning: Các layer Lớp Extensions: Các thuộc tính mở rộng ngắt trang hay trỏ chuột VD minh họa: LoạI bỏ gạch dướI liên kết Trong lớp Type khung Decoration đánh chọn None Gắn CSS lưu từ tập tin bên Trong khung CSS style, chọn Attach Style Sheet (Hoặc Click phảI /Attach Style Sheet Link: Liên kết đến File Import: Nhập file vào trang Trong hộp thoại Link External Style Sheet, click Browse để chọn file css Điều chỉnh CSS tạo Mở tài liệu liên kết với CSS muốn hiệu chỉnh Trong khung CSS Styles chọn CSS cần điều chỉnh , chọn Edit Style Sheet (Hoặc Click phảI chọn Edit) • Attach: Gắn lạI file css • Edit: Điều chỉnh thuộc tính css • New: Tạo mớI CSS Biên so n: D

ng Thành Ph t Trang 123 Bài Gi ng Môn Thi t K Web • Rename: Đổi tên CSS • Dupplicate: Nhân đôi CSS • Remove: LoạI bỏ CSS khỏI tài liệu • Done: Đồng ý chọn lựa Ph n 4: MacroMedia DreamWeaver III Các thao tác Xuất Style để tạo CSS Style Sheet: Có thể xuất CSS tạo để tạo File CSS Style Sheet Sau liên kết đến tài liệu khác để áp dụng • Trong khung CSS Style Click phải CSS tạo tài liệu menu Text / Export Styles Sheet) • Nhập vào tên cho CSS click Save Export (hay chọn Các Style đối lập nhau: Khi áp dụng hai hay nhiều CSS cho văn bản, style xung khắc cho kết ý muốn • Nếu CSS áp dụng cho văn trình duyệt hiển thị thuộc tính hai CSS trừ thuộc tính đặc biệt xung khắc • Nếu thuộc tính từ CSS áp dụng lên văn xung khắc nhau, trình duyệt hiển thị thuộc tính style bên • Nếu có xung khắc trực tiếp, thuộc tính từ CSS loại bỏ thuộc tính từ HTML tag CSS IV TỔNG QUAN VỀ BEHAVIOR Behavior đọan kịch (Script) thiết kế sẵn bở chương trình Dreamweaver giúp thêm điều khiển, hàm kiểm tra trình duyệt, Shockware, thêm Biên so n: D

ng Thành Ph t Trang 124 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver hệ thống liên kết popup menu, chèn âm thanh, kiểm tra Form điều giúp làm phong phú trang web bạn Mỗi Behavior gồm yếu tố: • Đ i t
ng (Object) chứa Behavior • Bi n c (Event) xảy đối tượng • Hành đ ng (Action) xảy kèm với biến cố Đ i t
ng chứa biến cố đa dạng, trang, form, hình ảnh, nút, dòng, chữ phải chọn đối tượng phù hợp với biến cố hành động Bi n c việc xảy đối tượng chọn ví dụ biến cố OnMouseOver Là việc người xem đưa trỏ chuột ngang qua đối tượng Biến cố Onload kiện xảy người xem mở trang web bạn có nhiều lọai biến cố biến cố khác đối tượng khác trang web Hành đ ng đọan mã lệnh giúp thực nhiệm vụ cho đối tượng hành động gọi thực có biến cố tương ứng điều lần khẳng định thêm mối quan hệ chặt chẽ đối tượng, biến cố, hành động Hành động đơn giản tạo liên kết, mở cửa sổ, hành động phức tạp tạo popup menu, kiểm tra nhập liệu form Một đối tượng trang thường kèm với Behavior (Một biến cố hành động tương ứng) Nhưng có trường hợp đối tượng có nhiều biến cố, tùy thuộc vào trình tự Behavior mà chương trình kiểm tra biến cố 1, biến cố thỏa gọi hành động tương ứng củta biến cố Nếu đối tượng có lúc nhiều Behavior mà Behavior lại có biến cố (nhưng khác hành động) biến cố xảy ra, hành động thực Ví dụ trường hợp nút liên kết có Behavior • Behavior 1: Biến cố OnClick hành động xuất hộp thọai (alert) • Behavior 2: Cũng biến cố OnClick hành động liên kết đến trang web khác Khi người tham quan ấn chuột vào nút (Click) thõa mãn biến cố Onclick hành động mở hộp thọai thống báo, chờ người xem nhấn Ok, hành đồng thực tạo liên kết đến trang web khác II CỬA SỔ ĐIỀU KHIÊN BEHAVIOR PANEL Cần phải mở Behavior panel trình tạo Behavior : Chọn Menu Window/Behavior Chọn đối Tượng trước Khi Gắn Behavior Tùy thuộc vào việc chọn đối tượng khác trang web mà Behavior tự chọn loại biến cố phù hợp cho phép thực số hành động tương ứng đối tượng Nếu không vừa ý bạn tự hiệu chỉnh lại Thêm / Xóa Một Behavior Khi cần thêm, xóa Behavior, bạn vịêc ấn vào nút (+) nút (-) Biên so n: D

ng Thành Ph t Trang 125 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Xoá Behavior: • Chọn dòng Behavior cần xóa danh sách • Nhấn nút (-), xóa Behavior Thêm Behavior: • Ấn giữ nút (+) • Chọn hành động danh sách • Chọn biến cố tương ứng xúât hiện, hiệu chỉnh lại biến cố khác Thay Đổi Trình Tự Các behavior Tuỳ thuộc vào trình tự Behavior mà hành động theo trình tự thực Có Behavior ngang cấp, hành động xảy trước hay sau không quan trọng hay biến cố khác có hành động không xảy đồng thời trường hợp này, bạn không cần quan tâm đến trình tự biến cố Ví dụ Ảnh có biến cố khác OnMouseOver onMouseOut nên không cần quan tâm đế Behavior trước Trong trường hợp Các Behavior biến cố xử lý không đạt kết mong muốn Theo behavior panel ấn chuột (onClick) ảnh liên kết qua trang khác, thông báo sau Điều không nên, mà phải xếp lại thứ tự, ấn chuột vào ảnh có hộp thoại thông báo trước liên kết qua trang đích • Chọn behavior cần xếp lại trật tự • Ấn nút điều khiển lên/xuống Biên so n: D

ng Thành Ph t Trang 126 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Thay Đổi Biến Cố Khi hành động chọn biến cố tương ứng gán cho behavior Đôi biến cố không phù hợp với yêu cầu bạn thay đổi biến cố khác Cần lưu ý phải chọn biến cố mà hành động xảy có ý nghĩa Ví dụ hành động thay đổi hình dáng màu sắc nút liên kết bắt buột kèm với biến cố chuột : OnMouseOut, OnMouseOver, OnClick OnLoad, OnFocus .Muốn thay đổi biến cố thì: • Chọn dòng behavior chứa biến cố cần đổi • ấn nút vào • Một danh sách biến cố xúât hiện, Chọn biến cố phù hợp Trên dòng Behavior Tên Và Ý Nghĩa Của Biến Cố OnAbort Khi ngưng tải trang hay ấn nút Stop trình duyệt OnAfterUpdate Khi trang thực xong việc cập nhật nguồn liệu OndeforeUpdate Trước trang thực việc cập nhật nguồn liệu OnBlur Khi đối tượng chọn không trạng thái hành OnBounce Khi nội dung Marquee đến biên Marquee OnChange Khi có thay đổi TextField hay List/Menu form OnClick Khi ấn chuột vào đối tượng OnDblClick Khi nhấn Double chuột vào đối tượng OnError Khi xảy lỗi trang, ảnh trình duyệt OnFinish Khi nội dung Marquee đ hết dòng OnFocus Khi nhập nội dung vào textField OnHelp Khi ấn nút Help trình duyệt OnKeyDown Khi ấn phím xuống OnKeyPress Khi ấn phím xuống thả Onkeyup Khi thả phím OnLoad Khi hoàn tất việc tải trang OnMouseDown Khi nhấn nút chuột xuống OnMouseMove Khi di chuyển chuột OnMouseOut Khi di chuyển chuột nút OnMouseOver Khi di chuyển ngang qua nút OnMouseUp Khi thả chuột Biên so n: D

ng Thành Ph t Trang 127 Bài Gi ng Môn Thi t K Web OnMove Ph n 4: MacroMedia DreamWeaver Khi cửa sổ, khung di chuyển OnreadyStateChange Trạng thái thành phần thay đổi OnReset Khi form trả giá trị mặc định Onresize Khi cửa sổ, khung thay đổi kích thước OnRowEnter Khi nguồn liệu có thêm dòng OnRowExit Khi dòng liệu tồn OnScroll Khi cuộn cuộn OnSelect Khi chọn Text, MenuItem List/Menu OnStart Nội dung Marquee bắt đầu vòng OnSubmit Khi gởi Form OnUnload Khi rời trang III CÁC BEHAVIOR Call JaVaScript Dùng để gọi lệnh hay hàm viết JavaScript a Gọi Hộp Thọai Thông Báo • Chọn đối tượng trang web cần gọi hàm JavaScript • Nhấn (+) Chọn Call javaScript • Nhập lệnh : alert(“Chao cac ban”) • Ok Hiệu chỉnh biến cố Behavior onClick • Lưu tập tin xem trang • Nhấn chuột vào đối tượng, hộp chọn xuất b Hộp Thọai Kiểm Tra • Chọn nút mới, thêm hành động CallJavaScript Nhập lệnh confirm(“Ban thuc su muon xem trang khac?”) Biên so n: D

ng Thành Ph t Trang 128 Bài Gi ng Môn Thi t K Web • Ph n 4: MacroMedia DreamWeaver Lưu xem trang Hộp thọai thông báo kèm theo nút Ok Cancel Thay Đổi màu cho trang Thông thường màu cho trang web thiết kế trước, người tham quan có việc xem,không hiệu chỉnh Trong trường hợp bạn muốn thiết kế trang với nút nhấn, cần thay màu bạn cần ấn vào nút tương ứng red(đỏ), Green (lục), Blue (Lam) • Tạo trang • Chèn vào nút: Red, Green, Blue • Nhấn show Code View: Chuyển qua dạng mã HTML • Nhấp đọan mã JavaScript sau, (mã JavaScript phân biệt in thường) function Maunen(mau){ document.bgColor=mau } • Nhấn Show Design View, dạng thiết kế • Chọn nút Red • Behavior Panel, (+) thêm hành động Call javaScript • Nhập lời gọi hàm với tham số màu đỏ (0xff0000) Một Behavior tạo cho nút nút Red, với biến cố onclick gọi lệnh đổi trang web sang màu đỏ Tương tự cho nút Green có tham số màu (0x00ff00) nút Blue có tham số màu (0x000ff) Sau thực xong nút lưu trang kiểm tra xem kết Change Properties Thay đổi thuộc tính đối tượng xem trang việc làmk thú vị thao tác thật đơn giản tạo hiệu ứng lạ, đặc biệt như: ẩn/hiện, chuyển động đối tượng Trong ví dụ có số lớp ảnh xếp chồng lên nhau, bạn rê chuột vào nút điều khiển để tạo ẩn hình hoa tuyết bên • Khi đưa chuột vào nút hình hoa tuyết biến Biên so n: D

ng Thành Ph t Trang 129 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Khi lấy chuột khỏi nút, hình hoa tuyết xúât lại • Tạo layer xếp chồng lên • Tạo trang chèn nút góc hình • Chèn layer1 • Tiếp tục chèn Layer2 với LayerHoa Chèn ảnh hoa tuyết vào Layer1 Đặt tên Layer (Layer Id=layerHoa) Đặt tên Layer (Layer Id=layerTren) Hiệu chỉnh tọa độ trùn Tạo Behavior điều khiển • Chọn nút điều khiển tạo • Tạo Behavior, Change Properties o Type Of Object chọn layer o Name Object chọn: LayerHoa o Properties, select chọn: style.visiblity o New Value: Hidden o Ok • Trong Behavior panel thay tên biến cố onMouseOver Tạo thêm Behavior chó nút Với o Type Of Object chọn layer o Name Object chọn: LayerHoa o Properties, select chọn: style.visiblity o New Value: visible o Ok • Thay tên biến cố onMouseOut Lưu kiểm tra kết ẩn hoa tuyết (Đưa chuột vào nút khỏi nút) Biên so n: D

ng Thành Ph t Trang 130 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Check Browse Trong site chèn số hiệu ứng đặc biệt, mà trình duyệt xem Vậy bạn xây dựng Website, site có hiệu ứng đặc biệt site cũ giả sử site có trang chủ Sitemoi.htm (Dùng cho trình duyệt xem Version 4.0 trở lên) site cũ có trang chủ Sitecu.htm (Dùng cho trình duyệt cũ) Dùng Behavior để kiểm tra trình duyệt người xem, có trình duyệt xem site nguợc lại xem site cũ • Tạo trang chọn thẻ • Trong Behavior Panel chọn (+) • Nhập URL: Sitemoi.htm • Nhập Alr URL: sitecu.htm • Chọn Ok Chọn Check Browser điều chỉnh biến cố onLoad Check Plugin Khi trang có thành phần Flash, ShockWare người xem phải có cài Plugin để xem trang Khi bạn dự phòng thêm trang sử dụng Flash, ShockWare Nếu người xem có cài Plugin xem trang : Tranga.htm ngược lại xem trang: Trangb.htm • Tạo trang chọn thẻ • Trong Behavior Panel chọn (+) • Nhập If found, go to URL: tranga.htm • Nhập Otherwise, goto URLL: trangb.htm • Chọn Ok Chọn Check Plugin điều chỉnh biến cố onLoad Biên so n: D

ng Thành Ph t Trang 131 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver IV MỘT SỐ BEHAVIOR KHÁC Sau quen với cách sử dụng số Behavior bạn tự tìm hiểu số Behavior lạ quan trọng tìm đối tượng, hành động biến cố phù hợp Drag Layer: Khả kéo layer di chuyển hình Goto URL: Một cách khác để tạo liên kết Popup Menu: Tạo menu sổ xuống, với chức Show Popup Menu Hide Popup menu Jump Menu: Tạo nhóm liên kết Form Swap Image: Thay đổi ảnh (Tương tự chức RollOver Image) Validate Form: Kiểm tra tính hợp lệ Libraryệu form Control ShockWare or Flash: Giúp điều khiển đầu đọc hát, ngưng hay đến khung hình đọan phim Flash Biên so n: D

ng Thành Ph t Trang 132 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Chương QUẢN TRỊ WEB Giới thiệu Tải site lên Webserver I GIỚI THIỆU Site bạn tảI lên máy chủ web cách sử dụng FTP (File Transfer Protocol - Giao thức truyền tập tin) Đây cách đưa site từ máy tính cá nhân lên internet Trước chép tập tin, cần phải có tên miền muốn dịch vụ cho thuê không gian ISP (Internet Service Provider - Nhà cung nấp dịch vụ Internet) Một vài điều mà nên suy nghĩ đăng ký Doamin& Hosting • • • • • • • • • • Có cần tên miền không ?, Có muốn có địa web riêng không ? Nếu có, cần phải đăng ký tên miền Có cần sở liệu không ? Nếu có, loại ? Nếu sử dụng ASP, PHP , ASP.Net công nghệ khác, cần đảm bảo dịch vụ thuê không gian mà xem xét có hỗ trợ công nghệ Có dạng hỗ trợ ? Nếu người kinh nghiệm, trợ giúp trực tuyến đủ Nếu người mới, tốt có người thiết lập site bạn trước, đặc biệt site có sử dụng sở liệu Hỗ trợ có miễn phí không ? Băng thông dịch vụ cho thuê bao nhiêu? Một số máy chủ giới hạn băng thông (lượng liệu giao dịch) Thường bị giới hạn băng thông phải trả thêm phí để có băng thông rộng Không gian có máy chủ ? 10, 20 hay 50 MB ? Thường yếu tố đóng vai trò quan trọng việc chọn lựa dịch vụ cho thuê không gian Nếu ích có nhu cầu không gian, tùy chọn ưu tiên cho giá Nếu có nhu cầu cần nhiều không gian, giá dịch vụ cho thuê không gian thường tăng lên cao Hãy so sánh cẩn thận dịch vụ cho thuê không gian khác Các thống kê web có kèm theo dịch vụ cho thuê không gian không? Đôi số liệu thống kê site kèm theo dịch vụ mà trả thêm phí dịch vụ thêm khoản phí phụ Các số liệu thống kê giúp xác định trình duyệt người sử dụng dùng để xem site , trang web thường xem nhiều thông tin thống kê khác Dịch vụ kèm theo địa thư điện tử ? Quản lý site ? chép liệu lên site dễ dàng không ? Thay đổi dàng không ? Làm để thiết lập thư điện tử, tự động trả lời chuyển tiếp II TẢI SITE LÊN WEBSEVER – UPLOAD SITE Thiết lập thông số FTP: Trong môi trường Dreamweaver MX, thực sau: • Nhấp vào bảng điều khiển Site để kích hoạt bảng điều khiển • Nhấp vào Site / Edit Sites • Nhấp vào Site định nghĩa nhấp vào nút Edit Biên so n: D

ng Thành Ph t Trang 133 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver • Nhấp vào mục Local Info • Nhập tên miền địa web trường HTTP Address • Nhấp vào mục Remote Ifo • • Nhấp vào mũi tên trỏ xuống trường Access chọn FTP sử dụng kết nối qua điện thoại Nếu sử dụng kết nối qua cap mạng cục bộ, chọn mục Local / Network Server Access Nhập thông tin cho trường FTP Host Thông tin địa IP địa theo tên Hãy hỏi nhà quản trị mạng để có thông tin • Nếu chép liệu lên thư mục cụ thể, nhập thư mục vào trường Host Directory Nhà cung cấp dịch vụ cho thuê không gian cung cấp thông tin • Nhập tên đăng nhập trường Login Đây tên đăng nhập mà nhà cung cấp dịch vụ cấp cho • Nhập vào mật đăng nhập trường Password • Các tùy chọn lại tùy thuộc vào máy chủ thông số an toàn cho nhân Mặc định, tuỳ chọn không chọn • Nhấp vào Test để xem kết nối với máy chủ không ? • Nhấp OK sau nhấp Done để đóng hộp thoại Edit Site Chép tập tin lên máy chủ: • Trong bảng điều khiển site, đảm bào chọn site mà muốn chép lên máy chủ Đồng thời, cần đảm bảo có kết nối Internet Biên so n: D

ng Thành Ph t Trang 134 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver • Click vào nút Connects to Remote Host • Nhấp vào thư mục gốc, nhấp vào biểu tượng • Nhấp OK hộp thoại hỏi có muốn chép toàn site hay không chờ trình chép toàn site kết thúc • Nhấp vào biểu tượng Expand/Collapse (Put File/s) để xem site cục site máy chủ Hết Biên so n: D

ng Thành Ph t Trang 135 ... Ph n 4: MacroMedia DreamWeaver Thanh trình đơn: Chứa tập lênh thực chức Thanh công cụ Insert: Chứa nhóm công cụ tạo định dạng đối tượng Thanh công cụ Document: Các hình thức trình bày trang thiết... Advanced trình bày tổng quát, lớp Basic trình bày dạng bước (sẽ khác biệt hai lớp này.) Xét lớp Advanced Biên so n: D

ng Thành Ph t Trang 79 Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver. .. văn Dreamweaver MX hoàn toàn giống trình soạn thảo văn thông thường Tạo định dạng văn • • Nhập văn trực tiếp cửa sổ Document Để thay đổi Font, kích thước, màu sắc canh lề cho văn chọn sử dụng trình