Modify a Simple web page

- Open
- Page Properties
- Modify text
- Previewing
- Email Links
- Modify Tables
- Insert Images
- Relative Links
- Absolute Links
- Create from scratch

What do you DO with this website once youíve created it on disk?

• Exhibit a basic understanding of Netscape Composer
• Modify an existing HTML document (web page) 
• Modify page properties and text
• Make Links -- email, absolute, and relative
• Insert Tables
• Insert Images
• Create a simple HTML (HyperText Markup Language) web page 
• Know who to contact for help

Open the software (Netscape)

• Open Netscape. 
• Netscape Communicator has several functions. You may have used the browser to view Web pages. The browser is called Navigator. We will be using Composer, the Web page editor.
• At the Top menu bar under Communicator --> Composer

this opens a blank web page (HTML document)
• Notice the top toolbar (Link, Image, H.Line, etc.)
• Notice the text toolbar (type, font, size, color, etc

• File --> Open Page
• Click on Choose File
• Go to the Desktop (or the location for your unzipped files) and select the file named syllabus.html
• Click Open 
• Click Open

• Format --> Page Colors and Properties
• At Title: type in "your course name ­ Syllabus" (minus the quotation marks) (if you don't see these choices, try clicking on the different tabs).
• At Author: type in your name
• Click on the Colors and Background tab
• Select "Use custom colors"
• Click on the white box beside "Background color" and select the white square in the color pallette
• Click OK

• Select the text from "History and Culture of China" to "7:30pm"
• Format --> Align --> Center
• Select the line of text under "Book Required"
• Format --> Style --> Italic or click on A in text toolbar 
• Select "Course Requirements" -- want to make it a heading
• Click on text toolbar arrow beside "Normal" and click on Heading 4
• Do the same for "Important Dates" and "Schedule"
• Save your page! Click on the Save icon on the top toolbar

• You have to look at your work in Navigator to see how it will look on the Web. The icon for the Navigator is a ship's wheel.
• Click on the Preview icon on the top toolbar. Notice how similar it looks!
• Close the Netscape browser window ("Navigator") by clicking on its top rightmost "X-in-a-box." (on the Mac, click the box on the top left). Or return to Composer by clicking on the writing pad icon (on bottom right).

Select "Leigh Jay Temple" and replace with your name, and beside your name, type in your email address in parentheses (ljtemple@unity.ncsu.edu)

• Select the email address but not the parentheses
• Insert --> Link
• In the white box under "Link to page...." type: mailto: yourEmailaddress@xxx
• Click OK
• Save your page!
• If you check this in the Navigator and it doesn't work, make sure you typed mailto: exactly as shown above.

• Place your blinking cursor under "Important Dates"
• Insert --> Table --> Table or click on the Table icon on the top toolbar
• In the New Table Properties window type in 4 rows and 2 columns
• Make sure "Table Width" is checked and type in 50 beside "% of window"
• Uncheck "Equal column widths"
• Click OK
• In the first cell of the first row type Assignment and make it bold, press the TAB key to change to the next cell.
• In the second cell of the first row type Due Date and make it bold, press the TAB key to change to the next cell.
• Type in text for the remaining cells 
• Change the color of the first row and the text in it 
• Click in the first row of the table
• Format --> Table Properties
• In the Table Properties window click on the tab at the top named ROW
• Check "Use Color:" 
• Click on the grey box beside "Use Color:" and click on a dark color. Notice that it is hard to see the text you typed earlier.
• Select the text in the first row of the table
• Format --> Color and select a light color (white or grey)

 
• Center the text in the table 
• Select all the text in the table
• Format --> Align --> Center

 
• Save your page! Click on the Save icon on the top toolbar
• Click on the Preview icon on the top toolbar.
• Close Navigator window.
• Close syllabus.html

• We will start by opening a new existing Web page and working with it. 
• First, open an existing webpage while in Netscape. 
• File --> Open Page
• Click on Choose File
• Go to the Desktop and select the file named china.html
• Click Open 
• Click Open

 
• Page Properties 
• Format --> Page Colors and Properties
• If necessary, click the tabs until you see Title and Author. At Title: type "your course name" (minus the quotation marks)
• At Author: type in your name
• Click on the Colors and Background tab
• Select "Use custom colors"
• Click on the white box beside "Background color" and select a pastel square in the color pallette 
• Click OK 
• Position your cursor to just before the word "Welcome!"
• Insert --> Image or click on the Image icon on the top toolbar
• In the Image Properties window under "Image location..." type in graphics/china_logo.gif (or you can try to browse to the graphics folder to find this picture). Under Alternative Representations, type a short description of the picture in the Text box (such as "Chinese flag" -- this will help make your Web page accessible to people with vision impairments).
• Click OK
• Press ENTER to put "Welcome!" on a different line.

 
• Modify Text in page 
• Select "Welcome!" and change it to Heading 1
• Underline "Useful Websites" -- Select text, Format --> Style --> Underline

Relative links are within your website. These links are based on the files' relationships with each other. The use of relative links allows files to call each other without using their exact location on the hard drive or floppy drive. (important if you plan to carry your Web pages on disks or CDs)

• Example: graphics/china_logo.gif rather than A://netscpae_tutorial/graphics/china_logo.gif
• The use of relative links keeps your site portable (imagine a server trying to look for something on your floppy drive!).

• Example: http://www.ncsu.edu will not be part of your site, but you may want to link to it.

• Select "Syllabus".
• Insert --> Link
• In the white box under "Link to a page location...." type in syllabus.html
• Click OK

(This process tells your current page to look for a file named syllabus.html in the same location, such as a floppy disk, or in a folder on your hard drive).
• Save your page!
• Click on the Preview icon on the top toolbar.
• When the Netscape browser window comes up, click on "Syllabus"

This is a new page--the file we just modified! So youíve created a relative link to a new page (file) in the same location as your original file.
• Close the Netscape browser window.

• Select the URL (web address) under "A History of China" 
• Insert --> Link
• In the white box under "Link to a page location...." type in 

the entire URL minus the ( )!
(http://www-chaos.umd.edu/history/toc.html) 
• Click OK
• Save your page!
• Click on the Preview icon on the top toolbar.
• When the Netscape browser window comes up, test the link you just made.

It's another website about the history of China.
• Close the Navigator window.
• Repeat this process for  "China -- History in General" . You may want to use this link
  http://library.thinkquest.org/26469/history/
• After saving and previewing your page, close the windows. (Note: if the links are broken, you can use a search engine, such as Google, to find two Web sites for history of China.)

• File --> New --> Blank Page 
• Start typing your own content! 
• Refer to the above exercies for how to 
• modify page properties, 
• modify text, and
• insert an image, link, or table

 
• You will need to save your new page in a folder on your computer. The first page of any folder for the Web should be named "index.html". You can use this Web page on your computer or carry it to another computer on a diskette. You will have to publish it on the Web to use it on the Internet.Remember, the images are not attached to the Web page. You always have to have your graphics or images folder with your Web pages.

• Know who to contact for help 
• Contact Dr. Lisa L. Grable (grable@unity.ncsu.edu)
• or Learning Technologies Resource Center (clt_poe@ncsu.edu) for further help with Netscape Composer.
• Your School information systems administrator

There are also other sites where you can create and post a website! For more resources see: 

MentorNet workshops Web page
http://ced.ncsu.edu/2/mentornet/mnworkshops02.html
Click on Create and Post Web pages
(Note: check out the other resources on this page. You may want to learn how to download graphics from the Web or use digital photographs.)

More Resources from the Learning Technologies Resource Center
http://ced.ncsu.edu/ltrc/studio/workshops/