Session 04

Chương 4

Thêm văn bản - Lab

Mục tiêu: Vào cuối chương này, các bạn sẽ có thể: Tạo các trang web mới. Lưu files Thiết lập các thuộc tính của trang Thêm văn bản Copy và dán văn bản Định dạng văn bản Nhập tài liệu HTML được tạo ra từ MS Word Trong chương vừa rồi, bạn đã định nghĩa một site cục bộ cho project website. Trong chương này bạn sẽ bắt đầu tạo ra những trang web cần thiết cho site của bạn và cũng học cách thêm văn bản vào chúng và định dạng chúng.

Phần – I 4.1

Tạo ra những trang mới.

Ở đây trước tiên bạn sẽ tạo ra một số trang web mà sẽ được sử dụng cho project website của bạn. Khi bạn khởi động Dreamweaver MX, một tài liệu không tiêu đề sẽ được mở tự động. Bạn sẽ bắt đầu với một tài liệu giống như vậy. 1. Trong trường Title của thanh công cụ Document (hình 4.1), click và thay đổi tiêu đề thành " book_categ" Thanh tiêu đề của cửa sổ (Untitled) sẽ thay đổi thành tên mới một cách tự động, nhưng tên của tab ở cuối của cửa sổ tài liệu sẽ vẫn có tên là Untitled-1*, cho đến khi bạn lưu file.

Hình 4.1: Trường Title của Document toolbar 2. Chọn File  New. 3. Trong hộp thoại New Document, từ tab General, chọn Basic Page từ Category list và HTML từ Basic Page và click trên nút Create. Một cửa sổ mới Untitled-2* mở ra.

1

Dreamweaver

4. Trong trường Title của Document toolbar, click và thay đổi tiêu đề thành " help". 5. Để chuyển đổi giữa các file, nếu cả 2 file đang trong khung nhìn tối đa (maximized view), bạn có thể chuyển từ tài liệu này sang tài liệu khác bằng việc click vào nút tab ở phía dưới như trong hình 4.2

Hình 4.2: Tabbed button 4.2

Lưu files

Bây giờ bạn sẽ lưu file mà bạn đã tạo ra. 6. Chọn tài liệu Untitled-1* bằng cách click nút tab phía dưới cửa sổ tài liệu. 7. Chọn File  Save. 8. Trong hộp thoại Save As, di chuyển đến thư mục bookstore  project mà bạn đã tạo trong chương vừa rồi, đây là nơi mà tất cả các trang web và các tài nguyên sẽ được lưu trữ. 9. Trong trường File name field gõ “book_categ.html” như trong hình 4.3. 10. Click vào nút Save. Nút tab bây giờ sẽ có tên là book_categ sau khi lưu.

Hình 4.3: Hộp thoại Save Tương tự như vậy, bạn có thể lưu tài liệu thứ 2. 11. Chọn File  Save.

2

Text

12. Đặt tên tài liệu là “help.html”. 4.3

Thiết lập các thuộc tính cho trang

Kế tiếp bạn sẽ chuyển những đặc tính của trang theo như project của bạn. 13. Chọn tài liệu book_categ. 14. Chọn nút ‘Show Design View’ từ thanh Document toolbar. 15. Chọn Modify  Page Properties. Hộp thoại Page Properties của trang bật lên như trong hình 4.4

Hình 4.4: Hộp thoại Page properties 16. Trong hộp thoại Page properties, thiết lập những tùy chọn sau đây: • Thiết lập màu nền, gõ giá trị #DBDCE7 trong trường văn bản Background. • Bởi vì bạn thiết lập màu nền rất nhạt, bạn sẽ thiết lập màu văn bản là một màu đậm hơn. Gõ #5A5C30 trong trường Text. • Thiết lập Left Margin là 0.5, Margin Width là 2, Top margin là 1 và Margin Height là 0.5. • Click nút Apply nếu cần thiết để xem những thiết lập mà bạn đã áp dụng. 17. Click OK để áp dụng những thiết lập. Bạn sẽ thấy cửa sổ Document hiển thị trang web với màu nền đã được áp dụng cho nó.

3

Dreamweaver

18. Chọn File  Save để lưu các thiết lập 19. Cũng làm những thiết lập giống như thế về Page Properties cho trang Help ngoại trừ tùy chọn Document Encoding, bỏ tùy chọn này lại để mặc định 4.4

Thêm văn bản

Bước kế tiếp của bạn sẽ là thêm văn bản vào trong tài liệu book_categ của bạn 20. Đặt điểm chèn trong tài liệu Một con trỏ nhấp nháy sẽ được nhìn thấy. 21. Gõ vào đoạn văn bản sau: “Creative Dragon has vast resources of books that would cater to various segments such as Kids, Software, Engineering, Medical, Mythology and Fitness.” 22. Sau khi gõ đoạn văn bản, nhấn Enter. 23. Gõ dòng: “Some of the books available in these categories are as follows:” 24. Sau khi gõ dòng đó, lại nhấn phím Enter. 4.5

Sao chép và dán văn bản

Kế đến bạn sẽ copy và dán văn bản mà đã có sẵn trong một tài liệu Word sang tài liệu Dreamweaver của bạn. 25. Từ Windows Explorer, chọn ổ đĩa nơi mà bạn sẽ lưu Lab deliverables và mở 1 tài liệu Word.Ví dụ: D  Bookstore  Project  Lab Deliverables  Dreamweaver  Session 4  Book Category.doc. 26. Chọn Edit  Select All. 27. Chọn Edit  Copy. 28. Chọn trình ứng dụng Dreamweaver, và kích hoạt tài liệu book_categ. 29. Chọn Edit  Paste. Văn bản được dán phía dưới đoạn văn mà bạn đã viết. 30. Chọn File  Save. 31. Kích hoạt tài liệu Help.

