Making a Web Page with Netscape Composer Joyce Barrett Part 1 adapted from a presentation by Patrick Douglas Crispen on Web Page Design (http://netsquirrel.com/classroom/index.html) Part One: The Basics If you break Web design into its individual components, it becomes a lot easier to understand. Three Parts of a Web Page • The Text – This is simply the content you are sharing with your audience. • The Multimedia – Usually, this is just pictures, but it could also include sound files, movies, animation, and stuff like that. • The HTML Creating Text or Content • You can use any Word processor or text editor to create content: • Microsoft Word • Notepad – save the document as a text file. • Some programs like Word or Publisher will convert documents into Web pages. • You can also type directly into an HTML editor. The Multimedia For graphics use: – GIFs for drawings, text, & short animations – JPEGs for photos To help Web pages download faster: – Save photos at 72 dpi resolution – Save at the size to be used on the Web page. The HTML Hypertext Markup Language (HTML) • HTML is a formatting computer language. • HTML tells the software (Web browser) how to display a Web Page. • Formatting commands are inside the < > • For example, to make something bold: <BOLD>This text is bold</BOLD> Netscape Composer is an HTML Editor. It creates the HTML for you. Open Netscape Communicator – You can see the HTML code underneath any Web page that is open in Netscape. – Click on View Page Source Part Two: Getting Ready It is easy, as long as you follow a few basic steps. 1 1. Create a folder on your disk and name it images. – Save all the images you will use on your Web pages into this images folder. 2 2. Create another folder on your disk and give it a simple name. – Use all lower case letters with no spaces. – You will save your home page as index.html into this folder. – The folder name will become part of the URL address. 3 3. Open Netscape, click on Communicator on the menu & select Composer. Or – Select the Composer option from the Components Bar. 4 A new blank page opens in Composer. 5 Set Page Properties From Menu Select Format Page Colors and Properties 6 Give Your Page a Title Select the General tab and enter: • Title of the page • Author = your name Click on Apply The title will be at the top of the Web page menu bar and will also become the bookmark title. 7 Set Colors & Background Choices: • Pick colors for text & background • Use a Netscape color scheme • Select an image for background. • For more pages like this one. 8 Save the Page After setting up page properties: Save your home page as index.html in the Web folder you created in Step 2. Part Three: Creating the Content What do you want to show and tell? 9 Create Text You can type directly into Composer. OR Use any Word processor or text editor to create content: • Microsoft Word • Notepad – Save the document as a text file and open in Composer OR – Use CTRL + C to copy and CTRL + V to paste the text into Composer. 10 Format Text Font size Font color Alignment Bold & Font types Italics Heading & Paragraph styles Indent Bullets Numbered Lists The safest fonts to use for Web pages are Variable Width and Fixed Width. Arial and Comic Sans are also often used on Web Pages. 11 Toolbar Features Create a link to Insert an Create a another Web site image table Link to a specific spot on a Web page Check spelling Save the file & click on Preview to see how the page will look on the Web. 12 Insert Images Place the cursor where you want the picture and click on Image on the menu. Find the image file in your images folder. Select the text alignment. (Other choices) Set space around image. Add or remove a border around the image. Part Four: Creating Links Make connections to target areas on your pages, other Web sites, and email addresses. 13 Web Links Create a Text Link 1. Type the text to identify what the link is and highlight it. 2. Click on the Link icon on the Toolbar. 3. Type the path to the file or or copy the URL of your link. 4. Click OK. Save the file and click on Preview to test the link. 14 Internal Links - Targets Create a Target 1. Place your cursor where you want the link to go to. 2. Click on the Target icon on the Toolbar. 3. Give the target a name. Create an Internal Link 4. Go to the text for your link and highlight it. 5. Click on the Link icon 6. Click on the target in the list. 7. Composer will put # and the name of the target for the link. 15 Email Links 1. Type the name of the person or the email address in the Web page and highlight it. 2. Click on the Link icon on the Toolbar. 3. Type mailto:emailaddress 4. Click OK. When the link is clicked on the Web page, an email message box will pop up. Part Five: Inserting Tables Tables can help control the alignment of images and text on a Web page. 16 Set up a Table Place the cursor where you want the table and click on Table on the toolbar. 1. Type in the number of rows and columns. 2. Select Table alignment. 3. Choose a border width or 0 for no border. 4. Set cell spacing & padding (usually 3) 5. Set table width (how much of the page it will cover). 6. Uncheck equal column widths to adjust automatically to content. 7. Select a color or image for Table background if desired. 17 Change Table Properties You can change the settings for all the Table, a Row, or an individual Cell. 1. Click inside the Table. Go to Format, then Table Properties OR 2. Put the cursor inside the Table, Cell, or Row you want to change and right click. 3. Select Table properties. 4. Click on the correct tab – Table, Row, Cell and make the changes. You can select a background color for individual rows or cells. 18 Edit a Web Page To make changes to your Web page later or to edit any Web page on the Internet: 1. Open the page in Netscape 2. Click on File Edit Page The page will open in Composer. Wow! Look what you can do now. Have fun!