Chương 3

Thêm Văn Bản

Mục tiêu: Cuối chương này bạn sẽ có thể:  Thêm và định dạng văn bản  Tạo ra những danh sách  Lưu files trong Dreamweaver MX  Nhập văn bản vào Dreamweaver  Sao chép và dán văn bản từ trình ứng dụng khác 3.1

Giới thiệu

Dreamweaver MX là một trình ứng dụng để tạo và biên tập những trang web. Không giống như những trình soạn thảo web khác, những trang được tạo ra trong Dreamweaver MX thường không đòi hỏi rằng những trang đó phải phục vụ trên những server chuyên dùng hoặc với những mở rộng đặc biệt. Điều này làm cho Dreamweaver MX trở thành một trình soạn thảo web mềm dẻo hơn những trình biên tập web khác. Trong chương trước các bạn đã học về tất cả các điều mà bạn có thể làm với Dreamweaver MX. Và nó có thể ứng dụng được ở đâu. Bạn đã thảo luận về giao diện. Bạn cũng đã thấy cách để lập một site cục bộ trong Dreamweaver MX. Trong chương này các bạn sẽ học về những cách khác nhau để tạo ra những trang web, tất cả những định dạng có sẵn để lưu những trang này, thêm văn bản vào những trang này và sau đó định dạng nó theo yêu cầu của chúng ta. Chúng ta hãy bắt đầu bằng việc tìm hiểu những khái niệm của việc tạo ra một trang web mới. 3.2

Tạo một trang mới

Khi bạn khởi động Dreamweaver MX bạn sẽ có một trang để trắng mới trước mặt chúng ta. Đây là 1 trang mới (Untitled ) mà cần lưu lại với định dạng HTML. Ngoài trang này, nếu bạn muốn tạo ra nhiều trang hơn nữa, có nhiều cách khác nhau để làm thế. Ba cách để tạo ra một trang mới trong Dreamwaever được đưa ra như sau: 1. Từ menu File, chọn New hoặc 2. Trên bàn phím, nhấn Control + N hoặc 3. Chọn File  New và từ phần Templates(các mẫu), chọn mẫu Dreamweaver đã tạo sẵn.  Tiêu đề trang Tiêu đề của 1 trang HTML giúp người truy cập vào site theo dõi được những gì mà họ đang xem khi họ duyệt web, và nó nhận dạng những trang có trong danh sách history và bookmark của người dùng.

1

Dreamweaver

Chú ý: Nếu bạn không đặt một tiêu đề cho trang, trang này sẽ xuất hiện trong trình duyệt, bookmark và history với tiêu đề là Untitled Document. Bất cứ khi nào bạn tạo ra một trang, bạn nên luôn luôn đặt cho nó 1 tiêu đề. Bạn nhập thông tin này vào trong Title: trường này sẽ xuất hiện trong thanh công cụ Document( tham khảo hình 3.1) hoặc chọn Modify  Page Properties từ menu.

Hình 3.1: Phần tiêu đề trong Document Toolbar Chú ý: Đặt tên file cho tài liệu ( bằng cách lưu nó) không giống với việc đặt tiêu đề cho trang. 3.3

Lưu file

Để lưu trang mới của bạn, chọn File  Save hoặc File  Save As từ menu File. Hãy chắc chắn rằng bạn đang lưu file của bạn trong folder mà bạn đã tạo ra cho site của bạn. Ngay khi bạn lưu một trang trong site của bạn, bạn sẽ có thể xem và mở nó từ cửa sổ site (Site Window). 3.4

Thêm văn bản

Thêm văn bản trong Dreamweaver thì đơn giản như gõ văn bản trong trình ứng dụng MS Word. Khi bạn click vào của sổ Document, 1 con trỏ nhấp nháy xuất hiện. Bạn có thể bắt đầu gõ văn bản mà bạn muốn thêm. 3.4.1

Ngắt dòng

Trong Dreamweaver MX, khi bạn nhấn phím Enter ở cuối một câu hoặc một từ trong một đoạn văn, một khoảng trống sẽ được tạo ra phía trên và phía dưới dòng được gõ vào bởi sự xác lập mặc định, như chỉ ra dưới đây. 4, Maxwell Society Wall Street New York

2

Text

Nhưng nếu bạn muốn tạo ra một đoạn văn mà không có khoảng trống như dưới đây thì bạn cần phải chèn vào một Line break. 4, Maxwell Society Wall Street NewYork Để chèn một Line break làm như sau: 1.

