Thiết kế Web site
trên FrontPage
Nguyễn Đình Thắng
TTGDTX tỉnh Phú Thọ
Email: thangchd@yahoo.com
Điện thoại: 0210.843726
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
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
II. Khởi động và thoát khỏi chương trình FrontPage
1/Khởi động:
- Start – Program
- Microsoft FrontPage







2/Thoát:
- Nhấn nút góc phải trên
- Hoặc File - Exit
- Hoặc Alt + F4
Nhấn nút X góc phải trên
Microsoft FontPage
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
Thanh Standa
Formatting
Hộp đk cửa sổ
Chế độ cửa sổ soạn thảo HTML
Hiện thị nội dung đã soạn thảo
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ây và cửa sổ con
Xem trình duyệt
Sao chép địn dạng
Tạo các thành phần
Mở file đã có
Đưa lên web server
Lệnh in
Chính tả
Di chuyển sao chép
Bảng biểu
Chèn tranh ảnh
Liên kết
kiểu định dạng
Font chữ
cỡ chữ
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
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
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
Yêu cầu bố cục của website ( tiếp )
Ví dụ: Sơ đồ bố cục website
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
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
III. Bảng biểu và tranh ảnh trong cấu trúc trang web
1- Cách tạo bảng biểu
- Đặt dấu nhắc nơi tạo - Table trên menu - chọn Insert - table
Chọn số dòng
Chọn số cột
Vị trí bảng biểu
Nét khung của bảng
Khoảng cách giữa các ô
Khoảng cách nội dung đến cạnh ô
Độ rộng cột
Kích thước bảng biểu
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
3- Sử dụng công cụ bảng biểu
- Chọn Table xuất hiện menu công cụ
Bút kẻ
Chèn dòng
Chèn cột
Chia cột, dòng
Nội dung ở giữa
Chia đều dòng, cột
Xoá nét kẻ
Xoá các ô
Sát nhập ô
Nội dung lên trên
Màu nền
Kích thước cột đủ ký tự
Bút kẻ
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
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ả
b- Sao chép theo lựa chọn các tranh, ảnh vào 2 thư mục
1- Kích đúp bức tranh, ảnh muốn sao chép trong thư mục nguồn
- Bức tranh, ảnh được mở trong Internet Explorer
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ự
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 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
Độ sáng và độ tương phản
Xem thử
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
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 )
2. New
1. File
3. Page
5. Chọn kiểu
4. Chọn Frames Pages
6. OK
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 New.. để tạo mới
Chọn Set.. để tạo liên kết đến mẫu đã có
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
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
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
- Tất cả các file được lưu kiểu file có đuôi là HTM
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
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
b- Tạo khung bằng bảng biểu
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
2- Tạo truy cập đến file chủ mặc định
2.Properties
1.Phải chuột tên truy cập
(tainguyen)
3.Chọn
4.Chọn
5.Tên file danh sách
6.Chọn
7.Chọn
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
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
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
- Chọn thông số như hình bên - OK
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 - OK
Trang chủ
Trang tin
- Nhập danh mục vào từng ô
- Chọn màu chữ ở font color thanh Drawing
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 ở Shading
Chọn dòng thứ 1 trong
Chọn Format - Borders and Shading
- Chọn khung ở Borders
1
2
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
Trang chủ
Trang tin
Trang thơ
Tin học
Liên kết
Phần mềm
Sản phẩm
1
2
Trang chủ
Trang tin
Trang thơ
Tin học
Liên kết
Phần mềm
Sản phẩm
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 đề
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
Trang chủ
Trang tin
Trang thơ
Tin học
Liên kết
Phần mềm
Sản phẩm
Sở Tài Chính Phú Thọ
1. Chọn file tiêu đề trong thư mục tiêu đề
Trang chủ
Trang tin
Trang thơ
Tin học
Liên kết
Phần mềm
Sản phẩm
2. Chọn Ok
3. Chọn chèn
4. Kéo Tiêu đề vào
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
- Chọn trang Appearance
1
2
Trang chủ
Trang tin
Trang thơ
Tin học
Liên kết
Phần mềm
Sản phẩm
Sở Tài Chính Phú Thọ
Chọn kích thước chiều rộng tranh, ảnh ở Width (vd: 752)
- Ta cũng có thể chỉnh trực tiếp trên hình ảnh
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
1
2
Trang chủ
Trang tin
Trang thơ
Tin học
Liên kết
Phần mềm
Sản phẩm
Sở Tài Chính Phú Thọ
Kích thước chiều rộng bảng biểu (vd: 97%)
Chọn 0 cho tất cả
Chọn 0
Chọn
Ok
- Xem kỹ chương 1
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
1
2
Trang chủ
Trang tin
Trang thơ
Tin học
Liên kết
Phần mềm
Sản phẩm
Sở Tài Chính Phú Thọ
Định dạng vị trí
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
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
Trang chủ
Trang tin
Trang thơ
Tin học
Liên kết
Phần mềm
Sản phẩm
Sở Tài Chính Phú Thọ
Chọn lề trên (nên chọn 0)
Chọn lề trái ( nên để mặc định, không chọn)
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
Trang chủ
Trang tin
Trang thơ
Tin học
Liên kết
Phần mềm
Sản phẩm
Sở Tài Chính Phú Thọ
Font hiện khi có chuột qua
Màu liên kết đã chọn
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
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
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
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
- Chọn thông số như hình bên - OK
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
Dùng công cụ bảng biểu để tạo khung chính
3 cột
2 dòng
Trong các ô tạo các bảng riêng
Chiều rộng bảng biểu (vd: 100%)
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ọ
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 đề
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
1- Cài đặt chương trình Xara WebStyle
- Phải có chương trình
cài đặt Xara WebStyle
- Thực hiện cài đặt bình
thường theo hướng dẫn
- Chương trình Xara
WebStyle dùng để tạo các
nút web, tiêu đề, các đầu
mục, các font chữ
chuyển động ...
Khởi động Xara WebStyle
- Start - program
- Xara WebStyle

