Thiết kế web với microsoft frontpage 2003

 Web site, trang web: Trang Web: trang thông tin có chứa các siêu văn bản Trang chủ (Homepage): trang đầu tiên của trang Website Web site là một vị trí trên Internet (nơi cung cấp dịch vụ web).  URL (Uniform Resource Location): Là địa chỉ để định vị các nguồn tài nguyên trên Web. Cấu trúc của một URL: ://[/Path][/Document] Ví dụ: http://www.pdu.edu.vn/khoacntt/index.php

Trang 1

THIẾT KẾ WEB VỚI MICROSOFT

FRONTPAGE 2003

Trang 2

NỘI DUNG

Chương I: Một số khái niệm cơ bản

Chương V: Multimedia hóa trang web

Chương II: Ngôn ngữ HTML

Chương III: Tạo trang web với FrontPage 2003

Chương IV: Xử lý văn bản & một số đối tượng khác

Trang 3

 Dịch vụ World Wide Web (Web)

 Trình duyệt Web (Web Browser)

 Phục vụ Web (Web Server)

Trang 4

 Web site, trang web:

 Trang Web: trang thông tin có chứa các siêu văn bản

 Trang chủ (Homepage): trang đầu tiên của trang Website

 Web site là một vị trí trên Internet (nơi cung cấp dịch vụ web)

 URL (Uniform Resource Location):

 Là địa chỉ để định vị các nguồn tài nguyên trên Web

 Cấu trúc của một URL:

<Giao thức>://<tên miền>[/Path][/Document]

Ví dụ: http://www.pdu.edu.vn/khoacntt/index.php

Trang 5

 Mô hình hoạt động của dịch vụ Web:

Trang 6

 Ví dụ: Hiển thị dòng chữ “Chao các bạn !” dạng in đậm

Chào các bạn

(Hypertext Markup Language)

Trang 7

 Cấu trúc trang web tĩnh:

 Thẻ <HEAD>: Phần đầu của trang web

 Thẻ <TITLE>: Đặt tiêu đề cho trang web (thẻ này nằm trong

<HEADER>)

Trang 8

Ví dụ: Đặt tiêu đề của trang web là: “Thông báo”

<HEAD>

<TITLE>Thông báo</TITLE>

</HEAD>

 Thẻ <BODY>: Chứa nội dung trang web

Nội dung trang web

</BODY>

 Chú thích trong HTML: dùng dấu <! và dấu >

<! Nội dung chú thích >

Một số thẻ HTML thông dụng (tt)

Trang 9

 Ví dụ: Tạo trang web với tiêu đề là: “Giới thiệu” và in ra dòng

Trang 10

 Các thẻ định dạng văn bản:

… Dạng chữ đậm Hello world !

… Dạng chữ nghiêng Hello world !

… Dạng chữ gạch chân Hello world !

<S>…</S> Dạng chữ gạch giữa <S>Hello world!</S>

… Tạo chỉ số trên X2  X 2

… Tạo chỉ số dưới H2O  H2O

Trang 12

Các thuộc tính quan trọng của thẻ :

 Align:

 Left: Canh trái

 Center: Canh giữa

 Right: Canh phải

 justify: Canh đều

 Style:

 Margin-top: Canh lề trên của đoạn

 Margin-left: Canh lề trái của đoạn

 Margin-right: Canh lề phải của đoạn

 Margin-bottom: Canh lề dưới của đoạn

 Direction: Chỉ định chiều văn bản (từ trái sang phải “ltr”

hoặc từ phải sang trái “rtl”)

Trang 14

 Scr: là đường dẫn của file ảnh

 Height: Chỉ định chiều cao của ảnh Nếu không chỉ định thì

sẽ lấy chiều cao hiện tại của ảnh

 Width: chỉ định độ rộng của ảnh Nếu không chỉ định thì sẽ

lấy chiều rộng hiện tại của ảnh

 Border: chỉ định độ dày của khung bao quanh ảnh

 Alt: là chuỗi văn bản xuất hiện khi đưa trỏ chuột vào ảnh.

 Đưa nhạc nền vào web:

Trang 15

Các thuộc tính:

 Scr: là đường dẫn của file âm thanh (*.mid, *.wav, …)

 Loop: số lần lặp lại bài nhạc Nếu loop= -1 hoặc “infinite”

thì sẽ lặp đến khi chuyển sang trang mới web

 Chèn âm thanh, phim:

Các thuộc tính:

 Scr: là đường dẫn của file bài hát/phim

 Autostart: nếu là true tự động thực hiện bài hát.

 Loop: số lần lặp lại bài nhạc Nếu loop = true hoặc

“infinite” thì sẽ lặp đến khi chuyển sang trang mới web

Trang 16

 Tạo liên kết đến trang web khác:

