Unit 15. HTML and Dreamweaver (II)


The Tag hint list

 

Dreamweaver gives you the opportunity when working directly on the HTML code to complete the labels whilst they are being introduced. This occurs in Code inspector and in Code views .

Lets us imagine that we want to introduce into our site a link to the aulaclic site that has 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

 

Lets 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 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. In the code we have .

After <a you need to introduce a blank space. Only by clicking in here will there be another element list, which can 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 where you can select the type of link to insert, will be shown.

In this case the link has to be the HTTP type, but a (FILE) link, a (MAILTO) link, or any off 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: .

The cursor will then be in double quotes, and a list will appear where you can choose the link destiny that will be shown.

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

If in the example of completing labels we would have left the line code incomplete, only writing <a href="", it would be reflected in the graphic editor as in the image to the right.

 

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 , whilst if we have errors, we will see this .

To see our site errors, we unfold a menu and select the Show all errors option .

Next will open the panel with the errors.

 

 

In this list 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) and 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 site and the line number where the error is found, with a description.

Sometimes the description is text that can't be completely seen. To see it just clic on the More info button.

As you know different browsers and their many versions are responsible for the error or not, and we should verify this by selecting the many browsers versions we think are the 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 select the browsers that we want to verify, and the minimum version in the drop-down list to the right of the browser name.

 



  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Page 15.2

Legal warning: Authorised on-line use only. It is not allowed the use of these courses in companies or private teaching centres.
© aulaClic. All rights reserved. Reproduction in any form whatsoever is prohibited.
November-2005.