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ội dung trích xuất từ tài liệu:
bài thực hành thiết kế web, phần 3Bài th c hành – Thi t k web Bài 03: S d ng CSS v i Macromedia Dreamweaver MX 2004.M c tiêu – Làm quen v i CSS (Cascading Style Sheets) – Thi t k trang web tĩnh dùng HTML và CSS v i s tr giúp c a Dreamweaver MX 2004Yêu c u – Hoàn thành các bài th c hành trư c – N m b t các ki n th c v CSSCác bư c th c hành:Ph n I: T o CSS1. Ch n trang web ñang thi t k , ñ ch ñ design, sau ñó vào->menu->text…2.Xu t hi n h p tho i:Ch n d ng b ch n mu n làm (Các lo i b ch n xem trong slide lý thuy t). Gi s ch n .classA .B m OK3. Lưu l i file d ng *.css vào nơi c n thi t (ví d file trangtri)GVHD TS. Vũ ð c Lung 1Bài th c hành – Thi t k webB m SAVE4. Xu t hi n h p tho i sau:L a ch n các thông s , ñ c tính cho ñ nh d ng trang web ñang th t k .Chuy n sang ch ñ code ta th y xu t hi n dòng:5. S a ñ i và thêm b ch n m i. Vào menu->text->cssStyles ->Manage StylesGVHD TS. Vũ ð c Lung 2Bài th c hành – Thi t k web6. Xu t hi n h p tho iCh n file trangtri và b m edit s th y hình:7.B m NEW ñ t o b ch n m i, ho c ch n b ch n có s n ñ thay ñ i8. Khi ch n NEW:GVHD TS. Vũ ð c Lung 3Bài th c hành – Thi t k webCh n selector type là d ng Advanced sau ñó t i selector ch n b ch n có s n a:link, b m OK, OKl n n a ñ ñóng dialog. Tương t cho các b ch n khác a:visited, a:hover. Cu i cùng s có k t qunhư hình sau:9. ð ñ nh thu c tính cho các b ch n l a, ch n b ch n (vd a:link) sau ñó click nút edit s th yhình sau:GVHD TS. Vũ ð c Lung 4Bài th c hành – Thi t k webVí d t i color ch n màu #FF6600, t i Decoration ch n none ñ b g ch dư i c a hyperlink,…M file *.css ñ xem k t qu t o CSS.10. N u các trang web khác cũng mu n s d ng ñ nh d ng này thì m nó lên r i vào Menu: Text->CSS Style->Manage style sheet->click nút Attach->Click nút Browse t i t p tin trangtri.css->OK.Bài t p 1: S d ng cách t o file CSS ñ thi t k ví d d ng như sau: dl.center { text-align: center; color: blue } dl.bold {font-weight: bold} … Trong phan DL co center va bold p.right{text-align:right} p.left{text-align:left} Trong class left Trong class right Trong class right va left Thay ñ i các thông s trong ví d ñ th y s khác bi t c a chúng.Bài t p 2: Tương t như bài 1 nhưng có d ng như sau: #green {color: green} p#para1 { text-align: center; color: red } Tin t c th trư ng Th trư ng ch ng khoánPh n II: T o Thi t k web d ng Frame Trang web d ng Frame là trang ñư c chia thành nhi u khung, trong m i khung s t i m ttrang web tương ng vào khung ñó. ð t o trang web d ng Frame ta có nhi u cách. Cách dùng thHTML chúng ta ñã h c qua, trong ph n này gi i thi u cách t o qua các bư c sau:1. T o Frame m u có s n:GVHD TS. Vũ ð c Lung 5Bài th c hành – Thi t k webVào Menu: File->New->Trong tab General ch n m c Framesets, trong h p Framesets hãy ch n m tm u thích h p sau ñó Click Create.2. Nh p li u sơ b các khung tương ng. ð lưu Frame vào Menu: File->Save All chương trình st ñ ng ñánh d u trang ñ lưu (ñ n trang nào thì trang ñó s ñư c ñánh d u m ). Nh p vào tên trangweb tương ng. Chú ý: - Không ñư c lưu các trang cùng tên - S trang = S Frame + 13. Sau khi lưu ñóng t t c các c a s và m trang cha lên, n u các trang con ñư c m theo thì ñãthành công4. ð nh thu c tính cho Frames M trang cha lên vào menu: Windows->Frames sau ñó l a frame tương ng ñ ñ nh thu ctínhGVHD TS. Vũ ð c Lung 6Bài th c hành – Thi t k web ng d ng thi t k trang web theo m u sau (Các file hình trong thư m c Images):Bài t p 03:GVHD TS. Vũ ð c Lung 7