Ebook thực hành thiết kế trang web với microsoft frontpage phần 2 nguyễn trường sinh (chủ biên)

Trang 1

Chương 6:

THAY ĐỔI BỐ CỤC TRANG WEB

Trong chương này, chúng ta sẽ:

« Tìm hiểu bố cục trang với bảng

«e _ Bố cục các trang Web với khung

Microsoft Office Frontpage 2003 cĩ kèm theo một loạt các khuơn mẫu và wizard giúp chúng ta dễ đàng tạo ra các Website tình tế và phức tạp Khi muốn tạo nhanh một bản giới thiệu Website cho mình, cho doanh nghiệp

hoặc nhĩm, bạn cĩ thể sử dụng các se tạo sắn này

Nếu bố cục của một sửe định nghĩa sẵn khơng đáp ứng yêu cầu của mình, bạn cĩ thể tùy biến theo một số cách để làm cho nĩ trở nên thích hợp Tuy nhiên, nếu khơng cĩ hiểu biết sâu sắc về việc sửe được lắp ghép như thế nào, bạn sẽ dễ dàng phá vỡ sử khi thực hiện các thay đổi Để cho phép ban dé dang tao ra cae site c6 dang thé hién tinh té, FrontPage sé bảo vệ các phần cơ bản và phức tạp để đảm bảo sử hoạt động chính xác Việc làm thay đổi cấu trúc mà khơng hiểu rõ bản chất của nĩ sẽ gây ra những kết quả khơng thể nĩi trước được

Để giúp bạn hiểu rõ hơn về cách mà nhiều Website chuyên nghiệp được

tạo ra, chương này sẽ xem xét một số kỹ thuật phức tạp được dùng để bố

cục trang Đầu tiên, bạn sẽ làm việc với bảng để tạo ra cấu trúc cho

trang Sau đĩ, khám phá việc sử dụng khung Bố cục trang với bảng

Việc sử dụng bảng trong thiết kế Web hồn tồn khác với việc sử dụng

Trang 2

@

M 186 Chương 6: Thay đổi bố cục trang Web

cấu trúc thơng tin giống như các bảng khác Nhưng mục dích thực sự của bảng trong thiết kế Web là để phân chia trang thành các hộp cu thé

Kích thước của những hộp này được tỉnh theo một con số tuyệt đối là pixel hoặc giá trị phần trảm tương đối của kích thước cĩ hiệu lực trên màn hình Khi cấu trúc một trang Web bằng cách dùng bảng, bạn cĩ thể kiểm sốt bố cục chính xác hơn Chúng ta cĩ thể tạo ra các bố cục dạng

báo chí hấp dẫn bằng cách điển một số ơ với nội dung và để trống một số ơ khác Để làm cho mọi thứ được hấp dẫn hơn, bạn cĩ thể léng cdc bang

trong các bảng khác để cĩ được kiểm sốt chặt chẽ hơn với các vùng trên

trang

Ơ tac vy Layout Tables and Cells cĩ kèm theo tất cả các cơng cụ cần thiết để thiết kế bố cục trang dựa trên bảng Từ ơ tác vụ này, bạn cĩ thể: - _ Vẽ một bảng bố cục hoặc chèn vào một ư bố cục

Thiết lập chiều rộng và chiều cao của bảng hoặc 6 đang được chọn -_ Canh chỉnh bảng theo lễ trái, phải hoặc giữa trang

- _ Điều chỉnh lễ của trang

Chọn các tùy chọn từ 12 tùy chọn bố cục trang dựa trên bảng đã được định nghĩa sẵn

Bạn cũng cĩ thể chọn để biển thị cơng cụ Layout Tool của FrontPage,

một hướng dẫn xuất hiện trên trang Web để cho biết nhiều khía cạnh khác nhau của bảng mà mình đang tạo, chẳng hạn như chiều rộng và

chiểu cao của bảng hoặc 6 Chung ta sit dụng cơng cụ này để nhanh

chĩng thay đổi kích thước bảng và xem kết quả các thay đổi của mình

Với việc sử dụng cơng cụ Layout Tool, bạn dễ dàng áp dụng bố cục bảng

bất kỳ đã được định nghĩa để phù hợp với nhu cầu của mình

Nĩi chung, bạn chỉ nên dùng một bố cục trang trong toan bé site, mặc dù cũng cĩ một số si‡e sử dụng một bố cục khác cho trang chủ Khi lập kế hoạch cho bố cục trang, bạn cần xem xét trước các phần tử quan trọng cho mỗi trang để cĩ được một thiết kế tổng thể phù hợp cho mọi trang Sau đĩ, bạn nên tạo và thử nghiệm một trang mẫu trước Khi đã cĩ các

phản tử theo đúng cách mình muốn, bạn cĩ thể tạo nội dung hoặc đưa

nội dung cĩ sẵn vào khung sườn này Khi lập kế hoạch sửe theo cách này, bạn tránh được việc phải điều chỉnh các thay đổi trên một số trang

Trang 3

Trong bài thực hành này, bạn sẽ tạo một khuơn mẫu bố cục trang cơ bản với các vùng dành cho lơgơ, tiêu để trang, bảng nội dung và thơng tin site, cing như một vùng dành cho nội dung Bạn sẽ thực hiện điều này

bằng cách áp dụng một trong như bảng bố cục đã được định nghĩa sắn

0 Bạn cân khởi động FrontPage va đĩng các ơ tác uụ đang mở

trước khi thực hiện bài thực hành này

1 Nhấp vào nút Create a new normal page để tạo ra một trang mới

Một tập tin mới cĩ tên là „eu_page_1.htm sẽ mở ra

Q Để hiển thị các SereenTip uà phím tắt cho các nút trên thanh

cơng cụ, hãy nhấp uào mục Customize trong menu Tools va sau dé chon muc Show shortcut keys in ScreenTips

2 Nhấp nút Save Hộp thoại Save As sẽ xudt hién véi My Web Sites được chọn trong hộp Save in

3 Trong hộp File name, nhập table_template

4 Nhấp nút Change title để mở hộp thoại Set Page Title (xem hình 6-1)

Hình 6-1: Hộp thoại Set Page Title

5 Trong hộp Page title, nhập vào dịng Table Layout Template

6 Nhấp nút OK để đĩng hộp thoại Set Page Title Sau đĩ, nhấp nút

Save để đĩng hộp thoại Save As và lưu lại tập tin của bạn

7 Nếu Folder List xuất hiện, hãy đĩng nĩ lại để bạn cĩ thể thấy trang Web mình nhiều hơn

8 Nhấp vào phan thân của trang table_template

Trang 5

10 Trong vùng New tables and cells, nhấp vào mục Insert Layout Table

Các điểm đánh dấu bảng xuất hiện trong phần thân của trang cho

biết một bảng rộng 450pixel và cao 450 pixel (xem hình 6-3)

11 Trong vùng Table Properties, nhập 640 vào hộp Width

12 Cũng trong vùng Table Properties, nhấp vào nút Align Center

13 Ở cuối của ơ tác vụ Layout Tables and Cells, đặt con trổ chuột lên

