Lynda.com Thiết kế video nền Web HTML

• Có Thể 18, 2024

Video nền là một cách tuyệt vời để tiếp thị sản phẩm của bạn và trong khóa đào tạo video Lynda.com này có tên Thiết kế web: Video nền HTML với Chris Converse, bạn sẽ tìm hiểu cách thêm video nền tự động phát vào trang web của mình. Bạn cũng sẽ tìm hiểu cách sử dụng CSS để đặt các yếu tố thiết kế khác trên video nền. Và các tập tin bài tập là miễn phí cho ngay cả các thành viên tiêu chuẩn.

Converse bắt đầu với một tệp html xương trần và xây dựng bộ chứa div chính cho các thành phần thiết kế: khẩu hiệu văn bản, logo Svg và video. Ông trình bày cách sử dụng tự động phát trong thẻ video và cách thiết lập hai loại video phổ biến nhất là .mp4 và .ogg.

Tiếp theo, Converse di chuyển đến các tệp CSS và CSS để định kiểu và định vị video và hình ảnh logo ở giữa. Anh ta chuyển sang làm tương tự cho văn bản tagline. Tôi đặc biệt thích kỹ thuật của anh ấy để làm việc với biên giới.

Converse sau đó thảo luận về cách làm cho bố cục này phản ứng nhanh bằng các truy vấn phương tiện cho màn hình vừa và nhỏ và CSS. Một lần nữa, anh ta đặt các kiểu cho video, logo và khẩu hiệu. Ông cũng trình bày cách đặt hình ảnh thay thế cho màn hình nhỏ không thể phát video và ẩn video.

Chuyển sang các vấn đề phức tạp hơn, Converse trình bày cách sử dụng JavaScript để thêm quyền kiểm soát phức tạp hơn trên màn hình cho các tính năng của thiết bị di động, chẳng hạn như các sự kiện chạm. Ông giới thiệu một trang web của bên thứ ba có tên Modernizr sẽ tạo các lớp CSS có thể được thêm vào trang thông qua JavaScript dựa trên các tính năng của thiết bị hiện tại. Ông trình bày cách tạo mã, tải xuống và thêm nó vào mã trang web của bạn.

Trong bài học cuối cùng, Converse trình bày cách mã hóa vị trí và các kiểu khác cho bố cục sao cho video bao phủ toàn bộ cửa sổ trình duyệt.

Khóa học này là về HTML và CSS được sử dụng để tạo kiểu và định vị video nền cho web và thiết bị di động. Tuy nhiên, tôi đã hy vọng rằng tác giả sẽ thảo luận về các tùy chọn để lưu trữ và tối ưu hóa tệp video để tải xuống nhanh chóng. Ngoài ra, thật tuyệt khi biết cách thêm các yếu tố thiết kế tương tác qua video nền thay vì chỉ các yếu tố tĩnh.

Chris Converse có bằng thiết kế đồ họa của Học viện Công nghệ Rochester và 22 năm kinh nghiệm trong thiết kế và công nghệ.

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

Tiết lộ: Tôi không được bồi thường về mặt tài chính cho bài viết này. Các ý kiến ​​hoàn toàn của riêng tôi dựa trên kinh nghiệm của tôi.

Video HướNg DẫN: CSS A Fancy & Flexible Drop Cap Letter (Có Thể 2024).