Trong đó:

 Url: là đường dẫn/địa chỉ của của trang web chuyển đến.

 Target có thể là các giá trị sau:

 “_new” hoặc “_blank”: trình duyệt sẽ phải mở trang web

đích trong một cửa sổ mới

 "_top", "_parent", "_self“: dùng cho những trang web có

chứa frame.

 Text: là đoạn văn bản hiển thị để người dùng click vào.

 Tạo liên kết đến E-mail:

 Tạo các liên kết (Hyper link):

Trang 17

 Tạo liên kết bên trong (liên kết nội) của trang web:

Là liên kết đến từng đoạn văn bản trong trang web

Trong đó: Chỉ mục/tên của đoạn được tạo như sau:

Được đặt ở đầu đoạn

 Tạo dòng chữ chạy trên trang web:

<MARQUEE direction = “…” behavior =“…” height = “…” width = “…” scrollamount =“N” scrolldelay = “M”>Text

</MARQUEE>

 Tạo các liên kết (Hyper link):

Trang 18

Trong đó:

 Direction: hướng chuyển động của dòng chữ “Text”

 Behavior: hình thức chuyển động: scroll, alternate, slide

 Height, Width: chiều cao và chiều rộng

 Scrollamount, Scrolldelay: chỉ định tốc chuyền động.

Trang 19

Trong đó:

 Align: lề của bảng: “left” hoặc “right”

 Background: chỉ định file ảnh nền của bảng

 Bgcolor: màu nền của bảng

 Border: đường viền bảng (tính bằng pixel)

 Cellpadding: khoảng cách từ các cạnh của ô tới nội dung

của ô (tính bằng pixel)

 Width, HeightWidth, Height : độ rộng, cao của bảng (tính theo % hoặc

tính bằng pixel)

 Tạo bảng (Table)

Trang 20

 Align: lề của các ô trong dòng: “left”, “right” hoặc “center”.

 Background: đường dẫn file ảnh nền của dòng

 Bgcolor: màu nền của dòng

 Valign: lề theo chiều dọc của văn bản trong các ô trên

dòng: “top”, “bottom”, “middle”

Chú ý:

Thẻ <Tr> phải nằm trong thẻ <Table></Table>

Trang 21

Thêm ô vào bảng:

<TD align=“…” background = “url“ bgcolor = “RGB”

rowspan = “N” colspan = “M” valign = “…” > … </TD>

Trong đó:

 Align: lề của ô: “left”, “right” hoặc “center”.

 Background: đường dẫn file ảnh nền của dòng

 Bgcolor: màu nền của ô

 Valign: lề theo chiều dọc của văn bản trong các ô trên

dòng: “top”, “bottom”, “middle”

 Rowspan: số ô trải dài trên N dòng

 Colspan: Số ô trải rộng trên M cột

Chú ý: Thẻ <TD> phải nằm trong thẻ <TR></TR>

Trang 22

THIẾT KẾ MỘT WEB SITE THẾ NÀO ?

Phân tích hệ thống web site:

 Tìm hiểu đối tượng (khách hàng, người truy cập) của web

site

 Tìm hiểu các yêu cầu của khách hàng.

 Xây dựng mô hình hệ thống của web site:

 Chức năng của từng trang

 Cấu trúc của các trang

 Mối liên kết giữa các trang

 Xây dựng các mô hình cơ sở dữ liệu (nếu cần thiết)

 Thu thập thông tin cần thiết (do khách hàng cung cấp) để

xây dựng nội dung cho các trang web

Trang 23

THIẾT KẾ MỘT WEBSITE THẾ NÀO ? (tt)

Xây dựng từng trang web cụ thể:

 Cần liên hệ với nhà cung cấp Host để biết được các thông

tin về hệ thống mà web site sau này sẽ vận hành

 Nếu có nhiều người cùng tham gia: nên quy ước cách đặt

tên các trang web (tên file), tên các thư mục, tên biến

 Cần chú ý sử dụng đường dẫn tương đối khi đưa hình

ảnh, âm thanh hay tạo các liên kết giữa các trang (copy các file ảnh/âm thanh vào thư mục của web site trước khi chèn chúng vào các trang web)

 Giao diện: đơn giản, thân thiện, dễ dùng, hình ảnh, âm

thanh, màu sắc, … tuỳ thuộc vào mục đích của web site

 Xây dựng nội dung cho trang web: xúc tích và chính xác.

Trang 24

THIẾT KẾ MỘT WEBSITE THẾ NÀO ? (tt)

 Khi lập trình cần chú ý đến thời gian thực hiện.

 Chú ý đến vấn đề bảo mật thông tin (nếu cần thiết).

