BÀI 9 UTBINH SOẠN THEO KS NGUYỄN TRƯỜNG SINH .

CHƯƠNG 4 : BỔ SUNG VĂN BẢN VÀO TRANG .

 

THÔNG ĐIỆP CHỦ YẾU CỦA PHẦN LỚN CÁC WEBSITE ĐỀU ĐƯỢC CHUYỂN TẢI BẰNG VĂN BẢN VÀ PHẦN LỚN CÔNG VIỆC CỦA NGƯỜI THIẾT KẾ WEB LÀ BỔ SUNG – CHỈNH SỬA – TẠO KIỂU CHO VĂN BẢN ĐÓ . DREAMWEAVER CUNG CẤP NHỮNG CÔNG CỤ CẦN THIẾT ĐỂ ĐẶT VĂN BẢN VÀO TRANG WEB MỘT CÁCH HIỆU QUẢ VÀ CHUYỂN TẢI THÔNG ĐIỆP . KHI TẠO VĂN BẢN BẠN CẦN CHÚ Ý 2 KHÍA CẠNH : CẤU TRÚC VÀ TÍNH THỂ HIỆN CỦA NÓ . CÁC PHẦN TỬ CẤU TRÚC LÀ NHỮNG THÀNH PHẦN NHƯ : ĐOẠN VĂN – TIÊU ĐỀ - DANH SÁCH VÀ THÀNH PHẦN TƯƠNG TỰ . TÍNH THỂ HIỆN LÀ CÁCH VĂN BẢN HIỂN THỊ , BAO GỒM CÁC THÀNH PHẦN NHƯ : FONT CHỮ - KÍCH THƯỚC FONT CHỮ - MÀU VĂN BẢN . HIỆN NAY PHẦN LỚN CÁC WEBSITE ĐỀU PHÂN BIỆT CẤU TRÚC VÀ TÍNH THỂ HIỆN  . CẤU TRÚC ĐỀ CẬP ĐẾN CÁCH TỔ CHỨC NỘI DUNG TRÊN TRANG , CÒN TÍNH THỂ HIỆN LIÊN QUAN ĐẾN CÁCH LÀM CHO NỘI DUNG TRÔNG HẤP DẪN .

CHƯƠNG NÀY ĐỀ CẬP ĐẾN CÁCH ĐƯA VĂN BẢN VÀO TRANG CÙNG VỚI CÁCH ÁP DỤNG CẤU TRÚC SỬ DỤNG TIÊU ĐỀ VÀ DANH SÁCH . BẠN CŨNG SẼ TÌM HIỂU VỀ CÁCH SỬ DỤNG CÁC KIỂU VĂN BẢN HTML  CƠ BẢN ĐỂ THAY ĐỔI HÌNH THỨC CẢU VĂN BẢN . BẠN SẼ BIẾT CÁCH TẠO KIỂU CHO VĂN BẢN MỘT CÁCH CHÍNH XÁC HƠN VÀ THỂ HIỆN NÓ BẰNG CÁCH SỬ DỤNG BẢNG KIỂU CSS ( CASCADING STYLE SHEETS ) TRONG CHƯƠNG 5 .

 

1.BỔ SUNG VĂN BẢN :

 

Phần lớn văn bản trên 1 Trang Web đều được định dạng theo khối  ( được bao quanh bởi những Thẻ HTML mở và đóng ) .

1.   Menu File > New > HTML > None > Create  > Ra Cửa Sổ Soạn Thảo , bạn nhập văn bản vào > Nhấp Nút Split .

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.   Khi bạn nhập văn bản trong chế độ Design , bạn sẽ không thấy các Thẻ HTML  .

3.   Tất cả văn bản nằm trong Thẻ <p> và </p> được Trình Duyệt hiểu là cùng 1 đoạn văn bản , không kể văn bản đó dài bao nhiêu .

