Unit 15. HTML and Dreamweaver


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

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.

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.

 

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

Page 15.2