I- Các nút liên kết trang web và các tiêu mục
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
5. Màu nền
6. Tạo bóng
7. Kích thước nút (độ rộng 130)
8. Ghi lại
Ghi lại các nút liên kết
1. Nhấn
2. Chọn
3. Chọn
4. Chọn
5. Chọn 256 color
6. Chọn ghi lại
7. Vào thư mục nutweb đã tạo
9. Nhấn Save
8. Đặt tên
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
Ghi lại tiêu mục nội dung
1. Nhấn
2. Chọn
3. Chọn
4. Chọn
5. Chọn 256 color
6. Chọn ghi lại
7. Vào thư mục ảnh tĩnh
9. Nhấn Save
8. Đặt tên
4- Tạo các đầu mục động bằng Xara WebStyle
1. Chọn Banner Ads
3. font 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
Ghi lại đầu mục động
1. Nhấn
2. Chọn
3. Chọn
4. Chọn
5. Chọn 256 color
6. Chọn ghi lại
7. Vào thư mục ảnh động
9. Nhấn Save
8. Đặt tên
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
VD: nut_b1
5. Nhấn OK
Trang chủ
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
4. Chọn
5. Chọn
6. Chọn
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
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
8. Chiều rộng
8. Chiều cao
9. Tuỳ chọn (thêm hình ảnh, âm thanh
10. OK
- Kích chuột phải vào nút - Chọn Hover button để sửa
8- Tạo các nút liên kết từ bảng biểu FrontPage
- Chọn vùng – Format – Borders Shading
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ủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
1. Đặt dấu nhắc nơi tạo
2. Kích Insert table - chọn số cột, dòng
3. Kích Draw table - kẻ cột, kẻố dòng
2- 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ủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Đặt dấu nhắc nơi muốn chèn hình ảnh và tiêu mục - chọn
1. Đặt dấu nhắc nơi tạo
2. Chọn file trong thư mục ảnh tĩnh, động
3. Nhấn OK
Chiều rộng 130
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
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
1. Nhấn
Chỉnh độ sáng, tương phản
Cắt bỏ bớt hình ảnh
4- Thanh công cụ Pictures trong FrontPage
Đặt font chữ trên hình ảnh
Nút Auto Thumbnail
Đặt hình ảnh lên font chữ
Ẩ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.
5- Định dạng hình ảnh và tiêu mục trong trang web
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
- 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
3. Chọn
4. OK
5. OK
3. Chọn
4. Chọn
6- Định dạng vị trí hình ảnh trong nội dung văn bản
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
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
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
4- Sao chép sửa tranh ảnh từ chương trình Snagit
Chọn chụp hình
Chọn kiểu
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
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
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…
2- Định dạng mặc định font chữ
1. Chọn
2. Chọn
4. Chọn
3. Chọn
5. OK
3- Định dạng font chữ theo vùng
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
1. Đánh dấu nội dung muốn định dạng
- Đánh dấu đoạn nội dung muốn định dạng
- Chọn Font chữ, cỡ chữ, kiểu chữ màu chữ trên thanh công cụ
- Hoặc:
- Format – Font - chọn
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
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
Chọn chiều hình ảnh
Nhập kích thước tạo ra ảnh nhỏ
Tạo đường viền
Tạo cạnh nổi
Nét khung
- Tạo xong chọn tranh ảnh
- Tools - Auto Thumbnail
- Hoặc nhấn nút Auto Thumbnail
trên thanh pictures
Xong OK
Nút Auto Thumbnail
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
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Trang chủ
Sửa, tạo lại nội dung
Sửa, tạo lại nội dung
II. Liên kết các trang web
1- Mục đích của việc liên kết
- Một website bao giờ cũng chữa nhiều liên kết, để từ trang bắt đầu người ta có thể chuyển đến các trang web khác, website khác
- Ta có thể liên kết trang web với các địa chỉ Email, các phần mở rộng của các trang web khác
- Một website được liên kết mở rộng ra các tài nguyên bên ngoài làm cho giá trị của trang web tăng lên
2- Các nút liên kết
- Ta có thể tạo một nút liên kết riêng
- Hoặc sử dụng một đoạn ký tự, một bức tranh hay một phần của bức tranh làm nút liên kết
- Nút liên kết phải bố cục hợp lý, không trùng lặp trong một trang, tiện lợi cho việc sử dụng.
3- Cách tạo liên kết đến các trang web
- Chọn đoạn ký tự, hình ảnh, hoặc một phần của hình ảnh làm nút liên kết đến trang web (nào đó)
- Nhấn nút Insert Hyperlink trên thanh công cụ (Insert - Hyperlink)
1. Nhập đường dẫn đến trang web muốn liên kết (thường là trang ở website khác)
2. Nhấn để chọn kiểu trang web liên kết xuất hiện
1
Cách tạo liên kết (tiếp)
Hoặc nhấn tiếp biểu tượng để chọn tên trang web cần LK
3. Chọn mở trang web liên kết
- Mặc định mở cùng cửa sổ
- New windows mở cửa sổ khác
Chọn trang muốn liên kết
2
3
4
OK
4- Cách tạo liên kết đến các điểm trong một trang web
a- Đặt bootmark:
- Đặt dấu nhắc ở nơi muốn liên kết tới
- Insert - Bootmark

b- Đặt liên kết tới bootmark:
- Chọn nút hoặc nội dung làm nút liên kết:
Ví dụ:
Về đầu trang
- Insert - Hyperlink
Đặt tên top)
Ok
Chuyển đến điểm đã đặt
Chọn tên Bootmark (top)
Ok
Xoá
I. Đưa âm thanh, Phim ảnh vào trang web
II. Tạo các khung Frames Page trong trang web
III. Tạo các hiệu ứng trong trang web
Chương 6:
Âm thanh, phim ảnh và các ứng dụng khác
I. Đưa âm thanh, Phim ảnh vào trang web
1- Đưa âm thanh vào trang web
- Chọn ký tự hoặc hình ảnh làm liên kết âm thanh
- Ví dụ liên kết để mở các bài hát:
Huế thương
Bên ven bờ hiền lương
Người Hà Nội
- Insert - Hyperlink
Nhấn chọn file bài hát
Kích đúp Canhac Chọn bài hát
OK
Có thể đặt thư mục này Trong thư mục chính
2- Tạo âm thanh nền cho trang web
- Tạo thư mục nhạcnen trong My webs để lưu các file nhạc
Kích chuột phải vào trang - Page properties (File – propertíe)
- Chọn trang General
1. Chọn Browse
2. Chọn file âm thanh trong thư mục nhacnen
3. OK
4. OK
Phát liên tục
Số lần phát
3- Đưa phim ảnh vào trang web
- Đặt dấu nhắc tại nơi muốn xuất hiện phim
- Insert - Picture - Video - Chọn file phim - OK
- Kích chuột phải vào nút
vừa tạo – Picture Properties
Nhấn chọn file phim
Hoặc nhấn chọn tìm phim
OK
Số lần lặp lại
Luôn lặp lại
T.gian lặp lại
Mở khi File mở
Mở khi chuột qua
OK
Hoặc đưa phim ảnh vào trang web như sau (it dùng)
- Đặt dấu nhắc tại nơi muốn xuất hiện phim
- Insert - Advance – Plug.in - Nhấn Browse - Chọn file phim - OK
Tên N.dung
K.thước phim
Canh lề
Khung
Khoảng cách phim dến nội dung
OK
4- Đưa lịch vào trang web
- Đặt dấu nhắc tại nơi muốn xuất hiện
- Insert - Advance – Activex control
Chọn
Kích phải chuột - chọn Activex control
để điều chỉnh
II. Tạo các hiệu ứng trong trang web
1- Tạo Marquee - Kích chọn nơi muốn tạo - - Insert - Component - Marquee
1. Nhập nội dung
2. Kích thước
3. Màu nền
4. Tốc độ chạy
Chọn định dạng Font chữ nền khung
Chiều chạy
Vị trí di chuyển
5.OK
2- Tạo quảng cáo
- Kích chọn nơi muốn tạo- Insert
- Component – Banner AdManager
Tạo liên kết
3.Chọn hình
1.Kích thước khung ảnh
2.Đổi hình
OK
4.OK
OK
Tgian dựng hình hình
3- Đếm số người truy cập vào trang web
- Đặt dấu nhắc nơi bắt đầu:
ví dụ: Bạn là quí khách vào trang web này
- Insert - Component - Hitcounter
Chọn kiểu chữ
Chọn số chữ
Chọn OK
4- Chèn giờ hiện tại vào Web
- Đặt dấu nhắc nơi bắt đầu:
- Insert – Date and time
OK
Chọn kiểu thông báo
4- Tạo thay đổi hình ảnh khi chuột đưa tới
- Kích chọn nơi muốn tạo nút
- Insert - Component - Hover Button
Xoá tên
Để automatic
Chiều rộng
Chiều cao
Nhấn nút chọn thêm hình ảnh
Để automatic
Ảnh hiện chính
Ảnh hiện khi có chuột
OK
5- Định nghĩa từ khoá và mô tả trang web
Kích chuột phải vào trang - Page properties (File – propertíe)
- Chọn trang Custom
1. Nhấn Add
2. Nhập định nghĩa danh sách các từ khoá (keyword)
3. Nhập danh sách từ khoá cách nhau bằng dấu phẩy
1. Nhấn Add
2. Nhập Description
3. Mô tả trang web
- Từ khoá để người sử dụng, nhập vào hộp tìm kiếm, khi muốn tìm trang này
I- Tạo các Form trong trang web
II- Chỉnh sửa dặc tính của các trường
III- Xem Form và thu các dữ liệu về
Chương 7:
Tạo các Form trong trang web
I- Tạo các Form trong trang web
1- Bổ sung Form vào một trang
- Insert - Form - Form
- Nhập nội dung và tạo thêm các trường
- Insert - Form - OnLine text box (Scrolling text box, Drop down...)
Ví dụ:
Cho biết nơi làm việc của bạn
Chúng tôi gửi Email cho bạn có được không: Có o Không
2- Bổ sung vào Form các Chech Box, Radio Button
- Đặt dấu nhắc nơi bắt đầu trong khung Form
- Insert - Form - Chech Box
- Hoặc: Insert - Form - Radio Button
Kích đúp chuột
Thay tham số tên
Thay đổi các hành động
OK
3- Bổ sung Form vào một trang có trợ giúp của Wizard
- File - New - Page
- Chọn trợ gíup hoặc sửa mẫu
Chọn mẫu Feedback Form
Chọn Form Page Wizard
II- Chỉnh sửa dặc tính của các trường
1- Drop Down Menu
- Kích chuột phải vào trường
1. Chọn
2. Chọn
3. Nhập danh mục
4. OK
5. OK
Dịch chuyển thứ tự
Độ cao của Menu
Trong một thời điêm có nhiều khách
2- OnLine text box
- Kích đúp chuột trái vào trường
- Nếu nhập vào trường là số
1. Chọn 50
2. OK
1. Chọn 2
2. Chọn
3. số nguyên
4. None
5.Chọn
6. OK
3- Sửa đổi các nút trường
- Kích đúp chuột trái vào trường
Kích chuột phải vào nút
- Form Field Properties
Thay tham số tên
Thay đổi các hành động
OK
- Muốn tạo phím mới: Insert – Form – Push Button
- Sau đó thao tác như trên
Thay tham số Tab
4- Trang xác nhận
- Khi đã nhập thông tin vào Form nhấn Submit ta sẽ thấy trang xác nhận ( có thể do FontPage tạo ra hoặc do ta tự tạo)
- Để ấn định một trang tạo là trang xác nhận
- Kích chuột phải Form
- Form Properties
- Chọn Option
- Chọn
- Nhập địa chỉ của trang muốn làm trang xác nhận
- Ok - Ok
III- Xem Form và thu các dữ liệu về
1- Xem trước một Form nhập liệu
- Kích chuột Page View
- Nhấn Tab để
chuyển qua các mục
Và lựa chọn
- Chọn No nếu huỷ
các lựa chọn
2- Bổ sung khả năng tìm kiếm
- Đặt dấu nhắc nơi bắt đầu
- Insert – Component – Search Form
- Điều chỉnh các thông số - Ok
- Cần phải tính toán lại các siêu liên kết trong Web của mình:
+ Tools – Recalculate Hyperlink
+ Nhấn Yes để bắt đầu
3- Thu thập các dữ liệu từ Form nhập liệu
( Bao gồm: - Địa chỉ Email - Tệp tin text - Ngân hàng dữ liệu )
- Nhấn phải chuột vào menu ngữ cảnh - Chọn Form Properties
- Tìm hiểu các định dạng Email
- Nhập địa chỉ Email
- Để nguyên để lấy thông tin qua text
- Chọn
- Chọn
- Thông điệp Email có bao gồm cả trường không
- Nhập chủ đề
- OK
I. Xuất bản trang web lên mạng Intranet
II. Xuất bản trang Web lên mạng Internet
III. In ấn trang web
Chương 8:
Xuất bản trang web
I. Xuất bản trang web lên mạng Intranet
1- Bổ sung dịch vụ World wide web
1- Kích đúp
3- Kích đúp
2- Kích chọn
4- Kích chọn
5- Ok
- Start - Settings - Control panel - Administrative
2- Đưa trang web lên mạng Intranet
1- Kích chuột phải
2- Chọn
3- Chọn
4- Chọn
5- Nhập tên truy cập
6- Chọn
7- Chọn
8- Chọn thư mục chứa các trang web
9- Ok
Tiếp tục Next - Ok - Finish
Đưa trang web lên mạng Intranet (tiếp)
1- Kích chuột phải vào tên truy cập vừa tạo
2- Chọn
4- Chọn
3- Chọn
5- Nhập tên file chính
6- Ok
7- Ok
Truy cập ta nhập: http://tênmáy/têntruycập Vd: http://10.0.0.1/sotaichinh
II- Xuất bản trang Web lên mạng Internet
1- Không gian Server
- Nếu không muốn thuê bao thì phải có Máy tính mạnh, đường truyền Internet nhanh phục vụ 24/24 và nhiều thứ phức tạp khác.
- Cách tốt nhất là thuê không gian Server của nhà cung cấp dịch vụ hosting, tuỳ thuộc vào website mà được định giá khác nhau.
2- Domain name:
- Là tên miền do nhà cung cấp dịch vụ hosting bán cấp cho
- Phần mở rộng của Domain name là phần đứng sau dấu chấm
Vi dụ: .Vn .ca . org .net .com .co .edu
3- Mua Domain và thuê hosting:
- Để cho mọi người truy cập website cần có domain name và không gian đĩa thuê trên server (hosting)
- Yêu cầu nhà cung cấp tư vấn cho hosting name phù hợp
4- Đăng ký Domain và hosting miễn phí
- Vào trang web http://free.Prohosting.com
- Kích Sign Up Today Zip code: 84 và các thông tin khác
- Nhấn Get an Account mở trang xem thông tin - nhấn continue
- Chọn loại hosting - Chọn Click here to signup
- Nhập vào số hiển thị trong hình ảnh - Nhấn Validate
- Vào lại trang web http://free.Prohosting.com Nhập tên đăng nhập và mật mã vào ô User Number và Password - nhấn Login
- Có thể Upload các file lên server bằng FTP, FTP Server là:
eartha.prohosting.com Subdir là tên Account
- Hoặc có thể sử dụng công cụ đơn giản của trang quản lý, chọn liên kết Web Page Editor
- Nhập mật khẩu để vào lại trang quản lý, tạo trang mới nhấn vào New page - Muốn đưa file lên mạng nhấn nút Upload sửa sai
- Đăng ký xong ta có địa chỉ: http:// eartha.prohosting.com/vidu
5- Tạm hoãn trang Web không đưa lên Internet
- Vào thư mục mở trang chủ
- View - Reports - Publish Status
- Kích chuột phải vào File đó
- Chọn Properties
* Ta có thể xoá bỏ hẳn các trang không đưa lên Server
1- Chọn
2- Chọn
3- Ok
6- Đưa Website lên Internet
- Mở trang chủ - File - Publish Web
Nhập địa chỉ Server web
- Hộp Connect to suất hiện - nhập tên đăng nhập và mật khẩu và nhấn Ok
- Nếu không thấy Frontpage extensions trên server sẽ thông báo lỗi. Liên hệ với nhà cung cấp cài đặt Frontpage extensions
- Khi đăng nhập thành công ta đưa nội dung lên server
- Cửa Website cục bộ bên trái, Cửa sổ server bên phải - Nhấn nút - Publish để đưa tất cả nội dung Hoặc ta chỉ việc sao chép các file được lựa chọn sang
Chọn nhà cung cấp
Duy nhất trang mới hoặc trang thay đổi
Thay mới tất cả
Nhấn thực hiện
Đưa Website lên Internet (tiếp)
- Nếu không có Frontpage extensions trên server ta bỏ dịch vụ này
- Tools - Page Option
1- Chọn
2- Bỏ Chọn
3- Ok
Tính năng do trình duyệt chọn
7- Đưa Website lên Internet bằng Cuteftp
HTML và cấu trúc trang HTML.
Văn bản.
Hình ảnh.
Liên kết.
Bảng.
Khung trang.
Biểu mẫu.
Chương 9:
Xây dựng trang web trên HTML
I. HTML và cấu trúc trang HTML
1- Giới thiệu HTML.
- HTML (Hyper Text Mackup Language) là một ngôn ngữ Web đơn giản.
-Ngôn ngữ HTML sử dụng tập các thẻ (Tag).
Cú pháp:
…
2-Cấu trúc một trang HTML.
a- Cấu trúc một trang HTML.
Cú pháp:

Nội dung trong trang Web


b-Mở đầu trang HTML
- Phần mở đầu bao gồm phần khai báo và phần tên của trang Web.
Cú pháp:



c- Thân trang HTML
- Phần thân trang HTML bao gồm các khai báo về các đối tượng có trên trang Web.
Cú pháp:

Nội dung trang Web

d- Chú thích.
Cú pháp:

Ví dụ 1.






Chào mừng các bạn đến với ASP 3.0


II. Văn bản
1- Tiêu đề trang Web
Cú pháp:
Dòng tiêu đề
Ví dụ 2

Welcome to ASP 3.0

Welcome to ASP 3.0

Welcome to ASP 3.0

Welcome to ASP 3.0

Welcome to ASP 3.0

2. Kiểu chữ
Cú pháp:
Dòng văn bản
Dòng văn bản
Dòng văn bản
Dòng văn bản
Ví dụ 3.





Welcome to ASP 3.0
Welcome to ASP 3.0
Welcome to ASP 3.0
Welcome to ASP 3.0


3. Xử lý Font
a. Xử lý Font Unicode





b. Xử lý font cho đoạn nội dung
Tên Font:
Đoạn văn bản
Màu sắc:
Đoạn văn bản
Cỡ chữ:
Đoạn văn bản
Xử lý Font (tiếp)
Ví dụ 4.