4.   Chương Trình Dreamweaver tự động bổ sung các Thẻ bao quanh văn bản khi nhấp Enter . Nhấp Enter là báo hiệu chấm dứt 1 đoạn  văn bản . Bạn chỉ thấy khi mở chế độ Code .

5.   Dreamweaver cũng có những lệnh đặc biệt giúp nhập toàn bộ hồ sơ của Microsoft Word hay Excel làm Trang Web như Paste Special .

 

2.CÁCH THỨC CHÈN VĂN BẢN :

 

1.   Nhấp con trỏ chỉ định vị trí chèn văn bản > Nhập văn bản .

2.   Cách chọn văn bản :

·         Rê bôi đen 1 đoạn văn bản .

·         Nhấp đúp 1 từ để chọn nó .

·         Rê tô đen 1 đoạn văn bản > Buông trỏ > Trỏ thành mủi tên chỉ vô > Nhấp 1 lần để chọn văn bản vừa rê > Rê xuống để chọn nhiều dòng .

·         Nhấp 3 lần vào 1 vị trí bất kỳ trong đoạn văn bản để chọn toàn bộ văn bản

·         Nhấp 1 vị trí > Giữ Shift > Nhấp vị trí mới > Đã chọn toàn bộ văn bản từ vị trí đầu đến vị trí mới > Trở lui chọn vị trí mới 2 > Chỉ còn chọn từ vị trí mới đến vị trí 2 .

·         Ctrl+A chọn hết văn bản .

 

3.CẮT , SAO CHÉP VÀ DÁN VĂN BẢN :

 

1.   Cách Cắt hoặc sao chép văn bản : Chọn văn bản

·         Cắt văn bản : Edit > Cut ( Ctrl+X ) .

·         Sao chép văn bản : Edit > Copy ( Ctrl+C ) .

·         Văn bản đã được đặt vào Clipboard .

2.   Cách dán văn bản thông thường :

·         Nhấp chuột tại vị trí muốn dán > Edit > Paste ( Ctrl+V) .

3.   Trong Menu Edit , Dreamweaver còn cung cấp cho bạn :

·         Lệnh Edit > Undo ( Ctrl+Z ) : Thao tác lại . Nhấp nhiều lần để trở về các bước trước đó .

·         Lệnh Edit > Redo ( Ctrl+Y ) : Làm lại . Nhấp nhiều lần để trở về các bước sau đó .

 

     Ghi chú :

Bạn có thể Copy 1 đoạn mã nguồn HTML ( Từ Source của 1 Trình Duyệt Web )  dán vào Dreamweaver trong chế độ Design . Mã nguồn này được hiện ra với tất các Thẻ HTML và nội dung của nó vì Dreamweaver cho là bạn muốn hiển thị luôn cả Thẻ đánh dấu . Bạn nên nhấp chuyển sang chế độ Code trước khi dán rồi nhấp Nút Design sau . Dreamweaver sẽ hiển thị nội dung thích hợp .

 

 

4.KÉO VÀ THẢ VĂN BẢN :

 

Nếu muốn di chuyển văn bản nào đó từ nơi này sang nơi khác , thao tác kéo và thả văn bản giúp bạn thực hiện việc di chuyển nhanh hơn .

1.   Chọn văn bản muốn di chuyển > Để con trỏ lên > Contro3 biến thành mủi tên > Rê chuột đến vị trí mới > Thả chuột ra .

2.   Sao chép văn bản : Chọn văn bản > Rê đến vị trí mới . Đã có văn bản vừa chọn tại vị trí mới .

 

5.SỬ DỤNG LỆNH DÁN ĐẶC BIỆT : PASTE SPECIAL .

 

Lệnh dán đặc biết các văn bản được tạo bằng Microsoft Word hay Excel  giúp bạn giữ nguyên định dạng của văn bản . Việc này giúp các bạn tiết kiệm được thời gian và công sức , đạt được vẻ mỹ quan của 1 văn bản .Edit > Paste Special  ( Ctrl+Shift+V ) >

 

