Bài 8 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

Bài 8 - 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

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

DỰ ÁN WEBSITE

DỰ ÁN WEBSITE

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

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

DỰ ÁN WEBSITE

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

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

s

CẤU TRÚC THƯ MỤC

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ủ

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

KIẾN TRÚC WEBSITE

KIẾN TRÚC WEBSITE

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

@import css

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

Tương đương:

<style type="text/css">

@import url(css/mystylesheet.css);

</style>

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

MÃ ĐÁNH DẤU

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

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

HTML:

ẢNH NỀN

div#header {

background:url(../images/gray_header.gif) repeat-y #383838;} #footer {

clear:both;

background:url(../images/gray_footer.gif) repeat-y #383838;}

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

CSS:

DROP-DOWN MENU

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

HTML:

<div class="multi_drop_menus">

<ul>

<li><a

<li><a

<li><a

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

<ul>

</ul>

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

</li>

<li><a

</ul>

</div>

KHUNG SIDEBAR

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

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

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)

VÙNG NỘI DUNG

#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

CSS

CÂU HỎI

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

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

TỔNG KẾT

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

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