---

Web Pages and Sites

A web site is a group of related pages. All web sites have a home page to act as a starting point for accessing the rest of the pages. Unlike paper, a web page can be of any length. It has nothing to do with the size of a printed piece of paper.

A web page may include any of the following elements:

• Formatted text – headings, bold, italic, indented lists, and a number of other kinds of formatting to make texts easier and more interesting to read.

• Graphics and multimedia – images, colours, patterns, quicktime movies, Java applets, graphics and multimedia including sounds.

• Hyperlinks – these can link to other pages, web sites, can download files and open email forms.

• Forms – including edit boxes, radio buttons, check boxes and pop-up menus.

• Tables – to display text and graphics and produce a neat appearance.

• Frames – split the browser window into sub-windows allowing more than one web page to be shown at any time.

Web pages and sites are viewed through web browsers. There are a number of different browsers on the market. These browsers run on different platforms, e.g. P.C. or Mackintosh. The version of the browser that you can use will depend on the age and capability of your computer. When you design a site, you must bear this in mind. When you design a site, it is advisable to use standard fonts, etc, so that the majority of users will be able to read the site in full.

HTML

Web sites are always written in HTML (hyper text markup language). You can design a site completely in HTML but it is simpler to use a web site design package. HTML is constantly being developed and sometimes, new versions of the code will not work with the software you are using. Unfortunately therefore, not all web browsers interpret HTML codes in the same way. Not all web browsers support all versions of HTML code. For this reason it is worth checking your website in a number of browsers to see what it looks like.

Remember also that computer screens can be set to different resolutions. When you change the resolution of a computer screen, you change the size of all objects and text on it. If you design a page using a high resolution screen, it will appear noticeably larger when viewed on a low resolution screen.

Planning your Web Site

The most important point in creating your web site is to plan ahead.

Anyone can create web pages, but it takes creativity and planning to create effective web pages.

• What do you want your pages to look like? If you plan a number of pages, you may want to use consistent formatting colours, patterns, logos and other elements to give your site its own identity.

• Are your pages going to be long or short? Long pages make it possible to provide more information but are slow to load and can be annoying to the end user who has to keep on scrolling to find information. They can also prove difficult to print. Short pages load quickly but can provide less information.

• Will your pages rely heavily on graphics? Remember that some browsers will not read graphics and not all visitors to your site will be willing to wait while graphic images load and appear on the screen.

• How do you want to organise your site? Think carefully about how the end user will navigate your site and how they will know where they are.

Using PageMill

PageMill in an Internet authoring tool that uses HTML to create web pages.

To start PageMill

Chose Start > Programs > Adobe >  Adobe PageMill 3.0.

Once PageMill is open, you will notice that it has two basic modes –

Edit mode, to create and edit web pages, and Preview mode, to see what your web page will look like. You can change the mode by clicking on the Mode button in the top right hand corner of the document window.

      

You must be in Edit mode to create your pages.

When you are in Edit mode, a toolbar will appear in the top window. If it does not appear, you can switch all of the toolbars on and off by choosing View > Toolbar.

All of the menus work in the same way as most common Windows based software. Simply click on the name of the menu you want and drop down to the necessary selection from the sub-menu. Remember that sub-menus that appear in grey cannot be selected.

The Pasteboard

PageMill uses a pasteboard to enable you to store frequently used elements and graphics. You can store a number of objects on different pages in the pasteboard. You can switch on the pasteboard by choosing View > show Pasteboard.

It is one of a number of floating palettes and, as with all of the floating palettes, you can move it by clicking on the title bar, then holding the mouse button down while you drag the palette to another place on the screen. You can close palettes simply by choosing View > Hide > Pasteboard.

The Inspector

The inspector is another floating palette that is used to set the attributes of a web page. It will work only in Edit mode. If you are in Preview mode, the window will be empty. Select View > show Inspector.

The top of the inspector contains the following tabs:

Frame tab – to set attributes for frames

Page tab – to set attributes for a page

Form tab – to set attributes for CGI scripts

Object tab – to set attributes for objects, including images and tables

The Colour Palette

