Thiết kế Web cơ bản, fpt polytechnic

1. Bài 8
Xây dựng website

2. 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 8 - Xây dựng website

3. 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 8 - Xây dựng website

4. DỰ ÁN WEBSITE

5. DỰ ÁN WEBSITE
http://www.scriptinwithajax.com/index.php
Bài 8 - Xây dựng website

6. 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 8 - 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

7. CẤU TRÚC THƯ MỤC

8. 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 8 - 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)

9. 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 8 - Xây dựng website

10. KIẾN TRÚC WEBSITE

11. KIẾN TRÚC WEBSITE
Bài 8 - Xây dựng website

12. @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 8 - Xây dựng website
<link href="css/mystylesheet.css" rel="stylesheet" />

13. 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 8 - 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>

14. Ả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 8 - Xây dựng website

15. 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 8 - 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>

16. Để 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 8 - Xây dựng website

17. 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 8 - Xây dựng website

18. 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 8 - 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;}

19. 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 8 - Xây dựng website

20. 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 8 - Xây dựng website