Lê Thanh Phương

Bài thảo luận thiết kế và triển khai website
1. Giao diện:
 Giao diện trang chủ:
 Giao diện trang truyện ngắn:
 Giao diện trang tiểu thuyết:
 Giao diện trang liên hệ:
2. Code:
 File html
- Trang chủ:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="dinhdang.css">
</head>
<body>
<div id="menu_top">
<ul>
<li><a href="trangchu.html" title="Trang chủ">Trang chủ</a></li>
<li><a href="truyenngan.html" title="Truyện ngắn">Truyện
ngắn</a></li>
<li><a href="tieuthuyet.html" title="Tiểu thuyết">Tiểu
Thuyết</a></li>
<li><a href="lienhe.html" title="Liên hệ">Liên hệ</a></li>
</ul>
</div>
<div id="banner">
<img src="image/banner1.jpg">
</div>
<div id="main">
<article>
<h3>Sách bán chạy</h3>
</article>
<ul>
<li>
<img class="anhsach"
src="image/diduongdemhayhatlen.jpg">
<h2>Đi Đường Đêm Hãy Hát Lên</h2>
<h2>119.000đ</h2>
ĐỂ CUỘC ĐỜI LUÔN LÀ NHỮNG NỐT NHẠC VUI!
“Nếu khóc vì bỏ lỡ ánh mặt trời, bạn cũng sẽ vuột mất cả những vì sao.” Khi đã bỏ lỡ ánh
mặt trời, hãy lau khô nước mắt, chờ đợi những ngôi sao của bầu trời đêm dần ló rạng. Khi
cuộc sống quá đỗi khó khăn, hãy cất cao tiếng hát...
</li>
<li>
<img class="anhsach" src="image/kiucvinhcuu.jpg">
<h2>Ký Ức Vĩnh Cửu</h2>
<h2>100.000đ</h2>
Ký Ức Vĩnh Cửu là một tác phẩm điều tra trinh thám hình sự.
Độc giả theo chân Amos Decker từng bước giải mã các bí ẩn trong vụ án thảm sát gia
đình anh và xả súng trường trung học địa phương. Xuyên suốt câu chuyện là những bi
kịch trong và ngoài ...
</li>
<li>
src="image/yeulanhungcuocchiataykhonghoiket.jpg">
<h2>Yêu Là Những Cuộc Chia Tay Không Hồi Kết</h2>
<h2>119.000đ</h2>
“YÊU LÀ NHỮNG CUỘC CHIA TAY” HAY “YÊU
KHÔNG HỒI KẾT”? Giữa dòng chảy cuộc đời, ta gặp nhau là một phép màu, mà chia
tay lại là vĩnh viễn. Yêu là cuộc chia tay không hồi kết, là khoảng lặng sâu hơn cả bầu
trời? Hay là thứ tình cảm có thể phải dùng cả một đời để mỉm cười khi nhớ lại, hoặc...
</li>
<article>
<h3>Sách mới xuất bản</h3>
</article>
<li>
<img class="anhsach" src="image/nguoica.jpg">
<h2>Người Cá – 아가미</h2>
<h2>90.000đ</h2>
Một người đàn ông trong nỗi tuyệt vọng vì cuộc sống bất
hạnh đã gieo mình xuống hồ cùng với con trai. Người đàn ông mất mạng, nhưng đứa trẻ
nhờ bản năng sinh tồn đã mọc mang cá và sống sót một cách kỳ diệu. Ông lão sống bên
hồ và cháu ...
</li>
<li>
src="image/cuocdoiratdangtoimuonsongmotcachngotngao.jpg">
<h2>Cuộc Đời Rất Đắng, Tôi Muốn Sống Một Cách Ngọt
Ngào</h2>
<h2>109.000đ</h2>
Trong những ngày tháng sống trên đời, chúng ta luôn lo lắng
nếu mình không làm gì đó, thì sẽ bị người khác vượt qua, bị thời đại bỏ lại. Nhưng thật
ra, đời người không phải là một cuộc đua marathon, cứ phải cố dẫn trước người khác. Là
chim, bạn có thể bay. Là sâu, bạn có thể bò. Nếu chạy nhanh,...
</li>
</ul>
</div>
<div id="footer">
<ul>
<li>Thông tin liên hệ</li>
<li>Địa chỉ: số 20 Nguyễn Trãi, Thanh Xuân, Hà Nội</li>
<li>Số điện thoại: 0981380441</li>
<li>Email: lethanhphuong120700@gmail.com</li>
</ul>
</div>
</body>
</html>
- Trang truyện ngắn:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="menu_top">
<ul>
ngắn</a></li>
Thuyết</a></li>
</ul>
</div>
<div id="banner">
</div>
<div id="main">
<article>
<h3>Truyện ngắn</h3>
</article>
<ul>
<li>
src="image/diduongdemhayhatlen.jpg">
<h2>Đi Đường Đêm Hãy Hát Lên</h2>
<h2>119.000đ</h2>
ĐỂ CUỘC ĐỜI LUÔN LÀ NHỮNG NỐT NHẠC VUI!
“Nếu khóc vì bỏ lỡ ánh mặt trời, bạn cũng sẽ vuột mất cả những vì sao.” Khi đã bỏ lỡ ánh
mặt trời, hãy lau khô nước mắt, chờ đợi những ngôi sao của bầu trời đêm dần ló rạng. Khi
cuộc sống quá đỗi khó khăn, hãy cất cao tiếng hát...
</li>
<li>
src="image/nhungduatrekhongbaogiolon.jpg">
<h2>Những Đứa Trẻ Không Bao Giờ Lớn</h2>
<h2>96.000đ</h2>
“Tôi muốn quay ngược thời gian và trở lại tuổi thơ. Khi “Bố”
là “Anh hùng và “Tình yêu” là “Cái ôm của mẹ”. “Nơi cao nhất trên thế giới này” là “Bờ
vai của bố”. Điều duy nhất có thể gây “đau đớn” là “Xước đầu gối”. Thứ duy nhất “Vỡ
vụn” là “Đồ chơi”. Và khi... “Tạm biệt” có...
</li>
<li>
src="image/yeulanhungcuocchiataykhonghoiket.jpg">
<h2>Yêu Là Những Cuộc Chia Tay Không Hồi Kết</h2>
<h2>119.000đ</h2>
“YÊU LÀ NHỮNG CUỘC CHIA TAY” HAY “YÊU
KHÔNG HỒI KẾT”? Giữa dòng chảy cuộc đời, ta gặp nhau là một phép màu, mà chia
tay lại là vĩnh viễn. Yêu là cuộc chia tay không hồi kết, là khoảng lặng sâu hơn cả bầu
trời? Hay là thứ tình cảm có thể phải dùng cả một đời để mỉm cười khi nhớ lại, hoặc...
</li>
<li>
<img class="anhsach" src="image/Parisnhungmuayeu.jpg">
<h2>Paris, Những Mùa Yêu</h2>
<h2>45.000đ</h2>
Nhắc đến Paris, người ta thường nhớ đến hình ảnh một thành
phố tình yêu lãng mạn và diễm lệ. Nhưng đó chỉ là một nửa sự thật. Dưới góc nhìn của
các nhân vật trong Paris, những mùa yêu, Paris hiện lên ở những mảng màu đa sắc hơn.
Một thành phố công nghiệp hóa nặng nề với các tuyến Metro lạnh lùng, các công dân lao
động như “những chú chuột cần mẫn”. Một thành phố phực tạp với đủ màu da, gồ ghề và
khắc nghiệt, đặc biệt với những sinh viên đến từ Việt Nam. Một thành phố đầy rẫy các va
chạm văn hóa và nỗi buồn tha hương…
</li>
<li>
src="image/cuocdoiratdangtoimuonsongmotcachngotngao.jpg">
<h2>Cuộc Đời Rất Đắng, Tôi Muốn Sống Một Cách Ngọt
Ngào</h2>
<h2>109.000đ</h2>
Trong những ngày tháng sống trên đời, chúng ta luôn lo lắng
nếu mình không làm gì đó, thì sẽ bị người khác vượt qua, bị thời đại bỏ lại. Nhưng thật
ra, đời người không phải là một cuộc đua marathon, cứ phải cố dẫn trước người khác. Là
chim, bạn có thể bay. Là sâu, bạn có thể bò. Nếu chạy nhanh,...
</li>
</ul>
</div>
<div id="footer">
<ul>
</ul>
</div>
</body>
</html>
- Trang tiểu thuyết:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="menu_top">
<ul>
ngắn</a></li>
Thuyết</a></li>
</ul>
</div>
<div id="banner">
</div>
<div id="main">
<article>
<h3>Tiểu Thuyết</h3>
</article>
<ul>
<li>
<img class="anhsach" src="image/khieuvubenbovuc.jpg">
<h2>Khiêu Vũ Bên Bờ Vực</h2>
<h2>112.000đ</h2>
“Dục vọng đã giúp tôi sống, và dục vọng đã giết chết tôi.”Câu
nói ấy của Jean-Jacques Rousseau dường như hoàn toàn đúng trong trường hợp này. Dục
vọng đã lấy đi tất cả của Emmanuelle, một người phụ nữ đã từng hạnh ...
</li>
<li>
<img class="anhsach" src="image/kiucvinhcuu.jpg">
<h2>Ký Ức Vĩnh Cửu</h2>
<h2>100.000đ</h2>
Ký Ức Vĩnh Cửu là một tác phẩm điều tra trinh thám hình sự.
Độc giả theo chân Amos Decker từng bước giải mã các bí ẩn trong vụ án thảm sát gia
đình anh và xả súng trường trung học địa phương. Xuyên suốt câu chuyện là những bi
kịch trong và ngoài ...
<li>
<img class="anhsach" src="image/tanngaydelai.jpg">
<h2>Tàn Ngày Để Lại</h2>
<h2>110.000đ</h2>
Stevens là một quản gia người Anh với tất cả mọi hàm nghĩa
của từ này: tận tụy, chỉn chu, trung thành, và trên hết, luôn luôn có một ý thức mãnh liệt
về phẩm giá nghề nghiệp. Mong muốn cải thiện chất lượng phục vụ tại dinh thự và chấm
dứt ...
</li>
<li>
<img class="anhsach" src="image/nguoica.jpg">
<h2>Người Cá – 아가미</h2>
<h2>90.000đ</h2>
Một người đàn ông trong nỗi tuyệt vọng vì cuộc sống bất
hạnh đã gieo mình xuống hồ cùng với con trai. Người đàn ông mất mạng, nhưng đứa trẻ
nhờ bản năng sinh tồn đã mọc mang cá và sống sót một cách kỳ diệu. Ông lão sống bên
hồ và cháu ...
</li>
<li>
<img class="anhsach" src="image/giatuthongay.jpg">
<h2>Giã Từ Thơ Ngây</h2>
<h2>50.000đ</h2>
“Và trên hết tôi sợ chính cái việc tôi sẽ hai mươi tuổi. Có lẽ
khi đó cũng sẽ chẳng có gì xảy ra với tôi cả. Liệu tôi có thể lúc nào cũng mười chín tuổi
như bây giờ được không?”Giã từ thơ ngây viết về chuyện giới tính ở tuổi vị thành ...
</li>
</ul>
</div>
<div id="footer">
<ul>
</ul>
</div>
</body>
</html>
- Trang liên hệ:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="menu_top">
<ul>
ngắn</a></li>
Thuyết</a></li>
</ul>
</div>
<div id="banner">
</div>
<div id="main">
<article>
<h3>Thông tin liên hệ</h3>
</article>
<article>
<form>
<table style="margin: auto">
<tr>
<td>Họ tên</td>
<td><input type="text" id="hoten"></td>
</tr>
<tr>
<td>SĐT</td>
<td><input type="text" id="sdt"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" id="email"></td>
</tr>
<tr>
<td>Địa chỉ</td>
<td><input type="text" id="diachi"></td>
</tr>
<tr>
<td><input onclick="send()" type="button"
value="Thêm"></td>
</tr>
</table>
</form>
</article>
</div>
<div id="footer">
<ul>
</ul>
</div>
</body>
</html>
 File css:
