Bài 7
Xâ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:
Table
Form
Lists & 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:
Table
Form
Lists & 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 website
Cấu trúc thư mục khi tiến hành dự án website
Tạo kiến trúc website
@import css
Background & màu nền
Text & màu văn bản
Menu
Khung Sidebar
Form
Đánh dấu trang
Vùng nội dung
Làm việc với dự án website
Cấu trúc thư mục khi tiến hành dự án website
Tạo kiến trúc website

Sidebar
Header
Footer
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ính
xác của toàn bộ trang trong website
Thuận tiện khi upload lên mạng
Root Directory (thư mục gốc):
Là URL gốc cho trang web
Gắn liền với địa chỉ web thông qua ISP (Internet
service 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ính
xác của toàn bộ trang trong website
Thuận tiện khi upload lên mạng
Root Directory (thư mục gốc):
Là URL gốc cho trang web
Gắn liền với địa chỉ web thông qua ISP (Internet
service provider – nhà cung cấp mạng)
Cấu trúc thư mục điển hình của một website
Images: chứa file ảnh
Styles: chứa các file CSS
Script: chứa các file kịch bản Javascript
Index.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

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

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 JavaSscript
Sử dụng tính năng mới của CSS3 (cần chú ý trên
IE)
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?