Đặt điểm chèn vào cuối câu hoặc cuối từ.

2.

Sau đó làm 1 trong 2 cách sau: • Chọn Insert Special Characters Line Break • Click nút Line Break trên tab Characters của thanh Insert.

Line break sẽ được thêm vào trong tài liệu nơi đặt dấu chèn. 3.4.2

Khoảng trống không ngắt (Non-Breaking Space)

Trong Dreamweaver, nếu bạn cố gắng thêm nhiều hơn một khoảng trống giữa các từ, nó sẽ bỏ qua tất cả những khoảng trống mà bạn mong muốn cho lần đầu tiên. Để thêm nhiều hơn một khoảng trống giữa các từ, bạn chèn Non-breaking space.(tham khảo hình 3.2). Để thêm một khoảng trống Non-breaking: 1. Đặt điểm chèn vào cuối câu hoặc sau từ nơi mà bạn muốn thêm khoảng trống non-breaking.

2. Sau đó làm một trong các bước sau: • Chọn Insert  Special Characters  Non-Breaking Space Hoặc •

Nhấn Ctrl + Shift + Space.

Dreamweaver

3

Dreamweaver

Hình 3.2 Tài liệu hiển thị câu có và không có khoảng trống Non-Breaking 3.5

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

Dreamweaver đưa lại cho bạn một số cách để nhập văn bản, cách rõ ràng nhất của nó là đơn giản bắt đầu gõ. Nhưng, ngoài ra, văn bản có thể được sao chép trực tiếp từ một chương trình xử lý Word và dán nó vào cửa sổ Window của Dreamweaver. Một điểm cần lưu ý ở đây là tất cả nhũng văn bản định dạng sẽ bị mất trong quá trình xử lý. Để sao chép và dán văn bản từ tài liệu Word, chúng ta theo những bước sau đây:

1. Mở tài liệu Word và copy văn bản mà bạn muốn dán vào Dreamweaver. 2. Mở trang Dreamweaver và chọn Edit  Paste. Văn bản đã chọn sẽ được dán vào trong tài liệu Dreamweaver mới. 3.6

Nhập HTML từ Word

Bạn có thể mở file Word mà được lưu ở định dạng HTML trong Dreamweaver. Dùng tùy chọn Open hoặc Import từ File menu của Dreamweaver MX. Điều bất lợi lớn trong khi nhập dữ liệu từ một tài liệu Word mà được lưu trong định dạng HTML là nó sẽ sinh ra nhiều mã HTML thừa. Bạn có thể xóa bỏ mã thừa bằng sự giúp đỡ của hộp thoại Clean Up Word HTML.(Tham khảo hình 3.3).

4

Text

Hình 3.3: Hộp thoại Clean Up Word HTML 3.7

Đoạn văn bản

Đoạn văn thường được dùng trong một trang web để tổ chức nội dung mà bạn sẽ trình bày. Một đoạn văn là một khối văn bản. Bằng cách này nội dung dược tổ chức theo những khối thông tin trong một trang HTML và do đó nó có kết cấu hơn và chỉnh tề hơn. Chú ý: Một đoạn văn luôn luôn bắt đầu với thẻ

và kết thúc với thẻ

. 3.7.1

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

Dreamweaver có 3 kiểu đoạn văn cơ bản:

A) Đoạn văn bản (Paragraph) . B) Tiêu đề (Heading). C) Được định dạng trước. (Preformatted). Chúng được áp dụng sử dùng tùy chọn định dạng(Format) trong Property Inspector (Tham khảo hình 3.4).

Hình 3.4: Danh sách Format trong Property Inspector A) Đoạn văn bản - Khi bạn bắt đầu gõ một tài liệu mới trong Dreamweaver, không có định dạng đoạn văn nào được áp dụng bởi thiết lập mặc định. Bạn có thể thấy trong danh sách Format rằng tùy chọn None được chọn. Để thêm một định dạng đoạn văn vào khối văn bản chúng ta làm như sau: Dreamweaver

5

Dreamweaver

1.

Đặt điểm chèn bất cứ đâu trong khối văn bản.

2.

Sau đó làm một trong các bước sau: • Từ danh sách Format trong Property Inspector click vào Paragraph. • Chọn Text  Paragraph Format  Paragraph.

