Trong phần thứ 2 của loạt bài này, hãy tìm hiểu cách thiết lập trang web để định hình kiểu văn bản, thêm văn bản trực diện trong Live View và sao chép văn bản từ tư liệu hiện có.

Bạn sẽ cần:

• Mẫu trong thư viện Creative Cloud để thực hành.

   https://shared-assets.adobe.com/link/20ff2162-aeaa-4b73-74fa-df7bfbbd5572   

• File mẫu (676 KB).

   https://shared-assets.adobe.com/link/087cdc37-d0f4-436a-5963-265db72bb5ea   

Lưu ý: Phần tải xuống kể cả bộ thư viện Creative Cloud và file dự án đầy đủ cho seri chỉ dẫn này. Bạn cũng có thể có thể tiếp tục xây dựng trên file bắt đầu trong Hướng dẫn tạo website bằng Dreamweaver CC – Phần 1 hoặc điều hướng đến thư mục liên quan để sử dụng file bắt đầu cho từng phần.

Giới thiệu

Chào mừng bạn đến với phần thứ 2 của loạt bài hướng dẫn thành lập một trang web thích nghi (responsive website) trong Dreamweaver CC 2015. Trong khúc đầu tiên, bạn đã định vị được một trang web và tạo hai trang mới chỉ có tiêu đề. Ở phần này, bạn sẽ có chỉ dẫn để thêm nội dung văn bản cho trang chủ, index.html bằng cách gõ trực diện văn bản trong chế độ Edit của Live View và sau đó sao chép và dán văn bản đã được định hình từ Microsoft Word. Nếu không có quyền truy cập Word, bạn có thể dán nội dung từ file định hình văn bản giàu tính chất (Rich text format – RTF) và sau đó thực hiện một số điều tiết nhỏ.

Nếu có kiến thức về thiết kế đồ họa, chắc hẳn bạn sẽ thắc mắc tại sao không thiết kế hình ảnh cho trang mà phải nhập văn bản trực tiếp như vậy. Câu trả lời là các công cụ kiếm tìm chả mấy đoái hoài đến thiết kế hình ảnh đẹp mắt của bạn mà nó chỉ kiếm tìm nội dung văn bản có tiêu đề tin tức và các liên kết có liên quan.

Tạo container cho trang web và thêm style sheet

Trước khi thêm văn bản, bạn nên thêm một container cho toàn bộ trang để cũng có thể có thể căn giữa nội dung trang trên độ phân giải màn hình lớn. Ở phần này bạn cũng sẽ liên kết một style sheet cho trang.

Bước 1 . Trong trang Bayside Responsive, mở index.html (trang web trống bạn đã tạo trong Phần 1). Nếu sights.html đang mở, hãy đóng nó. Ở phần này bạn chỉ cần tập trung vào index.html, trang chủ của trang web.

Lưu ý : Đây là quy ước chung sử dụng index.html cho trang chủ của trang web. Điều đây là do hầu hết các máy chủ web coi index.html hoặc index.htm là trang mặc định trong một thư mục. Vì vậy, trang này được hiển thị tự động nếu không thêm tên file vào cuối URL.

Bước 2. Đảm bảo Split View mở bằng phương pháp click vào nút Split ở ở trên bên trái của cửa sổ Document .

Bước 3 . Click vào bất cứ đâu trong Live View để đảm bảo tập trung vào phần thân của trang.

Bước 4 . Click vào tab Insert , chọn HTML từ menu thả xuống.

Tab này chứa các tùy chọn để chèn các thành phần HTML được dùng thông dụng nhất trong trang web.

Bước 5. Click vào Div (mục trước mắt ở trên cùng) để chèn thành phần HTML cùng một số văn bản giữ chỗ giữa các thẻ trong HTML bên dưới. Văn bản đặt chỗ được hiển thị trong Live View được bao quanh bởi viền màu xanh nhạt. Đường viền màu xanh có một tab với tên của phần tử HTML. Tab này được gọi là Element Display .

Bước 6 . Phần tử

Click vào nút dấu cộng trên Element Display để mở một trường thêm lớp hoặc ID cho phần tử. Gõ #wrapper vào trong trường đó và nhấn Tab hoặc Enter/Return để định vị thay đổi.

Bước 7. Một khung xuất hiện bên cạnh Element Display đòi hỏi bạn chọn nguồn cho quy tắc kiểu cho ID vừa tạo. Mở menu thả xuống và chọn Create a new CSS file .

