intTypePromotion=1

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

Chia sẻ: Baby Love | Ngày: | Loại File: PDF | Số trang:0

0
328
lượt xem
161
download

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

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

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

Chủ đề:
Lưu

Nội dung Text: bài thực hành thiết kế web, phần 3

  1. Bà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 2004 Yê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 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 ñ 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 OK 3. 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 1
  2. Bài th c hành – Thi t k web B m SAVE 4. 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 Styles GVHD TS. Vũ ð c Lung 2
  3. Bài th c hành – Thi t k web 6. Xu t hi n h p tho i Ch 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 ñ i 8. Khi ch n NEW: GVHD TS. Vũ ð c Lung 3
  4. Bài th c hành – Thi t k web Ch n selector type là d ng Advanced sau ñó t i selector ch n b ch n có s n a:link, b m OK, OK l 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 qu như 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 y hình sau: GVHD TS. Vũ ð c Lung 4
  5. Bài th c hành – Thi t k web Ví 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án Ph 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 t trang web tương ng vào khung ñó. ð t o trang web d ng Frame ta có nhi u cách. Cách dùng th HTML 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 5
  6. Bài th c hành – Thi t k web Vào Menu: File->New->Trong tab General ch n m c Framesets, trong h p Framesets hãy ch n m t m 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 s t ñ 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 trang web tương ng. Chú ý: - Không ñư c lưu các trang cùng tên - S trang = S Frame + 1 3. 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ông 4. ð 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 c tính GVHD TS. Vũ ð c Lung 6
  7. Bà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
ADSENSE
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2