Bài Số 2 Assignment Web1032 Thiết Kế Layout Cho Website.docx

ĐẠI HỌC FPT TRƯỜNG CAO ĐẲNG POLYTECHNIC    BÁO CÁO ASSIGNMENT THIẾT KẾ LAYOUT TRANG WEB Giảng viên Nguyễn Thị Trà My Sinh viên Nguyễn Danh Nhân Mã sinh viên PA00128 Trang 1 Tháng 11 Năm 2014 Lấy ch[.]

Trang 1

ĐẠI HỌC FPT TRƯỜNG CAO ĐẲNG POLYTECHNIC

- - -   

-BÁO CÁO ASSIGNMENT

THIẾT KẾ LAYOUT TRANG WEB

Giảng viên: Nguyễn Thị Trà My Sinh viên: Nguyễn Danh Nhân

Mã sinh viên: PA00128

Tháng 11 Năm 2014

Trang 2

Lấy chi tiết các thành phần của 5 trang ở trong bản thiết kế bằng Photoshop

Trang 5

Ở các trang này, ta lấy được các ảnh, các icon, lấy mẫu màu, cỡ chữ, font chữ, màu chữ và đo khoảng các giữa các đoạn, các ảnh.

Sau khi xem ta rút ra được bố cục của trang Web là 3 dòng và 2 cột:

- Dòng đầu tiên là Header chứa Banner và Menu

- Dòng thứ 2 chứa nội dung của Websites.

- Dòng thứ 3 chứa nội dung Footer của Websites là: Bản quyền, địa chỉ của tổ chức, điện thoại và Email của tổ chức.

Trang 6

Sau khi phân tích, ta bắt đầu làm các trang của Websites Đầu tiên làm trang

index.html:

Trang 7

Trang About.html

Trang 8

Trang Listnew.html

Trang 9

Trang DetailNews.html

Trang 10

Và cuối cùng là trang Contact.html

Sau khi làm xong toàn bộ các trang Web Em đăng ký một Hosting là Hostinger.vn

và up toàn bộ Websites lên Hosting

Truy cập vào trang Hosting.vn Nhấn vào Tạo tài khoản mới

Trang 12

GIẢI THÍCH CODE

Code của trang index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

Trang 13

<li> <a class="id" href="index.html">Trang

nhất</a></li>

<li> <a href="contact.html">Kinh doanh</a></li>

<li> <a href="">Thông tin</a></li>

<li><a href="#">Harley Davidson 48 phong cách bobber tại ViệtNam</a></li>

<li><a href="#">Harley Davidson thiết lập 'tổng hành dinh'

tại châu Á</a></li>

<li><a href="#">Harley Davidson XL1200C 2011 về Việt

Nam</a></li>

</div>

Trang 14

<li><a href="#">Đường dây làm tân dược giả lớn nhất

Việt Nam sắp hầu tòa</a></li>

<li><a href="#">Trần tình của tác giả đề Văn nhầm tênTrịnh Công Sơn</a></li>

<li><a href="#">Hơn chục thành viên nhóm tin tặc tấn công toàn cầu bị bắt</a></li>

<li><a href="#">Lãi suất huy động VND bắt đầu hạ

<p><a href="">Chat sky ngay trên facebook</a></p>

</div>

<p><a href="">Chat sky ngay trên facebook</a></p>

</div>

</div>

Trang 15

<p><a href="">Argentina thắng ở Copa America 2011</a></p> </div>

</div>

<input type="text" value="Nhập thông tin tìm kiếm"

/></br>

<p><input type="radio" name="a" />Google <input

class="input" type="radio" name="a" />PolyNews<br /></p>

<p><input type="button" class="button" value="Tìm

</div><! kết thúc idcnt2 >

Trang 16

<p1>Bị cảnh sát giao thông thổi phạt, ngườiphụ nữ giằng lại giấy đăng ký Cô con gái 18 tuổi của bà này xông tới tátliên tiếp vào mặt cảnh sát.</p1>

<p><a href="">Cây xà cừ đổ ra đường, điện khu

trung tâm Sài Gòn tê liệt</a></p>

<p><a href="">Tổng thống Philippines bán xe

sang</a></p></br>

<p1>Ông Benigno Aquino III hôm qua cho biết đã bán

chiếc xe riêng hạng sang hiệu Porsche vì vấn đề an ninh, chứ không phải

do những </p1>

</div>

Trang 17

<img alt="bc" src="images/tbc.jpg" width="43"