The colour palette is again a floating palette that contains sixteen colour swatches. The reason there are only sixteen colours is that they are colours that are readable across all web browsers. You can extend the colour range. Choose View > show Colour Palette. Extend the colour range by clicking on the triangle at the bottom of the colour panel.

Invisibles

Invisibles are HTML codes that do not appear on the page but can be used to change the way your site appears or is navigated. The most common invisibles are

• anchors – to let you link to specific positions on a page
• margin breaks – to insert blank spaces between positioned objects
• comments – to enable you to insert notations
• hidden fields – used in CGIs to process forms

Choose View > Invisibles to show the invisible palette, View > hide Invisibles, to hide it.

Starting to create your Site

Create a new page by selecting File > New Page. The first thing you need to do is give your page a name. The page name is known as its Title. The page title appears in the title bar of the web browser every time someone visits your site. You can make a page title different from the page’s file name, but this can make it difficult for you to plan your site. To add a page title, select the contents of the Title box at the top of the document window. Type in a title and press return.

 

Now save your document using File > Save Page, and type in a file name when requested to do so. Remember that until you save a document, it is only in the computer’s random access memory and any power failure or problems with the computer will lose the document. Remember also that Save and Save Page As are not the same thing.

Practical Activity

• Open a NEW document and insert text, modifying its format, font, colour, etc.

• Cut and paste text using the Pasteboard.

• Change text using the Find and Replace command.

• Check spelling.

Note: although the formatting options appear similar to those used in word processors, HTML uses two types of formatting. These are physical formatting and logical formatting. Physical formatting specifies how text should look regardless of its use within the document. The text will always look the same, whatever web browser is used to view it. Logical formatting specifies how it should look within a document, for example, a style such as Strong could appear bold in one web browser and underlined in another. It will always stand out.

Activity

Experiment with different physical and logical styles.

Change the colour of parts of text.

Adding Images and Multimedia Objects

If you do not use the correct file extension, objects will not display properly in web browsers. Remember also when adding images and multimedia objects, that they take time to download. Some multimedia objects require additional plug-ins to enable web browsers to read them. Always keep file size in mind. Multimedia files come in a variety of formats:

• Images can be in GIF, interlaced GIF, JPEG, ProJPEG, PDF and a variety of other formats, although most of these others are not web friendly. GIF is an 8-bit, 256 colour format, very suited to simple graphic images that are easy to load on most browsers. JPEG is a 24-bit, 16 million colour format used for high quality graphics and photographic images. Most web editing software can import other graphic images, for example BMP (Windows) files and automatically convert them to GIF or JPEG formats.

• Movies and animations in animated GIF, QuickTime, Microsoft Video, MPEG and Shockwave formats. Animated GIF files contain multiple GIF images that, when displayed in sequence, make an animation. They offer a good way to include animation on web pages without inserting large movie files.

• Sounds in AU, Audio Interchange File Format (AIFF), Midi, Real Audio and Windows Sound (Wav) formats.

• Applets and controls in Java and Active X formats.

To insert an object on your page, position the cursor at the insertion point where you want the object to appear, and follow one of the following procedures:

1. Select Insert > Object and then select either Image, Sound or Applet. A new floating palette will then open, in which you can select the object to be inserted.

2. Drag the object to or form the pasteboard

3. Open the web site or graphics package you wish to take an object from, right mouse click over the object, select Copy. Now open PageMill, right mouse click, select Paste.

Once an object has been placed, you can select it by left mouse clicking. This will enable you to change its size and position, both within the inspector floating palette and by dragging the handles. Select Scale to Height in inspector palette to retain the image without distortion when you re-size an object. You can align an object using the Format > Align Object command.

Try putting a picture on the pasteboard and dragging it onto the background image section of the inspector.

Creating and Editing Tables

Tables are one of the most important ways of designing web pages. Whilst not all web browsers recognise tables, most modern ones do. Tables enable you to position text and objects accurately on your web pages. You can use them as a page layout tool. It is possible to create tables within tables. These are called nested tables.

Activity

Create a new document. Click on the Create Table button on the toolbar. There are two ways of using this button.

