Module 3
WebPage Authoring
Module 3
WebPage Authoring
What is an HTML File?
 HTML stands for Hyper Text Markup Language
 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an htm or html file extension
 An HTML file can be created using a simple text editor
Activities (HTML)
Visit http://www.w3schools.com/html/html_examples.asp and try at least three
examples.
Microsoft FrontPage
 In this module, Microsoft FrontPage 2003 will be used because of its coherent
user interface with other Microsoft products.
 We’ll first create a single web page using Microsoft FrontPage 2003. Then, we’ll
create a web site, which consists of multiple, linked web pages.
Create a new web page
 A new web page is given when FrontPage is started.
 To create additional web page click 網頁.
What are the differences between the terms “web page”, “home page” and “web site”?
Form 3 Computer Literacy
Module 3
Page 1/15
Module 3
WebPage Authoring
Text
 First we’ll enter some text. Then tap the Enter key once. Notice, that when you
tapped the Enter key, that the cursor moved down two lines (double spaced). This
is just the way FrontPage 2003 works (it has to do with the web page
programming called HTML).
 If you desire a single space between your text, simply Hold Down the Shift key
and, while you are holding down the Shift key, tap the Enter key.
 To format text, highlight the text and click 字型.
Save a web page
1. Right click the name tag of the web page and click 儲存網頁.
2.
Rename the web page title before saving the web page.
View the web page

Click the button
.
Activities (simple web page)
1. Create a web page showing a few lines of text.
2. Save it in a folder on your desktop.
3. Open the web page with Internet Explorer.
Form 3 Computer Literacy
Module 3
Page 2/15
Module 3
WebPage Authoring
Incorporating Multimedia Elements
 You need to have all of the “parts” of the web page in the “same place”. In
order for the page to load correctly, the text, pictures, animations, video files,
photos, sounds, etc., all need to be on the A drive (for a small web page) or in a
folder on a hard drive.
 If the web page can’t find the various items, you will not be able to see them in
your web page.
Insert a picture
 Click 從檔案.
Text Wrapping
 Right click the picture and click 圖片內容.
Form 3 Computer Literacy
Module 3
Page 3/15
Module 3
WebPage Authoring
Background picture
 Click 背景.
What is the meaning of “浮水印”?
Insert background sound
1. Click 格式背景.
2. Click 瀏覽 and select a sound file.
Form 3 Computer Literacy
Module 3
Page 4/15
Module 3
WebPage Authoring
Insert Audio or Video file
1. Highlight any text on the page.
2.
Click the
button.
3.
Select an audio or video file and then click the 確定 button.
Hyperlink to other sites on the Internet
1. Highlight any text on the page.
2.
Click the
button.
3.
Enter the site address and then click the 確定 button.
Form 3 Computer Literacy
Module 3
Page 5/15
Module 3
WebPage Authoring
Activities (multimedia elements)
1. Create a web page with a green background.
2. Set our school song as the background music of the web page.
3. Put our school logo on the web page that links to the home page of our school.
Table
1. Click 插入 to insert a new table.
2.
Highlight single or multiple cells and then right click to get the popup menu.
3.
You can customize the table by the commands in the popup menu.
Activities (table)
1. Try all the commands in the popup menu.
2. Insert a picture in a cell of the table.
3. Produce a table with the following layout.
Form 3 Computer Literacy
Module 3
Page 6/15
Module 3
WebPage Authoring
Layer
1. Click 圖層 to insert a layer on the web page.
2.
Click 位置 to change the Z value of a layer.
What is the advantage of using layer?
What is the significance of the Z value of a layer?
Form 3 Computer Literacy
Module 3
Page 7/15
Module 3
WebPage Authoring
Create a Frameset
1. Click 網頁.
2.
Select an appropriate frameset layout.
What is the difference between 設定初始網頁 and 新增網頁?
3.
Save the frameset and all the frames.
Form 3 Computer Literacy
Module 3
Page 8/15
Module 3
WebPage Authoring
Hyperlinks and frames
1.
Click the
button to insert a hyperlink.
2.
Click the 目標框架 button to specify the target frame.
Activities (frames)
Produce a frameset with three frames as below.
My Photos
Photo 1
Photo 2
Photo 3
Form 3 Computer Literacy
The are three hyperlinks on the bottom left frame.
Clicking the hyperlink will show the corresponding
photo on the bottom right frame.
Initially, the bottom right frame is blank.
Module 3
Page 9/15
Module 3
WebPage Authoring
Create a Web Site
1. Click 網站.
2.
Select 單頁網站 and specify the location of the web site.

First, if you look at the upper left corner of your screen
you will see that the web site C:\test has been created.

