Unit 1.

Dreamweaver 8 Basics (I)

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. In order to follow this course you can download the trial version of Dreamweaver from the Macromedia's Page, this version expires after 30 days, but you can surely at some stage bring yourself to buy the full version of this wonderful 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-anddroping 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

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 wide range of web Page editors exists. One of the most commonly used, and emphasized by its simplicity and the numerous features that it includes, is Macromedia Dreamweaver.

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.

Unit 1. Dreamweaver 8 Basics (II)

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

Now start Dreamweaver 8 to explore everything what we have explained. When performing the exercises you can also arrange the program the way we explain you here.

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.

Unit 1. Dreamweaver 8 Basics (III)

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 right-clicking 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 you must insert the image underneath the second line of text. For this, place the cursor at the end of the second line and press intro (enter) to go to a new line. Later you must go to the Insert menu, and then to the Image option. In the new window that appears, you will have to look for the folder in which you had saved the image.

Unit 1. Dreamweaver 8 Basics (IV)

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 button and click three times on the button.

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.

If you click here you will be able to see how the Page should be displayed after you followed all the previous steps. Compare this Page with yours, to see if you have made it all properly.

Unit 2. The Dreamweaver Interface (I)

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 , etc. The document toolbar

, Save

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 you can unfold more options. This button is in the bottom-right corner.

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 the previous image), as names, or both simultaneously.

Unit 2. The Dreamweaver Interface (II)

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.

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.

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.

Unit 3. Defining a site (I)

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.

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.

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. 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.

Unit 3. Defining a site (II)

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.

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.

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.

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 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 as a graphic template to create the document. Transparency: Allows us to establish the Tracing image's opacity.

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 palette. button, in the upper right corner of the

You can assign colors through 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 The other way is introducing the hexadecimal number of the color directly into the filed. , to display the Color palette.

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.

Unit 4. Working with text (I)

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. 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 button. button, while the enumerated list (ordered) is selected through the

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

Example of a list with bullets (unordered):

2. 3. 4.

Dog Cat Birds

o o
Hamster

Canary Parrot

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.

Unit 4. Working with text (II)

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 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. In the CSS panel you can verify that the new style has been automatically added.

If you want to learn more about the CSS panel click here

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"> <!-.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.

Unit 5. Establishing Web Links (I)

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://

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 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.