4

Text

32. Từ Windows Explorer, chọn ổ đĩa nơi mà bạn lưu Lan deliverables & mở tài liệu Word. Ví dụ: D  Bookstore  Project  Lab Deliverables  Dreamweaver  Session 4  Help page.doc. 33. Chọn Edit  Select All. 34. Chọn Edit  Copy. 35. Chọn trình ứng dụng Dreamweaver và kích hoạt tài liệu Help. 36. Chọn Edit  Paste. Văn bản đã được dán. 37. Chọn File  Save. 4.6

Định dạng văn bản

Bây giờ bạn sẽ định dạng văn bản bằng cách dùng Properties Inspector. Bây giờ bạn cần phải định dạng văn bản mà bạn đã viết và cũng định dạng văn bản mà bạn đã dán trong cả 2 trang. 38. Chọn Window  Properties. 39. Chọn trang book_categ và chọn từ " Creative Dragon" từ đoạn văn đầu tiên. 40. Click nút Bold từ Properties Inspector phía dưới. 41. Chọn toàn bộ đoạn văn đầu tiên và chọn Paragraph từ trường Format và click nút Italics từ Properties Inspector. 42. Chọn đoạn văn thứ 2 & chọn nút Bold từ Properties Inspector. 43. Chọn Kids Category và đổi Format trên Properties Inspector thành Heading 4. 44. Chọn software Category và đổi Format trên Properties inspector thành Heading 4. 45. Chọn Engineering Category & chuyển Format trên Properties Inspector thành Heading 4. 46. Chọn 3 dòng phía dưới Kids Category & chọn Unordered List. Bạn sẽ có được văn bản theo mẫu Bulleted. Văn bản sẽ giống như trong hình 4.5.

5

Dreamweaver

Hình 4.5: Văn bản đã được định dạng 47. Nhưng bởi vì chỉ có 1 dòng được hiển thị ở bullets, điểm chèn ở cuối dòng đầu tiên, và nhấn phím enter và nhấn phím Delete để mang dòng thứ 2 lên trên. Lặp lại, đặt con trỏ ở cuối dòng thứ 2, nhấn phím Enter và nhấn phím Delete để mang dòng thứ 3 lên trên. Những dòng này bây giờ sẽ trông như trong hình 4.6 48. Lặp lại 2 bườc trên cho 3 dòng phía dưới Software category và Engineering category, chọn Ordered List.

Hình 4.6: Trang book_categ sau khi định dạng 49. Chọn trang help. 50. Đặt điểm chèn vào dòng đầu tiên và nhập câu" Learn about Creative dragon". Nhấn enter. 51. Gõ “How to Sell?” nhấn Enter. 52. Gõ “How to Buy?” nhấn Enter. 53. Kéo chuột để chọn dòng đầu tiên. 54. Chọn và thay đổi Format trên Properties Inspector thành Heading 1. 55. Kéo chuột để chọn dòng 2 và 3. 56. Thay đổi Format trên Properties Inspector thành Heading 3. 57. Đặt điểm chèn sau câu: "How to Sell at Creative Dragon.com?" và nhấn phím Enter. 58. Chọn văn bản và đổi Format thành Heading 5

6

Text

59. Thay đổi Font thành Arial. 60. Lặp lại tương tự như vậy cho câu: "How to Buy at Creative Dragon.com?" 61. Thực hiện định dạng còn lại cho văn bản như được thấy trong tài liệu Word và bullets & numbering có thể được làm bằng cách tương tự như bạn đã làm cho trang book_categ.( Tham khảo hình 4.7).

Hình 4.7: Trang Help sau khi định dạng

4.7

Nhập tài liệu HTML được tạo từ MSWord

Bước kế tiếp của bạn sẽ có thể là nhập 1 tài liệu HTML, mà được lưu như 1 trang web từ MSWord. 62. Chọn File  Import  Word HTML. 63. Trong hộp thoại “select Word HTML File to Import”, Chọn D  Bookstore  Project  Lab Deliverables  Dreamweaver  Session 2  Contact Us.html, và

click nút Open. 64. Trong hộp thoại “Clean Up Word HTML”, click nút OK. 65. Click nút OK một lần nữa. 66. Thiết lập những đặc tính cho trang tương tự như cách mà bạn làm cho trang Help. 67. Đổi tiêu đề thành Contact và lưu trang là " contact_us" trong thư mục Project. 68. Đặt điểm chèn trong dòng đầu tiên và gõ từ "COMPANY PROFILE". Và nhấn phím Enter. 69. Chọn văn bản và đổi nó thành in đậm. 70. Từ trường Size, chọn 5. 71. Lưu file.

7

Dreamweaver

72. Trang contact_us mà bạn đã tạo trong chương này sau khi định dạng bây giờ sẽ trông như trong hình 4.8.

Hình 4.8: Trang “Contact Us” sau khi định dạng Với điều này thì chúng ta đã đi đến cuối chương 4.Trong chương này bạn đã tạo ra 3 trang web đầu tiên cho website của bạn. Có nhiều chủ đề thú vị hơn để học trong chương 6.

Phần – II Trong chương trước, bạn đã tạo ra 1 site cục bộ cho website " Tours & Travels" của bạn. Bạn cũng đã lên kế hoạch cho website của bạn sớm hơn những gì mà tất cả các trang web nên có trên site của bạn.Từ nay trở đi, bạn sẽ tạo ra những trang web riêng lẻ dựa trên những gì đã học trong bài lab. Vì thế, trong chương của ngày hôm nay, bạn học về cách thêm văn bản. Vì thế bạn sẽ thêm văn bản vào những trang web có liên quan của bạn cho website" Tours & travels".

8