Cách Chỉnh sửa Styles trong một Giao diện CSS trong Dreamweaver - núm vú

Sau khi bạn tạo một trang mới với một bố cục CSS trong Dreamweaver, bạn có một số tùy chọn dường như vô hạn để chỉnh sửa nó, nhưng trước tiên bạn phải xác định phong cách nào trong bảng kiểu tương ứng với các phần tử bạn muốn chỉnh sửa.

Như bạn có thể tưởng tượng, bạn có thể chỉnh sửa các kiểu trong một bố cục CSS bằng nhiều cách để tạo ra thiết kế của riêng bạn.

Sau khi bạn điều chỉnh các phong cách hiện tại để có được thiết kế trang cơ bản theo cách bạn muốn, bạn có thể tạo thêm nhiều phong cách như bạn mong muốn.

Làm thế nào để kiểm tra các phong cách sẵn có và thực hiện chỉnh sửa cơ bản

Bạn có thể sử dụng các hướng dẫn cơ bản giống nhau với bất kỳ bố cục CSS nào có trong Dreamweaver. Để chỉnh sửa các kiểu trong một bố cục CSS, hãy làm theo các bước sau:

1. Mở tệp trang dựa trên bố cục CSS của Dreamweaver và chọn Window → CSS Styles (hoặc nhấp vào tab CSS Designer để mở rộng bảng điều khiển).

   Bảng điều khiển của Nhà thiết kế CSS mở ra hoặc mở rộng.

2. Nhấp để chọn tên của bảng định kiểu trong bảng Sources ở phía trên cùng của thiết kế CSS.

   Tất cả các kiểu liên kết với trang mới được liệt kê trong bảng lựa chọn.

   

3. Chọn tên của bất kỳ kiểu nào được liệt kê trong bảng Lựa chọn Thiết kế CSS.

   Các quy tắc CSS tương ứng được xác định cho kiểu được hiển thị trong bảng thuộc tính, ở dưới cùng của bảng điều khiển CSS Designer. Nhấp qua danh sách các kiểu và xem xét các quy tắc tương ứng của chúng là một cách hay để có được cái nhìn tổng thể về thiết kế và để xem nơi các tùy chọn định dạng trang khác nhau được lưu trữ.

Tiêu đề HTML5,. nav, và footer kiểm soát các phần chính của trang. Ví dụ: kiểu tiêu đề bao gồm quy tắc làm cho màu nền xanh. Do đó, để thay đổi màu của vùng tiêu đề ở đầu trang, bạn thay đổi cài đặt màu nền trong quy tắc tiêu đề.

Cách chỉnh sửa cài đặt trên toàn bộ trang

Để chỉnh sửa các cài đặt trên toàn trang - chẳng hạn như màu nền của trang hoặc mặt phông chính, kích thước và màu sắc của văn bản được sử dụng trên toàn bộ trang - hãy làm theo các bước sau:

1. Trong bảng chọn Các Nhà thiết kế CSS, chọn kiểu có tên cơ thể.

   Các thuộc tính được xác định trong quy tắc kiểu đã chọn được hiển thị trong bảng thuộc tính.

   

2. Nhấp vào biểu tượng T ở đầu bảng thuộc tính và thay đổi hoặc thêm phông chữ mong muốn và cài đặt văn bản khác của bạn.

   Bạn có thể thay đổi mặt chữ, kích cỡ, kiểu dáng, và trọng lượng. Để thay đổi không gian giữa các dòng văn bản, thay đổi chiều cao dòng.

3. Cuộn xuống vùng nền của bảng thuộc tính và sử dụng màu tốt trong trường Màu nền để chỉ màu cho toàn bộ nền của trang.

   Ngoài ra, bạn có thể nhập bất kỳ mã màu thập lục phân nào trong trường Màu nền hoặc sử dụng eyedropper để lấy mẫu bất kỳ màu nào. Để thêm hình nền, nhấp vào trường URL trong phần nền, sau đó nhấp vào nút Duyệt sẽ xuất hiện và chọn hình ảnh bạn muốn làm nền. Sử dụng các biểu tượng Background-Repeat để xác định hình ảnh nền nên lặp lại trên trang như thế nào.

4. Thực hiện bất kỳ thay đổi hoặc bổ sung nào khác cho quy tắc kiểu.

Các thay đổi đối với các quy tắc kiểu dáng trong bảng thuộc tính được lưu tự động và áp dụng cho nội dung được định dạng theo quy tắc.

Cách tuỳ chỉnh các khu vực nội dung

Để thay đổi chiều rộng hoặc các cài đặt khác trong các khu vực nội dung chính, điều khiển kích thước tổng thể của trang và tiêu đề, chân trang và thanh bên, hãy làm theo các bước sau:

1. Để thay đổi chiều rộng của toàn bộ khu vực thiết kế chính:

   1. Nhấp vào. phong cách chứa trong bảng Lựa chọn của bảng điều khiển Nhà thiết kế CSS.

      Các tính chất của. quy tắc kiểu thùng chứa được hiển thị trong bảng điều khiển Thuộc tính, nơi bạn cũng có thể chỉnh sửa kiểu.

   2. Thay đổi kích thước trong trường Width hoặc nhập một số mới cho chiều rộng trang mong muốn của bạn.

      Chiều rộng của thiết kế trang được tự động thay đổi dựa trên kích thước bạn đã nhập. Khi bạn thay đổi chiều rộng của. phong cách container, bạn thay đổi chiều rộng của toàn bộ thiết kế bởi vì tất cả các thẻ và các yếu tố khác được chứa trong định dạng với. phong cách container - và tất cả chúng đều được mở rộng để lấp đầy. thùng đựng hàng.

2. Để thay đổi kích thước của khu vực nội dung của trang, hãy chọn kiểu có tên. nội dung và xác định kích thước và các tùy chọn khác mà bạn mong muốn trong bảng thuộc tính.

   Nếu bạn thay đổi chiều rộng của vùng nội dung trong một bố cục bao gồm một thanh bên, bạn cũng phải thay đổi chiều rộng của thanh bên.

3. Để thay đổi màu nền của bất kỳ kiểu nào trên trang, nhấp vào tên của kiểu tương ứng và thay đổi cài đặt trong phần nền của bảng thuộc tính.

   Ví dụ: trong các bố cục CSS trong Dreamweaver, thanh bên được định nghĩa theo một kiểu có tên. sidebar1. Vì vậy, để thay đổi màu nền, bạn sẽ click. sidebar1 trong bảng lựa chọn, chọn loại nền trong bảng thuộc tính, và chọn màu bạn muốn. Tương tự, để thay đổi màu nền của tiêu đề, hãy chọn kiểu tiêu đề có tên trong bảng Chọn và sử dụng màu sắc tốt.

   

4. Để thêm một hình ảnh vào tiêu đề:

   1. Chọn hình ảnh giữ chỗ có nhãn Chèn biểu tượng và nhấn phím Xóa hoặc Backspace.

   2. Chọn Chèn → Hình ảnh → Hình ảnh và chọn một hình ảnh sử dụng hộp thoại Select Image Source.

5. Thay thế văn bản và chèn hình ảnh trong thanh bên và nội dung chính.

   Bạn có thể thêm hoặc thay thế văn bản và chèn hình ảnh vào bất kỳ trang nào được tạo từ bố cục CSS, cũng giống như bạn ở bất kỳ trang web nào khác.

6. Chọn File → Save All để lưu trang và kiểu.