Làm thế nào để tạo một Sơ đồ bố trí chất lỏng một cột trong Dreamweaver - núm vú

Video: Bootstrap 4.0: Bài 2. Thiết lập hệ thống lưới Grid System 2025

Trước khi bắt đầu tạo một thiết kế lưới điện phức tạp trong Dreamweaver, hãy xem xét thử một cách đơn giản hơn. Bắt đầu bằng cách tạo một bố trí lưới lỏng một cột, đơn giản theo các hướng dẫn sau:

Chọn File → New.

Cửa sổ Tài liệu mới sẽ mở ra. Lưu ý: Đảm bảo bạn đã hoàn tất quy trình thiết lập trang web trước khi bắt đầu làm việc với bố trí lưới điện mới.
Từ Giao diện Bên trái của màn hình, chọn Giao diện Lưới Lỏng.

Các tùy chọn cửa sổ Tài liệu Mới thay đổi cho các lựa chọn lưới chất lỏng.
Chỉ định số cột mà bạn muốn trong mỗi ba bố cục.

Để thêm hoặc xoá cột, hãy chọn trường văn bản trên mỗi cột lần lượt và nhập số cột mà bạn muốn.
Chỉ định tỷ lệ phần trăm cửa sổ trình duyệt mà bạn muốn bố cục bố trí.

Chọn trường văn bản bên dưới mỗi bố cục lần lượt và nhập một số đại diện cho phần trăm không gian bạn muốn bố cục trang trải khi thiết kế được xem trong cửa sổ trình duyệt. Ví dụ: theo mặc định, bố cục trên máy tính để bàn được thiết lập để chiếm 90 phần trăm không gian có sẵn, nhưng bạn có thể thay đổi nó thành 95 phần trăm để tạo cho mình thêm không gian thiết kế và giảm không gian lề.
Thay đổi phần trăm chiều rộng của cột để thay đổi khoảng cách lề giữa mỗi cột.

Theo mặc định, Dreamweaver đặt mỗi lề để chiếm 25 phần trăm không gian có sẵn.
Sử dụng danh sách thả xuống để chỉ định loại doctype.

Theo mặc định, bố cục lưới lỏng được tạo bằng cách sử dụng loại doạ HTML5. Trừ khi bạn cần thay đổi loại tài liệu để tương thích với các định dạng khác được sử dụng trong trang web của bạn, HMTL5 là tùy chọn được đề xuất cho các thiết kế web đáp ứng.
Nhấp vào Tạo.

hộp thoại Lưu thành là sẵn sàng để lưu tệp tin CSS.
Nhập tên cho tệp CSS của bạn và nhấp vào Lưu.

Một tệp HTML mới sẽ mở ra trong không gian làm việc của Dreamweaver, nhưng chưa được lưu. Tệp CSS bạn đặt tên được lưu và tên của nó sẽ hiển thị trong bảng Tệp.

Lưu ý: Không giống như quá trình tạo các loại trang khác trong Dreamweaver, tệp CSS được lưu đầu tiên và tệp HTML được lưu trong bước sau.
Chọn File → Save

hộp thoại Save As mở ra.
Nhập tên cho tệp HTML của bạn và nhấp vào OK.

hộp thoại Save As đóng lại và một thông báo xuất hiện trong Dreamweaver thông báo cho bạn rằng bố trí lưới lỏng của bạn yêu cầu hai tệp bổ sung: boilerplate. css và đáp ứng. phút js.
Nhấn OK để sao chép bảng boilerplate.css và đáp ứng. phút js vào thư mục trang web của bạn.

Tất cả ba tệp được thêm vào bảng điều khiển Tệp và bạn quay lại tệp HTML mới được đặt tên của mình mở trong không gian làm việc của Dreamweaver.
Đặt tiêu đề trang bằng cách nhập văn bản vào trường Tiêu đề ở đầu không gian làm việc.