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

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

Trang 1

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ữ

Trang 2

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>

Trang 3

Và bảng

Trang 4

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

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:

Trang 5

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”

Trang 6

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

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")

Trang 7

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

Trang 8

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:

Trang 9

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:

Trang 10

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

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 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 id=green> Tin tức thị trường</p>

<p id=para1> Thị trường chứng khoán</p>

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:

Trang 11

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

Trang 12

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):

Trang 13

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

– Nắm bắt các kiến thức về Web 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>

</body>

Trang 14

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:

Trang 15

Control Tên ñăng nhập

Control Mật khẩu:

Trang 16

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:

Trang 17

Trang 18

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

Trang 19

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

Trang 20

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

4

Trang 21

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

Vùng c ӕ ÿӏnh (Locked – Non Editable)

Vùng có th Ӈ chӍnh sӱa ( Editable)

5

Trang 22

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

Trang 23

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

Trang 24

ĈӇ 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:

8

Trang 25

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

Trang 26

Sau ÿó chӑn Create, trang m ӟi ÿѭӧc tҥo ra giӕng nhѭ trang Template

main.

10

Trang 27

Trong vùng Main_Content , ta thi Ӄt kӃ trang nhѭ sau:

11

Trang 28

T ѭѫng tӵ ta tҥo các trang còn lҥi tӯ trang Tempalte:

3.5 C ͅp nhͅt Template

M ӣ file main.dwt

Ta t ҥo link cho Home là /index.html

Nh ҩn Ctr+S ho һc vào File Æ Save ÿӇ lѭu lҥi main.dwt. Khi ÿó

Dreamweaver s Ӂ hiӋn dialog yêu cҫu cұp nhұt thông tin lҥi cho tҩt cҧ các trang ÿѭӧc phát sinh tӯ trang main.dwt

12

Trang 29

Ch ӑn Update , khi ÿó tҩt cҧ các trang cӫa chúng ta ÿӅu ÿѭӧc cұp nhұt ÿӗng

nh ҩt.

13

Trang 30

Bài thực hành #06 JavaScript

Bài 01: Dùng JavaScript ñể in ra một lời chào

Bài 02: Dùng hàm alert() ñể in ra lời chào, sử dụng một file riêng ñể chứa code JavaScript

Trong file “general.js”

<TITLE> JavaScript Exemple </TITLE>

var name=prompt("Hello! What’s your name ?","Lung");

// document.write("Hello " + name + " ! I hope you like JavaScript ");

</SCRIPT>

</HEAD>

<BODY>

Trang 31

Tên ñệm:  <input TYPE="TEXT" NAME="DEM" MAXLENGTH="15" SIZE="10"><br>

Trang 32

<p>Bạn thích hoạt ñộng nào ngoài trời::<br>

ði bộ <input TYPE="CHECKBOX" NAME="HOAT_DONG" VALUE="Di bo"> Trượt tuyết<input TYPE="CHECKBOX" NAME="HOAT_DONG" VALUE="Truot tuyet">

Bơi lội<input TYPE="CHECKBOX" NAME="HOAT_DONG" VALUE="Duoi nuoc"> ðạp xe <input TYPE="CHECKBOX" NAME="HOAT_DONG" VALUE="Dap xe"> </p>

var dat, hour, min, sec, data;

dat = new Date();

hour = dat.getHours(); if(hour<10) hour = "0" + hour;

min = dat.getMinutes(); if(min<10) min = "0" + min;

sec = dat.getSeconds(); if(sec<10) sec = "0" + sec;

data = hour + ":" + min + ":" + sec;

Trang 33

</HTML>

Bài 06: Thiết kế một trang web như sau:

Trong ñó trường Value ñể nhập giá trị vào, CheckBox “Square” ñể chị ñịnh phép bình phương Trường Result ñể hiện kết quả của phép tính Khi nhập vào Value thì Result sẽ là Value*2, còn nếu Square là Checked thì Result là Value2 và nếu nhập vào Result trước thì sẽ suy ra Value ngược lại

Trang 34

Action (default double):

<INPUT TYPE=checkbox NAME=square

Trang 35

Gói WampServer chạy trên windows bao gồm PHP + MySQL + Apache

– Sinh viên copy file "WampServer2.0c.exe" từ thư mục gốc về máy và cài ñặt lên từng máy theo từng bước chỉ dẫn;

