Bài giảng HTML
Chia sẻ bởi Lê Thị Xuân Huyền |
Ngày 26/04/2019 |
94
Chia sẻ tài liệu: Bài giảng HTML thuộc Công nghệ thông tin
Nội dung tài liệu:
1
THIẾT KẾ TRANG WEB
Web Page Designing
2
Mục đích:
Sau khi kết thúc học phần sinh viên có khả năng thiết kế giao diện cho các trang web.
Sử dụng được một số công cụ trong việc thiết kế website.
Biết được cách trang trí và xuất bản một website.
THIẾT KẾ TRANG WEB
Web Page Designing
3
Thời lượng:
20 tiết lý thuyết trên lớp + 25 tiết thực hành.
Tài liệu tham khảo:
THIẾT KẾ TRANG WEB
Web Page Designing
4
Chương I
Tổng quan về trang web
Internet-Mạng máy tính toàn cầu
Mô hình khách chủ
WWW-World Wide Web
Phân loại trang Web
Cấu trúc của một Web Site
Trình duyệt Web
5
Internet-Mạng máy tính toàn cầu
Cơ chế hoạt động:
Internet không có sự điều hành của bất kỳ cơ quan chủ quản, được điều hành trên nguyên tắc chung.
Duy trì sự ổn định và trật tự được quy định từ mỗi mạng thành phần.
Các tổ chức liên quan:
Các trung tâm thông tin InterNIC, APNIC,...
Hiệp hội Internet
Tài nguyên trên Internet:
Các thông tin do chính các mạng thành phần cung cấp
TỔNG QUAN VỀ TRANG WEB
6
Internet-Mạng máy tính toàn cầu
Một số dịch vụ thông tin phổ biến trên Internet:
Thư điện tử
FTP (File Transfer Protocol) là dịch vụ truyền tập tin truyền và nhận tập tin từ máy tính này sang máy tính khác.
Dịch vụ Web
Ngoài ra, còn nhiều dịch vụ thú vị khác cũng đang khá phổ biến trên Internet:
Nói chuyện, trao đổi trên mạng và hội nghị trên mạng.
Dịch vụ điện thoại và Fax.
TỔNG QUAN VỀ TRANG WEB
7
Mô hình khách chủ
Mụ hỡnh ?ng d?ng 2 l?p
Uu di?m
DL t?p trung, nh?t quỏn.
Chia s? cho nhi?u ngu?i.
Khuy?t di?m
x? lý tra c?u, c?p nh?t dl
? Database Server, nh?n k?t
qu?, hi?n th? ph?i du?c th?c
hi?n ? Client -> Khú khan d? b?o trỡ v� nõng c?p.
Kh?i lu?ng d? li?u truy?n trờn m?ng l?n chi?m d?ng du?ng truy?n, thờm gỏnh n?ng cho Database Server.
TỔNG QUAN VỀ TRANG WEB
8
Mô hình khách chủ
Mụ hỡnh ?ng d?ng 3 l?p
Uu di?m
H? tr? nhi?u ngu?i dựng
Gi?m b?t x? lý cho Client
->Khụng yờu c?u mỏy tớnh ? Client cú c?u hỡnh m?nh.
X? lý nh?n, hi?n th? v� truy c?p d? li?u t?i Application Server-> d? qu?n lý, b?o trỡ v� nõng c?p
Khuy?t di?m
Ph?i s? d?ng thờm m?t Application Server -> Tang chi phớ.
TỔNG QUAN VỀ TRANG WEB
9
TỔNG QUAN VỀ TRANG WEB
WWW-World Wide Web
WWW được xây dựng theo mô hình khách chủ. phía máy chủ được gọi là WebServer, phần phía máy khách gọi là WebBrowser, chúng giao tiếp thông qua giao thức truyền thông chuẩn HTTP.
10
TỔNG QUAN VỀ TRANG WEB
Phân loại trang Web
Mỗi ứng dụng Web tồn tại hai loại trang Web:
Trang Web tĩnh: Được thiết kế bằng các thẻ HTML và kịch bản trên máy khách (Client Script).
Trang Web động: Được thiết kế bằng kịch bản trên máy chủ (Server Script) và sử dụng cơ sở dữ liệu trong các trang web.
11
Cấu trúc của một Web Site
Một số cấu trúc cho tập hợp các trang Web:
Cấu trúc phân cấp
TỔNG QUAN VỀ TRANG WEB
12
Cấu trúc của một Web Site
Một số cấu trúc cho tập hợp các trang Web:
Cấu trúc tuyến tính
TỔNG QUAN VỀ TRANG WEB
13
Cấu trúc của một Web Site
Một số cấu trúc cho tập hợp các trang Web:
Cấu trúc tuyến tính với các nhánh
TỔNG QUAN VỀ TRANG WEB
Trang chủ (Home Page)
14
Cấu trúc của một Web Site
Một số cấu trúc cho tập hợp các trang Web:
Kết hợp cấu trúc tuyến tính và cấu trúc phân cấp
TỔNG QUAN VỀ TRANG WEB
15
Trình duyệt Web
Một số trình duyệt web đang sử dụng rộng rãi.
TỔNG QUAN VỀ TRANG WEB
16
Chương II
HTML – HyperText Markup Language
Giới thiệu
Tạo một trang Web bằng HTML
Các thẻ định dạng cấu trúc tài liệu
Các thẻ định dạng khối
Các thẻ định dạng danh sách
Các thẻ định dạng ký tự
Liên kết tài liệu trên Web
Các thẻ chèn âm thanh, hình ảnh
Các thẻ định dạng bảng biểu
FORM
17
Giới thiệu
Ngôn ngữ định dạng siêu văn bản HTML (HyperText Markup Language) là một ngôn ngữ đơn giản, khá mạnh cho phép tạo ra các trang Web, sử dụng hàng loạt các thẻ chuẩn, hoặc mã cũng như các quy ước cho phép tạo các thành phần của trang Web.
Có khoảng trên 120 thẻ đã được định nghĩa sẵn. Thẻ HTML có hai loại cơ bản sau:
Thẻ mang thông tin (container tag): gồm có hai phần, thẻ mở và thẻ đóng. Có dạng sau:dữ liệu . Ví dụ: Welcome to HTML
Thẻ rỗng (empty tag): là thẻ dùng để thực hiện một chức năng nào đó. Thí dụ: thẻ
, dùng để ngắt dòng và bắt đầu ký tự tiếp theo trên dòng tiếp theo
HTML - HyperText Markup Language
18
Trang web du?c t?o b?ng HTML
Để tạo một tài liệu HTML, có thể sử dụng trình soạn thảo WordPad của Windows hay m?t s? pần mềm hỗ trợ thiết kế web.
Cấu trúc tài liệu HTML cơ bản gồm có cấu trúc sau:
HTML - HyperText Markup Language
Tiêu đề của tài liệu
... Nội dung của tài liệu
19
Các thẻ định dạng cấu trúc tài liệu
Thẻ HTML: Cặp thẻ này được sử dụng để xác nhận tài liệu được soạn thảo là tài liệu HTML. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này. Cú pháp:
Trình duyệt sẽ xem các tài liệu không sử dụng thẻ như những tệp tin văn bản bình thường.
HTML - HyperText Markup Language
... Toàn bộ nội dung của tài liệu được đặt ở đây
20
Các thẻ định dạng cấu trúc tài liệu
Thẻ BODY: Để xác định phần nội dung chính của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu...
Cú pháp:
HTML - HyperText Markup Language
.... phần nội dung của tài liệu được đặt ở đây
21
Các thẻ định dạng cấu trúc tài liệu
Thẻ HEAD: Được dùng để xác định phần mở đầu cho tài liệu. Cú pháp:
Thẻ TITLE: Cặp thẻ này được dùng trong phần mở đầu của tài liệu, nhằm cung cấp tiêu đề của trang web. Cú pháp:
HTML - HyperText Markup Language
... Phần mở đầu (HEADER) của tài liệu được đặt ở đây
Tiêu đề của tài liệu
... Phần mở đầu (HEADER) của tài liệu được đặt ở đây
Tiêu đề của tài liệu
22
Các thẻ định dạng cấu trúc tài liệu
Định nghĩa thẻ BODY:
Trong đó:
URL: là địa chỉ của một Web site http:// hoặc ftp:// hoặc tên tập tin ảnh *.GIF, *.JPG, *.BMP.
Color: là thuộc tính màu, có dạng: #NNNNNN với N từ 0..F (#800000: màu đỏ), hoặc tên màu đã được định nghĩa: RED, Blue,...
BACKGROUND=url: chỉ định ảnh nền cho trang Web
BGCOLOR=color: chỉ định màu nền cho trang Web
HTML - HyperText Markup Language
23
Các thẻ định dạng cấu trúc tài liệu
LEFTMARGIN=n: chỉ định lề trái, n là số nguyên dương tính theo pixel
VLINK=color: chỉ định màu cho trang Web khi chưa được duyệt
TEXT=color: chỉ định màu văn bản trong trang Web
TOPMARGIN=n: chỉ định lề trên, n là số nguyên dương tính theo pixel
ALINK=color: chỉ định màu cho trang Web khi đã được duyệt.
Ví dụ định nghĩa thẻ Body:
HTML - HyperText Markup Language
24
Các thẻ định dạng khối
Thẻ
HTML - HyperText Markup Language
25
Các thẻ định dạng khối
Vẽ đường thẳng nằm ngang. Cú pháp:
Trong đó:
ALIGN: Canh lề.
COLOR: Đặt màu cho đường thẳng
NOSHADE: Không có bóng
SIZE: Độ dày của đường thẳng
WIDTH: Chiều dài (tính theo pixel hoặc % của bề rộng cửa sổ trình duyệt).
HTML - HyperText Markup Language
26
Các thẻ định dạng khối
Thẻ xuống dòng BR: Thẻ này không có thẻ kết thúc tương ứng (), có tác dụng chuyển sang dòng mới.
Thẻ PRE: Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ
? Kết quả:
Đây là mục 1 trong danh sách.
Đây là mục 2 trong danh sách
HTML - HyperText Markup Language
29
Các thẻ định dạng danh sách
Danh sách có sắp xếp (Ordered List): Danh sách này có kiểu Number. Cú pháp:
trong đó:
TYPE =1: Các mục được sắp xếp theo thứ tự 1, 2, 3...
=a: Các mục được sắp xếp theo thứ tự a, b, c...
=A: Các mục được sắp xếp theo thứ tự A, B, C...
=i: Các mục được sắp xếp theo thứ tự i, ii, iii...
=I: Các mục được sắp xếp theo thứ tự I, II, III...
HTML - HyperText Markup Language
30
Các thẻ định dạng ký tự
Các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch chân... cho các ký tự, văn bản khi được thể hiện trên trình duyệt.
... , ... : In chữ đậm
... , ... :In chữ nghiêng
... : In chữ gạch chân
... , ... :In chữ bị gạch giữa.
... : Định dạng chỉ số trên (SuperScript)
... : Định dạng chỉ số dưới (SubScript)
Ví dụ: H2SO4: hiển thị H2SO4
HTML - HyperText Markup Language
31
Các thẻ định dạng ký tự
Trong đó:
SIZE=n: chỉ kích thước văn bản, n từ 2 đến 7. Giá trị mặc định là 3.
COLOR=color: màu văn bản
FACE=name: Tên Font
HTML - HyperText Markup Language
32
Các thẻ định dạng ký tự
: chỉ định Font, kích thức, màu văn bản. Định nghĩa thẻ như sau:
Thêm dấu "+" hay "-" trước n dùng tăng hoặc giảm kích thước so với kích thước đã chỉ định tại thẻ BASEFONT
Ví dụ:
Kích thước văn bản là 5
HTML - HyperText Markup Language
33
Các thẻ định dạng ký tự
Căn lề văn bản trong trang Web: Các thẻ định dạng P, Hn,... đều có tham số ALIGN dùng căn lề các văn bản nằm trong phạm vi giới hạn của các thẻ đó. Các giá trị cho tham số ALIGN: LEFT, CENTER, RIGHT
Có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản. Cú pháp:
Sử dụng màu sắc trong thiết kế các trang Web: Một số giá trị màu cơ bản (Tham khảo trong giáo trình).
HTML - HyperText Markup Language
Văn bản sẽ được căn giữa trang
34
Liên kết tài liệu trên Web
Quy tắc đặt tên đó là URL (Universal Resource Locator-Định vị nguồn tài nguyên):
http://selab.vnuh.edu.vn/~dir1/dir2/dir3/index.HTML
Để tạo ra một siêu văn bản chúng ta sử dụng thẻ . Cú pháp:
TITLE = title TARGET = _blank / _self>...siêu văn bản
HTML - HyperText Markup Language
35
Làm việc với FRAME
Thẻ FRAMESET: Tài liệu FRAMESET (Frameset Document) là trang có chứa nội dung mô tả và cách trình bày của các frame (các tài liệu HTML). Cú pháp:
HTML - HyperText Markup Language
36
Làm việc với FRAME
Trong đó:
COLS: Xác định số cột trong một frameset.
ROWS: Xác định số dòng trong một frameset.
FRAMEBORDER: Xác định frameset sẽ hiển thị các đường biên giữa các frame.
BORDERCOLOR: Xác định màu cho đường biên.
SRC: Xác định địa chỉ URL của tài liệu cần hiển thị trong frame.
NAME: Gán tên cho một frame.
SCROLLING: Cho phép hiển thị hoặc không hiển thị thanh cuộn.
HTML - HyperText Markup Language
37
Các thẻ chèn âm thanh, hình ảnh
Liên kết với tập tin đa phương tiện tương tự như liên kết khác. Tuy vậy phải đặt tên đúng cho tập tin đa phương tiện, kiểu của tập tin.
Chèn âm thanh vào một tài liệu HTML.
Thẻ này không có thẻ kết thúc tương ứng ( ). Để lặp lại vô hạn chỉ định LOOP = -1 hoặc LOOP = INFINITE. Thẻ BGSOUND phải được đặt trong phần mở đầu (tức là nằm trong cặp thẻ HEAD).
HTML - HyperText Markup Language
38
Các thẻ chèn âm thanh, hình ảnh
Chèn một hình ảnh, một đoạn video vào tài liệu HTML: Để chèn một tập tin ảnh (.jpg, .gif, .bmp) hoặc video (.mpg, .avi) vào tài liệu HTML. Cú pháp:
![text<br]()
BORDER = n SRC = url WIDTH = width
HEIGHT = height HSPACE = vspace
VSPACE = hspace TITLE = title DYNSRC= url
START = FILEOPEN/MOUSEOVER
LOOP = n >
HTML - HyperText Markup Language
39
Các thẻ định dạng bảng biểu
Cú pháp định nghĩa bảng
ALIGN = LEFT / CENTER / RIGHT
HTML - HyperText Markup Language
40
Các thẻ định dạng bảng biểu
ý nghĩa các tham số:
ALIGN / VALIGN: Canh lề cho bảng.
BORDER: Kích thước đường kẻ chia ô trong bảng, được đo theo pixel.
BORDERCOLOR: Màu đường kẻ
BORDERCOLORDARK, BORDERCOLORLIGHT: Màu phía tối và phía sáng cho đường kẻ nổi.
BACKGROUND: Địa chỉ tới tập tin ảnh dùng làm nền.
BGCOLOR: Màu nền
CELLSPACING: Khoảng cách giữa các ô trong bảng.
CELLPADDING: Khoảng cách giữa nội dung và đường kẻ trong mỗi ô của bảng.
COLSPAN: Chỉ định ô sẽ kéo dài trong bao nhiêu cột
ROWSPAN: Chỉ định ô sẽ kéo dài trong bao nhiêu hàng
HTML - HyperText Markup Language
41
Mẫu biểu (Form)
HTML Forms: Các HTML Form có thể có các hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn...
Tạo Form: Để tạo ra một form trong tài liệu HTML, sử dụng thẻ FORM với cú pháp như sau:
HTML - HyperText Markup Language
42
Mẫu biểu (Form)
Trong đó:
ACTION: Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là địa chỉ tới một chương trình CGI, một trang ASP...).
METHOD: Phương thức gửi dữ liệu.
NAME: Tên của form.
TARGET: Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server.
HTML - HyperText Markup Language
43
Mẫu biểu (Form)
Cú pháp thẻ INPUT:
TYPE=BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT
NAME= Nameinput VALUE = value >
HTML - HyperText Markup Language
44
Mẫu biểu (Form)
Tạo một danh sách lựa chọn. Cú pháp:
Tạo hộp soạn thảo văn bản. Cú pháp:
HTML - HyperText Markup Language
45
Chương III
MICROSOFT FRONTPAGE
46
Microsoft Frontpage là một bộ công cụ soạn thảo thiết kế web chuyên nghiệp của Microsoft.
Tính năng:
Giao diện khá thân thiện và dễ sử dụng.
Hỗ trợ khả năng thiết kế, tổ chức và quản lý một website.
Đưa website lên mạng Intranet và mạng Internet.
…
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
47
Khởi động
Start / Programs / Microsoft Frontpage.
Double click vào biểu tượng trên Desktop (nếu có).
Thoát
Click vào nút Close trên thanh tiêu đề.
Nhấn Alt + F4.
File / Exit.
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
48
Cửa sổ làm việc
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
49
Ý nghĩa và tính năng của các thành phần
Views bar:
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
50
Folder list:
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
Toolbar Standard:
51
Thiết kế trang web:
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
52
Tạo một website mới:
File / New… như hình bên.
Kích New web site / One page Web site… xuất hiện hộp hội thoại sau:
CÁC THAO TÁC CƠ BẢN
53
Click nút OK, xuất hiện màn hình:
CÁC THAO TÁC CƠ BẢN
54
Tạo thêm các thư mục trong website
Nhấp vào biểu tượng ẩn hiện thư mục (nếu Folder list chưa có trên màn hình).
Kích chuột phải tại thư mục cha của thư mục cần tạo.
Chọn New / Folder như hình sau:
CÁC THAO TÁC CƠ BẢN
55
Tạo ra một trang web mới
File / New
File / Save với ten index.html
CÁC THAO TÁC CƠ BẢN
56
Mở một trang Web bất kỳ:
File / Open… (Ctrl + O)
Kích chọn tên trang web cần mở.
Xóa một trang Web:
Kích chuột phải tại tên trang web muốn xóa trong Folder List.
Chọn Delete.
Thêm các trang Web hoặc thư mục:
File / Import… xuất hiện hộp hội thoại như sau:
CÁC THAO TÁC CƠ BẢN
57
CÁC THAO TÁC CƠ BẢN
58
Tạo liên kết các trang Web:
Hyperlink (siêu liên kết): nối kết từ vị trí này đến một đích khác.
Đích: có thể trong cùng site hay ngoài site.
Là hình ảnh, địa chỉ e-mail, tập tin, chương trình,…
Kích vào Hyperlink thì đích sẽ hiển thị.
Đích của Hyperlink được tạo mã dưới dạng một URL.
Các kiểu liên kết:
Tạo liên kết văn bản giữa các trang web.
Tạo liên kết thư điện tử.
Tạo liên kết bookmark.
Tạo liên kết đến địa chỉ website khác.
Tạo liên kết dạng bản đồ ảnh.
CÁC THAO TÁC CƠ BẢN
59
Tạo liên kết văn bản giữa các trang Web
Đánh dấu chuỗi văn bản cần tạo liên kết.
Kích phải chuột vào vùng đã chọn (Ctrl + K), chọn Hyperlink… xuất hiện hộp hội thoại:
CÁC THAO TÁC CƠ BẢN
60
Tạo liên kết thư điện tử
Đánh dấu chuỗi ký tự cần tạo liên kết.
Kích phải chuột vào vùng đã chọn (Ctrl + K), chọn Hyperlink… xuất hiện hộp hội thoại:
CÁC THAO TÁC CƠ BẢN
Chọn trang cần liên kết
61
Tạo liên kết bookmark
Tạo bookmark
Chọn cụm từ cần tạo Bookmark.
Insert / Bookmark… (Ctrl + R) xuất hiện hộp hội thoại Bookmark sau:
CÁC THAO TÁC CƠ BẢN
62
Tạo liên kết đến Bookmark
Đánh dấu chọn cụm đã tạo Bookmark.
Kích chuột phải tại đó, chọn Hyperlink properties… xuất hiện hộp thoại Insert Hyperlink sau:
CÁC THAO TÁC CƠ BẢN
Chọn nút Bookmark, xuất hiện hộp thoại trên.
Kích chọn tên Bookmark, nhấp OK.
63
Tạo liên kết đến địa chỉ Website
Tương tự như tạo liên kết giữa các trang Web.
Trong hộp thoại Insert Hyperlink, nhập địa chỉ Website cần liên kết.
CÁC THAO TÁC CƠ BẢN
Chọn trang cần liên kết
64
Tạo liên kết dạng bản đồ ảnh (Hostpot)
Hostpot: tạo chỉ điểm trên ảnh làm điểm liên kết.
Ví dụ: bạn có hình bản đồ, dùng Hostpot để tạo liên kết đến các quốc gia.
Tạo Hostpot:
Insert / Picture / From File… rồi chỉ đường dẫn đến tập tin ảnh.
Thanh công cụ Picture xuất hiện, chọn dạng chỉ điểm cần tạo trên thanh Picture.
Đưa chuột đến hình đã chọn (chuột hiện thành hình cây bút vẽ), click và kéo để tạo ra điểm liên kết.
Xuất hiện hộp hội thoại Insert Hyperlink, chọn trang Web để liên kết đến vùng vừa chọn.
CÁC THAO TÁC CƠ BẢN
65
Sửa đổi các liên kết:
Thay đổi liên kết:
Nhấp chuột phải tại mục liên kết cần thay đổi, chọn Hyperlink Properties…
Trong hộp thoại Edit Hyperlink, chọn trang liên kết cần thay thế.
Xoá liên kết:
Tương tự như trên nhưng trong hộp thoại Edit Hyperlink, kích nút Remove Link.
Khi đó, chuỗi ký tự, picture,… không còn đường gạch chân nữa.
CÁC THAO TÁC CƠ BẢN
66
Tạo danh sách
Format / Bullets and Numbering
Chọn thẻ Plain Bullets trong hộp thoại Bullets and numbering.
ĐỊNH DẠNG TRANG WEB
67
Tạo danh sách
Chọn thẻ Picture Bullets.
ĐỊNH DẠNG TRANG WEB
68
Tạo danh sách
Chọn thẻ Numbers để tạo danh sách thứ tự.
ĐỊNH DẠNG TRANG WEB
69
Thay đổi thuộc tính của trang Web:
Đặt tiêu đề.
Thiết lập nhạc nền.
Thiết lập hình nền và màu nền.
Thiết lập lề.
Thiết lập Font chữ cho toàn bộ nội dung trang web.
Thực hiện như sau:
Kích chuột phải tại trang cần thay đổi thuộc tính, chọn Page Properties…
ĐỊNH DẠNG TRANG WEB
70
Đặt tiêu đề cho trang web.
Chọn thẻ General.
Nhập tiêu đề trang web trong mục Title.
ĐỊNH DẠNG TRANG WEB
71
Thiết lập nhạc nền cho trang web.
Chọn thẻ General.
Trong phần Background sound, trong mục Location, chọn nút Browse.
Hộp thoại Background sound hiển thị, chọn nhạc nền cho trang web.
ĐỊNH DẠNG TRANG WEB
72
Thiết lập hình nền và màu nền cho trang web.
Chọn thẻ Formatting.
ĐỊNH DẠNG TRANG WEB
73
Thiết lập lề cho trang web.
Chọn thẻ Advanced.
ĐỊNH DẠNG TRANG WEB
74
Thiết lập Font chữ cho toàn bộ nội dung trong trang web.
Chọn thẻ Advanced.
Trong mục Styles, chọn nút Body style…, xuất hiện hộp thoại Modify Style.
Kích nút Format, chọn Font…
ĐỊNH DẠNG TRANG WEB
75
Bảng (Table)
Table / Draw Table
ĐỊNH DẠNG TRANG WEB
76
Bảng (Table)
Đặt thuộc tính của bảng
ĐỊNH DẠNG TRANG WEB
77
Bảng (Table)
Đặt thuộc tính của ô
ĐỊNH DẠNG TRANG WEB
78
Theme:
Tập hợp các thành phần được thiết kế sẵn và các sơ đồ màu.
Theme tác động lên tất cả các thuộc tính hiển thị của trang web.
Color: sơ đồ màu sử dụng để khởi tạo màu cho: body text, hyperlink, headings, page banner text,…
Graphic
Style: một theme sử dụng style (font) cho body text và headings.
Chọn trang muốn đặt theme.
Format / Theme… hộp thoại Theme xuất hiện:
ĐỊNH DẠNG TRANG WEB
79
ĐỊNH DẠNG TRANG WEB
Chọn chế độ màu sáng
Chọn chế độ hình đồ họa
Chọn hiển thị hình nền
80
Style:
Tạo một Style:
Format / Slyle…
Chọn nút New…
ĐỊNH DẠNG TRANG WEB
81
Style:
Sử dụng một Style:
Trong page view chọn đoạn văn bản.
Chọn Style trong hộp thoại style.
Kích Bullets nếu muốn áp dụng nhanh.
Sửa đổi Style:
Format / Style…
Chọn phần muốn sửa đổi trong hộp thoại style.
ĐỊNH DẠNG TRANG WEB
82
Thao tác chung để tạo ra các hiệu ứng web:
Trong page view chọn vị trí cần tạo hiệu ứng.
Insert / Web Component… xuất hiện hộp thoại Insert Web Component.
Một số hiệu ứng web:
Hit counter
Marquee
Interactive button
Banner ad manager
Web search
Office Spreadsheet
…
TẠO CÁC HIỆU ỨNG WEB
83
Hit counter:
Hiển thị số lần truy cập trang web.
Chọn Hit Counter Type trong Component Type.
Chọn kiểu thể hiện của Hit counter trong Choose a counter style.
Kích Finish xuất hiện hộp thoại Hit counter Properties.
Custom: Nếu chọn kiểu đồ hoạ khác, nhập đường dẫn tập tin .gif.
Reset counter to: thiết lập lại bộ đếm bắt đầu bởi một số đặc biệt.
Kích OK để chấp nhận.
TẠO CÁC HIỆU ỨNG WEB
84
TẠO CÁC HIỆU ỨNG WEB
85
Marquee:
Hiển thị dòng văn bản chạy ngang màn hình trang web.
Chọn Dynamic Effect trong Component Type.
Chọn Marquee trong Choose an effect.
Kích nút Finish xuất hiện hộp thoại Marquee properties.
TẠO CÁC HIỆU ỨNG WEB
86
TẠO CÁC HIỆU ỨNG WEB
87
Interactive button:
Chèn vào một liên kết đến một trang hay tập tin khác.
NSD kích chuột vào Interactive button, xuất hiện một hình ảnh hay nghe một hiệu ứng âm thanh.
TẠO CÁC HIỆU ỨNG WEB
Chọn Dynamic Effect trong Component Type.
Chọn Interactive trong Choose an effect.
Kích nút Finish xuất hiện hộp thoại Interactive buttons.
88
TẠO CÁC HIỆU ỨNG WEB
Chọn kiểu nút
Nhập nhãn cho nút
Nhập URL của trang hay tập tin muốn hiển thị
89
Web search:
Cho phép NSD tìm kiếm thông tin theo một đoạn văn bản xác định.
Chọn Web search trong Component Type.
TẠO CÁC HIỆU ỨNG WEB
Chọn Current Web trong Choose a Type of search.
Kích nút Finish xuất hiện hộp thoại Search Form properties.
90
Web search:
Chọn thẻ Search Form Properties.
TẠO CÁC HIỆU ỨNG WEB
91
TẠO CÁC HIỆU ỨNG WEB
Office Spreadsheet:
Tạo bảng tính cho Web.
Chọn Spreadsheets and charts trong Component Type.
Chọn Office Spreadsheet trong Choose Control.
Kích nút Finish, xuất hiện bảng tính trong trang web.
92
Chèn hình ảnh vào trang web:
Trong page view nhấp chuột tại vị trí cần chèn ảnh.
Insert / Picture / From File…
Xuất hiện hộp thoại Picture:
HÌNH ẢNH VÀ ÂM THANH
Chọn tập tin ảnh cần hiển thị trên trang web.
Kích nút Insert chấp nhận.
93
Chèn Clip Art vào trang web:
Trong page view nhấp chuột tại vị trí cần chèn Clip-Art.
Insert / Picture / Clip Art…
Xuất hiện hộp thoại Clip Art:
HÌNH ẢNH VÀ ÂM THANH
Chọn Clip Art cần chèn trên trang web.
Kích nút Insert chấp nhận.
94
Tạo Thumbnail cho các hình ảnh trong trang web:
Thumbnail là giải pháp tạo ra các hình ảnh nhỏ từ các hình ảnh lớn và liên kết phóng to hình ảnh cho NSD xem khi click vào hình ảnh đó.
Tạo Thumbnail với một hình ảnh:
Chèn một hình ảnh từ một tập tin bất kỳ vào trang web.
Kích chuột phải lên hình ảnh đó, chọn Auto Thumbnail.
Hình ảnh đó tự động thu nhỏ lại trên trang web.
HÌNH ẢNH VÀ ÂM THANH
95
HÌNH ẢNH VÀ ÂM THANH
96
Tạo Thumbnail với nhiều hình ảnh một lúc:
Chọn trang cần Thumbnail.
Insert / New Photo Gallery… xuất hiện hộp thoại Photo Gallery.
Chọn thẻ Pictures.
Kích nút Add, chọn Pictures from files.
Xuất hiện hộp thoại File Open, chọn những tập tin ảnh cần Thumbnail.
HÌNH ẢNH VÀ ÂM THANH
97
HÌNH ẢNH VÀ ÂM THANH
98
Chọn thẻ Layout.
Chọn kiểu hiển thị sắp xếp các ảnh Thumbnail trên trang trong khung Choose a layout.
Kích OK chấp nhận.
HÌNH ẢNH VÀ ÂM THANH
99
Chỉnh sửa các hình ảnh trong trang web:
Thay đổi kích thước hình ảnh.
Di chuyển ảnh.
Thay đổi thuộc tính ảnh:
Kích chuột phải tại ảnh cần thay đổi thuộc tính
Chọn Picture Properties, xuất hiện hộp thoại Picture Properties.
Chọn thẻ General.
Định dạng vị trí ảnh:
Kích chuột phải tại ảnh cần thay đổi thuộc tính
Chọn Picture Properties, xuất hiện hộp thoại Picture Properties.
Chọn thẻ Appearance.
HÌNH ẢNH VÀ ÂM THANH
100
Thêm video vào trang web:
Chèn tập tin Video vào trang web:
Chọn vị trí cần chèn video.
Insert / Picture / Video… xuất hiện hộp thoại Video.
HÌNH ẢNH VÀ ÂM THANH
Chọn tập tin video cần chèn
101
Thay đổi thuộc tính Video:
Kích chuột phải tại ảnh cần thay đổi thuộc tính
Chọn Picture Properties, xuất hiện hộp thoại Picture Properties.
Chọn thẻ Video.
HÌNH ẢNH VÀ ÂM THANH
102
Khung (Frame):
Cung cấp khả năng phân chia màn hình trình duyệt thành nhiều vùng, mỗi vùng chứa một trang web riêng biệt.
Mục đích: làm cho website dễ xem hơn và dễ truy cập.
Frontpage hỗ trợ 10 cách bố trí khung.
FRAME
103
Tạo Frame:
File / New…
Chọn More page templates… xuất hiện hộp thoại Page Templates.
Chọn thẻ Frames Pages.
FRAME
Chọn dạng thể hiện của Frame
104
Hiển thị cửa sổ frame giống như cấu trúc frame đã chọn.
Nhập nội dung vào frame: 2 cách
FRAME
105
Xoá một Frame:
Chọn Frame cần xoá (frame có khung viền màu xanh).
Frames / Delete Frame.
Nếu trang chỉ chứa một Frame thì không thể xoá frame đó được.
FRAME
106
Thêm một Frame:
Chọn Frame cần thêm frame.
Frames / Split Frame.
Xuất hiện hộp thoại Split Frame:
Split into columns: chia frame làm 2 theo dạng cột.
Split into rows: chia frame làm 2 theo dạng dòng.
FRAME
107
Thiết lập thuộc tính cho Frame:
Chọn Frame cần thêm frame.
Frames / Frame properties.
FRAME
108
Dạng chung của Form: danh sách các câu hỏi kèm theo các ô trống để NSD điền vào câu trả lời.
Tạo Form: 3 cách
Sử dụng form page wizard.
Sử dụng form mẫu.
Tạo form từ đầu.
Các đối tượng thường gặp trên form:
Text Box
Text Area
Check Box
Option Button
Drop – Down Box
FORM
Push Button
Picture
Label
File Upload
109
Tạo Text Box:
Chọn vị trí cần đặt Textbox.
Insert / Form / Textbox.
Tạo nhãn cho Textbox, các nút
FORM
Double-click vào đây
110
Tạo Text Area:
Chọn vị trí cần đặt Text Area.
Insert / Form / Text Area.
Tạo nhãn cho Text Area.
FORM
Double-click vào đây
111
Tạo Drop-down Box:
Chọn vị trí cần đặt Drop-down Box.
Insert / Form / Drop-down Box.
Tạo nhãn cho Drop-down Box.
FORM
Double-click vào đây
112
Tạo Check Box:
Chọn vị trí cần đặt Check Box.
Insert / Form / Check Box.
Tạo nhãn cho Check Box.
FORM
Double-click vào đây
113
Tạo Option Button:
Chọn vị trí cần đặt Option Button.
Insert / Form / Option Button.
Tạo nhãn cho Option Button.
FORM
Double-click vào đây
114
Tạo Push Button:
Chọn vị trí cần đặt Push Button.
Insert / Form / Push Button.
Tạo nhãn cho Push Button.
FORM
Double-click vào đây
115
Chèn Picture vào Form:
Chọn vị trí cần đặt ảnh.
Insert / Form / Picture…
Tạo nhãn cho ảnh.
FORM
116
Tạo mục File Upload lên mạng:
Chọn vị trí cần đặt File Upload.
Insert / Form / File Upload
Thay đổi thuộc tính trong hộp thoại File upload properties.
FORM
Double-click vào đây
117
Quản lý kết quả từ Form:
Kích chuột phải tại form, chọn Form Properties…
Xuất hiện hộp thoại Form properties.
Kích nút Options… xuất hiện hộp thoại Saving Results.
FORM
Chọn nút Option
118
Chọn thẻ Saving Fields.
Trong danh sách Form Fields to save, chọn fields không muốn lưu kết quả, nhấn Del.
Chọn Date format và Time format để lưu ngày, giờ form.
Chọn bất kỳ kiểu thêm thông tin muốn lưu vào các kết quả chính thức.
Chọn các trường trong các kết quả để chỉ rõ thông tin muốn tổng hợp lại từ Form bao gồm:
Ngày, giờ form đã Submit.
Tên, địa chỉ IP, User name của máy tính,…
FORM
119
Lưu kết quả vào Form:
Lưu kết quả (dữ liệu mà NSD nhập vào) vào một tập tin văn bản hay tập tin HTML.
Kích chuột phải tại form, chọn Form Properties…
Xuất hiện hộp thoại Form properties.
Kích nút Options… xuất hiện hộp thoại Saving Results.
Chọn thẻ File Results.
FORM
120
FORM
121
Giới thiệu về Plug-in:
Kết hợp dùng các Plug-in vào trình duyệt web giúp bạn có thể mở rộng khả năng kết hợp hài hòa và sống động giữa văn bản, đồ họa, audio, video,…
Các Plug-in phổ biến:
Shockware Flash: dùng cho ảnh động, phim và âm thanh.
Quick Time
RealPlayer
Acrobat Reader
PLUG-IN & ACTIVE CONTROL
122
Chèn Plug-in vào trang web:
Insert / Web Component… xuất hiện hộp thoại Web Component.
Chọn Advanced Controls trong Component type.
PLUG-IN & ACTIVE CONTROL
Chọn Plug-in trong Choose a control.
Kích nút Finish, xuất hiện hộp thoại Plug-in properties.
123
PLUG-IN & ACTIVE CONTROL
Nhập URL hay vị trí tập tin của Plug-in
Nhập HTML hay text đơn giản hiển thị tại vị trí đặt plug-in trong những bộ trình duyệt web không hỗ trợ plug-in
124
ActiveX Control:
Dựa vào công nghệ Object Linking and Embedding (OLE – nhúng là liên kết đối tượng), ActiveX Control cho phép người thiết kế web tạo ra các điều khiển để bổ sung tính năng cho trang web.
PLUG-IN & ACTIVEX CONTROL
Insert / Web component… xuất hiện hộp thoại Insert web component.
Click Next tiếp tục
125
PLUG-IN & ACTIVE CONTROL
Click Finish kết thúc
Chọn Control muốn chèn vao trang web
Thêm bớt các Control
126
ActiveX Control:
Xác lập thuộc tính cho ActiveX Control:
Kích chuột phải tại ActiveX Control, chọn ActiveX Control.
Hoặc double-click tại ActiveX Control.
Thêm hay bớt các ActiveX Control:
Nhấn nút Customize.
PLUG-IN & ACTIVE CONTROL
Xuất hiện hộp thoại Customizr ActiveX Control List, chọn danh sách Control.
Click Next tiếp tục
127
Xuất bản website lên Webserver:
Yêu cầu:
Máy chủ Web server.
Có cài đặt IIS ( Internet Information Server).
Thực hiện:
Thiết lập Server Extension Web:
Start / Setting / Control Panel / Performance and Maintenance / Administrator và thực hiện tiếp theo sự hướng dẫn.
Xuất bản webste từ Frontpage:
Đóng tất cả các trang web.
File / Publish Site… xuất hiện hộp thoại
XUẤT BẢN WEBSITE
128
Xuất bản website lên Webserver:
Yêu cầu:
Máy chủ Web server.
Có cài đặt IIS ( Internet Information Server).
Thực hiện:
Thiết lập Server Extension Web:
Start / Setting / Control Panel / Performance and Maintenance / Administrator và thực hiện tiếp theo sự hướng dẫn.
Xuất bản webste từ Frontpage:
Đóng tất cả các trang web.
File / Publish Site… xuất hiện hộp thoại Remote website Properties.
Chọn mục Frontpage or SharePoint Services.
Nhập URL tại Remote web site location.
XUẤT BẢN WEBSITE
129
XUẤT BẢN WEBSITE
Nhập URL
130
Xuất bản website lên vị trí trên máy của bạn:
XUẤT BẢN WEBSITE
Đóng tất cả các trang web.
File / Publish Site… xuất hiện hộp thoại Remote website Properties.
Chọn mục File System.
Nhập đường dẫn đến vị trí cần đưa website lên máy.
131
XUẤT BẢN WEBSITE
Nhập URL
THIẾT KẾ TRANG WEB
Web Page Designing
2
Mục đích:
Sau khi kết thúc học phần sinh viên có khả năng thiết kế giao diện cho các trang web.
Sử dụng được một số công cụ trong việc thiết kế website.
Biết được cách trang trí và xuất bản một website.
THIẾT KẾ TRANG WEB
Web Page Designing
3
Thời lượng:
20 tiết lý thuyết trên lớp + 25 tiết thực hành.
Tài liệu tham khảo:
THIẾT KẾ TRANG WEB
Web Page Designing
4
Chương I
Tổng quan về trang web
Internet-Mạng máy tính toàn cầu
Mô hình khách chủ
WWW-World Wide Web
Phân loại trang Web
Cấu trúc của một Web Site
Trình duyệt Web
5
Internet-Mạng máy tính toàn cầu
Cơ chế hoạt động:
Internet không có sự điều hành của bất kỳ cơ quan chủ quản, được điều hành trên nguyên tắc chung.
Duy trì sự ổn định và trật tự được quy định từ mỗi mạng thành phần.
Các tổ chức liên quan:
Các trung tâm thông tin InterNIC, APNIC,...
Hiệp hội Internet
Tài nguyên trên Internet:
Các thông tin do chính các mạng thành phần cung cấp
TỔNG QUAN VỀ TRANG WEB
6
Internet-Mạng máy tính toàn cầu
Một số dịch vụ thông tin phổ biến trên Internet:
Thư điện tử
FTP (File Transfer Protocol) là dịch vụ truyền tập tin truyền và nhận tập tin từ máy tính này sang máy tính khác.
Dịch vụ Web
Ngoài ra, còn nhiều dịch vụ thú vị khác cũng đang khá phổ biến trên Internet:
Nói chuyện, trao đổi trên mạng và hội nghị trên mạng.
Dịch vụ điện thoại và Fax.
TỔNG QUAN VỀ TRANG WEB
7
Mô hình khách chủ
Mụ hỡnh ?ng d?ng 2 l?p
Uu di?m
DL t?p trung, nh?t quỏn.
Chia s? cho nhi?u ngu?i.
Khuy?t di?m
x? lý tra c?u, c?p nh?t dl
? Database Server, nh?n k?t
qu?, hi?n th? ph?i du?c th?c
hi?n ? Client -> Khú khan d? b?o trỡ v� nõng c?p.
Kh?i lu?ng d? li?u truy?n trờn m?ng l?n chi?m d?ng du?ng truy?n, thờm gỏnh n?ng cho Database Server.
TỔNG QUAN VỀ TRANG WEB
8
Mô hình khách chủ
Mụ hỡnh ?ng d?ng 3 l?p
Uu di?m
H? tr? nhi?u ngu?i dựng
Gi?m b?t x? lý cho Client
->Khụng yờu c?u mỏy tớnh ? Client cú c?u hỡnh m?nh.
X? lý nh?n, hi?n th? v� truy c?p d? li?u t?i Application Server-> d? qu?n lý, b?o trỡ v� nõng c?p
Khuy?t di?m
Ph?i s? d?ng thờm m?t Application Server -> Tang chi phớ.
TỔNG QUAN VỀ TRANG WEB
9
TỔNG QUAN VỀ TRANG WEB
WWW-World Wide Web
WWW được xây dựng theo mô hình khách chủ. phía máy chủ được gọi là WebServer, phần phía máy khách gọi là WebBrowser, chúng giao tiếp thông qua giao thức truyền thông chuẩn HTTP.
10
TỔNG QUAN VỀ TRANG WEB
Phân loại trang Web
Mỗi ứng dụng Web tồn tại hai loại trang Web:
Trang Web tĩnh: Được thiết kế bằng các thẻ HTML và kịch bản trên máy khách (Client Script).
Trang Web động: Được thiết kế bằng kịch bản trên máy chủ (Server Script) và sử dụng cơ sở dữ liệu trong các trang web.
11
Cấu trúc của một Web Site
Một số cấu trúc cho tập hợp các trang Web:
Cấu trúc phân cấp
TỔNG QUAN VỀ TRANG WEB
12
Cấu trúc của một Web Site
Một số cấu trúc cho tập hợp các trang Web:
Cấu trúc tuyến tính
TỔNG QUAN VỀ TRANG WEB
13
Cấu trúc của một Web Site
Một số cấu trúc cho tập hợp các trang Web:
Cấu trúc tuyến tính với các nhánh
TỔNG QUAN VỀ TRANG WEB
Trang chủ (Home Page)
14
Cấu trúc của một Web Site
Một số cấu trúc cho tập hợp các trang Web:
Kết hợp cấu trúc tuyến tính và cấu trúc phân cấp
TỔNG QUAN VỀ TRANG WEB
15
Trình duyệt Web
Một số trình duyệt web đang sử dụng rộng rãi.
TỔNG QUAN VỀ TRANG WEB
16
Chương II
HTML – HyperText Markup Language
Giới thiệu
Tạo một trang Web bằng HTML
Các thẻ định dạng cấu trúc tài liệu
Các thẻ định dạng khối
Các thẻ định dạng danh sách
Các thẻ định dạng ký tự
Liên kết tài liệu trên Web
Các thẻ chèn âm thanh, hình ảnh
Các thẻ định dạng bảng biểu
FORM
17
Giới thiệu
Ngôn ngữ định dạng siêu văn bản HTML (HyperText Markup Language) là một ngôn ngữ đơn giản, khá mạnh cho phép tạo ra các trang Web, sử dụng hàng loạt các thẻ chuẩn, hoặc mã cũng như các quy ước cho phép tạo các thành phần của trang Web.
Có khoảng trên 120 thẻ đã được định nghĩa sẵn. Thẻ HTML có hai loại cơ bản sau:
Thẻ mang thông tin (container tag): gồm có hai phần, thẻ mở và thẻ đóng. Có dạng sau:
Thẻ rỗng (empty tag): là thẻ dùng để thực hiện một chức năng nào đó. Thí dụ: thẻ
, dùng để ngắt dòng và bắt đầu ký tự tiếp theo trên dòng tiếp theo
HTML - HyperText Markup Language
18
Trang web du?c t?o b?ng HTML
Để tạo một tài liệu HTML, có thể sử dụng trình soạn thảo WordPad của Windows hay m?t s? pần mềm hỗ trợ thiết kế web.
Cấu trúc tài liệu HTML cơ bản gồm có cấu trúc sau:
HTML - HyperText Markup Language
... Nội dung của tài liệu
19
Các thẻ định dạng cấu trúc tài liệu
Thẻ HTML: Cặp thẻ này được sử dụng để xác nhận tài liệu được soạn thảo là tài liệu HTML. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này. Cú pháp:
Trình duyệt sẽ xem các tài liệu không sử dụng thẻ như những tệp tin văn bản bình thường.
HTML - HyperText Markup Language
... Toàn bộ nội dung của tài liệu được đặt ở đây
20
Các thẻ định dạng cấu trúc tài liệu
Thẻ BODY: Để xác định phần nội dung chính của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu...
Cú pháp:
HTML - HyperText Markup Language
.... phần nội dung của tài liệu được đặt ở đây
21
Các thẻ định dạng cấu trúc tài liệu
Thẻ HEAD: Được dùng để xác định phần mở đầu cho tài liệu. Cú pháp:
Thẻ TITLE: Cặp thẻ này được dùng trong phần mở đầu của tài liệu, nhằm cung cấp tiêu đề của trang web. Cú pháp:
HTML - HyperText Markup Language
... Phần mở đầu (HEADER) của tài liệu được đặt ở đây
... Phần mở đầu (HEADER) của tài liệu được đặt ở đây
22
Các thẻ định dạng cấu trúc tài liệu
Định nghĩa thẻ BODY:
Trong đó:
URL: là địa chỉ của một Web site http:// hoặc ftp:// hoặc tên tập tin ảnh *.GIF, *.JPG, *.BMP.
Color: là thuộc tính màu, có dạng: #NNNNNN với N từ 0..F (#800000: màu đỏ), hoặc tên màu đã được định nghĩa: RED, Blue,...
BACKGROUND=url: chỉ định ảnh nền cho trang Web
BGCOLOR=color: chỉ định màu nền cho trang Web
HTML - HyperText Markup Language
23
Các thẻ định dạng cấu trúc tài liệu
LEFTMARGIN=n: chỉ định lề trái, n là số nguyên dương tính theo pixel
VLINK=color: chỉ định màu cho trang Web khi chưa được duyệt
TEXT=color: chỉ định màu văn bản trong trang Web
TOPMARGIN=n: chỉ định lề trên, n là số nguyên dương tính theo pixel
ALINK=color: chỉ định màu cho trang Web khi đã được duyệt.
Ví dụ định nghĩa thẻ Body:
HTML - HyperText Markup Language
24
Các thẻ định dạng khối
Thẻ
được sử dụng để định dạng một đoạn văn bản. Cú pháp:
Trong đó:
ALIGN=Align-Type: dùng chỉ định canh đoạn văn bản, Left: canh lề trái, Right: canh lề phải, Center: canh giữa.
Ví dụ:
Chào mừng đến với HTML
HTML - HyperText Markup Language
Nội dung đoạn văn bản
25
Các thẻ định dạng khối
Vẽ đường thẳng nằm ngang. Cú pháp:
Trong đó:
ALIGN: Canh lề.
COLOR: Đặt màu cho đường thẳng
NOSHADE: Không có bóng
SIZE: Độ dày của đường thẳng
WIDTH: Chiều dài (tính theo pixel hoặc % của bề rộng cửa sổ trình duyệt).
HTML - HyperText Markup Language
26
Các thẻ định dạng khối
Thẻ xuống dòng BR: Thẻ này không có thẻ kết thúc tương ứng (), có tác dụng chuyển sang dòng mới.
Thẻ PRE: Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ
. Văn bản ở giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh vào
Cú pháp:
HTML - HyperText Markup LanguageVăn bản đã được định dạng
27
HTML - HyperText Markup Language
Các thẻ định dạng khối
Các thẻ định dạng đề mục: dùng để tạo tạo các đề mục to nhỏ tùy theo cấp độ trong trang Web, có 6 đề mục khác nhau. Cú pháp: Text trong tiêu đề
Trong đó: n là một số từ 1 đến 6.
28
Các thẻ định dạng danh sách
Danh sách không sắp xếp (Unordered List): Danh sách này có kiểu Bullet. Cú pháp:
Thẻ < UL > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mỗi mục trong danh sách. có các giá trị: disc (chấm tròn đậm); circle (vòng tròn); square (hình vuông).
Ví dụ:
- Đây là mục 1 trong danh sách.
- Đây là mục 2 trong danh sách.
? Kết quả:
Đây là mục 1 trong danh sách.
Đây là mục 2 trong danh sách
HTML - HyperText Markup Language
- Mục thứ nhất
- Mục thứ hai
29
Các thẻ định dạng danh sách
Danh sách có sắp xếp (Ordered List): Danh sách này có kiểu Number. Cú pháp:
trong đó:
TYPE =1: Các mục được sắp xếp theo thứ tự 1, 2, 3...
=a: Các mục được sắp xếp theo thứ tự a, b, c...
=A: Các mục được sắp xếp theo thứ tự A, B, C...
=i: Các mục được sắp xếp theo thứ tự i, ii, iii...
=I: Các mục được sắp xếp theo thứ tự I, II, III...
HTML - HyperText Markup Language
- Muc thu nhat
- Muc thu hai
30
Các thẻ định dạng ký tự
Các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch chân... cho các ký tự, văn bản khi được thể hiện trên trình duyệt.
... , ... : In chữ đậm
... , ... :In chữ nghiêng
... : In chữ gạch chân
... : Định dạng chỉ số trên (SuperScript)
... : Định dạng chỉ số dưới (SubScript)
Ví dụ: H2SO4: hiển thị H2SO4
HTML - HyperText Markup Language
31
Các thẻ định dạng ký tự
Trong đó:
SIZE=n: chỉ kích thước văn bản, n từ 2 đến 7. Giá trị mặc định là 3.
COLOR=color: màu văn bản
FACE=name: Tên Font
HTML - HyperText Markup Language
32
Các thẻ định dạng ký tự
: chỉ định Font, kích thức, màu văn bản. Định nghĩa thẻ như sau:
Thêm dấu "+" hay "-" trước n dùng tăng hoặc giảm kích thước so với kích thước đã chỉ định tại thẻ BASEFONT
Ví dụ:
Kích thước văn bản là 5
Kích thước vb là 4
Kích thước vb là 5
Kích thước vb là 2
HTML - HyperText Markup Language
33
Các thẻ định dạng ký tự
Căn lề văn bản trong trang Web: Các thẻ định dạng P, Hn,... đều có tham số ALIGN dùng căn lề các văn bản nằm trong phạm vi giới hạn của các thẻ đó. Các giá trị cho tham số ALIGN: LEFT, CENTER, RIGHT
Có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản. Cú pháp:
Sử dụng màu sắc trong thiết kế các trang Web: Một số giá trị màu cơ bản (Tham khảo trong giáo trình).
HTML - HyperText Markup Language
34
Liên kết tài liệu trên Web
Quy tắc đặt tên đó là URL (Universal Resource Locator-Định vị nguồn tài nguyên):
http://selab.vnuh.edu.vn/~dir1/dir2/dir3/index.HTML
Để tạo ra một siêu văn bản chúng ta sử dụng thẻ . Cú pháp:
TITLE = title TARGET = _blank / _self>...siêu văn bản
HTML - HyperText Markup Language
35
Làm việc với FRAME
Thẻ FRAMESET: Tài liệu FRAMESET (Frameset Document) là trang có chứa nội dung mô tả và cách trình bày của các frame (các tài liệu HTML). Cú pháp:
HTML - HyperText Markup Language
36
Làm việc với FRAME
Trong đó:
COLS: Xác định số cột trong một frameset.
ROWS: Xác định số dòng trong một frameset.
FRAMEBORDER: Xác định frameset sẽ hiển thị các đường biên giữa các frame.
BORDERCOLOR: Xác định màu cho đường biên.
SRC: Xác định địa chỉ URL của tài liệu cần hiển thị trong frame.
NAME: Gán tên cho một frame.
SCROLLING: Cho phép hiển thị hoặc không hiển thị thanh cuộn.
HTML - HyperText Markup Language
37
Các thẻ chèn âm thanh, hình ảnh
Liên kết với tập tin đa phương tiện tương tự như liên kết khác. Tuy vậy phải đặt tên đúng cho tập tin đa phương tiện, kiểu của tập tin.
Chèn âm thanh vào một tài liệu HTML.
Thẻ này không có thẻ kết thúc tương ứng (
HTML - HyperText Markup Language
38
Các thẻ chèn âm thanh, hình ảnh
Chèn một hình ảnh, một đoạn video vào tài liệu HTML: Để chèn một tập tin ảnh (.jpg, .gif, .bmp) hoặc video (.mpg, .avi) vào tài liệu HTML. Cú pháp:
HEIGHT = height HSPACE = vspace
VSPACE = hspace TITLE = title DYNSRC= url
START = FILEOPEN/MOUSEOVER
LOOP = n >
HTML - HyperText Markup Language
39
Các thẻ định dạng bảng biểu
Cú pháp định nghĩa bảng
| ALIGN = LEFT / CENTER / RIGHT VALIGN = TOP / MIDDLE / BOTTOM COLSPAN = n ROWSPAN = n > ... Nội dung của ô |
HTML - HyperText Markup Language
40
Các thẻ định dạng bảng biểu
ý nghĩa các tham số:
ALIGN / VALIGN: Canh lề cho bảng.
BORDER: Kích thước đường kẻ chia ô trong bảng, được đo theo pixel.
BORDERCOLOR: Màu đường kẻ
BORDERCOLORDARK, BORDERCOLORLIGHT: Màu phía tối và phía sáng cho đường kẻ nổi.
BACKGROUND: Địa chỉ tới tập tin ảnh dùng làm nền.
BGCOLOR: Màu nền
CELLSPACING: Khoảng cách giữa các ô trong bảng.
CELLPADDING: Khoảng cách giữa nội dung và đường kẻ trong mỗi ô của bảng.
COLSPAN: Chỉ định ô sẽ kéo dài trong bao nhiêu cột
ROWSPAN: Chỉ định ô sẽ kéo dài trong bao nhiêu hàng
HTML - HyperText Markup Language
41
Mẫu biểu (Form)
HTML Forms: Các HTML Form có thể có các hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn...
Tạo Form: Để tạo ra một form trong tài liệu HTML, sử dụng thẻ FORM với cú pháp như sau:
HTML - HyperText Markup Language
42
Mẫu biểu (Form)
Trong đó:
ACTION: Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là địa chỉ tới một chương trình CGI, một trang ASP...).
METHOD: Phương thức gửi dữ liệu.
NAME: Tên của form.
TARGET: Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server.
HTML - HyperText Markup Language
43
Mẫu biểu (Form)
Cú pháp thẻ INPUT:
TYPE=BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT
NAME= Nameinput VALUE = value >
HTML - HyperText Markup Language
44
Mẫu biểu (Form)
Tạo một danh sách lựa chọn. Cú pháp:
Tạo hộp soạn thảo văn bản. Cú pháp:
HTML - HyperText Markup Language
45
Chương III
MICROSOFT FRONTPAGE
46
Microsoft Frontpage là một bộ công cụ soạn thảo thiết kế web chuyên nghiệp của Microsoft.
Tính năng:
Giao diện khá thân thiện và dễ sử dụng.
Hỗ trợ khả năng thiết kế, tổ chức và quản lý một website.
Đưa website lên mạng Intranet và mạng Internet.
…
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
47
Khởi động
Start / Programs / Microsoft Frontpage.
Double click vào biểu tượng trên Desktop (nếu có).
Thoát
Click vào nút Close trên thanh tiêu đề.
Nhấn Alt + F4.
File / Exit.
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
48
Cửa sổ làm việc
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
49
Ý nghĩa và tính năng của các thành phần
Views bar:
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
50
Folder list:
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
Toolbar Standard:
51
Thiết kế trang web:
TỔNG QUAN VỀ MICROSOFT FRONTPAGE
52
Tạo một website mới:
File / New… như hình bên.
Kích New web site / One page Web site… xuất hiện hộp hội thoại sau:
CÁC THAO TÁC CƠ BẢN
53
Click nút OK, xuất hiện màn hình:
CÁC THAO TÁC CƠ BẢN
54
Tạo thêm các thư mục trong website
Nhấp vào biểu tượng ẩn hiện thư mục (nếu Folder list chưa có trên màn hình).
Kích chuột phải tại thư mục cha của thư mục cần tạo.
Chọn New / Folder như hình sau:
CÁC THAO TÁC CƠ BẢN
55
Tạo ra một trang web mới
File / New
File / Save với ten index.html
CÁC THAO TÁC CƠ BẢN
56
Mở một trang Web bất kỳ:
File / Open… (Ctrl + O)
Kích chọn tên trang web cần mở.
Xóa một trang Web:
Kích chuột phải tại tên trang web muốn xóa trong Folder List.
Chọn Delete.
Thêm các trang Web hoặc thư mục:
File / Import… xuất hiện hộp hội thoại như sau:
CÁC THAO TÁC CƠ BẢN
57
CÁC THAO TÁC CƠ BẢN
58
Tạo liên kết các trang Web:
Hyperlink (siêu liên kết): nối kết từ vị trí này đến một đích khác.
Đích: có thể trong cùng site hay ngoài site.
Là hình ảnh, địa chỉ e-mail, tập tin, chương trình,…
Kích vào Hyperlink thì đích sẽ hiển thị.
Đích của Hyperlink được tạo mã dưới dạng một URL.
Các kiểu liên kết:
Tạo liên kết văn bản giữa các trang web.
Tạo liên kết thư điện tử.
Tạo liên kết bookmark.
Tạo liên kết đến địa chỉ website khác.
Tạo liên kết dạng bản đồ ảnh.
CÁC THAO TÁC CƠ BẢN
59
Tạo liên kết văn bản giữa các trang Web
Đánh dấu chuỗi văn bản cần tạo liên kết.
Kích phải chuột vào vùng đã chọn (Ctrl + K), chọn Hyperlink… xuất hiện hộp hội thoại:
CÁC THAO TÁC CƠ BẢN
60
Tạo liên kết thư điện tử
Đánh dấu chuỗi ký tự cần tạo liên kết.
Kích phải chuột vào vùng đã chọn (Ctrl + K), chọn Hyperlink… xuất hiện hộp hội thoại:
CÁC THAO TÁC CƠ BẢN
Chọn trang cần liên kết
61
Tạo liên kết bookmark
Tạo bookmark
Chọn cụm từ cần tạo Bookmark.
Insert / Bookmark… (Ctrl + R) xuất hiện hộp hội thoại Bookmark sau:
CÁC THAO TÁC CƠ BẢN
62
Tạo liên kết đến Bookmark
Đánh dấu chọn cụm đã tạo Bookmark.
Kích chuột phải tại đó, chọn Hyperlink properties… xuất hiện hộp thoại Insert Hyperlink sau:
CÁC THAO TÁC CƠ BẢN
Chọn nút Bookmark, xuất hiện hộp thoại trên.
Kích chọn tên Bookmark, nhấp OK.
63
Tạo liên kết đến địa chỉ Website
Tương tự như tạo liên kết giữa các trang Web.
Trong hộp thoại Insert Hyperlink, nhập địa chỉ Website cần liên kết.
CÁC THAO TÁC CƠ BẢN
Chọn trang cần liên kết
64
Tạo liên kết dạng bản đồ ảnh (Hostpot)
Hostpot: tạo chỉ điểm trên ảnh làm điểm liên kết.
Ví dụ: bạn có hình bản đồ, dùng Hostpot để tạo liên kết đến các quốc gia.
Tạo Hostpot:
Insert / Picture / From File… rồi chỉ đường dẫn đến tập tin ảnh.
Thanh công cụ Picture xuất hiện, chọn dạng chỉ điểm cần tạo trên thanh Picture.
Đưa chuột đến hình đã chọn (chuột hiện thành hình cây bút vẽ), click và kéo để tạo ra điểm liên kết.
Xuất hiện hộp hội thoại Insert Hyperlink, chọn trang Web để liên kết đến vùng vừa chọn.
CÁC THAO TÁC CƠ BẢN
65
Sửa đổi các liên kết:
Thay đổi liên kết:
Nhấp chuột phải tại mục liên kết cần thay đổi, chọn Hyperlink Properties…
Trong hộp thoại Edit Hyperlink, chọn trang liên kết cần thay thế.
Xoá liên kết:
Tương tự như trên nhưng trong hộp thoại Edit Hyperlink, kích nút Remove Link.
Khi đó, chuỗi ký tự, picture,… không còn đường gạch chân nữa.
CÁC THAO TÁC CƠ BẢN
66
Tạo danh sách
Format / Bullets and Numbering
Chọn thẻ Plain Bullets trong hộp thoại Bullets and numbering.
ĐỊNH DẠNG TRANG WEB
67
Tạo danh sách
Chọn thẻ Picture Bullets.
ĐỊNH DẠNG TRANG WEB
68
Tạo danh sách
Chọn thẻ Numbers để tạo danh sách thứ tự.
ĐỊNH DẠNG TRANG WEB
69
Thay đổi thuộc tính của trang Web:
Đặt tiêu đề.
Thiết lập nhạc nền.
Thiết lập hình nền và màu nền.
Thiết lập lề.
Thiết lập Font chữ cho toàn bộ nội dung trang web.
Thực hiện như sau:
Kích chuột phải tại trang cần thay đổi thuộc tính, chọn Page Properties…
ĐỊNH DẠNG TRANG WEB
70
Đặt tiêu đề cho trang web.
Chọn thẻ General.
Nhập tiêu đề trang web trong mục Title.
ĐỊNH DẠNG TRANG WEB
71
Thiết lập nhạc nền cho trang web.
Chọn thẻ General.
Trong phần Background sound, trong mục Location, chọn nút Browse.
Hộp thoại Background sound hiển thị, chọn nhạc nền cho trang web.
ĐỊNH DẠNG TRANG WEB
72
Thiết lập hình nền và màu nền cho trang web.
Chọn thẻ Formatting.
ĐỊNH DẠNG TRANG WEB
73
Thiết lập lề cho trang web.
Chọn thẻ Advanced.
ĐỊNH DẠNG TRANG WEB
74
Thiết lập Font chữ cho toàn bộ nội dung trong trang web.
Chọn thẻ Advanced.
Trong mục Styles, chọn nút Body style…, xuất hiện hộp thoại Modify Style.
Kích nút Format, chọn Font…
ĐỊNH DẠNG TRANG WEB
75
Bảng (Table)
Table / Draw Table
ĐỊNH DẠNG TRANG WEB
76
Bảng (Table)
Đặt thuộc tính của bảng
ĐỊNH DẠNG TRANG WEB
77
Bảng (Table)
Đặt thuộc tính của ô
ĐỊNH DẠNG TRANG WEB
78
Theme:
Tập hợp các thành phần được thiết kế sẵn và các sơ đồ màu.
Theme tác động lên tất cả các thuộc tính hiển thị của trang web.
Color: sơ đồ màu sử dụng để khởi tạo màu cho: body text, hyperlink, headings, page banner text,…
Graphic
Style: một theme sử dụng style (font) cho body text và headings.
Chọn trang muốn đặt theme.
Format / Theme… hộp thoại Theme xuất hiện:
ĐỊNH DẠNG TRANG WEB
79
ĐỊNH DẠNG TRANG WEB
Chọn chế độ màu sáng
Chọn chế độ hình đồ họa
Chọn hiển thị hình nền
80
Style:
Tạo một Style:
Format / Slyle…
Chọn nút New…
ĐỊNH DẠNG TRANG WEB
81
Style:
Sử dụng một Style:
Trong page view chọn đoạn văn bản.
Chọn Style trong hộp thoại style.
Kích Bullets nếu muốn áp dụng nhanh.
Sửa đổi Style:
Format / Style…
Chọn phần muốn sửa đổi trong hộp thoại style.
ĐỊNH DẠNG TRANG WEB
82
Thao tác chung để tạo ra các hiệu ứng web:
Trong page view chọn vị trí cần tạo hiệu ứng.
Insert / Web Component… xuất hiện hộp thoại Insert Web Component.
Một số hiệu ứng web:
Hit counter
Marquee
Interactive button
Banner ad manager
Web search
Office Spreadsheet
…
TẠO CÁC HIỆU ỨNG WEB
83
Hit counter:
Hiển thị số lần truy cập trang web.
Chọn Hit Counter Type trong Component Type.
Chọn kiểu thể hiện của Hit counter trong Choose a counter style.
Kích Finish xuất hiện hộp thoại Hit counter Properties.
Custom: Nếu chọn kiểu đồ hoạ khác, nhập đường dẫn tập tin .gif.
Reset counter to: thiết lập lại bộ đếm bắt đầu bởi một số đặc biệt.
Kích OK để chấp nhận.
TẠO CÁC HIỆU ỨNG WEB
84
TẠO CÁC HIỆU ỨNG WEB
85
Marquee:
Hiển thị dòng văn bản chạy ngang màn hình trang web.
Chọn Dynamic Effect trong Component Type.
Chọn Marquee trong Choose an effect.
Kích nút Finish xuất hiện hộp thoại Marquee properties.
TẠO CÁC HIỆU ỨNG WEB
86
TẠO CÁC HIỆU ỨNG WEB
87
Interactive button:
Chèn vào một liên kết đến một trang hay tập tin khác.
NSD kích chuột vào Interactive button, xuất hiện một hình ảnh hay nghe một hiệu ứng âm thanh.
TẠO CÁC HIỆU ỨNG WEB
Chọn Dynamic Effect trong Component Type.
Chọn Interactive trong Choose an effect.
Kích nút Finish xuất hiện hộp thoại Interactive buttons.
88
TẠO CÁC HIỆU ỨNG WEB
Chọn kiểu nút
Nhập nhãn cho nút
Nhập URL của trang hay tập tin muốn hiển thị
89
Web search:
Cho phép NSD tìm kiếm thông tin theo một đoạn văn bản xác định.
Chọn Web search trong Component Type.
TẠO CÁC HIỆU ỨNG WEB
Chọn Current Web trong Choose a Type of search.
Kích nút Finish xuất hiện hộp thoại Search Form properties.
90
Web search:
Chọn thẻ Search Form Properties.
TẠO CÁC HIỆU ỨNG WEB
91
TẠO CÁC HIỆU ỨNG WEB
Office Spreadsheet:
Tạo bảng tính cho Web.
Chọn Spreadsheets and charts trong Component Type.
Chọn Office Spreadsheet trong Choose Control.
Kích nút Finish, xuất hiện bảng tính trong trang web.
92
Chèn hình ảnh vào trang web:
Trong page view nhấp chuột tại vị trí cần chèn ảnh.
Insert / Picture / From File…
Xuất hiện hộp thoại Picture:
HÌNH ẢNH VÀ ÂM THANH
Chọn tập tin ảnh cần hiển thị trên trang web.
Kích nút Insert chấp nhận.
93
Chèn Clip Art vào trang web:
Trong page view nhấp chuột tại vị trí cần chèn Clip-Art.
Insert / Picture / Clip Art…
Xuất hiện hộp thoại Clip Art:
HÌNH ẢNH VÀ ÂM THANH
Chọn Clip Art cần chèn trên trang web.
Kích nút Insert chấp nhận.
94
Tạo Thumbnail cho các hình ảnh trong trang web:
Thumbnail là giải pháp tạo ra các hình ảnh nhỏ từ các hình ảnh lớn và liên kết phóng to hình ảnh cho NSD xem khi click vào hình ảnh đó.
Tạo Thumbnail với một hình ảnh:
Chèn một hình ảnh từ một tập tin bất kỳ vào trang web.
Kích chuột phải lên hình ảnh đó, chọn Auto Thumbnail.
Hình ảnh đó tự động thu nhỏ lại trên trang web.
HÌNH ẢNH VÀ ÂM THANH
95
HÌNH ẢNH VÀ ÂM THANH
96
Tạo Thumbnail với nhiều hình ảnh một lúc:
Chọn trang cần Thumbnail.
Insert / New Photo Gallery… xuất hiện hộp thoại Photo Gallery.
Chọn thẻ Pictures.
Kích nút Add, chọn Pictures from files.
Xuất hiện hộp thoại File Open, chọn những tập tin ảnh cần Thumbnail.
HÌNH ẢNH VÀ ÂM THANH
97
HÌNH ẢNH VÀ ÂM THANH
98
Chọn thẻ Layout.
Chọn kiểu hiển thị sắp xếp các ảnh Thumbnail trên trang trong khung Choose a layout.
Kích OK chấp nhận.
HÌNH ẢNH VÀ ÂM THANH
99
Chỉnh sửa các hình ảnh trong trang web:
Thay đổi kích thước hình ảnh.
Di chuyển ảnh.
Thay đổi thuộc tính ảnh:
Kích chuột phải tại ảnh cần thay đổi thuộc tính
Chọn Picture Properties, xuất hiện hộp thoại Picture Properties.
Chọn thẻ General.
Định dạng vị trí ảnh:
Kích chuột phải tại ảnh cần thay đổi thuộc tính
Chọn Picture Properties, xuất hiện hộp thoại Picture Properties.
Chọn thẻ Appearance.
HÌNH ẢNH VÀ ÂM THANH
100
Thêm video vào trang web:
Chèn tập tin Video vào trang web:
Chọn vị trí cần chèn video.
Insert / Picture / Video… xuất hiện hộp thoại Video.
HÌNH ẢNH VÀ ÂM THANH
Chọn tập tin video cần chèn
101
Thay đổi thuộc tính Video:
Kích chuột phải tại ảnh cần thay đổi thuộc tính
Chọn Picture Properties, xuất hiện hộp thoại Picture Properties.
Chọn thẻ Video.
HÌNH ẢNH VÀ ÂM THANH
102
Khung (Frame):
Cung cấp khả năng phân chia màn hình trình duyệt thành nhiều vùng, mỗi vùng chứa một trang web riêng biệt.
Mục đích: làm cho website dễ xem hơn và dễ truy cập.
Frontpage hỗ trợ 10 cách bố trí khung.
FRAME
103
Tạo Frame:
File / New…
Chọn More page templates… xuất hiện hộp thoại Page Templates.
Chọn thẻ Frames Pages.
FRAME
Chọn dạng thể hiện của Frame
104
Hiển thị cửa sổ frame giống như cấu trúc frame đã chọn.
Nhập nội dung vào frame: 2 cách
FRAME
105
Xoá một Frame:
Chọn Frame cần xoá (frame có khung viền màu xanh).
Frames / Delete Frame.
Nếu trang chỉ chứa một Frame thì không thể xoá frame đó được.
FRAME
106
Thêm một Frame:
Chọn Frame cần thêm frame.
Frames / Split Frame.
Xuất hiện hộp thoại Split Frame:
Split into columns: chia frame làm 2 theo dạng cột.
Split into rows: chia frame làm 2 theo dạng dòng.
FRAME
107
Thiết lập thuộc tính cho Frame:
Chọn Frame cần thêm frame.
Frames / Frame properties.
FRAME
108
Dạng chung của Form: danh sách các câu hỏi kèm theo các ô trống để NSD điền vào câu trả lời.
Tạo Form: 3 cách
Sử dụng form page wizard.
Sử dụng form mẫu.
Tạo form từ đầu.
Các đối tượng thường gặp trên form:
Text Box
Text Area
Check Box
Option Button
Drop – Down Box
FORM
Push Button
Picture
Label
File Upload
109
Tạo Text Box:
Chọn vị trí cần đặt Textbox.
Insert / Form / Textbox.
Tạo nhãn cho Textbox, các nút
FORM
Double-click vào đây
110
Tạo Text Area:
Chọn vị trí cần đặt Text Area.
Insert / Form / Text Area.
Tạo nhãn cho Text Area.
FORM
Double-click vào đây
111
Tạo Drop-down Box:
Chọn vị trí cần đặt Drop-down Box.
Insert / Form / Drop-down Box.
Tạo nhãn cho Drop-down Box.
FORM
Double-click vào đây
112
Tạo Check Box:
Chọn vị trí cần đặt Check Box.
Insert / Form / Check Box.
Tạo nhãn cho Check Box.
FORM
Double-click vào đây
113
Tạo Option Button:
Chọn vị trí cần đặt Option Button.
Insert / Form / Option Button.
Tạo nhãn cho Option Button.
FORM
Double-click vào đây
114
Tạo Push Button:
Chọn vị trí cần đặt Push Button.
Insert / Form / Push Button.
Tạo nhãn cho Push Button.
FORM
Double-click vào đây
115
Chèn Picture vào Form:
Chọn vị trí cần đặt ảnh.
Insert / Form / Picture…
Tạo nhãn cho ảnh.
FORM
116
Tạo mục File Upload lên mạng:
Chọn vị trí cần đặt File Upload.
Insert / Form / File Upload
Thay đổi thuộc tính trong hộp thoại File upload properties.
FORM
Double-click vào đây
117
Quản lý kết quả từ Form:
Kích chuột phải tại form, chọn Form Properties…
Xuất hiện hộp thoại Form properties.
Kích nút Options… xuất hiện hộp thoại Saving Results.
FORM
Chọn nút Option
118
Chọn thẻ Saving Fields.
Trong danh sách Form Fields to save, chọn fields không muốn lưu kết quả, nhấn Del.
Chọn Date format và Time format để lưu ngày, giờ form.
Chọn bất kỳ kiểu thêm thông tin muốn lưu vào các kết quả chính thức.
Chọn các trường trong các kết quả để chỉ rõ thông tin muốn tổng hợp lại từ Form bao gồm:
Ngày, giờ form đã Submit.
Tên, địa chỉ IP, User name của máy tính,…
FORM
119
Lưu kết quả vào Form:
Lưu kết quả (dữ liệu mà NSD nhập vào) vào một tập tin văn bản hay tập tin HTML.
Kích chuột phải tại form, chọn Form Properties…
Xuất hiện hộp thoại Form properties.
Kích nút Options… xuất hiện hộp thoại Saving Results.
Chọn thẻ File Results.
FORM
120
FORM
121
Giới thiệu về Plug-in:
Kết hợp dùng các Plug-in vào trình duyệt web giúp bạn có thể mở rộng khả năng kết hợp hài hòa và sống động giữa văn bản, đồ họa, audio, video,…
Các Plug-in phổ biến:
Shockware Flash: dùng cho ảnh động, phim và âm thanh.
Quick Time
RealPlayer
Acrobat Reader
PLUG-IN & ACTIVE CONTROL
122
Chèn Plug-in vào trang web:
Insert / Web Component… xuất hiện hộp thoại Web Component.
Chọn Advanced Controls trong Component type.
PLUG-IN & ACTIVE CONTROL
Chọn Plug-in trong Choose a control.
Kích nút Finish, xuất hiện hộp thoại Plug-in properties.
123
PLUG-IN & ACTIVE CONTROL
Nhập URL hay vị trí tập tin của Plug-in
Nhập HTML hay text đơn giản hiển thị tại vị trí đặt plug-in trong những bộ trình duyệt web không hỗ trợ plug-in
124
ActiveX Control:
Dựa vào công nghệ Object Linking and Embedding (OLE – nhúng là liên kết đối tượng), ActiveX Control cho phép người thiết kế web tạo ra các điều khiển để bổ sung tính năng cho trang web.
PLUG-IN & ACTIVEX CONTROL
Insert / Web component… xuất hiện hộp thoại Insert web component.
Click Next tiếp tục
125
PLUG-IN & ACTIVE CONTROL
Click Finish kết thúc
Chọn Control muốn chèn vao trang web
Thêm bớt các Control
126
ActiveX Control:
Xác lập thuộc tính cho ActiveX Control:
Kích chuột phải tại ActiveX Control, chọn ActiveX Control.
Hoặc double-click tại ActiveX Control.
Thêm hay bớt các ActiveX Control:
Nhấn nút Customize.
PLUG-IN & ACTIVE CONTROL
Xuất hiện hộp thoại Customizr ActiveX Control List, chọn danh sách Control.
Click Next tiếp tục
127
Xuất bản website lên Webserver:
Yêu cầu:
Máy chủ Web server.
Có cài đặt IIS ( Internet Information Server).
Thực hiện:
Thiết lập Server Extension Web:
Start / Setting / Control Panel / Performance and Maintenance / Administrator và thực hiện tiếp theo sự hướng dẫn.
Xuất bản webste từ Frontpage:
Đóng tất cả các trang web.
File / Publish Site… xuất hiện hộp thoại
XUẤT BẢN WEBSITE
128
Xuất bản website lên Webserver:
Yêu cầu:
Máy chủ Web server.
Có cài đặt IIS ( Internet Information Server).
Thực hiện:
Thiết lập Server Extension Web:
Start / Setting / Control Panel / Performance and Maintenance / Administrator và thực hiện tiếp theo sự hướng dẫn.
Xuất bản webste từ Frontpage:
Đóng tất cả các trang web.
File / Publish Site… xuất hiện hộp thoại Remote website Properties.
Chọn mục Frontpage or SharePoint Services.
Nhập URL tại Remote web site location.
XUẤT BẢN WEBSITE
129
XUẤT BẢN WEBSITE
Nhập URL
130
Xuất bản website lên vị trí trên máy của bạn:
XUẤT BẢN WEBSITE
Đóng tất cả các trang web.
File / Publish Site… xuất hiện hộp thoại Remote website Properties.
Chọn mục File System.
Nhập đường dẫn đến vị trí cần đưa website lên máy.
131
XUẤT BẢN WEBSITE
Nhập URL
* Một số tài liệu cũ có thể bị lỗi font khi hiển thị do dùng bộ mã không phải Unikey ...
Người chia sẻ: Lê Thị Xuân Huyền
Dung lượng: |
Lượt tài: 0
Loại file:
Nguồn : Chưa rõ
(Tài liệu chưa được thẩm định)