Báo cáo đề tài cuối kì môn thiết kế web thiết kế website giới thiệu xe lamborghini

BỐ CỤC TRANG WEB Trang web gồm có 6 trang chính: Home Index , Model Mẫu mã, Car Giới thiệu xe, Customer solution Giải pháp cho khách hàng, Museum Khu trưng bày, - Gồm một slideshow giớ

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

************

BÁO CÁO ĐỀ TÀI CUỐI KÌ MÔN: THIẾT KẾ WEB

TÊN ĐỀ TÀI: THIẾT KẾ WEBSITE GIỚI THIỆU XE LAMBORGHINI

2.3 Car ( ới thiệu xeGi):

2.4 Customer solution ( ải pháp cho khách hàngGi): 2.5 Museum (Khu trưng bày):

2.6 Ownership (Quyền sở hữu): 3.FOOTER:

B CÁC HIỆ ỨNG TRONG TRANG WEB:U 1 Hiệu ứng sildeshow:

2 Các hiệ ứng hover:u

3 Hiệ ứng hiển thị hình ảnh toàn màn hình thông qua nút:u 4 Hiệ ứng hiển thị danh mục có bộ lọu c:

5 Hiệ ứng thư việu n ảnh: 6 Hiệu ứng thẻ dọc:

A BỐ CỤC TRANG WEB

Trang web gồm có 6 trang chính: Home ( Index ), Model (Mẫu mã), Car (Giới thiệu xe), Customer solution (Giải pháp cho khách hàng), Museum (Khu trưng bày),

- Gồm một slideshow giới thiệu một vài mục sẽ có trong trang web như model, museum, customer solution, ownership, có thể chuyển slide thông qua các nút tròn ở ới hình.dư

Hình 2: Slide

- Tiếp đến là có một dòng chữ “ The Newest Cars “ chạy ngang phía dưới sildeshow

Hình 3: Dòng chữ chạy

- Phía dưới đó là những hình ảnh về ững chiếc xe mới nhất của Lamborghini.nh

Hình 4: Những chiếc xe mới nhất của Lamborghini

- Khi rê chuột vào chữ cạ ững hình ảnh thì phông nên sẽ đổi màu và xuất hiệnh nhn đường gạch dọc màu trắ , còn khi rê chuột vào hình thì hình và chữ sẽ đc phóng ng to ra, phông nền cũng đổi màu và phóng to hơn

2.1 Model

- Đầu trang web sẽ có một video nói về các mẫu xe của Lamborghini

Hình 5: Video giới thiệu mẫu xe

- Tiếp theo là ới thiệu tổng quan về 4 mẫu xe của Lamboghini :gi

Hình 6: Thông tin tổng quan về các mẫu xe

- Khi click vào chữ See more thì màn hình sẽ hiện ra hình ảnh rõ hơn về mẫu xe tương ứng có thể tắ ảnh bằng dấu x ở trên góc phảt i

2.3 Car

- Đầu trang web sẽ xuất hiệ 4 hình ảnh tương ứng với 4 mẫu xe đã được giớn i thiệu, khi rê chuột vào mỗi hình ảnh thì ảnh đó sẽ tự mở rộ và các ảnh khác sẽ ngthu hẹp lại

Hình 8: Tất cả 4 mẫu xe

- Phía dưới là danh sách toàn bộ xe cho từng mẫu và giá của chúng, khi rễ chuột vào ảnh mỗi chiếc xe thì ảnh đó sẽ lật lại

Hình 9: Tất cả xe và giá của chúng

- Phía trên có một thanh chứa các nút lọ có tên từng mẫu xe khi click vào nút có c tên nào thì những xe của mẫu đó sẽ ện ra, click vào show all thì tất cả xe sẽ hi hiện đầy đủ ở lạitr

Hình 10: Thanh lọc xe theo mẫu 2.4 Customer Solution

- ển thị ững chính sách mà Lamborghini ưu đãi cho khách hàng của họ, khi Hinh rê chuột vào hình ảnh sẽ có một dòng chữ ện ra trên ảnh đó hi

Hình 12: Chính sách cho khách hàng của Lamborghini

- Dưới đó sẽ là các cải tiế mới dành cho khách hàng, khi rê chuột vào dòng chữ n tiêu đề thì sẽ có một đường đen chạy ngang dưới chân nó

Hình 13: Những cải tiến mới dành cho khách hàng 2.4 Museum

- Đầu trang web sẽ có một hình ảnh lớn về khu trưng bày của Lamborghini, khi rê chuột vào thì nền bức hình sẽ chuyển đen và xuất hiện một dòng chữ

Hình 14: Ảnh tổng quan về khu trưng bày

- Phía dưới sẽ có dòng chữ “Some images about us” chạy ngang, dưới dòng chữ là các hình ảnh sự kiện mới nhất tại phòng trưng bày

Hình 15: Ảnh về các sự ện tại khu trưng bàyki

- Khi click vào từng ảnh thì chúng sẽ phóng to ra và hiển thị tên sự kiện tại đây, có thể tắ ảnh bằng dấu x góc trên bên phảt i

- Tiếp đó là giới thiệ về khu trưng bày Lamborghini và những gì khách tham quan u sẽ ợc trải nghiệm khi đến đây.đư

Hình 17: Giới thiệu về khu trưng bày

Hình 18: Những gì khách tham quan sẽ ợc trải nghiệmđư

- Phía dưới là địa chỉ của phòng trưng bày, cách thức liên hệ và cách để đi đến đây theo từng loại phương tiện, có thể tùy chọn bằng cách click vào nút tương ứng với phương tiện ấy