trên thanh cuộn để cuộn xuống cuối ơ tác vụ

14 Trong vùng Table layout, cuộn qua các tùy chọn bố cục được định nghĩa sẵn Nhấp vào bố cục Header, Body, Footer, and Left (tùy chọn

thứ tư ở phía trái) Tùy chọn này bao gồm một tiêu để nằm ngang canh giữa phía trên, một ơ đứng ở phía trái, một ơ cuối trang nằm

ngang nằm ở dưới và vùng nội dung chính của trang ở phía phải

Trang sẽ thay đổi để phản ánh bố cục được chọn Chiều rộng và chiều cao của mỗi ơ được thơng báo bởi Layout Tool (xem hình 6-4)

RE] Microsoft FrontPagg - CIDøcuments and SetingsVây Document Đường màu xanh lá cây cho biết cạnh ngồi của bảng "1 = "1

Các đường màu Agmet EE = B xanh duong cho

biết sự phân [8B eo qmssew |@775557517) _ = i

chia giữa hàng [7 Sa mo= al ä BD 4)

và cột NTITZ777NETTEWE-TNEE -]

Hình 6-4: Bố cục được áp dụng cho trang

Trang 7

16 Cuộn xuống cuối trang để bạn cĩ thể thấy được vùng cuối trang, phân

thân và ơ trái (hình 6-6)

17 Nhấp vào đường phía dưới của ơ trái để chọn ơ đĩ Ơ chọn sẽ được

thơng báo bằng các nút kiểm sốt hình vuơng ở các gĩc và ở giữa cách cạnh (xem hình 6-7)

Hình 6-7: Ơ chọn được thể hiện bởi các nút biểm sốt quanh nĩ 18 Đặt con trỏ chuột phía trên nút kiểm sốt nằm ở giữa của cạnh đáy

của ơ được chọn Con trỏ sẽ chuyển sang dạng chữ T

19 Kéo cạnh dưới của ơ lên phía trên cho đến khi nĩ ngang với đỉnh của

vùng cuối trang Ơ mới tạo ở gĩc dưới phía phải của bảng sẽ được thể

hiện với màu xám mờ

20 Nhấp vào đường ở cuối vùng cuối trang để chọn ơ đĩ

21 Kéo cạnh trái của ơ về phía trái cho đến khi nĩ trùng với cạnh trái của bảng Vùng cuối trang giờ đây sẽ mở rộng hết chiều rộng bảng

(xem hình 6-8)

Tại điểm này, bạn cĩ thể đĩng tập tin uè lưu lại các thay đổi

Trang 8

@ wy 192 Chương 6: Thay đổi bố cục trang Web EB sk Geos Gas]

Hình 6-8: Bố cục trang sưu khi điều chỉnh

Tạo một khuơn mẫu trang Web

Bạn cĩ thể xem một Website bao gồm hai loại thơng tin: Các phần tử xuất hiện trên mỗi trang trong site va cdc phan ti cụ thể của mỗi trang

Khi tạo một khuơn mẫu trang, chúng ta sẽ đưa vào khuơn mẫu tất cả các

thơng tin xuất hiện trén moi trang trong site để chỉ tạo nĩ một lần Bạn cĩ thể giữ các vùng mà trong đĩ thơng tin sẽ thay đổi trong mỗi trang

tách biệt với các vùng tĩnh

Trong bài thực hành này, bạn sẽ bổ sung thơng tin áp dụng cho tồn si/e

vào trang Web để tạo khuơn mẫu mà từ đĩ cĩ thể tạo các trang khác

Trang 9

2 Duyệt đến thư mục chứa các tập tin thực hành (PageLayou£\Template) Nhấp vao tap tin table_tempate va sau d6 nhép Open Một bố cục

bảng xuất hiện cùng với các vùng đầu trang, ơ trái, phần thân va

vùng cuối trang

3 Cuộn xuống để thấy vùng cuối trang, sau đĩ cuộn lại lên đầu trang 4 Di chuyển con trỏ chuột lên các ơ của bảng

Khi con trỏ chuột di chuyển lên các đường nét chấm, ơ bảng sẽ được thể hiện với một màu khác Đường nét của bảng được thể hiện bằng màu xanh lá cây cịn ơ được thể hiện với màu xanh dương

5 Nhấp vào đường nét chấm ở đầu bảng Các đường nét của bảng và ơ được thể hiện

6 Nhấp nút chuột phải vào ơ đầu trang và trong menu lối tắt xuất hiện,

nhấp vào mục Cell Formatting Ơ tác vụ Cell Formatting xuất hiện (xem hình 6-9)

Hình 6-9: Ơ tdc vu Cell Formatting

7 Trên ơ tác vụ Cell Formatting, nhấp vào mục Cell Corners and

Trang 10

10 11 12 18 14 15 16

194 Chương 6: Thay đổi bố cực trang Web

Trong vùng Corners, nhấp vào mũi tên trồ xuống ở phía phải của hộp Color và trong danh sách thả xuống, nhấp vào hình vuơng Teal (hình

vuơng cuối cùng trên dịng thứ hai),

Trong vùng Corners, nhấp vào danh sách Apply và nhấp vào nút Top

Left Corner (nút thứ hai từ trái qua) Một thanh xuất hiện ngang qua

phần phía trên của vùng đầu trang với gĩc trái được bo trịn

Cuộn sang phía phải để thấy cạnh phải của thanh Hiện tại nĩ vẫn

đang cĩ dạng gĩc vuơng

Trên ơ tác vụ Cell Formatting và trong danh sách Apply của vùng Corners, nhp vao nut Top Right Corner (nút ở giữa) Gĩc phia phai

sẽ thay đổi từ vuơng sang trịn Đặt điểm chèn trong ơ đầu trang

Trên menu Insert, trổ vào mục Picture và sau đĩ nhấp mục Erom File Duyệt đến thư mục thực hành (PøgeLayout\Temploie) và nhấp

vào tap tin tgelogo_sm réi nhấp nút Insert Lơgơ của Cơng ty Garden sẽ xuất hiện vào vùng đầu trang, ngay phía dưới đường biên bo trịn Nhấn phím Enter để di chuyển điểm chèn xuống phía dưới lơgơ Sau khi trang được đưa vào cấu trúc Website, biểu ngữ trang sẽ được đưa

vào đây

Đặt điểm chèn trong ơ nội dung của bảng (ơ giữa phía trái) và nhập

vào các từ sau (khơng cĩ nút đầu dịng) Nhấn phím Enter sau mỗi dong: - Home, - Products - Class Offerings - Press Releases - Contact Us

Ơ bảng này sẽ chứa các liên kết di chuyển cho mọi trang trong Website Vùng này thường được gọi là bảng nội dung (TOC - Table of contents) vì nĩ đĩng vai trị giống như các bảng nội dung đối với người ding Web Trên ơ tác vụ Cell Formatting, nhấp vào mục Cell Properties and

