Embed Size (px)
DESCRIPTION
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
Citation preview
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> </td><td>Styling</td><td>Coding</td>
</tr><tr>
<td>Ngôn ngữ</td><td>XHTML & CSS</td><td>PHP & 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> </td><td>Styling</td><td>Coding</td>
</tr><tr>
<td>Ngôn ngữ</td><td>XHTML & CSS</td><td>PHP & 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