Hình 19: Địa chỉ phòng trưng bày và cách đi đến đó 2.6 Ownership

- Đầu trang web là một slideshow được thay đổi tự động mỗi 2 giây

Hình 20: Silde ảnh được chỉnh tự động

- Phía dưới là các cách thức mà khách hàng có thể dung để kiểm tra quyền sở hữu của bản thân đối với xe khi xảy ra sự cố mất cắp, khi rê chuột vào hình ảnh thì chúng sẽ bị mất màu

Hình 21: Nhữ cách thức mà khách hàng có thể dung để ểm tra quyền sở hữngkiu 3 FOOTER

Khi click vào các biểu tượng bên phải sẽ dẫn đến trang Facebook, Instagram, Tiktok và kênh Youtube của Lamborghini

Hình 22: Footer của trang web

B CÁC HIỆ ỨNG TRONG TRANG WEB.U 1 Hiệu ứng sildeshow

- Tạo HTML:

<div class="slideshow-container">

<! Full-width images with number and caption text > <div class="mySlides fade">

<img src="image/slide1.jpeg" style="width:100%"> </div>

<div class="mySlides fade">

<img src="image/own1.jpeg" style="width:100%;"> </div>

<div class="mySlides fade">

<img src="image/slide3.jpeg" style="width:100%"> </div>

<div class="mySlides fade">

<img src="image/slide4.jpeg" style="width:100%"> </div>

<!—Nút kế tiếp và nút trước đó >

<a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div>

<br>

<!—Hiển thị nút tròn > <div style="text-align:center">

<span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span>

2.2 Hover hình ảnh hiển thị ữ ở webpage Customer Solution.ch

/* Điều chỉnh chiều dài và rộng củ ảnh lật*/a

<p style="font-size: 25px"> A space dedicated to the memory of a brilliant entrepreneur and his innovative engineering and design creations</p>

<a href="#"></a> </figcaption></figure>

- Tạo CSS: /* Các CSS dướ đây sẽ tác dụng lên những phần tử trong ẻ figure*/i th

border-top: 1px solid rgba(255, 255, 255, 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.8);

-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s; }

/* Tạo hiệu ứng khi chữ kiểu h1 xuất hiện */ figure.snip0015 h1 {

word-spacing: -0.15em;

/* Khi rê chuột vào ảnh thì chữ kiểu p sẽ hiện ra sau 0.6 giây*/

<td width="43%"><! The overlay > <div id="myNav" class="overlay"> <! Button to close the overlay navigation >

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<p style=" font-size: 25px">The Revuelto is the beginning of a new era for Lamborghini, who has harnessed the power of hybridization technology to create the first HPEV (High Performance Electrified Vehicle) Responding to the need for sustainability and powerful performance, the Lamborghini Revuelto rewrites all paradigms and represents a technical masterpiece beyond anyone’s imagination The iconic V12 engine finds a new life in this futuristic automotive masterwork that delivers unparalleled performance and driving emotions.</p>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; See More</span> </td>

/* Định vị nội dung bên trong lớp phủ */

.overlay-content { position: relative;

width: 100%; /* 100% dài*/

text-align: center; /* Văn bản/liên kết được căn giữa */

margin-top: 30px; /* Lề trên 30px để tránh xung đột với nút đóng trên màn hình nhỏ hơn */} /* Các liên kết điều hướng bên trong lớp phủ */

/* Khi di chuột qua các liên kết điều hướng, hãy thay đổi màu sắc của chúng */ overlay a:hover, overlay a:focus {

đóng để chúng không chồng lên nhau */ @media screen and (max-height: 450px) { .overlay a {font-size: 20px}

overlay closebtn { font-size: 40px; top: 15px;

display: none; /* Ẩn cột theo mặc định */ } /* Xóa số float sau hàng */

6 Hiệ ứng thẻ dọu c: - Tạo HTML:

<div class="tab">

<button class="tablinks" onclick="openCity(event, 'plane')" id="defaultOpen">By Plane</button> <button class="tablinks" onclick="openCity(event, 'taxi')">By Taxi</button>

<button class="tablinks" onclick="openCity(event, 'car')">By Car</button> <button class="tablinks" onclick="openCity(event, 'bus')">By Bus</button> </div>

<div id="plane" class="tabcontent"> <h2>By Plane</h2>

<p style="font-size: 25px">We recommend arriving at Bologna airport (BLQ) and continuing by taxi or with a rental car

Discover the exclusive services at Bologna airport: </p> SACA tel +39 051 6349,444<p></div> <div id="car" class="tabcontent"> <h2>By Car</h2>

<p style="font-size: 25px">Plan your route on Google Maps.<br> Our address is: Via Modena 12, 40019 Sant'Agata Bolognese (BO), Italy.<br> Free public parking is available near the company </p>

</div>

<div id="bus" class="tabcontent"> <h2>By Bus</h2>

<p style="font-size: 25px">From Bologna coach station (“BOLOGNA AUTOSTAZIONE”), Piazza XX Settembre no 6, close to Bologna Centrale train station:

bus line 576 to “Crevalcore” (approx 55 min).<br> We are about 5 minutes' walk from the bus stop:<br> “S.AGATA B CHIESA FRATI”.<br>

You can plan your journey and check timetables on the Bologna Tper website</p> </div>

- Tạo CSS:

* {box-sizing: border-box} body {} /* Tạo kiểu cho tab */