Bước 8. Trên hộp thoại Create a New CSS File mở ra, click vào nút Browse ở bên phải trường File/URL để mở hộp thoại Save Style Sheet File As .

Bước 9. Tạo một thư mục mới được gọi là styles trong thư mục gốc của trang.

Bước 10 . Gõ responsive trong trường File name và click vào Save , sau đó click vào OK để đóng hộp thoại đầu tiên. Nếu hộp thoại Select a source vẫn hiển thị, click vào nó để đóng.

Bước 11 . Bạn cần nhớ rằng thẻ

    
 Content for New div Tag Goes Here 
    

Thuộc tính ID trong HTML không bắt đầu với hàm băm. Giao diện trực giác của Dreamweaver sử dụng cú pháp CSS để phân biệt giữa ID và các lớp. Trong CSS, bộ chọn ID bắt đầu bằng hàm băm, trong lúc một lớp bắt đầu bằng dấu chấm.

Bước 12 . Bạn sẽ thấy một thanh công cụ mới xuất hiện ở đầu cửa sổ Document giữa tab tên file và nút Split . Đây là thanh công cụ Related Files , liệt kê tất cả những file được đính kèm trong trang web hiện tại.

Click vào responsive.css trên thanh công cụ Related Files . Phần Code View của cửa sổ Document lúc này hiện hiển thị code trong style sheet bạn vừa tạo ra. Các dòng 2-3 chứa một quy tắc kiểu trống cho wrapper ID.

Lưu ý rằng bộ chọn trong style sheet bắt đầu với một hàm băm để chỉ nó sẽ định kiểu cho phần tử có và một ID. Bạn sẽ thêm định nghĩa kiểu cho wrapper

Bước 13 . Click vào Source Code trong thanh công cụ Related Files để trở về HTML trong index.html.

Bước 14 . Kiểm tra code trong dòng 6. Nó liên kết style sheet với trang ngày nay như thế này:

Bước 15 . Cả hai tên file đều có dấu hoa thị bên cạnh để chỉ chúng không được lưu. Chọn File > Save All Related Files .

Bước 16 . Mở tab Files và mở rộng thư mục styles để đáp ứng style sheet responsive.css được tạo ở đúng vị trí.

Thêm nội dung văn bản trực diện trong Live View

Live View của Dreamweaver sử dụng Chrome Embedded Framework, do đó đây thực thụ là một trình duyệt chạy trong cửa sổ Document. Đây cũng chính là một surface có thể chỉnh sửa để bạn thêm nội dung mới hoặc bố trí lại nội dung đã có. Bạn cũng có thể có thể kéo và thả văn bản, hình ảnh trong Live View, nhưng nó chẳng cần là một công cụ bố cục hình ảnh cũng có thể có thể thay đổi kích thước và xác định các phần tử bằng phương pháp kéo các đường viền của chúng. Bố cục và định vị đều được điều khiển bởi CSS.

Để thêm nội dung văn bản bằng cách gõ trực tiếp trong Live View, thực hành theo các bước dưới đây.

Bước 1. Bạn cần đáp ứng chọn Source Code trong thanh công cụ Related Files và click vào bất kể đâu trong văn bản giữ chỗ trong Live View . Bạn có thể thấy điểm chèn (một đường thẳng đứng) ở nơi nào đó bên trong văn bản trong Code View .

Bước 2 . Trong trình kiểm tra Property , kích hoạt menu thả xuống Format và chọn Heading 1 . Nếu chẳng thể thấy menu Format , kiểm tra xem nút HTML phía trên cùng bên trái của trình kiểm tra Property đã được chọn chưa.

Bước 3 . Trong Live View , lúc này bạn sẽ thấy văn bản giữ chỗ có cỡ chữ lớn, được bôi đậm và Element Display chỉ này là thành phần

, nghĩa là tiêu đề cao nhất.

Trong code bên dưới, Dreamweaver đã bọc văn bản giữ chỗ trong 1 cặp thẻ

được lồng bên trong wrapper

.

Bước 4. Trong khi vẫn chọn tiêu đề

, click đúp vào bất cứ đâu trong văn bản trong Live View để truy cập vào chế độ Edit . Giờ đây bạn sẽ thấy đường viền màu cam thay thế đường viên màu xanh và Code View màu xám.

Bước 5 . Chọn mọi thứ văn bản giữ chỗ và gõ Bayside Beat . Click chuột khỏi đường viền màu cam để tránh khỏi chế độ Edit . Trong Code View , văn bản giữa các thẻ