1.   Hiện ra HT Paste Special , có các tùy chọn :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

·      Text Only : Chỉ dán văn bản . Các dấu hiệu đoạn văn và dịnh dạng sẽ bị loại ra .

·      Text with Structure : Dán văn bản và duy trì cấu trúc ( Đặc biệt là các Tab đoạn văn và danh sách ) , nhưng loại bỏ những định dạng khác .

·      Text with structure plus basic formatting : Giữ nguyên văn bản và cấu trúc văn bản , giữ nguyên định dạng in đậm và in nghiêng .

·      Text with structure plus full formatting : Giữ nguyên văn bản , cấu trúc và kiểu từ hồ sơ gốc .

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Chọn văn bản muốn cắt hay sao chép > Chuyển sang Dreamweaver và nhấp chuột chỉ định vị trí > Chọn Edit > Paste Special > Nhấp Nút chọn 1 tùy chọn chót hoặc ( Ctrl+Shift+V )  > Ok .

·         Nếu lựa chọn : “ Text with structure plus basic formatting “ hoặc “Text with structure plus full formatting “  bạn sẽ dán được luôn cà đồ họa vào và cả định dạng của văn bản .

·         Bạn cũng có thể dán đồ họa từ phần lớn các ứng dụng của Dreamweaver nhưng nếu muốn dán văn bản có kèm luôn đồ họa hãy sử dụng : Pasre Special .

 

6.ÁP DỤNG CÁC TIÊU ĐỀ :

 

Sau đoạn văn , Tiêu Đề là phần tử cấu trúc quan trọng nhất trên phần lớn các Trang Web . Các Tiêu Đề báo cho Người Dùng của Site biết những thông tin cần thiết trên Trang và chúng sẽ phân chia các phần của Trang . Hãy xem Tiêu Đề giống như các Tiêu đề Tin Tức của 1 tờ báo .

·      Văn bản được nhập vào Dreamweaver sẽ không có tiêu đề  . Dreamweaver sẽ xem văn bản này là NONE  trong HKS Property . Ngay khi nhần phím Enetr

( Return ) , Dreamweaver sẽ bao quanh văn bản trong các Thẻ Đoạn Văn và văn bản trở thành văn bản đoạn văn .

·      HTML có 6 cấp độ Tiêu đề ( Kèm theo văn bản đoạn văn ) . các Tiêu đề này không có kích thước cố định ( Không giống với Tiêu đề trong Microsoft Word và InDesign ) . Chúng có kích thước tương đối so với nhau và với kích thước của văn bản đoạn văn . Theo mặc định các Tiêu đề thường In đậm .

·      Các bạn có thể thay đổi hình thức của Tiêu Đề ( Kích thước , Font , màu . . . ) bằng cách sử dụng CSS ( Chương 5 ) .

 

1. CÁCH THỨC ÁP DỤNG TIÊU ĐỀ :

 

Có 4 cách thiết lập Tiêu Đề > Nhấp vào Dòng cần thay đổi

·         Chọn Text > Paragraph Format > Heading . . .

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

·                   Nhấp Ctrl+1 cho Tiêu đề 1 , Ctrl+2 cho Tiêu Đề 2

·                   Chọn 1 Tiêu đề từ Menu Format trong Properties :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

·         Nhấp vào một nút nhấn Tiêu Đề trong nhóm Text của Thanh Chèn :

 

 

 

 

 

 

 

 

 

 

 

 

2. CÁCH THỨC BIẾN VĂN BẢN THÀNH VĂN BẢN ĐOẠN VĂN :

·         Nhấp vào dòng cần thay đổi .

·         Chọn Text > Paragraph Format > Paragraph ( Ctrl+Shift+P ) .

 

3. CÁH THỨC LOẠI BỎ ĐỊNH DẠNG TIÊU ĐỀ :

