Thiết kế Web

Bài 2
Thiết kế trang Web trên
Microsoft Frontpage 2000
Giới thiệu Về Microsoft Frontpage 2000.
Fontpage 2000 là một phiên bản của hãng Microsoft, có trong bộ cài Office2000.
Màn hình của Fontpage2000 được mô tả như sau:
- Thiết kế trên thanh công cụ Normal
- Cửa sổ HTML dùng để soạn thảo các các câu lệnh của HTML.
- Của sổ Preview dùng để xem trước giao diện của trang Web.
II. Các bước tạo môt trang Web
- Tạo một dự án (Tức là tạo một thư mục trong đó có chứa toàn bộ các trang Web con và trang Web chủ
cũng như thư mục chứa ảnh...)
- Thêm các trang Web con, thư mục vào dự án Web
- Đưa nội dung vào trang Web và chỉnh sửa nội dung
- Quản lý trang Web (xem lại bố cục của trang Web, chỉnh sửa về mặt bố cục như liên kết các bố trí khác của trang Web.
Đưa trang Web lên trình duyệt Internet Explorer.
III. Tạo dự án Web
Vào menu File chọn New/ Web
Và chọn One page Web để làm mới ( thường chọn nó).
Trong mục Options là đường dẫn đến tập tin đó.
Còn các lựa chọn khác dùng để hỗ trợ các dịch vụ và tạo dự
án Web mẫu.
Muốn hiển thị toàn bộ các tập tin, thư mục trong một dự án Web thì vào menu View/ chọn Folder List hoặc bấm vào biểu tượng số 5 trên thanh công cụ Standard.
Muốn tạo một thư mục trong một dự án thì vào menu File/New/ Folder hoặc Click chuột phải chọn New Folder. Các công việc thêm, bớt, đổi tên thư mục, tập tin đều phải được thực hiện trên cùng một dự án. Khi đó Frontpage nó sẽ quản lý và cập nhật theo sự thay đổi đó. Nếu thực hiện ngoài một dự án thì nó sẽ làm mất sự liên kết giữa các trang Web với nhau.
IV. Tạo liên kết cho trang Web
Bôi đen đối tượng cần liên kết (trong đó có
đoạn văn bản hoặc đối
tượng ảnh). Sau chọn
Insert/Hyperlink (hoặc
bấm Ctrl + K). Biểu tượng
- Lưu trữ trang Web vào menu File /Save. Trong mục
File name không cần chỉ định phần đuôi .HTM hoặc .HTML
FontPage đã mặc định phần đuôi là .HTM
Muốn liên kết với một trang Web mới (trang Web sẽ tạo sau đó thì bấm vào biểu tượng).
Creat Hyperlink xuất hiện.
Trong hộp thoại URL chọn đường dẫn đến trang Web (tập tin) cần liên kết. Hoặc có thể chọn trực tiếp trên cửa sổ Name. Hoặc có thể chọn liên kết với một trang Web nào đó ở một thư mục bất kỳ, ta bấm vào biểu tượng .
Muốn liên kết với một địa chỉ Mail thì bấm vào biểu tượng
V. Chèn một số đối tượng vào trang Web
a, Chèn ảnh vào trang:
Chọn biểu tượng Insert Picture From File trên thanh công cụ Standard hoặc vào menu Insert/Picture. Chọn ảnh trong cửa sổ Name hoặc vào biểu tượng . Nếu chọn ảnh có sẵn trong bộ cài đặt Office2000 thì
nhấn chuột tại biểu
tượng Clip Art

b, Chèn đường thẳng
Vào Insert/Horizontal Line
Ta có thể chọn thuộc tính của đường thẳng, chuột phải/ Horizontol Line Properties, sau đó có thể chọn một số thuộc tính như: màu sắc, cỡ,...
c, Chèn ngày giờ
Vào menu insert/ date and time
Nếu chọn: Date this page was last automaticlly updated
Thì khi mở trình duyệt hay trang Web trên mạng Internet tự động cập nhật ngày tháng, giờ của hệ thống.
VI. Định dạng bảng cho trang Web
Để một trang Web được sinh động và thẩm mỹ thì công cụ thiét kế bảng biểu là không thể thiếu (Ta có thể thấy gần như trang Web nào hiện có trên mạng đều sử dụng công cụ này).
Vào menu Table/
Insert/ Table. Sau
đó chọn số hàng,
số cột cần thiết).
Aligment: Chọn kiểu căn chỉnh dữ liệu trong bảng
Border size: Chọn kích thước đường viền của bảng
Cell padding: Khoảng cách từ dữ liệu của bảng đến đường viền
Cell Spacing: Khoảng cách giữa các ô trong bảng
Specify width: Thiết lập chiều rộng của bảng
Thiết lập thuộc tính của bảng:
Bôi đen bảng /bấm chuột phải /Table Properties
- Trong thành phần Border
Size: cỡ của đường viền
- Trong thành phần Background
+, Color: màu nền
+, Nếu đánh dấu vào hộp kiểm: Use Background Picture và chọn Browse thì ta chọn ảnh nền cho bảng.
b. Căn chỉnh
- Chọn các ô cần thiết lập thuộc tính, sau đó nhấn phải chuột /Cell Properties (Alt+Enter)
Horizontal Alight: Căn chỉnh theo chiều ngang
Vertical Alight: Căn chỉnh theo chiều dọc
- Chèn hàng, cột: Bôi đen hàng, cột cần chèn. Sau đó
Color: Màu của đường viền
- Hợp các ô trong bảng: Chọn các ô cần hợp/ Chuột phải/ Merge Cells.
- Tách các ô: Chọn Split Cells.
Tự điều chỉnh độ rộng của cột Table/Auto Fit.
chọn Insert Rows hoặc Insert Column
VII. Tạo Frame trong trang Web
Vào menu File/New/Page/ Frame page/ Chọn mẫu Frame thích hợp.
Mục đích của việc dùng Frame
- Tạo một thành phần nào đó trong trang Web được giữ cố định và các thành phần khác thay đổi.
- Giảm kích thước của trang Web khi tải về.
+, Set Initial page: chọn một trang Web đã tồn tại hiển thị tại khung cửa sổ đó.
+, New page thiết lập một trang mới được hiển thị tại khung.
2. Thiết lập các thuộc tính cho Frame
- Trong Frame bấm phải chuột cần chọn thuộc tính/ chọn Frame Properties
+, Trong hộp thoại name: là tên cho khung.
+, Initial: chọn lại trang Web cần hiển thị tại khung.
+, Width: Thiết lập lề trái cho khung
+, Height: Thiết lập lề theo chiều ngang

