Tips | Web page
One, let the text change color
In some pages we can see some text, when the mouse moved up is a color, moving away is another color, this is how to achieve it?
It turns out that we just have to define two classes in the head and define two colors, which we'll use to define this color in the following HTML source file:
<style>
. normal {color:red;}
. start {color:blue;}
</style>
Then we add the following code before and after the word to be changed:
<span onmouseover = "This.classname = ' normal '"
onmouseout = "This.classname= ' Start" class=start> here </SPAN>
The "Class=start" here is to set the default value of this line to start {Color:blue}, and if you do not add this word, the color of your line will become an HTML preset value.
When we move the mouse over "here", the color is defined as "normal", and when the mouse is moved, the color "here" is defined as "start" (this effect can only be seen in IE browser).
Add background image to homepage
The background color of the Web page and the background of the selection of good, will give the page a lot of grace. If you choose a single background color, it is inevitable to appear monotonous, if you choose the entire picture to do the background, because the picture itself is large, resulting in a long web page loading time, the general user is difficult to wait. So how do you make a Web page with a background?
is very simple, generally uses a very small picture, then spreads unfolds, forms the very beautiful background. The requirements for the background map are of course the more beautiful the better, the smaller the file the better. When you have a natural mosaic of the image, in the Dreamweaver, we can set the background picture.
Open source file We can see a bunch of code in the 〈body〉 tag. The expression of the code is as follows:
<body background= "Images/background.gif" bgcolor= "#FFFFFF"
The images/background.gif here is the value of background, whose image file is named a URL. Of course we can add the above code directly in the source code.
third, remove the underline of the hyperlink
When we visit some pages, we find that when the mouse is moved to the text with the hyperlink, some of the corresponding underscores are generated. However, some Web pages are not. How do I get rid of the underscore of a hyperlink in a home page?
We are in the <HEAD> ... The following code is inserted between the </HEAD>.
<style> B {font-weight:700;}
P {padding:5px 0px;
margin:0px;
font-family: XXFarEastFont-Arial, blackbody, XXFarEastFont-Arial;
}
A {Text-decoration:none}
TD {font-family: XXFarEastFont-Arial, Bold, Arial;}
</style>
<script language= "JavaScript" >
var contents = true;
</script>
A simpler approach is to:
<style>
!--
a {Text-decoration:none}
a:hover {Color:red;text-decoration:none}
--! > >
</style>
four, the method of paragraph indentation
When making use of Dreamweaver to make a webpage about the content of documents, if it is in English writing format, paragraph generally does not indent (does not support half-width spaces); If you need to indent often need to add two Chinese full-width space, can show the position indent effect.
In addition to the above, there are several methods, which can be worth a try, are described below.
1. Pre-format (PRE)
The source file written in the pre-format, displayed in the source file according to the layout of the words, empty lines and spaces can be clearly distinguished. If the source file is:
<pre>
--Pre-format display ...
</pre>
The page will be displayed in the way you have set up the display, that is, the "pre-format display" will be empty two characters in front of the position.
2. Insert point diagram or graphic
A point diagram is one or more pixels in a picture that you can't see with the unaided eye. When we insert such a point graph at the beginning of a paragraph, and then adjust the left and right spaces of the point graph with the hspace and Vspace properties to reach the paragraph indent.
You can also insert a graphic, except that the color of the graphic needs to be in the background color of the page, which adjusts the size of the graphics with the width and height properties of the img to indent.
Insert Graphics method, we need to master the scale of hspace and vspace size, so that it just set aside two Chinese characters position, this is more beautiful.
3. Insert a table without Borders and content
This is similar to the way you insert graphics, which has no borders or content, and is an empty table. Use the width and Height properties of the table to adjust the size of the tables to fit the indentation.
Using tables to locate is generally more reliable, and I often use this approach to locate more complex pages. One problem with this approach, though, is that the source file for the page becomes larger. Therefore, it is not necessarily the preferred format control.
4. Insert a special space character ""
"" represents a non-display space character. Inserts a number of "" characters, separated by semicolons (;) or spaces, and can also be indented in a Chinese paragraph. In Netscape, however, only lowercase letters can be written, and in IE they are case-sensitive.
These four methods are mainly for writing Web pages using HTML language. In some web-making tools, such as Netscape, you can also complete paragraph indents with a toolbar that is designed to include spaces.
v. Set target window for hyperlink
The target window is the window in which the content of the page link is displayed, that is, when you click a link in the page, the link refers to the content in that window. In most cases, we don't need to care about it because it's generally displayed in the same window. But sometimes we need to pop up a new window instead of replacing the original window. Quite simply, here we just need to change the target attribute of the hyperlink source code.
Target is the property of the link label, which is to specify the target window, and target has the following values:
_self-the contents of the link to the window or frame of the current page;
_top-completely replaces all frames of the current page;
_blank-opens a new window for what the link points to
_parent-the contents of the link to the current page 〈frameset〉 the parent window
To make a new window available by clicking the hyperlink, change the hyperlink to the following form:
<a Href= "www.yourname.com" target= "_blank" >yourname </a>
Six, the realization of the text of automatic line wrapping
When we are working on the homepage, we sometimes find that our homepage can not be automatically wrapped, especially for a large paragraph of text, you have to drag the window slider for a long time to read the following text. How to eliminate this situation? Here we introduce a table to locate the method:
We think that the most effective way is to use the table to locate the text. Of course, the table here must be given its absolute width (directly given or indirectly given width), then the input of the long text will automatically wrap.
The width of a given table is directly defined as the value of the Width property of a table. If we can set the following:
<table width= "420" ... </table>
A relative value refers to the width of a table relative to the previous level, usually expressed as a percentage. For example, if we set the width of a table in a relatively outer table, then the table in the inner layer is given a relative width as long as the absolute width of the table is specified. We can look at the following source code:
<table width= "760" >
...
<table width= "60%" >
...
</table>
</table>
Here we have given the inner table width of the 760*60%=456 pixel point.
Vii. How to eject the Bulletin window
Sometimes we need to use the bulletin window to show some important information, the so-called bulletin window is that we browse the homepage, with the main page loading and automatically pop-up small window, the bulletin window will generally put on the news, notice information. Let's take a look at how to implement it with a few simple javascript phrases.
Method One:
Insert the following JavaScript code between
<script language= "JavaScript" >
!--
var gt = unescape ('%3e ');
var popup = null;
var over = "Launch pop-up Navigator";
Popup = window.open (', ' Popupnav ', ' Width=200,height=170,resizable=0,scrollbars=auto ');
if (popup!= null) {
if (Popup.opener = = null) {
Popup.opener = self;
}
Popup.location.href = ' test.htm ';
}
-->
</script>
Method Two:
Insert the following code directly in <body> and </body>:
<script language= "JavaScript" >
window.open ("test.htm", "Test Bulletin Window", "width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");
</script>
Their function is the same, where the function of Windows.open () is to open a window, the use of the parameters in parentheses we can see below, we can set the values of each parameter according to our own needs.
Introduction to Window parameter parameters
Toolbar=yes,no whether the toolbar is displayed
Location=yes,no whether to display the URL bar
Directories=yes,no whether to show the navigation bar
Status=yes,no whether the status bar is displayed
Menubar=yes,no whether to display menus
Scrollbars=yes,no whether scroll bars are displayed
Resizable=yes,no Whether you can change the size of the announcement window
Copyhistory=yes,no Whether the history button is displayed
width=300 the width of the announcement window
height=200 the height of the announcement window
The top left vertex of the left=100 announcement window is 100 pixels to the left of the screen
The top left vertex of the top=100 announcement window is 100 pixels above the screen
