Composer

Faculty Multimedia Development Lab
Monday - Friday, 9:00 am - 4:00 pm
67 MacNider Hall
966-3519

* Introduction to Netscape Composer
* Making a Page (Creating a Page, Adding Text, Linking Text, Inserting Images, Adjusting Images, Linking Images)
* Page Elements
* UNC Med School Web Page Requirements
* HTML Resources on the Web

Introduction to Netscape Composer

Netscape Composer is a program which allows you to create web pages with little to no knowledge of HTML. It is a "What You See Is What You Get" program (WYSIWYG--pronounced "wiz-ee-wig"), which means the program codes your page into HTML for you. By the end of this workhop you will be able to create web pages by just learning the basic elements of Netscape Composer.
Making a Page

1. Creating a New Page:

a. Click on the Netscape Communicator icon on the desktop

b. In Communicator, click on Page Composer under the Communicator Menu on the menubar.
c. Click on File and drag to "New"

2. Adding Text: Type in text just as in a Word Processing Program. Once text has been entered you may format it (font face, style, color; paragraphs, headings, bullets, etc) by right clicking on it or choosing options from the toolbar.

a. Changing Character Properties: Just as with word processing, you can change the properties of the text. There are three ways to change the character properties.

1. After you right click on the text, choose Character Properties. In this menu you can change the font face, style, size, and color.
OR
2. Highlight the text by clicking and dragging over it, and then click on Format in the menubar.
OR
3. Highlight the text, and then use the buttons on the Toolbar.

b. Changing the Paragraph Properties: In this menu you can make text a heading and change the alignment of the text.

1. Changing Text to a Heading: Headings are very important in HTML and in web page design. There are different size headings (1-6) which will help organize your web page. To change the headings, click on Paragraph/List Properties and change the heading number in the Paragraph Style pulldown menu.

2. Changing the Alignment of the Text: In the Paragraph/List Properties menu click on the appropriate setting under Alignment section of the menu (left, center, or right).

c. Making a List: To make a List you will use the Paragraph/List Properties menu again.

1. Highlight the text for the list.
2. In the Paragraph Style pulldown menu, choose List Item.
3. Choose the type of list (bulleted, description, etc.) in the List Style pulldown menu.
4. Choose the type of bullets or numbers in the Bullet Style pulldown menu.

3. Linking Text: Links are what make the Internet a web. Links can connect individual websites to other websites (Absolute Link), or individual pages within in a website, or to different parts of a page in one website (Relative Link).

a. Adding an Absolute link: Follow these instructions to link your page to another web site.