Again notice that it indicates Contents of ‘C:\temp.’
Below this you’ll see that this process created a page
called index.htm. This is the Home Page of your web
site.
Saving your web site
 If you haven’t already, you’ll notice that there is no “Save” option under File in
the Menu Bar. Nor is there a little “Save diskette” in the button bar. They are
both “grayed out” – indicating that you can’t use them. One of the neat things
in FrontPage 2003 is that it automatically saves your web site as you make each
change.
Open a web site
 Click 開啟網站 and then select the folder storing the web site.
Form 3 Computer Literacy
Module 3
Page 10/15
Module 3
WebPage Authoring
Create multiple linked pages
1. To create our web site we’ll want to be in the 導覽 View. So, click-on the 導
覽 button, in the lower left of your screen.
2.
3.
4.
5.
Take note of the words below the Home Page (index.htm), they’re important.
We’ll come back to this in a moment.
Note: you will still have to save individual web page changes as you work on
them.
First, left click-on the Home Page in the middle of the screen. Prior to your click,
it will appear as a light yellow icon, when you click-on it, the page will turn blue.
This indicates to FrontPage which page you desire to work on. In this case we’ll
add, and automatically link, three additional pages below our main home page.
Make sure the Home Page icon
is blue. To add a new page under
your home page, click-on the 新
增頁面 button.
6.
If you want to add a new page
under another page, simply click
such page and then click-on the
新增頁面 button.
7.
If you happen to make a mistake, as
you are adding new page, you can
simply delete it. A Delete Page
menu (like the one on the right) will
appear. You have to choose 從網
站刪除此網頁.
Shared Borders (共用邊框)
1. Click 網頁選項.
2.
Enable 共用邊框.
3.
Form 3 Computer Literacy
Module 3
Page 11/15
Module 3
WebPage Authoring
3.
To access Shared Borders, click-on 共用邊框.
4.
Specify the locations of the shared borders.
5.
6.
Double click on the Home Page (index.htm) icon.
Double click the shared border and then you can customize the hyperlinks on the
shared border.
Double click here
Form 3 Computer Literacy
Module 3
Page 12/15
Module 3
WebPage Authoring
Hyperlink View
 Click the 超連結 button to show the hyperlinks to and from the current page.
To see the hyperlinks of another page, you can click the 導覽 button and select
the corresponding page.
Page Title and File Name
 Page Title will be shown on the title bar of Internet Explorer.
 File Name of the page will be shown on the address bar of Internet Explorer.
Change the Page Title and File Name
1. Click 網站.
2. Click 資料夾.
3.
4.
Double click SLOWLY on the File Name to change the file name of the page.
Double click SLOWLY on the Page Title to change the Page Title.
Double click SLOWLY here
Note: The file name of the home page must be either index.htm or index.html.
Form 3 Computer Literacy
Module 3
Page 13/15
Module 3
WebPage Authoring
Theme (佈景主題)
Now, in Microsoft FrontPage 2003, we have the neat option to have a "Theme"
background throughout our web site. The theme uses the same color scheme for
each web page its buttons and links (you can change them page by page later if you
desire).
Setting the Theme
1. Click 資料夾.
2.
3.
Holding down the Ctrl key and select the pages that you want to apply the theme.
Click 佈景主題.
4.
Select a theme and click 套用至已選取的小面.
Activities (web site)
Make a web site providing the editorials of local newspapers. Try to include shared
borders and themes in your web site.
Form 3 Computer Literacy
Module 3
Page 14/15
Module 3
WebPage Authoring
Web Hosting (using AeroDrive)
 Submit all the files to the folder called public_html.
 The file name of the home page should be index.htm or index.html.
 If your logon name is abc, the URL of your home page should be
http://aero.plk83.edu.hk/~abc
 If you put your home page in a sub-folder called “computer” under the
public_html folder, the URL of your home page should be
http://aero.plk83.edu.hk/~abc/computer
 File names used in our AeroDrive are case-sensitive.
 Try to use 互聯通, 一線通 or 一按通 for easy file uploading.


Other than our AeroDrive, you can try some outside web hosting services such as
GeoCities of Yahoo.
You can promote your web site by registering it in some popular search engines.
Visit http://hk.yahoo.com and click the hyperlink labeled as 加入你的網頁 on
the bottom of the page.
How to register your home page to the largest search engine http://www.google.com ?
Homework
1. Produce a home page. (named as index.htm)
2. You have to explore three more features of Microsoft FrontPage that are not
mentioned in this notes. Explain clearly these three features with three web pages.
(named as page1.htm, page2.htm and page3.htm respectively)
3. Link up the home page and the other web pages.
4. Host all the web pages and associated files to the AeroDrive. Submit a HTML
file with your csno as the file name. (e.g. 3101.htm) The HTML file should
contain the hyperlink to your home page in (1).
Form 3 Computer Literacy
Module 3
Page 15/15