Introducing Dreamweaver 8

Dreamweaver 8 is a easy to use software that allows you to create professional web Pages. The design edition features of Dreamweaver 8 allow you to quickly add objects and functionality to your pages, without having to program the HTML code manually. It's possible to create tables, edit frames, work with layers, insert JavaScript behaviors, etc., in a very simple and visual way. In addition, it includes a complete FTP client software, allowing among other things to work with visual maps of the Web sites, and updating the Web site in the server without leaving the program. If you don't know the basic HTML characteristics you can see them here.

From Dreamweaver MX 2004 to Dreamweaver 8

In this point we will see the main features the new version of Dreamweaver includes: RSS Integration: with Dreamweaver 8 you can integrate RSS feeds from other pages just setting the source and drag-and-droping the fields you want to appear. This way you would insert XML data easily. CSS improvement: in this latest version the compatibility and handling of CSS styles have improved considerably. The CSS styles has been remade for a faster access to the page's style, and includes a new grid from which you will be able to modify the properties of every aspect of the style. Moreover, Dreamweaver 8 adds a new toolbar that helps you to set differents styles deppending on the kind of media the pages is being visualizing (screen, printerm webTV, PDAs...) . Accessibility: Dreamweaver 8 incorporates an evaluation tool that supports the new WCAG/W3C Priority 2 checkpoints. File Transfer: Now with Dreamweaver 8 you could keep on working with your files while the program uploads you recent modified files to your server. Its synchronization has been improved in a way that will allow you to manage the file changes and block/unblock files to avoid overwriting. Improved Interface: The users with visual problems could access to a new Zoom option of the Design View in order to work comfortably and help them to work easily with nested tables. Also the inclusion of rules will help to the measuring of the elements pixel to pixel. New toolbar: A new toolbar has been added in Dreamweaver 8, you will find it in the left side of the Code View, and it will help you to make the code more accessible since it allows us to browse the code by tags or even to collapse them. You can even add comments with just one click! Compatibility: We have to mention also the new added compatibility with PHP%, Coldfusion 8 7 and Video Flash.

Editing a Web Page

1

Any text editor allows you to create web Pages. It's only necessary to create documents with HTML or HTM extensions, there you'll have to include the HTML code that you want. Even the Notepad can be used to do it. Creating Web Pages with a text editor (and thus adding all the HTML code manually) requires more effort than using a graphical editor. If you don't use a graphical editor is much more difficult to insert each one of the elements of the Page, and at the same time it is more complicated to create a professional appearance for the Page. Nowadays a exists. One of emphasized by features that Dreamweaver. wide range of web Page editors the most commonly used, and its simplicity and the numerous it includes, is Macromedia

In addition to Dreamweaver, another series of good Web Pages Editors exists, such as Microsoft FrontPage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer and Arachnophilia, some of which have the advantage of being free.

Planning your site online

In order to be able to upload a web Page to the Internet, it's necessary to hire a web hosting company to make your web site available to others on the internet 24 hours a day. The price to have your own space on their servers will depend on the company, the space on disk you need, the volume of transference and many other options that you can ask for. There are companies that offer this service for free, but with certain limitations: justa a few disk space, slowness and a name for our Page preceded by their own etc... It's also necessary to consider that these companies must generate income in some way it is the reason why they are dedicated to sell advertising spaces within your Pages, ads that we'll not be able to avoid including in our web Pages. For these reasons, it is not recommended to use a free hosting for a bussiness Page, although it is acceptable for a personal one. When we are going to hire a web hosting service it is necessary to also contract a domain, a task which usually is in charge of the hosting company. To register a domain consists of registering a name for our Page. This name cannot be repeated in Internet, has to be unique, as happens with the names of the companies. It's possible to register the same name with different extensions, like for example, .net, .org, .biz or .com. In the case of free hosting it isn't necessary to register a domain, since our Page will not be more than a file within the one of the hired company. At the time of hiring a web hosting service it is also necessary to consider the number of email accounts and if we are going to need a database, although this last one will only be useful for

advanced users.

Starting and closing Dreamweaver 8

Let's see the two basic ways to start Dreamweaver 8.

From the Start button normally located in the bottom left corner of the screen. Place the cursor on the Start button and click, the start menu will open, select All Programs and then another list will appear with the programs that are installed in your computer, look for Macromedia, then select Macromedia Dreamweaver 8, and the program will be opened.

From the Dreamweaver 8 shortcut on the desktop

To close Dreamweaver 8, you can use anyone of the following actions: Click on the close button .

Press the combination of keys ALT+F4. Click on the File menu and then select the Exit option. If ther is a modified document and it has not been saved before closing Dreamweaver, a confirmation will be requested in order to save or not each one of the modified files.

Opening and saving documents

In order to open a document, you can use any one of the following actions: Click on the open button of the standard toolbar.

Press the combination of Ctrl+O keys. Click on the File menu and select the Open option. Double-click on the file in the Files Panel.

In order to open a new document, you can use anyone of the following actions: Click on the new button of the standard toolbar.

Press the combination of keys Ctrl+N. Click on the File menu and select New...

After this a new window will appear, where you will have to choose its Category (usually Basic Page, HTML). In order to save a document, you can use anyone of the following actions:. Click on the save button of the standard toolbar.

Press the combination of keys Ctrl+S. Click on the File menu and select Save. Dreamweaver includes the possibility to save multiple documents, without having to do it one by one. In order to save all you can follow anyone of the following actions: Click on the save all button of the standard toolbar.

Click on the File menu and select Save All. When we have several open documents it's easy to forget all the modifications done in each one of them. You must take care when using the Save all option, since sometimes it's possible not to wish to keep the changes in all modified documents. For that reason it is advisable that at least you don't use this option in the beginning, until you have become more experienced in handling the program. So now that you have an idea of how Dreamweaver works, we're going to create a simple web Page, with several text styles, an image, and a link to another Page. To create this single Page will take you a few minutes, and you will know how to work with the basic elements with which most Web Pages are made. If you have never made a Web Page, this is the moment to discover how easy it is.

My first Page

The first thing you need to do is to open Dreamweaver. You have already seen how to do this in the previous Page. Then open a new document and select the Category Basic Page, HTML. Next, type the text that appears in the following image in the blank document.

Once you type the text, we're going to modify the title and the background color of the document. For this you must click on the Modify menu and select the Page Properties option. Then a window will be opened like the one appearing below.

Change the title for My first page. In Background color type #CCCCFF, this way the background color of the document will be blue. Next, click on the OK button. Now you are going to insert an image. For this, it has to be accessible in your hard drive, on a CD-ROM, or a floppy disk, but preferably in the hard drive. Many of the images that we see in the Internet can be copied to your hard drive. By rightclicking on the image a window opens with the option to Save image as... (it depends on the browser that you use, but it will be similar). That allows you to save this image in a file on your hard drive. In the most modern browsers when placing the cursor over an image these icons appear in a corner of the image, if you click in the icon of the floppy the same menu Save image as... will appear, which we previously have made reference to. Copy the image that appears next, so you can insert it later in the web Page that we're creating. You can keep it, for example, in My Documents folder. Now we're going to change the format of the text. For this you need to visualize the properties inspector, normally found in the inferior part of the window, and has the following aspect:

If it doesn't show, you can view it through the Window menu, and clicking on the Properties option. If only the title of the panel is displayed, it is because it's contracted. To expand the panel click on the button , next to the name. Select the first line of text and change the Format to "Heading 1" and color to "#404890", the way it is in the following image.

After this, the appearance of the first line will have changed. Now select the image and the two

last lines of text. Click on the

button to center them.

Once you have centered the image and the two other lines, select the second line of text that has not yet been modified. Change the Format to "Heading 3", click once on the click three times on the button. button and

Select the last line again, and in Link type "http://www.teacherclick.com", to create a link to this Page:

Finally, save the document. You already know that you can do it through the File menu,and then selecting the Save option. You can name the document as you wish, but consider that the extension has to be htm or html. For example, you can call it "test1.htm".

After all these steps, you can see the Page with the new Format by pressing the F12 key.

Unit 2. The Dreamweaver Interface

We're going to see which are the basic elements of Dreamweaver 8: screen, bars, panels, etc, also we will learn to know how to differentiate between each one of them. We'll learn how they are called, where they are and what they are used for. We'll also see how to obtain help, in case that at some moment we don't know how to continue working. When we know all this we'll be ready to begin to create web Pages.

The initial screen

When we start Dreamweaver an initial screen appears like this one, we're going to look at its fundamental components. We will list the names of the different elements so it will be easier to understand the rest of the course. The screen that is next (and in general all those of this course) does possibly not coincide exactly with what you see in your computer, since each user can decide what elements they want to see at every moment, as we'll see ahead.

The tool bars

Title bar

The title bar contains the name of the program (Marcromedia Dreamweaver 8) and the name of the document we are working with, between parenthesis you can see the name of the file format this file is codified. At the end on the right are the buttons to minimize, maximize/restore and close the program. Menu bar

The menu bar contains Dreamweaver operations, grouped in drop down menus. When we click on Insert, for example, we'll see the operations related to the different elements that can be inserted in Dreamweaver. Many of the operations can be done from these menus, but sometimes it's preferable (or compulsory) to do them from the panels. The Standard ToolBar

The standard toolbar contains icons to execute some of the most habitual operations immediatelly, like Open , Save , etc.

The document toolbar

The document toolbar contains icons to execute some other habitual operations that the standard toolbar doesn't include. These operations are for example changing the view of the document, preview, etc. The status bar