Định dạng đoạn văn bản bây giờ đã được áp dụng. B) Tiêu đề - Tiêu đề được dùng để xác định các phần khác nhau của nội dung trên một trang. Chúng xếp loại từ lớn nhất (Heading1,

) đến cái nhỏ nhất ( Heading6,

). Nhũng tiêu đề này thường dược dùng để định dạng văn bản. ( Tham khảo hình 3.5).

Hình 3.5: Tiêu đề được áp dụng cho văn bản. Để áp dụng tiêu đề cho một trang, làm như sau:

1. Đặt điểm chèn bất cứ nơi nào trong dòng hoặc trong khối văn bản. 2. Sau đó làm một trong các cách sau: • •

Chọn bất cứ tiêu đề nào từ tùy chọn Heading 1-6 trong danh sách Format trên Property Inspector. Chọn Text  Paragraph Format  Heading 1-6.

C) Văn bản được định dạng trước - Văn bản được định dạng trước có thể dùng để định dạng văn bản chính xác như bạn muốn, hoàn tất với những khoảng trống mở rộng hay những dấu ngắt dòng(line break). Khi bạn áp dụng Preformatting, câu mà bạn gõ vào không tự động xuống dòng vì thế bạn phải nhấn phím Enter để tạo một dòng mới. Để ứng dụng Preformatting vào một khối văn bản:

6

Text

1. Đặt điểm chèn vào tài liệu nơi mà bạn muốn gõ khối văn bản. 2. Từ Format list chọn Preformatted hoặc chọn Text  Paragraph Format  Preformatted. 3. Bắt đầu gõ văn bản và thêm những khảng trống mở rộng vào giữa văn bản. Khi mà bạn xem trước(preview) trang trong trình duyệt, bạn chú ý rằng văn bản được định dạng trước sẽ có những khoảng trống mở rộng có thể nhìn thấy được.(Tham khảo hình 3.6).

Hình 3.6: Văn bản định dạng trước - Preview trong Browser 3.7.2

Canh chỉnh đoạn văn bản

Khi bạn bắt đầu gõ trong một trang, mặc định văn bản sẽ được căn lề bên trái. Nếu bạn muốn, bạn có thể thay đổi căn lề của văn bản qua bên phải. ở giữa hoặc canh đều. Ví dụ, bạn có thể muốn văn bản được canh đều hoặc canh giữa trong một đoạn văn và vân vân. Sau đây là những phím tắt cho việc căn lề:

3.7.3

Trái

Ctr l+ Alt + Shift + L

Phải

Ctrl + Alt + Shift + R

Giữa

Ctrl + Alt + Shift + C

Đều

Ctrl + Alt + Shift + J

Những đoạn văn bản thụt đầu dòng

Thụt đầu dòng một đoạn văn là thêm những khoảng trống mở rộng phía trước hoặc phía sau đoạn văn. (Tham khảo hình3.7). Với điều này thì bạn có thể làm cho một đoạn văn đứng tách rời với những đoạn văn còn lại khác được trình bày trong cùng một trang. Trong HTML, một đoạn văn có thụt đầu dòng được biết như là một trích dẫn(blockquote). Nó thường được dùng khi bạn muốn một đoạn văn đặc biệt nổi bật hơn so với những đoạn còn lại trong cùng một trang.

Dreamweaver

7

Dreamweaver

Hình 3.7: Đoạn văn bản thụt đầu dòng. Để thụt đầu dòng một đoạn văn bản: 1.

Đặt điểm chèn vào bất cứ nơi nào trong đoạn văn.

2.

Sau đó làm một trong các cách sau: • Click nút Text Indent trên Property Inspector • Chọn Text  Indent hoặc nhấn Ctrl + Alt + ]

Dreamweaver will add some spaces before and after the paragraph as shown in Figure.3.7. 3.8

Ký tự

Khi thêm văn bản vào Dreamweaver, thường thì gõ trực tiếp vào Dreamweaver thì dễ hơn là viết nội dung trong một trình ứng dụng khác rồi sao chép và dán bởi vì không phải tất cả các trình ứng dụng đều hỗ trợ những ký tự đặc biệt. Khi bạn cần thêm những ký tự đặc biệt như là © hoặc ® , điều đó thật dễ dàng trong Dreanweaver. Có một menu(bảng chọn) dành cho những mã HTML này và những ký tự đặc biệt.( Tham khảo hình 3.8). Để thêm những ký tư đặc biệt trong Dreamweaver: 1.

