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

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

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 tồ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:

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

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ư

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

- 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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

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.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

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

- Phía dưới là danh sách tồ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.

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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ữ.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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.đư

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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>

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

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

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

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

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<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

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

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;

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

/* 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 -->

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<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ủ */

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

.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;

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

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

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

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>

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">

<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 */

</div>