bÀi 5 tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển...
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 CodeTRANSCRIPT
![Page 1: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/1.jpg)
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
![Page 2: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/2.jpg)
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
![Page 3: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/3.jpg)
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
![Page 4: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/4.jpg)
THIẾT KẾ DỰA TRÊN MODULE
![Page 5: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/5.jpg)
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
![Page 6: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/6.jpg)
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
![Page 7: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/7.jpg)
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)
![Page 8: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/8.jpg)
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
![Page 9: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/9.jpg)
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
![Page 10: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/10.jpg)
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
![Page 11: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/11.jpg)
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
![Page 12: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/12.jpg)
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
![Page 13: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/13.jpg)
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
![Page 14: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/14.jpg)
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
![Page 15: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/15.jpg)
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
![Page 16: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/16.jpg)
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
![Page 17: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/17.jpg)
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
![Page 18: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/18.jpg)
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
![Page 19: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/19.jpg)
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
![Page 20: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/20.jpg)
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
![Page 21: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/21.jpg)
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
![Page 22: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/22.jpg)
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
![Page 23: BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị CODE của DREAMWEAVER CS4 - Giáo trình FPT](https://reader031.vdocuments.site/reader031/viewer/2022020101/5587b669d8b42aac088b45d0/html5/thumbnails/23.jpg)
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