Đặt điểm chèn trong đoạn văn nơi mà bạn muốn thêm ký tự đặc biệt.

2.

Trong Document Toolbar, kích hoạt Character Tab.

3.

Để chèn, hãy click vào những ký tự đặc biệt có sẵn trên thanh công cụ.

4.

Nếu bạn muốn nhiều ký tự đặc biệt hơn, hãy click vào nút" Other characters" để có nhiều ký tự đặc biệt hơn mà có thể chèn được.

Hình 3.8: Character Tab được kích hoạt trên Document Toolbar

8

Text

Hình 3.9: Những ký tự đặc biệt trong Dreamweaver 3.8.1 Kiểu văn bản Một trang web đơn giản không có hiệu ứng giống như một trang với những kiểu văn bản khác nhau. Với Dreamweaver MX bạn có thể thêm những kiểu văn bản khác nhau như đậm, nghiêng , gạch dưới và vân vân để thêm sự nhấn mạnh lên một văn bản nào đó. Bây giờ chúng ta hãy xem cách thêm những kiểu này vào một văn bản: 1.

Đầu tiên bạn chọn văn bản mà bạn muốn áp dụng kiểu đặc biệt.

2.

Sau đó bạn click nút Bold hoặc Italic trên Property Inspector để áp dụng những kiểu này.

3.

Nếu bạn muốn áp dụng nhiều kiểu hơn , bạn chọn Text  Style và sau đó chọn kiểu từ danh sách đã được cung cấp.

3.8.2 Những kiểu HTML Một kiểu HTML là một đặc điểm trong Dreamweaver MX nơi mà bạn có thể áp dụng những tùy chọn định dạng nhanh đối với văn bản trong trang web. Bạn có thể ứng dụng một kiểu HTML cho văn bản mà đã được định dạng rồi hoặc có thể tạo ra một kiểu mới và sau đó áp dụng nó. Để tạo ra một kiểu HTML mới, chúng ta theo những bước chỉ ra dưới đây: 1.

Chọn Window  HTML Styles

2.

Trong bảng HTML Styles, click vào biểu tượng the New Style.

3.

Trong hộp thoại Define HTML Style, đặt tên và những thuộc tính khác. Đặt thuộc tính Font Attributes như là Font, Size, Color và Style và click OK.

4. Kiểu HTML sẽ được thêm vào trong HTML Styles Panel.

Dreamweaver

9

Dreamweaver

3.9

Danh sách (Lists)

Danh sách là một cách hiệu quả để tách biệt chủ đề hoặc dữ liệu so với phần còn lại của tài liệu. Những loại danh sách phổ biến nhất là Bulleted & Numbered list. Những danh sách Bulleted được biết như là những danh sách không theo thứ tự ( không được sắp xếp) trong khi danh sách đánh số được xem như những danh sách theo thứ tự. 3.9.1 Danh sách Bulleted và Numbered Khi tạo ra một danh sách bạn có thể hoặc là gõ một danh sách rồi làm cho nó Bulleted/Numberd họặc là bạn làm cho văn bản Bulleted hoặc numbered ngay khi bạn gõ nó. Bạn có thể áp dụng nhiều kiểu khác nhau cho Bullets & numbers bằng cách dùng List properties. Có 2 kiểu cho Bullets: Bullet (tròn) & vuông. Đối với Number thì có nhiều kiểu khác nhau như Roman, Alphabet,...

Hình 3.10 Danh sach theo thứ tự và không theo thứ tự Để tạo ra một dánh sách cho văn bản, theo những bước đã cho sau đây: 1. Trong tài liệu, đặt điểm chèn nơi mà mục đầu tiên của list xuất hiện. 2. Thực hiện 1 trong 2 cách sau: a. Chọn Text  List  Unordered List hoặc Ordered List b. Click vào nút Unordered hoặc Ordered List trên Property Inspector. Dấu tròn hay con số sẽ được hiển thị.

3. Gõ tên mục & nhấn phím Enter. 4. Gõ tên mục kế tiếp & lại nhấn phím Enter. Chúng ta sẽ tiếp tục thực hiện thao tác này cho đến khi thêm được tất cả các mục vào trong list.

10

Text

