Cách thêm ảnh và nền trong Dreamweaver CC

Mục lục:

1. Giới thiệu
2. Khái niệm căn chỉnh ảnh và nền trong Adobe Dreamweaver CC
3. Phân biệt giữa ảnh và nền trong Dreamweaver
4. Thêm ảnh vào trang bằng Design View
5. Sử dụng thuộc tính img src để chỉ định ảnh trong Dreamweaver
6. Di chuyển và xóa ảnh trong Dreamweaver
7. Các thuộc tính img khác trong Property Inspector
8. Nhập một ảnh làm banner
9. Thêm nền cho một Div Tag
10. Làm thế nào để chọn ảnh và nền chính xác

📷 Ảnh và Nền trong Adobe Dreamweaver CC

Trong video này, chúng ta sẽ tìm hiểu cách thêm ảnh và nền vào trang web bằng Adobe Dreamweaver CC. Trước khi bắt đầu, chúng ta cần hiểu sự khác biệt giữa ảnh và nền trong Dreamweaver.

1. Giới thiệu

Nếu bạn đã theo dõi các video trước đây trong loạt bài hướng dẫn này, bạn sẽ biết cách tạo cấu trúc cơ bản cho một trang web. Tuy nhiên, nếu bạn gặp khó khăn, bạn có thể tải xuống mẫu trong phần mô tả video.

2. Khái niệm căn chỉnh ảnh và nền trong Adobe Dreamweaver CC

Trước khi đi vào chi tiết, chúng ta cần phân biệt giữa ảnh và nền trong Dreamweaver. Ảnh được coi là các tệp tin nằm bên trong một Div Tag. Trong trường hợp này, nếu kích thước của Div Tag thay đổi, ảnh sẽ giữ nguyên kích thước của nó. Trong khi đó, nền là một hình ảnh luôn che phủ toàn bộ Div Tag. Vì vậy, nếu Div Tag thay đổi kích thước, nền sẽ điều chỉnh theo.

3. Phân biệt giữa ảnh và nền trong Dreamweaver

Trên Dreamweaver, bạn có thể dễ dàng nhập ảnh hoặc bất kỳ hình ảnh nào vào chế độ Design. Bạn có thể sao chép và dán hoặc kéo thả tệp tin vào trang web. Bạn sẽ thấy rằng văn bản không thể nằm trên ảnh, trừ khi bạn sử dụng dòng mới.

4. Thêm ảnh vào trang bằng Design View

Việc nhập ảnh được thực hiện thông qua lệnh img src=... trong Dreamweaver. Bạn có thể chỉnh sửa kích thước ảnh bằng cách kéo các ô vuông nhỏ.

5. Sử dụng thuộc tính img src để chỉ định ảnh trong Dreamweaver

Bạn có thể di chuyển ảnh bằng cách chọn và kéo nó. Để xóa ảnh, chỉ cần chọn và cắt nó bằng cách sử dụng CTRL+X.

6. Di chuyển và xóa ảnh trong Dreamweaver

Property Inspector hiển thị tất cả các thuộc tính của ảnh. Chỉ cần chọn nó khi chế độ Live View đã tắt. Thuộc tính Src xác định ảnh nào sẽ được hiển thị. Thuộc tính Link thêm liên kết khi nhấp chuột vào ảnh. Bên phải, W và H đại diện cho kích thước của ảnh.

7. Các thuộc tính img khác trong Property Inspector

Để thực hiện chỉnh sửa đơn giản trên ảnh, chỉ cần sử dụng nút Edit. Đối với chỉnh sửa phức tạp hơn, bạn có thể sử dụng Photoshop bằng cách nhấp vào biểu tượng PS, nếu bạn đã cài đặt chương trình này. Hãy nhớ rằng tất cả những chỉnh sửa này là vĩnh viễn, vì vậy bạn có thể sử dụng chức năng Edit Undo để hoàn tác. Thuộc tính Alt đại diện cho Alternative Text, tức là một đoạn văn bản thay thế ảnh trong trường hợp không thể hiển thị ảnh.

8. Nhập một ảnh làm banner

Chúng ta có thể nhập một ảnh để làm banner. Hãy nhớ thiết lập bố cục phù hợp cuối cùng. Bạn có thể thiết lập thuộc tính bố cục của ảnh bằng cách chọn nó và đi tới mục Selectors trong phần thuộc tính.

9. Thêm nền cho một Div Tag

Bạn có thể thêm một nền đơn giản cho một Div Tag. Màu sắc này sẽ ảnh hưởng đến các Div Tag khác không có nền và được đặt trên Div Tag có màu sắc.

10. Làm thế nào để chọn ảnh và nền chính xác

Sử dụng ảnh hoặc nền tùy thuộc vào yêu cầu của bạn. Trường hợp đầu tiên là tốt hơn khi không có văn bản bên trong hoặc bạn không cần điều chỉnh kích thước ảnh khi Div Tag thay đổi kích thước dựa trên màn hình người dùng. Trong trường hợp bạn cần tạo một trang web linh hoạt trên các kích thước màn hình khác nhau, việc sử dụng nền là lựa chọn tốt nhất.

Hiểu được điều này, bạn có thể dễ dàng thêm một ảnh làm banner, một nền cho Div Tag và nếu bạn muốn, một màu sắc đơn giản cho các cột. Điều này phụ thuộc vào bạn! Hãy nhớ rằng bạn có thể cần điều chỉnh bố cục trong trường hợp bạn nhập ảnh vào. Bạn cũng có thể nhập các hình ảnh nhỏ hơn, đại diện cho nội dung của từng cột. Hãy thử ngay bây giờ!

🎥 Đó là tất cả! Xem video tiếp theo để biết cách đặt các đối tượng và quản lý vị trí! Cảm ơn bạn đã xem.