·         NhẤP vào dòng cần thay đổi .

·         Chọn Text > Paragraph Format > None  ( Ctrl+0 ) . Menu Format của HKS Properties se biến tành None , cho biết văn bản không được gán kiểu tiêu đề hoặc đoạn văn .

 

7.CÁCH THỨC THIẾT LẬP FONT CHỮ :

 

 

·         Chọn văn bản cần chỉnh sửa > Chọn 1 kết hợp Font chữ khác từ Menu Font trong HKS Properties  hoặc chọn Text > Font > Chọn kết hợp Font chữ từ Menu con . Văn bản sẽ thay đổi hình thức .

·         Những Kết Hợp Font chữ : Định sẵn trong Dreamweaver đều có trên các máy tính và có hiệu lực với Windows , ví dụ : Arial – Courier – Georgia – Helvetica – Times New Roman – Verdana và Trebuchet  là những Font chữ chuẩn trên cả 2 hệ điều hành Windows và Macintosh .

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8.CÁCH  THỨC THIẾT LẬP KÍCH THƯỚC FONT CHỮ :

 

• Chọn văn bản cần chỉnh sửa > Chọn một kích thước khác từ Menu Font Size bật lên trong HKS Properties  > Chọn đơn vị đo lường cần thiết từ Menu Units  bật lên .
• Đây chỉ là hích thước tương đối nghĩa là chúng được thiết lập kích thước LỚN HƠN hoặc NHỎ HƠN so với kích thước Font chữ mặc định .

 

 

 

 

 

 

 

 

 

 

 

 

 

9.TẠO DANH SÁCH FONT CHỮ RIÊNG :

 

Các bạn có thể chỉnh sửa những KẾT HỢP FONT CHỮ  được tích hợp sẵn và cũng có thể TẠO Kết Hợp Font chữ mới . Cách thức chỉnh  sửa Font chữ :

 

·         Menu Text > Font > Edit Font > HT Edit Font List xuất hiện

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

·         Để bổ sung 1 Kết Hợp Font chữ : Nhấp Nút dấu + > Nhấp xổ xuống trong Mục Avalable fonts > Chọn các Font chữ > Font này hiện ra trong Khung bên dưới > Font sẽ vào Khung Choosen Fonts ( Những Font được chọn ) .

·         Để loại bỏ nó ra : Chọn 1 Kết Hợp Font chữ > Nhấp Nút dấu - .

·         Sử dụng các nút bên hông Font List để di chuyển Kết Hợp Font Chữ được chọn lên hoặc xuống trong danh sách . Nhấp Ok để lưu thay đổi .

·         Bạn cũng có thể nhập tên của Font Chữ không có trên hệ thống vào Trường nằm phía dưới danh sách Available Fonts > Nhấp Mủi tên trỏ về bên Trái để bổ sung Font đó vào danh sách Choosen Fonts . Trường hợp này khi bạn biết rõ Site của bạn thu hút rất nhiều người dùng Mac OS X 

( Ví dụ Font : Lucida Grande ) phổ biến trên Mac không có trên Windows .

·         Nếu bạn đang thiết kế Site dành cho số lượng Người Xem cụ thể ( Mạng Cục Bộ Intranet dành cho các nhân viên xem ) và biết là tất cả máy tính sẽ thể hiện Site có những Font chữ chuyên biệt này thì hãy thực hiện nhập tên Font chữ Chuyên biệt .

 

10.THAY ĐỔI MÀU FONT CHỮ  :

 

Bạn có thể chọn văn bản và thay đổi màu của nó bằng cách áp dụng Kiểu CSS  cho văn bản . Bạn chọn Ô màu và chọn Hộp màu để thực hiện thao tác này .

 

·         Chọn văn bản cần tạo > Nhấp vào Ô màu trong HKS Properties > Hộp chọn màu xuất hiện > Nhấp chọn 1 màu > Hộp chọn màu đóng lại > Văn bản thay đổi màu .

 

 

 

 

 

 

 

 

 

 

 

 

