bài thực hành thiết kế web, phần 3

làm quen với CSS, thiết kế web tĩnh dùng HTML và CSS với sự giúp đỡ của...

– N:m b:t các ki n th c v; CSS

Các bư c th'c hành:

Ph"n I: T+o CSS

1 Ch<n trang web ñang thi t k , ñ? @ ch ñA design, sau ñó vàoC>menuC>text…

2.XuGt hiHn hAp thoIi:

Bài th c hành – Thi t k web

BGm SAVE

4 XuGt hiHn hAp thoIi sau:

L a ch<n các thông sK, ñ\c tính cho ñ]nh dIng trang web ñang th t k

Chuy?n sang ch ñA code ta thGy xuGt hiHn dòng:

<link href="file:///D|/Fasatoho/trangtri.css" rel="stylesheet" type="text/css">

5 SNa ñ`i và thêm bA ch<n m!i Vào menuC>textC>cssStyles C>Manage Styles

6 XuGt hiHn hAp thoIi

Ch<n file trangtri và bGm edit sc thGy hình:

7

Bài th c hành – Thi t k web

Ch<n selector type là dIng Advanced sau ñó tIi selector ch<n bA ch<n có sgn a:link, bGm OK, OK lWn nia ñ? ñóng dialog Tương t cho các bA ch<n khác a:visited, a:hover CuKi cùng sc có k t quM như hình sau:

9 ð? ñ]nh thuAc tính cho các bA ch<n l a, ch<n bA ch<n (vd a:link) sau ñó click nút edit sc thGy hình sau:

Bài t:p 1:

SN dYng cách tIo file CSS ñ? thi t k ví dY dIng như sau:

dl.center

{

text align: center;

color: blue }

dl.bold {font weight: bold}

…

<dl class="center bold"> Trong phan DL co center va bold</dl>

p.right{text align:right}

p.left{text align:left}

<p class=left> Trong class left</p>

<p class=right> Trong class right</p>

<p class="right left"> Trong class right va left</p>

Thay ñ`i các thông sK trong ví dY ñ? thGy s khác biHt c1a chúng

Bài t:p 2:

Tương t như bài 1 nhưng có dIng như sau:

green {color: green}

Bài th c hành – Thi t k web

Vào Menu: FileC>NewC>Trong tab General ch<n mYc Framesets, trong hAp Framesets hãy ch<n mAt msu thích h.p sau ñó Click Create

2 Nhop liHu sơ bA các khung tương ng ð? lưu Frame vào Menu: FileC>Save All chương trình sc

t ñAng ñánh dGu trang ñ? lưu (ñ n trang nào thì trang ñó sc ñư.c ñánh dGu mt) Nhop vào tên trang web tương ng Chú ý:

C Không ñư.c lưu các trang cùng tên

C SK trang = SK Frame + 1

3 Sau khi lưu ñóng tGt cM các cNa s` và m@ trang cha lên, n u các trang con ñư.c m@ theo thì ñã thành công

4 ð]nh thuAc tính cho Frames

M@ trang cha lên vào menu: WindowsC>Frames sau ñó l a frame tương ng ñ? ñ]nh thuAc tính