phải giống hệt như bạn vừa nhập.

Nếu không cẩn trọng khi thay thế mọi thứ văn bản giữ chỗ trong chế độ Edit , Dreamweaver sẽ thêm   vào ngay sau thẻ HTML mở hoặc ngay trước thẻ đóng. Đây là một thực thể ký tự HTML cho một không gian tránh bị phá hủy. Dreamweaver thêm nó để chỉ cần thêm 1 số nội dung giữa các thẻ mở và đóng. Nếu bạn thấy   , hãy vào Code View và xóa thủ công. Thực thể ký tự cho 1 không gian tránh bị phá hủy trong code có thể gây ra vấn đề cho bố cục. Đây là nguyên nhân tại sao bạn nên cẩn thận coi xét các thứ đang xảy ra trong đánh dấu, ngay khi khi bạn không tự nhập code.

Bước 6. Tiếp theo, bạn sẽ thêm 1 danh sách các chấm đầu dòng để sau đó chuyển đổi thành menu điều hướng. Trong HTML, các chấm đầu dòng được xem là danh sách không có thứ tự và được bọc trong một cặp các thẻ

. Để tạo một bản kê không có thứ tự trong Live View , bạn phải bắt đầu với một đoạn.

Với tiêu đề

vẫn được chọn trong Live View , hãy mở tab Insert và chọn Paragraph từ danh mục HTML (đây là mục thứ ba từ trên xuống).

Bước 7 . Trên hộp thoại Position Assist Dialog xuất hiện, click vào After để thêm phần tử mới là đoạn văn bản sau tiêu đề.

Bước 8 . Dreamweaver sẽ chèn đoạn mới với một vài văn bản giữ chỗ ngay sau tiêu đề chính.

Bước 9 . Vẫn chọn paragraph trong Live View , chuyển đổi nó thành chấm đầu dòng bằng phương pháp click vào icon Unordered List trong trình kiểm tra Property .

Bước 10. Kiểm tra xem trang của bạn trông giống như hình bên dưới. Trong Live View , văn bản đặt chỗ được đặt trước dấu chấm đầu dòng và Element Display cho thấy phần tử

Bước 11 . Với mục danh sách vẫn được chọn trong Live View , click đúp vào bất cứ nơi nào trong văn bản đặt chỗ để vào chế độ Edit . Chọn mọi thứ văn bản đặt chỗ và thay thế nó bằng Home .

Bước 12 . Trong chế độ Edit , nhấn Enter/Return và gõ Sights .

Bước 13 . Thực hiện tương tự như vậy để thêm Dining , Events và Lodging vào danh sách gạch đầu dòng.

Bước 14 . Click rời khỏi đường viền màu cam để né khỏi chế độ Edit . Trang của bạn sẽ trông giống như hình dưới đây.

Bước 15 . Lưu index.html.

Sao chép và dán văn bản từ Microsoft Word

Dreamweaver là một môi trường phát triển web, không cần là trình xử lý văn bản. Nhập một lượng lớn văn bản trực diện vào Live View có thể là công việc khá tẻ nhạt. Tuy nhiên, Dreamweaver có thể chuyển đổi một tư liệu Microsoft Word thành HTML giữ nguyên các tiêu đề, đoạn văn, gạch đầu dòng và danh sách được đánh số, cũng giống kiểu in đậm và in nghiêng.

Kỹ thuật bạn sử dụng ở đây không giống như việc sử dụng Microsoft Word để lưu văn bản ở định hình HTML. Word thêm biết bao code của nó vào HTML nhưng Dreamweaver sẽ loại bỏ mọi thứ các code không cần thiết này khi sao chép và dán từ Word, để lại cho bạn HTML sạch sẽ.

Nếu không có bản sao Microsoft Word, bạn có thể sử dụng các file mẫu có chứa nội dung văn bản ở định dạng RTF. Bạn sẽ có chỉ dẫn sử dụng file RTF sau phần này. Một điều cần lưu ý là không sử dụng Open Office hoặc Libre Office thay cho Word chính vì dán từ định dạng OpenDocument Format sẽ thêm những code không cần thiết khó sạch được.

Bước 1. Trong tab Files , mở rộng thư mục nội dung và click đúp vào index.docx để mở file trong Microsoft Word.

Bước 2 . Chọn tất cả văn bản ở cuối thông báo bản quyền và sao chép nó vào bộ nhớ tạm.

