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

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

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:
<link href="file:///D|/Fasatoho/trangtri.css" rel="stylesheet" type="text/css">
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


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

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


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}
…
<dl class="center bold"> Trong phan DL co center va bold</dl>

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


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


Bài thực hành – Thiết kế web
Bài tập 03: Ứng dụng thiết kế trang web theo mẫu sau (Các file hình trong thư mục Images):

GVHD TS. Vũ ðức Lung

7