Web Page Design with Netscape 7.1 Walter Gajewski, Academic Computing Services Francine Vasilomanolakis, CSULB Dept. of Education STEP 1: Downloading Netscape 7.1 It is possible to lay out and publish a web page with Netscape Composer, a software application included with the Netscape (version 7.0) Web Browser (free from Netscape). To install Netscape (version 7.1) on your own computer go out to the Netscape web site http://www.netscape.com and click on “Netscape 7.1” located under “Tools” and often under “Dowloads of the Day”. From the “downloads” page you can either install Netscape directly to your personal computer or have them mail you their free CD-ROM. Once Netscape is installed on your computer, you’re ready to create your first web page. STEP 2: Getting a CSULB internet (email) account Before you start authoring your on-line masterpiece you will have to apply for a campus web account. CSULB students can create an email account by going to http://www.csulb.edu/namemaster/ You will now have a user name and password. STEP 3: Creating or Editing a Web Page Note: The index.html file is the Home Page in your web site. When others visit your web site, they will automatically be directed to your index.html file. If this file is missing, all the contents of your directory will be displayed as a list so you must call the file of your home page index.html You have three options available with Netscape Composer: 1. You can create a brand new web page 2. You can edit a web page that you already have on the CSULB web server 3. You can edit a web page that only exists as a file on your local computer 1. Creating a new web page 1. Select File Î New Î Composer Page 2. A blank page will open. 3. Select File Î Save As . 4. Name the file index.html (if this is your Home Page) 5. In the Save as type dialog box select HTML Files Page 1 of 6 6. Save to a folder on your computer specifically for your web site materials. 2. Modifying your existing CSULB home page. 1. Use Netscape to view your CSULB web page on the web. Your web address on the CSULB server is: http://www.csulb.edu/~yourusername/ 2. Select File Î Edit Page 3. A Composer window will open with this page. 4. Select File Î Save 5. Save to a folder on your computer specifically for your web site materials. 3. Modifying an existing web page on your computer 1. Select File Î Open Page . 2. At the option to Open file or location in select Composer 3. Click on Choose File... and a new dialogue box will appear. 4. Browse and select the file you want to modify and click Open. The page opens in Composer. 5. Go to File Î Save to a folder on your computer specifically for your web site materials. STEP 4: Editing & Formatting Text and Page Properties • Text Formatting The toolbar buttons in the editor window are used to change the formatting of text. Highlight the text you want to edit, then click on one of these buttons. The text becomes bold, italicized, or underlined. The last button will erase any styles on the highlighted text. • Text Alignment & Lists In addition to font styles, you can create ordered lists, numbered lists, decrease or increase indent and change the alignment of the selected text. • Change the Title of the Web Page In order to change the title of your webpage, 1. Go to the menubar and choose Format Î Page Colors and Properties. A dialogue box will appear. 2. Select General from the tabs across the top. 3. In the Title section enter your page title, click OK. • Change the Colors of the Web Page Page 2 of 6 1. Go to the menubar and choose Format Î Page Colors and Properties. A dialogue box will appear. 2. Select Colors and Background from the tabs across the top. 3. Click the Use custom colors radio button. 4. Change any of the colors by clicking the color box to the left. 5. Select a color from the color palette drop down menu. 6. When done, click OK. STEP 5: Inserting an Image & Saving Images from the Web • Inserting an image onto your page 1. Place the blinking cursor in the area where the image will go. 2. Click the image button . A dialogue box will open. 3. Under Image Location, click Choose File.... 4. Select an image to insert from the files on your computer. 5. Click Open then click OK. The image will appear on your page. Other Options: o To resize the image manually: Click on the image and drag the edges (to widen or lengthen) or the corners (to make bigger or smaller). o To make changes using the dialogue box: Double-click the image. Make adjustments in the dialogue box that appears and click 'OK'. • Saving images from the web Graphics/Images Any image found on the web may be saved to your computer using the following steps: 1. Place the mouse pointer on top of the image. Right-click (Mac users, click and hold) with the mouse and choose “Save Image As ...” 2. The name of the file may be changed, but the extension (.gif, .jpg or .png) should NOT be changed. Page 3 of 6 STEP 6: Making Tables • Add a table 1. Place the blinking cursor in the area where the table will go. 2. Click on the table button A dialogue box will appear. Specify the number of rows and columns. Enter a border line width. A value of "0" will make the borders invisible when viewed in a browser. The width of the table may be fixed or set to a percentage of the browser screen size. 3. Click 'OK' to add the table. • Modifying a table o Change table properties by right clicking on or in the table and choosing Table Properties. o More ideas and information on table elements are at http://eee.uci.edu/help/design/tables.html STEP 7: Making Links Link to a web site (URL) A URL is an internet address, generally beginning with 'http'. For example: http://www.yahoo.com/ or http://www.csulb.edu/ 1. Highlight the text or image which will become your link. 2. Click on the Link button . 3. A dialogue box will appear. 4. Enter the complete URL in the Link to a page location or local file box. 5. Click OK. Link to a local file or picture within your web site 1. Highlight the text or image which will become your link. 2. Click on the Link button 3. A dialogue box appears. 4. Click Choose File.... 5. Select the file you wish to link to. 6. Click Open then OK. Page 4 of 6 Link to specific place within the same page To link within the same page create a target then create a link that points to that target. This is useful for longer documents or documents that contain many sections. Link to an E-mail address 1. Highlight the text or image which will become your link. 2. Click on the Link button . 3. A dialogue box appears. 4. In the Link to a page location or local file box enter the following: mailto:[email protected] (where [email protected] is the email address you wish to link to) 5. Click OK. STEP 8: Preview your web page 1. Click on the Preview button 2. If you have not already done so, a dialogue box will open asking you to save changes. Click Save... and then OK. 3. Your web page will open in the Netscape Navigator. This is how your web page will appear to someone viewing it on the internet. STEP 9: Publishing to the Web 1. Save the file on your computer. 2. Click on the Publish button A dialogue box will appear. 3. In Settings tab: o For Site Name type My Home Page o For Publishing Address type ftp://ftp.csulb.edu o The HTTP address of your home page will have your user name as part of the address, something like this: http://www.csulb.edu/~yourusername/ Page 5 of 6 o Insert your CSULB Internet user name and password in the specified blanks 4. In Publish tab: o Page Title enter your own name. o File Name index.html (if this is your Home Page. If this is another page on your site use a file name like otherpage.html). o Site directory for this page htdocs/ 5. Click Publish Your document is now published to the World Wide Web! Have friends and family view it at: http://www.csulb.edu/~yourusername/ If you try to view this page with Netscape you may find that your old page is still stored in the browser’s cache memory. You can remove the old version of your web page from cache: Edit Î Preferences . Double click on Advanced Select Cache Î Clear Cache Click OK Click on the Reload Current Page button [fig 1] to force Netscape to get the newly edited version of your web page off the CSULB web server. Reload Current Page Figure 1 Page 6 of 6 .