BÀI 5 : LÀM VIỆC
VỚI MÃ NGUỒN
NGÀY 12.5.2014
Video hướng dẫn: http://goo.gl/u5OOvW
Dreamweaver
cung cấp cho các bạn rất tốt về mặt giao diện có thể sử dụng các Menu, các
Toolbars của Dream để thiết kế một Website hoàn chỉnh. Tuy nhiên bạn cần biết
thêm các chức năng, các Menu để quản lý các mã nguồn tốt hơn trong Dreamweaver.
Giới thiệu
một số Icon để sử dụng tức thì thay vì bạn phải vào Menu View > Code View
Options. Trong bài này hướng dẫn các bạn cách sử dụng Toolbars bên cột trái khi
bạn bấm Tab Code. Ngoài ra cũng đề cập đến một số CS liên quan đến Code.
LINKS DOWNLOAD CÁC BÀI
VIẾT
CHUYÊN ĐỀ DREAMWEAVER
CS6:
Bài 0: Download và cài đặt
Dreamwaever CS6
Bài 1: Danh sách 15 video hướng dẫn
thiết kế web:
Bài 2: Làm chủ giao diện Dreamweaver
CS6
Bài 3: Quản Lý Site trong Dreamweaver
Bài 4: Tạo Page trong Dreamweaver:
Bài 5: Làm việc với Code
Áp dụng Folder 05 trong
Source: Bạn Copy
Folder 05 trong Source và dán vào Website demo. Bấm nút Refresh trong Panel
Files sẽ xuất hiện Folder 05.
Tạo File html trong thư
mục 05: Bấm More
trong màn hình Welcome > Chọn Blank Page > Chọn HTML > Chọn 2 column và
bấm nút Create.
- Mỗi dòng Code đều có số thứ tự.
- Để tắt số thứ tự bấm Icon có dấu #. Phục hồi lại: bấm dấu #. Hoặc bạn
vào Menu View > Code View Options > Line Numbers làm biến mất số thứ
tự. Đây là Thanh Toolbars cho bạn truy cập nhanh hơn.
- Trong thẻ <p> này bạn thấy
có nhiều dòng tuy nhiên nó chỉ hiển thị có một số thứ tự mà thôi.
- Nếu muốn các dòng Code này chỉ
xuất hiện trên một dòng bạn bấm Icon Word Wrap. Bạn chọn ở giữa dòng code
này và nhấn phím Enter. Dòng Code sẽ biến thành 2 dòng.
- Icon Highlight Invalid Code và Icon Syntax Error Alerts in Info Bars: 2 Icon này giúp bạn tự động chỉnh sửa lại mã nguồn. 2 Icon này giúp bạn gỏ các Thẻ HTML hay gỏ những phần mã nguồn sai cú pháp
Ví dụ: Bạn bỏ
phần tô màu đỏ trong dòng code. Sau đó bạn bấm Ctrl+S để Save với tên 01
Bạn thấy code
bị lỗi đã tự động được tô màu vàng.
Bạn bật CS Propreties: Vào Menu Window chọn Properties. Bấm vào dấu màu vàng. Trong
Properties có thông báo dòng Code bị sai. Bạn chỉnh sửa Code lại cho đúng bằng
cách thêm dấu > và thêm li.
Ví dụ: Bạn bỏ
dấu > trong 123 và 124. Bạn thấy dòng Code đã được tô màu vàng báo lỗi. Bạn vào
menu File > Valiadte > Validate Current Document (W3C). Xuất hiện thông báo
Dream sẽ gửi lỗi này đến W3 chỉnh sửa Code cho bạn. Bấm Ok.
Bạn thấy thông báo
lỗi xuất hiện bên dưới Khung Code. Bạn cũng có thể xem thông báo lỗi trên trình
duyệt.
Bấm nút Preview bên trái. Xuất hiện nội
dung thông báo lỗi. Dựa vào thông báo lỗi của W3C bạn có thể chỉnh sửa lại mã
nguồn của bạn.
Bạn vào mã nguồn và chỉnh sửa lại. Xong, bấm
Ctrl+S. . Bạn vào menu File > Validate > Validate Current Document (W3). Bạn
thấy không còn xuất hiện thông báo lỗi. Bạn thấy thông báo không còn lỗi hay trong Warning nửa.
SỬ DỤNG
VALIDATE W3C ĐỂ SỬA LỖI CODE.
Bạn truy cập vào trang
web: http://validator.w3.org
Có 3 Tab chính
- Validate By URL: Bạn nhập URL của Website và bấm Check. Valiadate sẽ kiểm
tra mã nguồn cho các bạn.
- Validate by File Upload: Bạn bấm nút Browse và Upload tập
tin lên W3C vào và bấm Check. W3C sẽ kiểm tra mã nguồn cho bạn.
- Validate by Direct input: Bạn nhập trực tiếp mã nguồn vào. Bấm nút Check. W3C sẽ thực hiện kiểm tra mã nguồn cho bạn. Bạn Copy toàn bộ mã nguồn và Paste vào ô trống. Bạn thử bôi đi thẻ đóng của </html> ở cuối cùng. Bấm nút Check.
- Bạn thấy một thông báo lỗi ở trên
cùng. Bạn xuống cuối trang sẽ thấy phần lỗi và số thứ tự dòng để bạn sửa
lại.
o
Bạn
sửa lại trong Ô trên và bấm nút Revalidate. Bạn nhận được một thông báo: Tài liệu này đã được kiểm tra thành công như XHTML
1.0 Transitional
o
Đóng
cửa sổ này: Bấm nút góc phải > Chọn Close Tab Group.
Mở thư mục 04 và mở tập tin 03 và 04:
Bấm nút Open document > Xuất hiện danh sách 16các Files đang mở, bạn bấm lên
tên một file trong danh sách.
Rút gọn các Thẻ CSS nằm
trong dấu { } : Bấm
lên nội dung trong cặp thẻ > Bấm Icon Balance Braces. Nội dung này đã được tô
xanh:
o
Bấm lên
dấu -: Nội dung đã được rút gọn. Nếu muốn hiển thị lại bấm dấu +. Chức năng
này giúp bạn thu gọn Code một cách dễ dàng.
Rút gọn các thẻ HTML:
Bấm lên Thẻ li và bấm
icon Collapse full tag.
o
Dòng
Code của Thẻ li này đã được rút gọn. Bấm dấu + phục hồi lại như cũ.
Rút gọn cả đoạn Code: Bôi đen đoạn code và bấm icon Collapse Selection.
Cả đoạn mã nguồn đã được thu gọn lại.
Bấm dấu + để phục hồi lại như cũ hoặc bấm icon Collapse Selection.
Cách ghi chú trong mã nguồn để bạn khi quay lại biết mã nguồn này dùng
cho mục đích gì ? : Bấm
chọn vị trí > Bấm Icon Apply Comment và chọn Apply HTML Comment > Nhập nội
dung ghi chú vào đây. Đây là phần tạo ghi chú với HTML. Một ví dụ nửa: Bạn vào
Tab Design > Bôi đen Introduction > Bấm Icon Apply Comment > Vào Tab
Split sẽ không thấy Introduction nửa nhưng mở Code bạn vần thấy Introduction.
Cách
ghi chú trong mã nguồn CSS: Chọn trong đoạn Code CSS > Bấm Icon Apply
Comment > Bấm chọn Apply Comment >
Nhập ghi chú > Bạn có thể tạo nhiều dòng ghi chú khi bấm Enter và nhập ghi
chú tiếp tục.
Sử dụng Icvon Show More (Thụt hàng): Bôi đen một đoạn Code > Bấm Icon Show More > Chọn
nút đẩy qua phải >Đoạn Code đã thụt vào bên phải. Muốn thụt trái bám nút Chỉ
qua Trái.
Nhiều phần Mã nguồn bạn muốn sử dụng nhiều lần: Ví dụ mã nguon62Ghi chú về thông tin
của tác giả. Chọn vị trí > Bấm Panle Snippets > Bấm phải lên Comments
> Chọn New Snippet
Xuất hiện CS
Snippet, bạn nhập thông tin vào:
·
Name: Author.
·
Description: Ghi chú
về tác giả.
·
Insert
Code : Nhập code về ghi chú ( < !== =>và nhập nội dung : Author Zendvn. Website :
Zendvn.com
·
Đánh dấu chọn Insert Block. Bấm Ok.
·
Xuất hiện văn bản Author.
Bạn rê Author vào vị trí đã chọn. Sau
này bạn không cần tạo ghi chú nữa mà chỉ cần rê Author vào là xong. Đây là cách
tái sử dụng mả nguồn từ tập tin này sang tập tin khác.
Định dạng Font – Size cho Code: Vảo Edit > Preferences > Chọn Fonts:
·
Font Settings: Unicode để phù hợp với tiếng Việt.
·
Proportional font: Times New Romman. Size: 12 pt
·
Fixed font: Courrier new.Size: 10 pt.
·
Code view: Courrier new. Size: 16 pt (Tăng kích
cở Font trong Code để dê đọc). Bấm Ok.
Thay đổi màu nền cho Code: Chọn Color
Coloring > Chọn màu xám > Bấm Ok.
Điều chỉnh khoảng cách Tag: Vào Edit
> Preferences > Chọn Code Format > Nhập 20 trong Tab Size.
Kết quả các Tag sẽ thụt
vào một khoảng cách 20
Bấm CSS trong Dòng Advanced
Formatting, xuất hiện CSS Source Format Options:
·
Indent
properties with: Nhập giá trị sẽ tăng khoảng cách trước.Code CSS.
·
Đánh
dấu chọn trong Dòng: Opening Brace on Separate line: Mủi tên { } sẽ được xuống
hàng
Đánh dấu vào Dòng: Only with more than 1 proprties: Sẽ đưa giá trị củ CSS
vào cùng một hàng.
Trong bài này có một số Icon Code chưa hướng dẫn sử dụng, các
bạn đừng quan tâm đến vì trong các bài học sau sẽ học kỷ Cấu trúc cơ bản của Tập
tin HTML và việc sử dụng CSS để định dạng cho các Thẻ HTML này.
No comments:
Post a Comment