Bài tập lớn môn Ngôn Ngữ Thiết kế Web

Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
Mục lục
Nguyễn Văn Quân – 13A1 –HTML 1
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
Phần 1: Đặt vấn đề
Ngày nay, với sự phát triển mạnh mẽ của khoa học-kỹ thuật, đặc biệt là Công
nghệ thông tin. Công nghệ thông tin đang có những bước phát triển mạnh mẽ theo cả
chiều sâu và chiều rộng. Các loại thiết bị điện tử đang dần trở nên quen thuộc hơn với
con người, nó trở thành là một công cụ làm việc và giải trí thông dụng của con người.
Công nghệ thông tin đã và đang thay đổi thế giới một cách nhanh chóng và từng bước
kéo nền tri thức của nhân loại xích lại gần nhau hơn. Đó là nhờ vào việc phát triển hệ
thống website trên toàn thế giới. Website đã đóng một vai trò quan trọng đối với con
người chúng ta từ giải trí, thương mại, giáo dục đến quân sự, nhà nước. Website sẽ
dần dần thay thế những phương thức kinh doanh cũ trong các doanh nghiệp bởi tính
ưu việt mà webbsite mang lại như: nhanh hơn, rẻ hơn, tiện dụng hơn và không bị giới
hạn không gian và thời gian.
Xuất phát từ nhu cầu thực tế hiện nay của thị trường nên em chọn đề tài xây dựng
website bán hàng điện tử: Laptop, điện thoại, máy tính bảng…nhằm tạo ra hệ thống
bán hàng có tính thực tế và ứng dụng cao trong cuộc sống.
1) Lý do chọn đề tài
- Nhu cầu của thị trường hiện nay tăng cao về các mặt hàng điện tử, đặc biệt là
các mặt hàng như: laptop, điện thoại, máy tính bảng.
- Ở các nước phát triển thì việc xây dựng các website thương mại chưa bao giờ
là lỗi thời, bởi nhu cầu các mặt hàng đó luôn tăng và ổn định.
- Xem xét vào tình hình thực tế hiện tại ở trong và ngoài ngước thì việc xây dựng
website thương mại, bán hàng điện tử là một quyết định đúng đắn.
- Bởi em là là một người đam mê công nghệ và sẽ dễ dàng hơn khi thiết website
bán mặt hàng điện tử như: Laptop, điện thoại, máy tính bảng…
2) Các chức năng cần đạt được
- Website mang tính thẩm mỹ cao, phù hợp với nguyện vọng của mọi người.
- Bắt kịp với sự phát triển của thời đại, mang lại doang thu lớn cho công ty, cửa

hàng, đơn vị chủ quản.
- Tăng tính thuận tiện, nhanh chóng, đem lại nhiều sự lựa chọn cho khách hàng,
như một cầu nối kết giữa các công ty với khách hàng.
Nguyễn Văn Quân – 13A1 –HTML 2
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
- Tạo ra một website hỗ trợ việc tổ chức bán và mua hàng trực tuyến, hoạt động
trên môi trường internet có hiệu quả, độ chính xác cao và xác thực với thực tế.
- Làm tiền đề để xây dựng các website bán hàng tiếp theo.
Phần 2 – Nội dung
I – Cơ sở lý thuyết
- Trong bài có bổ sung thêm các kiến thức về javascript như form mua hàng hay
form tìm kiếm…
II - Cấu trúc thiết kế website
- Số lượng trang: 1 Trang chủ và 68 trang con ( 5 trang menu ngang trên, 5 trang
menu ngang dưới, 8 trang menu dọc, 12 trang điện thoại, 8 trang laptop, 6
trang phụ kiện, 6 trang máy tính bảng, 3 trang con chi tiết của tin tức, 14 trang
con chi tiết ở trang chủ).
- Độ sâu nhất của website: 3 mức.
- Gam màu chủ đạo: Xanh dương(#1E90FF), trắng và một số màu khác.
1) Sơ đồ phân cấp các liên kết website

Nguyễn Văn Quân – 13A1 –HTML 3
PinSạcPK khácThẻ nhớBao daTai ngheHPAsusLenovoDellAppleSonyAcer
Samsun
g
Điện
thoại
Mua
từ xa
Máy

tính
bảng
Phụ
kiện
Mua
trả
góp
Liên
hệ
Laptop
Khuyến
mại
Trang chủ
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web


1)
Nguyễn Văn Quân – 13A1 –HTML 4
Bảo
hành
Tin
tức
Tin tức 3
Tin tức 2
Tin tức 1
LG
Q-mobile
HTC
Phillips
Lenovo

Oppo
Nokia
Asus
Sony
Apple
Samsung
BlackBerry
Samsung
LG
Dell
Acer
Lenovo
Asus
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
2) Ý tưởng thiết kế của từng trang
 Trang web làm về bán hàng điện tử nên hướng đến mọi đối tượng, trong đó đa
