2. Xõy dựng WebSite bằng phần mềm Macromedia Dreamweaver MX
2.7 Làm việc với cỏc file thiết kế trong Dreamweaver
Trong phần này, chúng ta sẽ tạo một tài liệu mới, sau đó chèn và chỉnh sửa các đoạn mã thiết kế các phần tử của đoạn mã. Chúng ta cũng tìm hiểu làm thế nào để tạo ra đoạn mã của riêng mình.
Trong phần này chúng ta sẽ tập chung vào các nhiệm vụ sau:
▪ Chèn một đoạn mã.
▪ Chỉnh sửa nội dung đoạn mã.
▪ L- u mã nh- một mẩu tin.
2.7.1 Làm việc với cỏc đoạn mó
Sử dụng các đoạn mã có thể là một thực tế tiết kiệm thời gian trong việc tạo ra là một trang web chuyên nghiệp. Chúng ta có thể chèn thêm các đoạn mã sẵn có trong Dreamweaver hoặc chúng ta có thể dễ dàng tạo các đoạn mã riêng của chúng ta để tái sử dụng trong các trang web của chúng ta. Chúng ta có thể tạo các đoạn mã HTML, Javascript, CFML, ASP, JSP, và nhiều hơn nữa.
Chúng ta sẽ bắt đầu bằng cách làm việc với một số đoạn mã có sẵn trong Dreamweaver.
Chúng ta có thể tạo ra một tài liệu mới dựa trên tài liệu Page Design trong hộp thoại New Document.
1) Chọn File > New.
Hộp thoại New Document xuất hiện.
2) Trong tab General, mục Basic Page sẵn sàng để lựa chọn.
3) Trong danh sách tài liệu Basic Page, lựa chọn HTML, sau đó click Create. Tài liệu đ- ợc mở trong Document.
4) L- u tài liệu là myCodeSnippets trong site của chúng ta (File > Save).
2.7.3 Chốn một bảng điều hướng (navigation)
Dreamweaver đi kèm với khá nhiều đoạn mã để lựa chọn. Các đoạn mã đ- ợc đặt trong panel Code. Khi chúng ta hoàn thành phần h- ớng dẫn này, chúng ta sẽ chèn một mã chuyển h- ớng (navigation), một đoạn nội dung (content), và một đoạn footer.
1) Đặt điểm chèn trong văn bản mà chúng ta muốn chèn các đoạn mã. 2) Mở panel Snippets bằng một trong các cách sau:
▪ Chọn Window > Snippets.
▪ Trong panel Code, nhấp vào mũi tên mở rộng nếu nó ch- a hiển thị, sau đó chọn Snippet.
3) Click đúp vào th- mục Accessible để xem nội dung của nó, sau đó click đúp tiếp vào th- mục Navigation.
4) Click đúp vào th- mục Tab để xem nội dung của nó, sau đó click Basic Tabs để lựa chọn nó.
Snippet xuất hiện trong panel xem tr- ớc.
5) Trong panel Snippets, click nút Insert ở d- ới cùng bên trái của bảng điều Snippets để chèn nó vào tài liệu của chúng ta.
Một đoạn mã nhỏ xuất hiện trong tài liệu của chúng ta.
2.7.4 Thờm một nội dung (content)
Tiếp theo chúng ta sẽ thêm một bảng để tạo nội dung. Chúng ta sẽ chèn đoạn mã trực tiếp bên d- ớc các đoạn mã của bảng chuyển h- ớng (navigation) mà chúng ta vừa chèn.
1) ấn Enter hoặc Return để di chuyển điểm chèn tới dòng tiếp theo.
2) Trong panel Snippets, click đúp vào th- mục Content Tables, sau đó click đúp vào th- mục One-pixel-border để thấy các snippets trong th- mục đó.
3) Click vào Text B để lựa chọn nó, và sau đó click Insert để chèn snippet vào trong tài liệu.
Một đoạn mã nhỏ xuất hiện trong tài liệu
4) L- u tài liệu lại (File > Save).
2.7.5 Thờm đoạn mó cho phần footer
Bây giờ chúng ta sẽ học cách thêm một snippet cuối cùng, một snippet cho nội dung phần cuối (footer).
1) ấn Enter hoặc Return để di chuyển điểm chèn đến dòng tiếp theo.
2) Trong panel Snippets, click đúp vào th- mục Footers để thấy nội dung trong th- mục đó.
3) Click vào Basic: Brief Text để lựa chọn nó, sau đó click Insert để chèn snippet vào tài liệu.
Một đoạn mã nhỏ xuấn hiện trong tài liệu.
Bảng hộp thoại Getting Started trong Layout View xuất hiện và mô tả các tùy chọn Layout view.
1) Xem lại các tùy chọn, sau đó click OK để đóng hộp thoại.
2) Trong thanh Insert có 2 tùy chọn Layout sẵn dùng - Draw Layout Cell and Draw Layout Table, những tùy chọn này không có hiệu lực trong Standard view.
3) Nếu phần giám sát Property ch- a đ- ợc mở, chọn Window > Properties để mở nó. 4) Trong thanh Insert, click nút Draw Layout Cell
5) Di chuyển con trỏ tới cửa sổ Document, Con trỏ chuột thay đổi tới một công cụ bản vẽ. (trông nh- dấu + ). Kích vào góc trái trên của tài liệu, rồi kéo lê để vẽ ô layout.
Khi chúng ta giải phóng con chuột, một ô layout bảng xuất hiện trong một bảng layout.
Bảng layout mở rộng để điền vào cửa sổ Document, và thiết lập phạm vi Layout của trang web. Hình chữ nhật màu trắng là ô layout chúng ta vẽ. Chúng ta có thể đặt thêm các ô layout trong khu vực trống của bảng layout.
6) Vẽ 1 ô khác để tạo ra một vùng văn bản phía trên nút định h- ớng.
2.7.6 Chỉnh sửa nội dung mẩu tin
Tiếp theo, chúng ta sẽ chỉnh sửa văn bản giữ chỗ và áp dụng các thay đổi màu sắc. chúng ta sẽ áp dụng màu nền cho các ô để thiết lập biểu đồ màu của riêng chúng ta.
1) Mở bảng giám sát Property (Window -> Property), nếu nó ch- a đ- ợc mở.
2) Đặt con trỏ vào ô đầu tiên của bảng Navigation mà chúng ta đã chèn. Chính là ô có chữ “Lorem”.
3) Trong ô textbox Bg của bảng giám sát Property, click vào ô có mũi tên để chọn màu cho ô, hoặc chúng ta tự điền mã màu vào ô textbox bên cạnh phía phải. Chúng ta sẽ sử dụng màu #9966FF.
4) Đặt con trỏ tới ô tiếp theo, chính là ô có chữ “Ipsum.”
5) Trong ô textbox Bg của bảng giám sát Property, click vào ô có mũi tên để chọn màu cho ô, hoặc chúng ta tự điền mã màu vào ô textbox bên cạnh phía phải. Chúng ta sẽ sử dụng màu #9999FF.
6) Lặp lại bước 5, áp dụng màu #9999FF cho các ô “Dolor” và “Amit.”
7) Click vào ô của bảng content, sau đó lựa chọn màu áp dụng cho ô của bảng. 8) Tạo thêm sự thay đổi nếu chúng ta muốn.
9) Khi chúng ta làm xong, l- u tài liệu lại.
10) ấn F12 (Windows only) hoặc chọn File > Preview in Browser và lựa chọn trình duyệt hiển thị tài liệu ta vừa thực hiện.
2.7.7 Lưu mó như một snippet
Làm việc với đoạn mã có sẵn là rất dễ dàng. Chúng ta có thể dễ dàng tạo đoạn mã của riêng chúng ta. Ví dụ, giả sử chúng ta muốn tái sử dụng đoạn mã mà chúng ta đã cập nhật trong tài liệu mà chúng ta vừa tạo ra.
Hãy l- u các snippet định h- ớng nh- là một snippet mới.
1) Trong panel Snippets chọn th- mục Navigation, sau đó chọn th- mục Tab. 2) Trong cửa sổ Document, click vào ô điều hướng có nội dung “Lorem”.
3) Trong phần lựa chọn thẻ, ở vị trí phía d- ới bên trái của cửa sổ tài liệu, click vào thẻ <table>.
Trong cửa sổ Document, bảng đã đ- ợc lựa chọn.
4) Thực hiện một trong các cách sau để l- u phần lựa chọn nh- là một mã snippet:
▪ Click phải chuột để chọn bảng, sau đó chọn Create New Snippet.
▪ Trong panel Snippets, click vào nút cộng (+) nút có vị trí phía d- ới của panel. Một hộp thoại Snippet xuất hiện.
5) Trong ô textbox Name, nhập một tên để mô tả snippet của chúng ta. 6) Trong Description, Nhập một mô tả cho snippet.
7) Chúng ta có thể xem các mô tả của snippet trong panel Snippets để lựa chọn tên snippet một cách chính xác.
8) Trong Snippet Type, chọn Insert Block. Điều này có nghĩa là sẽ chèn một snippet là một khối mã hơn là một snippet mà văn bản đ- ợc áp dụng vào.
9) Click OK.
2.7.8 Tổng kết
Trong phần h- ớng dẫn này, chúng ta đã biết làm thế nào để xác định vị trí, xem, và chèn thêm các đoạn mã có sẵn trong Dreamweaver. Chúng ta cũng biết cách tạo mã snippets riêng của chúng ta là một công việc dễ dàng để thực hiện.