Thêm ảnh và tùy chỉnh trong Dreamweaver

Thêm ảnh và tùy chỉnh trong Dreamweaver

Mục lục

1. Introduction
2. Thay đổi mới trong tệp
3. Thêm ảnh header toàn màn hình
4. Thêm ảnh cho phần lợi ích
5. Sửa lỗi ảnh không đúng
6. Tùy chỉnh kích thước và tỷ lệ ảnh bằng CSS
7. Kết luận

📷 Thay đổi mới trong tệp

Trong bản sửa đổi này, tôi đã thêm một số gian lận để chúng ta có thể thêm ảnh vào tệp. Một thay đổi là tôi đã thêm một phần mới có tên là "full width hero", đó là một phần trống chỉ với một lớp full width hero để tạo ra một không gian trống hiện tại. Tiếp theo, tôi đã thêm một phần mới có ba lợi ích và chúng ta cũng sẽ thêm ảnh vào đó. Nếu bạn xem thư mục gốc, tôi đã thêm thư mục hình ảnh và có bốn hình ảnh vào đó. Hình ảnh "server room" sẽ là hình ảnh toàn màn hình, vì vậy chúng ta sẽ thử thêm nó vào đầu tiên.

📷 Thêm ảnh header toàn màn hình

Để thêm hình ảnh header toàn màn hình, chúng ta sẽ sử dụng CSS để làm việc này. Trước tiên, chúng ta cần chọn phần có lớp "full width hero". Vào CSS designer, tìm lớp này và thêm thuộc tính "background-image". Đường dẫn của hình ảnh là "img/server-room.jpg". Tiếp theo, chúng ta cần chỉ định kích thước và tùy chọn hiển thị của ảnh. Trong trường hợp này, chúng ta sẽ sử dụng "background-size: cover" để ảnh đổ toàn bộ màn hình. Đồng thời, chúng ta cũng cần chỉ định vị trí và không lặp lại ảnh. Sau khi thêm các thuộc tính CSS này, hình ảnh header sẽ được áp dụng vào phần tương ứng. Lưu lại và xem kết quả trong trình duyệt.

📷 Thêm ảnh cho phần lợi ích

Giờ chúng ta sẽ thêm các ảnh vào phần lợi ích. Đầu tiên, chúng ta hãy chọn phần với tên "data analytics". Sử dụng công cụ "insert image" để chọn hình ảnh từ thư mục và gán mô tả xen vào. Tương tự, chúng ta làm với phần "code deployment" và "network". Tiếp theo, lưu lại và xem kết quả.

📷 Sửa lỗi ảnh không đúng

Đã phát hiện ra rằng hình ảnh "server room" đã được chọn sai trong phần "full width hero". Chúng ta sẽ sửa lỗi này. Mở thuộc tính "background image" của lớp tương ứng và chọn hình ảnh đúng từ thư mục. Lưu lại và xem kết quả để đảm bảo ảnh hiển thị đúng.

⛏️ Tùy chỉnh kích thước và tỷ lệ ảnh bằng CSS

Trong video tiếp theo, chúng ta sẽ sử dụng một số thủ thuật CSS để điều chỉnh kích thước và tỷ lệ của ảnh. Nhằm đảm bảo chúng hiển thị đúng kích thước và không bị biến dạng. Hãy kiên nhẫn và tiếp tục theo dõi để biết thêm chi tiết.

🧩 Kết luận

Trên đây là những thay đổi mới mà tôi đã thực hiện trong tệp này. Chúng ta đã thêm thành công hình ảnh header toàn màn hình và ảnh cho phần lợi ích. Tuy nhiên, chúng ta cần sử dụng CSS để tùy chỉnh kích thước và tỷ lệ ảnh để chúng hiển thị đúng. Tiếp tục theo dõi để có thêm thông tin chi tiết trong video tiếp theo.

Câu hỏi thường gặp (FAQ)

1. Tại sao hình ảnh "server room" hiển thị không đúng trong phần "full width hero"? => Do chọn sai hình ảnh trong thuộc tính "background image". Để sửa lỗi này, chúng ta cần chỉnh đúng đường dẫn đến hình ảnh "server room" trong CSS.

2. Làm cách nào để tùy chỉnh kích thước và tỷ lệ ảnh? => Chúng ta sẽ sử dụng CSS để điều chỉnh kích thước và tỷ lệ ảnh. Trong video tiếp theo, tôi sẽ hướng dẫn các thủ thuật CSS để làm việc này.