Web Page in Minutes: Netscape Composer Basics This course is designed to provide a hands-on tutorial on using Netscape Composer and Home Directory Service at the University of Virginia to create and publish Web pages. Please note that this course is frequently offered for free to U.Va. students, staff, and faculty through ITC's Student Training Program. For questions about information in this document, you may contact the ITC Help Desk at 924-3731, or write e-mail to web-consult@virginia.edu. Note to Faculty and Staff: Netscape Composer is an acceptable editor to use if you do not have access to a superior editor such as Dreamweaver or Frontpage. Netscape Composer, though free and readily available, can be quite buggy and difficult to use. For a comparison of Web editors, please see: http://www.itc.virginia.edu/desktop/web/comparison.html.
Upon successful completion of this course, you will be able to do the following:
To view the finished product, open a Web browser, and browse to the following site: www.itc.virginia.edu/desktop/web/from.twl8n/tj.html There are three main tasks in putting together a personal Web site:
Home Directory and UNIX Information As noted in the previous section, we will be saving all of our work to a remote server through the use of Home Directory Service. In order for your Web site to be viewed publicly on the Web, you must save your Web pages in the public_html directory of your Home Directory Service account. To verify that all of your account settings are in proper order, visit the ITC Web Classes Accounts Verification page at http://www.people.virginia.edu/~trn-web/webtest.cgi. For more information on Home Directory Service, including how to acquire it if you don't already have it, please visit the ITC Home Directory Service page at http://www.itc.virginia.edu/unixsys/homedir. You will need to open your Home Directory service account so that you may save any editing changes you make to your new page back to your public_html directory. Home Directory is a service that allows you quick and easy access to your public_html directory. It eliminates the need for FTP (file transfer protocol - a way of sending information back and forth from a local machine to a remote server) by allowing you to treat your UNIX account (and public_html folder) as if it were a local drive. 1. To open Home Directory, go to the START menu, and scroll to PROGRAMS - HOME DIRECTORY LOGIN SERVICE. 2. If you are using Windows 95 or 98, your computing ID should already be displayed in the User Name field. If it is not, see connection instructions at the end of this document. If you are using a Windows NT workstation, you may type your computing ID in the User Name field. 3. In the Password box, type your UNIX/Home Directory Service password. (Note, the password you use to access blue.unix/Home Directory Service may be different from the password you use to read your e-mail. If you are having difficulty connecting, see the ITC Web Classes Web accounts utility page at http://www.people.virginia.edu/~trn-web/webtest.cgi.). 4. For the Drive Letter to Use section, you may accept the default setting, or pick any other drive letter that is not in use by your computer (to see what drives are in use, you may double-click on the My Computer icon on the Windows desktop, and you will see icons for each of the drives that are in use). 5. Click CONNECT.
You will then see a representation of the contents of your Home Directory account. Double-click on the public_html folder to view its contents. The resulting window will look similar (if not identical) to the following:
Minimize all of the open windows. Netscape Composer is an easy-to-use, basic Web editor that is available in most of the public computing facilities around grounds. Composer allows you to create simple Web pages which include text, color, images, tables, hyperlinks, and much more quickly and easily. To open Netscape Composer, perform the following steps: 1. Choose START 2. Scroll to PROGRAMS 3. Scroll to NETSCAPE COMMUNICATOR 4. Scroll to NETSCAPE COMPOSER and click once You will then see a blank Web page on the screen. You may notice that many of the toolbar buttons and menu options resemble a word processing program, such as WordPerfect or Microsoft Word, though some of the features may be missing. This is due to the simple nature of HTML, the underlying language of Web pages. Adding an Image to Your Web Page To place an image in your sample resume, you will first locate an image on the Web, and then save it to your Home Directory Service account. Then you will add the image to your Netscape Composer page. 1. Switch to your Web browser, and go to the following URL: 2. Position your mouse on the image at the top of the screen and click once with your RIGHT mouse button. 3. Scroll down and click SAVE IMAGE AS 4. In the SAVE IN section (at the top of the dialog box), press the downwards facing arrow and select the drive that you designated for you Home Directory Service account in the previous section. It should resemble the following:
5. Double-click on the public_html folder to view its contents, and you should see something that resembles the following:
6. Click on SAVE to save the image. Now that the image has been saved in the appropriate place in your Home Directory Service account, you may add the image to your Netscape Composer Web page later. Copyright issues regarding images - You should assume that any image, text, or other information on a Web page is under copyright unless otherwise stated. There are numerous places to get free images, which are noted in Appendix E. Adding the Image to Your Web Page 1. Switch back to Netscape Composer 2. Click on the IMAGE button on the toolbar
3. Click on the CHOOSE FILE button.
4. In the resulting dialog box, press the down-arrow key located next to the look-in box. Select the drive that you designated for you Home Directory Service account. It should resemble the following: DriveLetter:\\home1\YourUVaComputing ID
5. Double-click on the public_html folder. 6. Double-click on rotunda_sky 7. Click on OK. Entering text into a Netscape Composer Web page is much like working with a basic word processor. Simply click where you would like your text to begin, and then type. After you have entered your text, it is easy to format the text to a desired character formatting. 1. Click next to the Rotunda image so that you see a flashing insertion point. 2. Press [Enter] on the keyboard twice. 3. Type the following lines of text: Thomas
Jefferson Monticello 4. Press [Enter] twice after the last line of text. In order to format text, you must first select it with your mouse so that it appears "highlighted" on the screen. Any formatting changes you make will apply only to the selected text.
Most of your text formatting options are available on the formatting toolbar.
STYLES - This is a drop-down menu that has numerous pre-formatted styles. Headings range from 1 - 6, with 1 being the largest. FONTS - You may pick from numerous fonts, though you should maintain visual consistency throughout your Web page. Not all fonts work well on a colored background - they may have "gritty" edges, so make your selections carefully. FONT SIZES - This drop-down menu allows you to choose one of seven different font sizes. FONT COLORS - This drop-down menu allows you to change the color of selected text. BOLD - Makes the selected text bold ITALICS AND UNDERLINE - In general, you should avoid these two formatting options. Italicized text can be difficult to read on the screen, and underlined text looks like hyper-linked text. REMOVE ALL STYLES - Allows you to "strip" formatted text back to the default settings. ALIGNMENT - this drop-down menu allows you to select from three alignment options - left, center, and right. Formatting your Resume 1. Drag-select the text "Thomas Jefferson." 2. Click on the downwards-facing arrow in the styles section. 3. Select "Heading 3." 4. Click once on the rotunda image so that it is "selected." 5. Click on the ALIGNMENT button and select the center-alignment option.
6. Drag-select the four lines of text that follow the image. 7. Click on the ALIGNMENT button and select the center-alignment option. Saving a page in Netscape Composer involves two steps. The first is to decide where to save your page and what to call it. In our case, we will save our work to the public_html directory of your Home Directory Service account so that it will be viewable on the Web. The second step to saving a page is to declare a title for the page. The name of the page is different from the title of the page. The name is what you call the page when you save it. Names should have no spaces or punctuation. The title is what will appear on the blue title bar at the top of the screen when someone is viewing your page in a Web browser. The title can be up to 40 or 50 characters in length and may contain spaces and punctuation marks. If someone were to bookmark your Web page, the title is what would appear in the listing of bookmarks. To save your Web page, perform the following steps: 1. Click on the SAVE button on the Netscape Composer toolbar.
2. Save your changes to the public_html folder of your Home Directory drive under the name tj.html.
3. For the title, put whatever descriptive title you like, and then click on the OK button.
4. Your page is now published on the Web. To view your page, switch to your Web browser and type the following URL in the location box:
where Your UvaComputingID is your University of Virginia e-mail log-on (e.g. - mst3k), and filename.html is the name you gave your Web page when you saved it (e.g. - tj.html). Word processing and desktop publishing applications support many formatting and alignment features that are not available in HTML. However, through the use of tables you can create the appearance of many features, such as columnar formatting, indentation, and text wrapping around graphics. Additionally, you can "turn off" the borders of tables, which gives the appearance of complex alignment without the "edges" of tables. The resume depicted at http://www.people.virginia.edu/~twl8n/tj.html is accomplished through the use of a table that is 2 cells wide and 4 cells tall. To create this table, perform the following steps: 1. Click in the first available empty line after the address information. 2. Click once on the TABLE button on the toolbar.
3. In the resulting dialog box, you will want to check five sections:
4. Click on the OK button. To move from cell to cell in a table, you may click in the appropriate cell or use the following keystrokes:
Note: Pressing [ENTER] within a cell, makes the cell longer. 1. Click in the first empty cell and type "Education" 2. Press the down-arrow key to move to the next cell. 3. Type the following items, and press the down-arrow key after each entry:
4. Click in the first cell of the second column, and type College of William and Mary, Williamsburg, VA 5. Press the [ENTER] key on the keyboard. 6. Type:
7. Press the down-arrow key to move to the second cell in the second column. 8. Type the following lines, and press [ENTER] after each line (except for the last one):
9. Click the SAVE button on the Netscape Composer Toolbar. 10. Switch to your Web browser, and click on the RELOAD button to view your changes. By default, all of the cells in a table will have the exact same width. In order to make the left column more narrow than the right column, you will need to select any cell within the left column, view the properties for that cell, and change the cell width to a smaller setting than 100%. 1. Click in any one of the cells in the LEFT column. 2. From
the FORMAT menu, choose TABLE PROPERTIES. 3. If necessary, click on the CELL tab at the top of the dialog box. 4. Set the cell width to 10%. 5. Click on OK.
The default vertical alignment for cells is "center." As cells grow to be more than one line long, text centers vertically within the cell. Often this may be an undesirable effect. In order to correct vertical alignment for cells, you will need to select the cell, view the properties for that cell, and change the vertical alignment to "top."
1. Click in the "Education" cell. 2. From
the FORMAT menu, choose TABLE PROPERTIES. 3. If necessary, click on the CELL tab at the top of the dialog box. 4. Choose "top" in the vertical alignment section. 5. Click on OK.
6. Repeat steps 2-5 for any other cells that need adjustment in Vertical Alignment. 7. Click the SAVE button on the Netscape Composer Toolbar. 8. Switch to your Web browser, and click on the RELOAD button to view your changes. Bulleted and numbered lists are easy to create in Netscape Composer. Simply type the lines of text that you want for the list, select the lines that you typed, and then click on the Bullets button or Numbers button on the toolbar. Both bulleting and numbering indent the text slightly. This is an effect of the underlying HTML code, and cannot be avoided. 1. Click in the empty cell next to "Hobbies" 2. Type the following lines of text: Gardener Amateur Winemaker Inventor Book Collector 3. Drag-select the four lines of text. 4. Click on the BULLETS button on the toolbar.
5. Click the SAVE button on the Netscape Composer Toolbar. 6. Switch to your Web browser, and click on the RELOAD button to view your changes. 1. Click in the empty cell next to Extras. 2. Type the following lines of text: Web Sites
3. Drag-select the three lines of text. 4. Click on the NUMBERS button on the toolbar.
Note: You will not see the actual numbers displayed in Netscape Composer, but you will when the page is viewed on the Web. 5. Click the SAVE button on the Netscape Composer Toolbar. 6. Switch to your Web browser, and click on the RELOAD button to view your changes. An important design feature of all Web pages is ease of use. People who view your Web page should be able to navigate easily throughout the pages of your site, and they should always have an easy way to get back to your home page. A navigation bar is simply a list of hyperlinked items that is placed either at the top or the bottom of every page in your site. It should also contain information about how to contact you, and the date of the last update to your site. It should resemble the following: Home | Pictures | Resume | Interests | LinksPage Maintained
by: YourEmailAddress@virginia.edu The solid line at the top of the navigation bar is known as a Horizontal Rule. It separates the navigation bar from the main body of the Web page. Each item in the list is a "hyperlink" to a different page within the Web site. If you click on one of the links, you are taken to a related page. By placing this navigation bar on EVERY page of your Web site, you provide your viewers with a consistency throughout your Web site that is both visually appealing and easy to navigate. Contact information is important, because it gives your viewers a way of giving feedback, asking questions, or reporting problems within your site. Update information lets your viewers know if anything has changed since the last time they browsed your site. To insert a Horizontal Rule, simply click on the H. LINE button on the toolbar:
1. Type the following items below the Horizontal Rule (Note: The "|" symbol is located next to the [backspace] key on the keyboard):
2. Drag-select "Home | Links | Yahoo | Monticello" and choose Center Alignment from the formatting toolbar. 3. Select the word "Monticello" (but don't select the space before it). 4. Click on the LINK button on the toolbar.
After clicking on the Link button, you will see the Character Properties dialog box. In the section entitled, "Link to a page location or local file:" you could enter a Web page location directly, but there is a good chance you might make a spelling mistake or enter the wrong page. In order to avoid this problem, you may copy the information directly from a Web page. To do this, perform the following actions: 1. Switch back to your Web browser. 2. Navigate to the page you to which you want to link (in this case, www.monticello.org) 3. Select the address in the Location box, so that it appears "highlighted." 4. Position your mouse within the highlighted text, and click the Right mouse button. This will pull up a shortcut menu. 5. From the shortcut menu, click once on COPY. This will copy the selected address to the clipboard of your computer.
6. Switch back to Netscape Composer, and Right-click in the "Link to Page Location or File" box, and choose PASTE. This will place the proper Web address for your hyperlink.
7. Click on OK at the bottom of the dialog box. The steps are the same for any other hyperlinks that you may want to add to your page. Simply locate the page in a Web browser, copy the address, and then paste it as a "Link to" in the Character Properties dialog box for your selected text. A Mailto: link is a special kind of hyperlink that allows someone viewing your Web page to click on your e-mail address and automatically send you mail. The only difference in constructing a mailto: link is that you add the phrase "mailto:" before your e-mail address in the Link properties. To create a Mailto: link, perform the following actions: 1. Drag-select your e-mail address in the Navigation bar. 2. Click on the LINK button on the toolbar. 3. In the Link To a Page Location or Local File section, type the following:
4. Click OK at the bottom of the window. 5. Click the SAVE button on the Netscape Composer Toolbar. 6. Switch
to your Web browser, and click on the RELOAD button to view your changes. Appendix A - Connecting to Home Directory in Public Computing Labs 1. Restart the machine by clicking on START - SHUT DOWN - CLOSE ALL PROGRAMS AND LOG ON AS A DIFFERENT USER. 2. At the login dialog box, "Guest" will probably be given as the login ID. Delete Guest and type your U.Va. Computing ID (e.g., mst3k). 3. When you are asked if you want to save this login, click NO. 4. Start the Home Directory Login program by clicking on the START button, then PROGRAMS, and then HOME DIRECTORY LOGIN. 5. The Login dialog box will appear. Your University Computing ID should already be in the Username box. If it is not, you will need to reboot the system by clicking on START - SHUT DOWN - CLOSE ALL PROGRAMS AND LOG ON AS A DIFFERENT USER. See step 2 above. 6. Click inside the password field and type your Home Directory Service password. 7. Click on the CONNECT button. 8. A window will appear with a listing of your files inside of your home directory. Please note that if you use the blue.unix.virginia.edu cluster, you will see the same files that you view on the Home Directory Service. 9. When the program is running (you will see the Home Directory icon in the SysTray, which is near the clock at the bottom of the screen), you can open a new connection by right- or left-clicking the SysTray icon (house and red car) and select Connect. Select a new drive mapping. You will not need to enter your password since your session is still active. To prevent others from accessing your files, you must disconnect from the Home Directory Login program. Closing the view of your files does not break your connection. There are two ways to disconnect from the Home Directory Service: 1. Click on the Home Directory icon in the Windows SysTray. The SysTray is the grouping of small icons and the clock that sit on the end of your Windows taskbar. 2. When the Home Directory Login dialog box appears, click on the DISCONNECT button.
Appendix C - Register Your Home Page with U.Va. 1. Make sure the Netscape window is still active. 2. Go to http://www.virginia.edu/SrchSubmit.html. 3. Fill in your name and your URL and then press the Submit button. Note: Registering your home page with U.Va. will make your page more easily searchable by everyone on the WWW. This procedure is for individual home pages only. It is not meant to be used to register departmental home pages. Appendix D - Uniform Resource Locator The World Wide Web uses Uniform Resource Locators (URLs) to specify the location of files on other servers. A URL includes the type of resource being accessed (for example, FTP, news), the address of the server, and the location of the file. The syntax is: scheme://host.domain[:port]/path/filename where scheme is one of the following:
The port number can generally be omitted. (That means unless someone tells you otherwise, leave it out.) Appendix E- Additional Resources Archives of Icons and GIFS
A Beginner's Guide to HTML and the Web
Browsers, authoring pages, images, scripts and other Web tools HTML Tags Document Appendix F - More Additional Resources Netscape
Composer for Dummies Netscape
Composer - Creating Web Pages The ABCs
of Netscape Composer Official
Netscape Composer Book: Windows 95 & Windows NT Using
Netscape Composer Note: All of the above titles are available through Amazon.com. Department
of Information Technology and Communication (ITC) The Digital
Media Lab Staff of the DML offer training and assistance in new media technology; the lab, fully equipped with multimedia hardware and software, is open to students, faculty and staff. The DML also develops collections of digital images, sound, and video for use in research and instruction at the University of Virginia. University
Library
Web
Development Support | General
Info | Getting Started
| Design & Promotion
If you need further assistance with Web applications or questions, send e-mail to web-consult@virginia.edu or call the ITC Help Desk at 924-3731. |
|||||||||||||||||||||||||||||||||||||||||