– Sau khi cài xong, khởi ñộng WampServer thì sẽ xuất hiện hình biểu tượng góc dưới cùng bên phải màn hình như sau:

– Kích chuột phải vào biểu tượng sẽ xuất hiện:

– ðể kiểm tra hoạt ñộng của WampServer bấm vào mục Localhost trong của sổ hiện ra ở trên, nếu ñúng sẽ cho ra trang như sau:

Trang 36

GVHD TS Vũ ðức Lung

– Nếu không hiện ra thì vào WampServer→Apache→Service→Test Port 80 Nếu port 80

ñã ñược dùng cho dịch vụ khác rồi thì phải ñổi mặc ñịnh port này trong file "httpd.conf" bằng cách vào WampServer→Apache→httpd.conf Tìm trong file những nơi ghi:

o Listen 80

o ServerName localhost:80 ðổi số port 80 thành số khác chẳng hạn 81

Mở IE ñánh http://localhost:81/index.php ñể kiểm tra kết quả – ðể quản lý Cơ sở dữ liệu MySQL:

o Bạn nhấn vào dòng phpMyadmin của Menu WAMP hoặc mở trình duyệt và gõ: http://localhost:81/phpMyadmin/

Tạo thư mục ảo

- Khi cài ñặt Wamp mặt ñịnh sẽ tạo cho bạn thư mục gốc lưu trữ web dùng chung (www directory), mặt ñịnh thường là C:/wamp/www

- Khi muốn chạy 1 trang index.php trong thư mục MyWeb bạn phải chép thư mục

MyWeb vào thư mục gốc lưu trữ web (mặc ñịnh C:/wamp/www) Vào trình duyệt gõ http://localhost/MyWeb/index.php

- ðể có thể ñể chạy trang PHP trên một thư mục khác bạn phải tạo một Alias Directory

o Vào biểu tượng Wamp → Alias Directories → Add an alias

Trang 37

– Enter your Alias : Nhập myweb

– Enter the destination of your alias : d:/myweb (thư mục lưu trang web)

– Vào trình duyệt nhập http://localhost/myweb/index.php

Thiết kế webform có dạng sau:

Trang 38

Sau khi nhập họ và tên vào và bấm Submit thì cho kết quả ngay tại trang ñó:

Code mẫu file "names.php":

First Name: <INPUT TYPE="TEXT" NAME="Name[]" SIZE=20><br>

Last Name: <INPUT TYPE="TEXT" NAME="Name[]" SIZE=20><br>

Trang 39

+ Ngược lại nếu sai sẽ trả về thông tin "Cảnh báo : Username hoặc password của bạn không chính xác Vui lòng nhập lại"

Mẫu trích dẫn từ file nhập liệu login.php:

<div align="left"><p><font face="tahoma">UserName</font>

<br>

<div align="left"><p><font face="tahoma">Password</font>

<input type="password" name="pw" size="14"><BR><BR><input type="submit"

Trang 40

– Nắm bắt các kiến thức cơ bản về PHP và MySQL

I Tạo và cài ñặt CSDL:

- Khởi ñộng WampServer

- Từ cửa sổ khi bấm chuột vào biểu tượng của WampServer, chon PhpMyAdmin

- Trang web PhpAdmin hiện ra có dạng (chú ý nếu không hiện ra có thể do port không ñúng, theo bài trước phải ñánh port số 81 thêm vào):

Trang 41

- Bấm vào nút Go Nếu import thành công ta sẽ thấy bên trái của trang PhpAdmin

có danh sách 4 bảng của CSDL như dạng sau:

Trang 42

- ðể kiểm tra, bấm vào bất kỳ bảng nào rồi bấm vào SQL, sau ñó GO sẽ hiện ra dữ liệu của bảng ñó

II Tạo kết nối ñến CSDL :

Do ña số các trang web ñều kết nối ñến CSDL, do ñó ta sẽ ñóng gói việc kết nối với CSDL trong 1 class riêng ñể dễ dàng hơn trong việc sử dụng

Tạo file DataProvider.php Lưu DataProvider.php trong thư mục C:\wamp\www\

Khai báo class DataProvider trong DataProvider.php:

// Thiet lap font Unicode

if (!(mysql_query("set names 'utf8'")))

showError();

// Thuc thi cau truy van

if (!($result = mysql_query($sql, $connection)))

showError();

// Dong ket noi CSDL

if (!(mysql_close($connection)))

showError();

Định dạng
Số trang	63
Dung lượng	2,62 MB