The status bar shows us in every moment the HTML tag we are in (in the image, as we are in a blank document, we are directly on the <body> tag). We also can swich between the selection, drag and zoom modes using the three buttons on the right. You can select the zoom which you want to view the Design View selecting a percentage or just tipying it on the percentage textbox (the default is 100%).

Panels and Inspectors

Dreamweaver uses floating windows similar to the toolbar ones, these are known as panels or inspectors. The difference between panel and inspector is that, in general, the appearance and options of an inspector changes depending on the selected object. Through the Window option on the menu bar, it's possible to show or to hide each one of the panels or inspectors. We're going to look at the most important ones. The Properties inspector

The Properties inspector shows and allows us to modify the more frequent properties that are used in the selected elements. For example, when we select element a text it will show the type of font, the alignment, whether it's in italic or bold, etc. Clicking on the button corner. you can unfold more options. This button is in the bottom-right

It will surely be the tool that you are going to use most in Dreamweaver. The insert toolbar or panel of objects.

The insert toolbar or panel of objects allows you to insert elements in a document without having to use the menu. The elements are classified according to their category: tables, text, forms, etc. It's possible to configure this panel so that the icons of the objects are shown as buttons (in

10

the previous image), as names, or both simultaneously.

Document views
You can change the view of the document through the document toolbar.

Design View The Design view allows you to work with the visual editor. It's the default view of Dreamweaver and the one that is used most of the time.

The code View

The Code view is used to be able to work totally in code programming mode. It doesn't allow you to directly have a visual reference of how the document is being shown according to the way the code is modified.

11

The Split view The Split view allows you to divide the window in two zones. The top area shows the source code, and the bottom, the visual editor. When a change is made in one of the zones, this change is applied directly on the other.

12

The Help Guide

Through the Help menu you can:

Go to the help dialog which is very similar to the one of Windows, where you can search by subject, index, or content. You can select the Using Dreamweaver option or press F1. Open tutorials (Getting Started and Tutorials option). Open the Reference panel in which you will find the syntax and the description of HTML tags. Go to the Dreamweaver Support Center in the Macromedia Web. Go to the Macromedia Online Forums.

13

Unit 3. Defining a site

In this section we're going to see what a web site is, how to create one and to manage it. Also we will see how to modify the document properties.

Introduction
A web site is a Set of archives and folders, related to each other, and with a similar design or common objective. It's necessary to design and to plan the Web Site before creating the Pages that are going to be contained in this Web Site. The traditional way of making a site consists in creating A folder in local drive. HTML documents are usually created in this folder, whereas to contain the images, the animations, the style sheets, etc. new folders within this one are due to be created with the objective to have a better organization of the archives at the time of working. This is what is known as a Local site. Then we will be able to copy the archives in a web server, in the named Remote site, which is equivalent to publishing the site, so that people will be able to see it in the Internet. The organization of the archives in a site allows the administrator to share archives, automatically check the links, and use FTP to load the local site onto the server, etc. It's convenient that the home Page of the site has the name index.htm or index.html, because the browsers look for a Page with that name when they try to access a generic URL. For example, if we wrote a generic direction like http://www.teacherclick.com in a browser, this one would try to load the Page http://www.teacherclick.com/index.htm, and so an error would take place in case any Page with the name index.htm doesn't exist.

Creating and publishing a Website

Once the folders that compose a local site are created, it's possible to define the site in Dreamweaver. So, go to Site menu, and select the Manage Sites... option. Remember that through the Files panel, in its Files tab, it's possible to access each one of the created sites and the Manage Sites option.

14

In the case of having selected the Manage sites option, a window will appear containing the list of local sites previously defined. Of course, several local sites in a same computer can exist. If the New option is chosen, or if the Edit option is chosen, it will show the same window where the characteristics of the site will be defined.

15

The characteristics of the site are grouped in different categories located on the left. To visualize the characteristics of a Category you just have to select it by clicking on it. Let's look at the data to edit for the Local Info category. Site name has to be defined, and also a Local root folder, which is where you find the site in the local hard drive. Then, if it's required, through the Site Map Layout category you can define the home Page of the site, of which the rest of the HTML documents inside the site will depend. If there is a Page in the root folder of the site with the name index.htm or index.html, Dreamweaver will select it by default. These three characteristics are essential when you are defining a local site. We're not interested in the other options at this stage because we're focusing on defining the local site, and it isn't necessary to establish the server data located in the remote site.

16

After filling in all the data, click on the OK button and open the site. If we would rather use the Wizard to create the web site, we just have to select the Basics tab instead of Advanced tab.

Opening a site
To open a site previously defined you have to go to the Site menu, then click on the Manage sites... option, then select the site out of the site list and click the Done button. We could use the Files panel too. Look for the site in the drop down menu of the Files tab and select it to open it. If you want, you can look to an example of how to configure the remote site .

Document views
It's possible to visualize a site in the Files panel or in a window. Files panel can be opened through the Window menu, and then clicking on the Files option. Or by pressing F8. To change the views you have to press the button, located in the upper side of the panel.

At the same time, you can visualize the local site, the test remote server, or the site map. In this image there is a view of the site map and the local site. In this case test1.htm and test2.htm documents are linked to the index.htm document, because this has been defined as the site home Page and its contents link it to the other two.

17

If the files move through folders, or they change their names outside Dreamwaver, the Pages will not be correctly displayed. You will not see the images, the links will not work, etc... But if these modifications are done inside Dreamweaver or through the site, the program will update the Pages automatically. So Dreamweaver will avoid this errors if a file referenced to an object that has changed. When you edit an object that is referenced to another document, it will be shown in a window (see the image), which indicates the documents that have references to this object, and offers the option to update them to avoid the errors. Just click on Update.

18

Documents properties
It's recommendable to define homogenous sites, this means that all the Pages of a site have to follow the same format, like having the same background color, the same font, etc... You can define each Page format through Page properties. You can open the window in three different ways: Pressing the Ctrl+J keys. Click on the Modify menu and select the Page Properties option. Right-click on the bottom of the Page. It will appear at the end of the contextual menu the Page Properties option. And this dialogue window will appear.

19

In Appearance category, as you saw in the previous image, we find the properties: Background image: Allows to specify a background image for the document. This image appears repeated. At the moment of selecting a background image it's important to notice that according to the image colors it will be necessary to establish some specific color for the text. It is not recommendable to have an animated gif as a background. Background color: Allows to specify a background color for the document, but this color will only show up in the case the background color was not established. Size: is used to define the font size. Text color: is the font color. Margins: Allow us to establish margins in the document. Left and top margins only work with

20

Microsoft Internet Explorer, while the margin width and height only work with Netscape Navigator. None of those margins are in Dreamweaver document window, they are only shown in the browser. The properties are organized by categories, in the Title/Codification category we find the properties: Title: This is the document's title. It's in the browser's title and in the Dreamweaver document window.

In Links we find the next properties:

Link color: is the link color which helps the users to distinguish between normal text and the links connected to other Pages. Visited links: is the visited link color, which lets the user distinguish between visited and unvisited links. Active links: is the active links color. Underline style: When we have a linked text, the text is underlined by default, with this option we can use another type of style, for example not to underline the word.

In the Tracing image category we find the following properties: Tracing image: It allows us to establish an image as the document's background, but it will only appear in the Dreamweaver document window and never in a browser. This image is used

21

as a graphic template to create the document. Transparency: Allows us to establish the Tracing image's opacity.

22

The color palette

To assign colors you need to unfold a Color palette like this one. When you select a color from those in the color palettes, the hexadecimal value of the color is shown in the top left corner. Dreamweaver color palettes use a 256 color palette for the web. These are the colors in Microsoft Internet Explorer and in Netscape Navigator, as well as in Windows and Macintosh. You can customize colors through upper right corner of the palette. You can assign colors through the button, in the

buttons.

These buttons appear in the properties inspector of many objects, and also in many windows which let you specify properties (text properties, bottom or tables), like the Page properties window shown before. The color can be inserted in two ways. One of these ways is by clicking on the gray tab , to display the Color palette. The other way is introducing the hexadecimal number of the color directly into the filed. For example, if in the Color palette we select the blue color with #3399FF value, the color would remain like this: ,

To practice you can perform the Step by step exercise in Creating a new document and modifying its properties. You have to be careful of not creating Pages that take too much time to download in the browser. To see how to verify the documents size, click here .

23

Unit 4. Working with text

In this unit we'll learn how to change the text properties and to create CSS styles, that will allows us to assign styles to our texts.

Text Format
The Selected text format can be defined through the Text menu, and through the Properties inspector. We'll see the alternatives offered by the Properties inspector, although they are less than the ones the Text menu offers.

Format: Here we'll select a paragraph format previously designed for HTML, it can be header, paragraph or pre-formatted. The headings are used to establish titles inside a document. The preformatted format works to make the text appear such as it has been written. For example, if between two words you introduce many spaces they will be considered as only one but when you establish the preformatted format, the spaces will not be changed. Font: Lets you select a set of fonts. There are fonts sets instead of only one, because it's possible that if you set just one font, the user could not have that font in their PC. So, if you select a set of fonts, if the user doesn't have one of them, another is would be applied from the set. For example, if we choose Arial, Helvetia,Sans-serif, we'll see the text with Arial font, but if it doesn't exist in our computer, we'll see the text in Helvetia, and so on. Size: Lets you change the text size. We can indicate the size in different units, such as pixels, centimeters, etc.. Color: Lets you select the font color, ignoring the defined color in the Page properties. If no color has been established here or in the Page properties, the text color will be black by default.

