Bài 7 Xây dựng website - Giáo trình FPT

Bài 7Xây dựng website

NHẮC LẠI BÀI TRƯỚC

Làm quen với các thành phần trên trang webĐịnh nghĩa CSS cho những thành phần:

TableFormLists & Menu

Làm việc với drop-down menu

Làm quen với các thành phần trên trang webĐịnh nghĩa CSS cho những thành phần:

TableFormLists & Menu

Làm việc với drop-down menu

Bài 7 - Xây dựng website

MỤC TIÊU BÀI HỌC

Làm việc với dự án websiteCấu trúc thư mục khi tiến hành dự án websiteTạo kiến trúc website

@import cssBackground & màu nềnText & màu văn bảnMenuKhung SidebarFormĐánh dấu trangVùng nội dung

Làm việc với dự án websiteCấu trúc thư mục khi tiến hành dự án websiteTạo kiến trúc website

@import cssBackground & màu nềnText & màu văn bảnMenuKhung SidebarFormĐánh dấu trangVùng nội dung

Bài 7 - Xây dựng website

DỰ ÁN WEBSITE

DỰ ÁN WEBSITE

http://www.scriptinwithajax.com/index.php

Bài 7 - Xây dựng website

DỰ ÁN WEBSITE

Thiết kế bố cục các trangĐịnh nghĩa được những thành phần có trong cáctrang:

MenuPanelFormSidebarHeaderFooter

Bài 7 - Xây dựng website

Thiết kế bố cục các trangĐịnh nghĩa được những thành phần có trong cáctrang:

MenuPanelFormSidebarHeaderFooter

CẤU TRÚC THƯ MỤC

CẤU TRÚC THƯ MỤC

Thư mục local: chứa tất cả những phiên bản chínhxác của toàn bộ trang trong websiteThuận tiện khi upload lên mạngRoot Directory (thư mục gốc):

Là URL gốc cho trang webGắn liền với địa chỉ web thông qua ISP (Internetservice provider – nhà cung cấp mạng)

Bài 7 - Xây dựng website

Thư mục local: chứa tất cả những phiên bản chínhxác của toàn bộ trang trong websiteThuận tiện khi upload lên mạngRoot Directory (thư mục gốc):

Là URL gốc cho trang webGắn liền với địa chỉ web thông qua ISP (Internetservice provider – nhà cung cấp mạng)

Cấu trúc thư mục điển hình của một websiteImages: chứa file ảnhStyles: chứa các file CSSScript: chứa các file kịch bản JavascriptIndex.html, home.html: trang chủ

CẤU TRÚC THƯ MỤC

Bài 7 - Xây dựng website

KIẾN TRÚC WEBSITE

KIẾN TRÚC WEBSITE

Bài 7 - Xây dựng website

@import css

Tương đương:

<style type="text/css">@import url(css/mystylesheet.css);

</style>

<link href="css/mystylesheet.css" rel="stylesheet" />

Tương đương:

Bài 7 - Xây dựng website

<link href="css/mystylesheet.css" rel="stylesheet" />

MÃ ĐÁNH DẤU

HTML:<table class="basic_lines">

<tr><td>&nbsp;</td><td>Styling</td><td>Coding</td>

</tr><tr>

<td>Ngôn ngữ</td><td>XHTML &amp; CSS</td><td>PHP &amp; SQL</td>

</tr><tr>

<td>Focus</td><td>Interface design</td><td>Back-end code</td>

</tr></table>

HTML:

Bài 7 - Xây dựng website

<table class="basic_lines"><tr>

<td>&nbsp;</td><td>Styling</td><td>Coding</td>

</tr><tr>

<td>Ngôn ngữ</td><td>XHTML &amp; CSS</td><td>PHP &amp; SQL</td>

</tr><tr>

<td>Focus</td><td>Interface design</td><td>Back-end code</td>

</tr></table>

ẢNH NỀN

CSS:

div#header {background:url(../images/gray_header.gif) repeat-y #383838;}#footer {clear:both;background:url(../images/gray_footer.gif) repeat-y #383838;}

CSS:

Bài 7 - Xây dựng website

DROP-DOWN MENU

HTML:

<div class="multi_drop_menus"><ul>

<li><a href="#">What's New</a></li><li><a href="#">Table of Contents</a></li><li><a href="#">CSS Links</a>

<ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li>

</ul></li><li><a href="#">Contact Us</a></li>

</ul></div>

Bài 7 - Xây dựng website

<div class="multi_drop_menus"><ul>

<li><a href="#">What's New</a></li><li><a href="#">Table of Contents</a></li><li><a href="#">CSS Links</a>

<ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li>

</ul></li><li><a href="#">Contact Us</a></li>

</ul></div>

Để thay đổi độ trong suốt:IE: filter:alpha(opacity=90);Firefox: -moz-opacity:0.9;Chuẩn CSS3: opacity:0.9;

KHUNG SIDEBAR

Bài 7 - Xây dựng website

Tạo bo góc của box trên trang web:Sử dụng JavaSscriptSử dụng tính năng mới của CSS3 (cần chú ý trênIE)

KHUNG SIDEBAR

Bài 7 - Xây dựng website

VÙNG NỘI DUNG

CSS#content img {float:left; margin:0 10px 5px 0;}#content p {font-size:1em; line-height:140%; margin-bottom:.75em;}………………………………#footer p { font-size:.75em; color:#FFF;}

Bài 7 - Xây dựng website

#content img {float:left; margin:0 10px 5px 0;}#content p {font-size:1em; line-height:140%; margin-bottom:.75em;}………………………………#footer p { font-size:.75em; color:#FFF;}

CÂU HỎI

1. Tại sao phải cấu trúc thư mục khi làm website?2. Kiến trúc trên trang web có tác dụng gì?

Bài 7 - Xây dựng website

TỔNG KẾT

Trước khi thực hiện dự án website, cần chú ý:Lập yêu cầu, nội dungThiết kế kiến trúc của webpage (trong toàn bộwebsite)

Có thể sử dụng nhiều file CSS để import vào fileXHTMLPhân tách nội dung trong file .html và trình bàytrong file .css

Trước khi thực hiện dự án website, cần chú ý:Lập yêu cầu, nội dungThiết kế kiến trúc của webpage (trong toàn bộwebsite)

Có thể sử dụng nhiều file CSS để import vào fileXHTMLPhân tách nội dung trong file .html và trình bàytrong file .css

Bài 7 - Xây dựng website