Chú ý: Mặc định không có các khoảng trống giữa những mục khác nhau trong list. Để thêm khoảng trống giữa những mục, chọn toàn bộ list và từ Format list trên Property Inspector, chọn Paragraph. Để thay đổi kiểu của toàn bộ danh sách, chúng ta theo những bước chỉ ra dưới đây: 1. Đặt điểm chèn vào bất cứ nơi nào trong list. 2. Chọn Text  List  Properties hoặc click nút List Item trên Property Inspector. Hộp thoại List Properties sẽ được hiển thị. 3. Chọn kiểu của dánh sách từ List Type. Điều này rất là hữu ích nếu bạn muốn đổi từ kiểu hình tròn sang kiểu đánh số hoặc ngược lại. 4. Từ danh sach đổ xuống Style(Style drop down list), chọn kiểu đặc thù. 5. Trong vùng văn bản Start Court, nhập con số khởi đầu mà từ con số đó danh sách sẽ bắt đầu. 6. Click OK để áp dụng những thay đổi. 3.9.2 Danh sách định nghĩa(Definition List) Danh sách định nghĩa có thể được dùng để hiển thị các mục trong một bảng chú giải thuật ngữ hoặc khi bạn đang định nghĩa một thuật ngữ. Danh sách định nghĩa gồm có mục và định nghĩa của nó.

Hình 3.11: Danh sách định nghĩa Để tạo ra một danh sách định nghĩa chúng ta theo những bước sau đây: 1.

Trước tiên chúng ta viết thuật ngữ và định nghĩa của nó mà cần có trong danh sách.

2.

Chọn thuật ngữ và định nghĩa và chọn Text  List  Definition List. Xem hình 3.11

3.9.3 Danh sách lồng nhau(Nested List)

Dreamweaver

11

Dreamweaver

Danh sách lồng nhau là những danh sách chứa đựng những danh sách khác trong chúng. Ví dụ, bạn có thể muốn một danh sách có thứ tự hoặc không thứ tự được lồng trong danh sách có thứ tự khác. 1.

Để chuẩn bị một danh sách lồng nhau, trước tiên hãy tạo ra một danh sách thông thường.

2.

Kế đến, chọn các mục có trong danh sách lồng (ví dụ: model RFA1 &Model RFA2) và click nút Text Indent trên Property Inspector.

3.

Lặp lại các bước trên đối với các mục còn lại.

4. Để loại bỏ một danh sách lồng nhau, chọn các mục trong danh sách lồng và click nút Text Outdent trên Property Inspector.

5. Lặp lại bước này cho những mục còn lại trong danh sách lồng và danh sách sẽ hiển thị như trong hình 3.12.

Hình 3.12: List

12

Hình 3.13: Nested List

Text

Tóm tắt:  Dreamweaver có 3 kiểu đoạn văn cơ bản: đoạn văn, tiêu đề, và định dạng trước.  Các tiêu đề dùng để nhận dạng những phần khác nhau của nội dung trên cùng một trang  Văn bản định dạng trước có thể được dùng để định dạng văn bản chính xác như bạn muốn, hoàn thành với những khoảng trống mở rộng hoặc là dấu ngắt dòng(line breaks).  Làm thụt vào một đoạn văn là thêm những khoảng trống trước và sau đoạn văn đó  Với Dreamweaver MX, bạn có thể thêm những kiểu văn bản khác nhau như đậm, nghiêng, gạch dưới, vân vân để thêm sự nhấn mạnh vào một đoạn văn nhất định.  List định nghĩa có thể được dùng để hiển thị các mục trong một chú giải hoặc là khi bạn đang định nghĩa một thuật ngữ.  Một kiểu HTML là một đặc điểm trong Dreamweaver MX, nơi mà bạn cò thể áp dụng những tùy chọn định dạng nhanh cho văn bản trong một trang web.

Dreamweaver

13

Dreamweaver

Kiểm tra sự tiến bộ của bạn

1. Mặc định không có những khoảng trống giữa những mục khác nhau trong danh sách. a. True b. False

2. Trong 1 đoạn văn, nếu bạn không muốn có bất kỳ khoảng trống nào, bạn dùng lựa chọn Non Breaking space. a. True b. False

3. _________ được dùng để xác định những phần khác nhau của nội dung trên 1 trang. a. b. c. d.

Markers Headings Highlighters Breaking

4. Thụt đầu dòng một đoạn văn là thêm những khoảng trống mở rộng trước và sau một đoạn văn. a. True b. False

5. Với kiểu HTML bạn có thể áp dụng những tùy chọn định dạng nhanh cho văn bản trên một trang web. a. True b. False

14