bài 7 xây dựng website

Bài 7 Xây dựng website... NHẮC LẠI BÀI TRƯỚCLà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

Trang 1

Bài 7 Xây dựng website

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

Trang 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

Trang 4

DỰ ÁN WEBSITE

Trang 5

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

Trang 6

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

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

Trang 7

CẤU TRÚC THƯ MỤC

Trang 8

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)

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)

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

Trang 10

KIẾN TRÚC WEBSITE

Trang 11

KIẾN TRÚC WEBSITE

Trang 12

@import css

Tương đương:

@import url(css/mystylesheet.css);

</style>

Tương đương:

Trang 13

MÃ ĐÁNH DẤU

HTML:

<tr>

<td>Styling</td>

<td>Coding</td>

</tr>

<tr>

<td>XHTML & CSS</td>

</tr>

<tr>

<td>Focus</td>

<td>Interface design</td>

</tr>

</table>

HTML:

<tr>

<td>Styling</td>

<td>Coding</td>

</tr>

<tr>

<td>XHTML & CSS</td>

</tr>

<tr>

<td>Focus</td>

<td>Interface design</td>

</tr>

</table>

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

Trang 15

DROP-DOWN MENU

HTML:

<ul>

<li><a href="#">Table of Contents</a></li>

<li><a href="#">CSS Links</a>

<ul>

</ul>

</li>

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

</ul>

</div>

<ul>

<li><a href="#">Table of Contents</a></li>

<li><a href="#">CSS Links</a>

<ul>

</ul>

</li>

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

</ul>

</div>

Trang 16

Để thay đổi độ trong suốt:

IE: ﬁlter:alpha(opacity=90);

Firefox: -moz-opacity:0.9;

Chuẩn CSS3: opacity:0.9;

KHUNG SIDEBAR

Trang 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

Trang 18

VÙNG NỘI DUNG

CSS

#content img {ﬂoat:left; margin:0 10px 5px 0;}

#content p {font-size:1em; line-height:140%; margin-bottom:.75em;}

…………

#footer p { font-size:.75em; color:#FFF;}

#content img {ﬂoat:left; margin:0 10px 5px 0;}

#content p {font-size:1em; line-height:140%; margin-bottom:.75em;}

…………

#footer p { font-size:.75em; color:#FFF;}

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

Trang 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

Định dạng
Số trang	20
Dung lượng	1,84 MB