Bài tập thực hành thiết kế web với dreamweaver

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

Bài 01:
Thiết kế web với Notepad.
Mục tiêu
–
–

Làm quen với ngôn ngữ thiết kế web – HTML
Thiết kế trang web ñơn giản chỉ dùng Notepad

Các bước thực hành:
1. Mở Notepad ñể soạn thảo trang web bằng HTML
2. Sau khi soan lưu trang web dưới dạng file có ñuôi là *.htm hoặc *.html (ví dụ: bai01.htm)
3. Khởi ñộng Internet Explorer, từ menu vào FILE->OPEN->chọn file vừa tạo ñể xem kết quả
hiển thị
Yêu cầu không sử dụng các phần mềm hỗ trợ khác như FrontPage hoặc Dreamweaver.
Bài tập 1: Sử dụng các tag ñể hiển thị phân cấp tiêu ñề ñề mục

Bài tập 2: ðịnh dạng kiểu chữ

GVHD TS. Vũ ðức Lung

1


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

Bài tập 3: Tạo hai list (Two shopping lists) như sau

Bài tập 4: Tạo Bảng sử dụng tag <TABLE>, <TR>, <TD>, <TH>

GVHD TS. Vũ ðức Lung

2


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

Và bảng

GVHD TS. Vũ ðức Lung

3


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

Bài 02:
Thiết kế web với Macromedia Dreamweaver MX 2004.
Mục tiêu
–
–

Làm quen với ngôn ngữ thiết kế web – HTML
Thiết kế trang web tĩnh với sự trợ giúp của Dreamweaver MX 2004

Yêu cầu
–
–

Hoàn thành bài thực hành số 01
Nắm bắt các kiến thức cơ bản về thiết kế web với Dreamweaver MX 2004)

Các bước thực hành:
1. Tìm hiểu môi trường làm việc trong Dreamweaver MX của tác giả Hoàng Đăng Quang trong
file "DREAMWEAVER_Vietnamese MX.PDF"
2. Sử dụng Dreamweaver MX 2004 để làm các bài thực hành sau:
Bài tập 1: Viết trang web ñể mời dự tiệc, vận dụng các ñịnh dạng văn bản theo mẫu sau:

GVHD TS. Vũ Đức Lung

1


Bài thực hành – Thiết kế web
Bài tập 2: Tạo Bảng, chú ý ñến các thuộc tính ROWSPAN, và COLSPAN

Bài tập 3: Tạo bảng , sử dụng thêm việc chèn ảnh (Các hình ảnh ví dụ trong thư mục Notebook)

Bài tập 4: Dùng cách Link ñến một ñoạn chỉ ñịnh trong trang hiện hành dể thiết kế trang có
nội dung như trong file “tim hieu FTP.doc”.

GVHD TS. Vũ Đức Lung

2


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


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

Bài 04:
Tạo Web Form với Macromedia Dreamweaver MX 2004.
Mục tiêu
–
–

Làm quen với cách tạo Web Form
Thiết kế trang web tĩnh có các Web Form 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ề Web Form

Các bước thực hành:
I.
Tạo Form:
Tạo Form theo mẫu sau:

1.Tạo file HTML mới. Từ Menu Insert, chọn Form ra cửa sổ như sau:

Code sẽ có dạng tự ñộng như sau:
<body>
<form name="form1" method="post" action="">
</form>
</body>
GVHD TS. Vũ ðức Lung

1


Bài thực hành – Thiết kế web
2. Từ trong Form, vào Menu Insert → Layout → Table và tạo Table với các thông số như sau:

3. Thiết kế Form theo mẫu sau:

Trong ñó các Control như sau:
Control ñể nhập Họ và Tên:

GVHD TS. Vũ ðức Lung

2


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

Control Tên ñăng nhập

Control Mật khẩu:

GVHD TS. Vũ ðức Lung

3


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

Tương tự như trên cho Control ñể Nhập lại mật khẩu
Control cho nut bấm ñăng nhập (tương tự cho nút Hủy ñăng ký):

4. Thử lại kết quả trên trình duyệt