Borders Ơ tác vụ sẽ thay đổi để phản ánh các thay đổi của bạn (xem

Trang 11

na gi tresNowRaman a3 (1202) a As Home Products ‘Class Offerings Press Releases — Contact Us

Hình 6-10: Các thuộc tính ứng voi muc Cell Properties and Borders 17 Trong vùng Layout cell properties, nhấp vào mũi tên trổ xuống ở

phía phải của hộp Valign và chọn Top trong danh sách thả xuống Nội dung của ơ sẽ di chuyển để canh chỉnh theo cạnh trên của ơ

18 Chọn con số trong hộp Padding rồi nhập vào giá trị ð, sau đĩ nhấn phím Enter Nội dung của ơ sẽ di chuyển xuống phía dưới và về phía

phải 5 pixel

19 Nhấp vào đường biên phải của ơ nội dung để chọn tất cả văn bản

trong nĩ

20 Trên thanh cơng cụ Formatting, nhấp vào nút Decrease Font Size Phơng chữ của danh sách nội dung giảm từ 12 point xuống cịn 10

point

21 Trên thanh cơng cụ Formatting, nhấp nút Bold Mỗi mục trong danh

sách nội dung sẽ thay đổi sang dạng chữ in đậm

22 Cuộn xuống cuối trang và nhấp vào đường biên phía trên của ơ cuối trang để chọn nĩ Nếu thấy ơ chính được chọn, hãy thử lại và nhấp

Trang 12

® M|” se 23 24 25 26 27 28

Chương 6: Thay đổi bố cục trang Web

Trên ơ tác vụ Cell Formatting, nhấp vào mục Cell Corners and Shadows

Trong danh sách Apply của vùng Corners, nhấp vào nút Bottom Left Corners (nút thứ hai từ phải qua) Đường biên bo trịn sẽ được áp

dụng vì màu vẫn được thiết lập từ hành động trước đĩ

Nhấp vào nút Bottom Right Corner (nút đầu tiên bên phải) để hồn

tất đường biên bo trịn

Nhấp để đặt điểm chèn vào đâu của ơ cuối trang

Nhập dịng văn bản E-mail the Webmaster with questions or comments about this Web site

Người dùng Web thường muốn thấy thơng tin liên hệ ở cuối mỗi

trang Web

Nhấp ba lần vào dịng văn bản để chọn nĩ Từ trên thanh cơng cụ

Trang 13

29 Trên ơ tác vụ Cell Formatting, nhấp vào mục Cell Properties and Borders

30 Trong hộp Padding, nhập vào giá trị ð và nhấn phím Enter Nội

dung ctia 6 sé di chuyển xuống phía dưới và về phía phải 5 pixel (xem

hình 6-11)

@ Tại điểm này bạn cĩ thể đồng ơ tác vu Cell Formatting va cde

tộp tin đang mơ, lưu lại các kết quả nếu muốn

Tạo Website từ khuơn mẫu trang

Sau khi đã tạo khuơn mẫu trang cơ bản, bạn cẩn tạo từng trang của Website từ khuơn mẫu đĩ, bổ sung mỗi trang vào hệ thống di chuyển của site rồi đưa vào các biểu ngữ và liên kết trang thích hợp

Trong bài thực hành này, bạn sẽ sao chép khuơn mẫu trang, đổi tên và

liên kết các bản sao để tạo ra một sửe

Các tập tin dùng cho bài thực hành này được đặt trong thư mục PageLayout\Assembly

Bạn cần phải khỏi động FrontPage trước khi thực hiện bài thực

hành này

oo

1 Tạo Website một trang cĩ tên là BasicGarden

2 Nếu Folder Líst chưa mở, hãy nhấp vào mục Eolder List trên menu View

3 Trên menu File, nhấp mục Open

4 Trong hộp thoại Open File, duyệt đến thư mục thực hành (PageLayout\Assembly) va nhdp dup vào tập tìn (œble_template

Trang mẫu sẽ mở ra trong cửa sổ soạn thảo của chế độ thể hiện

Page

Trang 14

[MỊ? 198 Chương 6: Thay đổi bố cục trang Web :

6

10

Trong hép thoai Save As, duyét dén thu mue My Documents\My Web Sites\BasicGarden va nh&p dip vao tap tin index.htm Khi duge hỏi

cĩ muốn ghi đè tập tin hiện eĩ khơng, hãy nhấp nút Yes để tiếp tục Hộp thoại Save Embedded Files sẽ xuất hiện, liệt kê các tập tin cần

được lưu cùng với khuơn mẫu trang (xem hình 6-12)

Save Embedded Files Multiple Images Selected [Change Folder ) [Set action ] [Picture File type }

Hinh 6-12: H6p thoai Save Embedded Files

Với tất cả năm tap tin duge chon, nh&p vao muc Change Folder Trong hộp thoại Change Folder, nhấp đúp vào thư mục ¿màges, nhấp OE và sau đĩ nhấp tiếp nút OK để lưu các tập tin nhúng vào trong thu muc images cia site BasieGarden Khuơn mẫu trang giờ đây đã được lưu dưới dạng trang chủ của Website mới

Trong Folder List, nhap nut chuét phai vao tap tin index.htm và sau đĩ nhấp vào mục Copy trên menu lối tắt xuất hiện

Nhấp nút chuột phải vào vùng trống trong Folder List và chọn mục Paste trên menu lối tắt xuất hiện Lặp lại ba lần để tạo ra bốn bản

Trang 15

E Micresoft FromtPaps - C.ADacuments and SettingzVMy DocumentsUMy Web S, fers lone |i Reis Elden By tex coprs).nem Bites copys) nem Home Products Clase Ofrings Press Releases Contact Us

Hình 6-18: Tạo bốn bản sao của trang bằng cách sao chép ú dán 11 Nhấp nút chuột phải vào tập tin imdex_copy(1).htm và chọn mục

Rename trên menu lối tắt xuất hiện Đặt lại tên cho tập tin là classes.htm

12 Lặp lại bước 11 cho các bản sao cịn lại Lần lượt đặt tên cho chúng là contact.htm, press.htm và products.htm

13 Trong danh sách Folder List, nhấp nút phải vào mỗi tập tin và sau

đĩ chọn mục Properties Trong hộp Title, thay đổi các tiêu để trang

Trang 16

200 Chương 6: Thay đổi bố cục trang Web 14 15 16 17 18 19

Nhấp vào tab Web Site và sau đĩ nhấp nút Navigation

kéo các tập tin products.htm, classes.htm, press.htm va contact.htm từ Folder Lảst vào cửa sổ Navigation rồi thả chúng theo thứ-tự đĩ làm các trang con của trang chủ (xem hình 6-14)

rolder Ui 1X {i web site

C:\Documents and Settings|Nc Navigation © _prvate — GB images G index a Class Offer Ì Contact Us Ì L3 PlFoders 88emote Web ste BReports

Hình 6-14: Tạo các trang con của trang chủ Nhấp vào tab của tập tin index.htm

Đặt con trỏ vào vùng phía dưới lơgơ của Cơng ty GardenCo Cách dễ nhất để thực hiện điểu này là nhấp vào lơgơ, sau đĩ nhấn phím mũi tên phải hai lần

Trên menu Insert, nhấp mục Page Banner và sau đĩ nhấp nút OK

Chọn phần giữ chỗ được chèn vào và thực hiện các điều sau: Trong danh sách thả xuống Style, nhấp Heading 1

Trên thanh cơng cụ Formatting, nhấp nút Center để canh giữa tiêu

Trang 17

ÉHeadngi jg Times New Roman Feder Ut gC C:\Documents and 5ettings\Nc © private © images @ index.htm Welcome | = Home Products : EI EBSBjBso me (eses [ổ 220 a

» Oc ale Bai iad uel

029%4tEt(/2Lx221_ custom J aston i tI

Hình 6-15: Chèn uờ canh giữa biểu ngữ trang 920 Trong ơ bảng nội dung, nhấp đúp vào từ Home

91 Trên thanh cơng cụ Standard, nhấp vào nút Insert Hyperlink để mở

Trang 18

®

202 Chương 6: Thay đổi bố cục trang Web

22 Trong danh sách tập tin, nhấp index.htm và sau đĩ nhấp nút OK FrontPage sẽ chèn liên kết đến trang chủ cho từ Home và sau đĩ đĩng hộp thoại

23 Lặp lại các bước từ 20 đến 22 cho từng mục cịn lại trong ơ bảng nội dung, liên kết từng từ trong đĩ đến các trang Web thích hợp như sau: Mục trong bảng nội dung | Tên tập tin Products products

Class Offerings classes

Press Releases press

Contact Us contact

24 Trong ơ cuối trang, nhấp đúp vao tit Webmaster để chọn nĩ và trên

thanh cơng cụ Standard, nhấp vào nút Insert Hyperlink

2ð Trong hộp thoại Insert Hyperlink, nhấp vào mục E-mail Address trong danh sách Link to (xem hình 6-17) Patani Link to: Text to display: E-mail address: no lkw ‘Web Page E-mail Address foe Vict]

Hinh 6-17: Chon muc E-mail Address trong danh sách Link to 26 Thực hiện các điều sau:

- Trong hép E-mail address, nhap dong van ban:

Webmaster@gardenco.msn.com Tit mailto: sẽ được tự động chèn

Trang 19

Trong hộp Subject, nhập vào dịng văn bản Web site feedback

nhằm thiết lập dịng chủ đề của mỗi thơng điệp được phát sinh từ liên kết để bạn cĩ thể dễ dàng xác định nguồn gốc của chúng

Nhấp nút ScreenTip, nhập dịng văn bản E-mail the Webmaster!

trong hộp ScreenTip text Sau đĩ, nhấp nút OK để thiết lập văn bản

8creenTip cho liên kết

Trong hộp thoại Insert Hyperlink, nhấp nút OK để chèn liên kết thư

điện tử và đĩng hộp thoại

27 Đĩng trang ¿ndex.htm, lưu lại kết quả cơng việc khi được nhắc 28 Để kiểm tra các liên kết, hãy nhấp vào nút Hyperlinks trên tab Web

Site Các liên kết từ trang chủ đến các trang con và liên kết thư điện tử sẽ được thể hiện (xem hình 6-18) Folder List |) Cal x | iia web site

(© CiADocuments and Setting | yarns Fr index Rent & @ pwete I — a 4 & & mages | l8 classes.htm | : | |B contact hem FBproductshtm | Go Katie K)classes.htm ý BD press hen a 4 @B products:htm B press.htm AB} contact hem SAmatto;Webmaster@gardenco.msn.com | | is Folder: BRemote Web ste B

Hình 6-18: Các liên hết được thể hiện trong chế độ Hyperlinks

Liên hết đến các điềm đánh dấu trong trang

Q0 Tại điểm này, bạn cĩ thể đĩng Website

Bạn cĩ thể chèn uào các phân giữ chỗ cĩ tên là điểm đánh dấu

Trang 20

dén vi tri cụ thể trên trang, thay uì nhảy đến một tập tìn khác

Các điểm đánh dấu rất hữu dụng khi bạn cĩ các trang Web dài hoặc khí muốn nhảy từ một danh sách các liên két tập trung

đến nhiều 0u} trí khác nhau trên trung Ví dụ, các điểm đánh đấu thường được dùng trong các trang hỏi uà đáp, trong đĩ danh sách các câu hỏi được đặt ở đầu trang uà tiếp theo sau là

những câu trả lời, Việc nhấp uào từng câu hỏi sẽ chuyển người đọc đấn phần trả lời tương ứng

Trong mã lệnh HTML, một điểm đánh dấu là một biến thể của

thé neo (<a>) Việc tạo một điểm đánh dấu trong FrontPage rất

dã ồ khơng địi hỏi phải làm uiệc uới mã lệnh HTML Bạn chỉ

việc chọn u‡ trí (một từ hoặc cụm từ muốn đánh dấu), nhấp uèo

mục Bookmark trên menu Insert uà sẽ được nhắc để cung cấp tên cho điểm dánh đấu: Bạn cĩ thể sử dụng một tên lâgic hoặc

hệ thống đảnh số cho các diễm đánh đấu

Việc liên kết đến một điển đánh dấu cũng rất đơn giản: Bạn chỉ uiệc chèn một liên kết như bình thường Sœu đĩ, trong hộp thoại Insert Hyperlink, nhấp uào trang muốn liên kết va sau dé

nhấp uào nút Bookmark để thể hiện một danh sách các điểm

đánh đấu cĩ trên trang đĩ Các liên kết đến điểm đánh dấu trên trang được thể hiện ở dạng filenametbookmark

Tạo trang khung

Thay vì sử dụng bảng để cấu trúc trang Web, chúng ta cĩ thể định nghĩa

những phần khác nhau của trang trong các khung khác nhau Khi bố cục trang với khung, kết quả cuối cùng trơng cũng giống như trang được bố cục với bảng, nhưng hoạt động ẩn phía sau nĩ phức tạp hơn nhiều

Khái niệm ẩn phía sau khung là tạo một trang khung sườn, đơi khi được

gọi là tap khung (frameset), chita các khung thơng tin riêng biệt và được

bố trí chính xác tại vị trí mong muốn Mỗi khung cĩ thể hiển thị thơng

tin tĩnh được nhập trực tiếp vào trong khung hoặc nội dung từ một tập

tản khác Vẻ đẹp của việc dùng khung để tổ chức dữ liệu là bạn eĩ thể hiển thị thơng tin từ một tập tin tại nhiều nơi khác nhau Khi cẩn thực hiện một thay đổi cĩ ảnh hưởng đến tồn bộ site (ví dụ, bổ sung một

Trang 21

FrontPage giúp cho quá trình tạo trang khung hồn tồn đơn giản bằng

cách cung cấp một số khuơn mẫu mà bạn cĩ thể mở, lưu và hồn tất với một chút cơng sức Trong bài thực hành này, bạn sẽ tạo một trang khung bằng cách dùng khuơn mẫu © Các tập tin dùng cho bài thực hành này được đặt trong thư mục PageLayout\Frames @ Bạn cân khởi động FrontPoge trước khi thực hiện bài thực hành này

1 Trên menu File, nhấp mục New để mở ơ tác vụ New

9 Trong vùng New page, nhấp vào mục More page templates để mở

hộp thoại Page Templates (xem hình 6-19) DA General Frames Pages [Style Sheets} I]

Contents Footer Footnotes Options

(oust add Web task

a]

x Ca [open in current frane

Header Header, Horizontal Spit Nested Descrition Creates 8 banner Frame at the top,

Footer = = vith a cantents Hypericks inthe banner change the and main frame, E contents frame, lội Top-Down Vertical Spt Hierarchy

Hình 6-19: Hộp thoại Page Templates

3 Nhấp vào tab Frames Pages FrontPage cung cấp 10 khuơn mẫu để

tạo các trang khung

4 Nhấp vào từng khuơn mẫu để xem mơ tả và dạng thể hiện của từng

Trang 22

5 Nhấp vào khuơn mẫu Header, Footer and Contents Sau đĩ, nhấp nút OK để đĩng hộp thoại và tạo ra trang dựa trên khuơn mẫu này Kết,

quả được thể hiện như trong hình 6-20

ÊE Microsoft FrontPage - ngw_page_1.htm

Em max

Hình 6-20: Trang dựa trên khung được tạo ra từ khuơn mẫu Bạn cĩ thể nhấp vào nút Set Initial Page để liên kết một nội dung đã cĩ

với khung hoặc nhấp vào nút New Page để tạo trang nội dung mới cho khung

6 Trong khung phía trên, nhấp vào nút New Page Một trang trống, mới sẽ được mở trong phạm vi của khung Thực chất là chúng ta vừa tạo một tập tin hồn tồn mới mà nội dung của nĩ sẽ được hiển thị trong khung được chọn

7 Trên menu Insert, trỏ vào mục Picture và sau đĩ nhấp vào mục From File Hộp thoại Picture sẽ xuất hiện

Trang 24

9 Di chuyển con trỏ lên đường biên dưới của khung phía trên Khi con

trỏ chuyển thành mũi tên hai chiểu, hãy kéo đường biên xuống phía dưới cho đến khi thấy tồn bộ lơgơ

10 Lưu tập tin mà chúng ta vừa tạo trong khung phía trên, hãy nhấp vào phía trong khung và sau đĩ nhấp vào nút Save trên thanh cơng cụ Standard Hộp thoại Save As xuất hiện với khung được chọn sẽ được làm nổi bật (xem hình 6-22)

11 Trong hộp File name, nhập vào tên tập tin là header

12 Nhấp vào nút Change title để mở hộp thoai Set Page Title

13 Trong hộp Page title, nhập vao chudi Header Frame va sau đĩ

nhap nut OK dé dong hép thoai này lại

14 Nhấp vào nút Save để đĩng hộp thoại Save As và áp dụng các thay

đổi Lưu đồ họa lơgơ vào trong thư mục ¿zmøges khi được nhắc

Để lưu khung, bạn cần phải lưu cả tập khung FrontPage sẽ nhắc bạn

Trang 25

15 16 1 18

"Trên thanh Save In, nhấp vào My Documents và sau đĩ nhấp vào thư muc My Web Sites

Trong hép File name, nhap vao tén tap tin 1a frames_template

Nhấp vao nut Change title, thay déi tiéu dé trang thanh Frames

Template và sau đĩ nhấp nút OK

Nhấp nút Save dé đĩng hộp thoại Save As Folder List sé mé va hién thi ndi dung cia thu muc My Web Sites

Tại điểm này, bạn cĩ thé déng Folder List, t@p tin frames_

Phan chia va xé6a khung

Chung ta c6 thé phan chia một khung thành nhiều khung hoặc

xĩa bĩt các khung dư thừa từ trang khung

Để phân chỉa một khung, bạn cần thục hiện theo các bước sau: a) Nhdp uào khung muốn phân chía

b) Trên menu Prames, nhấp ồo mục Split Frame