11.CÁCH THỨC ÁP DỤNG KIỂU VĂN BẢN :

 

Định dạng văn bản phổ biến nhất là tạo văn bản In Đậm – In Nghiêng  . Dreamweaver còn áp dụng nhiều kiểu định dạng khác như :

 

·         Nhiều Kiểu văn bản này được dùng để hiển thị mã lệnh lập trình và mã kịch bản nên chúng không được dùng trên nhiều Site .

 

 

·         Chọn văn bản cần thay đổi > Chọn Text > Style > Chọn kiểu mong muốn từ menu con > Hình thức văn bản sẽ thay đổi .

 

 

 

12.CÁCH THỨC ÁP DỤNG ĐỊNH DẠNG SẴN :

 

• Chọn văn bản > Menu Format trong Properties , chọn Preformated hoặc trong nhóm Text của Thanh Chèn nhấp Nút Performated hoặc Menu Text > Paragraph Format > Preformated  Text .
• Các Trình Duyệt sẽ hiển thị văn bản định dạng sẵn theo Font Chữ Đơn Cách như COURIER

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

13.CÁCH THỨC CHÈN DẤU NGẮT DÒNG :

 

Trong Cửa Sổ Soạn Thảo , khi bạn nhập 1 đoạn văn bản rồi nhấp phím Enter , nó sẽ tạo  một khoảng cách dòng . Bạn cần không có khoảng cách dòng thực hiện như sau :

 

• Tại cuối dòng văn bản cần ngắt nhấp Phím Shift+Enter. Hoặc trong nhóm Text

Chọn Line Break . Trong mã lệnh , Dreamweaver sẽ bổ sung Thẻ HTML <br/> vào cuối dòng .

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• Các dấu ngắt dòng là những ký tự không hiện trong Dreamweaver và Trình Duyệt Web nhưng bạn có thể làm chúng hiện ra nếu muốn . Vào Edit > Preferences  > Nhóm Invisible  Elements > Nhấp chọn Hộp Kiểm kế bên Line Break  > Ok . Khi đó Dreamweaver sẽ hiển thị dấu ngắt dòng .

 

 

 

                                                                                          

 

 

 

14.CÁCH THỨC THỤT LỀ VĂN BẢN :

 

• Chọn đoạn văn hay phần tử khối > Thực hiện 1 trong 3 cách :
• Nhấp Nút Indent trong HKS Properties .
• Nhóm Text , nhấp nút Block Quote ( Tạo khối trích dẫn ) .
• Menu Text > Indent ( Ctrl+Alt+] ) .

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• Loại bỏ trích dẫn khối : Nhấp Nút Outdent hoặc chọn Text > Outdent  hoặc Crel+Alt+[ .
• Quy tắc canh lề của CSS là cách tốt hơn để thụt lề các phần tử Khối . Sẽ tham khảo trong Chương 5 .

 

15.CANH LỀ VĂN BẢN :

 

Dreamweaver có thể canh lề văn bản theo lề Trái – Phải – Giữa trang  - Canh đều văn bản – Bổ sung khoảng trắng cần thiết giữa các từ để canh cả lề Trái lẫn lề Phải .

 

• Chọn đoạn văn bản cần canh lề > Nhấp vào 1 Nút Canh Lề trong HKS Properties  hoặc Menu Text Align > Left ( Canh Trái ) – Center ( canh Giữa ) – Right ( canh Giữa ) – Justify ( Canh Đều ) .
• Sử dụng các Phím tắt :
• Ctrl+Alt+Shift +L : Canh Trái .
• Ctrl+Alt+Shift +C : Canh Canh Giữa
• Ctrl+Alt+Shift +R : Canh Phải .
• Ctrl+Alt+Shift +J : Canh Đều .
• Bạn cũng có thể sử dụng CSS để canh chỉnh văn bản .