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 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 <MARQUEE> and </MARQUEE> 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 <marquee behavior="slide">, the marquee will only move once and then will stop.
If you write <marquee behavior="alternate">, 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:
<marquee behavior="alternate">
Welcome to Dogs and Cats
<img src="images/logo_animales.gif">
</marquee>
Unit 14. Other Features (II)
| 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 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)
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:
<SCRIPT language=JavaScript>
<!--
strcnt=0;
mensaje=" JavaScript CODE - DREAMWEAVER 8 TUTORIAL- TEACHERCLICK ";
function scroller()
{
window.status=mensaje.substring(strcnt++,mensaje.length+1);
if(strcnt>mensaje.length)
strcnt=0;
setTimeout("scroller()",200);
}
//-->
</SCRIPT>
This code has to go between the <HEAD> and </HEAD> labels, and add onload="scroller()" inside the <BODY> label, resulting in:
<BODY onload="scroller()">
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.
<HEAD> ... <SCRIPT language=JavaScript> <!--
and
//--> </SCRIPT> ... </HEAD>
Unit 14. Other Features (IV)
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.
0 komentar:
Posting Komentar