Module 3 WebPage Authoring
Module 3
WebPage Authoring
What is an HTML File?
l HTML stands for Hyper Text Markup Language
l An HTML file is a text file containing small markup tags
l The markup tags tell the Web browser how to display the page
l An HTML file must have an htm or html file extension
l 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
l In this module, Microsoft FrontPage 2003 will be used because of its coherent user interface with other Microsoft products.
l 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
l A new web page is given when FrontPage is started.
l To create additional web page click 網頁.
What are the differences between the terms “web page”, “home page” and “web site”?
Text
l 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).
l 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.
l 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
l 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.
Incorporating Multimedia Elements
l 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.
l 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
l Click 從檔案.
Text Wrapping
l Right click the picture and click 圖片內容.
Background picture
l Click 背景.
What is the meaning of “浮水印”?
Insert background sound
1. Click 格式à背景.
2. Click 瀏覽 and select a sound file.
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.
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.
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?
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.
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.
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.
Create a Web Site
1. Click 網站.
2. Select 單頁網站 and specify the location of the web site.
l First, if you look at the upper left corner of your screen you will see that the web site C:\test has been created.
l 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
l 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
l Click 開啟網站 and then select the folder storing the web site.
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.
- 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.
4. 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.
5. 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.
- 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. To access Shared Borders, click-on 共用邊框.
4. Specify the locations of the shared borders.
5. Double click on the Home Page (index.htm) icon.
6. Double click the shared border and then you can customize the hyperlinks on the shared border.
Hyperlink View
l 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
l Page Title will be shown on the title bar of Internet Explorer.
l 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. Double click SLOWLY on the File Name to change the file name of the page.
4. Double click SLOWLY on the Page Title to change the Page Title.
Note: The file name of the home page must be either index.htm or index.html.
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. Holding down the Ctrl key and select the pages that you want to apply the theme.
3. 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.
Web Hosting (using AeroDrive)
l Submit all the files to the folder called public_html.
l The file name of the home page should be index.htm or index.html.
l If your logon name is abc, the URL of your home page should be http://aero.plk83.edu.hk/~abc
l 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
l File names used in our AeroDrive are case-sensitive.
l Try to use 互聯通, 一線通 or一按通 for easy file uploading.
l Other than our AeroDrive, you can try some outside web hosting services such as GeoCities of Yahoo.
l 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 1/15