24

Style: These buttons let you establish whether the text will be bold or italic. Through the Text menu you can underline the text and do many other things. This option isn't in the Properties panel. It's rarely used because links are underlined, and thus, underlining normal text could make users think it's a link. Align: Through these buttons it's possible to establish the text aligment in four different ways: left, center, right and justified. List: These buttons allow you to create bullet lists, or enumerated ones. Text indent: These two buttons let you set, or clear the text indent. The text indent is a kind of margin which is established at both sides of a text. In this case, buttons are referred to the text left indent. To practice you can perform the Step by step exercises to insert text and modify it's properties

Creating Lists
You can insert text in a list mode. and this list can be enumerated or with bullets. To make a list from a previously introduced text in the document, you just have to select it and click on the right list option, through the Properties inspector, or through the Text menu. The bullet list (unordered) is selected through the (ordered) is selected through the button. Example of a list with bullets (unordered): button, while the enumerated list

Example of a enumerated list (ordered):

1. Pack the bag 1. Pull out the books of that day 2. Introduce the books of the next day Put on my pijamas Brush my teeth Turn on the alarm

2. 3. 4.

Dog Cat Birds

o o
Hamster

Canary Parrot

25

To establish lists nested inside others, such as the previous examples, you need to add a text indent to the elements of the list you want to be part of the nested list. Through the Text menu, and then the List option, it's possible to access the properties of the selected list. You need to previously select the text list or have the cursor in any part of the list to activate this submenu. In the List properties window you can specify the list types (with numbers or bullets), the type of the numbers or bullets you will use (in the Style field), and in case of ordered lists, the number where the count starts.

To practice you can perform the Step by step exercise to Create a list.

CSS Styles
In the Text menu, select the Style option, there are a set of predefined styles that can be applied to the selected text. You can define another set of styles, applicable to paragraphs or selected words. These new styles, called CSS Styles, are used to combine a set of text attributes - they can be the color or the size; so isn't necessary to assign those atributtes one by one each time you want to repeat the assigning of these same values or other parts of the text. Many of these options can be used as well to define image attributes, or other characteristics that are not available from HTML tags, like the background color for the text, etc. They even allow you to apply a style in all of the HTML labels of the same type, for example the A HREF label, which corresponds to hyperlinks. This way, all hyperlinks would acquire a defined appearance in this style. A CSS style is no more than a set of format rules that controls the aspect of a web site's content. CSS styles give flexibility and control to the view you are looking for in a Page, from the exact position of the elements to the font designs and specified styles. One of the big advantages of CSS styles is that they have a simply updating capacity; when you update a CSS style, the format of all the documents with that style are automatically

26

updated. The disadvantage of working with style sheets is that some browsers cannot support them, although these browsers are usually older versions, and so this will rarely happen. The characteristics we apply to a text automatically creates CSS styles, which are inlayed in the actual document's heading. Let's see that: To create a personalized CSS Style: 1. In the document, select the text you want to apply the specific characteristics to. 2. In the Properties inspector, modify the text format properties, and establish the font attributes, and the paragraph you want. Dreamweaver will automatically create a new style with the name Style1 or Style2 or Style3,... depending on the previous created names and styles. It will appear as the name: Style1 in the Style window of properties panel.

You can also change the name of the style, it's preferable to the style to have a name referring to the type of text to which it will be applied. To do this, unfold the style list and select the Change name... option. A dialog window will appear to introduce the new name as the image below.

Then write the new name without blank spaces. In this case: redstyle. Click on OK, and you will see a panel with the name Results. Close this window. This way you can create a style and add it to a document. Each new style that is created is added to the style list, and you can access them quickly through the Text menu, and then selecting the CSS Styles option.

27

In the CSS panel you can verify that the new style has been automatically added.

Now, you have a paragraph in which the previous CSS style has been applied.

Class Style Text

In the Page's HTML code, the text is like this : <head> <style type="text/css">

28

