Embed Size (px)
Citation preview
BÀI 6LÀM VIỆC TRONG CHẾ ĐỘ CODE VIEW CỦA ADOBE
DREAMWEAVER 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
Cách làm việc với bảng (table) trên trang web:Khởi tạo bảng với HTMLĐịnh dạng style cho bảng với CSS/ HTML
Đ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
Cách làm việc với bảng (table) trên trang web:Khởi tạo bảng với HTMLĐịnh dạng style cho bảng với CSS/ HTML
Slide 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe Dreamweaver CS4 9
MẪU (TEMPLATE)
Mẫu (template ):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ỉnh sử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 (template ):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ỉnh sử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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe Dreamweaver CS4 16
Tag Selector
Chèn thêm thẻ vớiTag Chooser
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 6 - Làm việc trong chế độ Code View của Adobe Dreamweaver CS4 17
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Syntax Error Alerts: trong Info Bar (thanh thông tin),hiển thị các lỗi trong mã một cách thuận tiện
Slide 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe Dreamweaver CS4 21
LÀM VIỆC VỚI MÔI TRƯỜNG CODE
Sử dụng menu Check Page: Validate Markup (xác địnhtính hợp lệ của mã HTML)
• File > Validate > Markup
Slide 6 - Làm việc trong chế độ Code View của Adobe 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 6 - Làm việc trong chế độ Code View của Adobe Dreamweaver CS4 23
