Điểm cốt lõi cần nắm về Hướng dẫn tạo website bằng Dreamweaver CC - Phần 2: Thêm và định dạng văn bản

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

Để tiết kiệm thời gian và tránh thao tác sai lệch, bạn hãy làm theo trình tự từng bước đã được chuẩn hóa dưới đây.

---

Hướng dẫn thực hiện chi tiết từng bước

Bước 1: Cách tạo trang web bằng Dreamweaver CC 2015 - Thêm và định dạng văn bản

• 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 bao gồm bộ thư viện Creative Cloud và file dự án đầy đủ cho seri hướng dẫn này. Bạn 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.
• Mẹo thao tác nhanh: Quan sát kỹ biểu tượng trạng thái ở góc cửa sổ trước khi chuyển sang bước kế tiếp.

Bước 2: Giới thiệu

• 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ụ tìm kiếm không mấy quan tâm đến thiết kế hình ảnh đẹp mắt của bạn mà nó chỉ tìm kiếm nội dung văn bản có tiêu đề thông tin và các liên kết có liên quan.
• Mẹo thao tác nhanh: Quan sát kỹ biểu tượng trạng thái ở góc cửa sổ trước khi chuyển sang bước kế tiếp.

Bước 3: 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ó 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.
• Chi tiết thực hiện: 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.
• Chi tiết thực hiện: Lưu ý: Đây là quy ước chung sử dụng index.html cho trang chủ của trang web. Điều nà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.
• Chi tiết thực hiện: Bước 2. Đảm bảo Split View mở bằng cách click vào nút Split ở phía trên bên trái của cửa sổ Document.

<div id="wrapper">Content for New div Tag Goes Here</div>

<link href="styles/responsive.css" rel="stylesheet" type="text/css">

Bước 4: Thêm nội dung văn bản trực tiếp trong Live View

• Live View của Dreamweaver sử dụng Chrome Embedded Framework, do đó đây thực sự là một trình duyệt chạy trong cửa sổ Document. Đây cũng là một surface có thể chỉnh sửa để bạn thêm nội dung mới hoặc sắp xếp lại nội dung đã có. Bạn có thể kéo và thả văn bản, hình ảnh trong Live View, nhưng nó không phải là một công cụ bố cục hình ảnh có thể thay đổi kích thước và định vị các thành phần bằng cách 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.
• Chi tiết thực hiện: Bước 1. Bạn cần đảm bảo chọn Source Code trong thanh công cụ Related Files và click vào bất cứ đâ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) ở đâu đó bên trong văn bản trong Code View.
• Chi tiết thực hiện: 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 không thể thấy menu Format, kiểm tra xem nút HTML ở trên cùng bên trái của trình kiểm tra Property đã được chọn chưa.
• Chi tiết thực hiện: Bước 3. Trong Live View, giờ đâ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ỉ đây là phần tử

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

Bước 5: 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 phải là trình xử lý văn bản. Nhập một lượng lớn văn bản trực tiếp 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ài 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 như kiểu in đậm và in nghiêng.
• Chi tiết thực hiện: 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 dạng HTML. Word thêm rất nhiều code của nó vào HTML nhưng Dreamweaver sẽ loại bỏ tất cả 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ẽ.
• Chi tiết thực hiện: 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 hướng 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 bởi 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.
• Chi tiết thực hiện: 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.

---

Lưu ý thực tế dành cho người dùng tại Việt Nam

• Xung đột bộ gõ tiếng Việt: Khi nhập lệnh, đường dẫn thư mục hoặc công thức hàm, hãy chuyển bộ gõ Unikey / EVKey sang chế độ tiếng Anh (E) để tránh lỗi nhảy dấu hoặc mất ký tự.
• Kiểm tra phân quyền: Nếu hệ thống yêu cầu xác nhận quyền quản trị (Run as Administrator) hoặc mã PIN thiết bị, hãy cấp quyền để thay đổi được lưu vĩnh viễn.

---

📊 Bảng lưu ý cài đặt & Tối ưu phần mềm an toàn trên máy tính

Hạng mục kiểm tra	Khuyến nghị thực chiến	Lợi ích mang lại
Nguồn tải bộ cài	Trang chủ nhà phát hành hoặc Microsoft Store / GitHub	Tránh 100% nguy cơ dính phần mềm quảng cáo (Adware) và mã độc
Tùy chọn khi cài đặt	Chọn Custom / Advanced Install để bỏ tích phần mềm đính kèm	Giữ máy tính sạch sẽ, không bị đổi trang chủ trình duyệt
Xung đột bộ gõ tiếng Việt	Bấm Ctrl + Shift chuyển Unikey/EVKey sang E khi dùng phím tắt	Phím tắt trong phần mềm đồ họa/kỹ thuật nhận lệnh chuẩn 100%
Quản lý khởi động cùng máy	Ctrl + Shift + Esc ➔ Tab Startup apps ➔ Disable app ít dùng	Giúp máy tính khởi động nhanh hơn từ 30% – 50%

---

[!TIP] Mẹo thực chiến nhanh: Khi thao tác với hướng dẫn tạo website bằng dreamweaver cc - phần 2: thêm và định dạng văn bản, nếu cần nhập công thức hoặc phím tắt trên máy tính, hãy kiểm tra nhanh chế độ gõ Unikey / EVKey ở góc phải thanh Taskbar để tránh lỗi gõ nhầm ký tự.

---

🔗 Tiện ích & Công cụ thực chiến liên quan

• Tính lương & thuế TNCN tự động: Bảng tính lương Gross Net chuẩn cập nhật mới nhất.
• Kho tài nguyên đồ họa & font chữ Việt hóa: Tải mẫu PSD chuẩn chất lượng cao.
• Tạo mã QR WiFi & VietQR không giới hạn: Tạo mã QR miễn phí không hết hạn.
• Xem lịch âm dương & ngày hoàng đạo: Tra cứu lịch vạn niên & ngày hoàng đạo.