Làm thế nào để Thêm Hình ảnh vào Website của bạn trong Dreamweaver - những hình núm vú

Việc thêm một hình ảnh vào trang web của bạn dường như có vẻ huyền diệu ngay từ đầu vì quá trình này đơn giản với Dreamweaver. Thách thức với đồ họa trên web không phải là thêm chúng vào các trang của bạn nhưng tạo những hình ảnh đẹp mà tải nhanh trong trình duyệt của người xem của bạn.

Bạn cần một chương trình khác, chẳng hạn như Photoshop, Photoshop Elements, hoặc Fireworks, để tạo, chuyển đổi, chỉnh sửa, và tối ưu hóa hình ảnh. Tối ưu hóa hình ảnh làm cho kích thước tệp nhỏ hơn để hình ảnh của bạn tải xuống nhanh hơn. Dreamweaver cung cấp một số công cụ chỉnh sửa hình ảnh cơ bản, nhưng chủ yếu bạn sử dụng Dreamweaver để chèn và định vị hình ảnh trên trang của bạn.

Nhấp vào biểu tượng Hình ảnh trong bảng Chèn thông thường và sau đó chọn một hình ảnh bằng hộp thoại Chèn hình ảnh.

• Trong bảng Tệp, nhấp và kéo một tên hình ảnh lên trang mà bạn muốn hình ảnh xuất hiện.

• Sử dụng trình đơn Chèn.

• Nếu bạn không có ảnh JPEG, GIF hoặc PNG được tối ưu hóa trên web, bạn có thể tải xuống các hình ảnh miễn phí đã được tối ưu hóa.

Để đặt một hình ảnh trên một trang web sử dụng menu Chèn, hãy làm theo các hướng dẫn sau:

Mở một trang hiện có hoặc tạo và lưu một trang mới.

1. Đặt con trỏ của bạn nơi bạn muốn chèn hình ảnh trên trang.

2. Bạn có thể chèn hình ảnh vào phía trên bên trái của một tệp tin trống mới, và bạn có thể chèn hình ảnh vào thẻ và các phần tử trong một trang web, nhưng bạn không thể chỉ đặt một hình ảnh ở giữa một trang mà không sử dụng HTML bổ sung thẻ hoặc định dạng CSS để định vị nó.

   Chọn Chèn → Hình ảnh → Hình ảnh.

3. Hộp thoại Chọn nguồn hình ảnh xuất hiện.

   Duyệt để định vị hình ảnh bạn muốn chèn.

4. Tùy theo hệ thống máy tính của bạn, bạn có thể xem trước hình ảnh khi bạn chèn chúng theo những cách khác nhau. Dưới đây là ba lựa chọn phổ biến:

   Trên PC với Windows XP,

   • chọn Hình thu nhỏ từ danh sách thả xuống Chế độ xem bên phải của trường Tìm Trong để hiển thị các phiên bản thu nhỏ của tất cả các hình ảnh trong bất kỳ thư mục mở nào. Bạn cũng có thể xem một bản xem trước của bất kỳ hình ảnh được chọn ở phía bên phải của hộp thoại. Trên máy tính cá nhân với Windows Vista hoặc Windows 7

   • , hãy chọn một biểu tượng Tùy chọn (Các biểu tượng nhỏ, Các biểu tượng trung bình, Các biểu tượng lớn hoặc Thêm các biểu tượng lớn) từ danh sách thả xuống Chế độ xem ở bên phải giao diện Tìm kiếm để hiển thị các phiên bản thu nhỏ của tất cả các hình ảnh trong bất kỳ thư mục mở nào. Bạn cũng có thể xem một bản xem trước của bất kỳ hình ảnh được chọn nào ở bên phải hộp thoại. Trên máy Mac,

   • chọn tùy chọn Xem Là Các Cột từ phía trên bên trái của hộp thoại. Bạn có thể xem một bản xem trước của bất kỳ hình ảnh được chọn ở phía bên phải của hộp thoại. Tín dụng: Ảnh của Casey Stoll

     

     Để chèn hình ảnh, nhấp đúp vào tên hình ảnh hoặc nhấp một lần và sau đó nhấp OK.

5. Nếu bạn chèn hình ảnh vào một trang và hình ảnh không được lưu trong thư mục địa phương, Dreamweaver sẽ nhắc bạn với một hộp thoại cảnh báo và cung cấp để sao chép hình ảnh vào thư mục trang web địa phương của bạn. Nhiều nhà thiết kế tạo một thư mục con gọi là

   images bên trong thư mục trang web địa phương nơi chúng lưu trữ tất cả các hình ảnh trong trang của họ, nhưng bạn có thể tổ chức các hình ảnh trong nhiều thư mục con nếu bạn thích. Chọn hình ảnh trên trang web của bạn để xem và chỉnh sửa thuộc tính hình ảnh.

6. Tùy chọn hình ảnh được hiển thị tự động trong thanh tra thuộc tính ở cuối trang khi một hình ảnh được chọn.

   Tín dụng: Ảnh của Casey Stoll

   

   Khi bạn chèn một tệp hình ảnh vào một trang, bạn không thực sự thêm một bản sao của hình ảnh vào trang; bạn tạo một tham chiếu đến hình ảnh. Mã bên dưới trông giống như mã cho một liên kết từ trang này sang trang khác.

Cả hai tham chiếu hình ảnh và liên kết bao gồm tên của tệp và đường dẫn từ trang tới tệp đó. Về cơ bản, bạn đang tạo ra một chỉ dẫn cho một trình duyệt web để tìm hình ảnh khi nó hiển thị trang.

Để hiển thị hình ảnh trên trang web của bạn, bạn cần tải lên cả trang và hình ảnh khi bạn xuất bản trang web của mình. Nếu tệp hình ảnh của bạn và các trang tham chiếu đến các tệp đó không ở cùng một vị trí tương đối trên ổ cứng của bạn như trên máy chủ web, bạn sẽ phá vỡ tham chiếu đến các hình ảnh của mình và biểu tượng Hình ảnh Không Giáp xấu xí xuất hiện trên trang của bạn.

Cách tốt nhất để đảm bảo rằng hình ảnh và tệp tin của bạn ở nơi họ dự định liên quan đến nhau là để cho Dreamweaver theo dõi chúng cho bạn. Đó là lý do tại sao hoàn thành quá trình thiết lập trang web và đảm bảo bạn không bao giờ di chuyển hoặc đổi tên một hình ảnh, ngoại trừ trong bảng Tệp.