height="43" />

<h2><a href="">'Nữ hoàng khí đốt' bị đuổi khỏi

tòa</a></h2>

<p><a href="">Động đất kéo theo cảnh báo sóng thần ở

New Zealand</a></p>

<p><a href="">Máy bay chở hàng cho quân đội Mỹ nổ

<p><a href="">Argentina vẫn chưa thắng ở Copa America 2011</a></p></br>

<p1>Lượt trận thứ hai bảng A hôm qua (sáng nay, Hà Nội) tiếp tục chứng kiến hình ảnh nhợt nhạt, thiếu sinh khí của đội tuyển chủ nhà

<p><a href="">Juventus bị ép giá vụ mua con rể

Maradona</a></p>

<p><a href="">Giới hâm mộ lên cơn 'sốt' vì cầu thủ vô hiệu hóaMessi</a></p>

Trang 18

<li><a href="">Ảnh ghép quan chức Trung Quốc thành trò

đùa trên mạng</a></li>

<li class="nenli"><a href="">Đề Toán và Lý đều khó, 60

<param name="FlashVars"

value="&MM_ComponentVersion=1&skinName=Corona_Skin_1&streamName=media/

haho&autoPlay=true&autoRewind=true" />

<! This param tag prompts users with Flash Player 6.0 r65and higher to download the latest version of Flash Player Delete it if

you don’t want users to see the prompt >

<param name="expressinstall"

value="Scripts/expressInstall.swf" />

Trang 19

<! Next object tag is for non-IE browsers So hide it

from IE using IECC >

<! [if !IE]> >

data="FLVPlayer_Progressive.swf" width="280" height="242">

<! <![endif] >

<! The browser displays the following alternative

content for users with Flash Player 6.0 and older >

<div>

<h4>Content on this page requires a newer version of

Adobe Flash Player.</h4>

<p><a

href="http://www.adobe.com/go/getflashplayer"><img

src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

<li><a href="">Đám cưới hoàng gia Monaco</a></li>

<li><a href="">Tâm sự của phụ huynh, thí sinh trước kỳ

Trang 20

</div><! kết thúc contnet >

<p>Sản phẩm thực hành dành cho sinh viên trường cao đẳng thực hành FPT</p>

<p>Nghiêm cấm sử dụng với mục đích thương mại</p>

<p>© Cao đẳng thực hành FPT: Tầng 1, nhà F, tòa nhà Việt Úc

(VAS), khu đô thị Mỹ Đình I, Hà Nội.</p>

<p>Điện thoại: +84 4 8582 0808 Email: caodang@fpt.edu.vn.</p>

Trang 21

Code của trang About.html

<head>

<li> <a href="index.html">Trang nhất</a></li>

<li> <a class="ab" href="about.html">Thế

giới</a></li>

Trang 22

Cơ quan chủ quản: Bộ Khoa học Công nghệ.<br />

<p><a href="">iPhone 4 ra mắt kèm theo nhiều tính năng

và tiện dụng, nên ít người sử dụng còn chú ý tới quả táo </a></p>

Trang 23

<! [if !IE]> >

<! <![endif] >

<div>

<p><a

<p>Sản phẩm thực hành dành cho sinh viên trường cao đẳng thực hành FPT</p>

<p>Nghiêm cấm sử dụng với mục đích thương mại</p>

<p>© Cao đẳng thực hành FPT: Tầng 1, nhà F, tòa nhà Việt Úc

(VAS), khu đô thị Mỹ Đình I, Hà Nội.</p>

<p>Điện thoại: +84 4 8582 0808 Email: caodang@fpt.edu.vn.</p>

Trang 24

Code trang listnew.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="description" content="duanlvpa00127 Polynews

<div id="banner"><! bắt đầu banner >

<div class=" logo">

<li> <a href="index.html">Trang nhất</a></li>

<li> <a class="ln" href="listnews.html">Xã

hội</a></li>

<li> <a href="about.html">Thế giới</a></li>

<li> <a href="contact.html">Kinh doanh</a></li>

<li> <a href="detailnew.html">Văn hóa</a></li>

<li> <a href="">Thể thao</a></li>

<li> <a href="">Pháp luật</a></li>

<li> <a href="">Đời sống</a></li>

Trang 25

<li> <a href="">Khoa học</a></li>

<li> <a href="">Vi tính</a></li>

<li> <a href="">Ô tô - Xe máy</a></li>

<li> <a href="">Thông tin</a></li>

