Hans Networking Solutions

19/05/2012

Learn more to become a computer forences at Hans Network Solutions. We have more you and your entire business.

18/05/2012

Be the best of your friends to get internet access in your home or office. The right place is Hans Networking Solutions The right place if you are having networking problems.

18/05/2012

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
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 you can see an example of a right frame.
A right frame has been inserted over an existing file, menu.htm.
As in the previous case, we have three files: the left, the right, and the one which has the set of frames. In this case the file we had at the begining is the left one, while the previous was the right one. For this reason Main frame will be at the left.
Main frame is the frame that is always in the initial file, into which the rest of the frames have been inserted.

Selecting frames
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 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.
_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.

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
The form elements can be inserted into a page through the Insert menu and then selecting the Form option.
Through this option you can access the list of all form objects that can be inserted in a Page.
Let's look at some of the different elements that can compose a form, and also some of its properties.
Text Field:
Allow you to add a text box. The text field only allows the user to write a line, while the Text Area allows the writing of many. You can convert it into a Text Area through the properties inspector.
It's also possible to define it as Password, so the text field characters will be hidden and shown as the image below.
Next you have an example of each one of the three types.You can write on them to see how they work.







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)


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

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.

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
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 button again, and select the Valid form option.
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.


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.

Unit 10. Adding Multimedia Elements (I)

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 plug-in 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 Flash option that is in the Common tab of the Insert panel, Media button.


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.

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.
At the right side you have an example of an audio file, for which the audio controls are shown. If you want, you can play it by clicking the controls (Remember to turn on the speakers)
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 file will appear in the code as .
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:


If you want music in a web site while hiding the audio controls, you must write this code directly in the code view.

Insert after the label .
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).
Unit 10. Adding Multimedia Elements (II)

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, Medía, 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 URL field where it can be found.
To practice you can perform the Step by step exercise in Inserting an audio file.

Unit 11. Using Dreamweaver Templates (I)

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.
To modify a template select it from the list an click on the button.
To delete a template select it from the list and click on the 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.
Unit 11. Using Dreamweaver Templates (II)

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.
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.
Unit 11. Using Dreamweaver Templates (III)

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

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.

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.
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.
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).
Unit 13. Using behaviors (I)

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.



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 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 re-select 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).
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.
Unit 13. Using Behaviors (II)

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

Unit 14. Others features (I)

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 and 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 , the marquee will only move once and then will stop.
If you write , 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:

Welcome to Dogs and Cats



Unit 14. Other Features (II)

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

Unit 14. Other Features (III)

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 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 TUTORIAL- TEACHERCLICK
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:



This code has to go between the and labels, and add onload="scroller()" inside the label, resulting in:

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.
... ...
Unit 14. Other Features (IV)

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.

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 (I)

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


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.

Unit 15. HTML and Dreamweaver (II)

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 click here to visit teacherClick 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 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: .
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 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:
click here to visit teacherClick

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.
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.
Unit 15. HTML and Dreamweaver (III)

Find and replace
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.

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 , knowing the image is called logo_animals.gif and is found inside the site in the images folder.

Excel 2003, Windows XP, Flash, Dreamweaver 8 MX 2004, Access 2003, Word2003, Photoshop, CompletelyFree Online Computer Courses, Tutorials and manuals, educational resources, Internet, FrontPage2003, PowerPoint, Outlook, Word2002 OpeOffice xp Acces2000 Windows 98 Me Millenium Photodraw Word97 SQL ...