Dreamweaver 4 Made Simple
This Page Intentionally Left Blank
Dreamweaver 4 Made Simple Brendan Murphy
OXFORD AUCKLAND BOSTON JOHANNESBURG MELBOURNE NEW DELHI
Made Simple An imprint of Butterworth-Heinemann Linacre House, Jordan Hill, Oxford OX2 8DP 225 Wildwood Avenue, Woburn MA 01801-2041 A division of Reed Educational and Professional Publishing Ltd A member of the Reed Elsevier plc group First published 2002
© Brendan Murphy 2002 All rights reserved. No part of this publication may be reproduced in any material form (including photocopying or storing in any medium by electronic means and whether or not transiently or incidentally to some other use of this publication) without the written permission of the copyright holder except in accordance with the provisions of the Copyright, Designs and Patents Act 1988 or under the terms of a licence issued by the Copyright Licensing Agency Ltd, 90 Tottenham Court Road, London, England W1P 0LP. Applications for the copyright holders written permission to reproduce any part of this publication should be addressed to the publishers TRADEMARKS/REGISTERED TRADEMARKS Computer hardware and software brand names mentioned in this book are protected by their respective trademarks and are acknowledged. British Library Cataloguing in Publication Data A catalogue record for this book is available from the British Library. ISBN 0 7506 5459 7 For information on all Made Simple publications, visit our website at www.madesimple.co.uk Typeset by Elle and P.K.McBride, Southampton Icons designed by Sarah Ward © 1994 Printed and bound in Great Britain
Contents 1
2
The basics
1
Starting Dreamweaver ......................................... 2 The Objects Panel ............................................... 3 Launcher bar ...................................................... 8 The Status bar ..................................................... 9 Viewing your web page ..................................... 10 The site map ..................................................... 11 Closing Dreamweaver ....................................... 13 Getting Help ..................................................... 14 The Help index .................................................. 15 The Reference panel .......................................... 16 Online Help ...................................................... 17 Summary .......................................................... 18
Creating a web site
19
The home page................................................. 20 Defining a site ................................................... 21 The Site window ................................................ 22 Creating a home page ...................................... 23 Choosing filenames .......................................... 24 Previewing web pages ....................................... 25 Adding a page title ........................................... 26 Multiple browsers .............................................. 27 HTML ................................................................ 28 Good Web design ............................................. 29 Summary .......................................................... 30
3
4
VI
Text
31
Images
49
Enhancing text .................................................. 32 Ordered lists ..................................................... 34 Definition lists ................................................... 36 Lists within lists .................................................. 37 Using fonts........................................................ 38 Font size ........................................................... 41 Heading tags .................................................... 42 Preformatted text ............................................... 43 Text colour ........................................................ 44 Background colour ............................................ 45 Colour schemes ................................................ 46 Special characters ............................................. 47 Summary .......................................................... 48 Working with images ......................................... 50 The Alt field....................................................... 51 Aligning images ................................................ 52 Adding space .................................................... 53 Resizing an image ............................................. 54 Inserting blank images ...................................... 55 External image editors ....................................... 56 Image software ................................................ 57 Summary .......................................................... 58
5
6
7
Links
59
Tables
69
HTML
81
Working with links ............................................. 60 Links to another page........................................ 62 Choosing a target ............................................. 63 E-mail links ....................................................... 64 Image maps...................................................... 66 Summary .......................................................... 68 Working with tables ........................................... 70 Table formatting ................................................ 71 Predefined formats ............................................ 72 Other formatting options ................................... 73 Merging cells .................................................... 74 Splitting cells ..................................................... 75 Sorting a table .................................................. 76 Adding rows or columns .................................... 77 Table size .......................................................... 78 Tables and windows .......................................... 79 Summary .......................................................... 80 Understanding HTML ........................................ 82 Formatting tags ................................................. 83 Unordered lists.................................................. 85 Creating a table ................................................ 86 Images and links ............................................... 87
VII
8
9
External HTML editors........................................ 88 Cleaning Word HTML ........................................ 90 Summary .......................................................... 92
Frames and layers
93
Working with frames ......................................... 94 The frameset ..................................................... 95 Frameset properties........................................... 97 Frame properties ............................................... 98 Target frames .................................................... 99 Layers ............................................................. 100 The Layers panel ............................................. 101 Layers and tables ............................................ 103 Summary ........................................................ 104
Forms
105
Working with forms ......................................... 106 Feedback forms .............................................. 107 Forms and tables ............................................ 108 Text field properties ......................................... 109 Lists ................................................................ 110 Radio buttons .................................................. 111 Checkboxes .................................................... 112 Submitting data............................................... 113 Summary ........................................................ 114
10 Library and templates
115
Library items ................................................... 116
VIII
Amending an item .......................................... 118 Deleting an item ............................................. 119 Templates ....................................................... 120 Editable regions .............................................. 121 Using a template ............................................. 122 Deleting a template ......................................... 123 Summary ........................................................ 124
11 Going online
125
12 Advanced features
131
Publishing your web site .................................. 126 Uploading web pages ..................................... 127 Future web site uploads ................................... 128 Summary ........................................................ 130 The default settings ......................................... 132 Defining the Status bar .................................... 134 Flash buttons .................................................. 135 Rollover images .............................................. 136 Behaviors ........................................................ 137 Cascading Style Sheets .................................... 138 The History palette .......................................... 141 Search engines ............................................... 142 Dreamweaver Exchange .................................. 143 Summary ........................................................ 144
IX
This Page Intentionally Left Blank
1 The basics Starting Dreamweaver . . . . . . . . . . 2 The Objects Panel . . . . . . . . . . . . . 3
Launcher bar . . . . . . . . . . . . . . . . 8 The Status bar . . . . . . . . . . . . . . . 9 Viewing your web page . . . . . . . . 10
The site map . . . . . . . . . . . . . . . . 11 Closing Dreamweaver . . . . . . . . 13
Getting Help . . . . . . . . . . . . . . . . 14 The Help index . . . . . . . . . . . . . . 15
The Reference panel . . . . . . . . . . 16
Online Help . . . . . . . . . . . . . . . . 17
Summary . . . . . . . . . . . . . . . . . . 18
Starting Dreamweaver You can start Dreamweaver by clicking on the Start button and choosing Dreamweaver 4 from the Macromedia Dreamweaver 4 submenu found in the Programs menu. The main Dreamweaver work area is displayed. On opening Dreamweaver, a new web page is opened, ready to be developed.
The Document Window
Once youve opened Dreamweaver, the first thing youll want to do is start building a new web site. The document window is the main work area where you create each web page. The document window is where all the tools you use will be displayed.
Tool bar
Menu bar
Take note The document window can become very cluttered depending on the windows you choose to have displayed whilst you work. Display only the most commonly used windows.
Document window
Objects panel
2
Property Inspector
Launcher bar
The Objects Panel
Basic steps 1 2 3 4
Click on the Objects panel category menu. Choose a category. Click on an object.
Follow the prompts to add the object to the web page.
2
The Objects panel displays objects, split into categories, that will be used to build your web site. An object can be an image, a table, a form, or some other web site component. Dreamweaver has seven main categories. These are listed in a drop-down menu at the top of the Objects panel: characters, common, forms, frames, head, invisibles and special. The most commonly used category is the common category and this is the default.
The Property Inspector
Each object has associated properties. These properties can be viewed and amended by changing items in the Property Inspector for the object. Highlighted text properties can also be changed here. Depending on the object selected, the Property Inspector will display different contents. The most common properties for the highlighted object are shown.
Choose a category
3
Select an object
Font
Font size
Alignment properties
Colour
Lists
Tip To display the Objects panel if it is not visible, or to hide it when not wanted, select Objects on the Window menu or press [Ctrl]+[F2].
Browse for file
Indents
Take note Click on the expander arrow at the bottom right of the object inspector to expand and view the complete list of available properties for the object.
3
Inserting an object
Basic steps
Objects can be quickly chosen and inserted into the document window in Dreamweaver. Once inserted, object properties can be changed to make the object suit its purpose on the web page.
1 2 3 4
3
Choose a category
5
Place your cursor at a suitable position on the active web page.
Click on the categories menu in the Objects panel. Choose an object category.
Hover the mouse over each object to determine its purpose. Click on an object to select it.
q The object is inserted Or
5
Click to select
Take note View > Grid adds a grid that automatically aligns objects placed in the document window.
4
q The insert-object dialogue box appears requiring you to complete some further information. On clicking OK, the object is inserted into the document window.
Character objects This category includes special characters that might be used in a web site. They include the copyright symbol and the sterling (£) sign.
The common objects category Character objects bar
This is the most popular category used in Dreamweaver. Every object you will need to create a basic web page is included here such as tables, images and e-mail links.
Line break
Non-breaking space
Trademark
£ sign
Copyright Yen sign
Left quote Em-dash
Registered trademark Euro sign
Right quote Other
Common objects bar Image
Rollover image
Layer
Navigator bar
Table
Horizontal rule
Tip
Date
Tabular data E-mail link
Advanced
If you prefer to use menus, you can select objects to appear in the document window by choosing them from the Insert menu.
5
Form objects Forms are used on sites to collect structured information from visitors. Typical forms might be used for gathering complaints or for signing a guest book on a web site.
Frame objects bar
Frame objects
Frames allow you to split a single web page into horizontal and vertical areas that can each be used to load different web pages. Frames are useful if you wish to have a part of your web page displayed at all times, for example a header with your company name and logo, or a navigation menu for your site.
Various frame combinations
Head objects
Head elements are special elements that HTML uses to manage your web page. These are not seen on your actual web site, but help manage activities like enabling search engines to find your site as well as automatically refreshing site pages after a specified length of time. Head objects bar
Form objects bar Form
Text field
Radio button
List/menu
Button
File listed
Hidden field
6
Checkbox Image field
Jump menu
Meta
Keywords
Base
Link
Description
Refresh
Invisible objects Invisible objects bar Anchor Comment
Script
These are objects that perform a specific purpose on your web page but are not seen on it, for example comments to help you remember why you carried out an activity in a particular way, or an explanation of a particularly unusual design element.
Special objects
These are likely to be used when you reach the advanced stages of web design. They enable you to easily add movies and sounds to your web pages. Many sites, for example, include QuickTime movies. See chapter 12 for advanced features.
Layout View
Special objects bar
The Objects panel also allows you to move between Standard or Layout view. As you will discover later, tables play a big part in laying out your web pages but tables can be inflexible in terms of allowing you to place images and text exactly as you might want it. With Layout View, Dreamweaver provides a simple way of laying out your page using very flexible tables.
Applet ActiveX
Plugin
Standard View
Layout View
7
Launcher bar
Basic steps
The Launcher bar gives you a route to quickly access a number of commonly used features in Dreamweaver. From the Launcher bar icons, you can view the HTML code behind the active page as well as view other panels that you will routinely use. All the options available on the Launcher bar are also available from the Dreamweaver menus.
Tip The launcher bar can be viewed horizontally or vertically. Click on the orientation icon at the bottom right corner to toggle this option.
2
From the Window menu, select Launcher.
Click on an icon to toggle the window.
q The appropriate window or element is displayed/hidden.
1
2 8
1
Select Launcher
Click on an icon
The Status bar
Basic steps q Changing window size
1 2
Click Window Size.
Choose an appropriate monitor size.
q Changing modem details
3
4 5 6
From the Edit menu, select Preferences.
The Status bar displays the window size, estimated download speed and mini version of the Launcher bar. You can change the size of the window and the connection speed to show how long it will take to download your page from the World Wide Web. The average display size is 800×600 and the average modem is likely to be 56K. These are useful default values as they are likely to suit most Internet users.
Click Status Bar.
5
Change the Connection Speed.
Alter as necessary
Click OK.
4
Select Status bar
Tip The Preferences dialog box can be used to change many aspects of the Dreamweaver environment. Spend some time experimenting with changes.
6
Click OK Window size
Estimated download speed
Mini launcher bar
9
Viewing your web page Dreamweaver allows you to view your web page in Design View or Code View. Design View is the WYSIWYG easy to understand view whilst Code View shows you the underlying HTML code being generated in the background.
Dreamweaver has the option of allowing you to design your web page in either Design View, Code View or a combination of both Design and Code View.
3 2 1
1 2 3
Click on the Show Code View icon on the toolbar.
Click on the Show Design View icon on the toolbar. Click on the Show Code and Design View icon on the toolbar.
Click on Show Code and Design View
Click on Show Design View
Click on Show Code View
Take note Changes made in Design View are immediately seen in Code View. Changes made in Code View are shown in the Design View only when the window is refreshed. To refresh the window simply click anywhere in Design View or click on the Refresh Design View icon on the toolbar.
10
Basic steps
Tip Try entering text on your web page when viewing the combination view. Note how your changes are shown in the underlying Code View. This is a great way to learn how HTML is built without understanding the technicalities of the language.
The site map
Basic steps 1 2 3
From the Site menu select Site Map.
Click on the Site Files icon to view site files.
Dreamweavers site map gives you a great way to view the folders, subfolders and files that make up your web site. The site map is a great way to see the overall structure of your site. Viewing the site map for your current site is straightforward.
Click on the Site Map icon for a pictorial representation of the site.
2
3
1
Select Site > Site Map
Click on Site Files Click on Site Map for a representation of your site
Take note Click on the + sign to view the contents of site folders
The Site Map icon allows you to view the Site Map on its own or combined with a file list.
11
Saving the site map
Basic steps
The site map can be saved to allow it to be used in a report or other document. This can be useful if you are producing documentation for your web site or you are creating a client proposal.
1
2
2 3 4
From the File menu select Save Site Map. Choose a folder to store the saved file. Name the file. Click Save.
Choose a folder
3
12
Select Save Site Map
1
Name the file
4
Click Save
Basic steps 1 2
From the File menu select Exit.
Save the current file(s).
Tip
Closing Dreamweaver When youve finished working on your web site you will want to close Dreamweaver down. If youve not saved the web page(s) being worked on youll be invited to do this before the application will completely close. It is good practice to regularly save your work just in case your computer crashes or there is a power failure.
1
Select Exit
Ctrl+Q can also be used as a shortcut to quickly close the application.
13
Getting Help
Basic steps
Dreamweaver 4 comes with a comprehensive system of Help that should provide you with detailed answers to some of the more tricky questions that might arise as you learn to use the software.
The Help system includes a list of new features in this version of Dreamweaver, a guided tour of the product and some useful tutorials.
1
1 2 3 4
Select Using Dreamweaver
5
From the Help menu, select Using Dreamweaver. Click on Getting Started.
Click on Dreamweaver Tutorial and spend some time learning the basics.
Browse the other Help resources. Close the Help.
Tip For specific Help on the uses of an object, look for the Help button in the Insert dialog box for the object.
3 4 14
Click on Dreamweaver Tutorial
Look at other Help resources
The Help index
Basic steps 1 2 3 4 5 6
Click on the Search button.
Type in a keyword you want to search for.
Dreamweaver 4 comes with the standard Help index found in most Windows applications. Here, you can enter a keyword and find out all topics about that subject or you can look through an AZ index to have your query answered.
Click List Topics.
Choose a Help topic. Click Display.
Click on the Print icon to print the topic.
1
Click on Search
2
Type in a word
3
Click List Topics
Click to run a new search
4
Choose from the list
5
Click Display
15
The Reference panel Dreamweaver 4 comes with full access to the acclaimed OReilly guides. These guides help you understand more fully the operation of HTML tags as well as cascading style sheets and JavaScript (see pages 137 and 138.)
2
Choose HTML Reference Book
5
Click Close
Basic steps 1 2 3 4 5
3
Choose a tag
Choose the HTML Reference Book.
Choose a tag to find out information about. Read the description and examples. Close the Reference guide.
Take note
4
16
From the Help menu select Reference.
Read the description
The guides are best used to help you learn more about specific tags in HTML. Tags tell the browser to carry out specific functions such as displaying text in bold. Tags used in the current web page are shown in the left of the status bar. Click on a tag, then click [Shift]+[F1] to view the reference information about that tag.
Basic steps 1
2
From the Help menu select Dreamweaver Support Center or Macromedia Online Forums. Browse the available help topics.
Take note You must be on-line before using Web Help.
Take note JavaScript is a language developed by Netscape that allows you to include some nifty functionality in web pages. If you want to learn JavaScript when youre familiar with Dreamweaver and HTML, try JavaScript Made Simple.
Online Help For the most up-to-date Dreamweaver help you must look to the Web. Here, you can access a rich source of resources as well as download useful software bug fixes. Macromedia has set up a Dreamweaver Resource Centre and on-line forums which offer help and support.Visit www.macromedia.com for further information and help.
Dreamweaver Exchange
Macromedia provides an on-line service that allows you to download extensions to Dreamweaver. An extension is a piece of self-contained JavaScript code, written by another user, that carries out a specific function not covered by the main software. Extensions are categorised and given a rating by Macromedia. Visit the Dreamweaver Exchange at www.macromedia.com/ exchange/dreamweaver and add some really fantastic extra functionality to your web site without having to go through the pain of learning how to actually write the code yourself. It really is worth taking time to learn how to use this great service you cant help but be impressed at the extensions on offer. Each extension has a discussion group allowing users to comment. Visit this area first to determine the success and find any problems with the extension before downloading it. Most extensions require that you use the Macromedia Extension Manager. This is an additional piece of free software that can be installed within Dreamweaver. It can be found in the Exchange area. Take time to download it before downloading any extensions.
17
Summary q The Objects panel lists the objects that can be used on a page. Its display can be toggled on and off.
q An object can be an image, a table, a form, or some other web site component.
q The Property Inspector lists the attributes of objects. q Objects can be inserted by clicking on them. q Common objects are those most often used.
q Form objects allow you to create forms easily.
q Frame objects are used to split a web page into sections, each able to load other web pages.
q Head objects go in the top part of a page and carry identifying information. q Invisible objects are not seen by your visitors.
q Special objects enhance the operation of your site.
q The Launcher bar is used to show and hide various elements in Dreamweaver. q The Status Bar shows information about the page. q The site map is a representation of the files and folders in your site. It can be saved as a file. q Choose File > Exit to close Dreamweaver 4.
q Dreamweaver 4 has a comprehensive Help system that can be accessed from the Help menu. q Use [Shift]+[F1] to access tag-specific Help.
q Help is available from the Macromedia web site. q The Dreamweaver Exchange is a great source of add-on extensions to the software.
18
2 Creating a web site The home page . . . . . . . . . . . . . 20 Defining a site . . . . . . . . . . . . . . 21 The Site window . . . . . . . . . . . . . 22 Creating a home page . . . . . . . . 23 Choosing filenames . . . . . . . . . . 24
Previewing your web page . . . . . . 25 Adding a page title . . . . . . . . . . . 26
Multiple browsers . . . . . . . . . . . . 27 HTML . . . . . . . . . . . . . . . . . . . . . 28 Good Web design . . . . . . . . . . . . 29
Summary . . . . . . . . . . . . . . . . . . 30
The home page A web site is made up HTML web pages, image files and other files that are held together by a home page. The home page is the first page that your visitors reach when accessing your site. It is from here that they can navigate to all areas of your site. In Dreamweaver, the first tasks in building a web site are to decide on a site structure, define a site and then create a home page. A basic web site is simply a group of fairly standard text files with some fancy tags added (HTML) and a few images and maybe some sound files thrown in for good measure. Just like any group of files, for example word processing files related to customers and suppliers, you store them in a way that makes them easy to find for future editing. Using Windows, this means setting up a structure of folders and subfolders. Creating a web site is no different. There are many different ways to create a web site structure and you must decide which one suits you best. Shown here is a typical structure that you might find useful to replicate. Create your site structure using Windows Explorer, choosing one that makes it easy to change, add and update your web site files.
Take note Your home page filename can be anything, but good practice dictates that you name it index.htm. If you follow this rule, it will mean that visitors to your site can simply enter the URL (address) of your site without any filename e.g. www.brendansbooks.com. The file index.htm will be automatically loaded.
Typical web site structure
20
Defining a site
Basic steps 1 2 3 4
5 6
7
From the Site menu, select New Site.
Give your site a name. Browse for or type the path to the root folder.
Make sure Refresh Local File List Automatically is ticked. (This ensures that you will see files copied into your site from other sources.)
If you know the URL that your site will have when uploaded to the Web then enter it now. Make sure Enable Cache is ticked (this speeds up Dreamweavers site management functions).
Click OK to return to the Site window.
Defining a site in Dreamweaver creates a root folder for each of your web sites. A root folder is the starting place for all files for a particular web site to be stored. By setting up a root folder, you enable Dreamweaver to easily manage any changes you might make to your web site keeping track of any movements.
2
4 5
Name your site
3
Browse for or enter the path
Tick the box Enter your URL
6
Tick the box
7
Click OK
Take note The Link Checker allows you to check your web site for any broken links, a list of external links and details of any files in the site which are not used (orphaned files.) The Link Checker is available from the File menu.
21
The Site window The Site window, once defined, shows all the files associated with your web site. Once you have created some web sites using Dreamweaver, the Site window is a quick way to jump straight to one of these sites to allow editing to take place.
Site folders Choose a site Site files
Take note Take note To quickly load the Site window, press [F8] from anywhere within Dreamweaver.
22
Dreamweaver always opens with a blank file. This file can be edited and saved as part of your web site in the same way as creating a new file described in these pages. You can also choose to close a document without saving it.
Creating a home page
Basic steps q Creating a page
1
2 3 4
Press [F8] and select the sites root folder. From the File menu, select New Window.
From the File menu, select Save As and name the file index.htm.
This new file will be shown in the File pane of the Site window.
q Entering text
5 6
Double-click on the file to open it.
The home page is the starting point for your web site. Creating a home page is straightforward and is similar to creating a new document in an application such as Word. Use the same method to create any further new pages required in your web site. The first thing that youll want to do to your newly created home page is to add some text. 1 Select the folder
2
Use File > New Window
4
The file is listed
Enter some text.
Take note In the File menu, Save is used to save changes to an existing file. Save As lets you copy the open file to a new file. Use either Save or Save As when first saving a new file.
6
Enter your text
23
Choosing filenames It is important that you name your web pages with meaningful names. This will help ensure that you can easily find pages when you next require to amend them. Although Windows allows long file names, you cant be sure that when you copy your web site to the web these filenames will be allowed. To be on the safe side its better to keep filenames short (8 characters orless) and to the point.
Example filenames
File contents Supplier details Customer records Products and services Feedback form
Filename supdet.htm cust.htm prodser.htm feedfrm.htm
Basic steps 1 2 3 4
From the Edit menu, select Preferences. Select the General category.
Amend the Add Extension when Saving option to be either .htm or .html. Click OK.
HTML files
All the files that you create using Dreamweaver are HTML files. The HTML naming convention allows you to save these files with either the .htm or .html extension. The decision is entirely yours.
2
Select General
3 4
24
Click OK
Amend as necessary
Basic steps 1 2 3
If a web page is not opened open it now. Press [F12].
Close the browser when you have completed your preview
Previewing web pages At this point in time, the web pages you create in Dreamweaver are held on your local PC. As you build your site youll want to see how the finished product will look when visitors see it through their web browser. Dreamweaver has a preview feature that loads your web page into a browser for viewing.
Printing your web page
Printing out your web page allows you to check spelling and grammar away from your PC. You can print while previewing your web page in the browser just click on the Print icon.
1
Open a web page
Tip Printing web pages in a browser can be tricky and can produce prints that are incomplete. Take time to amend margin sizes in the Page Setup option as well as modifying your printer settings until you achieve satisfactory prints.
25
Adding a page title You will notice that when your web page is previewed in your browser there is no title at the top of the page. What you actually see is the path of the web page (or if the web site is actually loaded onto the world-wide-web, the title Untitled Document.) Adding a page title is easy. The title should identify the page
Basic steps 1 2 3
From the Modify menu select Page Properties. Give the web page a suitable title. Click OK.
Take note A title gives you a chance to name your web page with something more interesting than the filename. As well being displayed at the top of each page, the title is used in the name field should visitors choose to add yours to their list of favourite sites.
26
Multiple browsers
Basic steps 1 2 3 4 5 6 7 8
From the File menu, select Preview in Browser.
Click on Edit Browser List.
It is good practice to check your web page in a browser other than the default on your PC to ensure that it is displayed in a uniform manner. Dreamweaver lets you set up a list of browsers that can then be used to preview your web pages.
3
Click on [+].
Click on [+]
Name this new browser.
Choose the application file for the browser. Tick the Secondary Browser box. Click OK.
Click OK again.
4
Enter a name
5
Choose an application
Take note The market dictates that most of your visitors will be using a version of Microsofts Internet Explorer with the next group using Netscape Navigator. Setting a recent version for both these products as your primary and secondary browsers will ensure that you are covering yourself when testing your web pages.
6
Tick this box
7
Click OK
Tip When previewing, [F12] loads your primary browser, pressing [Ctrl]+[F12] will load your secondary browser.
27
HTML
Basic steps
Whilst it isnt necessary to understand HTML to fully utilise Dreamweaver, there will come a point when you will want to find out what all this HTML stuff is about. Dreamweaver offers a great way to do this through viewing your pages in design mode, layout mode (html) or a combination of both. HTML is a language in its own right and youll look at it in a little more detail later. However for now its good to begin to understand the HTML that you have just viewed. Change to the Show Code and Design Views option and type some more text into your web page. Watch what happens to the HTML code.
1
Click on
the Code View icon to view the page HTML source code. the Code and Design Views icon to view both HTML and the WYSIWYG view.
the Design View to see the WYSIWYG view of the web page.
Code and Design View Code View
Design View
Web page title
Text display window
Tip Theres lots more about HTML in Chapter 7.
28
Take note Dreamweaver is a fully functional web development tool that requires no knowledge of HTML. However, HTML knowledge gives you the confidence to make those little changes that can sometimes be difficult to make using application software.
Good Web design Take note Not everyone has an ISDN line or fast modem. Make sure that your pages are not too large, allowing for quick download by users. Check the download time on the Status bar for each page in your web site (see page 129 for more).
Dreamweaver provides you with a suite of integrated tools that create great web sites. However, before you put finger to keyboard with any real effort, you must consider aspects that make the difference between your web sites being really great or being just plain bad! The following design tips should help: 1.
Plan your web site on paper before starting to build it.
3.
Keep each page consistent in terms of look and feel.
2.
4. 5. 6.
Take note Most people believe that web sites are designed for a world-wide community. Whilst this may be true in some cases (especially the big companies such as McDonalds and Coca-Cola), the majority of web sites are designed for a very limited group of customers, suppliers, associates, friends or family.
7.
8. 9.
10. 11. 12.
Have a clear understanding of the purpose of your web site. Know your audience and design for their needs. Dont use loads of different font styles. Choose a font and stick with it.
Keep graphics small and appropriate. Always include text descriptions of graphic images.
Make text and background colours complementary, e.g. Dark text on a light background. Remember to include appropriate navigation links. All pages in your web site should easily allow you to return to the home page.
Keep pages to a manageable size. Use a menu and links for multiple pages of information. Avoid the use of gimmicks such as flashing text.
Remember to check spelling and grammar. Use a friend to proof read your site.
Always test your site in different browsers to ensure compliance. Check all links.
Remember that visitors will have different screen sizes. A good standard is to design your pages to fit neatly into 800×600 resolution.
29
Summary q A home page is the first page visitors reach when visiting your web site.
q The common filename for each web site home page is index.htm. q The URL is the address of your web site e.g. www.macromedia.com.
q You should always create a site structure before beginning to design a new web site. q The root folder is the main starting folder in Dreamweaver for your web site.
q The site window shows all the files associated with your web site.
q Entering text in a Dreamweaver web page is similar to carrying out the same task in any word processing application.
q Web page filenames should be short and meaningful. q HTML files can have the extension .htm. or .html.
q The Preferences dialogue box in the Edit menu allows you to set your preferred choice of filename extension.
q Pressing [F12] allows you to preview your web page in a browser. q A web page title appears at the top of the browser window.
q Dreamweaver allows you to set-up multiple browsers. q Web pages can be printed via your browser.
q Dreamweaver has three views to allow you to look at your web pages in different ways.
30
3 Text Enhancing text . . . . . . . . . . . . . . 32
Ordered lists . . . . . . . . . . . . . . . 34 Definition lists . . . . . . . . . . . . . . . 36
Lists within lists . . . . . . . . . . . . . . 37 Using fonts . . . . . . . . . . . . . . . . . 38
Font size . . . . . . . . . . . . . . . . . . . 41 Heading tags . . . . . . . . . . . . . . . 42
Preformatted text . . . . . . . . . . . . . 43 Text colour . . . . . . . . . . . . . . . . . 44 Background colour . . . . . . . . . . . 45
Colour schemes . . . . . . . . . . . . . 46 Special characters . . . . . . . . . . . . 47
Summary . . . . . . . . . . . . . . . . . . 48
Enhancing text
Basic steps
Whilst one of your aims will be to make your pages look great, the main purpose of most web sites is to give information to visitors. As this is normally text based its worth spending some time learning how to make the most of your text-based pages.
Unordered lists
Bullet points are a great way to summarise information or draw your visitors attention to a particularly important point. Creating a bulleted list is easy using Dreamweaver.
4
2
3
3 4
Place the cursor on the line where your first entry is to be made. If the Property Inspector is not displayed, press [Ctrl]+[F3]. Click on the Unordered List icon.
Enter the text for your bullets, pressing [Enter] after each bullet. After the last bullet press [Enter] twice to end the bulleted list.
Select Unordered List
Display the Property Inspector
When you enter text into a page, each time you press [Enter] an HTML paragraph
tag is inserted, adding a blank line. If you hold down [Shift] when pressing [Enter], you replace the
tag with a line break
tag that simply moves the cursor to the start of the next line. Look in Code View to see this effect.
32
2
5
Enter the bullets text
The [Enter] key and new lines
1
Basic steps 1 2 3 4
Changing bullet styles
Place your cursor anywhere in the bulleted list.
You may not like the default bullet style set in Dreamweaver. This can be manually changed to a more suitable style.
From the Text menu select List, then Properties.
Amend the Style as appropriate. Click OK.
1
Place your cursor in the list
2 4
3
Select List then Properties
Click OK
Amend as appropriate
Take note Amending the bullet style only affects the active bulleted list.
Tip You can also amend the bulleted style from the Property Inspector. Place your cursor anywhere in the list, click the expander arrow in the bottom right corner of the Property Inspector, and click on the List Item button.
33
Ordered lists
Basic steps
Ordered, or numbered, lists are useful to use in your web page where you are looking to show some form of sequence. This might be, for example, the steps required to build a piece of furniture or the steps required to setup some new software application on your PC.
4
Enter the text for each point
1 2 3 4
2
5 Display the Property Inspector
3
Select Ordered List
Styles available for ordered lists
Styles can be changed exactly as with Ordered lists. Select Text > List > Properties and pick a new style Style
Number Roman Small Roman Large Alphabet Small Alphabet Large
34
Example
1, 2, 3 etc. i, ii, iii etc. I, II, III etc. a, b, c etc. A, B, C etc.
Place the cursor on the line where your first entry is to be made. If the Property Inspector is not displayed, press [Ctrl]+[F3]. Click on the Ordered List icon.
Enter the text for each of your list items, pressing [Enter] on completion of each list point. After the last entry press [Enter] twice to end the numbered list.
Basic steps 1 2 3 4
Place your cursor anywhere in the numbered list.
From the Text menu select List then Properties.
Changing the number sequence In some cases, you may not want to start your numbered list from the logical first number e.g. in Number format the number 1 is the logical starting point. In Dreamweaver you can start your numbered list wherever you choose.
1
Amend the Start Count field as appropriate.
Place your cursor in the list
Click OK.
Take note
4
3
Click OK
Amend as appropriate
The Start Count field must contain a number. When you are using a style such as Alphabet Small the number refers to the position in the alphabet. For example, a value of 5 would result in your list starting at the letter e.
35
Definition lists
Basic steps
A definition list is used when you are looking to explain a particular item such as you might find in a glossary of terms in a book. The term to be defined is displayed on the line above the definition of that term.
2
From the Text menu select List then Definition List
3
Enter your first item
4
36
Enter the definition
1 2 3 4 5 6
Place the cursor on the line where your first entry is to be made.
From the Text menu, select List then Definition List.
Enter the text for your first list item then press [Enter]. Enter the definition for the item. Press [Enter]. Repeat steps 3 and 4 for each item in your list.
After the last definition press [Enter] twice to end the definition list.
Lists within lists
Basic steps 1 2 3
4 5 6 7
Apart from creating basic lists, you may find a need to create lists with sub-lists. These might be numbered lists with bulleted lists included or any other combination. The following example shows a numbered list with a bulleted list within it.
Type the leading text for the list and press [Enter].
Place the cursor on a row line and click the Ordered List icon in the Property Inspector.
1
Type the leading text
Enter Remove grill pan [Enter], then gloves [Enter], then type screwdriver. Do not press [Enter].
3
Select the list entries for gloves and screwdriver.
4
Click the Text Indent icon, then click the Unordered List icon.
Select the entries
Click after screwdriver to deselect text and press [Enter].
Type the text do not press [Enter] after the last item
2
Click Ordered List
5
Click Text Indent then Unordered List
Click the Text Outdent icon then click the Ordered List icon.
6
Deselect the text
7
Click Text Outdent then Ordered List
37
Using fonts If youve used a word processing package you will realise that Windows comes with a whole host of fonts that cover most of those you will ever require when typing correspondence. Similarly, fonts play a big part in how your final web site will look.
Your visitors fonts
The fonts available on your visitors computers will not necessarily match yours. When you design your web site, if you use a font that is not available on your visitors computer a different font will be used. In Dreamweaver the next font in the chosen combination (see page 40) will be used. In this example, if your visitor does not have Verdana, the text would default to Arial or the next in the combination until a local font was found. If no font existed the local default font would be used. Different fonts can be applied to part of a web page or you can make changes to the default font used for the whole web site.
Basic steps 1 2 3
Enter some text.
Highlight the text.
From the Property Inspector choose the Verdana, Arial, Helvetica, sans-serif font.
4
Note the changes to the text.
Tip Good design suggests that you should minimise the use of different fonts in a site. Find a few fonts that suit you and enhance by changing the size rather than using a new font.
2 3
38
Highlight the text
Select a font
Basic steps 1 2 3 4
Changing the default font
From the Edit menu, select Preferences. Click on the Fonts/ Encoding category.
Amend the Proportional Font, Fixed Font and Code Inspector font to suit.
The default font is the one that will appear automatically when you create a new web page or make changes to an existing web page.
You may choose to change this default font if you prefer a particular font to be used when designing web sites. This stops you having to change the font each time you create a new web page or a new web site.
3
Click OK.
2
Amend to suit
Select Fonts/Encoding
Take note The Proportional Font is the font used in normal web page text. The Fixed Font is the font used for special HTML tags and the Code Inspector font is the font used to view web page HTML code.
4
Click OK
Tip The web is a great source for new fonts. Enter free fonts in your favourite search engine and choose and download a wealth of new fonts.
39
Editing the Font List
Basic steps
Within Dreamweaver you are not restricted to using the Font Lists made available to you. These can be easily amended and new font combinations added to suit your needs. You can edit the Font List from the Font drop-down box in the Property Inspector, or through the Text menu command as shown here.
q Amending a font combination
1
From the Text menu select Font then Edit Font List
1 2 3 4
2
Select a font combination
Click +
3 7
Add/remove fonts
Add the fonts
Click on a font combination. Add/remove fonts to the current font combination. Click OK.
q Creating a new font combination
5
6 7 6
From the Text menu, select Font, then Edit Font List.
8
From the Text menu, select Font, then Edit Font List. Click the [+] sign.
Add fonts to the new font combination. Click OK.
Tip Click on the [-] sign in the Edit Font List dialogue box to remove the highlighted font combination.
40
Font size
Basic steps 1 2 3
Highlight the portion of text to be resized.
In the Property Inspector, click on the Size drop-down list. Choose a new font size.
q Note the changes in font size for the selected text.
Font size in HTML is a bit different from normal, 10pt, 11pt, 12pt format common in word processing applications. In HTML, font size is determined as a number between 1 and 7 where 1 is the smallest size of font, 3 is the default font size (roughly 12pt) and 7 is the largest. Changing font size is straightforward.
Relative font sizes
You can also change the font size relative to the basefont. The basefont is the default size of 3 (which can be changed). You can change the size of text relative to the basefont. For example, +2 would make the font the same size as you would get by choosing font size 5.
1
2
3
Highlight the text to be resized
Click the drop-down list
Choose a new font size
Take note With a basefont value of 3, the relative fonts up to +4 will work. Above this value will have no effect on font size as 7 is the highest font value available. (The same rule applies for relative fonts from below 2.)
41
Heading tags Dreamweaver allows you use a set of pre-defined headings tags which are used to determine font size. These headings are the HTML tags,
to . The illustration shows their size range.
Text alignment
To align text simply highlight it and choose an alignment option from the Property Inspector. Text can be left, centre or right-aligned
42
Preformatted text
Basic steps 1 2 3
Place the cursor at the point where you wish to enter some text. From the Property Inspector, click on Preformatted in the Format field.
Enter the text including extra spaces as required.
2
If you type text into a Dreamweaver web page you will notice that you cannot place more than space between each word typed in a sentence. This is a restriction of HTML. However, there is a way round this. You can use the preformatted option to allow the text to be spaced just exactly as you type it.
1
Place the cursor
3
Enter the text with spaces
Select Preformatted
Take note When you format your text using the preformatted option youll note that the font defaults to the one set under Fixed Font in the Preferences dialog box. This can be amended by the normal route of selecting text and choosing a font combination from the Font List.
43
Text colour Changing the text color in a page helps to add emphasise. When you choose a colour youll note a hexadecimal value in the field next to the Text Color box. This is the value that makes up the selected colour. Visit the web to find lists of these colours that can then simply be typed into this field watch out as they might not be web-safe. Web-safe colors are those that will look the same no matter which browser your visitors use. To ensure that your web site looks the same in all situations always choose a web-safe color from the selection listed.
Basic steps 1 2 3
Highlight the portion of text to have a different colour. In the Property Inspector, click on the Text Color box. Choose a colour from the cube listed.
q Note the change in text colour
Tip You can change the default text colour from the Preferences dialog box.
1
2
Highlight the text which is to change colour
Click on Text Color
3 44
Choose a colour
Background colour
Basic steps 1 Or
2 3 4 5
From the Modify menu, select Page Properties.
The default background colour in HTML and in Dreamweaver is white. Together with a default text colour of black, this forms the basis of many web pages. However, you may wish to change the background colour from the default.
Press [Ctrl] + [J].
Click on the Background Color box.
3
Click on Background Color
Choose a new colour. Click OK.
4
5
Click OK
Choose a colour
Tip Contrasting colours work best in web pages. If you choose a dark background choose a light text colour. If you choose a light background choose a dark text colour.
Take note All colours are made up of a combination of red, green and blue. Hexadecimal numbers are used in HTML to define colours. The hexadecimal code for a colour is made up of a # followed by two digits (between 00 and FF) that set the intensity of each of the red, green and blue components.
45
Colour schemes
Basic steps
Many of the web sites that you will visit will employ very basic colour schemes usually involving dark text on a white or nearwhite background. Many more web sites will use the HTML default colours for links and visited links. Dreamweaver allows you to create a more enhanced colour scheme for each web site by applying a preset group of colours that will add an element of interesting colours to your site.
2
1 2 3 4
Choose a background colour
4
From the Command menu, select Set Color Scheme. Choose a background colour. Choose a colour for text and links. Click OK.
Click OK
Take note 3
46
Choose a colour for text and links
The visited link colour is the colour applied to a link after it has been clicked. The active link colour is applied to a link whilst it is actually being clicked (seems pointless!)
Special characters
Basic steps 1 2 3 4
Press [Ctrl]+[F2] to launch the Objects panel.
Select the Characters category.
When building your web site you are likely to want to include special characters such as currency signs, quotes and the copyright sign. HTML finds these characters difficult to deal with, however Dreamweaver has a set of objects that make including special characters in your web site easy.
Place your cursor where the character is to be placed.
3
Place the cursor where you want to insert the character
Click on the appropriate character icon.
Take note Cascading style sheets (see page 138) help you standardise text formats.
4
Select the character
Take note You can add special characters by pressing the appropriate key on your keyboard or holding down [Alt] and typing the numeric value of the character. The easiest way, however, is to use the Character objects panel.
47
Summary q Use bulleted lists to draw attention to important or summarised points.
q Numbered lists are used to show a sequence or order. q Definition lists can be used for glossary items.
q Lists can have many different styles associated with them. q Different types of lists can be combined.
q Your PC has many different fonts available for use. q The default font in Dreamweaver can be changed. q The Font List is a list of font combinations in Dreamweaver. q New font combinations can be created. q HTML font sizes range from 1 to 7.
q Relative font sizes relate to the size of the font in relation to the base font.
q HTML has six pre-formatted heading styles.
q Pre-formatted text retains any spaces occurring in the text. q Text colour can be changed.
q Web page background colours can be changed. q Text can be left, centre or right aligned.
q Your web site can include special characters found in the Characters object panel.
48
4 Images Working with images . . . . . . . . . 50 The Alt field . . . . . . . . . . . . . . . . 51
Aligning images . . . . . . . . . . . . . 52 Adding space . . . . . . . . . . . . . . . 53 Resizing an image . . . . . . . . . . . 54
Inserting blank images . . . . . . . . 55 External image editors . . . . . . . . . 56
Image software . . . . . . . . . . . . . 57 Summary . . . . . . . . . . . . . . . . . . 58
Working with images Graphic images help make your web site more visual and interesting. Most web sites will contain some images, which can be anything from a company or organisational logo through to product descriptions and full-colour photographs. The two principal file formats for use on web pages are JPEG (Joint Photographics Expert Group) used mainly for photographs and GIF (Graphic Interchange Format) a 256-colour formats used mainly for drawn images.
Images can be inserted anywhere within your web page. Simply place the cursor where you want the image and insert it. You can work from the Insert menu, or use the Objects panel.
2
3
Select Common objects
1 2 3 4
Position the cursor where the image is to be displayed.
From the Objects panel, select the Common objects category. Click on the Insert Image icon.
In the Select Image Source dialog box, browse and select an image.
Click on Insert
Take note Before uploading a site, make sure that all its images are stored in the main folder or a subfolder of the site on your PC. This will make it easier to copy the whole site to the web (see Chapter 11).
50
Basic steps
4
Select an image
Basic steps 1 2 3 4
Click on an image to select it.
From the Property Inspector, enter text in the Alt field. Click once more on the image.
The Alt field Large graphics take time to download. To speed up things, some surfers set their browsers to display web pages without any images. When they view your web site theyll see where an image should be displayed. The Alt field lets you give a description that will be shown if the image is not displayed. It will also be shown when the mouse is hovered over it.
2
Preview the web page in a browser and roll the mouse over the image.
1
Enter your text
Select the image
Tip Alt text should be descriptive to ensure that visitors who cannot see the image will have a good idea of what should be displayed. It is especially useful to the blind and partially sighted who use special software which picks up the Alt words and reads them.
3
5
Click on the image
Roll over the image in the browser
51
Aligning images Once you have added a image to your page you will probably want to align it to different parts of the browser window. Images can be aligned using the Property Inspector.
1
3
Select an image
Choose an alignment
You may want to align images with text at some place in your web site. You can use the Property Inspector for the image to set its alignment with the text in the current paragraph.
3
Select an image.
Click on the expander arrow.
Choose an alignment.
q Aligning with text
4 5
Select the image.
Choose an option from the Align dropdown list and watch the effect.
Repeat step 3 for other alignment options.
Tip To align several images at once, hold down [Shift] and click to select them, then set the alignment.
Select the image
5
1 2
6
Aligning an image with text
4
Basic steps
Choose an alignment
Tip 6
52
Repeat for other options
The most effective way to align text and images is to make use of tables see Chapter 6.
Adding space
Basic steps 1 2
3
Select an image.
In the Property Inspector, place a pixel value in the V Space field to add space around the top and bottom of the image. Place a value in the H Space field to add space around the left and right sides.
q Adding a border
4 5
Select an image.
In the Border field enter a value in pixels (the value 2 gives a neat border, 4 gives a thick border).
When an image is placed directly next to some text in a paragraph it often looks cramped. Adding vertical (V) and horizontal (H) space can decrease clutter and make the page look better.
Adding a border
Some images will lend themselves to having a border. A border makes an image appear more formal and defined.
1
Select an image
2
Enter a value in pixels
5
Enter a value in pixels
Take note A pixel is a unit of measurement that corresponds to a dot on your display screen. Screen dimensions are measured in pixels. The standard size of a 15" screen is 800x600 pixels, i.e. 800 wide and 600 high. You will gather that a pixel is pretty small!
53
Resizing an image Images can be resized in Dreamweaver. Although the image will look different on screen, the original file size remains untouched in terms.
Basic steps 1 2
Select the image.
Drag the handles
to the left and right to increase/decrease its width.
The (W)idth and (H)eight properties show the size in pixels.
After you have messed about with resizing your image you might decide to return things to the way they were. Click the Reset Size button to return the image to its original size.
5
Click Reset Size
Or
3
to the top and bottom to change its height.
Drag a corner handle to change both the width and height.
q Resetting the size
4 5
Select the image.
Click on the Reset Size button in the Property Inspector.
2 1
Select the image
Take note Making an image smaller always has a better effect than making one larger. Use graphic software to resize images before using them in your web pages.
54
Drag the handles
Tip Hold down [Shift] when dragging a corner handle to preserve the proportions of the image.
Inserting blank images
Basic steps 1 2 3 4 5
Place your cursor where you wish the image to go. Load the Objects panel if it is not already visible.
Select the Common objects category.
In some cases, you may be building a web page that will include a image that is not yet available, or you may be passing the completed page over to a graphic designer to include images. In these cases, Dreamweaver provides you with a way to place an empty placeholder. This placeholder can then be used to insert the image when it becomes available.
1
Position the cursor
Hold down [Ctrl].
2
Select Common Objects
3
Click Insert Image
Click on the Insert Image icon.
q A blank placeholder is inserted into the web page. Blank placeholder
Tip You can set the width (W) and height (H) fields of the empty placeholder to the same coordinates as the final image thus helping with page layout.
Take note One of the easiest ways to add animation to your pages is to use an animated GIF image. These are handled in the same way as any other image, but they loop an moving scene constantly. Check out the Web for sites with free animated GIFs.
55
External image editors Undoubtedly, image editing is best done in application software designed for this purpose. Dreamweaver allows you to set up a link to your favourite external image editor to allow you to edit the image from within Dreamweaver. When you save your changes in the external editor these changes are immediately reflected in the image as it is displayed in the current web page.
2
Click on File Types/Editors
5
Choose an application
Basic steps 1 2 3 4 5 6
7 3
7 8
Click Make Primary
Select a file type
4
8
Click +
Click OK
From the Edit menu, select Preferences.
Click on the File Types / Editors category. Click on an Extension file type. Click the [+] sign above Editors.
Browse and choose an image editing application. Highlight the external editor. Click Make Primary.
Click OK.
q All images of the type chosen will now be editable using the external image editor within Dreamweaver.
Tip To quickly edit a graphic image within Dreamweaver, select it and press the Edit button in the Property Inspector.
56
Image software Take note Macromedia recommends Fire Works 4 as an excellent graphic image editing complementary product to Dreamweaver 4.
There are many applications that can be used to edit graphic images. The following list may help you choose an application suitable to your needs. Application
Level
Web Site Address
IceView
Beginner/ intermediate
Iceview.com
Paint Shop Pro
Intermediate/ professional
Adobe Photoshop Professional MGI PhotoSuite
Take note Most free graphic web sites provide images free for non-commercial use only. Remember to check the small print if you intend using images for commercial purposes.
Beginner
Paintshoppro.com
Adobe.com
Mgisoft.com
Great free graphic web sites
The Web provides a great source of royalty free graphics and photographs that can be used in your web sites. The following list of sites are amongst the very best available.
Follow the instructions in each site to download graphic images. As a general rule, right click on the graphic image, choose Save Picture As and name and store the image on your local PC. Web Site
Freefoto.com
Freegraphics.com
Animation-central.com Cooltext.com
Content
Comprehensive photo albums
List of free graphics sites
Free animations
Personalised graphics
57
Summary q GIF and JPEG graphic image file formats are most commonly used on the Web. q An image is inserted into your web page using the Insert Image icon in the Common objects panel. q The Alt field allows you to include a description of an image for people who cannot see the image.
q Graphic images can be aligned left, centre or right in the browser window. q There are numerous options to align images with text.
q Vertical and horizontal space around an image can make a page seem less cluttered. q A border can be added to an image to give the image definition. q Images can be resized within Dreamweaver.
q An empty placeholder can take the place of an image not yet entered into a web page.
q You can use your favourite image editing tools from within Dreamweaver.
58
5 Links Working with links . . . . . . . . . . . . 60 Links to another page . . . . . . . . . 62
Choosing a target . . . . . . . . . . . . 63
E-mail links . . . . . . . . . . . . . . . . 64
Image maps . . . . . . . . . . . . . . . . 66
Summary . . . . . . . . . . . . . . . . . . 68
Working with links
Basic steps
A web site is made up of many web pages brought together by a home page. Within each page there are often many sections. Probably one of the greatest benefits of using HTML is the ease by which you can set up links between web pages and within each page itself. A hyperlink is a piece of text or an image, which, when clicked with a mouse, loads either another Web page in the same folder, another part of the same page or a completely new web site altogether.
Adding a link within the same web page
Anchors are used to set up links within a web page and are useful on long pages. Anchors can be thought of as bookmarks that allow you to quickly jump to main sections of your web page. After setting up anchor you can set links to so that, when the link is clicked, the browser jumps to the associated anchor.
2
3
Click on Invisibles
5
Click Insert Named Anchor
1 2 3 4 5
Click the cursor where you wish the named anchor to be placed. In the objects panel click on the Invisibles category. Click the Insert Named Anchor icon. Give the anchor a meaningful name. Click OK.
q Notice the yellow anchor visible where the cursor was placed.
6
Repeat steps 35 for all named anchors.
Click OK
Tip 4
60
Enter a name
Think of a hyperlink and its associated anchor as one item. If one or other does not exist you will not be able to use the anchor to navigate around your web page.
Basic steps 1 2 3 4
5
Highlight the text to become the link.
In the Property Inspector click Point to File.
Hold down the mouse key and drag until you touch the appropriate named anchor.
Linking to an anchor Once anchors are set within a web page, you will want to link to them. You use the Point to File option to link selected text to an anchor.
If you use anchors to let visitors navigate around your pages, include one at the top of the page and link to it so that they can jump back to the top from further down.
1
Highlight the text
The named anchor appears in the link field for the highlighted text preceded by a #.
2
Preview the web page in a browser.
4
3 Take note You can type anchors into the link field of selected text. Remember to precede the name with a #.
Click Point to File
The named anchor
Drag the anchor
Take note Unless you change colours under Preferences, links that have yet to be clicked show up underlined in blue. Once clicked a link is shown in purple.
61
Links to another page You can easily linking to another web page within your web site or elsewhere. If the page is within your site, you can browse for its file; to link to a page elsewhere you would normally type in the URL.
1
1 2
3
Click on Browse for File
4 5
Use the Point to file method. Choose the file. Click Select.
Enter the address in the Link box.
Choose the file
Take note When you enter a web site address in a link, if an HTML page is not specified, it will automatically link to index.htm.
62
From the Property Inspector, click on the Browse for File option.
q Remote pages
6
4
Select the text you wish to act as the link.
q Local pages
Or
Highlight the text to act as a link
2
Basic steps
5
6
Enter the pages address
Click Select
Choosing a target Tip You could set a standard for your web sites when loading web pages via a link. For example you might decide that all pages from within your own site are shown using the _self target whilst all links to other sites are shown using the _blank target option. This will ensure that visitors are not propelled into another site after loading a link but rather can simply close the window to return to your site.
If you do not choose a target in the Property Inspector for your link then the page being loaded will show in the current window. Good design and your own preference will make you decide on how best to show linked pages. The table below shows the most popular options Target _self
_blank
Description
Loads the web page into the current window replacing any existing contents.
Opens a new window on to top of the current window to display the web page.
Tip Tip You can have more than one hyperlink pointing to the same named anchor or URL.
Click the drop-down Link field box in the Property Inspector to view a list of existings links for the current site. These can be selected and re-used from here.
63
E-mail links
Basic steps
You will probably want to give visitors to your site some easy way of contacting you. The easiest way to do this using HTML is to create an e-mail link. When visitors click this link their own e-mail software is loaded ready to send a new message, with your address conveniently entered into the To: field.
1
Place your cursor
3
Select Common objects category
1 2 3 4 5 6
6
Enter the links text
7
7 8 9 5
Click on Insert Email Link
Enter the e-mail address
Place your cursor in the page where the email link is to go. Launch the Objects panel.
Select the Common Objects category.
Click on Insert Email Link.
Select the text to be used as the email link. Enter some text for the link. Enter the address. Click OK.
Press [F12] to preview the page in a browser.
q When the link is clicked a message is created using the PCs e-mail software
Take note The link uses the HTML <mailto> tag. To see how this was used, look in the Property Inspector for the selected text.
64
Basic steps 1 2 3
Click on the image to select it.
Use Browse for File in the Property Inspector to choose a file to link. Enter descriptive text about the link in the Alt field.
q When the user clicks the image the links page will be loaded.
1
Using an image as a link Not only selected text can be used to link to another web page, but an image can also be used. It is just as straightforward to set up an image as a link as it is to set up text. When you set an image as a link you simply have to move your mouse over the image and click it to activate the link. There is no requirement to attach any text to the image to make it work.
Remember however, that it is always best to include a description in the Alt field for all images used in your web site.
Select the image
2
Use Browse for File
3
Enter descriptive text
65
Image maps
Basic steps
An image map allows you to take a single image and split it into a number of segments, or hot spots, assigning each to a particular link. This allows you to load different web pages by clicking on a certain part of a single image.
It is particularly important to include descriptive alternate text where an image, rather than text, is the hotspot. This will help your visitors determine exactly what will be loaded on clicking the hotspot.
3
Click the top left corner
4
Drag the corner
5
2
Select Rectangular Hotspot Tool
6
2 3 4
5
6 Choose a target window
You can make the link an anchor by entering its name preceded by a # in the Link field.
Click on an image to view its Property Inspector.
Select the Rectangular Hotspot tool.
Click at the top left of the region to be made a hotspot. Drag the cursor to the bottom right hand region of the area.
q Note the blue shaded area displayed
Choose the link
Take note
66
1
7
In the Property Inspector for the selected hotspot choose a file to load when it is clicked. Choose a target window to load the file.
Press [F12] to preview the web page.
Take note By writing text in the Alt field for the hot spot you can let visitors know what will be loaded when it is clicked.
Basic steps 1 2 3 4
Using other image map tools
Click on a graphic image to view its Property Inspector.
Not only can you create a rectangular hotspot but you can also create an oval or a polygon one. Oval hotspots are much the same as rectangular ones, but with polygons you can create a hotspot around an unusual shape.
Select the Polygon Hotspot tool.
Click at the starting point for the hotspot.
3
Click the starting point
Click at points on the outline to create the shape for the hotspot.
4
q Note the blue shaded area displayed.
5 6 7
Click around the shape
In the Property Inspector for the hotspot choose a file to load when it is clicked. Choose a target window to loads the file.
5
Press [F12] to preview the web page.
2
Select the Polygon Hotspot Tool
6
Choose a file
Choose a target window to load
67
Summary q Links enable you to jump quickly to bookmarks in the same web page, load a different page in the same site, or load an external site.
q A named anchor is a link within the same web page. q It is important to have links that return to the top of each web page. q Links can be loaded into the current browser window or into a different window using the Target field.
q An e-mail link allows visitors to quickly compose and send an e-mail to you. q Images can also act as links.
q An image map allows you to load different pages by clicking different areas in the one graphic image.
68
6 Tables Working with tables . . . . . . . . . . 70 Table formatting . . . . . . . . . . . . . 71
Predefined formats . . . . . . . . . . . 72 Other formatting options . . . . . . . 73
Merging cells . . . . . . . . . . . . . . . 74
Splitting cells . . . . . . . . . . . . . . . 75 Sorting a table . . . . . . . . . . . . . . 76 Adding rows or columns . . . . . . . 77
Table size . . . . . . . . . . . . . . . . . . 78 Tables and windows . . . . . . . . . . 79
Summary . . . . . . . . . . . . . . . . . . 80
Working with tables
Basic steps
A table is made up of rows and columns. Each intersection of a row and column is known as a cell (as in a spreadsheet). Tables are commonly used to display information, providing a clear and summarised grouping of related data. In HTML, they also play a major role in getting round some of the limitations of web page layout.
Creating a simple table is straightforward, but plan its layout on paper first, as this will make it easier to create in Dreamweaver.
2
4
1
Click on Insert Table
3
Enter the number of rows and columns
6 Enter the width
Take note An image can be inserted into a table cell exactly the same as anywhere else on a web page.
70
Choose Common Objects
5
1 2 3 4 5 6 7
From the objects panel, choose the Common objects category. Click on the Insert Table icon.
Enter the number of rows and columns in your table.
Enter the width of your table. Set the border to 1. Click OK.
Press [F12] to preview the page in your browser.
Click OK
Set the border
Take note Adding data to a table is very similar to adding data to a table in Word or PowerPoint. You simply enter the data in each cell then press [Tab] or click to move around the table.
Table formatting
Basic steps 1 2
Select the cells.
Apply formatting using the Property Inspector.
q Setting colours
3 4
Click on the Bg colour cube to set the background colour.
Click on the Brdr colour cube and select a border colour.
Formatting a table is very much the same as formatting any text in HTML. It simply involves highlighting the required cells and formatting them from the Property Inspector.
If you want to format all the cells in a row or column, you can select the complete row or column. To select, point to the top of a column until the down arrow cursor is evident or to the left of a row to get the right arrow and click the mouse.
You are not restricted to having the same colours for the table as for the page text and background. Each table, and part of a table, can have formatting applied to change the colours used.
1
Select the cells
2
3
Select a background colour
4
Apply formatting
Select a border colour
71
Predefined formats
Basic steps
Dreamweaver makes formatting a table very easy by providing a suite of preformatted table designs for you to choose from.
3
Preview the styles
4
Set the frequency
7
5
1 2 3 4
Click OK
5 6
Change as you need for rows
6
Change as you need for columns
7
Create a new table.
From the Commands menu select Format Table. Scroll through each available style checking the preview.
In the Alternate field decide on the frequency of row colour changes. Change the Align option to suit the first row of the table and choose a text style.
Change the Align option for the left hand column of the table and choose a text style. Click OK.
Take note
Tip
The top row and left hand column of the table come in for some special treatment in the above example. This is because, logically, these areas of a table will be used to provide headings of some sort relating to the purpose of the table.
Spend some time looking through the Format Table options. They really do provide a great way to quickly create really professional looking tables.
72
Basic steps 1 2 3 4
Select a table.
Enter a value into the CellPad field.
Enter a value into the CellSpace field.
Preview in a browser.
1
Select a table
Other formatting options Table formatting comes with many options. To make changes to a complete table, click on the
tag in the bottom left hand side of the browser window.
Changing table cell padding and cell spacing
Tables have attributes known as cell padding and cell spacing. Cell padding refers to the space between a cells content and the boundary around the cell. Cell spacing refers to the number of pixels of space between each cell in a table. Amending these values is easy to do.
2
3
Enter a value
Enter a value
Tip
Tip
Tables with some cell spacing, background colour and no borders can provide a very professional look to your web page.
Each table cell, table row or table column can be formatted in its own right. Simply select the appropriate cells and apply formatting from the Property Inspector.
73
Merging cells Table cells can be merged together to make one large cell. This can be useful for row or column headings. Cells can be merged as long as the merged cells are next to each other, or are above and below each other. Merged cells can include multiple rows and columns.
1
2
Highlight a group of cells
Click on Merge Cell
Take note Merging and splitting table cells can often be confusing and can, in the early stages, lead to very strange results. Remember to use the Edit, Undo command if you make a mistake when carrying out these activities.
74
Basic steps 1 2
Highlight a group of cells to merge together.
Click on the Merge Cell icon in the Property Inspector.
Tip You can also merge cells using Modify, Table, or Merge Cells.
Splitting cells
Basic steps 1 2 3 4 5
Click in the cell to be split. From the Modify menu, select Table, then Split Cell.
Decide on whether the cells are to be split into rows or columns. Decide the number of rows or columns . Click OK.
1
3
4
In the same way that you can merge separate table cells to make one cell, you can split these merged cells to return to multiple cells.
Tip You can also split a cell using the Split Cell icon in the Property Inspector for the table.
2
Select Table > Split Cell
Select the cell to be split
Decide how to split the cells
5
Click OK
Set the number
75
Sorting a table
Basic steps
If a table contains data you may want to sort it in some way. This is particularly useful where your table is showing ranking on a monetary or other numeric value.
1
1
Select a table
2 2
3
Select Sort Table...
4 Choose the Sort By column
4
Define the Order
7 6
3
Include the first row? A sorted table
Click OK
5 6 7
Select an entire table either by clicking around the edges of the table or by choosing the tag in the Status bar. From the Commands menu, select Sort Table.
Choose the column to Sort by.
Select Alphabetic or Numeric, then Ascending or Descending Order. Repeat steps 34 if you want to further sort the table on a secondary column.
If the first row is not a heading tick the Sort Includes First Row field. Click OK.
Take note You cannot sort a table that includes any merged cells.
76
Basic steps q Inserting a row
1 2 3
Click on the row below where the new row is to be inserted.
Adding rows or columns Once your table is complete you may decide to add rows or columns to it. This could be as a result of original data being missed or the need to expand your table in the web page later.
From the Modify menu, select Table, then Insert Row.
Select Table then Insert Row or Column as required
Set the number of rows and click OK.
q Inserting a column
4 5
6
Click on the column to the right of where the new one is to go. From the Modify menu, select Table, then Insert Column.
Set the number of columns and click OK.
Take note To delete rows or columns, select them and use Modify > Table > Delete Row/Column or press [Delete].
Tip For more control, use the Modify, Table, Insert Rows or Columns commands to choose where the new row or column is to be placed in relation to the current one.
77
Table size
Basic steps
You can change the size of a complete table or you can make size changes to an individual table row or column. Select the Table, Row or Column as required
q Complete table
1 2
Select the table by clicking on the tag in the status bar. Resize the table by clicking on the selection handles on the rows or columns.
q Single row or column
3
Resize using the handles
4
Click on the border either at the bottom of a cell to change row height or to the right of a cell to change row width. Drag to resize the row or column.
Take note
Tip
Dragging the corner selection handles will resize the tables width and height at the same time.
Press [Ctrl]+[A] to quickly select a table.
78
Tables and windows Take note A pixel based table of one row and one column can be used in a web page to store all elements of the page. This gives you control over what the user will see when viewing your pages, but note that no element in a table is displayed until the entire table has been downloaded. This can produce an unacceptable delay.
When you insert a table into your web page, its size can be percentage based or pixel based. In the table Property Inspector, you can decide whether the table width (W) or height (H) is shown as a percentage of the browser window or as a pixel value, or as a combination of both.
Percentage-based tables resize automatically to fit the relative area set irrespective of what size the visitor makes their browser window. Pixel-based tables stay the same no matter what the size of the browser window. A percentage-based table
A pixel-based table
79
Summary q Tables are used to display text or images in rows and columns.
q Tables can be formatted in a similar way to other objects. q A table can have a different text and background colour from the web page it is placed on.
q Dreamweaver provides preformatted table designs for your use.
q Cell padding is the space between a cells contents and the boundary round the cell. q Cell spacing is the space between each cell. q Table cells can be merged together. q Merged cells can be split.
q A table can be sorted on a column or row.
q Table rows can be added and deleted easily. q Table size can be easily amended.
q Percentage-based tables will occupy the specified percentage of the browser window no matter what size that window is.
q Pixel-based tables stay the same size irrespective of the size of the browser window.
80
7 HTML Understanding HTML . . . . . . . . . 82 Formatting tags . . . . . . . . . . . . . 83
Unordered lists . . . . . . . . . . . . . . 85 Creating a table . . . . . . . . . . . . . 86 Images and links . . . . . . . . . . . . 87
External HTML editors . . . . . . . . . 88 Cleaning Word HTML . . . . . . . . . 90
Summary . . . . . . . . . . . . . . . . . . 92
Understanding HTML Dreamweaver is a very sophisticated and flexible software application that lets you create exciting web pages, but underneath all the layers of functionality, it is simply an HTML generator. You develop pages in a WYSIWYG environment and Dreamweaver creates the HTML code that is then saved under filenames ending in .HTM or .HTML. Dreamweaver makes HTML easy. In this chapter we will concentrate on the underlying HTML source code of your web pages.
HTML is based on tags, which determine the way pages look. All HTML pages have the same basic structure. Each starts with the tag, has a heading area and all the stuff to be displayed on the page is set between the tags. Most tags in HTML have a corresponding closing tag that puts the lid on that tag these are the same as the original tag with the addition of a forward slash (/) e.g. . The basic HTML structure
Take note Although you are using Dreamweaver to create your web pages, you could open up a simple text file in a text editor and manually enter HTML source code. If you saved this file with the extension .HTM(L) then you could load and run it in any browser.
Identifies page as being HTML Page title Stuff to be displayed goes here
In this example you will note the tag starts and finishes the page, the section is shown at the top followed by the section. HTML tags can be in upper or lower case. Dreamweaver shows HTML tags in lower case, coloured blue.
82
Tip To view the HTML source code for a page, click the Show Code View icon.
Formatting tags
Basic steps 1 2 3
Enter some text into a web page and highlight a portion of it. Click the Bold icon in the Property Inspector. Click Code View.
3
In HTML, the most common formatting tags are the (bold), (italics) and (underline) tags. These tags change the way that the text on your web page is displayed in a browser.
Text can be shown in bold by selecting it then clicking on the Bold icon in the Property Inspector.
Text can be shown in italics by selecting it then clicking on the Italics icon in the Property Inspector.
2
Click Bold
Click Code View
The HTML bold tags
Tip If you click on the Code and Design View icon , you can type in WYSIWYG and watch the HTML code being generated in front of your eyes amazing!
Tip You can select a word by double-clicking on it. A line of text can be selected by clicking at the start of the line when the arrow cursor appears. Press [Ctrl]+[B] to make selected text bold and [Ctrl]+[I] to make selected text italic.
83
Other formatting tags
Basic steps
You can use the Text menu to apply further formatting tags to your web page. The following web page, shown in Code View, illustrates a number of effects.
❑ Underlining text
2
Select Style then Underline
1 2
3
3
Highlight a word in the text on the current open web page.
From the Text menu, select Style, then Underline. Click Code View.
Click Code View
The underline tags
Tip Carrying out a procedure in Design View and then looking at what you have completed in Source Code view is a great practical way to begin to understand HTML.
84
Unordered lists
Basic steps 1 2 3 4
Create a new web page.
Click Show Code and Design View. Create a bulleted list with a few entries listed. Have a look at the HTML code creates.
Take note Although Dreamweaver automatically indents list entries this makes no difference to the operation of the list. However, it does make the start and end of the list tags easier to see.
As you have found out earlier, a bulleted, or unordered, list allows you to create a summarised list of points, each preceded by a bullet. The HTML code for a bulleted list is slightly more complicated than that used to emphasise text. The bulleted list starts with the unordered list tag and each list item starts with - and ends with
tag. When the list is complete the lid is put on it with the
tag.
3
Click Show View Code The tag shows a new paragraph has been started
2
Create a bulleted list
Take note An ordered list is created in the same way, but using the
tags.
85
Creating a table A table is enclosed in tags. In the opening