e) Trong hộp thoại Split Frame, chọn Split tmo columns hoặc Split into rows va sau đĩ nhấp nút OK

FrontPoge sẽ phân chỉa khung theo chiều ngàng hoặc chiều

đứng tùy theo tùy chọn Khung mới được tạo ra cũng chúa các nut New Page va Set Initial Page

Để xĩa một khung, bạn cân thực hiện theo cúc bước sau: a) Nhấp uào khung muốn xĩa để chọn nĩ

b) Trên menu Frames, nhấp uào mục Delete Frame

Bố cục trang Web với khung

Khi bắt đầu tạo Website, phần lớn các trang Web của chúng ta cĩ lẽ là tĩnh, tức là nội dung sẽ là thành phần của từng trang riêng Sau khi đã cĩ những hiểu biết nhất định về cách xây dựng trang Web, bạn sẽ bắt đâu khám phá những kỹ thuật, bố cục trang phức tạp hơn và câu hỏi khi đĩ sẽ là làm thế nào để chuyển các trang tĩnh đã được tạo ra để tận dụng

Trang 26

® 210

Trong bài thực hành này, bạn sẽ liên kết nội dung đã cĩ với trang khung

để chuyển các trang tĩnh thành khuơn mẫu dựa trên khung

n sẽ làm việc với Website mẫu bao gồm một trang chủ (index.htm) va n trang cấp hai: Produets, Class Offerings, Press Releases và Contact