Bước 3 . Quay trở lại Dreamweaver và đáp ứng bản kê không có thứ tự được chọn trong Live View . Bạn có thể chọn toàn bộ phần tử bằng cách click vào bất kỳ địa làm sao trong danh sách, sau đó click ul trong bộ trọn Tag ở dưới cùng của cửa sổ Document .

Bước 4. Chọn Edit > Paste Special hoặc sử dụng phím tắt Ctrl + Shift + V (Windows) hoặc Cmd + Shift + V (Mac) để mở hộp thoại Paste Special .

Bước 5. Chọn tùy chọn thứ ba Text with structure plus basic formatting (bold, italic) và chọn Clean up Word paragraph spacing , sau đó click vào OK .

Dreamweaver dán văn bản sau phần tử được chọn (danh sách không có thứ tự) và định dạng các đoạn văn và tiêu đề với những thẻ HTML chính xác.

Lưu ý: Không được chọn tùy chọn thứ tư cho định hình đầy đủ, ngay khi khi bạn mong muốn sử dụng cùng màu và phông chữ. Vì tùy chọn này sẽ sao chép một lượng lớn code Microsoft độc quyền vào trang HTML của bạn khiến cho chuyện tạo kiểu trang bằng CSS trở nên vô cùng khó khăn.

Bước 6. Chọn đoạn đầu tiên (đoạn bắt đầu bằng “Bayside Beat keeps you…” ) bằng phương pháp click vào bất kỳ vị trí nào trong văn bản trong Live View . Element Display chỉ ra rằng đó là một phần tử

(đoạn). Trong Code View , văn bản được gói trong 1 cặp thẻ

.

Nếu văn bản được dán không có Element Display và không có thẻ trong code, điều ấy có nghĩa bạn đang ở chế độ Code View khi dán nội dung từ tài liệu Word. Hoàn tác dán văn bản bằng cách nhấn Ctrl + Z (Windows) hoặc Cmd + Z (Mac), sau đó chọn danh sách không theo thứ tự trong Live View trước lúc dán.

Bước 7 . Chọn tiêu đề trước mắt Ride the Cable Cars bằng cách click vào bất cứ đâu trong văn bản. Element display hiển thị nó là một thành phần

(tiêu đề cấp hai) và trong code, văn bản được gói trong các thẻ

.

Tiêu đề được tạo kiểu trong Word là Heading 2, vì thế Dreamweaver tự động áp dụng thẻ HTML tương đương.

Bước 8 . Click vào bất cứ đâu trong văn bản của thông báo bản quyền (đây là đoạn cuối cùng trong trang) và nó phải có Element Display cho thấy đó là đoạn văn.

Bước 9. Nếu không có Element Display , bạn cần điều tiết định dạng bằng cách chọn văn bản của thông báo bản quyền trong Code View . Sau đó chọn Paragraph từ menu thả xuống Format trong trình kiểm tra Property .

Điều này diễn ra do Dreamweaver dựa vào ngắt dòng ở cuối đoạn văn, tiêu đề và các nhân tố văn bản khác trong Word để xác định loại thẻ HTML. Khi chọn văn bản trong tư liệu Word, thường có 1 khoảng trống nhỏ sau đoạn văn bản cuối cùng.

Bước 10 . Lưu index.html.

Với cách này bạn sẽ nhập văn bản nhanh hơn hẳn so với gõ trực diện vào Live View . Dreamweaver ghi nhớ các cài đặt trong hộp thoại Paste Special , do đó, lần tới bạn cũng đều có thể dán trực tiếp vào Live View bằng các phím tắt thường thì Ctrl + V (Windows) và Cmd + V (Mac). Trước khi dán vào Live View, hãy đảm bảo bạn chọn thành phần xuất hiện ngay trước nội dung mới.

Nếu nhìn kỹ vào HTML trong Code View , bạn sẽ nhận thấy một số instance &rsquo. Văn bản trong tư liệu Word sử dụng các trích dẫn sáng dạ mà Dreamweaver đã chuyển đổi thành thực thể ký tự HTML cho một trích dẫn đúng.

Sử dụng Quick Property Inspector để định hình các thành phần văn bản

Nếu không có Microsoft Word hoặc Word Viewer, bạn sẽ thật cần sao chép và dán nội dung văn bản từ file định dạng văn bản giàu tính chất và sau đó định dạng các tiêu đề vì tất cả văn bản sẽ có định dạng dưới dạng đoạn văn.