+, Nếu kích chuột vào Resizable in Browse
thì nó cho phép thay đổi kích thước của các khung khi lên trình duyệt. Đây là điều đặc biệt cần lưu tâm. Nếu quên thì trang Web của bạn khi lên mạng sẽ bị thay đổi nếu người dùng (người truy cập có thể thay đổi nó).
+, Show Scrollbar: Thiết lập trạng thái cho khung
- If Needed: Hiển thị thanh cuộn khi nội dung của khung nhỏ hơn kích thước của nó.
- Never: Không bao giờ có thanh cuộn
- Always: Luôn luôn có thanh cuộn
+, Frame page/Frame
Frame spacing: Thiết lập đường khung giữa các khung.
Show border: hiển thị các khung. Nếu bỏ chọn thì khung không được hiển thị.
Frame Spacing: Thiết lập độ rộng của đường khung trong Frame.
3. Liên kết trang Web trong Frame
Chọn đối tượng cần tạo liên kết/ Chọn menu Inert/ Hyperlink/ Chọn trang Web cần liên kết.
Đối tượng Target Frame:
Chú ý : Với một Frame gồm nhiều các Frame con thì khi lưu nội dung vào máy phải lưu tất cả các Frame con và Frame chính.
- Page Default (none): Hiển thị Trang Web mới tại cửa sổ chính.
- Để nội dung của trang Web được liên kết hiển thị trên toàn bộ trang Web Thì ta chọn Whole Page hoặc chọn Parent Frame
- Nếu chọn Same Frame: Thì trang hiển thị tại khung chọn đối tượng liên kết
- Nếu chọn New Window: Hiển thị trang Web ở cửa sổ mới.
4. Tách Frame
Chọn Frame cần tách/ Chọn menu Frame/ Split Frame
5. Xoá Frame
Chọn Frame cần xoá, vào menu Frame chọn Delete frame.
Split Frame columns: tách thêm cột
Split Frame rows: Tách thêm hàng
VIII. Chọn Font tiếng Việt trên trình duyệt và đặt tên cho trang Web
1. Để hiển thị tiếng Việt trên trang Web, font chữ ABC hoàn toàn không làm được việc này. Một công cụ hỗ trợ Tiếng Việt trên trình duyệt Internet là Font chữ Unicode. Bộ cài đặt này có trong bộ font Vietkey2000. Sau đó ta thường chọn các Font sau để có được tiếng Việt trên trình duyệt:
Arial, Times New Roman, Verdara,...
2. Đặt tên cho trang Web
Ta có thể đặt tên cho trang Web (Tên file) theo ý muốn (không đặt tên quá dài). Nhưng có điều lưu ý là đối với trang chủ thì chỉ đặt với các tên sau:
Index.htm
Index.html
Default.htm
Default.html