Us Các liên kết đến các trang khác xuất hiện ở đầu mỗi trang và liên

kết thư điện tử xuất hiện ở cuối trang Trang bảng nội dung chỉ chứa các

liên kết đến các trang và các điểm đánh dấu của sife

Các tập tin dùng cho bài thực hành này được đặt trong thư mục PageLayout\LayOutFrame

Bạn cân mở Website GardenCo trước khi thực hiện bài thực

hành này

1 Trong Folder List, nhấp đúp vào tập tin frames_template.htm dé mở

tập tin này trong cửa sổ soạn thảo của chế độ hiển thị Page (xem hình 6-24)

TT TT

3ax — BG mages dưa hơn :

Khung đầu trang T— Khung nội dung T— Khung chính T— Khung cuối trang .001856tpz 426 x 209 Custom Custom |

Hình 6-24: Trang khung được mở trong cửa sổ soạn thảo

2 Để liên kết nội dung cia tap tin toc.htm véi khung bảng nội dung, hãy

Trang 27

Insert Hyjerlink

‘Text to display: |<<Selection in Document >>

tee oe | ket: ‘Web Page frames_template.htm (open)

Curent header, htm (open) eet 1G images Place n This Q) dasses.htm Dotuttent contact htm @) press.htm products htm Sam welcome htm

Hinh 6-25: Hép thoai Insert Hyperlink

3 Trong danh séch tAp tin, nh&p vao toc.htm và sau đĩ nhấp nút OK

FrontPage sé hién thị nội dung của tập tin toc.htm trong khung bang nội dung Bảng nội dung thực chất khơng được chèn vào trong khung mà nĩ chỉ được liên kết với khung Bạn cĩ thể dùng thanh cuộn đứng để thấy tồn bộ nội dung của trang

4 Đế định nghĩa trang bắt đầu của sie, hãy nhấp vào nút Set Initial

Page trong khung chính của trang khung