A single left mouse click will open a floating palette in which you can type the number of rows and cells you require.

By moving the cursor over the button, holding the left mouse button down and dragging your mouse cursor, you can alter the number of columns by Drag and Drop. If you accidentally create a table that you did not want, select Edit Undo.

 

Add a table and type into one of the cells. You will notice that the cell alters its size to suit the text you are typing. Try inserting a picture into a cell. Again, you will see that the cell alters its size to suit the picture. Around the outside of your table, you will notice a shaded red border. You can alter the total size of the table by dragging the handles on this border. You can also manually change the size of a cell by simply moving your cursor over the cell dividing lines, holding the left mouse button down and dragging the line to the size you want. You can insert rows, insert lines, pop-ups and a range of other things using the top menu icons.

You can combine cells by simply highlighting them and clicking on the Join Cells icon. Experiment with the use of tables.

Working with Links

Links are one of the most important aspects of a web site. There are two main kinds of documents when working with links.

• The source document is the document that contains a link.

• The destination or referenced document is the one displayed when you click on a link.

Web links work by including an address for each page called a URL (uniform resource locator). You can often recognise linked text or a linked graphic on a web page by the coloured underline or border around it. You can change these colours using the inspector.

To create a link, you must first provide a URL to the destination document. The URL is a document’s address or location on the Internet. It is very similar to the path name that you have on every file on your hard disk. The difference is that rather than all the files being stored on a single hard disk, they are stored on hard disks all over the world.

There are two types of URL:

• an absolute reference always includes the entire path name of the referenced location. Absolute reference: http://www.lshop.co.uk

• A relative reference includes the path name to the reference location relative to the source document. You must include absolute references to any location outside your own website. Relative reference: from index.html: catalogue.html

Remember that relative references will not work if you move your pages from one directory to another, or from one server to another.

Although URLs are the most common references used in web pages, there are other address types:

http:// opens a web page

file:// opens a file

ftp:// connects to an ftp server to download files

telnet:// connects to a server via telnet

gopher:// connects to a gopher service

mailto: sends an email message

news:  opens a Usenet newsgroup

It is important to ensure that the URLs are accurate, otherwise an error message will appear.

Links to locations that cannot be found are called broken links.

As well as linking to whole pages, you can link to anchors or bookmarks. Anchors and bookmarks are positions on a web page that enable you to hyperlink direct to a specific section of the page. You may use them on long pages where, often, web designers will create a table of contents at the top of the page, linked to anchors for topics further down the page, to enable users to access topics without scrolling. Anchors are invisible. To show them, choose View > show Invisibles. To insert an Anchor, choose Insert > Anchor. You can move anchors by dragging and dropping them. It is worth naming your anchors carefully so that you know where your links will move to.

Adding Links

You can add links in a number of ways. The most popular methods are:

• Using drag and drop

• Using copy and paste commands to copy links from one page to another
• Typing a URL into the link location bar

• Using the Place command

You can use the pasteboard to store links.

To add a link by dragging

In the source document, select the text or image that you want to use as a link. Drag the page icon or anchor from the destination or reference document into the selected area and release the mouse button.

To add a link by typing in the link bar

Select the text or image that you want to use in the source document. Click on the Link To bar at the bottom left side of the window. Type in the URL and press return. Remember to ensure that the URL is typed correctly. You can also use copy and paste commands to paste a URL into the Link bar.

To add a link with the Make Link command

Select the text or image that you wish to use in the source document. Choose Edit > Make Link. A new floating dialogue box will open up. Select the file you want to link to and click the Link To button. Note the Link To button will no appear until you have selected a file to link to.

You can edit a link by clicking on the Link To bar, press Enter on the numeric keypad or choosing Edit > Edit Link.

Hot Spots

You may wish to link specific parts of an image to different pages or web sites. To do this you have to create Hot Spots on the image. There are two kinds of Hot Spot image maps.

• A client side image map stores all of the Hot Spots and link information within the web page. When a user clicks on a hot spot, the browser gets the link URL from the web page. Although client side image maps are easier to create and use and offer much quicker access to linked pages, they are not supported by older web browsers.

