Đến lúc chuyển sang bài tập tiếp theo.
Trong bài tập này, chúng ta sẽ đối phó với hình ảnh,
làm thế nào để chúng ta bao gồm hình ảnh trong các trang web của chúng tôi,
và làm thế nào chúng ta có thể sử dụng các đối tượng phương tiện trong trang web của chúng tôi.
Là bước đầu tiên,
đi đến hướng dẫn tập thể dục của bạn và tải xuống tệp image.zip,
và sau đó lưu nó vào thư mục nhầm lẫn của bạn.
Và sau đó giải nén các tập tin để có được một thư mục tên, img,
và bên trong mà bạn sẽ tìm thấy
một vài hình ảnh mà chúng tôi sẽ sử dụng trong bài tập này.
Tất cả các hình ảnh đều ở định dạng png trong thư mục đó.
Bây giờ chúng ta sẽ làm việc để thêm một số hình ảnh vào trang.
Trước tiên, chúng ta hãy thêm vào logo cho nhà hàng của chúng tôi.
Vì vậy, đi đến trang index.html, trong Jumbotron,
bạn sẽ thấy div thứ hai ở đây có col-sm.
Vì vậy, chúng tôi bạn sẽ sửa chữa điều đó lên bằng cách thêm vào div này,
và sắp xếp tự trung tâm để div này.
Bây giờ, để div này,
chúng ta sẽ thêm vào một hình ảnh.
Vì vậy, để tôi sử dụng hình ảnh với nguồn, img.
Chúng tôi đã đặt thư mục hình ảnh chứa các hình ảnh vào dự án của chúng tôi.
Vì vậy, từ đó, tôi sẽ thêm các tập tin logo.png làm hình ảnh ở đây.
Ngoài ra, tôi sẽ thêm lớp làm chất lỏng hình ảnh,
để hình ảnh này sẽ tự động được đáp ứng và thích ứng với kích thước màn hình.
Hãy lưu các thay đổi.
Chúng tôi sẽ áp dụng cùng một thay đổi cho cả hai trang aboutus.html,
và cũng là trang contactus.html trong Jumbotron.
Bây giờ, khi bạn xem xét kỹ hơn trang web của bạn,
bạn sẽ thấy rằng trong Jumbotron,
ngay sau những từ này,
bạn sẽ thấy hình ảnh cho nhà hàng của chúng tôi được chèn vào đó.
Tiếp theo, chúng ta sẽ đi vào navbar,
và sau đó nơi chúng ta có điều này cho thương hiệu navbar,
tôi sẽ thay thế những từ này cho nhà hàng với logo tương ứng.
Vì vậy, những từ này tôi sẽ thay thế mà với img,
và nguồn là logo.png.
Ngoài ra, tôi sẽ chỉ định một thuộc tính chiều cao của 30,
và một thuộc tính chiều rộng của 41 cho logo này.
Kích thước này là apt cho thương hiệu navbar ở đó.
Vì vậy, chúng ta hãy lưu các thay đổi.
Tôi sẽ đi và thực hiện thay đổi tương tự trong trang aboutus.html,
và cũng là trang contactus.html.
Nhìn vào trang web bây giờ,
bạn sẽ thấy tên của nhà hàng bây giờ đã được thay thế bằng
logo của nhà hàng với kích thước nhỏ ở đó.
Bây giờ bạn thấy rằng khi bạn điều hướng đến trang Giới thiệu,
bạn sẽ thấy hình ảnh được bao gồm ở đó,
và tương tự trên trang Liên hệ,
bạn sẽ thấy rằng hình ảnh đã được cập nhật trở lại trang chính.
Bây giờ, những gì chúng ta sẽ làm,
là sử dụng một đối tượng truyền thông thay cho những mô tả mà chúng ta có ở đây,
và sau đó sử dụng đối tượng truyền thông để thay thế chúng
bằng mô tả và cũng là một hình ảnh được đưa vào.
Điều đó cung cấp cho một cái nhìn tốt hơn về trang web của chúng tôi.
Vì vậy, chúng ta hãy tiếp tục và thực hiện sự thay đổi đó.
Để sử dụng đối tượng phương tiện truyền thông trong trang index.html của chúng
tôi, chúng tôi sẽ đi đến hàng đầu tiên của nội dung ở đây.
Và sau đó ngay ở đó trong div thứ hai,
Tôi sẽ giới thiệu một dev mới với các phương tiện truyền thông lớp học,
và kèm theo nội dung bên trong div này có,
đóng cửa div.
Bây giờ, bên trong div này,
tôi sẽ giới thiệu một hình ảnh được sử dụng ở đó.
Ở đây tôi đi vào và nói lớp hình ảnh,
và để sử dụng một hình ảnh trong một đối tượng phương tiện truyền thông,
chúng ta cần phải áp dụng một số lớp liên quan đến flex bổ sung ở đây,
vì vậy tôi áp dụng d-flex, và sau đó mr-3.
Vì vậy, M có nghĩa là lề phải với số 3. Điều
đó cho phép đủ lề bên phải của hình ảnh này,
do đó mô tả được thiết lập một chút ngoài hình ảnh trong trang web.
Và sau đó tôi sẽ sử dụng hình thu nhỏ hình ảnh cho hình ảnh này,
và sau đó cũng sử dụng align-self-center cho hình ảnh,
và sau đó gõ vào nguồn của hình ảnh, đó là img,
và bạn có thể tra cứu
tên hình ảnh trong thư mục img,
và để tôi cho nó một thay thế ở đó,
và đóng hình ảnh.
Điều này bây giờ sẽ bao gồm hình ảnh vào đối tượng midi của tôi.
Bên cạnh đó, tôi sẽ tạo ra cơ thể phương tiện truyền thông cho hình ảnh này bằng cách
nói cơ thể phương tiện truyền thông div lớp,
và sau đó kèm theo h2 này và p có chứa mô tả bên trong div này có.
Vì vậy, hãy để tôi thụt lề nội dung ở đó,
và sau đó đóng div đó ở đây.
Với điều đó, mô tả của tôi được đính kèm bên trong cơ thể truyền thông.
Ngoài h2 này,
tôi sẽ giới thiệu một lớp như mt-0.
Với điều này, lớp này nói margin top zero.
Tiêu đề này sẽ được căn chỉnh trên cùng của đối tượng phương tiện truyền thông cụ thể này ở đây.
Với những thay đổi này, chúng ta hãy lưu các thay đổi
và sau đó đi và xem nhanh trang web của chúng tôi.
Đi đến trang web của chúng tôi,
bạn sẽ ngay lập tức nhận thấy sự thay đổi trong trang web.
Bây giờ bạn có thể thấy rằng có một vị trí hình ảnh ở đây,
và sau đó mô tả
trước đó ở vị trí đó đã được đặt đúng vị trí ở đây.
Ngược lại điều này với hai hàng còn lại,
và bây giờ bạn bắt đầu thấy cách đối tượng truyền thông giúp chúng ta
chuyển đổi nó thành một thứ gì đó sôi động hơn.
Tôi sẽ làm điều tương tự với hàng thứ ba ở đây.
Hàng thứ hai sẽ được để lại như một bài tập cho bạn trong bài tập.
Đi đến khoan thứ ba đó,
tôi sẽ áp dụng một thay đổi tương tự cho hàng thứ ba này để giới thiệu các đối tượng phương tiện ở đây.
Hãy để tôi giới thiệu các đối tượng phương tiện truyền thông ở
đó, và sau đó để div này,
đi vào đối tượng phương tiện truyền thông,
và sau đó giới thiệu hình ảnh mà tôi sẽ sử dụng ở đây.
Tôi sử dụng các lớp như d-flex mr-3.
Nếu bạn đang định vị hình ảnh ở phía bên phải,
sau đó bạn cần phải cung cấp cho một lề như ml-3 cho nó.
Ngoài ra, tôi sẽ thêm vào lớp hình thu nhỏ hình ảnh này,
và sau đó cũng nói, align-self-center.
Đây là những lớp học mà tôi sẽ thêm vào hình ảnh này.
Và sau đó, chúng ta hãy chỉ định nguồn gốc của hình ảnh này,
img và alberto.png, và sau đó tôi sẽ chỉ định thay thế.
Và sau này, h2 này và h4 và p,
Tôi sẽ đóng chúng bên trong một div phương tiện truyền thông cơ thể ở đây,
đóng cửa div cơ thể phương tiện truyền thông.
Bây giờ chúng tôi đã hoàn thành đối tượng phương tiện truyền thông ở hàng thứ ba.
Hãy lưu các thay đổi,
và sau đó đi và xem trang web của chúng tôi tiếp theo.
Bây giờ, hãy nhìn vào trang web của chúng tôi,
bạn sẽ nhận thấy rằng chúng tôi có mô tả món ăn ở đó.
Bây giờ, nếu bạn di chuyển đến hàng thứ ba,
bây giờ bạn thấy hàng thứ ba cũng đã được định nghĩa lại như thế nào.
Lưu ý việc sử dụng các phương tiện bên trái,
có nghĩa là hình ảnh được đặt ở phía bên trái trong đối tượng phương tiện này,
và sau đó phương tiện trung trang định vị hình ảnh ở giữa mô tả.
Bạn cũng có thể sử dụng phương tiện truyền thông trên cùng và phương tiện truyền thông dưới cùng,
để căn chỉnh hình ảnh trên cùng và dưới cùng của mô tả này.
Với điều này, chúng tôi hoàn thành bài tập này.
Trong bài tập này, chúng tôi đã xem xét việc sử dụng hình ảnh và đối tượng phương tiện trong trang web của chúng tôi.
Đây là thời điểm tốt, một lần nữa,
để làm một bình luận tốt,
với thông điệp, hình ảnh và phương tiện truyền thông.