Xây dựng Web

Tạo các thư mục lưu trữ trang web1- 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

Trang 2

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

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

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 4

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

Trang 5

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

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 tho

Trong nuoc Ngoai nuoc

Trang tin Lien ket

Kien thuc

He thong ung dung

Phan m em

Tin hoc Phan m em

Tieu dung Cong nghiep

San pham Danh ngon

Trang chu

C¸c th«ng tin qu¶ng b¸ gií i thiÖu

Ví dụ: Sơ đồ bố cục website

Trang 10

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:+ Anhdong: Để lưu ảnh động

+ Anhtinh: Để lưu tranh ảnh tĩnh

+ Nutweb: Để lưu các nút

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

Trang 12

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

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

b- Sao chép theo lựa chọn các tranh, ảnh vào 2 thư mục

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

b-5 Sửa chữa tranh ảnh tĩnh để đưa vào trang web

- Sử dụng trình sửa ảnh PhotoFiltre

Tranh ảnh trong thư mục

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

Chương 3:

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

trên FrontPage

Trang 20

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

- 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

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

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

2- Xây dựng trang web từ cửa sổ frontpage

a- Định dạng trang

1 Lề trên,

lề trái

2 Chọn Multilingual [UTF-8]

3 Chọn

Trang 27

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

Trang 28

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.Ne w

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.Propertie

s 1.Phải chuột

6.Chọn

7.Chọn

Trang 30

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

4- Tạo khung nền bảng biểu cho tiêu đề trang web

Chọn dòng thứ 2 trong bảng

- 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 Chọn màu nền

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

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

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

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 40

9- Định dạng lề trang

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

- Chọn trang margins

1 2

Chọn lề trên (nên chọn 0) Chọn lề trái ( nên để mặc định, không chọn)

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 trang Background

1 2

Font hiện khi có chuột qua

Màu liên kết đã chọn

Trang 42

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

1 Chọn 3 Chọn

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

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

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 dung Cuối trang

Tiêu đề

Trang 47

Chương 4:

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

của trang web

Trang 48

1- Cài đặt chương trình Xara WebStyle

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

Ghi lại các nút liên kết

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

9 Nhấn Save

8 Đặt tên

Trang 51

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

Ghi lại tiêu mục nội dung

7 Vào thư

mục ảnh tĩnh

9 Nhấn Save

8 Đặt tên

Trang 53

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

Ghi lại đầu mục động

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

6- Tạo hiệu ứng cho các nút liên kết

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

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

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 hình ảnh và tiêu mục

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

4- Thanh công cụ Pictures trong FrontPage

Ẩ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

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

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

4- Sao chép sửa tranh ảnh từ chương trình Snagit

Chọn chụp hình

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

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

Tiêu đề	Xây dựng web
Tác giả	Nguyễn Đình Thắng
Trường học	TTGDTX Tỉnh Phú Thọ
Thể loại	tiểu luận
Thành phố	Phú Thọ

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

Xây dựng Web

Nhập danh mục vào từn gô

Liên kết các trang web