Welcome to ASP 3.0


Welcome to ASP 3.0



4. Nền trang
Màu nền:

Ảnh nền:

Ví dụ 5.






Welcome to ASP 3.0



Ký hiệu màu theo giá trị hexa
5. Xử lý đoạn trong HTML
Xuống dòng:


Xuống dòng và thêm một dòng trắng:

Xuống dòng và thêm một đường kẻ thẳng:

---

Ví dụ 6.






Đây thôn vĩ dạ
Ví dụ 6.(tiếp)

---

Sao anh không về chơi thôn Vĩ?


Nhìn nắng hàng cau nắng mới lên


Vười ai mướt quá xanh như ngọc


Lá trúc che ngang mặt chữ điền?

Gió theo lối gió mây đường mây


Dòng nước buồn thiu, hoa bắp lay


Thuyền ai đậu bến sông trăng đó
Ví dụ 6.(tiếp)


Có chở trăng về kịp tối nay?

    Mơ khách đường xa, khách đường xa


Áo em trắng quá nhìn không ra


Ở đây sương khói mờ nhân ảnh


Ai biết tình ai có đậm đà?

Hàn Mặc Tử


6. Căn lề đoạn văn bản
Căn lề trái:

Đoạn văn bản

Căn lề giữa:

Đoạn văn bản

