bài 7 xây dựng website

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

@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
Bài 7 - Xây dựng website
DỰ ÁN WEBSITE
DỰ ÁN WEBSITE
/>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ác
trang:
Menu
Panel
Form
Sidebar
Header
Footer
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ác
trang:
Menu
Panel
Form
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
@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 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?
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 dung
Thiế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 file
XHTML
Phân tách nội dung trong file .html và trình bày
trong file .css
Trước khi thực hiện dự án website, cần chú ý:
Lập yêu cầu, nội dung
Thiế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 file
XHTML
Phân tách nội dung trong file .html và trình bày
trong file .css
Bài 7 - Xây dựng website