• A server side image map stores all of the Hot Spots and link information in a separate image file which is stored on the web server. When a user clicks on a Hot Spot, the browser opens and searches through the corresponding image map file to get the URL.

To create a client side image map

Select an image on your page. Double click on the image you want to use and a thick border will appear around the image. Drawing tools will appear on the toolbar. Use drawing tools to add Hot Spots with necessary links to the image. Save the file. 

To create a server side image map

Set the preferences for your server’s image map format. Open an image on the page in the image window by holding down Control key and double clicking the image. The drawing tools will appear along the left hand side of the window.  Use drawing tools to create Hot Spots with necessary links. Save the edited image. Use the inspector to set the image as an image map and specify its location on the server.

Hot Spot tools

There are a number of Hot Spot tools including rectangles, circles and polygon tools. You can use these in the same way as you would in any graphics package. Once you have completed a Hot Spot, it will appear with a blue number beneath it. You can move Hot Spots by dragging and dropping them.

To add a link to a Hot Spot

Simply click on the Hot Spot and follow the normal link procedures.

Using Frames

As stated before, frames enable you to have multiple pages open at the same time. Information about frames is stored in a special web page document called a frame set. Frame sets can include any number of frames, but the more frames you include in a window, the less information will be able to appear in each window. You can create frames in two ways:

 

One, hold down Control key and position the mouse pointer at the left, bottom, right or top edge of the window. The mouse pointer will turn into a black arrow pointing into the document window.

Then press the mouse button down and drag in the direction of the arrow. A thick line indicating the frame edge will move with the mouse. Once you have the frame size you require, release the mouse button.

Two, use the sub-menu commands under Edit to create the frames.

Once you have created the frames, you can enter text and images into each frame as you would in any other web page.

You can also insert a new or existing web page document into frames. To do this, choose File > Frame Set > Insert Page. To work with a frame in a separate window, position your cursor in the frame you want to open and choose File > Frame Set > Open into Window.

To create a new page in a frame, position the cursor in the window, choose File > Frame Set > Insert New. The frame inspector will allow you to change widths and heights of frames, frame margins, scroll bars and a range of other options. You can also change the width or height of a frame by simply dragging it.

Forms

Forms are web pages with special elements designed to gather information. You can create a form using a number of different elements such as:

• check boxes
• radio buttons which let users choose from a variety of options
• text areas which accept long passages of text
• text fields which accept short strings of text
• password fields, pop-up menus
• submit buttons
• reset buttons
• hidden fields.

To use a form, you need a program called Common Gateway Interface (CGI). CGIs run on the server. They enable you to gather information and process it. Your server must have a CGI or your web pages will not function. CGIs can send data via email, add data to a database, use data to form the basis of a database search, and use data to create a web page. It is the CGI’s function, and not the forms themselves, that determine how the data is used. If you are not sure whether your server contains CGI, you should first check with the web master or system administrator before putting any of the following components on web pages.

You create forms by placing form elements, text and images on a page.

To create check boxes, position the cursor insert point where you want the check box to appear and choose Insert > Form > Check Box, or click the check box insertion button.

You will then need to specify your check box settings using the inspector.

Radio buttons are inserted in the same way, choosing Insert > Form > radio Button, or clicking the ratio button icon on the tool bar. Then use the copy and paste commands to place a copy of the button where you want another one to appear. This will ensure that only one radio button can be turned on at one time.

Text input elements can be added using Insert > Form > Text Area, or via the icon on the tool bar. They can be resized by dragging. Password fields are entered in the same way.

Selection fields

There are two types of selection field:

• Pop-up menus, which enable the user to choose one option from a menu.
• List selection field, which enables the user to choose one or more options from a scrolling list.

To add a pop-up menu, position the insertion point where you want it to appear, choose Insert > Form > Pop-up, or the icon in the tool bar. Once the pop-up menu has been created, you will need to display the inspector and click its object tab to display selection field options.

Submit and reset buttons

Insert using Insert > Form > Submit button, or use the icon.