Căn lề phải:

Đoạn văn bản

III. Hình ảnh
1. Chèn ảnh
Cú pháp:

2. Định vị ảnh so với văn bản
Ảnh canh phía dưới văn bản:

Ảnh ở vị trí giữa so với văn bản:

Ảnh canh phía trên văn bản:

Ví dụ 7



Ví dụ 7.(tiếp)


Welcome to ASP 3.0

---

Ảnh ở vị trí canh dưới so với văn bản

Ảnh ở vị trí canh giữa so với văn bản

Ảnh ở vị trí canh trên so với văn bản

IV. Liên kết
Liên kết với 1 trang Web:

Dòng text hướng dẫn

Liên kết với 1 email-link:

Dòng text hướng dẫn

Ví dụ 8.
Ví dụ 8.(tiếp)

Example 8: Hyperlink

---

Trang tho lang man


Click vao day de viet mail cho toi


V. Bảng trong trang Web
1. Các thẻ cơ bản để tạo bảng
Tạo bảng:

Tạo thêm hàng:

Tạo thêm cột:

Ví dụ 9.

Example 9: Table

Ví dụ 9 (tiếp)

---

Hàng 1, cột 1	Hàng 1, cột 2	Hàng 1, cột 3
Hàng 2, cột 1	Hàng 2, cột 2	Hàng 2, cột 3
Hàng 4, cột 1	Hàng 4, cột 2	Hàng 4, cột 3