<li> <a href="">Liên hệ tòa soạn</a></li>

<img src="images/nangnong.jpg" width="337" height="235" />

<h2><a href="detailnew.html">Nắng nóng Hà Nội</a></h2>

<p>Cái nóng ở Hà Nội thật khó chịu! Đi ngoài nắng nóng đã

đành, ngồi trong bóng râm, không khí vẫn cứ hầm hậm như nung Người Thủ

đô, không còn cách nào khác, là phải tự thích ứng với cái kiểu nắng nóng rất… thành thị này.</p>

<p>Sáng nay, sau cú đấu đầu, cả xe khách và xe tải

đều nát vụn 2 tài xế chết tại chỗ và kẹt cứng trong ca bin, 7 hành khách

bị thương nặng.</p>

<li> <a href="">Xe khách đấu đầu xe rơ móc, hơn 20

khách bị thương</a></li>

<li> <a href="">Hà Nội dự kiến đầu tư gần 4.300 tỉ

đồng để giãn dân phố cổ</a></li>

Trang 26

<h3> <a href="">Hà Nội: Đôi vợ chồng dũng cảm đuổi

theo tên cướp liều lĩnhn</a></h3>

<p>Bị hai đối tượng bịt mặt, dùng dao chém tới tấp

rồi cướp đi số tiền lớn, hai vợ chồng anh H đã đuổi theo, phối hợp với

công an và quần chúng nhân dân bắt kịp chúng Tuy nhiên, hai tên cướp đã

bỏ xe và tiền lại, chạy vào ngõ sâu tẩu thoát.</p>

đồng để giãn dân phố cổ </a></li>

<p>UBND TPHCM vừa chấp thuận việc xây cầu đi bộ bắc

qua sông Sài Gòn, nối khu trung tâm

quận 1 với khu đô thị mới Thủ Thiêm (quận 2).</p>

<li> <a href="">Xe khách đấu đầu xe rơ móc, hơn 20

khách bị thương</a></li>

<h3> <a href="">Lãnh đạo cảnh sát biển gần 20 nước

họp tại Việt Nam</a></h3>

Trang 27

<p>Theo Trung tướng Phạm Đức Lĩnh, Cục trưởng Cảnh

sát biển (Bộ Quốc phòng), hội nghị tập trung trao đổi và chia sẻ quan

điểm về những thách thức an ninh trên biển và vai trò của lực lượng cảnh sát biển.</p>

<li><a href="">Hai bố con chết dưới bánh xe bồn

chở xăng dầu (06/07)</a></li>

<li><a href="">Hơn 50% điểm thi lớp 10 môn Anh

dưới trung bình (06/07)</a></li>

<li><a href="">Đi bắt ngao, hai nữ sinh bị sóng

cuốn trôi (05/07)</a></li>

<div id="contentlistnewsphai"><! bắt đầu content phải >

<div class ="timkiemid">

<div class="tk">

<input type="text" value="Nhập thông tin tìm kiếm"

/></br>

<p><input type="radio" name="a" />Google <input

class="input" type="radio" name="a" />PolyNews<br /></p>

<p><input type="button" class="button" value="Tìm

Kiếm"/></p>

</div>

Trang 28

<li><a href="">Ảnh ghép quan chức Trung Quốc

thành trò đùa trên mạng</a></li>

<li class="nenli"><a href="">Đề Toán và Lý đều

khó, 60 thí sinh bị kỷ luật</a></li>

<li><a href="">Việt Nam khẳng định chủ quyền

Hoàng Sa, Trường Sa</a></li>

<p><a href="">iPhone 4 ra mắt kèm theo

nhiều tính năng và tiện dụng, nên ít người sử dụng còn chú ý tới quả

táo </a></p>

</div>

<div class="ngat"></div>

<div class="nhipsongtre"><! bat dau nhip song tre >

<div class="nhipsongtre1"><! bat dau nhip song tre1 > <p class="chusong">NHỊP SỐNG TRẺ</p>

<img src="images/nhipsong1.jpg" width="53"

Trang 29

<img src="images/nhipsong4.jpg" width="53"

<param name="movie" value="FLVPlayer_Progressive.swf" />

<param name="quality" value="high" />

<param name="wmode" value="opaque" />

<param name="scale" value="noscale" />

<param name="salign" value="lt" />

<param name="FlashVars"

value="&MM_ComponentVersion=1&skinName=Corona_Skin_1&streamName=media/

haho&autoPlay=true&autoRewind=true" />

<param name="swfversion" value="8,0,0,0" />

<! This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player Delete it if

you don’t want users to see the prompt >

<param name="expressinstall"

value="Scripts/expressInstall.swf" />

<! Next object tag is for non-IE browsers So hide it

from IE using IECC >

Trang 30

<param name="wmode" value="opaque" />

<param name="scale" value="noscale" />

<param name="salign" value="lt" />

<! The browser displays the following alternative

content for users with Flash Player 6.0 and older >

<div>

<h4>Content on this page requires a newer version of

Adobe Flash Player.</h4>

<p><a

href="http://www.adobe.com/go/getflashplayer"><img

src="http://www.adobe.com/images/shared/download_buttons/get_flash_player gif" alt="Get Adobe Flash player" /></a></p>

<div id="footer"><! bắt đầu footer >

<p>Sản phẩm thực hành dành cho sinh viên trường cao đẳng thực hành FPT</p>

<p>Nghiêm cấm sử dụng với mục đích thương mại</p>

(VAS), khu đô thị Mỹ Đình I, Hà Nội.</p>

<p>Điện thoại: +84 4 8582 0808 Email: caodang@fpt.edu.vn.</p>

Trang 31

Code của trang DetailNews.html

<head>

Trang 32

<ul>

<li> <a href="index.html">Trang nhất</a></li>

<li> <a class="dt" href="detailnew.html">Văn

hóa</a></li>

<p>Cái nóng ở Hà Nội thật khó chịu! Đi ngoài nắng nóng đã

đành, ngồi trong bóng râm, không khí vẫn cứ hầm hậm như nung Người Thủ

đô, không còn cách nào khác, là phải tự thích ứng với cái kiểu nắng nóng rất… thành thị này.</p>

<center><img alt="anhdau" src="images/DetailNews1.jpg"

width="441" height="308" /></center>

<p class="cachdong">Trung tâm khí tượng thủy văn TƯ cho

biết, do ảnh hưởng của rìa nam áp thấp nóng phía tây kết hợp với hiệu ứngphơn mạnh, Hà Nội tiếp tục nắng nóng gay gắt, nhiệt độ giữa trưa có lúc

lên đến 40 độ C.</p>

Trang 33

<p>Để chống chọi với nắng nóng, người dân Hà Nội ra đường

thì bịt kín từ đầu tới chân Ai "có điều kiện" thì vào… siêu

thị, hiệu sách, trung tâm mua sắm để hưởng nhờ máy lạnh; người già, trẻ nhỏ rỗi rãi ra công viên nơi có nhiều bóng

cây xanh tận hưởng chút bóng râm và gió trời hiếm hoi Còn ở các công sở, máy lạnh chạy ro ro cả ngày cũng không

xua nổi cái nắng của trưa hè…</p>

<center><img alt="anh1" src="images/DetailNews2.jpg"

width="440" height="291" />

<p>Người ta tận dụng từng khoảng bóng râm

trên đường để tránh nắng.</p></center>

<li><a href="">Hai bố con chết dưới bánh xe bồn

chở xăng dầu (06/07)</a></li>

<li><a href="">Hơn 50% điểm thi lớp 10 môn Anh

dưới trung bình (06/07)</a></li>

<li><a href="">Đi bắt ngao, hai nữ sinh bị sóng

cuốn trôi (05/07)</a></li>

Trang 34

<input type="text" value="Nhập thông tin tìm kiếm"

/></br>

<li><a href="">Ảnh ghép quan chức Trung Quốc

thành trò đùa trên mạng</a></li>

<li class="nenli"><a href="">Đề Toán và Lý đều

khó, 60 thí sinh bị kỷ luật</a></li>

<li><a href="">Việt Nam khẳng định chủ quyền

Hoàng Sa, Trường Sa</a></li>

<p><a href="">iPhone 4 ra mắt kèm theo

nhiều tính năng và tiện dụng, nên ít người sử dụng còn chú ý tới quả

táo </a></p>

</div>

Trang 36

<! [if !IE]> >

<! <![endif] >

<div>

<p><a

Tiêu đề	Thiết kế Layout trang Web
Tác giả	Nguyễn Danh Nhân
Người hướng dẫn	PTS. Nguyễn Thị Trà My
Trường học	Đại học FPT
Chuyên ngành	Thiết kế Layout cho Website
Thể loại	Assignment
Năm xuất bản	2014

Định dạng
Số trang	72
Dung lượng	5,11 MB