Creating a Web Page using Mozilla Composer- A Free Open Source Application Emily Hebard IT Lab School of Information University of Texas at Austin Spring 2003 Objectives Orient to the Mozilla Composer tools Create a basic web page Getting Started Step One Open a new Composer Page: Start by launching Mozilla To start making a web page, go to File -> New -> Composer Page Step Two Orient to the window: At the top you see many icons that are similar to those found in a word processing application such as new, open, save and print. Other icons are unique to web authoring such as image, which lets you insert an image in your page, and table which lets you insert a table. Also you see the link icon which lets you create a hyperlink in your page. Also notice the publish icon, this is Mozilla s FTP function which allows you to publish your web page to a server and make it viewable on the worldwide web. On the next tier of icons you have many of your text formatting tools. On the very left you can choose the format for the type of text you are typing, whether part of the text body or a heading. Next you can choose the color of your text by clicking on the black box in the fore ground and the color of your background by clicking on the white box in the background. The small and large A s let you change font size, and you can also choose if you want your text bold, italicized or underlined. Finally, you can add in bulleted or numbered lists and choose a justification for your text.
At the bottom of the window you see tabs. These will allow you to toggle between different views. These are normal view, which is the default view you see now, then the tags view, which shows what part of the page you are working on, then there is the code view which shows the HTML code for your page and the preview tab which will show you what your page will look like in a browser window. Saving your Page Step One Saving the file: Go to the menu item File -> Save As A window will pop up asking you to give a title to the current page, this will be the title that appears in the blue bar at the top of the page, and will also be the default title suggested by the program as you continue to save. Go ahead and type in a title and click O.K. Then, the standard Save window will open. If you are satisfied with the suggested title go ahead and leave it. Then browse to where you want your document to be saved and click Save. Step Two Saving your work as you go: To continue saving your work as you go along, go to the menu item file-> save. Notice that when there are no changes to save on the page, the Save selection is grayed out. Formatting text Step One Select the text: To format text, use your mouse to highlight the desired text. Then look in the toolbar at the top of the window to choose from the various formatting options. Step Two Apply formatting changes: - To increase the font size of the selected text, click on the large A - To bold the selected text, click on the bolded B - To align the text to the center, click on the align center button
Insert a Table Step One Specify table attributes: Go to the menu item Insert-> table Specify the number of rows and columns you want in the table Determine how big you want the table by specifying the table width in terms of the percent of the page it will take up Specify how thick or thin of a border you want around the table Click OK Step Two Align the table: First make sure that your cursor is in the table. Then, go to the menu item table then go to select -> table. This will highlight the entire table. Then click on the align center button in the tool bar. Insert an Image Step One Insert the image, Create alternate text: Go to the menu item insert -> image Click on the choose file button. Browse to where your image is saved and select it by clicking on it once. Then click the open button. Back in the image properties window, enter an appropriate description in the alternate text field. Then click O.K. Step Two Align the image: Use your mouse to click on it so that it is highlighted blue, then click on one of the alignment buttons. Step Three File management A web page with images in it is actually a collection of files. You have one file that is your web page containing the HTML code. And when you insert an image, you introduce another file, the image file. The image file does not live within your web page, it exists independently. Your web page only contains directions on how to retrieve the image which is usually the file name of the image. These directions are called the relative path. This kind of structure means you need to respect the relative path and be careful to always save your image and your web page in the same location- usually a single folder. If you put them in separate folders, the web page will not be able to find or display the image. If you have trouble getting your image to display on the web, a good troubleshooting strategy is to check to make sure your web page has the correct relative path to the image. To do this, go to your HTML code, and locate the code that says image source-
check the file name in the quotes and make sure the HTML code is referencing the correct file. WRONG: <imgsrc="file:///c:/documents%20and%20settings/labuser/desktop/mozillawindo w.jpg" CORRECT: <img src="mozillawindow.jpg" Make Hyperlinks Step One: Highlight the text Use your mouse to highlight the text you want to be a link Step Two: Make the link Next go to the toolbar at the top of the window and click on the link button. This will open a new window the link properties window. Type in the URL, then click O.K. Make an Internal Link Step One: Create a named anchor Place your cursor where you want to put the anchor (example: if you are creating a Back to top link, you will put the anchor at the top of the page) Next, go to the menu item Insert -> named anchor This will open a new window where you can type in the name of the anchor, type in something simple, like top Click O.K. The little yellow anchor icon that appears is the named anchor (the icon will not be visible on the web) Step Two: Link to the named anchor Place your cursor where you want the link to exist (example: if you are creating the Back to top link, you will make the link at the bottom of the page) Next, highlight the text that you want to make into a link with your mouse and click on the link button on the toolbar at the top of the window In the Link Properties window that will open, type in #titleofyournamedanchor The # sign indicates that it is a named anchor you are linking to. Click O.K.
Modify Page Properties Step One: Change the color of the background, text and links Go to the menu item edit -> preferences Go to the Appearance category and double click on it To change the background color of your page, click on the subtopic colors Then, in the right hand side of the window, click on the colored square next to background (or text or visited links ) a grid of palettes will appear, use your mouse to select the color you prefer Preview your Page in a Browser Step One: Previewing your page Click on the browse icon in the toolbar This will open a browser window so you can see how your page will appear after you load it on to a web server and make it viewable on the World Wide Web Step Two: Verifying your page location Remember, the preview function DOES NOT mean your page is on the web To verify the location of your page, look in the address bar at the top of the window A file path beginning with file:///c:/ is displayed, meaning that the file is stored on your local hard drive (the C drive is your local hard drive) A file path beginning with http:// means that your file is on the World Wide Web Recommended sources: http://www.mozilla.org Go here for the latest version of Mozilla