phần là giới trẻ, những người yêu công nghệ.
- Trang chủ: Giới thiệu cho khách hàng những loại sản phẩm tiêu biểu của công
ty. Khách hàng có thể xem chi tiết khi click vào chi tiết.
- Laptop: Đưa ra tất cả những dòng sản phẩm là laptop để khách hàng có thể
xem.
- Điện thoại: Đưa ra tất cả những dòng sản phẩm là điện thoại để khách hàng có
thể xem.
- Máy tính bảng: Đưa ra tất cả những sản phẩm là máy tính bảng để khách hàng
có thể xem.
- Phụ kiện: Đưa ra tất cả những dòng sản phẩm là phụ kiện để khách hàng có thể
xem.
- Khuyến mãi: Đưa ra những chương trình khuyến mãi của các dòng sản phẩm.
- Tin tức: Đưa ra những tin tức nống hổi, mới nhất về các loại sản phẩm.
- Liên hệ: Để khách hàng có thể gửi những ý kiến phản hồi về cho cửa hảng để

cửa hàng phát huy hoặc cố gắng loại bỏ những mặt chưa được, chưa vừa ý
khách hàng.
- Bảo hành: Là các dịch vụ hậu mãi sau khi khách hàng mua sản phẩm của cửa
hàng, ở đây khách hàng có thể xem các chính sách về bảo hành của cửa hàng.
- Mua từ xa: Là dịch vụ mua hàng từ xa của cửa hàng dành cho những người
không thích đi xa hoặc bận làm việc có nhu cầu mua hàng tại nhà. Tại đây
khách hàng có thể xem chính sách mua hàng của cửa hàng để hưởng những ưu
đãi dành cho những đối tượng khách hàng từ xa.
III – Giao diện chính và chi tiết các trang con
* Dưới đây là giao diện của trang chủ và một số trang con cơ bản.
1) Giao diện trang chủ
Nguyễn Văn Quân – 13A1 –HTML 5
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
- Trang chủ là trang chính của website. Bố cục trang được chia làm 4 phần rõ ràng.
+) Phần 1 ( phần header ): Bao gồm có tên website, ô tìm kiếm và khẩu hiệu của công
ty. Phần header có độ cao 190px, độ rộng 980px. Màu sắc chủ đạo là màu trắng kết
hợp với tên logo và ô tìm kiếm màu xanh dương.
Nguyễn Văn Quân – 13A1 –HTML 6
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
+) Phần 2 ( Phần menu ngang ): là thanh menu ngang ở trên và dưới website được
thiết kế có độ rộng bằng nhau. có độ cao 30px, độ rộng 980px. Màu sắc chủ đạo là
màu xanh dương.
+) Phần 3 ( Phần body ): Là nội dung chính của trang chủ. Được chia làm 2 phần nhỏ
hơn. Phần bên trái có độ rộng 200px là các công cụ hỗ trợ điều hướng như menu dọc,
công cụ lọc hay hỗ trợ trực tuyến…Phần bên phải có độ rộng 780px là phần nội dung
chính nơi trưng bày những dòng sản phẩm tiêu biểu của công ty. Màu sắc chủ đạo của
phần này là nền màu trắng kết hợp với màu xanh.
+) Phần 4 ( Phần footer ): Có độ rộng là 980px, độ cao là 150px. Là nơi cung cấp các
thông tin như bản quyền, địa chỉ công ty Màu sắc chủ đạo của phần này là màu xanh
dương.

2) Giao diện trang tin tức
Nguyễn Văn Quân – 13A1 –HTML 7
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
- Trang tin tức nhìn chung vẫn lấy khung từ trang chủ. Tuy nhiên phần nội dung có
khác đôi chút.
+) Có các mục về tin tức.
+) Có các hình ảnh minh họa cho tin tức đó.
+) Có các dòng tin tức cơ bản.
3) Giao diện trang chi tiết sản phẩm
Nguyễn Văn Quân – 13A1 –HTML 8
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
- Trang chi tiết sản phầm: Chia làm 3 cột.
+) Cột trái là hình ảnh minh họa về sản phẩm và phụ kiện bao gồm.
+) Cột giữa là khuyến mại của sản phẩm và có link mua hàng từ xa.
+) Cột phải là cấu hình chi tiết của sản phẩm.
4) Giao diện trang mua hàng
Nguyễn Văn Quân – 13A1 –HTML 9
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
- Trang mua hàng là nơi khách hàng đăng ký mua hàng từ xa. Gồm tên trang trang,
phía dưới là các mục cần điền của khách hàng khi mua sản phẩm.
5) Giao diện trang phụ kiện
Nguyễn Văn Quân – 13A1 –HTML 10
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
- Trang phụ kiện nhìn chung giống cấu trúc trang chủ. Bao gồm khung trang chủ, chỉ
khác nội dung là các dòng sản phẩm là phụ kiện.
IV – Code của một số trang chính
1) Code bannner
<div id="banner">
<div id="logo">
<a href="index.html" name="dau_trang"><img src="images/logo.jpg" alt="Ảnh logo"/></a>