5 Trong hộp thoại Insert Hyperlink, cuộn xuống phía dưới và nhấp vào

tap tin welcome.htm réi sau dé nhap vao nut OK FrontPage sé hién thị trang chủ trong khung chính Bạn cĩ thể dùng thanh cuộn đứng

để xem tồn bộ trang

6 Trong khung phía dưới, nhấp vào nút New Page Một trang trống, mới sẽ được mở ra trong phạm vi của khung này

7 Nhập vào chuỗi E-mail the Webmaster with questions or comments about this Web site

Bạn cĩ thể thực hiện các thay đổi cho nội dung của trang khung trong tập tin nguơn hoặc trong khung

8 Nhấn tổ hợp phím Ctrl+A để chọn tồn bộ nội dung của khung và

Trang 28

9 Chọn từ Webmaster và nhấp vào nút Insert Hyperlink trén thanh

cơng cụ Standard

10 Trong hộp thoại Insert Hyperlink, thực hiện các điều sau: - Trên thanh Link to, chon muc E-mail Address

Nếu đã định dạng liên kết Webmaster trong phân “Tao Website từ khuơn mẫu trang” trước đây, bạn cĩ thể nhấp 0ào liên kết thư

điện tử được tạo trong bài thực hành đĩ - _ Trong hộp E-mail address, nhập vào chuỗi:

Webmaster@gardenco.msn.com Ti mailto: sẽ được tự động chèn

vào đâu chuỗi khi bạn nhập

- - Trong hộp Subject, nhập vào chuỗi Web site feedbaek để thiết lập dong chủ để của mỗi thơng điệp thư điện tử được tạo ra từ liên kết để bạn cĩ thể dễ dàng phân biệt nguồn của mỗi thơng điệp này

- Nhấp vào nút ScreenTip, nhập vào chuỗi E-mail the Webmaster!

trong hộp ScreenTip text và sau đĩ nhấp vào nút OE để thiết lập văn

ban ScreenTip

- _ Trong hộp thoai Insert Hyperlink, nhap nut OK dé chèn liên kết thư điện tử và đĩng hộp thoại

11 Kéo đường biên phía trên của khung phía dưới xuống để giảm kích

thước của khung này sao cho chỉ đú để thấy dịng nội dung

12 Lưu trang mới được tạo trong khung phía dưới với tên gọi footer và

thay đối tiêu để trang của nĩ thành Eooter Erame (xem hình 6-26) Các hướng dẫn từng bước uê cách lưu trang mới được tạo trong

một khung được thế hiện trong bài thực hành “Tạo trang

khung” trong phân trước

13 Trên menu File, nhấp vào mục Save As dé mở hộp thoại Save Às

14 Đảm bảo khuơn mẫu của trang được thể hiện trong cửa sổ xem trước, thay đổi tiêu để của trang thành The Garden Company và lưu tập

tin với tên gọi index.htm

15 Nhấp vào nút Preview ở cuối cửa số soạn thảo trong chế độ hiển thị Page Phụ thuộc vào kích thước cửa sổ mà các khung bảng nội dung và khung chính cĩ thể hiển thị các thanh cuộn Các đường biên của khung cũng được thể hiện và làm cho khung trơng khơng được đẹp

Trang 29

