Tạo trang Web

Bảng biểu và tranh ảnh trong cấu trúc trang web Chương 2: Chuẩn bị xây dựng các trang web trên FrontPage... Xây dựng cấu trúc cho file tiêu đề1- Mở File tiêu đề - Vào thư mục chính - c

Trang 1

Thiết kế Web site

trên FrontPage

TTGDTX tỉnh Phú Thọ Email: thangchd@yahoo.com

Điện thoại: 0210.843726

Trang 2

2 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close

I Giới thiệu về Website

II Khởi động và thoát khỏi chương trình FrontPage

III Cấu tạo và giao diện cửa sổ chương trình FrontPage

Chương 1:

Cấu tạo và giao diện cửa sổ chương trình FrontPage

Trang 3

1- Website là gì

- Là tập hợp các trang web do người làm việc tạo nên Các trang web được xây dựng bằng các trình soạn thảo riêng

- Mỗi trang web có một địa chỉ Internet riêng gọi là URL

- Các trang web được kết nối với nhau bằng các siêu liên kết

- Website được đặt trên các máy phục vụ web (dịch vụ web server)

- Khi vào Internet người sử dụng truy cập vào các máy phục này

2- Xây dựng trang web

- Người làm việc xây dựng các trang web bằng các chương trình soạn thảo riêng

- FontPage là một trình soạn thảo để xây dựng trang web

I Giới thiệu về Website

Trang 5

III Cấu tạo và giao diện cửa sổ chương trình FrontPage

Chế độ

cửa sổ

soạn thảo

Tên file đang xây dựng

Thanh Pictures

Phần soạn thảo nội dung

Thanh tiêu đề

Menu lệnh

Hiện thị nội dung đã soạn thảo

Trang 6

Menu và Các thanh công cụ

Thao tác nội dung

Các hiển thị Thao tác chèn Các định dạng Công cụ

hỗ trợ Bảng biểu

Cửa sổ soạn thảo

Mở file mới Lệnh ghi cửa sổ conCây và Xem trình duyệt Sao chép địn dạng thành phầnTạo các

Mở file

đã có web serverĐưa lên Lệnh in Chính tả Di chuyển sao chép Bảng biểu tranh ảnhChèn Liên kết

kiểu định dạng Font chữ chữcỡ Kiểu chữ Canh lề Số thứ tự tự động Lý tự đầu các đoạn

Tạo nền

Màu chữ

Dịch chuyển nội dung

về bên trái, phải

Trang 7

I Mục đích và yêu cầu bố cục của website

II Tạo các thư mục lưu trữ trang web

III Bảng biểu và tranh ảnh trong cấu trúc trang web

Chương 2:

Chuẩn bị xây dựng các trang

web trên FrontPage

Trang 8

I Mục đích và yêu cầu bố cục của website

1- Mục đích xây dựng web

- Mở rộng quan hệ trong hợp tác phát triển

- Trao dổi thông tin

- Quảng cáo, giới thiệu sản phẩm

- Hỗ trợ đối tác, khách hàng …

2- Yêu cầu bố cục của website

- Bố cục chung

+ Trang tiêu đề + Trang chủ + Các trang khác

- Số trang

- Nội dung bố cục từng trang

Trang 9

Yêu cầu bố cục của website ( tiếp )

Trang 10

0

Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close

II Tạo các thư mục lưu trữ trang web

1- Tạo thư mục chính lưu trữ trang web

- Mở ổ đĩa muốn lưu trang các trang web ( ví dụ ổ D: )

- Tạo thư mục chính để lưu các trang web (ví dụ: HTML) + Kích chuột phải vào nền cửa sổ

+ Chọn New - Folder - đăt tên ( HLML ) - nhấn Enter

Thư mục

HTML

Trang 11

2- Tạo các thư mục con lưu trữ trang web

- Trong cửa sổ thư mục chính ( HTML ) tạo các thư mục sau:

+ ungdung: Để lưu các phần mềm ứng dụng

Trang 12

Kích thước bảng biểu

Trang 13

2- Công cụ thiết lập lại thông số bảng biểu

- Đánh dấu bảng biểu - Table - properties - Table

Vị trí bảng biểu

Nét viền của bảng

Khoảng cách giữa các ô

Nền của bảng

Độ rộng cột Kích thước cột

Khoảng cách nội dung đến cạnh ô

Kích thước dòng

Dùng hình ảnh làm nền của bảng

màu viền khung bảng