1. Highlight the text you want to use as a link.
2. Right click on the text and choose Create Link Using Selected..., OR Click Insert and then choose Link.
3. In the Link To: box enter the URL (http://) of the web page you want to link to .
4. Click Apply, and then OK.

b. Adding a Relative Link: Follow these steps to link to another page within your website or to a specific place on your webpage.

1. Link web pages on your website: Follow the same instructions as above to get to the Character Properties menu.

a. In the Link to: box type the file name of the page you want to link to, OR click the Choose a File button and find the file you want to link to.

2. Link to a Specific Section on your Web Page: In this case you must create a Target in your webpage so the browser knows where to link.

a. To Create a Target:

1. Place the cursor where you want the target
2. Click on Insert on the menubar.
3. Pull down to Target.
4. Enter the name of the Target (i.e. top)

b. Create the link:

1. Highlight the text to use as a link
2. Get to the Character Properties box.
3. In the Link to: box type a "#" followed by the target name, (i.e. #top), this will link to the part of the page with the target named "top".


4. Inserting Images: Images can make a website look professional and appealing, but they can also slow you down and get you into trouble. Make sure to check the copyright on images you want to use on your web page. If they're copyrighted you need to get permission from the owner. Also, make sure you watch the file size of images you use. Staying under 50K on each web page is a good rule of thumb to follow.

a. Taking Images from the Internet: You can save an image from a website to use on your own, but again, make sure you are not violating copyright law. There are many sites which offer free images for use on your website. For a list of some of these websites go to http://www.med.unc.edu/webtools.htm

1. Find the Image you want to get, and right click on it.
2. Click on Save As...
3. Name the file.
4. Now you are ready to insert this image into your web page.

b. Inserting Images to your Web Page:

1. Click on the page where you want to put the image.
2. Click Insert on the menubar and pull down to Image.
3. In the Image Location box type the file name of the Image or choose a file using the Choose File button.
4. Click OK
5. The image will appear on your page.


5. Adjusting Images: You can adjust or "tweak" any image on your website, but there are a few guidlines to follow.

a. Resize your image in Photoshop, not in Composer! Resizing an image in Composer does not change the file size, and can also result in a distorted image. Resizing in Photoshop will change the file size and keep the image proportional.

b. Aligning your Image: You have several options when aligning your image with the text on the page. You may have the text align with the bottom, top, or middle of the line of text, or you may have the text wrap around the image.

1. Insert the Image
2. From the Image Properties menu choose a text alignment option that best suits your needs.

6. Linking Images: Images can be used as links just like text. Follow these instructions to make an image a link. The same rules and guidlines apply as when your were making text a link.

a. Select the image to make a link.
b. Right click on the image, and then choose Create a Link using the Selected...
c. In the Link To: box type in the URL, filename, or target name to link to.
d. Click OK. Your image is now a link.

Page Elements

There are five major page elements which should be included in your website. They will help with the organiation, layout, and professionalism of your website.

1. Headers: Every page of your website should have the same header. It can be an image, text, or both, but it should be consistently on every page. This gives your site continuity and organization. Check the Med school website for some good examples. http://www.med.unc.edu

2. Footers: These are less necessary, but can also help organize and make your website easier to navigate.

3. Text and Images

4. Last Updated Information: On the first page of your website you should have last updated information. Each time you update your web page change the date.

5. Contact Information: Make sure you include contact information on the first page of your website (i.e. email, phone number, fax number, etc.). A good way to include contact information is to create an email link. This allows the user to click on the link and compose an email directly to the specified email address.

a. To create an email link:

1. Highlight the text to make an email link
2. Click on Link in the Insert menu
3. In the Link To: box type in "mailto:" and the email address. (mailto:johndoe@med.unc.edu)

UNC Med School Web Page Requirements

There are ceratin requirments when creating a web page for the UNC Medical School. Here is a list of the requirements for Med school web pages:

1. The home page must be saved as "welcome.htm"
2. Filenames of pages must be all lowercase (i.e. welcome.htm, NOT Welcome.htm)
3. Pages must be saved with the .htm extension, NOT .html (i.e. welcome.htm, NOT welcome.html)
4. Contact Information must be included on the first page


HTML Resources on the Web

There are literally thousands of HTML, web design, and graphics resources on the Internet. These websites can be excellent resources when trying to create your web pages. Here is a list of several very useful resources:

1. A Fifteen-Minute Class - You'll master HTML jargon and be talking like a web-head in no time. http://www.gorin.com/class/class.html

2. Quadzilla - "Your one-stop Web Development Site, peirod". Winner of more awards than a certain movie.http://www.quadzilla.com

3. The Web Style Manual - The most helpful style guide you'll ever find, on or off the web. The Web Style Manual shows you how to layout your pages and why. http://info.med.yale.edu/caim/manual/index.html

4. Sucky to Savvy: Ways to Improve Your Web page - Once you have your pages written, check here to see if you made any of these common errors. http://www.glover.com/ss/ssmain.html

5. Browser-safe color pallet - Although most browsers can display 256 colors, only 216 of these colors are the same on both PC and Macs. Use the browser-safe color pallet to choose a color all browsers can use! http://www.lynda.com/hexh.html

6. The Ball Boutique - More graphics and incredible backgrounds; contains a substantial links section as well. http://www.octagamm.com/boutique/mainball.htm

7. Web Site Garage - Checks for meta tags, load time, and promotes your site, among other things. http://www.websitegarage.com

8. Web Page Report Generator - Keep track of who and how many have visited your web site. You must have a SOM id to use this. http://med.unc.edu/websum.htm