Can [acme lỈ name ~ | © borders G-themes images classes htm contact htm frames_template hem header htm press htm products htm toc htm Hình 6-26: Lưu trang mới tạo trong khung phía dưới uới tên gọi footer.htm Foldertst (]ƠN x CD Cipsbs\Page Layoutitay 5 Ca mapes BD classes hem (reader bem mem | Home a || Welcome to The Garden Company! a đi Boros tem 4 đ

Bott Products | We are a qualiy etal gardening business locatedinthe || welcome hem | || Pacific Northwest Our products and services are featured (footer em | tess Offerings ||| on his Web ste Whether you vst us on the Web orn out i YW index.hem | Spring Splendor ||| store, please feel free to browse, andlet us knowifyou | | Camivorous require assistance or have any questions! a

Plants

| _ Organic “The Garden Company sells a variety of indoor and outdoor

Trang 30

®

Một số trình duyệt khơng hỗ trợ khung Để xem trang Web của

minh ra sao trong các trình duyệt khơng hỗ trợ khung, hãy nhấp

uào nút Shouu No Frames ở cuối cửa sổ của chế độ hiển thi Page 16 Nhấp vào nút Design ở cuối cửa sổ của chế độ hiển thị Page để tiếp

tuc chinh stfa tap tin index.htm

17 Nhấp nút chuột phải vào khung phía trên và sau đĩ nhấp vào mục

Frame Properties từ menu lối tắt xuất hiện Hộp thoại Frame Properties sẽ xuất hiện như trong hình 6-28

Frame Properties

Hình 6-28: Hộp thoại Frame Properties

18 Trong vùng Options, nhấp vào nút Frames Page Hộp thoại Page

Properties xuất hiện với tab Frames được thể hiện (xem hình 6-29) Các tùy chọn thiết lập trong hộp thoại này sẽ ảnh hưởng đến tất cả

các khung trong trang

19 Xĩa hộp kiểm Show Borders Giá trị trong hộp Frame Spacing sẽ

được thiết lập thành 0

20 Nhấp nút OK để đĩng hộp thoại Page Properties và sau đĩ nhấp nút

Trang 31

Page Properties 'SeneralÌ Advanced | Cuztom | uanguage | Frames [Workgroup Frame Spacra: [|g MWshow Borders, Folderist (]C3 xj (C3 Wsesaeetsrezte [ Ldạ, ® C3 may

a products Fem tochm Home 1 wetcome to-The Garden Company! :

3 welcome hem Products ‘We are a quality retail gardening business located in the

Be footer im Pacific Northwest Our products and services are featured

GF nen 5 OF onthis Web site Whether you visit us on the Web or in our

Trang 32

® 216 Chương 6: Thay đổi bố cục trang Web 21 2 23 24 25 26

Nhấp nút chuột phải vào khung bảng nội dung và nhấp vào mục Frames Properties trên menu lối tắt xuất hiện để mở hộp thoại

Frame Properties

Trong danh sách thả xuống Show scrollbars, nhấp vào mục Never và sau đĩ nhấp nút OK Trang Web của bạn giờ đây trơng đẹp hơn Tuy nhiên, khi nĩ được xem trong màn hình cĩ độ phân giải 640x480, bảng nội dung sẽ vượt ra khỏi phạm vi của khung

Nhấp vào trong khung bảng nội dung và nhấn tổ hợp phím Ctrl+A để chọn văn bản phía trong nĩ Sau đĩ, nhấp vào mục Paragraph

trên menu Format Hộp thoại Paragraph sẽ xuất hiện (xem hình 6-31) Paragraph Indents and Spacing Agent: [Defst s Indentation | dg ee ee Dài Before:

Hinh 6-31: Hép thoại Paragraph

Trong vùng Spacing, thiết lập Before và After thành 0, sau đĩ nhấp

nut OK

Nhấp nút Save Các thay đổi với tap tin toc.htm sẽ được lưu lại Trên thanh cơng cụ Standard, nhấp vào nút Preview in Browser để

Trang 33

3Ä Frames Template - Microsoft Internet Explorer

Edt Vem Favortes Tools Hep airs ti

‘Home Welcome to The Garden Company! Products

Class Offerings “We are a quality retail gardening business located in the Pacific Northwest Spring Splendor Our products and services are featured on this Web site, Whether you wisit Camivorous Plants us on the Web or in our store, please feel free to browse, and let us know if you require assistance or have any questions!

Trang 34

Chương 6: Thay đổi bố cục trang Web 27 Kiểm tra site bằng cách nhấp vào các liên kết trong khung bảng nội

dung để đảm bảo nội dung trong khung chính được cập nhật chính xác

OQ Bạn cĩ thể ding nut Back va Forward của trình duyệt dé di

chuyển qua lại giữa các trang đã được mở

28 Nhấp vào liên két Webmaster trong khung nằm ở cuối trang Nếu bạn đã cài chương trình thư điện tử, một thơng điệp thư điện tử mới sẽ được mở trong chương trình đĩ với các đồng To và Subject đã được

điền sẵn (xem hình 6-33)

kế tiếp, hãy thốt khỏi FrontPage

Các điểm chính của chương này

Ơ tác vụ Layout Tables and Cells giúp chúng ta đễ đàng tạo bố cục và quản lý kích thước của các trang Web

hi tạo khuơn mẫu trang, chúng ta đưa vào tất cả thơng tin xuất

hiện trên mọi trang vào trong khuơn mẫu Chúng ta cĩ thể giữ các

vùng mà thơng tin trong đĩ sẽ thay đổi trên mỗi trang tách biệt với -

các vùng tĩnh bằng cách chỉ định các ơ để chứa thơng tin thay đổi Sau khi tạo ra khuơn mẫu trang co ban cho sife, chúng ta sẽ tạo ra

từng trang trong sie từ khuơn mẫu đĩ

Trang 35

Chương 7:

CẢI TIẾN KHẢ NĂNG CỦA SITE

Trong chương này, chúng ta sẽ:

« Tổ chức tập tin và thư mục

* Tao Web con

« Bé sung lién két gitia các trang « Bổ sung liên kết giữa các Website

Trong những ngày đầu hiện điện của mình, Web được dùng chủ yếu như một phương tiện để cung cấp lượng lớn thơng tin cho các hãng của chính

phủ và trường đại học khắp thế giới, Thơng tin này là văn bản thuần túy và nĩ chỉ thu hút sự quan tâm của những ai tìm kiếm thơng tin cần cho cơng việc của họ Khi World Wide Web phát triển, nĩ đã đân bổ sung dé

họa và tính tương tác, khả năng nhảy từ một mục thơng tìn này sang một mục thơng tin khác Các trang tĩnh chỉ chứa văn bản đã dần trở

thành quá khứ Ngày nay, để tạo một Website hiệu quả, bạn cần phải cĩ kha nang nang cấp nĩ với các phần tử động để cĩ thể cạnh tranh với các

Website khác

Sẽ là khơng hợp lý trong việc xây dựng một si‡e nếu người dùng khơng

thể đễ dàng đi chuyển qua lại giữa các trang của nĩ để tìm thơng tin mà họ quan tâm Nếu bạn đã tổ chức sie của mình thành hệ thống các tập tin và thư mục hợp lý, FrontPage cĩ thể “cảm nhận” được cấu trúc của sửe và bổ sung các cơng eụ đi chuyển để người dùng Web cĩ thể dễ dàng tìm ra được con đường của mình bằng cách sử dụng các phần tử cĩ hiệu

lực (như đường biên dùng chung) và cách truy xuất nĩ Nếu Website phải phục vụ theo nhu cầu của một số nhĩm người dùng khác nhau, bạn cĩ thể cần phải phân chia Website của mình thành một Website chính và một

số Web con được liên kết với nhau để mỗi nhĩm người dùng khơng cịn bị

“xao lãng” bởi thơng tin mà họ khơng cần Ví dụ, nếu Cơng ty Garden

Trang 36

Ee 220 Chương 7: Cai tién kha năng của site

của mình, họ cần phải tạo ra một Web con mà chỉ cĩ thể truy xuất được

bởi nhân viên thơng qua tên đăng nhập và mật khẩu, sau đĩ sử dụng

Web con đĩ để trao đổi thơng tin nội bộ với nhau

Ngồi việc cải tiến khả năng di chuyển của sửe, bạn cịn cần phải khám phá các loại thành phần Web và các phần tử động khác nhau đi kèm với ProntPage Các thành phần tạo sẵn này bổ sung những đặc điểm chuyên

nghiệp cho Website bằng cách chèn vào các chương trình nhỏ với mục

đích đặc biệt để thực hiện các cơng việc như đếm số người truy cập hoặc

các biểu ngữ cuộn

Trong chương này, bạn sẽ tổ chức các tập tin và thư mục trong Website theo cách để đễ dàng cải tiến si/e Kế tiếp, định nghĩa cấu trúc đi chuyển của Website bằng cách bổ sung các đường biên dùng chung, thanh liên kết, các liên kết và bản đổ hình ảnh Bạn cũng sẽ tạo ra một Web con và liên kết nĩ với Web chính Sau đĩ, xem xét một số phần tử động mà

mình cĩ thể đưa vào trang Web, kể cả các thành phần đi kèm với

FrontPage

Tổ chức tập tin và thư mục

Khả năng tổ chức cĩ hiệu quả các tập tin của mình trong một hệ thống

các thư mục là một kỹ năng máy tính nền tảng giúp bạn dễ dàng và

nhanh chĩng tìm ra những gì mình cần Tuy nhiên, với FrontPage thì kỹ

năng này cịn quan trọng hơn vì một lý do khác nữa FrontPage cĩ thể tự động một số quá trình liên quan đến việc tạo một hệ thống di chuyển phức tạp cho Website của bạn và tổ chức các phần tử của sửe thành những tập thư mục hợp lý để làm cho nĩ dễ dàng xác định cấu trúc của

site

Trong bài thực hành này, bạn sẽ tổ chức Website bao gồm nhiễu trang va đỗ họa thành một cấu trúc thư mục hữu dụng

Bạn cần mở Website GardenCo trước khi thực hiện bài thục

hành này,

OQ Néu Folder List chua được mở, hãy nhấp uào nút Toggle Pane

Trang 37

1 Nhấp vào tab Navigation ở cuối cửa sổ soạn thảo của chế độ hiển thị

Page

2 Ở đầu của cửa sổ chế độ thể hiện Navigation, nhấp vào nút

Portrait/Landscape để chuyển hướng thể hiện nhằm làm cho hệ thống di chuyển của s¿£e phù hợp hơn với màn hình (xem hình 7-1) Folder ist) Ca X fig web site G C:\Temp\bocktSES\Car | jayigain revo ei (® croducts htm Bowese-ps lo (| [evn 8 LJ contact us | [ches and LJ TrevetPotey i i BD sexchten cea 2% _CaFolders Remote Web ste Reports JS ryperinis tasks Detak_caston | Hình 7-1: Chuyển dạng thể hiện của hệ thống di chuyển sang Landscape để hiển thị tốt hơn

Trong chế độ Navigation, bạn cĩ thể thấy sie của mình bao gồm một

trang chủ và bốn trang cấp hai Trang Products cĩ bốn trang cấp ba và một se Employee nằm ở cùng mức như trang chủ

3 Chuyến sang chế độ thể hiện Folders và chú ý một danh sách dài

gồm các tập tin HTML và đồ họa tạo nên Website (xem hình 7-2) Cách tốt nhất để tổ chức các tập tin như vậy là di chuyển các tập tin đồ

họa vào một thư mục riêng biệt

4 Ở đâu của Folder List, nhấp vào nút New Folder

5 Khi thư mục mới xuất hiện ở cuối Folder List, nhập vào tên cho nĩ là images và nhấn phím Enter Chúng ta vừa tạo ra một thư mục mới

Trang 38

6 10 11 12 Chương 7: Cải tiến khả năng của site

Folders Va x [iy web ste]

jo aon 7124.69 Contents of ‘CTerplbook85\Capatilties| tác Organize Gardenco’ 3.1m Nodfelpde na+ 2® 1 7124 smoh pg i le 7124.9 ee 60 2a 637 an ;

emeee seo đHẦ7t24 smalpg 7124 snalpg 78 Jpg 9l/20036:37AM [

Tà Jarno Banks for Habits 28 hem ouncosearan |

ng cas cere atm Miameva

Gora o neat nC ze tn = aimearan |

oreest | Glometor cmaner ae iamcaran ||

BB custre.of jeustet2.of — custre.of 28 of 8/3/2003 6:37 aM T BD eveioyee info her [cuere3gf —— custre.of +8 ạt S264 Am BD ors.rtm 1¬ 28 mm 3i/z003637Am - lÂ đỒ hoan || Boftsim Grdectin | hancock tim _Enpoyes Hodbook ts and Gadgets 118 hen 2B hen a/2003 6:37 aM | 2/2003 6:7 a ` Be TH ET mở] ST SE pg 21/2003 6:37 Bouts oxden ten] | Mbinbwda:ba —bedo'b9 48 9 e/a 6:37 4 {By pnts tome hn || Bln owde rts for Your Garden ME Nm fa 6:37

ng Ị Pants for Your Home 28 him siizoosess7 am |

GQreeten rem |) rtesin Pons LÍ eresstum Press Releases nd reeds ne hen 3E Hm eyuf2n3 6:37 4 280)6:27 A9 —* ewes mm man —— et) _ 2x8 hm B88)6/27A9 enromeszam BD search ten ie :

a a

“3` EMEilsrenscvebss Drsoe ENsose BHmsils ens

Cua T6 he Tek con

Hinh 7-2: Cac tap tin HTML va dé hoa tao nén Website Nhấp vào tiêu đề cột, Type để sắp xếp các tập tin theo loại

Nếu ơ Folders hiển thị nội dung của thư mục mới, hãy nhấp uào thư mục cấp trên cùng trong Folder List để thể hiện nội dung

của nĩ

Nhấp vào tập tin cus¿rei1.giƒ, nhấn và giữ phím Shift, sau đĩ nhấp

vào tap tin tgclogo_sm.gif Tat ca bốn tập tin hình ảnh sẽ được chọn Réo các tập tin hình ảnh được chọn vào trong thư muc images

FrontPage sé di chuyển các tập tin đồ họa và đơng thời cập nhật các liên kết trong các tập tin nội dung để phản ánh vị trí mới của những

tập tin này

Chọn năm hình ảnh JPG và kéo chúng vào thư mục images

Trong Folder List, nhấp vào thư mục cấp trên cùng để hiển thị nội

dung cúa nĩ trong ơ Folders

Trang 39

Như bạn thấy trong chế độ hiển thị Navigation, các tập tin này là thành

phần của sửe thơng tin dành riêng cho nhân viên của cơng ty Một lần nữa,

FrontPage sẽ di chuyển các tập tin và đồng thời cập nhật các liên kết trong tất cả các tập tin nội dung để phản ánh vị trí mới của các tập tin này

Tốt hơn cả là chúng ta chỉ nên đặt trang chủ va những trang cấp hai khơng cĩ trang con ở thư mục cấp trên cùng của siứe

13 Trở lại với thư mục chính và tạo một thư mục mới cĩ tên là Produets 14 Di chuyển các tap tin carnivorous_plants.htm, gifts.htm, plants_

garden.htm va plants_home.htm vao trong thu muc méi nay

15 Trong 6 Folders, nhap vao tiéu dé cột Name để sắp xếp các thư mục

và tập tin theo thứ tự chữ cái (xem hình 7-3)

| Folder ist.) Gal x | [it website

D Gfenelbool505ICap3bð contents of ':|Templbook\S85\Cansbities|OrgarizelGardenco! daa

Bi cases tem BD contact.hem oe Name Tile Sie Type ModfiedDate ‘Modi

9 index.htm ates

BD press.htm EpProducts

BD products Dassses.htim Class offerings x8 htm — Bj/2003637AM — NGUỊ

BD search.hem Brcontact.htm contatUs 2B hữm 9/1/2003 6:37AM — NGUY

J images | Gindex.htm Welcome to The Garden ¢ 2kB htm 8/1/20036:37 AM NGU

l2 C3 memal press.htm Press Releases 3X8 hm — BJJ2003637AM NGƯ

Besearchhim search Page 2XB Hm jtj20036:37 aM NUM

— #

L& 4m64) |ERemete web ste BiReports JeNavigation BHyperinks @Tacks

|For Help, press Fi Default Custom

Hình 7-3: Sắp xếp các thư mục uà tập tin theo thứ tự chữ cái @ Tại điểm này, bạn cĩ thể đĩng Website GardenCo

Tạo Web con

Trang 40

224 Chương 7: Cải tiến khả năng của site

các thư mục thì Web con sẽ là một thư mục con chứa một Website độc lập trong đĩ

Các Web con thường được dùng để hiển thị thơng tin địi hỏi phải cĩ quyền truy xuất đặc biệt hoặc thơng tin chỉ cho phép với một số người nhất định

Ví dụ, Website GardenCo cĩ thể sử dụng một Web con để các thành viên

của hiệp hội làm vườn mà cơng ty hỗ trợ cĩ thể truy xuất các thơng tin về

hoạt động của hiệp hội thơng qua Website cơng cộng của cơng ty

Trong bài thực hành này, bạn sẽ sử dụng các trang đã được tạo và chứa trong một thư mục của Website GardenCo để tạo ra một Web con dành riêng cho các nhân viên

Các tập tin dùng cho bài thực hịnh này được đặt trong thư mục Capabilities\Subweb

thực hành này

1 Chuyển sang chế độ thể hiện Navigation và tự làm quen với cấu trúc của si¿e (nếu cần, hãy nhấp vào nút Portrait/Landseape để thay đổi

hướng thể hiện) Lưu ý, thực tế cĩ hai Website ở đây (xem hình 7-4)

Folder Uist) Ga [ia web site