Embed Size (px)
DESCRIPTION
Sử dụng thư viện và các mẫu có sẵn: Thiết kế dựa trên module Các thành phần module trong Dreamweaver: • Snippets • Thành phần thư viện • Mẫu (template) Soạn thảo HTML trong môi trường Code Sử dụng thư viện và các mẫu có sẵn: Thiết kế dựa trên module Các thành phần module trong Dreamweaver: • Snippets • Thành phần thư viện • Mẫu (template) Soạn thảo HTML trong môi trường Code
Citation preview
BÀI 5TỐI ƯU HÓA THIẾT KẾ WEBSITE & CÁCH LÀM VIỆC CƠ
BẢN TRONG CHẾ ĐỘ HIỂN THỊ CODE CỦADREAMWEAVER CS4
NHẮC LẠI BÀI TRƯỚC
Điều chỉnh môi trường làm việc trên DreamweaverCS4Làm việc với những thành phần đa phương tiện(multimedia) trên webpage:
Chèn file flash, video, âm thanhSử dụng panel AssetsLàm việc với plug-in
Điều chỉnh môi trường làm việc trên DreamweaverCS4Làm việc với những thành phần đa phương tiện(multimedia) trên webpage:
Chèn file flash, video, âm thanhSử dụng panel AssetsLàm việc với plug-in
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 2
MỤC TIÊU BÀI HỌC
Sử dụng thư viện và các mẫu có sẵn:Thiết kế dựa trên moduleCác thành phần module trong Dreamweaver:
• Snippets• Thành phần thư viện• Mẫu (template)
Soạn thảo HTML trong môi trường Code
Sử dụng thư viện và các mẫu có sẵn:Thiết kế dựa trên moduleCác thành phần module trong Dreamweaver:
• Snippets• Thành phần thư viện• Mẫu (template)
Soạn thảo HTML trong môi trường Code
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 3
THIẾT KẾ DỰA TRÊN MODULE
THIẾT KẾ DỰA TRÊN MODULE
Là nguyên tắc thiết kế phổ biến cho nhiều lĩnh vực,trong đó sản phẩm sẽ được tạo ra từ việc kết hợpcác module nhỏ hơnƯu điểm:
Sử dụng lạiChuyên môn hóaDễ kiểm soát thay đổi và lỗi
Ví dụ:Trang web = header + footer + menu trái + bodyHeader = logo + liên kết chính + ……
Là nguyên tắc thiết kế phổ biến cho nhiều lĩnh vực,trong đó sản phẩm sẽ được tạo ra từ việc kết hợpcác module nhỏ hơnƯu điểm:
Sử dụng lạiChuyên môn hóaDễ kiểm soát thay đổi và lỗi
Ví dụ:Trang web = header + footer + menu trái + bodyHeader = logo + liên kết chính + ……
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 5
THIẾT KẾ DỰA TRÊN MODULE
Các thành phần được sử dụng nhiều lần trong trangweb / website thường được module hóaCác thành phần thường được module hóa:
LayoutCác thành phần giao diện chính: tab, menu,checkbox, listbox, link, …Tag….
Các thành phần được sử dụng nhiều lần trong trangweb / website thường được module hóaCác thành phần thường được module hóa:
LayoutCác thành phần giao diện chính: tab, menu,checkbox, listbox, link, …Tag….
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 6
THIẾT KẾ DỰA TRÊN MODULE
Dreamweaver cung cấp 3 loại module
Snippet(đoạn code
nhỏ)
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 7
Module
Thành phầnthư viện(libraryitem)
Mẫu(template)
SNIPPET
Snippet:Là khái niệm dùng để chỉ những thành phần giaodiện/code được sử dụng lại nhiều lầnSnippets lưu trong Dreamweaver có thể được ápdụng cho tất cả các websiteThay đổi trên snippets được lưu không ảnh hưởng tớicác snippets đã được sử dụng
Ưu điểm:Tiết kiệm thời gian đánh máyGiảm thời gian debugGiảm thời gian tìm kiếmThống nhất về định dạng
Snippet:Là khái niệm dùng để chỉ những thành phần giaodiện/code được sử dụng lại nhiều lầnSnippets lưu trong Dreamweaver có thể được ápdụng cho tất cả các websiteThay đổi trên snippets được lưu không ảnh hưởng tớicác snippets đã được sử dụng
Ưu điểm:Tiết kiệm thời gian đánh máyGiảm thời gian debugGiảm thời gian tìm kiếmThống nhất về định dạng
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 8
SNIPPET
Lưu ý:Chỉ lưu lại những đoạn code ngắn gọn, thường xuyênđược sử dụng lại trọn vẹnNên ghi các chú thích đi kèm với snippet
Các công cụ khác ngoài Dreamweaver hỗ trợ việclưu trữ và sử dụng snippet:
CodaTextMateZend Studio
Website:http://devsnippets.com/http://www.snippetlibrary.com/
Lưu ý:Chỉ lưu lại những đoạn code ngắn gọn, thường xuyênđược sử dụng lại trọn vẹnNên ghi các chú thích đi kèm với snippet
Các công cụ khác ngoài Dreamweaver hỗ trợ việclưu trữ và sử dụng snippet:
CodaTextMateZend Studio
Website:http://devsnippets.com/http://www.snippetlibrary.com/
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 9
MẪU (TEMPLATE)
Mẫu:Là một tài liệu gốc mà nhiều trang có thể được tạo từđóKhi chỉnh sửa template, tất cả các trang dựa trêntemplate đó đều được cập nhật các thay đổi theoKhi tạo template, cần chỉ ra các vùng có thể chỉnhsửa (editable region)Là cơ chế tốt để điều khiển quyền truy cập vào cáctrang của websiteCác template của Dreamweaver làm việc vớiContribute – công cụ quản lý nội dung web cơ bản,mạnh mẽ
Mẫu:Là một tài liệu gốc mà nhiều trang có thể được tạo từđóKhi chỉnh sửa template, tất cả các trang dựa trêntemplate đó đều được cập nhật các thay đổi theoKhi tạo template, cần chỉ ra các vùng có thể chỉnhsửa (editable region)Là cơ chế tốt để điều khiển quyền truy cập vào cáctrang của websiteCác template của Dreamweaver làm việc vớiContribute – công cụ quản lý nội dung web cơ bản,mạnh mẽ
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 10
MẪU (TEMPLATE)
Một số trang web chứa mẫu có sẵn cho trang webnói chung và các mẫu cho dreamweaver nói riêng:
Mẫu chung:• http://themeforest.net/• http://www.steves-templates.com/
Mẫu cho Dreamweaver:• http://www.dreamweaver-templates.org/free-
dreamweaver-templates.html• http://www.entheosweb.com/website_templates/free-
dreamweaver-templates.asp
Một số trang web chứa mẫu có sẵn cho trang webnói chung và các mẫu cho dreamweaver nói riêng:
Mẫu chung:• http://themeforest.net/• http://www.steves-templates.com/
Mẫu cho Dreamweaver:• http://www.dreamweaver-templates.org/free-
dreamweaver-templates.html• http://www.entheosweb.com/website_templates/free-
dreamweaver-templates.asp
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 11
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Mã nguồn của các website đơn giản thường là mãHTMLTuy nhiên, đối với các website thông dụng hiện nay,ngoài HTML, mã nguồn còn chứa:
Mã JavaScriptMã nguồn của ngôn ngữ phía server:
• PHP• ColdFusion• JSP• …
Mã nguồn của các website đơn giản thường là mãHTMLTuy nhiên, đối với các website thông dụng hiện nay,ngoài HTML, mã nguồn còn chứa:
Mã JavaScriptMã nguồn của ngôn ngữ phía server:
• PHP• ColdFusion• JSP• …
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 13
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Để hiển thị mã nguồn của website trênDreamweaver, người dùng chọn Code View trên cửasổ soạn thảoNgười thiết kế có thể trực tiếp soạn thảo/chỉnh sửamã nguồn trong cửa sổ code view để tạo ra/thay đổitrang web tương ứngLưu ý:
Code viết nên rõ ràng, tuân theo định dạng chuẩn(coding convention)Thường xuyên thêm các comments
Để hiển thị mã nguồn của website trênDreamweaver, người dùng chọn Code View trên cửasổ soạn thảoNgười thiết kế có thể trực tiếp soạn thảo/chỉnh sửamã nguồn trong cửa sổ code view để tạo ra/thay đổitrang web tương ứngLưu ý:
Code viết nên rõ ràng, tuân theo định dạng chuẩn(coding convention)Thường xuyên thêm các comments
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 14
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Có thể chỉnh sửa HTML với Quick Tag Editor
Chèn chú thích (comment) chomã HTML:• Insert > Comment
Có thể chỉnh sửa HTML với Quick Tag Editor
Chèn chú thích (comment) chomã HTML:• Insert > Comment
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 15
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Để hiển thị code tương ứng với một thành phầngiao diện trên trang web mà không cần thoát khỏichế độ Design view, người thiết kế có thể sử dụngcông cụ Tag SelectorCông cụ Tag Chooser cho phép người dùng thêmthẻ vào trong cửa sổ code view
Để hiển thị code tương ứng với một thành phầngiao diện trên trang web mà không cần thoát khỏichế độ Design view, người thiết kế có thể sử dụngcông cụ Tag SelectorCông cụ Tag Chooser cho phép người dùng thêmthẻ vào trong cửa sổ code view
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 16
Tag Selector
Chèn thêm thẻ với TagChooser
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Các chế độ trong Code View:Word wrap: tự động xuống dòng mà không cần kéothanh cuộn ngang. Không thêm các dấu xuống dòngLine Numbers: hiển thị số tứ tự dòng dọc theo mãnguồnHidden characters: hiển thị các ký tự đặc biệt thaycho khoảng trắngHighlight Invalid Code: đánh dấu vàng tất cả mãHTML không hợp lệSyntax Coloring: kích hoạt hoặc vô hiệu hóa tính nănggán màu sắc khác nhau cho đoạn mãAuto Indent: làm mã tự động lùi đầu dòng khi nhấnEnter
Các chế độ trong Code View:Word wrap: tự động xuống dòng mà không cần kéothanh cuộn ngang. Không thêm các dấu xuống dòngLine Numbers: hiển thị số tứ tự dòng dọc theo mãnguồnHidden characters: hiển thị các ký tự đặc biệt thaycho khoảng trắngHighlight Invalid Code: đánh dấu vàng tất cả mãHTML không hợp lệSyntax Coloring: kích hoạt hoặc vô hiệu hóa tính nănggán màu sắc khác nhau cho đoạn mãAuto Indent: làm mã tự động lùi đầu dòng khi nhấnEnter
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 17
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Syntax Error Alerts: trong Info Bar (thanh thôngtin), hiển thị các lỗi trong mã một cách thuận tiện
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 18
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Thanh công cụ Coding:Mở tài liệuHiện bộ điều hướng mãThu gọn thẻThu gọn phần lựa chọnMở tất cảChọn thẻ chaCân bằng dấu ngoặcSố thứ tự dòng…..
Thanh công cụ Coding:Mở tài liệuHiện bộ điều hướng mãThu gọn thẻThu gọn phần lựa chọnMở tất cảChọn thẻ chaCân bằng dấu ngoặcSố thứ tự dòng…..
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 19
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Kiểm tra tính hợp lệ của code:Cài đặt dể hiển thị những dòng code bị sai về mặt cúphápSửa những dòng code không hợp lệ thông qua tùychọn Validate Markup
Kiểm tra tính hợp lệ của code:Cài đặt dể hiển thị những dòng code bị sai về mặt cúphápSửa những dòng code không hợp lệ thông qua tùychọn Validate Markup
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 20
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Đánh dấu và sửa lại mã không hợp lệ: View > CodeView Options > Highlight Invalide Code
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 21
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Sử dụng menu Check Page: Validate Markup (xácđịnh tính hợp lệ của mã HTML)
• File > Validate > Markup
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 22
TỔNG KẾT
Thiết kế dựa trên module là nguyên tắc thiết kế phổbiến cho nhiều lĩnh vực, trong đó sản phẩm sẽ đượctạo ra từ việc kết hợp các module nhỏ hơnCác thành phần được sử dụng nhiều lần trong trangweb / website thường được module hóaDreamweaver cung cấp 3 loại module: snippet,thành phần thư viện và mẫuMã nguồn của hầu hết các trang web hiện naykhông chỉ là mã HTML
Thiết kế dựa trên module là nguyên tắc thiết kế phổbiến cho nhiều lĩnh vực, trong đó sản phẩm sẽ đượctạo ra từ việc kết hợp các module nhỏ hơnCác thành phần được sử dụng nhiều lần trong trangweb / website thường được module hóaDreamweaver cung cấp 3 loại module: snippet,thành phần thư viện và mẫuMã nguồn của hầu hết các trang web hiện naykhông chỉ là mã HTML
Slide 5 - Tối ưu hóa thiết kế website & Cách làm việc cơ bản trong chế độ hiển thịCode của Dreamweaver CS4 23
