Hướng dẫn tạo website bằng Dreamweaver CC - Phần 4: Thay đổi font chữ và tạo kiểu cơ bản

Điểm cốt lõi cần nắm về Hướng dẫn tạo website bằng Dreamweaver CC - Phần 4: Thay đổi font chữ và tạo kiểu cơ bản

Trong phần thứ tư của loạt bài hướng dẫn tạo website bằng Dreamweaver này, hãy tìm hiểu cách tính kích thước các yếu tố web. Sau đó, sử dụng CSS để áp dụng bố cục và kiểu dáng chung cho các thành phần và văn bản trên trang.

Để 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: Hướng dẫn tạo trang web bằng Dreamweaver CC - Phần 4

• Chào mừng bạn đến với phần thứ tư của loạt bài hướng dẫn xây dựng một trang web đơn giản, thích nghi trong Dreamweaver CC 2015. Ba phần trước các bạn đã được hướng dẫn xây dựng trang web trong Dreamweaver và sau đó tạo hai trang sử dụng cấu trúc HTML. Hình dưới đây hiển thị trang web trong trình duyệt nếu bạn tải index.html.
• 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

• Chào mừng bạn đến với phần thứ tư của loạt bài hướng dẫn xây dựng một trang web đơn giản, thích nghi trong Dreamweaver CC 2015. Ba phần trước các bạn đã được hướng dẫn xây dựng trang web trong Dreamweaver và sau đó tạo hai trang sử dụng cấu trúc HTML. Hình dưới đây hiển thị trang web trong trình duyệt nếu bạn tải index.html.
• Chi tiết thực hiện: Phần còn lại của loạt bài hướng dẫn này trừ phần cuối cùng được dùng để biến “con vịt xấu xí” thành “con thiên nga” với thiết kế đơn giản nhưng thanh lịch bằng cách sử dụng CSS và thêm hình ảnh. Trong phần này, bạn sẽ tìm hiểu cách đơn giản để tính toán chiều cao, chiều rộng trang, thay đổi font chữ và sử dụng CSS Designer để tạo kiểu cơ bản.

Bước 3: Tạo một đoạn code để đơn giản hóa các tính toán chiều rộng và chiều cao

• Trong CSS, mọi phần tử được coi là một hộp. Trong mô hình hộp CSS mặc định, chiều rộng và chiều cao phần tử thường chỉ áp dụng cho chính phần tử đó. Nếu thêm khoảng đệm (padding) quanh nội dung của phần tử, nó sẽ không nằm trong tính toán và đường viền cũng vậy. Ví dụ, nếu bạn để chiều rộng của phần tử là 250px và chiều cao là 100px, sau đó thêm 20px cho khoảng đệm mỗi bên và cộng với 5px đường viền, chúng ta sẽ có chiều rộng tổng thể là 300px và chiều cao là 150px.
• Chi tiết thực hiện: Bước 1. Mở index.html trong cửa sổ Document, click vào responsive.css trong thanh công cụ Related Files để mở style sheet trong Split View.
• Chi tiết thực hiện: Bước 2. Click vào bên trong code và tạo một dòng trống trên dòng 2 và nhập /* Simplify width and height calculations /. Trong CSS, mọi thứ nằm giữa / và */ được coi là một nhận xét, vì vậy đây chỉ là một lời nhắc nhở về những gì code thực hiện.
• Chi tiết thực hiện: Trên dòng tiếp theo, gõ dấu ngoặc nhọn đóng (}) để kết thúc định nghĩa quy tắc kiểu.

*, *:before,
*:after {
    box-sizing: inherit;
}

Bước 4: Cài đặt font chữ Adobe Edge Web

• Bước 1. Chọn Modify > Manage Fonts để mở bảng Manage Fonts.
• Chi tiết thực hiện: Bước 2. Ở đây chúng ta sẽ sử dụng font chữ Source Sans Pro. Tìm kiếm nó bằng cách nhập tên trong trường tìm kiếm, bạn sẽ nhận được ba tùy chọn trong kết quả. Click vào tùy chọn ở giữa Source Sans Pro. Nếu thấy dấu tích màu xanh có nghĩa là bạn đã chọn font chữ đó.
• Chi tiết thực hiện: Source Sans Pro là một font chữ sans-serif (chữ không chân). Bạn có thể thấy rõ sự khác biệt giữa các mẫu của Source Sans Pro và Source Serif Pro.
• Chi tiết thực hiện: Bước 4. Nếu chấp nhận điều khoản, click vào Done.

Bước 5: Sử dụng CSS Designer để thêm các kiểu cơ bản vào trang

• Như đã thấy trước đó, gợi ý code có thể tăng tốc độ tạo quy tắc kiểu trong Code View. Dreamweaver cũng có CSS Design, bảng điều khiển giúp bạn tạo kiểu trang web trong khi xem thay đổi trong Live View. Trong phần này, bạn sẽ sử dụng CSS Designer để thêm kiểu cơ bản cho responsive.css và xem cách chúng ảnh hưởng đến index.html.
• Chi tiết thực hiện: Bước 1. Mở index.html trong cửa sổ Document, click vào nút Live để Live View phóng to lấp đầy cửa sổ.
• Chi tiết thực hiện: Bước 2. Mở CSS Designer bằng cách click vào tab của nó trong nhóm bảng bên phải màn hình (nó ở cùng bảng Snippet sử dụng ở phần trước). CSS Designer gồm 4 phần Sources, @Media, Selectors và Properties.
• Chi tiết thực hiện: Vai trò của mỗi phần như sau:

---

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 4: thay đổi font chữ và tạo kiểu cơ 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.