II. Bài tập thực hành:

Bài tập 1:
GVHD TS. Vũ ðức Lung

4


Bài thực hành – Thiết kế web
Từ bài làm trên tìm hiểu thêm các control khác (Checkbox, Radio Button, Listbox, Combo
box, …) và thuộc tính của chúng.
Bài tập 2:
Thiết kế Form như mẫu sau::

GVHD TS. Vũ ðức Lung

5


MӨC LӨC

1. Giӟi thiӋu vӅ Template trong Dreamweaver........................................... 3
2. Các kiӇu vùng Template (Template Region) trong Dreamweaver........ 3
3. Sӱ dөng Template trong Dreamweaver .................................................. 3
3.1. Tҥo Site................................................................................................. 3
3.2. Tҥo mӝt Template................................................................................. 5
3.3. Tҥo vùng có thӇ chӍnh sӱa (Editable Region) cho trang Template ...... 7
3.4. Tҥo mӝt trang mӟi tӯ Template ............................................................ 9
3.5. Cұp nhұt Template ............................................................................. 12

2

1. Giӟi thiӋu vӅ Template trong Dreamweaver
2. Các kiӇu vùng Template (Template Region) trong
Dreamweaver
3. Sӱ dөng Template trong Dreamweaver
3.1. T̹o Site
Trên menu chӑn Site Æ New Site...

Các thông tin cѫ bҧn cҫn cung cҩp là:
™ Tên Site (Site name)
™ Ĉѭӡng dүn ÿӃn thѭ mөc gӕc (Local root folder)
™ Thѭ mөc chӭa hình ҧnh (Default images folder)

3


Sau ÿó chӑn OK, Site mӟi ÿѭӧc tҥo.

4


3.2. T̹o mͱt Template
Bѭӟc 1: ThiӃt kӃ trang Html nhѭ hình sau ÿӇ làm trang Template:

Các vùng Template trong trang Html vӯa tҥo
Hình vӁ

Ý nghƭa
Vùng cӕ ÿӏnh (Locked – Non Editable)
Vùng có thӇ chӍnh sӱa ( Editable)

5


Bѭӟc 2: Save as trang html trên thành trang Template.
Sau khi thiӃt kӃ xong trang html ӣ bѭӟc 1, Trên menu cӫa
Dreamweaver vào FileÆ Save as
Chӑn kiӇu save là Template files (*.dwt)

6


Chӑn Save , trang Template ÿã ÿѭӧc tҥo.

3.3. T̹o vùng có th͛ ch͡nh s΅a (Editable Region) cho trang
Template
Sau khi lѭu trang dҥng template ӣ trên, tҩt cҧ các vùng trong trang ÿӅu
ӣ dҥng không thӇ chӍnh sӱa ӣ các trang ÿѭӧc tҥo tӯ trang Template vӯa tҥo
( Locked – Non Editable).
Trong bài Bookstore chúng ta ÿang xây dӵng, tҩt cҧ các vùng ÿӅu ӣ
dҥng cӕ ÿӏnh (Locked) cho tҩt cҧ các trang ngoҥi trӯ vùng (main content) là
khác nhau ӣ các trang.

7


ĈӇ tҥo vùng có thӇ chӍnh sӱa cho các trang sinh tӯ trang Template, ta
làm theo các bѭӟc sau:
B́ͳc 1: Chӑn vùng cҫn tҥo

B́ͳc 2: Trên thanh menu chӑn InsertÆTemplate ObjectsÆEditable
Region hoһc nhҩn tә hӧp phím Ctr+Atl+V

Vùng có khҧ năng
chӍnh sӱa
(Editable Region)

8


Sau ÿó ÿһt tên cho vùng này là Main_Content

KӃ tiӃp chӑn Ok, hoàn thành tҥo vùng có thӇ chӍnh sӱa trong trang Template
(Editable Region)

3.4. T̹o mͱt trang mͳi t΃ Template
Trên thanh menu vào FileÆ New , chӑn tab Templates , sau ÿó chӑn
Templates main trên site Bookstore Template
9