<!-.redstyle { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #FF0000; } --> </style> </head>

<body> <p class="redstyle">CSS Style Text</p> To apply a personalized CSS Style: In the document, select the text to which you want to apply the CSS style, or place the mouse in a paragraph to apply the style to the whole paragraph. If you select a text rank inside a paragraph, the CSS Style will only affect the selected rank. In the Properties Inspector select the style created by us from the list that appears when you unfold the Style field. To practice, you can do Step by step exercise to Create a CSS style.

29

Unit 5. Establishing Web Links

Now we are going to see what web links are, what are they used for and how to create them, as they are an essential element for any web site.

Introduction
A hyperlink or link, is just a connection that redirects you to another Page or file when you click on it. You can assign a link to a text, to an image, or to part of an image.

Types of links
There are different types of access paths when you are defining a link. Absolute reference : Drives you to an external location from the site where the file is. The location must be in the internet, for example: "http://www.teacherclick.com". Relative reference to the site: Drives you to a file located inside the site of the actual file location. Relative reference to the file: It drives you to a file located inside the same site of the actual document, but starting in the directory in which the actual file is. Anchors: It drives you to an anchor inside a file, which can be the current one or any other. To do this, the link might be "name_of_file.extension#name_of_anchor".The anchor is defined inside a file through Insert menu, and then selecting the Named Anchor option.

Creating links
The easiest way to create a link is through the properties inspector. To do this you have to select the text or the object which is going to be used as a link, and then you must establish the Link in the inspector. For example, here there is a link to www.teacherclick.com, which will be an absolute reference, so, it must contain HTTP://

30

Another way to create a link is through the Insert menu, and then selecting the Hyperlink option. It's possible to create empty links, they can be useful when you use behaviors, etc. You just need to write in Link only the # symbol.. Other way to create a hyperlink is through the menu Insert, Hyperlink option.

Creating links in this way is very easy, you only have to fill the fields we will now explain and the link will be placed where the cursor is. Text: stands fot the text that the link will show. Link: is the page you are making the hyperlink to. Target: the page where you want the link to be opened. Title: its use is almost the same than the Alt attribute of the images. It is the contextual help of the link. Access key: you can set here a key to increase the accessibility of your site. This link will be accessible presing the Alt key and then the key you type in this field. Tab index : as long as you can jump from a link to another using the Tab key, you can set here the order of priority this link will have.

Link Target
The link target determines in which window the linked Page it's going to be opened, it can

31

change depending on the frames of the actual file. It can be specified in properties inspector through Target, or through the Insert menu, and then clicking on the Hyperlink option. _blank: It opens the linked file in a new browser's window. _parent: It opens the linked file in the frame window that contains the link or the set of parent frames. _self: It's the default option. It opens the linked file in the same frame or window as the link. _top: It opens the linked document in the whole browser's window. Don't worry if you don't completely understand the functions of each of those destiny options, we'll check them again in the Frames theme. To practice you can perform the Step by step exercise to Create a web link.

Link format
In general, text with a link associated appears underlined. At the same time, it can be displayed in three different colors, and these can be specified through the Page properties.These three different colors are assigned to the link (the first time you see it), to the active link and to the visited one. Here is an example: www.teacherclick.com When the link is defined over an image, you can see a dotted outline when you click on it. When the link is defined over an image zone (map), you can see the outline of this zone in the Dreamweaver design view. The following images are examples:

32

As you can see, the second image link has an square around it. This is because the Border field on the properties inspector of the image, has a value of 1. For the first image it's 0. The Border field allows you to add a border to an image, independently of whether this is going to contain a link or not. If you choose 0, you won't see any border, because this indicates that the line's width of the outline is 0. You can make a thicker outline by increasing the value of the Border field.

If the link is associated to a text or an image, the pointer changes its shape when it's placed over the link. It again takes the shape of a pointing hand.

Linking to an e-mail
You can specify links for e-mail addresses too. This is useful when you want web users to contact you. The sintax of the link in this case is mailto:e-mailaddress. It can be defined through the Link option of the properties inspector, having previously selected the desired linked text or image. It's also possible through the Insert menu, and then selecting the Email link option. In this case it is not possible to assign the link to an image, it only allows us to introduce the text which will contain the e-mail link. To practice you can perform the Step by step exercise on Creating an email link.

33

Unit 6. Inserting Images

In this unit we're going to see how to insert images in a document. We'll also see how to create some special images, such as the case of Rollovers and flash buttons, which help to improve the appearance of our web page.

Introduction
All web sites have a certain number of pages that allow you to improve their look, or just to add more visual information. There are a set of formats more recommendable than others to be introduced in a web site. You can consult this information here .

Inserting an image
To insert an image go to the Insert menu, and then select the Image option. After this it's possible to select an image in the next window:

If for any reason you need to insert a BMP, it will not appear unless you select All the files in the Type field.

34

In the Relative to option you can specify whether the image will be relative to the document or to the site root folder. It's better if it's relative to the Document because if you move the site to a different location you may not see the image. The path where the image is will be in the URL field of the window, and later in the SRC field of the properties inspector. The way this path will be inserted will depend on whether it has been inserted as relative to the root folder, or to the document. For example, imagine that the images folder and the document in which we want to insert the image is inside the root folder. An image, called teacherclick.jpg is inside the images folder. In case of inserting the image as relative to the Document, the path would be: images/teacherclick.jpg So, in case of it being inserted relative to the Site Root the path would be: /images/teacherclick.jpg It's just like when you create a hyperlink to a file related to the document or to the site root folder. If you insert a BMP into a document, this will not be correctly shown in Dreamweaver, although it does in the browser. In Dreamweaver it will be shown like this : This is the same image that appears in Dreamweaver when an inserted image isn't found. This will happen if you have modified the name of the image, or if you have moved it to another directory. In this case, the image you will see in the browser will be like this:

It's a blank square with a red X, next to the image name or the contents of the Alt field in the properties inspector. To practice you can perform the Step by step exercise on Inserting an image.

Changing the image size

Inside Dreamweaver the size of the images can be modified. This size change isn't directly applied to the image file, but the view changes inside the page. It's very probable for the quality of the resulting image to be lower than if we modify it in an external editor, such as Fireworks. For example, we'll see what happens if we insert an image that represents the Dreamweaver icon and we modify its size in many ways:

35

original Image

modified size image

You can see the quality of the result. But occassionally it can be useful modifying the size of some images although this implicates losing quality. There are two ways to modify the size. The first of these is to select the image and drag one of the black squares that sorrounds the image. The other way is through the properties inspector, by changing the fields W (wide) or H (height). These fields will be shown in the inspector when an image is selected. Remember that when you change the aligment of an image you need to do this through the field Align option of the properties inspector. The image alignment offers more possibilities than the text: top, middle, absolute middle, baseline, etc... You can create links and behaviors in parts of an image, instead of in the complete image. This is known as Image map. This information can be seen here .

Inserting Rollover Image.

A rollover is an image replace by another when the mouse is over it. This kind of image is used on menus and buttons. Here, there is an example of a rollover. Point at it to see what happens.

If you want to insert a rollover, you need to go to Insert menu, Image objects, and then Rollover Image. In the new window specify the original image and the one that will substitute the former.

36

It's preferable to activate the Preload rollover image option. If it's active, the rollover image loads when the page loads, so we avoid a download delay when we're over the image. The Alternate Text is the text you will see when you place the mouse over the image, or the text that will show up when of the image cannot be shown in the browser. Alternate text can be assigned to all images, not only to rollovers. You can do this through the Alt field in the Properties inspector of the selected image.

Flash Buttons
There is another set of special images similar to rollovers that are used to create menus, these are the Flash buttons. To insert a flash button you need to go to the Insert menu, Media, and Flash Button option, and you will see this dialogue box:

37

Through Style you can select one of the button formats offered. In this window you have to set the text that will be shown in the button (Button text:), the name of the object in order to be saved (Save as:) and the associated link (Link: and Target:). It's better to save Flash buttons in the same directory of the HTML files, instead of the assigned folder for images. If you don't do this it is possible that the button doesn't work propperly if the url is not an absolute one (because if it is relative and the button is saved in the images folder the URL must be relative to that path). Remember that buttons will be saved with a SWF extension. Through the Properties inspector of the flash button, you can edit its attributes again:

The dialog window can be opened by clicking on the Edit button, and through the Play button you can check the button status from Dreamweaver whithout it being necessary to open a browser's page. After testing the flash button status, you need to click again on the Play button (which will have changed to a Stop button) .

38

To practice you can perform the Step by step exercise on Creating Flash buttons.

Flash text
Flash text is like the rollover, but instead of interchanging images, it interchanges the color of the text. To insert a flash text you need to go to the Insert menu, Media, and Flash Text.

In the new window, set to the text, the link, and the name for the text and specify the original color as well as the rollover color.

The properties inspector for the flash text is the same that the one for the flash button.

The Navigation bar

39

A navigation bar is a set of images that are used like menu options to browse within the WebSite. A single web page can contain only one navigation bar. To insert a browser bar go to the Insert menu, Image Objects, and the Navigation Bar option. In the next window you can specify four different images for each state of each button as well as its link.

40

Through the buttons in the top of the window you can create or clear buttons on the navigation bar. With and with you can create a new button, with you clear the selected button, you can modify the position of the selected button.

Next, there is an example of a navigation bar. To create it, the same images have been used for all the buttons, but, as you can see, the middle button has a different image than the other two. This is because the option Show "Down image" initially was activated for this button. Place the pointer over the buttons and click to see what happens.

There are four different states, something that you can't do with a rollover. Through the Insert option it's possible to set if the buttons will be organized horizontally or vertically in the Page.

41

Unit 7. Setting up Tables

In this unit we're going to see how to work with tables. We'll learn how to insert tables, combine cells, insert rows or columns, and how to change the border size.

Introduction
All objects are aligned on the left side of the web site by default. But thanks to the tables it's possible to distribute the text in columns, place the images next to a text block, and many more things we could not do without the tables. At the moment most web sites are based in tables, and this is because they are very useful to improve the design options. Tables are composed of a set of cells and are distributed in rows and columns. Below we have an example of a table:

Insert a table
To insert a table go to the Insert menu, and then select the Table option.

42

In the new window you will need to set the number of Rows and Columns, and the width of the table. The Width can be defined in Pixels or as a Percent. The difference between these is that the width in Pixels is always the same, independent of the size of the browser window in which you are viewing the page, whilst the width in Percent shows the percentage of the browser window that will be occuped by the table and there fore it wil be adjusted relative to the size of the browser window. This allows users with a large screen to take advantage of the width of it. Border thickness indicates the border thickness of the table in pixels. It is assigned a one (1) by default.

Cell Padding indicates the space between the cells content and the their borders. Cell Spacing indicates the space between the table's cells. A heading for the table can also be established, and it is recommendable to use headings in the case of users that use screen readers. Screen readers read headings and help the users to follow the table information. If you want to include a title, set it in the Caption option - the title will show up outside the table. In align caption we indicate where we want to align the title in respect to the table. In Summary: we indicate a description for the table which screen readers will read, remember that this text will not be visible in the user's browser.

Cell Padding
Cells are the squares that compose a table and are the intersection of the rows and the columns.

COLUMN Text and image

43

Text inside a cell CELL ROW To insert any element into a cell such as text or images, you just have to place the cursor in there.

To practice you can perform the Step by step exercise in Creating a table

Selecting the elements in a table.

There are many ways to select a table. One of these is through the Modify menu, by placing the pointer in the table, or by unfolding the contextual menu of the table by right-clicking on it. In both cases you will see the Table option, through which you can select the Select table option.

It's also possible to select a table by clicking on the border that sorrounds it, or clicking on the <table> label that is on the status bar of the document's window.

44

When you select a table or when you place the pointer over any part of it, Dreamweaver shows its width and the one of each column in a green zone. Along the widths are the pull-down panels (heading of the table menu and heading of the column menu). Those menus allow us to quickly access specified commands related to the table.

If you have the cursor in the table and you don't see this green zone you can activate its view by selecting the Tables' width option from Table menu, or by unfolding the menu bars: View menu, Visual helps, or Tables' width. You can deactivate the view by performing this same action. If you cannot see the table or column width, then the table or the column doesn't have an specific width. If you see numbers, the first number corresponds to an specified width in the properties of the table or column, and the second number is the visual width that is in the design view, for example, in the previous table the third column has 139 (142) in its cells properties. So we have 139 pixels of width, but if it contains an image that needs more space, the column will size 142 pixels (visual width of the column as it is shown on the screen) When having these differences we can select the Make All Widths Consistent option from the drop-down menu of the table heading. In this menu we also have the Select Table menu.

45

There are cases when you need to select only rows, columns or cells. You can select a row or a column in many different ways although you should try them and select the one you like the most. These ways of selection are: Select column option in the heading menu of the column (width green zone). This is valid only to select a column. Click-and-maintain, dragging the mouse until you select the column/s or row/s completely. You can also do it by placing the mouse next to the top or left border of the column or row. The pointer becomes a black arrow. When you click, you select the column or the row the arrow is pointing. To select a row, place the mouse in any part of the row or on the <tr> label of the status bar, (or the <td> label to select the column), and click.

To select many adjacent cells, you have to keep the mouse button pressed while you drag the cells you want to select. To select one cell or many non adjacent cells, you have to keep the Ctrl key pressed while you click on the cells.

Table format
The table properties are specified through its properties inspector.

Through the properties inspector you can modify the specified values when you insert the table. At the same time, you can indicate others as the Align value (which allows one to align the table to the left, middle or right), the background color, or the background image. If you select a cell or a set of cells, the properties inspector changes in order to specify other colors.

46

The top of the properties inspector in this case is used to specify the text properties

which will be inserted in the selected cell (or cells). The inferior part is used to specify the value of the each cell such as the color or the background image (other than that specified in a global table), the cell border color, etc. Two options that you may possibly need to use frequently will be the Horz and Vert, which define the content of the cell in horizontal or vertical way. To practice you can perform the Step by step exercise in Creating a table.

Changing table and cell sizes

As you know, the Width of a table can be defined in Pixels or as a Percentage. The table size through properties inspector will be set by the values of W (Width) and H (Height). Normally only width is specified, not height.

The W and H values of a cell are always in Pixels. It isn't necessary to set any of these values for cells unless you wish to maintain that size and don't want them to be adjusted to the window size. The table and cells size can be specified not only through the properties inspector. You can also do it by maintaining the mouse pressed on any border,and dragging it to the position that you want.

Adding and clearing rows and columns

There are many ways of adding and clearing the rows and columns of a table. The first thing to do is to place the mouse in a cell or to select several of them, then unfold the table contextual menu by right clicking on it, or you can also open the Modify menu. In both cases you will see the Table option. Depending on the selected cells, some of the Table options will be able to be used and others won't. To insert a row or a column, just click on the Insert row or Insert column option. The row is inserted above the cell or the set of selected cells, and columns are inserted to its left.

47

We can also count with a full advanced option, the Insert rows or columns option. When you select this option you will see a new window where you can define whether you are going to insert rows or columns, their number, and their position.

To delete a row or a column, just place the mouse in the row or column you want to delete, and select Delete row or Delete column from the table menu.

48

You can also select the row or the column you want to delete and press the DEL key. To practice you can perform the Step by step exercise to Add and Eliminate rows.

Combining and Dividing cells

49

It is possible to insert tables into other tables. This is called to Nest tables. Next you have an example of a nesting. As you can see, in the first cell, another table has been inserted.

To nest tables, you just have to place the mouse in the cell where you want to insert the new table, and then insert it the way we have just seen. Combine cells consists of converting 2 or more cells into just one. This will clear the separating border between the cells and they will become one. This can be useful, for example, to use the first row to write the table's title. In this case you would have to combine all the cells of the first row into just one. Dividing cells consists of spliting them. One of the ways of dividing or combining cells, is through the properties inspector.

If many cells are chosen they can be combined by clicking on the button of the properties inspector (found at the bottom left of the properties panel, or by selecting the Merge cells option in the Table option. As you have seen, you can get there via the contextual menu of the table or via the Modify menu. You should remember that it is only possible to combine adjacent cells, or a combination which would lead to another new cell, in the example the result is a square. In the next table cells 1 and 4 cannot be combined, neither the cells 1, 2 and 3, because those combinations do not lead to a new squared cell.
1 3 2 4

50

To split a cell you have to click on the button of the properties inspector, or on the Split cell option of the Table submenu. In both cases, you will see a window like this, in which you need to specify whether the cell is going to be divided by rows or by columns, and the number of these. To practice you can perform the Step by step Exercise on Combining rows.

Table modes
At the time of working with tables, Dreamweaver offers us many different view modes. We have worked all along in this unit with the standar mode, and we will continue working this way, but you can go to different modes through the View menu, and then selecting the Table mode option. Inside this option we can choose the Standard mode, the Expanded Tables mode, or the Layout mode.

Layout mode is used to draw pages with a defined design based in tables. Using this view, the tables don't have to be obligatorily inserted into text lines as we have been doing up to this moment. They can be inserted into any part of the page, and Dreamweaver will fill the blank space to make it possible for the table to be shown in that position. Expanded Tables mode adds temporary filling and cell space to a table. It also increases the table borders to make its edition easier. This mode can be used to select tables elements or to have the insertion point in the required way, but in this mode we don't see how the page will be shown. We will limit this course just to the standard mode.

51

52

Unit 8. Using Frames

We are going to see what Frames are and when they must be used. We will also see how to insert a simple frame into a website and how to work with it.

Introduction
Frames are used to distribute the data in a web site. They help to keep some parts straight such as they are, as the logotype and the browser bar, while the others can change. In addition they usually improve the appearance. Each page's frame has its own HTML file. For example, in the image on the right you can see a page with two frames. The left frame has the menu.htm file, and the right frame has the dogs.htm file. To see the page this way, we have opened the browser's file frames.htm, which is the page that has grouped the frames. It is possible to edit the frame's files from the page that containts the set of frames. This simplifies the work as it is easier to figure what the final page is going to look like. This is something that you cannot do if you edit each framed file individualy. Working with frames can be a bit complicated, and even more so in the begining. We are not going to go too much into the theme, and we will only look at some of the basic concepts with a few easy examples.

Creating frames

53

There are many ways of creating a frame. We will only learn one. To create a frame, you first need to open a file. It can be new or an existing one. After this, you need to go to the Insert menu, HTML, and Frames. Through this option you can select the type of frame you want to create. We are going to look at the Left frame option. If we click on Left, a new frame will be created in the left side of the current file.

As you can see in the image, there is a line splitting the document. In this case we will have three files: the left one, the right one, and the one which has the set of frames. The right one is the file we had at the start. It is in the frame known as Main Frame. To select the file that has the set of frames you have to click on the line that splits the frames. This is only possible in case of not having been previously saved.

In case of inserting a right frame instead of a left frame, the empty frame will be shown to the right of the original file. In this image

Selecting frames

54

If you want to select the frames of a document you have to go to the Frames panel which can be opened through the Window menu. If the Frame option isn't in this menu, it may be in Others option. You can also open the Frames panel by pressing the combination of Shift+F2 keys. The frames that are in the frame document are found in the Frames panel, and we can go through them by clicking on them in the panel. You can also select the frame Page by clicking on the border that sorrounds the frames. Select the frames to edit the document they may contain. Select the frames to specify the specific properties of each one of them.

Saving Frames
All documents that have frames must have a Page inside each one of them. This is why when you create a frame, new pages are loaded by default in each one of them (apart from the frame that has the original page). These new pages can be replaced later by other existing pages as we'll soon see. If you save the page that has the set of frames, each one of the pages included in their frames we'll be saved too. It is not recommendable to save the frames for the first time using the Save all option, because we can make mistakes when naming the new files.

It's preferible saving each file (one by one) unless all the frames had an already existing page, because in this case the unique file that will have to be named will be the one that has the set of frames. To save a file that has a set of frames, you have to previously select it. To save each one of the documents, you just have to place the cursor on one of them and click on the Save button.

Setting up Frames
After selecting a frame through the Frames panel, its properties can be established through the properties inspector.

Each frame has a name assigned that can be changed through the Frame name option. The

55

name cannot have blank spaces. Src is the HTML file name that is displayed in the frame. In Borders you can select a line that splits the frame from the rest of the frames. In case of showing the border, a color for this can be specified through Border color. You can also establish a width for the border through the Width option. Scroll will indicate whether scrolling bars will be shown or not when the frame file cannot be completely seen. If the No resize option is activated, it indicates that users won't be able to change the frame size in the browser. The Margin width and Margin height set the separation between the content of the frame and its right-left and top-bottom borders. If all the sets of frames are selected, then the Properties inspector will display the following options:

In Borders you can add a line to split the frame from the rest of the frames. In case of showing the border, a color for this can be specified through Border color. You can also establish a width for the border through the Width option. The Column field (or Row) is used to set the frame size, and it can be introduced as Pixels, in Percent (of the window) or Relative (proportional to the rest of the frames). You will usually use two frames, one of them with size in Pixels, which will contain the browser bar, and the other frame with a Relative size, to adjust it to the rest of the browser window.

Frame content
As you have seen, the frame content can be established through the Src field of the properties inspector.

When we work with frames, our aim is to load different files in at least one of them. Through the Src field of the properties inspector, it's only possible to specify the file that will be loaded in the frame in first time, but we can change this later using links. As you remember, in the hyperlinks unit we learnt the possible links destinies. Those destinies could be _blank, _parent, _self, and _top. Let's see again what are they used for. You now know how to work with frames and they will be easier to understand.

56

_blank: Opens the file linked in a new browser window. _parent: Opens the linked file in the frame window that has the link or the set of main frames. As you know, the main frame is the frame where the initial file is and where the rest of the frames have been inserted. _self: Is the predetermined option. It opens the linked file in the same frame or window as the link. Opening the linked file in the whole browser window means that the window frames will disappear when you open the link in it. In addition to these destinies, you can also set the name of one of the frames in the Page as one of them, so the page will be loaded in that frame.

We can add all these destinies to any element of the Page that has any link, it can be a text, an image, an image map, a flash element, etc. Thanks to this we can make our links work as we please, loading Pages in some of the frames, in a new window, in the whole window, etc.

This task can be difficult and complicated at the begining, but it leads to good final results. teacherClick courses can be seen on the net using a top frame with pull-down panels. To practice you can perform the Step by step exercise in Creating and configuring frames.

57

Unit 9. Interactive Forms

We'll see what a form is, why it's used, how to insert one, which elements it can contain, and how to validate the data introduced into it.

Introduction
Forms are used to get users data, they can also be used to make orders in a virtual store, to create a survey, to know users opinon, receiving questions, etc. Once the user has filled out the data and clicked the button to send the form, a program will start, and will receive the data and make the required treatment. Here, we're going to see how to create a form (insert fields and buttons into the form and validate them) but not the data treatment yet, because you need programming knowledge, like VBScript, JavaScript or other programming language and this part isn't in the objective of the course. On the right you have an example of a form. A form can have labels, text fields, drop-down menus, and buttons.

The structure of an interactive form

Text Field

Textarea

Through the propierties inspector it's possible to assign the width of the text box, the top number of lines or characters, and the initial value of the box. Button: The button can have three options assigned: Submit form, Reset form (clear all the form fields), or None (to assign a different behavior to the previous two)

58

Submit

You can also change the text button through the Label option of the properties inspector.

59

Check box: Is a little square that can be activated or deactivated:

I want to receive information

It can be set in its initial status as Checked or as Unchecked. Radio button : Is a little circlular button that can be selected or deselected. If there are many in the same form only one can be activated. When you activate one, the others are automatically deactivated.
Superman

Spiderman

List/Menu: A list or a menu is a form element associated to an option list.

--- Choose one option ---

--- Choose one option --Dog Cat

The elements are added through the List Values button of the properties inspector. When it comes to a menu, it is only possible to select one of the elements, but if it comes to a list many can be simultaneously selected editing the Selections option of properties inspector. Label: Is used to name the rest of the elements of the form, so that the user is able to know which data to introduce into each one of them.

Creating Interactive forms

60

You can create forms through the Insert menu and then the Form option. Once you have created the form, it will be represented in the Dreamweaver window as a box with dashed red lines, similar to this image on the right side. You can insert the form elements inside the form through the Insert menu and then the Form option. It's recommendable to use tables to organize the elements of the forms. You will find a better distribution of the form elements using them, and this will make its comprehension easier while improving its appearance.

Validating Interactive forms

The forms validation is used to make the form valid before sending it, and also to make the user fill in the obligatory fields before sending it. To validate a form, you need to open the Behaviors panel. This panel can be opened through the Window menu and then the Behaviors option, or by pressing Shift+F3. In this panel you need to unfold the button by clicking on it, and in Show events for, select an actual version from the browser's list. You can choose for example IE 6.0. browser. After doing this, you have to unfold the again, and select the Valid form option. button

For all this you will have to previously select the form. A window like this will be shown, here you will find all the form elements.

61

You can select each one of the form element, and specify the required requests. You can establish an obligatory filling field, whether it's content to be numeric, an e-mail address, etc.

To practice you can perform the Step by step exercise in Inserting elements in an interactive form

62

Unit 10. Adding Multimedia Elements

In this unit we'll learn how to insert multimedia elements. More specifically, we'll see how to insert a Flash animation, a sound and a video.

Flash Movies
Flash movies are animations that have an SWF extention, just like buttons and flash text. They are usually used in web sites as a presentation, although they can be used for any kind of animation. These movies can be created through Flash Macromedia, and the user needs to have a plugin installed on his/her computer to view the movies. Flash movies can be inserted in a Page through the Insert menu, Media, Flash option, or by pressing Ctrl+Alt+F. Also, they can be inserted by clicking the Insert panel, Media button. Flash option that is in the Common tab of the

The Flash movies Properties inspector is similar to the button's and flash text's, but there are two new options that makes reference to the movie view.

63

The Loop option sets a restart of the movie at the end of it. The other option Autoplay, indicates that the movie flash will be started when the page loads. If this option is unmarked, it would be shown only the first frame of the movie. You must disable this option when you want the reproduction to be activated by any behavior.

Sound Files
Sounds are not commonly included in a web Page, because some users may be listening to their own music, and sometimes the page's music may be unwanted. However, including a nice sound appropiate to the contents of the page can make it more attractive. Many pages that have sound offer the possibility of disabling it. The most common sound formats used in the Internet are MP3, WAV and sometimes MIDI, although there are other different formats that can be used too. The ideal is including a light but with a good quality audio file. To insert audio in a document you have to go to Insert menu, Media, Plugin option. The audio controls will not be shown in Dreamweaver. All files inserted as plug-in are represented inside Dreamweaver by an image alike the one on the left. In the properites inspector the height and the width of the audio controls can be established through W and H. In case of no setting a size, it will show the controls with its default size as you can see in the example above. If you want to listen to the sound but not to see the audio controls, the field's value W and H have to be 0. Sounds are automatically played once when the page loads. Those values cannot be changed through the properties inspector but through the code. As an example, the previous src="others/audio.MID"></embed>. file will appear in the code as <embed

To avoid its automatic reproduction autostart="false" was added, and to keep it reproducing loop="true" was added too. The code line of the audio file has been kept as: <embed src="others/audio.MID" autostart="false" loop="true"></embed> If you want music in a web site while hiding the audio controls, you must write this code directly in the code view. <bgsound src="song1.wav" loop="-1">

64

Insert after the label </title>. With the loop parameter you can choose how many times you want to reproduce the sound, i.e. 1, 2, 3 ... (with -1 it's continually played).

Movies and Video Files

If we're interested in inserting a video in a web site, we need to know that video takes much space, and so they can take a long time to download. The v ideo formats most commonly used on the internet are AVI, MPEG and MOV. To insert a video file in a document you have to go to the Insert menu, Meda, and Plug-in option. On the right you have an example of a video file. You can play it by pressing the video controls. The Properties inspector treats the inserted video files in the same way as does with audio files: both are inserted as a Plug-in.

Videos are also reproduced automatically when the page loads, and they are reproduced only once. These values can be changed through the code, the same way as in the case of audio files, adding autostart="false" and loop="true". All objects inserted through the Plug-in option need the user have a player installed or an appropiated plug-in to reproduce them. In the Src field of properties inspector the linked file (video or audio file) is set. In case the user doesn't have the required plug-in installed, a Page can be established in Plg

65

URL field where it can be found.

To practice you can perform the Step by step exercise in Inserting an audio file.

66

Unit 11. Using Dreamweaver Templates

We're now going to learn what templates are, how to create them, and how to base files on them.

Introduction
Each time we want to create a web site we have to follow a uniform format. Most of us make copies of previously created files, and work on these copies by changing their content. This is the easiest way to have a page with a previously created structure. Templates are a kind of copy of the page on which the rest of the web site is going to be based, but they include the possibility of establishing editable zones, while other zones cannot be modified. It isn't possible to modify the properties of a page that is based on a template, apart from the title. When you want pages with, for example a different background color, you need to create a different template with different colors, and base the pages on the template depending on the background color you want for each one. When you modify the design of a template, you can update all pages based on it. Template are files with a DWT extention saved on the web site inside a folder named Templates.

Creating Templates
Templates can be created from zero, or starting from an existing page. One way of creating templates from zero is through the Assets panel. The Assets panel can be opened through the Window menu and then the Assets option. Also by pressing F11. Once you have opened the panel you need to select the button. This way you can work with templates. The Templates Assets panel's bottom buttons are similar to the ones in the CSS Styles panel . The only different button is the first, used in this case to update the list, the rest of them allow you to create a new template, edit a selected template of the list, or clear it.

To create a new template you need to click on the button (if it isn't activated, right-click and select New Template). When you press the button you create a new file in the templates list. You can also change its Name.

67

To modify a template select it from the list an click on the To delete a template select it from the list and click on the

button. button.

Templates are saved in the actual web site inside the Templates folder which is automatically created. To create a template from an existing file, you need to open the file, and then save it as a template through the File menu, and Save as template. When you select the former option, you see a window like the one on the right. It's necessary to specify the name which you want to save the template as through the Save as field and then select the Site in which it's going to be saved from the sites list.

Editable zones.
All of the elements of a template are blocked by default, and therefore they can not be modified. It is compulsory to establish the zones that can be edited in the pages based on this template. To edit a template you have to open it in Dreamweaver. A way to open it is through the Assets panel by double-clicking on it, or by selecting it and clicking on the button, as we have just seen. Once the template is open it's possible to establish its properties through the Page properties. As you can remember, it can be opened it this way: Pressing a combination of the Ctrl+J keys. Clicking on the Modify menu and selecting the Page properties option. Right clicking on the opened file in Dreamweaver and selecting the Page properties option.

68

To insert an editable zone you need to place the mouse in the place in which you want to insert it, and then go to the Insert menu, Templates objects, and the Editable zone option. You can also press the combination of the Ctrl+Alt+V keys... In the new window you need to establish a Name for the editable zone. There cannot be two editable zones inside the template with the same name. Later on you would modify the name through the properties inspector of the editable zone. An Editable zone is represented in Dreamweaver as a box with a blue label. The name of the editable zone appears in the label. You can insert objects inside the window, and they will be appear by default in files based on those templates. The objects inside the editable zone can be modified. All the objects of these editable zones will be in the site, but they will not be able to be changed. In this case, the teacherClick logotype image would be in all the sites based on this template, while everything inserted inside the editable zone EmailForm will not.

Using the templates

The use of templates can be a bit complicated at the begining. We're going to see how to base a blank site in a template, the fact that it is empty makes it easier. Once opened the file, you have to go to the Modify menu, Templates, Apply template to Page.

69

Before doing this, it's preferible to assure that the file opened in Dreamweaver is the same thatthe one we're going to work with and the same as the template is going to based on.

After clicking on the Apply option in Template to Page, you will see a window like the one at the right, in which you need to select one of the templates from the list of templates site.It's recommended to activate the Update page when template changes option, in order to make the page automatically updated in case of modifying the template in which it's based. Instead of being working on an empty file, its possible to apply a template over an existent file. Then, when you apply the template, the names of no coincident regions between the existent document and the template will be displayed. In that case a window like this is shown.

70

In this window you have to establish a correspondance between the region name of the blank file and the region name of any template. In this example, the blank file region which didn't coincide with any template region was the Document body region. In the Move content to the new region the head region of the template has been selected in order to establish the needed correspondance. After establishing the correspondance, the template is loaded in the blank file.

In this case that it is not possible to change the background color of the template, you can still change all the elements of the table and form, since they are in an editable template zone. In this case you can change the font, the cells color, combine them, etc. If you want a page to stop being based on a template, you have to go to the Modify menu, then the Templates option, and Separe template. When you separate a page from a template, the page content would be still the same as when it was based on a template, but without the restrictions established by the template. To practice the different elements you can perform the Step by step exercise in Creating a template

71

Unit 12. Working with Layers

We're going to a look at some of the characteristics of layers, and then work with them and apply some behaviors to them.

Introduction
Layers are squares that can be placed wherever you want in the Page, we can insert HTML content in them. Those layers can be hidden and overlapped between them. This gives you a great variety to design. Layers can be moved from their positions by just clicking on the the white square in its lerft top corner, and whilst keeping the mouse pressed, dragging it to the new position. They can also can be resized by clicking on the black squares and dragging them until the size you want is reached. You can insert text, tables, images, and flash animations inside the layer's square, and also all the elements that an HTML file can contain. This icon is used to select the layer when you click on it, and when you clear it, you are also clearing the layer.

Inserting a layer
Layers can be inserted in a Page through the Insert menu, and then selecting the Design object option, and Layer. Once the layer is inserted, you can edit its attributes by selecting it. You can select layers through many different ways. One of them is clicking on the icon. This is not useful when there are many layers in the same file because all layers have an image like this one associated, and it's very easy to select the wrong one.

72

When there are many layers in the same file, it's recommendable to select them through the Layers tab in the Design panel, which can be opened through the Window menu, and then the Layers option. If the Layers option isn't in the menu, it may possibly be in the Others option. Also, it can be opened just by pressing F2. In the panel are the names of all existing layers in the actual file, and you only need to click on the layer name to select it.

Layer format
Layer's properties are shown through its properties inspector

Layer ID is the layer's name. You can change it through the Layers panel, and double-clicking it. L and T indicate the pixels distance between left and top limits of the document and the layer. W and H indicate the layer's width and the height. Z-Index is the depth order of the layer. This value can be changed through the Layers panel. A layer will be overlapped by others which greater Z-index. Vis indicates the inital view of the layer. Visibility can accept four types. Default (Browser view), Inherit (the layer of the Page that is being displayed is shown) Visible (It shows the layer although the Page isn't being seen) Hidden (the layer is hidden). You can also change the view through the Layers panel by clicking on the eye image. The open eye indicates Visible, and the closed eye indicates Hidden. Through Bg Image and Color you can indicate an image or a background color for the layer. Overflow controls how the layers appear in a browser when the content exceeds the specified size of the layer. Visible indicates that the layer would be amplified to make its content fit.

73

Hidden specifies the additional content will not be shown in the browser. Scroll specifies that the browser should add scrolling bars to the layer although they are or not needed. Auto makes the browser show the scrolling bar when they are needed (when the layer content is bigger than its limit).

To practice you can perform the Step by step exercise on Inserting a Layer.

Unit 13. Using behaviors

In this unit we're going to learn the basic characteristics of the behaviors, and also look at a pair of examples of possible applications.

Introduction
behaviors are actions that happen when the userdoes something over an object, for example moving the mouse over an image, clicking on a text, double-clicking on an image map, etc. behaviors don't exist as HTML code, they are programmed with JavaScript. Dreamweaver allows you to insert them through the Behaviors panel, so it is not necessary to write a JavaScript code line to program them. The image below has a behavior associated. Place the mouse over it to see what happen.

You are visualizing a layer that was hidden. If you move the cursor off the image, the layer will be hidden.

The image has two behaviors associated to show and hide the layer. We'll look at this kind of behavior later. Other behaviors you have seen are the ones applied to sustitution bars and browser bars, they are predefined, and for this reason it isn't necessary to introduce the set of behaviors through Behavior panel. To validate forms you saw some of the caracteristics of Behavior panel. Let's remember

74

which we need to insert behaviors later. The Behavior panel can be opened through the Window menu, and then the Behaviors option, also by pressing Shift+F3. In this panel you need to click on the button, and in Show events for selecting a version from the browser list. Some behaviors don't work with some browsers. Depending on the selected browser, you will see or not some of the possible behaviors. There are many behaviors for Internet Explorer but they don't work with Netscape. As most users use Internet Explorer, let's select this browser. You can select from one of its latest versions: IE 5.5 o IE 6.0. Once the browser is selected it's not necessary to reselect it the following time you want to insert any behavior.

Inserting a behavior
When there is an established browser, you can insert behaviors. The first thing to do is to select the object on which the behavior is going to be applied, it can be an image, a text fragment, etc. When you click on the button of the Behavior panel you will see the Show Events for option. Also, you will see a list of all possible actions in the browser previously selected, so you can select one. Depending on the element on which you want to apply the behaviuor, you can select some actions, and others not.

In this case the Validate form action cannot be selected because there isn't any form in the Page. After choosing any action, the corresponding behavior appears in the Behaviors panel. In this case, two behaviors have been inserted. As you can see, each behavior has an action and an event associated to it. Actions are the ones which have been selected in the previous list, and the event indicates the action by itself (when it is done).

75

To clear any behavior, you need to select it in the Behaviors panel and click on the button. You can also change the order of the behaviors applied to an object, by selecting them and arranging their order through the buttons.

Show and Hide layer behavior

One of the most habitual and interesting behaviors is Show and Hide layers. It is obvious that when you want to apply this behavior there need to be layers present in the document. In the previous Page you had an example of this type. Let's see which events and actions you need to establish in order to produce the behavior. After selecting the image you need to select an action from the list by clicking on the button. In this case the action has to be Show-Hide layers After selecting the action, you must specify which layers have to be shown and which hidden for the event. For this you need to click twice on the action in the Behavior panel. A new window is then shown, with the list of all the layers in the page, where you can indicate the view variation for each one of the layers. You can indicate whether they are going to be Shown, Hidden, or if they are going to acquire the initial view (Predetermined). To determine the state of each one of the layers it's necessary to select them one by one, indicating the state through the buttons at the bottom of the window.

76

It's not necessary to apply a different view to all the layers of the page, only the ones you want to change at the moment of producing the event. For example, in this case the "catmonth" layer has not been applied a different view, because we don't want it to change when the event plays out. If you want to clear an established view for any of the layers, you only need to click again on the button of the applied view. For example, to clear the view applied to the "catweek" layer, we would have to click again on the Show button. You need to be careful about what you want - in this case it is that when you place the mouse on the image the layer is shown, and when the mouse is out of the image the layer is hidden again. For this you need to insert two Show-Hide layers behaviors with the action. One of them will show the layer for the event onMouseOver (when the mouse is over), while the other will hide it for the event onMouseOut (when the mouse is out).

Using JavaScript Code

Another behavior that can be applied on any object is Call JavaScript. This behavior allows us to insert JavaScript code inside the file. For example, it's possible to make the browser window close when you click on an object. To do this you need to insert a "window.close();" JavaScript line. The same as the layers example, the first thing to do is to select the object on which the behavior is going to be applied. After this you need to select the Call JavaScript action through the button.

Then a new window shows up and you now need to introduce the JavaScript line.

Once the behavior is inserted in the Behavior panel, you need to establish an onclick event to produce the call to JavaScript when clicking on the object. By clicking twice on the action the previous window is opened again, and it's possible to modify the line code. To practice you can perform the Step by step exercise on Inserting behaviors

77

Unit 14. Others features

Let's look at a set of elements that are usually found in web sites, such as marquees, counters, and update datse.

Marquees
Marquees are text, images, or a combination of them. They can be moved inside the window in a linear way. Below we have an example of a marquee.

Marquees cannot be inserted with the Dreamweaver graphics editor, you need to do it through code. To create a marquee you need to insert the <MARQUEE> and </MARQUEE> labels. Between this labels you need to introduce the elements that you want inside the marquee. You can also specify some of the characteristics of the marquee. The marquee is moved from right to left indefinitely by default, but you can make this properties vary if you want. For example, if you write <marquee behavior="slide">, the marquee will only move once and then will stop. If you write <marquee behavior="alternate">, instead of moving continuously, the marquee will move from side to side in the window, like bouncing in the extremes, just as it happened in the previous example whose code you can see next: <marquee behavior="alternate"> Welcome to Dogs and Cats <img src="images/logo_animales.gif"> </marquee>

Setting the Date

Dreamweaver allows you to easily insert the last date of update of the pages. With Dreamweaver, when you modify a page in which this type of date has been inserted, it is automatically updated with the system date. It is convenient to insert the update date when the page contains constantly updated data, this way the users know the last data of modification. In the cases when the update time is great it is worth not to include this feature. To insert this date you need to go to Insert menu, and then the Date option. In the new window it's possible to establish the date format, and the option of automatically

78

updating when the file is modified and saved.

Horizontal Rule
Horizontal rule is an element used to separate sections inside a document. An horizontal rule is just an horizontal line. To insert a rule you need to go to the Insert menu, then the HTML option, and then the Horizontal rule option. The Properties inspector for the rules is as follows:

You can modify the rules appearance through its fields. Next there are 4 examples of horizontal rules.

These rules only differenciate in H (height) and Shading fields. The first two, for example, don't have the Shading field activated, while the other two do.

Adding external code

Sometimes we would like to introduce into our pages some things we have seen published over the internet. You can see the Source code of these pages through View menu of Internet Explorer, and then the Source code option, or displaying the page contextual menu by right-clicking on it and then selecting the View source code option. By doing this you can consult the code that has

79

been used to build the page, and therefore use it for your own pages.

Viewing the font code is useful to check the page's structure, the use of behaviors (programmed in JavaScript code), and other sets of JavaScript routines. For example, click here to open a page in which there is an effect in the browser's status bar, that shows a marquee, whose text is JavaScript CODE - DREAMWEAVER 8 TUTORIALTEACHERCLICK If you look at the page's source code you will find the JavaScript code used to create that effect in the status bar. The code is the following: <SCRIPT language=JavaScript> <!-strcnt=0; mensaje=" JavaScript CODE - DREAMWEAVER 8 TUTORIAL- TEACHERCLICK "; function scroller() { window.status=mensaje.substring(strcnt++,mensaje.length+1); if(strcnt>mensaje.length) strcnt=0; setTimeout("scroller()",200); } //--> </SCRIPT> This code has to go between the <HEAD> and </HEAD> labels, and add onload="scroller()" inside the <BODY> label, resulting in: <BODY onload="scroller()"> This code is not too complicated, and you could add it to your own pages without problems in order to show the messages you want. On many occasions it can be difficult to understand the code, and even more so if you don't have a programming language knowledge. If you don't know the code, you can make the copy of the mistaken or incomplete JavaScript code, insert it in a erroneous place in the HTML code, etc.

The important thing to remember about JavaScript functions, is that they are between the lines. <HEAD> ... <SCRIPT language=JavaScript> <!-and

80

//--> </SCRIPT> ... </HEAD>

Web Page Resolutions

When creating a web site you have to remember that it will be visited by many users with different size and resolution monitors. It is impossible to make a web site with the same view in all the different monitors, but you need to try to make them alike. The most common resolution is 800x600, so you will need to design the site to this resolution. This means that you will need to create the web site in a monitor with this resolution to clearly view how is it going to appear in the browser, and to be able to distribute the content in the best possible way. Tables are normally used because they are very useful to distribute the page content. As you know, the table size can be set in pixels or as a percent. When you set it in pixels, the table will be seen the same size independently of the window browser's. However, when the table size is defined in percent, the table will be automatically adjusted to the browser window size, which implies that the content will be out of place. Click here to check a site with a static size table in pixels. Imagine that the page has been designed to be seen in a small monitor with a lower resolution, whose size is equivalent to the opened browser's window. If you modify the window size, you'll see tables always with same size. The inconvenience is that when you maximize the browser window (equivalent to viewing the site in a big monitor with higher resolution), the right of the tables will be an empty space. Click here to check a site with variable size percent table. If you change the window size, the tables will be adjusted. Using tables with changing size may be problematic at the time of maximizing the window as the tables will be out of place. In the beginning you may feel that it's better using tables with static size even though this implies an empty space on the right in the case of high resolution monitors. But by practicing this, at the time of working with tables you can fix the problem and define the sites with percent size, and take advantage of the width when monitors have higher resolution. Not only the table size can be defined but the also cell's size. The same as in the tables case, a cell's size can be defined in pixels or as a percent.

81

The cell's size will be specified by W (width) and H (height) values through the properties inspector. Normally only the width is specified. Cells W and H values are in Pixels. The cell in the previous image has a width of 208 pixels. To make the width 25% of the table you would have to write 25% in W. Changing cell's sizes, and knowing their contents (images, text right aligned, text left aligned, big font text, etc) you can make the appearance be alike or barely affected by the change of the browser window when viewing the site in different sized monitors and resolutions.

Unit 15. HTML and Dreamweaver

We will now learn some of the advantages that Dreamweaver offers us at the time of working with HTML code, and not just in the graphic editor of the design view. It's not about learning HTML language, it's just knowing how to readjust the code directly in Dreamweaver.

Tags
We already know HTML language is based on tags which mark each web site element from start to end. Tags are based on writing the same command betwwen "<" and ">" symbols. The first tag means start, and the second one in which we include the "/" symbol, indicates the end and it is called the end tag. Tags have attributes that allow the defining of the element's characteristics on which they act, including certain codes inside the tag. For example, a paragraph is inserted between <P> and </P> tags, but you can change its predefined charateristics as they can be aligned to the right. To do this, instead of introducing the text in the paragraph between the previous labels, it must be inserted between <P align="right"> and </P> tags. Also there are some elements that don't need an end tag. For example, a Shift+ENTER inside HTML code, is equivalent to a <BR> tag. Dreamweaver automatically inserts the necessary tags to build the site, with its appearance and content defined in the graphic editor, but also offers other ways to work directly with the code.

Code inspector

82

You already know that Dreamwever offers you the possibility of working with three views: Design view, Code view and Split view (Code and Design). All these views are directly applied to the file window.

83

But there is a panel that allows the viewing of the code independently from the applied view in the file. This panel is called the Code inspector and can be opened through the Window menu. If the Code inspector option isn't in the menu, it may be found in the Others option. You can also open the Code inspector by pressing F10.

The Code inspector shows the HTML code the same way as Code view and Split view (Code and Design) do, but it can be better working with this panel as it can be placed in any part of the screen.

84

85

The Tag hint list

Dreamweaver gives you the opportunity to work directly on the HTML code to complete the labels while they are being introduced. This happens in Code inspector and in Code views. Let's imagine that we want to introduce into our site a link to the teacherClick site and we wanted it to be opened in a new window. In this case we have to introduce a <a href="http://www.teacherclick.com">click here to visit teacherClick </a> tag, and we would obtain the following link: click here to visit teacherClik

Let's see how completing tags works through this example. Tags are completed from left to right, so we have to first insert the < symbol. After writing this symbol, Dreamweaver shows a list with all the commands that can be after it. To select one of them you have to click twice on it, or select it by pressing the RETURN key. In this case we have to choose a, and then the list will be cleared. Now in the code we have .

After <a you need to introduce a blank space. Now there will be another element list to include, which will be written after a, the label attributes. We must select href. Once selected, the code will be .

The cursor will then be between double quotes, and a new list here well be displayed so you can select the type of link to insert. In this case the link has to be the HTTP type, but a (FILE) link, a (MAILTO) link, or any of the list can also be inserted. We need to select http://

Instead of ending the tag with the > symbol, we have to first indicate that the link has to be opened in a new window. For this, we need to introduce a new space. In the new list we have to select target. The code will be like this: .

86

Now the cursor will be betrween double quotes, and a list will appear where you can choose the link destiny. We want the link to open in a new window, so we have to select _blank. After introducing the > symbol to end the label, the link end will be automatically inserted at the end on the link, which means that </a> will be inserted, and we'll have . We can now complete the label with the link and text address, and it'll be like this: <a href="http://www.teacherclick.com">click here to visit teacherClick</a>

Code errors
Through the graphic editor it's possible to see if there are any errors in the HTML code, such as an incomplete tag. In case of this kind of error, the code fragment will stand out in yellow in the design window. This allows us to notice the line where the error is.

Another way of detecting errors in our site is through the Check Browser support menu, located in the toolbar.

87

If our site doesn't have any errors, the menu icon will appear like this , while if we have errors, we will see this .

To see our site errors, unfold a menu and select the Show all errors option. Next will open the panel with the errors.

In this list the error priority is represented by an icon, the globe indicates an informative message (indicates an incompatible code with the browser but with no visible effect). The exclamation sign icon with the red background indicates an error (indicates that it may be a visible critical error in certain browsers, and some parts of the site may be missing). The exclamation sign icon with a yellow background indicates a warning (indicates a part of the code that will not be able to be correctly seen in certain browsers, but won't cause any critical viewing problems). Next we have the file and the line number where the error is found, with a description. Sometimes the description is a text that can't be completely seen. To see it just click on the More info button. As you know, different browsers and their many versions are responsible for the error or not, so we should verify this by selecting the many browsers versions we think are most commonly used. To make Dreamweaver verify the selected browsers, we need to unfold the Check Browser support menu and then select the Settings... option. You'll see a Target browsers dialog window, where we will select the browsers that we want to verify, and the minimum version in the drop-down list to the right of the browser name.

Find and replace

88

Sometimes we want to search a web site for all the pages with certain texts, labels, or parts of these elements. We might want to replace them because we need to work in these elements and don't remember which ones they were, or because we want to replace some labels with others. Let's imagine an existing web site, where the majority of the pages have text that makes reference to the site's name from the start. For example, all the pages could start with DogsCats, and it is for sure that that phrase isn't in any other part of the site apart from the start. Now let's imagine that a cat and a dog image have been created, and you want to replace the DogsCats text for the image in all the pages. In this case it is not necessary to open all the pages that contain the text one by one, and neither to modify the pages to replace the text for the image one by one. To perform this task it is easier using the Find and replace tool. You can open it through the Edit menu, and then selecting the Find and replace option, or by pressing Ctrl+F.

Through Find in you can specify whether it's going to be looked for in the actual file, in the entire site, or only in the selected site files (previously selected). Through Search you can specify whether the text needs to be looked for (in the desgin window), or in the HTML code (font code). Next to the Find option list, there is a text window in which you need to indicate the text or the code you want to look for. In Replace you must specify the text or the code you want to replace the text or code found with. The replacement can be made in various ways, but always through the right buttons. To search one by one for the files that contain the code or text needed, and once found to replace them when you need, use the buttons Find Next and Replace. If you want to find all the files that contain the text or code, or to replace all of them, use the Find All and Replace All buttons.

89

When you use the Find Next option, a page with the coinciding text is opened, highlighting the font in the list near to the code line in which it is. This way we can decide the changes we want to make one by one. When we are sure about the replacements we want we just need to click on Replace, or if we don't want to make any changes we just need to click on Find Next again.

When we use the Find All option, the Find and replace window closes and a new panel like the one to the right is opened. Here are all the files in which the text coincides with the searched text or code. By clicking on the button, the Find and replace window is opened. From this window we can replace from the found files, one by one with the Replace button, or directly replace all found files, by selecting the Replace All option. In the panel, when any file has been changed, it will appear again in the list near a green circle, which indicates that it has been previously replaced. We can make errors when we search, or replace text or error codes. You have to be very careful when you use this tool, because it's not possible to undo the changes done to the closed files with the find and replace option. In the previous example, the person wants to search for the DogCats text, and replace it with an image. In this particular case, what you want is to replace the text with an image, so in Find we couldn't choose the Text option, we would have to select Source code. In Replace the complete HTML label would have to be specified to insert the image. In this case the label would be <img scr="images/logo_animals.gif">, knowing the image is called logo_animals.gif and is found inside the site in the images folder.

To practice the different aspects explained, you can perform the Step by step exercise on Finding and Replacing.

90