Unit 15. HTML and Dreamweaver (III)

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

Code inspector

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