2. Độ rộng dài
a. Độ rộng dài của bảng
Cú pháp:

M,N có thể là một giá trị cụ thể hoặc có thể là tỷ lệ phần trăm độ rộng, dài của màn hình.
b. Độ dài, rộng của hàng,cột
Độ cao của hàng:

Độ rộng của cột:

M,N có thể là một giá trị hoặc phần trăm độ dài rộng của bảng.
3. Căn lề
Căn lề theo chiều ngang:

Căn lề theo chiều dọc:

4. Hàng và cột
Muốn hợp N ô trên một hàng:

Muốn hợp N ô trên một cột:

Ví dụ 10.





Ví dụ 10.(tiếp)

Example 10: Table

---

Hàng 1, cột 1	Hàng 1, cột 2-3
Hàng 2, cột 1	Hàng 2-3-4, cột 2	Hàng 2, cột 3
Hàng 3, cột 1		Hàng 3, cột 3
Hàng 4, cột 1		Hàng 4, cột 3

VI. Khung trang
1. Chia theo chiều dọc



…

2. Chia theo chiều ngang



…


Ví dụ 11.









Ví dụ 12.













VII. Biểu mẫu
1. Tạo Form
- Biểu mẫu (Form) là vùng cho phép người duyệt Web nhập dữ liệu.
- Trong một trang Web có thể có nhiều vùng biểu mẫu khác nhau.
Cú pháp:

2. Các công cụ nhập liệu
a. Ô nhập liệu
Cú pháp:

Trong đó:
Name: Tên của ô nhập liệu.
Type:
Password: Ô nhập liệu cho che dấu thông tin.
File: Ô nhập liệu dùng để chọn tên file.
[Normal]: Ô nhập liệu thông thường.
b. Ô nhập liệu nhiều hàng
Cú pháp:

c. Hộp kiểm tra
Cú pháp:

Giá trị của CheckBox là Checked và Unchecked.
d. Nút lựa chọn
Cú pháp:

Giá trị của Radio là giá trị được lựa chọn trong Value.
e. Hộp liệt kê
Cú pháp:

Hiển thị 1
…
Hiển thị n

f. Nút Reset, Submit
Nút Reset:

Nút Submit: