This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
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
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
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
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
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
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
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
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.
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.
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
and
tags. In the opening
tag, attributes can be written to set the size and border style of the table. Each row is enclosed within
and
tags and each of the columns within each row is enclosed within
and
tags. The data is placed within the
tags. Indentation of table rows makes the whole HTML table code much easier to understand. Table in Design View
Table in Code View
An HTML table
Take note The tag has a number of attributes that can be included to change the appearance of a web page. Each attribute has its own structure. bgcolor and text are shown with the chosen colour displayed within quotes.
bgcolour colour of page background text colour of page text
Start of row End of row
86
width here set as a percentage of the browser window height here set in pixels Columns in row
Images and links Inserting an image
To insert an image you use the tag.
In the example, the image details, tell you that the image source (img src or the filename) is stored in a folder named images and the actual filename is assistsharpsmall.jpg. Information relating to the width, height, border and ALT descriptive text is also given.
An example of HTML with an inserted image
Tip If the HTML code extends beyond the browser window, click on the View Options icon in Code View to turn the wordwrap on.
Links
A hyperlink is used to load a new web page or jump to a different part of the same web page. The example HTML code shows the method used to create a typical hyperlink.
Here, the hyperlink Macromedia is enclosed in the anchor tag. The first part of the anchor tag has the web site of the page to be loaded listed after the hypertext reference attribute (href). When the visitor clicks the hyperlink this page is loaded into their browser.
An example of HTML with a link
87
External HTML editors While Dreamweaver gives you a really easy method of switching between HTML Code and Design View, some people may like to continue using an external HTML (or simple text) editor to edit source code. With Dreamweaver, this is no problem and you can easily set up and use an external HTML editor from within the application. Any changes made to web pages using the external editor will immediately be reflected within the Dreamweaver environment.
2
Select File Types/Editors
3
Basic steps 1 2 3 4
Use Browse...
5
6
From the Edit menu, select Preferences. Select File Types/ Editors.
Choose an external code editor use the Browse option to select an application.
Decide whether files changed externally are saved always, never or after a prompt. Decide whether or not the web page is saved in Dreamweaver before loading the external editor. Click OK.
Tip 3
88
...and choose code editor
To find out more about HTML read HTML 4.0 Made Simple by Nat and P.K. McBride. This book will really help extend your knowledge.
Basic steps 1
From the Edit menu, select Edit with (the external editors set up by you will be listed.)
❑ Your web page is opened in the external editor application
Take note If you want Dreamweaver to make no changes to your HTML code, in the Preferences dialog box turn Code Rewriting off.
Using an external editor Once you have set Dreamweaver to use an external editor you will want to load this editor to change your web page HTML source code.
Roundtrip HTML
Dreamweaver has a great feature called Roundtrip HTML. This allows you to amend your documents in an external HTML editor, and then load them in Dreamweaver without your HTML being changed drastically. This means that the way you write the HTML in the external editor is the way it will pretty much look in Dreamweaver. You can set defaults to determine how Roundtrip HTML operates. The following summary gives an overview of operation: q q
All tags will be checked and amended if youve made any obvious mistakes Invalid tags are highlighted in yellow
Invalid tag
89
Cleaning Word HTML Word files can be saved as HTML format. This allows you to create a document in Word and use the output in a web site. However, Word creates some unwieldy HTML source code that includes elements used only by Microsoft. Dreamweaver can clean this up making the HTML much easier to read and more efficient. Create an example file in Word and save it as Web Page (*.htm;*html).
3
Select Clean Up Word HTML...
5
4
Basic steps 1 2 3 4
Click OK
5 6
From the File menu, open the Microsoft Word HTML file.
Click on Show Code View and notice the redundant HTML code.
From the Commands menu, choose Cleanup Word HTML.
Choose the version of Word to be cleaned (leave all other options as the default). Click OK.
Check the statistics from the clean up.
Choose what to clean
Tip 6 90
Check the statistics
Check out the Code View to see the cleaned file.
Basic steps 1 2 3 4 5
Open the HTML file to be cleaned. Choose Show View Code and note the HTML source code.
From the Commands menu choose Cleanup HTML.
Cleaning HTML from other applications Dreamweaver also allows you to clean up HTML created outside Dreamweaver. This option is handy if you have HTML files created in a simple text editor such as Windows Notepad or in one of the shareware HTML generators that are widely available on the Web.
2
Click Show View Code
Click OK.
Check out the statistics about the clean up.
4
Click OK
Take note Any preferences that you change relating to the cleaning up of Word HTML or HTML from other applications are saved for future use. This means that these settings will become the default until any changes are made to them.
91
Summary q Dreamweaver is an HTML generator.
q All HTML pages have the same basic structure.
q HTML files can be created using a basic text editor. q The tag makes text bold. q The tag makes text italic.
q The tag underlines text.
q Bulleted lists use the
and
tags.
q Numbered lists use the and
tags.
q Tables use the
tag.
q You can use an external HTML editor from within Dreamweaver. q Roundtrip HTML allow your changes made externally to remain when loaded in Dreamweaver.
q Dreamweaver can clean HTML files created in Microsoft Word or other software.
92
8 Frames and layers Working with frames . . . . . . . . . . 94
Working with frames Frames offer a great way to make your web site look professional. Many of the pages that you view on the Web are likely to contain frames in some form or another. Frames allow you to split a browser window into a number of areas, each capable of loading an individual HTML web page, so that you can have multiple pages loaded in the one window. A typical use of frames is to create a page with a static header frame at the top of the browser window, a static side navigation frame that shows visitors the content of your site, and a main frame where pages are loaded as your visitors click navigational links. Header frame
Side navigation frame
Main frame
Tip Any more than three or four frames in a frameset can become difficult to manage and look cluttered.
94
Take note Older browsers cannot use frames. Some organisations choose to create two web sites one that is frames-based and one that does not use frames.
The frameset
Basic steps q Using Frame objects
1
Open a new web page.
q If the objects panel is not shown press [Ctrl]+[F2].
2 3
Choose the Frames category.
The basis of creating a frames-based web site requires that you first design and set-up a frameset. A frameset is an extra HTML web page that manages the frames in your web site. There are two ways to define a frameset from the Frames object panel or you can crate a frameset manually. A frameset contains property information about how your web page frames will be displayed.
Click on a frameset of your choice.
q Creating a frameset
4 5
6
Create a new web page.
From the Modify menu, select Frameset and choose a method to split the current page. Click on one of the frames and repeat step 5 for any further splits on the selected frame.
5
Select Frameset then choose how to split your page
Take note When working with frames it is essential that you can see the frame outline as you design your site. Click on any frame in your frameset, then from the View menu select Visual Aids, then Frame Borders.
95
Saving a frameset
Basic steps
The first task after creating a frameset is to save it. In the example, the frameset will have four HTML files associated with it the three frames and the controlling frameset.
q Saving the frameset
Once you have successfully saved your frameset you can then
go about saving each of the files in the frames. The border of the frame being saved is shown hatched during the save process. Once you have saved all of the frames in a frameset, click the mouse in each frame. The title bar shows the filename.
4
Select Save All Frames from the File menu
1 2 3
From the File menu, select Save Frameset.
For each frame select a name. Click Save.
q Saving the frames
4 5 6
From the File menu, select Save All Frames. For each frame select a name and click Save. Repeat steps 45 for each frame.
Take note
Tip To make full use of frames give each one a meaningful name in the Frame Name field in its Property Inspector.
96
The frameset isnt really much use until you place information into each frame. You can add information into frames as you do in a standard page.
Frameset properties
Basic steps 1 2
Click on the line between two frames.
Amend the properties as appropriate.
q Adding a title
3 4 5 6
Select the Property Inspector for the Frameset.
The frameset and each frame in it have properties, and those set in a frame take precedence over those set in the frameset. Use the frameset properties to change the frame sizes and their borders. You can select the Property Inspector for the frameset either by clicking its border or the dividing line between any two frames.
Adding a title
From the Modify menu select Page Properties.
A pages title is displayed in the title bar of browsers. In a frameset the only page that needs a title is the frameset itself.
Enter a title. Click OK.
5
1
Click on the line
2
Change as needed
Enter a title
6
Click OK
97
Frame properties
Basic steps
Each frame in a frameset has its own properties. You can change each frames properties independently of the controlling frameset using the Frames panel.
Scrolling in a frameset
Some frames will be fixed, such as a heading frame, and left navigation frames, whilst other frames will require scrolling to show all the information in each web page loaded. Changing scrolling options in a frame is easy, just click on a frame in the Frames panel, then change the operation of the scrolling bars.
1
3
1 2 3 4
From the Window menu select the Frames option. Click on a frame.
Amend frame properties as appropriate.
Repeat steps 23 as appropriate for each frame in the frameset.
From the Window menu select Frames
Change as needed
2 98
Click on a frame
Target frames
Basic steps q Using target frames
1 2
3
Highlight the link text in the left frame.
In the Property Inspector, choose the Link page to load and the Target frame. Press [F12] to preview your frameset click the link and watch the page load into the main frame.
q Cater for old browsers
4
5
In the frameset example, the left navigation frame is used to allow visitors to click on each link. Once clicked, the requested web page is then displayed in the main frame. Provided this frame has been named, this can be easily achieved.
Frames and old browsers
Frames are an important part of a modern web site, but they do not work on some older browsers. While this is unlikely to cause you a problem, Dreamweaver does give you a method to ensure that old browser users are catered for if they encounter your frames-based web site.
1
Select the text
From the Modify menu, select Frameset then Edit NoFrames Content.
2
Choose the link page and target frame
Enter a suitable message to alert your visitors to the use of frames.
5
Enter your message
99
Layers
Basic steps
Standard HTML offers limited flexibility when designing web pages. Tables can help, but layers are far better. A layer is a special container that can be placed anywhere on a web page and which can contain the complete range of HTML commands. Layers can be used to store text, images, and tables. With layers you can be flexible in the creation of your web pages you can literally dump holders of HTML anywhere on the page (moving them a pixel at a time).
You can add multiple layers to a web page. They can be of different sizes, have different characteristics, overlap and sit one inside the other. Adding a layer is straightforward. Layers are only compatible with Internet Explorer and Netscape Navigator version 4 and above. Use layers to design your web site then convert these layers to tables to ensure that they work in most browsers. This gives you the best of both worlds.
1
3
1 2 3
4 5 6
Click Draw Layer.
Click on the web page work area and, holding down the mouse, drag the layer to the desired size. Enter some text into the layer.
Repeat steps 23 for further layers adding an image and a table. Save the web page.
Select Common category
Click in the area
2 4
100
Select the Common category in the objects panel.
Enter your text
Click on Draw Layer
The Layers panel
Basic steps q Showing and hiding layers
1. 2 3 4
From the Windows menu, choose Layers. Click on a layer to select it.
Click on the eye to toggle the visibility of the selected layer.
The Layers panel allows you to stop multiple layers overlapping. This is a very useful function that will make designing web pages with layers much easier. You can also hide layers from the layers panel which can help when deciding how a web page will look with different designs.
4
Click on the eye at the top of the column
Click on the eye at the top of the column to toggle visibility for all layers.
Tip
3
2
Click on a layer
Click on the eye
The layers panel can be launched by pressing [F2].
Tip When you convert layers to tables for universal use, you cannot convert layers that overlap each other. To help you at design time, ensure that the Prevent Layer Overlap option is ticked in the Layers panel.
101
Resizing and moving a layer
Basic steps
Once created, a layer can be easily resized and moved.
1 2
Tip
3
If you add an image to a layer you must hold down the Shift key when dragging the resizing handles otherwise the layer will not resize.
1
3
Click on a layer to select it.
Resize the layer by dragging the selecting handles as needed. To move a layer, click in its top left hand corner, hold down the mouse and drag into place.
Select a layer
Drag the top left corner
2
Drag the handles to resize
Take note You can use the arrow keys to move a selected layer one pixel at a time in any direction.
102
Layers and tables
Basic steps q Layers to tables
1
2 3
From the Modify menu, select Convert, then Layers to Tables. In the Convert Layers to Tables dialog box select Most Accurate. Click OK.
q Tables to layers
4
5
Layers turn your web page into a free format canvas where you can place images, text and other objects where you choose, but they have a down-side. Older browsers cannot handle them and so you must make a decision whether to restrict access to your site. Dreamweaver can convert layers to tables thus allowing your web site to be accessible in all browsers.
If you need to re-edit the web page you can convert the tables back to layers and reverse the process once editing is complete.
2
3
Select Most Accurate
Click OK
From the Modify menu, select Convert, then Tables to Layers.
Set options in the Table to Layers dialog box and click OK .
Example of layers converted to tables
5
Set as needed
Tip Many web designers use layers as standard then convert these to tables at the end.
103
Summary q Frames split a browser window into a number of individual areas each capable of loading an HTML web page. q A frameset is used to control frames in a web site. q A frameset controls properties.
q Each frame in a frameset has its own properties. q Only the frameset requires a title to be added in page properties. q A frameset can have scrolling option set.
q A target frame defines which frame will be used to load a web page. q Some old browsers cannot use frames.
q Layers allow a level of design flexibility not traditionally associated with HTML.
q A web page can contain multiple layers.
q Layers can be hidden to allow different designs to be previewed. q Layers can be resized and moved.
q Converting layers to tables allows a better guarantee that the web page will work in a consistent manner across multiple browsers.
q Tables can be converted to layers to allow re-editing of a layers-based web page.
104
9 Forms Working with forms . . . . . . . . . . 106
Feedback forms . . . . . . . . . . . . 107
Forms and tables . . . . . . . . . . . 108 Text field properties . . . . . . . . . . 109
Working with forms Forms in a web site are a great method of getting structured information from visitors. Whilst e-mail links are fine for general responses, a form presents a set of structured questions that require completion by visitors. Forms put you much more in control of the kind of data that you gather. A form would typically be used to allow visitors to provide feedback or to sign a guest book.
CGI Scripts
Whilst Dreamweaver makes form production very straightforward, actual form processing is a little more complex. Forms are processed using a CGI (Common Gateway Interface) script. This is a special program that takes the form data submitted and sends it back to an e-mail address in a recognisable form. CGI scripts are not covered in this book however it is unlikely that you would ever require to write one yourself. Most ISPs provide you with CGI scripts that process forms for you and you can refer to your ISPs web site for help on how to implement these scripts. Using a CGI script provided by your ISP for form processing should be fairly straightforward to do. Check out their web site for detailed instructions.
Take note A field in database technology is a pigeon-hole where a single piece of information about a single subject is entered. Examples of fields would be a persons age or their shoe size.
106
Tip If your ISP does not provide a CGI script to process web page forms then consider moving to an ISP that does provide such a service.
Take note A form is identified by a red dashed rectangular box on a web page. All form elements must be added within this boundary.
Feedback forms
Basic steps 1 2
From the Objects panel choose the Forms category.
Click on the Insert Form icon.
q A basic form will be placed on the page. q Adding a field
3 4 5 6 7 8
Ensure that your cursor is placed within the form object.
A feedback form might be used to allow visitors to request further information about a product or service. It might also be used to enable users to make a general comment about your web site or your business.
Adding fields to a form
A form is absolutely no use to you unless it can gather data from visitors. The most fundamental field that is added to a form is a text box. A text box allows visitors to enter information such as a forename or surname.
4
Enter descriptive text
Enter some descriptive text before entering the text field.
6
Click the Insert Text Field icon. Click after the field and press [Enter].
Repeat steps 36 for other text fields.
1
Click after the field and press [Enter]
Choose Insert Form
Press [F12] to preview the form.
107
Forms and tables A table within a form allows you to align form text and form fields easily.
Basic steps 1 2
4 5
Set as needed then click OK
Enter descriptive text
6
3
4
Click in the column
8
Click Insert Text Field
5 6 7 8
Tip To hide the table lines in the above example make sure that the table Border property is set to 0.
108
From the Objects panel choose the Forms category.
Click the Insert Form icon.
From the Objects panel, select the Common category and click the Insert Table icon. Set the table column, row and width and click OK. In the first row, enter some descriptive text in the left column. Click in the second column in the first row.
From the Objects panel choose Forms category.
Click Insert Text Field.
q Repeat steps 68 for successive rows.
9
Click [F12] to preview the form.
Text field properties Take note You can type any character in a text field. Set the Max Chars property to be representative of the data being gathered in the field. For example if you were entering a phone number it would be reasonable to set this value to 13.
The text field allows you to enter information like names, addresses and telephone numbers. You can set the properties of the text field to suit the data being gathered. You can name the field and determine the maximum number of characters that can be displayed and entered as well as set the initial text to be displayed. You can also determine whether the data entered should be a single line, take up more than one line or appear as a password (asterisks displayed).
Characters hidden from view
Field name
Number of characters Single line of text only
Tip
More than one line can be entered
Default text can be entered
Always name all fields. This will make it much easier to understand the form data sent back to you from the form processing CGI script.
109
Lists
Basic steps 1
Menus and lists allow visitors to choose from displayed options. They can be shown in a drop-down box or fully viewable.
The Item Label field is used for text such as Mr, Mrs, Ms. The corresponding Value entry assign a number to each Item Label. If a value exists, this is what is gathered from the form rather than the Item Label details. E.g.(Mr=1, Mrs=2, Ms=3) Field name
Field type
2 3 4
Click to enter items
5 1
Enter descriptive text
2
3
6
Click in the column
7 Click Insert List/Menu
8
Choose between menu or list
5
Enter a list of choices
8
6 110
Enter descriptive text in the left column of the table. Click in the right hand column of the table. Click Insert List/Menu.
Click the List Values button.
In the List Values dialog box, enter a list of choices in the Item Label field. Enter values if you wish these to be sent from the form rather than the corresponding label.
If you want a list entry to be displayed by default select it. Choose whether the object is to be shown as a menu or list.
Enter the values
Radio buttons
Basic steps 1 2 3 4
Enter some descriptive text for the radio group in the left column. Click in the right column.
Click the Insert Radio Button icon.
Name the radio group.
q Repeat steps 34 for all radio buttons in a group.
1
Radio buttons allow visitors to make only one selection from a group of possible choices. Radio buttons can be grouped to enable a relationship to be set between them.
If you add further radio buttons, ensure that the radio group name is different for each set used on your form (E.g. You may have a set for choosing an age range, a membership type or a choice of packaging sizes) If they remain the same they will be deemed to be associated and you will be able to select only one single radio button from all those displayed on the form.
3
Enter descriptive text
2
Select Insert Radio Button
Click in the column
Take note Radio buttons are used when you want to select only one choice from a set such as your age range. Checkboxes are used to select a yes/no type answer such as whether you would like a brochure.
4
Name the group
Determines whether button is checked or not
Value sent back from form after processing
111
Checkboxes
Basic steps
A checkbox is a great way of gathering yes or no type information which is simple such as whether your visitors want to be included in a mailing list. Value returned from the form Name
Box ticked or unticked on initial view
1 2 3 4
3
1
112
Enter descriptive text
2
Click in the column
Enter some descriptive text in the left column. Click in the right column.
Click on the Insert Checkbox button.
Press [F12] to preview your form.
Click Insert Checkbox
Submitting data
Basic steps 1 2 3 4 5 6 7 8
Click on the bottom row of your form table. Click on the Insert Button icon.
Change the Button Name field to Clear Fields.
Once you have used the fields on your form to gather information from your visitors, you will look for a way to submit the form data to your ISPs CGI script utility for form processing. The way to do this is to add two buttons to your form. One button will erase the current field data allowing changes to be made, the other button will submit the form to the CGI script.
2
In the Action group click Reset Form.
Click in the right column.
Click on the Insert Button icon.
Change the Button Name field to Send Data. In the Action group click Submit.
3
Select Clear Fields
5
1
Click the Insert Button
Click in the column
Click in the bottom row
7
Click Submit form
4
Click Reset form
Tip Check out your ISPs instructions for sending a form. Press [F10] and enter the HTML required to complete this task.
113
Summary q A form allows you to gather structured data from your web site visitors. q A form contains a number of fields each field containing a unique data item.
q Embedding a table within a form makes form alignment easy. q A text field is the most common form field.
q The menu/list field allows selection from a list of alternatives. q Radio buttons allow a single choice to be made from a group.
q A checkbox is used to gather yes/no type questions. q Buttons are used to send form data to you via your ISP server.
Library items allow you to make a part of a web page reusable. A library item is simply a piece of HTML code, a web page in essence, that is created once and then replicated throughout a number of web pages. Library items are very useful for creating elements such as a copyright notice or a navigation bar that might exist on every web page in a web site and which might require regular alteration.
4
1 2
Select the navigation bar
3 4 4
Select New Library Item
5 6
Open the Library panel by selecting Library from the Window menu.
Create a page that consist of a simple navigation bar, with links to the pages in your site, to be displayed at the bottom of each page.
Select the new navigation bar. In the Library panel select New Library Item.
Name the library item. Press [Enter].
Take note
5 116
Name the item
The Assets panel is a neat way of keeping together useful web page additions such as library items. Press [F11] to display the panel.
Basic steps
Inserting a library item
1 2
Once you have created a library item you will want to insert it into a web page.
3 4 5
Open a web page.
Place the cursor where the item is to go.
Take note
Use Window > Library to show the Library panel.
If you right-click in the top right corner of the library panel, a pop-up menu will open. You can also insert items from here.
Select the item.
Click the Insert button.
q The item is inserted in the page at the cursor.
1
Create a web page
3
2
Place your cursor
Show the Library panel
4
Click on the item
Take note Dreamweaver creates a folder called library in the current site for storing library items. A library item has the extension .lib.
5
Click on Insert
117
Amending an item
Basic steps
Amending a library item really illustrates the benefit of using these items. By making changes to the library items, these changes will be updated in every page that uses the item.
3
Make your changes
1 2 3 4
2
Double-click the item
5 6
5
Launch the Library panel.
Double-click on the required library item.
Make any changes to the library item.
From the File menu, select Save.
Click the Update button to update all pages currently using the library item. Note the statistics shown.
Click on Update
Tip 6
118
Note the statistics
You can open an item in the Library panel by clicking the Open Library Item button .
Deleting an item
Basic steps 1 2 3
Open the Library panel.
Right-click on the item to be deleted.
Select Delete and click Yes to confirm at the prompt.
q Detaching an item
4 5 6
Open a web page that includes a library item.
Library items can be deleted. Before deleting a library item, ensure that no web pages need to use it. If you delete an item, any pages that use it will operate as normal. The item portion simply becomes included as standard HTML in each web page.
Detaching a library item
A library item can be detached from its original source. It then simply becomes a normal part of the web page in which it exists.
2
Right-click on the item
Select the library item.
In the Property Inspector click Detach from Original.
4
3
Open a web page
6
Select Delete
Select Detach from Original
119
Templates
Basic steps
Templates are a great way to ensure that all pages in your web site conform to a standard design. A template sets up various elements of your web site such as colours and fonts that need to remain constant. Templates are a great tool to use if more than one person is developing your web site. Templates encourage consistency. In this example, an existing web page is set up as a template to be used throughout a web site.
1
Open a web page
1 2 3 4
Open the web page to be used as a template. From the File menu select Save as Template.
Give the template a suitable name. Click Save.
2
Editable regions
4 3 120
Name the template
Click Save
Use File > Save as Template...
Editable regions
Basic steps 1 2 3 4 5 6 7
From the Windows menu select Templates. Double-click on a template to open it.
By default, a template cannot be edited. This, you might image, renders it completely useless as no new web pages could be cloned from it. To use a template effectively, you must first setup editable regions.
Select an area to make it an editable region.
From the Modify menu, select Templates, then New Editable Region.
1
Name the region.
From the Window menu select Templates
Click OK.
From the File menu, select Save.
3
2
Double-click on a Template
Select an area to edit
4 5
Select New Editable Region...
Name the region
6
Click OK
121
Using a template
Basic steps
Once you have created a template and created editable regions you can use the template to create new web pages.
1
From the File menu, select New from Template.
2 1
Select New from Template...
3
2
Select a template
Take note A light blue border identifies editable regions in a template. Each region has a unique name in the tab at its top left hand corner.
122
Select the template to use.
3 4
Click Select.
Type suitable text in any editable region(s).
5
From the File menu, select Save.
Click on Select
Take note If you delete a template any pages that use it will operate normally.
Basic steps q Deleting a template
1 2 3
Open the Template panel. Right-click on the template.
Select Delete and click Yes at the prompt.
Deleting a template Templates can be deleted. However, before deleting a template, ensure that no web pages need to use it.
Detaching a template
A web page based on a template can have the template removed making the page a simple web page which can be fully edited.
q Detaching a template
4 5
6
Open a web page created using a template.
5
From the Modify menu, select Templates, then Detach from Template.
Select Templates then Detach from Template
Save the web page as normal.
Tip You can also delete a template by clicking the trash can icon at the bottom right hand corner of the Templates panel.
Take note Deleting a template has no effect on web pages created using it. However, you still need to detach it from these pages otherwise the editable regions remain, giving the impression that they are still attached to the deleted template.
123
Summary q Library items allow you to replicate a piece of HTML code to enable easy editing and updating. q A library item is a special type of web page. q Library items can be amended.
q Updated library items change all web pages where the library item is included. q Library items can be deleted.
q Library items can be detached and become a normal part of a web page. q Templates allow standard design elements to be applied to all pages of a web site. q A template has both editable and non-editable regions.
q Once created, a new web page can be created based on a template. q A template can be deleted.
q A web page can be detached from the template it was created from. After removal, the web page operates normally.
124
11 Going online Publishing your web site . . . . . . 126
Uploading web pages . . . . . . . . 127 Future web site uploads . . . . . . . 128
Summary . . . . . . . . . . . . . . . . . 130
Publishing your web site
Basic steps
Until now, your web sites and pages have been created and tested locally on your PC using a browser. The final step in the process of creating a web site is to upload it onto the Web itself. This is done using a FTP program (File Transfer Protocol) and Dreamweaver comes with its own built-in FTP utility. To upload files onto the Web, you need permission to access a folder on a remote web server where you can deposit your HTML and graphic files. Most ISPs provide free web space, where you can store your web pages. When you sign up with your ISP you should be given you all the information you need to establish the connection to your web space.
6
8
Enter a host name
Enter a login
9
126
Click OK
2 3 4 5 6 7
Select FTP
8
7
Enter a password
10
5
1
From the Site menu, select Define Sites.
Click on a site to select it. Click Edit.
Select the Remote Info category.
Select FTP in the Access box.
Enter the host name.
Enter the name of the directory where your web site files will be stored. Enter your login name.
9 Enter your password. 10 Click OK. Enter a host directory name
Take note Uploading is passing files to a remote server on the Web, downloading us passing files from the Web to your local PC.
Uploading web pages
Basic steps 1 2
Press [F8] to open the Site window if needed. Click the Connect to remote host button.
q When connected, the Connect to Remote icon is green. The left pane shows the server and the right your local files.
3 4
Now that you have set up all the parameters to ensure that Dreamweaver can access your ISP personal web space, it is time to connect and upload your web site files. Once you have made connection to your ISP web server you can use the Site menu commands to maintain your remote site. This includes being able to create and rename folders and rename and delete files.
Tip
Click the Put Files arrow.
Backup your web site files onto CD or floppy disk for extra safety.
Click OK to upload all files in your local folder.
2
q Note the files as they are being transferred.
Click on Connect
3
4
Click Put files
Click OK
127
Future web site uploads Once you have copied the entire web site from your local drive to the remote server there is no need to update the complete site again. When you make changes to your site you only need to upload those web pages that have changed since the last upload to the web server. Dreamweaver provides a method to enable you to synchronize your local site files with the remote site.
1
From the Site menu select Sychronize...
2
Choose the entire site to sychronize
Basic steps 1 2 3 4 5 6 7
From the Site menu, select Synchronize
In the Synchronize Files dialog box choose to synchronize your entire site. Choose the Put newer files to remote option. Click Preview.
Review the files to be copied to the remote server.
Remove the tick from any files that you do not wish to upload. Click OK.
q Note the updated files
4
Click Preview
Take note You can also use other packages to upload your pages to the Web. CuteFTP and Ipswitch WS_FTP are excellent free FTP software applications.
128
5
Tip If you are a business that expects much regular traffic to your web site, consider using a commercial ISP who will charge for their services but provide guarantees of speed and access times.
6
Review the files
Clear the tick to not upload
7
Click OK
Take note When using the FTP tool, Dreamweaver simply calls your ISP using the details you normally use to surf the Web. You can use this function just as easily after you have dialled your ISP using your normal route.
Tip If you need to download files from your web server (maybe because you are working on a different PC and need a copy of your web site) follow the above steps replacing the Put Files arrow with the Get Files arrow.
129
Summary q Your ISP will provide you with space on the Web to load your web site.
q Your ISP will provide you with logon details to allow you to upload web pages to the Web.
q FTP software applications can also be used to independently transfer web pages to the Web. q In Dreamweaver you put files on the Web and get files from the Web. q Regular file uploads to the Web are achieved by synchronizing your local PC with your web server.
130
12 Advanced features The default settings . . . . . . . . . . 132 Defining the Status bar . . . . . . . 134
The default settings Now that you have been successfully building web pages using Dreamweaver you might want to take some time to set up Dreamweaver to suit your personal needs. Dreamweaver is extremely functional and is very flexible and can be set up in a number of different ways.
General preferences
Dreamweavers general preferences are used to determine the overall operation of the package. You should decide how best to set these options. To open this dialog box select Preferences from the Edit menu. Turn on to replace the blank document at start-up with the Site window
A read-only file is one that cannot be edited and saved again.
Turn on to be able to see multiple documents open on the screen Turn on to be alerted when a read-only file is opened
Turn on to add extensions automatically. Set the default extension for HTML files (.HTML or .HTM)
Turn on to get prompted to add additional useful information when adding objects from the Objects panel Leave these at their defaults
Turn on this to ensure that data being added to tables is completed quicker with formatting carried out when you are finished with the table
132
Take note
Choose the English dictionary
Basic steps 1 2 3 4 5
6
From the Edit menu, select Preferences. Select the Preview in Browsers category.
Default browser settings Visitors to your web sites will use different browsers and different versions of these browsers. Dreamweaver allows you to set up a number of browsers in the application to enable you to test your web site with different browsers.
Click the [+] sign. This allows you to name and select an additional browser application.
3
4
Click on []
5
Click on a browser
Click on [+]
Click the [] sign. This allows you to delete the link to the selected browser.
Click on a browser to select it. Tick the primary or secondary browser box to determine your browser choice preference. Click OK.
2
Select Preview in Browser
6
Click OK
Take note You can browse your web pages using a local server. To do this you must have software loaded that enables your PC to act as a web server.
133
Defining the Status bar The status bar provides information concerning screen size, and estimated speed to load the displayed web page using a particular modem speed. You can also show the Launcher in the bottom right hand corner of the Status bar.
3
2
Page Properties
3
Choose a speed
Click OK
The page properties menu option allows you to set the page title, background image, text colour and link colour for the web page as well as page margins. Spend some time looking through the available settings.
134
2
5
Show the Launcher?
6
1
4
Select Status Bar
4 5
Define the size
Basic steps
6
From the Edit menu, select Preferences. Select the Status Bar category. In the Window Sizes area click on a new line and define the size.
Open the Connection Speed drop down list and choose a speed.
Click the Show Launcher in Status Bar to display popular tasks in the Status bar. Click OK.
Flash buttons
Basic steps 1 Or
2
3 4 5 6 7 8 9
From the Common Objects, click Insert Flash Button. Open the Insert menu and select Interactive Image.
Flash is Macromedias animation package that is used to really bring web pages to life. A Flash button displays an animated effect when you place your mouse over it. Dreamweaver comes with a library of preset designs that makes creating Flash buttons a real breeze!
1
Select a button style.
Enter some button text.
Click on Insert Flash Button
Choose a font.
3
Choose a font size.
Point to the web page to be linked to.
Select a button
Choose the target window for the page. Click OK.
7
4
Enter the text
Select the page to load
Tip
8
Choose a target window
The Flash button styles include some great e-commerce examples. Have a look at these for future use once youve mastered web design using Dreamweaver.
135
Rollover images
Basic steps
A rollover image has one image that displays when viewed statically and another when the mouse is placed over it, e.g. it might change colour when the mouse is rolled over it. l
Use an image-editing package to amend an image to change its appearance in some way. The rollover image should be the same dimensions as the original.
2
Click on Insert Rollover Image
3
1 2 3
Name the image
4 5 6
4
Choose static image file
6
Enter a link
Take note Rollover images can be used to create buttons, but you will probably find that Flash buttons are easier to create and often more effective.
136
5
Choose rollover image file
7
Position your cursor where the rollover image is to be placed.
From the Common objects category in the objects panel, click Insert Rollover Image. Give the image a suitable name. Choose the static image file.
Choose the rollover image file.
Enter a link if you require an action to be instigated when you press the rollover button. Click OK.
q Test your button by pressing [F12].
Behaviors
Basic steps 1 2 3 4 5 6
From the Window menu, select Behaviors.
Click the [+] icon to add a Behavior.
Select Set Text then Set Text of Status Bar. Enter the text to be displayed. Click OK.
Behaviors are extensions to Dreamweaver that allow visitors to experience greater interaction with your web site. When you run a behavior, a piece of JavaScript is executed. Behaviors come in two parts: an event (something that triggers the Behavior) and a resulting action. A good example of a Behavior is the clicking of a button on a web page. Clicking the button is the event and loading a web page is the action. Behaviors allow you to really extend the boundaries of your web design activities. The status bar can be used to display a message to your visitor. A behavior exists that allows you to define and display a statement in the status bar of the active web page. Try it!
Press [F12] to check the results.
2
3
Take note JavaScript offers extra functionality to HTML pages. Dreamweavers Behaviors use JavaScript in their operation. There is no need to understand JavaScript to use it within Dreamweaver, but if you want to learn more, read JavaScript Made Simple.
Click on [+]
Choose Set Text then Set Text of Status Bar
5
4
Click OK
Enter the text
137
Cascading Style Sheets One of the greatest challenge to web designers is to keep a look and consistency to a web site that is easy to remember and easy to apply to all pages in a site. Style sheets offer a great professional way to easily set the font size, spacing, colour, links colour, headings and other aspects of the style of your web page that can then be applied throughout your site. Style sheets are for the real professional!
Redefining existing HTML tags
As you will know, HTML provides you with a special tag that makes text bold. You can redefine the colour, size and font of this tag by creating a style sheet.
1
Select CSS Styles
4
2
Select the tag to be amended
Basic steps 1 2 3 4 5 6
Amend for the document or the whole site?
Click on the New Style button. Select Redefine HTML Tag.
In the Tag field select a tag to be amended. Choose whether the tag is to be amended in this document only or for the whole site. Click OK.
6
3
Click on New Style
5
From the Window menu select CSS Styles.
Click OK
Select Redefine HTML Tag
Take note When you redefine an HTML tag, the changes are applied to any instances of this tag on the current web page.
138
7 8 9
Name your style sheet and click Save.
7
Amend some elements of the tag (in this case the tag).
Name the sheet and click on Save
Click OK.
8 9
Alter as needed
Click OK
Take note Cascading style sheets are supported by Internet Explorer and Netscape Navigator 4 and above. They can carry out many more complex formatting functions than those illustrated here. Browse through Dreamweavers Help or refer to HTML Made Simple for more on Style Sheets.
139
Linking a web page to a style sheet
Basic steps
Once you have created a style sheet you can attach it to as many web pages as you desire. The formatting options contained in the style sheet will then be applied throughout the web page(s) where the style sheet is attached.
2
3
4
2 3
Select CSS Styles
4 5
Open an existing web page. From the Window menu select CSS Styles. Click Attach Style Sheet.
Choose a style sheet. Click Select.
Click on Attach Style Sheet
Choose a style sheet
5
140
1
Click Select
The History palette
Basic steps 1
Type some text and format it.
2
From the Window menu, select History.
3 Or
4
Move the slider up to undo the formatting. Move the slider down to redo the formatting previously removed.
The History palette lets you see the commands that you have applied to the current web page since opening it. Its like an automatic video camera that has traced your every move. You can use the History palette to quickly retrace your steps within a web page undoing actions previously carried out. You may have formatted some text within a web page a number of times. The History palette shows you the formatting applied to the text and allows you to undo elements of this formatting. Each time you close a web page the palette is cleared. To clear the palette when a web page has not been closed is easy.
q Clearing history
5 6 7
Click on the arrow at the top right of the history panel.
1
Enter some text
Choose the Clear History item.
4
Click on the arrow
5
Select Clear History
When the message is displayed, click OK.
3
Move the slider to undo formatting
Take note Use the Save As command in the History palette menu to save a particular history for later recall.
141
Search engines
Basic steps
Once you have uploaded your finished web site onto the Web, you will want to take steps to ensure that search engines know that your web site exists. By using meta tags you can help search engines easily find and categorise your site. Meta tags are placed in the section of a web page. Many search engines scan the Web on a regular basis looking for new web sites meta tags are the flags that are waved to let these scan programs know that your web site is there just waiting to be included in their listings!
1
2
There are two meta tags that are used to help categorise your site, the Insert Keywords and Insert Description meta tags.
3
Click OK
3 4 5
2
List words that search engines may use to find your site
6
Click OK
6
Select Head Tags from the Insert menu or from the Head category in the Objects panel, then select Keywords.
List the words or phrases that search engine users might use to find your site, separating each word or phrase with a comma. Click OK.
From the Insert menu, select Head Tags then Description. Enter a short description that identifies the purpose of your site. Click OK.
Take note
5 142
Enter a description
Keep the keywords and description short to improve your chances of success with search engines.
Dreamweaver Exchange Whilst Dreamweaver is a very sophisticated web design package that will cover most eventualities, there will be times when you want to try something different or make a complex task easy. Macromedia has created an on-line community where you can download extensions to Dreamweaver written by other users (as well as by Macromedia and partner professionals) just like yourself. You can view these extensions, find out whether they are officially approved, find their rating as well as any comments on their suitability and any known problems concerning their use. You can then download extensions and use these as if they were part of the original Dreamweaver application. Visit the Dreamweaver Exchange at:
Take note Search engines can often take weeks or months to list your web site. This is perfectly normal.
http://www.macromedia.com/exchange/dreamweaver
Some extensions require that you download and install the extension manager. Follow the on-screen guidelines to complete this task before working with extensions.
Tip Whilst meta tags are useful as a general way for your web site to be found by search engines, you can also choose to register your site with individual search engines. Visit the home page of the top search engines and sign your page up manually.
143
Summary q General preferences determine Dreamweavers overall settings.
q Dreamweaver allows you to test your web pages using multiple browsers.
q External HTML and graphic image editors can be set up within Dreamweaver. q Dreamweaver allows you to amend the status bar to show various window sizes and web page loading times using different modem speeds. q Page properties define the web page title, background image, text size, font and other elements.
q A Flash button displays an animated button that can be pressed and carry out an action.
q A rollover image changes when the user rolls his/her mouse over it. q JavaScript extends the functionality of HTML-based web pages. q A Behavior is an extension to Dreamweaver that carries out an enhanced function.
q Cascading style sheets enable web designers to keep the same look and feel to all pages in a web site.
q You can use cascading style sheets to redefine existing HTML tags.
q The History palette lets you see the commands applied to a web page during the current editing session. q Meta tags enable search engines to locate and categorise your web site.
q The Dreamweaver Exchange enables you to download application extensions (free from the Web) written by others for common use.
E-mail links 64 Editable regions on templates 121 Enter key and new lines 32 External editor 89 External image editors 56
F
Feedback forms 107 Fields on a form 107 Filenames 24 Flash buttons 135 Font List 40 Font size 41 Fonts 38 Form objects 6 Formatting in HTML 83 tables 71 Forms 106 and tables 108 Frame objects 6 Frame properties 98 Frames 94 and old browsers 99 Frameset 95
145
Frameset properties 97
G
General preferences 132 GIF 50 Graphic web sites 57
H
Head objects 6 Heading tags 42 Help 14 Help index 15 History palette 141 Home page 23 HTML 28, 82 HTML editors 88 HTML files 24
I
Image software 57 Images 50 alignment 52 as links 65 in HTML 87 resizing 54 rollover 136 Invisible objects 7 Italics 83
J
JPEG 50
L
Launcher in Status Bar 134
146
Launcher bar 8 Layers 100 and tables 103 moving and resizing 102 Layers panel 101 Layout View 7 Library items 116 amending 118 deleting 119 Links 60 in HTML 87
Page Properties 26, 45, 134 Page title 26 Point to File 61 Pre-formatted text 43 Preferences 132 Preferences dialog box 9 Previewing pages 25 Property Inspector 3
R
Radio buttons 111 Reference panel 16 Rollover images 136 Root folder 21 Roundtrip HTML 89
S
Scrolling in frames 98 Search engines 142 Site, defining 21 Site map 11 Site window 22 Space around images 53 Special objects 7 Status bar 9 defining 134 Sychronized uploading 128
T
Table cells merging 74 split 75
Tables 70 in HTML 86 inserting rows or columns 77 predefined formats 72 sorting 76 Tags 83 Templates 120 deleting 123 using 122 Text alignment 42 Text colour 44 Text fields 109
U
Underline 84 Unordered lists 32, 85 Uploading 127
W
Web design 29 Web site, publishing 126 Window Sizes 134 Word HTML 90