Chạy thử trên hệ thống mạng Intranet hoặc Internet

 Đưa web site vào vận hành thử nghiệm.

 Phát hiện và khắc phục lỗi.

 Nhận ý kiến đóng góp (về giao diện, chức năng, …)

 Chỉnh sửa lần cuối.

Bảo trì và nâng cấp:

 Cần phải tiếp thu các công nghệ mới để có thể nâng cấp

web site nếu cần thiết

Trang 25

CHƯƠNG III: TẠO MỘT TRANG WEB VỚI

Trang 26

Thanh tiêu đề Thanh Menu Thanh công cụ chuẩn

Thanh định dạng Page tab

Chế độ

làm việc

Đóng trang web hiện tại

Thanh cuộn ngang – dọc

Task pane

Vùng thiết kế

Trang 27

FRONTPAGE 2003 (tt)

 Tạo web site mới:

 Click vào hình mũi tên bên cạnh biểu tượng New  Web site

 Hộp thoại Web site Templates xuất hiện

2.Click vào

để tạo web site mới

1 Click

vào đây

Trang 28

2.Click chọn mẫu web site

1.Nhập đường dẫn chứa web site Hoặc click vào nút Browse

để chọn

3.Click Ok để tạo website mới

Trang 29

 Sau khi tạo web site xong màn hình như sau xuất hiên:

Thư mục chứa các hình ảnh

Trang chủ của web site

Tạo trang web mới

Tạo thư mục

mới

Trang 30

 Cần tạo thêm thư mục “Media” để chứa các file âm thanh, các đoạn video, các file flash

2 Nhập tên thư mục là

“Media”  ấn Enter

1 Click tạo thư mục mới

Trang 31

 Tạo trang web mới:

 Click chọn biểu tượng new

 Click chọn biểu tượng save (hình chiếc đĩa mềm) Hộp thoại

Save as xuất hiện

Nhập tên trang web

Click save

để lưu trang

web

Trang 32

1 Click

vào đây

Trang 33

2 Click chọn web site cần mở

1 Click chọn nơi chứa web site

3 Click Open để

mở web site

Trang 34

 Mở trang web đã có:

 Sau khi mở web site xong, màn hình xuất hiện như sau

Click phải vào trang cần mở và chọn Open

Trang 35

 Chuyển đổi giữa các chế độ làm việc: Có 3 chế độ làm việc:

 Design: chế độ thiết kế

 Code: chế độ soạn mã lệnh

 Split: chế độ vừa thiết kế vừa viết mã lệnh

 Preview: Chế độ chạy thử trang web trong FrontPage

Trang 36

Xem trên trình duyệt web

Trang 37

 Thiết đặt thuộc tính cho trang web: Sau khi tạo trang web xong, công việc đầu tiên là ta thiết đặt thuộc tính cho nó Bao gồm các thuộc tính chính:

 Tiêu đề trang web

 Định dạng lề cho trang web

 Font chữ, kích thướt, màu chữ mặc định của trang web

 Màu nền, ảnh nền và nhạc nền (nếu cần thiết)

vùng trống trên trang web  Page properties để mở hộp thoại Page properties.

vào mục Title  click OK

Trang 38

1 Chọn tab General

2 Nhập tiêu đề

3 Click OK

Trang 39

 Định dạng lề cho trang web:

 Mở hộp thoại Page properties

 Chọn tab Advanced

 Định lề trên: nhập giá trị vào ô Top Margin

 Định lề trái: nhập giá trị vào ô Left Margin

 Định lề dưới: nhập giá trị vào ô Bottom Margin

 Định lề phải: nhập giá trị vào ô Right Margin

Trang 40

1 Chọn tab Advanced

2 Nhập giá trị để định

lề, trên, trái, dưới, phải

3 Click Ok

Trang 41

 Chọn các giá trị cần thiết rồi click OK để thiết lập

 Các bước như sau:

Trang 43

Chọn font chữ

Chọn kiểu chữ: bình thường, đậm, nghiên, …

Click Ok để thiết đặt

Nhập vào kích cỡ chữ (ví dụ: 12px)

Chọn màu chữ

Trang 44

 Chèn ảnh nền:

 Chọn tab Formatting  Background picture  Browse để

Trang 45

 Thiết đặt màu nền:

 Chọn tab Formatting  Background  Chọn màu  OK







Trang 46

 Đưa nhạc nền vào trang web:

 Chọn tab Formatting  Background picture  Browse để

 Phải đảm bảo rằng file

nhạc đã được lưu trong thư

Trang 47

CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI

 Xoá một ký tự bên phải con nháy: ấn phím “Delete”

 Xoá nhiều ký tự cùng lúc: tô đen (chọn khối) ký tự cần xoá và

Trang 48

 Dán (paste) một khối đã được copy hoặc cắt:

 R-Click vào vị trí cần dán  Paste

 Hoặc ấn tổ hợp phím: “Ctrl + V”

