Creating Web Pages with Mozilla s Composer and Uploading Files with CuteFTP

Size: px

Start display at page:

Download "Creating Web Pages with Mozilla s Composer and Uploading Files with CuteFTP"

Bethany Short
6 years ago
Views:

Creating Web Pages with Mozilla s Composer and Uploading Files with CuteFTP INTRODUCTION This document describes how to create a basic web page with Mozilla Composer and how to publish it on the

1 Creating Web Pages with Mozilla s Composer and Uploading Files with CuteFTP INTRODUCTION This document describes how to create a basic web page with Mozilla Composer and how to publish it on the Bruin Online web server with CuteFTP. The screenshots show the PC version 1.7 of Mozilla. The layout of other versions or on other operating systems may differ slightly, but will follow the same essential steps. PC and Mac versions of the Mozilla Suite can be downloaded for free by UCLA faculty and students at or at (the version you want is the Mozilla Suite, not the stand-alone Firefox Web Browser). Free PC and Mac versions of CuteFTP can be also be downloaded at the Bruin On-Line site. OPENING COMPOSER By default, Mozilla will open the Navigator window. In order to work with Composer, you ll need to click on Window and then select Composer. Page 1 of 9

PAGE TITLE AND PROPERTIES While the name of your Composer file should be something simple like syllabus.html, the Page Title can be much more descriptive, such as History of Peru, Fall 2006.

2 PAGE TITLE AND PROPERTIES While the name of your Composer file should be something simple like syllabus.html, the Page Title can be much more descriptive, such as History of Peru, Fall This title will appear at the top left of the browser window when visitors access your page. To give your document a descriptive title, click the Format tab and choose Page Title and Properties. Note: only the Title will appear (not Author or Description). PAGE COLORS AND BACKGROUND If you would like something more exciting than just the plain white background, you may change the background color by clicking on the Format tab, then choosing Page Colors and Background. As shown below, you ll want to choose Use custom colors, and then you can set the color scheme for normal text, links, and the background. You can also set the background to display an image by choosing and inserting a file under Background Image. Page 2 of 9

3 Page 3 of 9

4 PUTTING TEXT ON A WEB PAGE Below is what Composer looks like when started on a PC. You may begin typing any text you wish to appear on your web page. Formatting toolbar Similar to a word processor, the formatting toolbar allows you to change character attributes like size, color, bold, etc., as well as paragraph attributes like alignment and indentation. The tabs at the bottom of the page let you switch between different views. In this tutorial we will only be using the Normal view. The Preview tab lets you see the page exactly as it will appear on the web once you publish it, and if you know HTML and wish to insert code or view the source of your current document, you can do so by clicking on the <HTML> Source button. Page 4 of 9

DESIGNING YOUR WEB PAGE WITH TABLES One convenient way to organize the layout of your web page is by using tables. They are especially helpful when placing images next to text.

Keep in mind that the resolution of the monitor you are using might not be the same as the person looking at your web page later, so go with % of window unless you are sure about the correct pixel

5 DESIGNING YOUR WEB PAGE WITH TABLES One convenient way to organize the layout of your web page is by using tables. They are especially helpful when placing images next to text. Clicking on the Table button will open this window: Specify the size of your table. You can specify the width either in % of window or in pixels. Keep in mind that the resolution of the monitor you are using might not be the same as the person looking at your web page later, so go with % of window unless you are sure about the correct pixel sizes. The Advanced Edit button allows you to further customize HTML attributes of your table. Note that you can create tables within tables; however, you have to use the menu Table Insert Table as clicking the Table button while you are inside a table will bring up that table s properties. Below is an example of several tables nested within each other. Page 5 of 9

INSERTING HYPERLINKS You will probably want to refer people browsing your page to other pages of interest on the web (or on your site). To do this, you ll need to create a hyperlink.

6 INSERTING HORIZONTAL LINES An easy way to separate text, or otherwise create sections, on your page is to insert a Horizontal Line. Simply place the cursor where you would like to add your line, go to Insert and then choose Horizontal Line. INSERTING HYPERLINKS You will probably want to refer people browsing your page to other pages of interest on the web (or on your site). To do this, you ll need to create a hyperlink. You need to know the URL (the address ) of the web page and also to decide what the text of your hyperlink will be. For example, you could link to the UCLA Homepage and name the link UCLA Home Page. To do this, click on the Link button. A menu will pop up. Enter the text to display and the address of the link in the appropriate fields. For the above example, it looks like this: Page 6 of 9

Note: When creating a hyperlink, you have to include the http:// prefix since otherwise the web browser will search for a page named www.ucla.edu in the current directory.

the page without any path in the link location. For example, suppose you have a page called index.html and a page called syllabus.html in the same directory on your web server.

7 Note: When creating a hyperlink, you have to include the prefix since otherwise the web browser will search for a page named in the current directory. To create an link for people to you from your page, use the mailto: prefix: To refer to pages in the same directory as the page you are linking from, just type the name of the page without any path in the link location. For example, suppose you have a page called index.html and a page called syllabus.html in the same directory on your web server. To refer from your index page to your syllabus page you would create the following link: INSERTING IMAGES To insert an image, click the Image button and the following dialog box will appear. Page 7 of 9

If the image you would like to display is already on the web, you can type in its location. If you want to use an image from your hard disk, use the Choose File button.

8 If the image you would like to display is already on the web, you can type in its location. If you want to use an image from your hard disk, use the Choose File button. If you would like text displayed when the person viewing your page moves their mouse over the image, enter it under Tooltip. If you would like text to display in case the image doesn t download correctly or the user has images turned off, you can enter it under Alternate Text. UPLOADING YOUR PAGE TO THE INTERNET Bruin On-Line Computing provides every Bruin OnLine user with 15 megabytes of server space on which to host webpages. The URL of your web page will be - if your BOLid is jbruin, the URL of your webpage will be CuteFTP is a software program that allows you to transfer files on your local computer to the Bruin On-Line server. Again, versions of CuteFTP for both Mac and PC are available at: The interface will look like this: Page 8 of 9

Since security codes and server information change frequently, it is best to consult BOL s instructions online at the following sites: Windows users should

9 Since security codes and server information change frequently, it is best to consult BOL s instructions online at the following sites: Windows users should visit: Mac users can go to: Page 9 of 9

ADOBE DREAMWEAVER CS4 BASICS

ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,