</div><! End logo >
<div id="search">
Nguyễn Văn Quân – 13A1 –HTML 11
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
<form class="searchform" role="search" method="get" id="searchform" action="#">
<div class="submit">
<label class="screen-reader-text" for="s"></label>
<input type="text" placeholder="Nhập từ khóa " value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Tìm kiếm">
</div>
</form>
</div><! End search >
</div><! End banner >
2) Code menu ngang
<div id="mainmenu">
<ul>
<li><a href="index.html" title="Trang chủ">Trang chủ</a></li>
<li><a href="laptop.html" title="Laptop">Laptop</a>
<ul>
<li><a href="laptop_samsung.html">Samsung</a></li>
<li><a href="laptop_acer.html">Acer</a></li>
<li><a href="laptop_sony.html">Sony</a></li>
<li><a href="laptop_apple.html">Apple</a></li>
<li><a href="laptop_dell.html">Dell</a></li>
<li><a href="laptop_lenovo.html">Lenovo</a></li>
<li><a href="laptop_asus.html">Asus</a></li>
<li><a href="laptop_hp.html">HP</a></li>
</ul>
</li>
<li><a href="dienthoai.html" title="Điện thoại">Điện thoại</a>

<ul>
<li><a href="dienthoai_samsung.html">Samsung</a></li>
<li><a href="dienthoai_apple.html">Apple</a></li>
<li><a href="dienthoai_sony.html">Sony</a></li>
<li><a href="dienthoai_nokia.html">Nokia</a></li>
<li><a href="dienthoai_asus.html">Asus</a></li>
Nguyễn Văn Quân – 13A1 –HTML 12
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
<li><a href="dienthoai_oppo.html">Oppo</a></li>
<li><a href="dienthoai_lenovo.html">Lenovo</a></li>
<li><a href="dienthoai_phillips.html">Phillips</a></li>
<li><a href="dienthoai_htc.html">HTC</a></li>
<li><a href="dienthoai_qmobile.html">Q-mobile</a></li>
<li><a href="dienthoai_lg.html">LG</a></li>
<li><a href="dienthoai_blackberry.html">Blackberry</a></li>
</ul>
</li>
<li><a href="maytinhbang.html" title="Máy tính bảng">Máy tính bảng</a>
<ul>
<li><a href="maytinhbang_samsung.html">Samsung</a></li>
<li><a href="maytinhbang_asus.html">Asus</a></li>
<li><a href="maytinhbang_lenovo.html">Lenovo</a></li>
<li><a href="maytinhbang_acer.html">Acer</a></li>
<li><a href="maytinhbang_dell.html">Dell</a></li>
<li><a href="maytinhbang_lg.html">LG</a></li>
</ul>
</li>
<li><a href="phukien.html" title="Phụ kiện">Phu kiện</a>
<ul>
<li><a href="tainghe.html">Tai nghe</a></li>

<li><a href="baoda.html">Bao da</a></li>
<li><a href="thenho.html">Thẻ nhớ</a></li>
<li><a href="pin.html">Pin</a></li>
<li><a href="sac.html">Sạc</a></li>
<li><a href="pkkhac.html">PK khác</a></li>
</ul>
</li>
<li><a href="khuyenmai.html" title="Khuyến mại">Khuyến mại</a></li>
</ul>
<div class="clear"></div>
Nguyễn Văn Quân – 13A1 –HTML 13
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
</div><! End mainmenu >
3) Code form tìm kiếm
<div id="timkiem">
<h4>TÌM THEO</h4>
<div class="chitiet">
<form class="form" action="#" method="get">
<br />
<select>
<option>Mức giá</option>
<option>dưới 8 triệu đồng</option>
<option>dưới 10 triệu đồng</option>
<option>dưới 12 triệu dồng</option>
<option>dưới 15 triệu đồng</option>
<option>dưới 20 triệu đồng</option>
<option>dưới 30 triệu đồng</option>
</select>
<br /><br />
<select>