Trang 49

TƯỢNG KHÁC (tt)

 Định dạng đoạn: gồm các định dạng sau

 Canh lề đoạn (trái, phải, giữa, đều)

 Khoảng cách giữa các đoạn

Trang 50

Canh lề cho đoạn

Khoảng các giữa các dòng trong đoạn

Định khoảng cách

trên, dưới của đoạn

Click Ok

Trang 51

Trang 52

Chọn font chữ

Chọn kiểu chữ: bình thường, đậm, nghiên, …

Click Ok để thiết đặt

Nhập vào kích cỡ chữ (ví dụ: 12px)

Chọn màu chữ

Trang 53

 Chèn các ký tự đặc biệt (Symbol):

 Click Insert  Symbol  chọn symbol cần chèn  click nút Insert

Tạo các Bookmark trong trang:

 Bookmark: là các điểm đánh dấu của một đoạn

 Được dùng để tạo các điểm đến của các liên kết trong

 Thực hiện: Chọn các ký tự làm tiêu đề của đoạn  Insert  Bookmark Hộp thoại Bookmark xuất hiện

Trang 54





Nhập tên Bookmark

Click OK

Trang 55

 Chèn các siêu liên kết (Hyperlink): có 2 loại

 Liên kết trong (liên kết đến các Bookmark nằm trong chính trang đó)

 Liên kết ngoài: là liên kết đến các trang web khác

 Chèn liên kết trong:

 Chọn các ký tự làm liên kết

 Chọn Insert  Hyperlink ( hoặc ấn tổ hợp phím “Ctrl” + K)

 Hoặc click biểu tượng hyperlink ( ) trên thanh công cụ

 Hộp thoại Insert hyperlink xuất hiện  click nút Bookmark

 Chọn tên Bookmark cần liên kết đến  click OK

Trang 58

 Chèn liên kết ngoài:

 Chọn các ký tự làm liên kết

 Chọn Insert  Hyperlink (hoặc ấn tổ hợp phím “Ctrl” + K)

 Hoặc click biểu tượng hyperlink ( ) trên thanh công cụ

 Hộp thoại Insert hyperlink xuất hiện  click chọn trang web cần liên kết  OK

 Hoặc nhập vào địa chỉ (của trang web trên mạng) vào ô

Address  click OK

Trang 59

1 Liên kết đến các trang web cùng web site





2 Liên kết đến các trang web khác trên mạng

Trang 60

Trang 61

Sau khi click Finish hộp thoại Marquee properties xuất hiện

Màu nền Font, màu, kích

thướt chữ

Click OK để thiết

đặt

Trang 62

 Chèn Layer:

 Layer là một đối tượng cho phép ta đặt văn bản, hình ảnh,

âm thanh, … vào trong nó

 Layer được đặt ở vị trí bất kỳ trong trang web (ta có thể di chuyển chúng một cách tùy ý)

 Chèn layer vào trang web: click Insert  Layers (hoặc click vào biểu tượng Layer ( ) trên thanh công cụ

Trang 63

Trang 64

Điều chỉnh kích thướt theo chiều rộng

Điều chỉnh kích thướt theo chiều rộng và cao

Ấn giữ phím trái chuột và di

chuyển chuột để di chuyển layer

Điều chỉnh kích thướt

theo chiều cao

Trang 65

 Chèn bảng (table):

 Table cho phép hiển thị danh sách theo dòng, cột

 Table cho phép ta tạo các ô để đặt các đối tượng vào đúng

vị trí của chúng (table chính xác hơn layer)

 Chèn Table vào trang web: click Table  Insert  Table

Trang 66

Hộp thoại Insert table xuất hiện

Chọn ảnh nền

Click OK để chấp nhận

Trang 67

 Một số thao tác cơ bản với table:

 Di chuyển giữa các ô: ấn phím “Tab” để đi đến ô kế tiếp

hoặc “Shift” + “Tab” để đi lùi về ô phía trước

 Chọn một hoặc nhiều cột:

 Chọn 1 cột: click vào ô đầu tiên của cột  ấn giữ phím Shift

 click vào ô cuối cùng của cột

 Chọn nhiều cột: click vào ô đầu tiên của cột đầu tiên cần

chọn  ấn giữ phím Shift  click vào ô cuối của cột cuối cần chọn

Trang 68

 Thêm dòng mới vào bảng:

 Thêm một dòng mới vào cuối bảng: click vào ô cuối cùng của bảng (ô dưới phải)  ấn phím “Tab”

 Thêm một hoặc nhiều dòng tại vị trí bất kỳ:

 Click vào vị trí (dòng) cần thêm

 Click Table  Insert  Rows or Columns

Định dạng
Số trang	107
Dung lượng	5,66 MB