body{
font-family: Tahoma;
font-size: 13px;
width: 100%;
margin: 0px auto;
}
#menu_top{
background-color: rgb(255,127,36);
height: 60px;
}
#banner img{
width: 100%;
height: 300px;
}
#main {
width: 100%;
height: 1300px;
float: left;
}
#footer{
width: 100%;
height: 200px;
background-color: rgb(255,127,36);
clear: left;
line-height: 60px;
text-align: left;
}
#menu_top ul {
margin: 0px;
padding: 0px;
}
#menu_top ul li {
list-style: none;
float: left;
}
#menu_top ul li a {
text-decoration: none;
display: block;
height: 40px;
line-height: 40px;
color: #FFF;
padding: 10px 20px 0px 130px;
font-size: 25px;
font-weight: bold;
}
.anhsach{
height: 170px;
margin-bottom: 20px;
}
article h3{
text-align: center;
padding: 2px 0;
font-size: 35px;
font-weight: bold;
}
#main ul{
margin: 0px;
padding: 0px;
}
#main ul li {
list-style: none;
clear: left;
border-bottom: 2px solid #ccc;
float: left;
margin-bottom: 30px;
}
#main ul li img{
float: left;
margin-right: 10px;
}
#main ul li h2{
font-size: 20px;
margin-top: 0px;
}
#footer ul {
margin: 0px;
}
#footer ul li {
list-style: none;
}
#footer ul li {
text-decoration: none;
display: block;
height: 30px;
line-height: 40px;
color: #FFF;
font-size: 20px;
font-weight: bold;
}
 File javascript:
function send(){
var array= document.getElementsByTagName('input');
var hoten = array[1].value;
var sdt = array[2].value;
var email = array[3].value;
var diachi = array[4].value;
if(hoten== ""||sdt== ""||email== ""||diachi== "")
{ alert("Vui lòng nhập đầy đủ thông tin!");}
else { alert("Thêm thông tin thành công!");}
}

Lê Thanh Phương

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lê Thanh Phương

Uploaded by

Copyright:

Available Formats

Bài thảo luận thiết kế và triển khai website

You might also like