<option>Màn hình</option>
<option>Khoảng 11"</option>
<option>Khoảng 13"</option>
<option>Khoảng 14"</option>
<option>Khoảng 15"</option>
</select>
<br /><br />
<select>
<option>CPU</option>
<option>Celeron</option>
<option>Pentium</option>
<option>AMD</option>
<option>Core i3</option>
<option>Core i5</option>
Nguyễn Văn Quân – 13A1 –HTML 14
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
<option>Core i7</option>
</select>
<br /><br />
<select>
<option>Giá thấp đến cao</option>
<option>Giá cao đến thấp</option>
<option>Xem nhiều nhất</option>
</select><br />
<input type="submit" name="" value="Tìm"
onClick="doalert()"/>
</form>
</div>
</div><! End tìm kiếm >
4) Code footer

<div id="footer">
<div id="thanhtoan">
<p>Chấp nhận thanh toán</p><br />
<a href="" target="_blank"> <img src="images/ebay.png" width="34"
height="34" /> </a>
<a href="" target="_blank"> <img src="images/visa.png" width="34"
height="34" /> </a>
<a href="" target="_blank"> <img src="images/paypal.png" width="34"
height="34" /> </a>
<a href="" target="_blank"> <img src="images/mastercard.png"
width="34" height="34" /> </a>
<address>
<p>&copy 2014 Copyright. All rights resverved</p>
<p>Phát triển bởi Nguyễn Minh Quân</p>
</address><! End bản quyền >
</div>
<div id="diachi">
<address>
<p class="tencongty">Hệ thống cửa hàng LaptopWorld</p><br />
<p>Showroom 1: số 96 - Định Công- Hoàng Mai - Hà Nội | hotline:0241 6289
365</p><br />
Nguyễn Văn Quân – 13A1 –HTML 15
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
<p>Showroom 2: Số 16 - Yên Trung - Yên Phong - Bắc Ninh | hotline:0973
990 465</p><br />
<a href="" target="_blank"> <img src="images/face.jpg"
width="30" height="30" /> </a>
<a href="" target="_blank"> <img src="images/tw.png"
width="30" height="30" /> </a>
<a href="" target="_blank"> <img

src="images/google.jpg" width="30" height="30" /> </a>
<a href=" target="_blank"> <img
src="images/youtube.png" width="30" height="30" /> </a>
</address>
</div> <! End địa chỉ >
</div><! Phần footer >
5) Code form đơn đặt hàng
<form action="#" method="post" name="myForm" onsubmit="return validateForm()">
<div id="formdangky">
<h3>Đơn đặt hàng</h3>
<label>Họ:</label><input name="ho" type="text" /><br /><br />
<label>Tên:</label><input name="ten" type="text" /><br /><br />
<label>Địa chỉ:</label><input name="diaChi" type="text" /><br /><br />
<label>Email:</label><input name="email" type="text" /><br /><br />
<label>Số điện thoại:</label><input maxlength="11/" name="dienThoai" type="text"
/><br /><br />
<label>Số lượng mua:</label><input name="soLuong" type="text" /><br /><br />
<label>Hình thức thanh toán:</label>
<input id="ck" name="thanhToan" type="radio" value="chuyenkhoan" /> Chuyển khoản
<input id="tt" name="thanhToan" type="radio" value="truc tiep" /> Trực tiếp khi giao
hàng<br /><br />
<input name="Submit" type="submit" value="Xác nhận mua"/>
<input name="Reset" type="reset" value="Làm lại" />
</div>
</form>
Nguyễn Văn Quân – 13A1 –HTML 16
Bài tập lớn môn: Ngôn Ngữ Thiết kế Web
Phần 3 – Kết Luận
1) Các điểm nổi bật của website:
 Bố cục rõ ràng.

 Đơn giản, thân thiện, phù hợp với nhiều đối tượng.
 Màu sắc hài hòa, không bị lóa hay rối mắt.
 Tiện lợi, với nhiều tiện ích ngay ở trang chủ.
2) Những điểm chưa đạt được:
 Nội dung chưa được phong phú.
 Banner, footer hơi quá đơn giản.
 Vẫn mắc một số lỗi phóng to nhỏ bị vỡ hình ở một số trình duyệt.
3) Hướng phát triển:
 Có thể xây dựng thêm các trang web để trở thành một hệ thống website bán
hàng lớn.
 Phát triển theo kiểu giao diện phẳng để phù hợp với xu thế của thế giới.
Phần 4 – Tài liệu tham khảo và các phần mềm sử dụng
1) Các phần mềm sử dụng
- Sử dụng Notepad++ để viết code, phần mềm Photoshop để chỉnh sửa ảnh, phần
mềm Microsoft office để làm báo cáo, đề cương. Ngoài ra là một số trình duyệt web
để kiểm thử như: Mozilla Firefox, Co rom+, Opera…
2) Tài liệu tham khảo
- Trang web có tham khảo và sử dụng một số nguồn tài liệu từ các website sau:
1. Website
2. Website
3. Website
4. Website
Phần 6 – Thang điểm đánh giá đề tài
Nguyễn Văn Quân – 13A1 –HTML 17