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

ảng viên hướng dẫn: Nguyễn Thành Sơn Gi

Mã Môn Họ 222WEDE330484 c:

Sinh viên thực hiện: Lưu Quốc Bảo

Mã số sinh viên: 20124240

2.3 Car ( ới thiệu xe Gi ):

2.4 Customer solution ( ải pháp cho khách hàng Gi ): 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), Ownership (Q ền sở hữu) uy

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 nh n

đư ờ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ẽ ng thu 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ại tr

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 Hi nh

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 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ày ki

- 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ữ ng ki u

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 flip-box {

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

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

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