Chuyển bảng

biểu sang văn

bản và ngược lại

Trang 14

Chia cột, dòng

Sát nhập ô

Xoá các ô

Chia đều dòng, cột

Kích thước

cột đủ ký tự

Kiểm tra và thiết lập lại Chèn

bảng biểu

Trang 15

4 Chuẩn bị hình ảnh tĩnh và động đẻ đưa vào trang web

a- Các File tranh, ảnh động và tĩnh

- Các file tranh ảnh có đôi là GIF, JPG, ảnh động có đuôi là GIF

- File có đuôi là PNG hỗ trợ nhiều chương trình, nhưng không tất cả

Trang 16

2- Kích chuột phải vào bức tranh, ảnh - Chọn save picture

3- Mở vào thư mục ảnh tĩnh để lưu lại 4- Đặt tên ở File name

5- Save

- Cách sao chép bức tranh động,

tĩnh khác tương tự

Trang 17

c- Sao chép theo trực tiếp các tranh, ảnh vào 2 thư mục

- Mở ổ đĩa – thư mục có tranh ảnh muốn lấy – sao chép chúng vào

2 thư mục Ảnh tĩnh, Ảnh động

- Cách sao chép

này lỗi, thì phải

dùng cách

Trang 18

Công cụ sửa

Công

cụ màu

Ẩn hiện t.mục ảnh

Xoay hình

Khung hình

Độ ảo

Cắt xén

Kích thước

Ảnh sửa

Trang 19

I Định dạng mô hình cấu trúc trang web

II Xây dựng cấu trúc cho file tiêu đề

III Xây dựng cấu trúc file nội dung

Chương 3:

Xây dựng bố cục trang web

trên FrontPage

Trang 20

0

I Định dạng mô hình cấu trúc trang web

1- Chọn mô hình trang web theo mẫu

a- Chọn mẫu trang web

- File - New - Trong New ta chọn kiểu ( ví dụ: Header )

6 OK

Trang 21

b- Chọn thiết lập xây dựng trang web

- Chọn thiết lập ( nên chọn New để tạo mới - rồi nhấn Save )

Chọn Set để tạo liên kết đến mẫu đã có

Chọn New để tạo mới

Chọn Set để tạo liên kết đến mẫu đã có

Trang 22

2

c- Lưu lại mô hình cấu trúc trang web

- Chọn thư mục chính đã tạo để lưu lại ( Tên cho file tiêu đề )

- Ví dụ: Đặt tên file là Header ở dòng Name - Nhấn Save

Trang 23

Lưu lại mô hình cấu trúc trang web ( tiếp )

- Chọn thư mục chính đã tạo để lưu lại ( Tên cho file nội dung )

- Ví dụ: Đặt tên file là center ở File Name - Save

Trang 24

4

Lưu lại mô hình cấu trúc trang web ( tiếp )

- Chọn thư mục chính đã tạo để lưu lại ( Tên cho file trang chủ )

- Ví dụ: Đặt tên file là trangchu (index) ở dòng Name - Nhấn Save

Trang 25

d- Điều chỉnh các frame

- Kích phải chuột vào frame muốn điều chỉnh – frame propertes

2 Ẩn thanh cuốn

1 Từ khung đến nội dung

5 Hiện, ẩn khung

4 Khoảng cách giữa các fame

3 Chọn

6 Chọn

7 Chọn Chọn nếu cho người

duyệt chỉnh khung

Trang 26

3 Chọn

Trang 27

b- Tạo khung bằng bảng biểu

Trang 28

8

II- Tạo truy cập kiểm tra web khi đang xây dựng

1- Tạo đường dẫn truy cập

- Start – Setting – Control panel

1.Phải chuột

2.New

3.Virtual Directory 4.Chọn next - nhập tên truy cập

5.Next

6

7.Chọn thư mục Website

8

Trang 29

2- Tạo truy cập đến file chủ mặc định

2.Properties 1.Phải chuột

6.Chọn

7.Chọn

Trang 30

0

3- Truy cập đến trang website