Bước 1 . Trong tab Files , mở rộng thư mục nội dung và bấm chuột phải vào index.rtf . Chọn Open With > Browse từ menu ngữ cảnh và chọn trình soạn thảo văn bản phù hợp, chẳng hạn như TextEdit.

File này chứa nội dung giống như trong index.docx, nhưng có thêm 1 dòng trống sau mỗi đoạn và tiêu đề để Dreamweaver định hình văn bản chính xác như các đoạn văn.

Bước 2 . Chọn mọi thứ văn bản từ đầu file đi xuống rồi cho dù là dòng thông báo bản quyền. Sao chép văn bản đã chọn vào khay nhớ tạm.

Bước 3 . Quay trở lại Dreamweaver và đảm bảo bản kê không có thứ tự được chọn trong Live View .

Bước 4 . Chọn Edit > Paste Special hoặc sử dụng phím tắt Ctrl + Shift + V (Windows) hoặc Cmd + Shift + V (Mac) để mở hộp thoại Paste Special . Bạn có thể thấy trong hình bên dưới, hai tùy chọn cuối cùng và hộp chọn thứ 2 bị vô hiệu hóa do bạn không dán nội dung từ Microsoft Word.

Chọn tùy chọn Text with structure (paragraphs, lists, tables, etc.) và bỏ chọn Retain line breaks , sau đó click vào Ok để Dreamweaver dán mọi thứ văn bản được định hình dưới dạng đoạn văn.

Bước 5 . Khi dán từ định hình văn bản giàu tính chất, Dreamweaver không nhận biết tiêu đề. Vì vậy, click vào bất cứ nơi nào trong khúc có nội dung “Riding the Cable Cars” .

Bước 6. Click vào tượng trưng ba đường ngang ở bên trái Element Display để hiển thị Quick Property Inspector và chọn h2 từ menu thả xuống để chuyển đoạn văn thành tiêu đề cấp hai.

Bước 7. Lặp lại bước trước với tiêu đề Cable Car Tips .

Bước 8 . Chọn thông báo bản quyền ở cuối trang để xác định rằng nó đã được định hình dưới dạng một quãng văn. Nếu cần, hãy điều tiết định dường như được miêu tả trong Bước 9 của phần trước.

Sao chép và dán nội dung văn bản từ một file định hình văn bản giàu thuộc tính khá đơn giản. Những điểm quan trọng cần nhớ là:

• Cần có hai dòng trống giữa mỗi đoạn hoặc tiêu đề.
• Sao chép dòng trống sau đoạn cuối cùng.
• Luôn sử dụng Edit > Paste Special hoặc Ctrl + Shift + V (Windows) hoặc Cmd + Shift + V (Mac) và bỏ chọn Retain line breaks . Mặc dù Dreamweaver ghi nhớ các cài đặt của bạn, nhưng việc sử dụng Ctrl + V hoặc Cmd + V để dán từ định dạng văn bản giàu tính chất, ngắt dòng bổ sung sẽ được thêm nữa HTML.
• Truy cập Quick Property Inspector bằng phương pháp click vào biểu trưng ba thanh ngang trên Element Display để chuyển đoạn văn thành tiêu đề HTML.

Bây giờ, trang chủ Bayside Beat có đầy đặn nội dung văn bản, nhưng nó trông rất tẻ nhạt. Nếu tải trang trong trình duyệt, các đoạn sẽ mở rộng toàn bộ chiều rộng của chế độ xem. Bạn có thể khống chế điều đó bằng CSS, nhưng cũng cần thêm các yếu tố cấu trúc HTML khác để chia trang thành các nhóm logic để tạo kiểu và điều này sẽ có chỉ dẫn trong Phần 3 của seri này.

Xem các phần khác trong seri:

• Hướng dẫn tạo website bằng Dreamweaver CC phần 1
• Hướng dẫn tạo website bằng Dreamweaver CC phần 3

tạo trang web bằng Dreamweaver CC 2015,thiết kế web bằng Dreamweaver,tạo website bằng Dreamweaver,thêm văn bản vào trang web,định dạng văn bản trang web

Nội dung Hướng dẫn tạo website bằng Dreamweaver CC – Phần 2: Thêm và định dạng văn bản được tổng hợp sưu tầm biên tập bởi: Tin Học Trường Tín. Mọi ý kiến vui lòng gửi Liên Hệ cho truongtin.top để điều chỉnh. truongtin.top tks.