- Mở trình duyệt - Nhập đường dẫn đến trang web (http://maychu/Website/Trangchu.htm)

(http://192.168.0.1/Website/Trangchu.htm)

Nhâp đường dẫn

Trang 31

III Xây dựng cấu trúc cho file tiêu đề

1- Mở File tiêu đề

- Vào thư mục chính - chọn file trang tiêu đề (header.htm)

Các thành phần trong thư mục chính đang có

- Kích chuột phải vào Header - chọn Edit

Trang 32

2

2- Sử dụng bảng biểu xây dựng cấu trúc cho trang tiêu đề

- Đặt dấu nhắc nơi bắt đầu

- Chọn Table - chọn Insert - table

- Chọn thông số như hình bên - OK

- Đặt dấu nhắc trong ô vữa tạo

- Chọn Table - chọn Insert - Table

Trang 33

3- Tạo dòng danh mục liên kết của trang web

Chọn dòng thứ 2 trong bảng vừa tạo

- Chọn Table – Split cells - Chọn số cột -

Trang 34

- Chọn Format - Borders and Shading

Trang chủ Trang tin Trang thơ Tin học Liên kết Phần mềm Sản phẩm

Chọn màu kiểu khung ở Borders

Trang 35

5- Tạo hình ảnh, Font chữ cho tiêu đề trang web

Đặt dấu nhắc vào dòng 1 trong bảng

- Kích biểu tượng Insert Picture From File

1 2

Sở Tài Chính Phú Thọ

1 Chọn file tranh trong thư mục ảnh tĩnh

3 Chọn

nhập

tiêu đề

2 Chọn Ok

4 Tiêu đề

Trang 36

6

Tạo hình ảnh, Font chữ cho tiêu đề trang web (tiếp)

Đặt dấu nhắc ở cạnh phải tranh - Insert - Picture - From File

Sở Tài Chính Phú Thọ

1 Chọn file tiêu đề trong thư mục tiêu đề

2 Chọn Ok

Trang 37

6- Định dạng kích thước hình ảnh tiêu đề trang web

Kích chuột phải vào 1 - Picture properties

- Ta cũng có thể chỉnh

trực tiếp trên hình ảnh

Trang 38

8

7- Định dạng kích thước bảng biểu cho tiêu đề trang web

Kích chuột phải vào 1 - Table properties

Trang 39

8- Định dạng lề hình ảnh, tiêu đề, nội dung đến cạnh của ô

Kích chuột phải vào 1 - chọn Paragraph

Vị trí danh giới trái

Vị trí danh giới phải

Vị trí danh giới trên

Vị trí danh giới dưới Xong nhấn OK

Trang 41

10- Định dạng các thuộc tính của trang web

Kích chuột phải vào 1, 2 - Page properties (File – propertíe)

Chọn màu nền Chọn màu văn bản

Màu liên kết chưa dến Màu liên kết đã đến

Chọn màu, hình ảnh nền dựa vào trang khác

Trang 42

2

11- Tạo nền bảng biểu là tranh ảnh để làm ảnh tiêu để

- Đánh dấu ô muốn tạo của bảng biểu

-Chọn Format - Borders and Shading – Shading - Browse

( kích thước tranh có độ lớn bằng hoặc lớn hơn ô chọn)

2 Chọn tranh

4 Chọn

Trang 43

IV Xây dựng cấu trúc file nội dung

1- Mở File nội dung (center)

- Vào thư mục chính - chọn file trang tiêu đề (center.htm)

Các thành phần trong thư mục chính đang có

- Kích chuột phải vào Center - chọn Edit

Trang 44

4

2- Sử dụng bảng biểu để xây dựng cấu trúc trang nội dung

1 Đặt dấu nhắc nơi bắt đầu

- Chọn Table - chọn Insert - table

2 Đặt dấu nhắc trong ô vữa tạo

- Chọn Table - chọn Insert - Table

- Chọn thông số như hình dưới - OK

Trang 45

3- Tạo khung nền bảng biểu cho file nội dung trang web

- Chọn phần bảng biểu muốn tạo

- Format - Borders and Shading

- Chọn khung ở Borders

- Chọn nền ở Shading

Trang chủ Trang tin Trang thơ Tin học

Sở Tài Chính Phú Thọ

Trang 46

6

4- Thao tác, định dạng trang web không theo mẫu

- Tương tự như các thao tác trước (Bảng biểu, hình ảnh, font)

- Khác là chỉ xây dựng trên một trang duy nhất (cả trang tiêu đề

và trang nội dung)

Trang nội dungCuối trang

Tiêu đề

Trang 47

I- Các nút liên kết trang web và các tiêu mục II- Chèn tranh ảnh và các tiêu mục vào trang web III- Định dạng font chữ và hình ảnh trang web

Chương 4:

Xây dựng các thành phần

của trang web

Trang 49

2- Tạo các nút liên kết bằng chương trình Xara WebStyle

1 Chọn NavBars menus

2 Chọn kiểu

3

font chữ

4 Màu chữ, nút

8 Ghi lại

Trang 50

7 Vào thư mục nutweb đã tạo

9 Nhấn Save

8 Đặt tên

Trang 51

3- Tạo các tiêu mục nội dung bằng Xara WebStyle

1 Chọn

Headings

3

font chữ

7 Kích thước 8 Ghi lại

6 Tạo bóng

4 Màu chữ, nút

5 Màu nền

2 Chọn kiểu

Trang 52

7 Vào thư

mục ảnh tĩnh

9 Nhấn Save

8 Đặt tên

Trang 53

4- Tạo các đầu mục động bằng Xara WebStyle

1 Chọn

Banner Ads font 3

chữ

7 Kích thước

8 Ghi lại

6 Tạo bóng

4 Màu chữ

5 Màu nền

2 Chọn kiểu

Trang 54

7 Vào thư

mục ảnh động

9 Nhấn Save

8 Đặt tên

Trang 55

5- Đưa các nút liên kết vào File nội dung

1 Kẻ bảng biểu nơi tạo nút

2 Đặt dấu nhắc vào từng ô

3 Kích biểu tượng Insert Picture From File

4 Kích chọn tên nút

trong thư mục nutweb

Trang chủ

Trang 56

3 Dynamic HTML

2 Format

1 Kích chọn nút muốn tạo hiệu ứng

7 Kích chọn tên nút trong thư mục nutweb VD: nut_b1_over

8 Nhấn OK

9 Nhấn X

Chiều rộng 130

Trang 57

7- Tạo các nút liên kết từ công cụ FrontPage

Trang chủ

1 Kích chọn nơi muốn tạo nút kết nối

- Kích chọn nơi muốn tạo nút

- Insert - Component - Hover Button

2 Nhập tên nút 3 Chọn Font, màu chữ

4 Chọn Liên kết

5 Màu nút

6 Hiệu ứng

7 Màu hiệu ứng, nền

- Kích chuột phải vào nút

- Chọn Hover button để sửa

Trang 58

8

8- Tạo các nút liên kết từ bảng biểu FrontPage

- Chọn vùng – Format – Borders Shading

Trang 59

II- Chèn tranh ảnh và các tiêu mục vào trang web

1- Tạo bảng biểu để chèn hình ảnh và tiêu mục

Trang chủ Trang chủ Trang chủ Trang chủ Trang chủ Trang chủ Trang chủ Trang chủ Trang chủ Trang chủ Trang chủ Trang chủ

2 Kích Insert table

- chọn số cột, dòng

3 Kích Draw table

- kẻ cột, kẻố dòng

Trang 60

2 Chọn file trong thư mục ảnh tĩnh, động

3 Nhấn OK

Chiều rộng 130

Trang 61

3- Sửa hình ảnh, tiêu mục cho trang web

Kích chuột vào hình ảnh, tiêu mục

- Ta cũng có thể chỉnh trực tiếp trên hình ảnh

1 Nhấn

Chỉnh độ sáng, tương phản

Cắt bỏ bớt hình ảnh

Trang 62

Ẩn hiện ảnh lên font chữ

Xoay hình ảnh

Chỉnh độ sáng, tương phản

Cắt bỏ bớt hình ảnh

Xoá màu, Chuyển JPEG sang GIF

Màu sang đen trắng

Chuyển ảo hình ảnh

Tạo hiệu ứng 3d trên các cạnh

Lưu lại thay đổi

Chọn phần làm liên kết

Khôi phục lại

- Tránh dùng công cụ trên các thanh Drawing và chỉnh hình trong officel, bởi vì nó tạo ra hình ảnh VMP không phổ biến trong trình duyệt

- GIF, JPEG phổ biến trong trình duyệt, GIF thường dùng ảnh động, JPEG nên dùng cho ảnh tĩnh để tuy xuất web nhanh hơn

Trang 63

5- Định dạng hình ảnh và tiêu mục trong trang web

- Kích chuột phải vào hình ảnh và tiêu mục muốn định dạng

1 Chọn

2 Picture định

dạnh kích thước

2 Paragrap định dạnh gianh giới

4 Chọn

Trang 64

4

6- Định dạng vị trí hình ảnh trong nội dung văn bản

- Mơì các bạn đến với trang web của chúng tôi

Chọn hình ảnh muốn định dạng

- Chọn hình ảnh

- Format - Position

Chỉnh kích thước Chỉnh

các lề OK

Trang 65

III- Sao chép sửa chữa hình ảnh trên cửa sổ

1- Lấy một phần hình ảnh từ chương trình Paint

- Mở cửa sổ muốn sao chép

- Nhấn phím Print Scrn

+ Mở cửa sổ chương trình Paint+ Edit - Paste

- Chọn và sao chép phần hình ảnh cần lấy, dán vào trang web

2- Chọn hộp thoại và cửa sổ trực tiếp

- Nếu Lấy một hộp thoại

+ Mở hộp thoại+ Nhấn Alt + Print Scrn+ Chọn Paste dán vào trang web

3- Chọn sửa tranh ảnh từ nút Crop trên thanh Picture

Trang 66

Chọn

kiểu

Trang 67

5- Tạo khung viền bằng hình ảnh

- Tạo bảng biểu như sau

Tạo bảng biểu

Nội dung

Chèn

hình

ảnh

Trang 68

8

6- Tạo chữ kiểu Drop cap

- Tạo chữ cái dạng tranh ảnh – Dán vào nội dung như dưới đây

ước Mỹ ngày nay và nước Mỹ ngày xưa, đó là chủ đề của các nhà nghiên cứu khoa học xã hội đang q tâmước Mỹ ngày nay và nước Mỹ ngày xưa, đó là chủ đề của các nhà nghiên cứu khoa học xã hội đang q tâmước Mỹ ngày nay và nước Mỹ ngày xưa, đó là chủ đề của các nhà nghiên cứu khoa học xã hội đang q tâmước Mỹ ngày nay và nước Mỹ ngày xưa, đó là chủ đềcủa các nhà nghiên cứu khoa học xã hội đang q tâm ước Mỹ ngày nay và nước Mỹ ngày

xưa, đó là chủ đề của các nhà nghiên cứu khoa học xã hội đang q

tâmước Mỹ ngày nay và nước Mỹ ngày xưa, đó là chủ đề của các nhà nghiên cứu khoa học xã hội đang q tâm

Trang 69

IV- Định dạng font chữ trang web

1- Font chữ sử dụng trên trang web

- Bộ mã tiếng việt 16 bít Unicode

+ Time New Roman, Arial

- Các chương trình gõ tiếng Việt: ABC, Vietkey, Unikey… Hiện nay bộ gõ Vietkey đang được sử dụng rộng rãi

Chọn cách gõ Unicode khi dùng font chữ Unicode

Chọn cách gõ TCVN3 khi dùng font chữ ABC

Chọn chế độ gõ tiếng Việt hoặc tiếng Anh (Alt+Z)

Hiện cửa sổ Vietkey để thiết lập kiểu gõ (TELEX, VNI), các tuỳ chọn, thông tin…

Trang 71

3- Định dạng font chữ theo vùng

- Mơì các bạn đến với trang web của chúng tôi

1 Đánh dấu nội dung muốn định dạng

- Đánh dấu đoạn nội dung muốn

Trang 72

2

I Các vấn đề liên quan trên trang web

II Liên kết các trang web

Chương 5:

Kết nối và liên kết trên các

trang web

Trang 73

I Các vấn đề liên quan trên trang web

1- Tạo hình ảnh xem trước

- Tools – Page options – Auto Thumbnail

Trang 74

4

2- Tạo các trang web khác có định dạng tương tự

- Mở File nội dung Center.htm từ FrontPage

- File - Save as - Chọn thư mục chính - Đặt lại tên - Save

- Mơì các bạn đến với trang web của chúng tôiMở File nội dung Center.htm từ FrontPage

Mở File nội dung Center.htm từ FrontPageMở File nội dung Center.htm từ FrontPage

Mở File nội dung Center.htm

Mở File nội dung Center.htm từ FrontPage

Mở File nội dung Center.htm Mở File nội dung Center.htm từ FrontPage

- Mơì các bạn đến với trang web của chúng tôiMở File nội dung Center.htm từ FrontPage

Mở File nội dung Center.htm từ FrontPageMở File nội dung Center.htm từ FrontPage

Mở File nội dung Center.htm Mở File nội dung Center.htm từ FrontPage

Mở File nội dung Center.htmMở File nội dung Center.htm từ FrontPage

Định dạng
Số trang	160
Dung lượng	3,67 MB