Web design elements

xiaoxiao2021-03-06  43

http://www.verychannel.com/ezine/example/web.html □ ... What questions should be paid attention to when design, according to personal hobbies and web content, the layout of the layout is thousands of change, change the background is Another feeling, what kind of layout is good, no formation. The author summarizes the following points according to our own experience:

1. The choice of web content should not be kept. Looking around, many of the personal homepage on the Internet is "grocery store". Content includes all the best, the subject matter. Everyone is "software download", all have "network navigation", from the head to the end, I can't find a "fresh" I hope. So, we have to put the effort on the materials when designing a web page. The selection should try to do "less" and "fine", but also highlight "new". If you can persist in updating every day, I believe that such a web page will be welcomed by everyone.

2. Determine the content, do not worry about the production page. We should design the entire layout plan, think about it, what is the theme, how to arrange it, then it is best to draw this frame on the paper - this is a typographic version. The typography is very important, there is no clear main line, then the entire layout will be a chaos.

3. After the main line of the entire page, we must also supplement it to ensure the integrity and integrity of the page. For example, the title of the page is simple and clear, so that people can understand that there is something that they need; when you encounter your long text, use the line to separate it, so that people can see clearly clearly. Keep the key paragraph to highlight, this can selectively obtain information; leave a communication address or E-mail address on the web page, which is conducive to users and you communicate; use trademarks in the web page, not copyright infringement; Some detail questions to consider. At the same time, it is necessary to consider that the maintenance update of the website will be convenient.

4. When making, you don't have the same content as other websites. Adjust your own articles, comments, and insights, you will make you more tribute you, respect you. For example, some English tutorials, writing some software usage, analyze some instances Production process. After all, it is a personal home page. To reflect your personality, style, let everyone know, accept your point of view, is the spirit of the personal home page!

5. The image of the image should take into account the size and beautiful. Generally, master the powerful tools of photophop, and then cooperate with other special image software such as Ulead, Paint Shop Pro, etc., it is not difficult to make beautiful and beautiful pictures. But the picture is for the homepage content, don't let the entire layout of a flower, green, and a lord. You can find a lot of pictures, gallery, and animations.

6. Do not use the large-scale Java program, you can use JavaScript to replace the effect, try not to use Java. Because the current Java's running speed is slow, people can't stand, often make the viewers don't have patient and other pages all displayed, So your careful design is no effect!

7. Single picture should not exceed 30k, no more than 60K (general situation) per page. According to statistical analysis, no more than 60K pictures per page, the speed of downloading can be accepted. All pictures must "Weight Loss" small picture (100X40) can generally be controlled within 6k, animation control within 15K, larger pictures can be "split" into small pictures. Reasonable use JPG and GIF format is also crucial, colorful and high resolution Using JPG, color monotonous low resolution with GIF, with pictures of GIF89A format to interleave with Download Download.

8. The picture download is slower. If you want the user before the image is not passed down, you can know the content on the image. We must add it to the picture. This way, when the image is not displayed, you can By annotation, help the viewer know that this is a picture about what is the image, so that the user will make a choice, whether you need to wait, can you click. Especially for the convenience of plain text viewers. 9. When designing the web page, you must use 640 × 480 and 800 × 600 resolution to observe respectively. Many browsers use 640 × 480 resolution, although it looks very attractive at 800 × 600 high resolution, but in 640 × 480 mode, it may be eclipsed. Do a little hard work, design a web page that can be displayed in different resolutions.

Back to the directory to put the very channel - Very Electronic Newspaper recommended to friends □ ... smart with CSS Border property Feng Yongyin Huangshan Village

People who make web pages have experience in the painting line, this paper introduces the tip of this article Maybe help you. Let's first meet "Border" (Picture Box), it is a property of CSS, use it to determine the range of HTML tags (such as TD, DIV, etc.) sessions, which can define the type, width of the frame line And color, use this feature, you can make some special effects. The application skills will be explained below.

1, give text plus border

In the example above, a different border is added to a paragraph, just to illustrate the color of the frame, thickness is variable. The CSS code of the first frame is: style = "border: thin solid red"; "Border" The meaning of the three parameters behind: The width of the frame line is: Thin (thin line); the type of the border line: Solid Solid line); color of the frame line: RED (red). We define the border, actually, set these three parameter values.

The width of the frame line has three standard values: Thin (thin line), MEDIUM (medium thick line) and Thick (thick line), but also custom width, such as: 1pt, 5px, 2cm, etc.

The type of the frame line has nine determined values: None (boundless frame), Dotted (dotted by point consisting), Dashed (dotted by short-term), Solid (solid line), Double (double line, double line width The width of the blank portion between them is equal to the width of the Border-Width definition), the Groove (3D grooved border), Ridge (3D ridge border), INSET (3D inner border, deep color), OutSet (3D outer frame, shallow color), Note: If the system does not support the properties values ​​of these borders, "Dotted", "Dashed", "Double", "Groove", "Ridge", "INSET", " Outset "will be replaced by" Solid ".

The color of the frame line: You can use hexadecimal color code, such as # 00ffc.

As can be seen from the above, it is really simple to give the text, and the settings of the few borders behind the above case, I don't tell you! Tell you here little skill, give a text plus border, you can add CSS to the

mark; give a few paragraphs to add the border, first enclose the text with the DIV mark, then add CSS to < Div> Mark; if you want to add a few different borders, you need to put your text in the form, add CSS to the tag, please. 2, give navigation menu plus separation line

The small white line in this example is of course you can do with images, but I am here to draw a side of the border with CSS's "Border" extension attribute, which is much less like this code. The single side of the selection border is similar to the four sides of the border of the above case, and the attributes of the four sides of a border are as follows:

Border line Name: Border-Top The value is the same as the "BODER" attribute. As in this example, the left frame of each cell is to be the white line, the width of the line is "1PX" solid line, then the CSS code is: style = "border-left: 1px solid #ffff".

When a side frame is defined separately, if a value is given, then the default initial value is taken. Defining CSS in Dreamweaver is very convenient, do not write code; put the commonly used edge frame once, put it in an external CSS file, you want to call it, it is very convenient.

3, using different widths and colors in a border

In this example, it is of course possible to implement the method in the above example, but that is too much, another combined method can be used, and the attribute value of the four sides is classified together, and the code of this example is Such:

Style = "Border-style: Solid; Border-Width: Thin Thick thrick; border-color: # 0000ff00 # 00ff00 # 0000ff # 0000FF".

As can be seen from the above, I define the type, width and color of the side frame, and pay attention to a few points here:

First, the location order of the four frame lines is: the upper frame, the right frame, the lower frame line, the left frame;

Second, I have only one solid line type in this case, and the four edges can also be defined separately;

Third, the attribute value can define one, two, three or four. If only one attribute value is defined, the remaining three automatically take the same value, such as: Border-style: Solid is exactly the same as the Border-style: Solid Solid Solid Solid; if only two or three values ​​are given, then missing The attribute value of the side will take the same value as the opposite side. Such as: BODER-WIDTH: Thin Thick is the same as Border-Width: Thin Thick Thick effect, Border-Width: 1px 2px 3px is the same as Border-Width: 1px 2px 3px 2px.

The flexible application of the Border property can produce many special effects, the method is the same as the above, no longer an example.

Back to the directory Take a very channel - Very Electronic Newspaper recommended to friends □ ... Photoshop Ctrl, Shift and Alt Miss Photoshop is a graphic image processing software that many friends are familiar with, I am deeply crying when using Photoshop Ctrl , There are a lot of SHIFT and ALT three-bonds, and the three keys can greatly improve graphic image processing efficiency. The experience of this three-button will now be summarized as follows for friends who love Photoshop. First, Shift, Alt when choosing objects

1. Elliptical Marquee Tool and Rectangular Selection Tool (Rectangular Marquee Tool).

The ellipse (rectangular) selection tool can select an ellipse (rectangular) area in the image.

(1) Elliptic selection tool Quickly select a circular (rectangular selection tool to quickly select square).

First select the EllipTical Marquee Tool (or Rectangular Marquee Tool), move the mouse pointer to the object you want to select, click the left mock and drag, press the Shift button, let the left click, let go, let go The SHIFT key can be selected or the square or square.

(2) Establish selection from central point

First select the EllipTical Marquee Tool (or Rectangular Marquee Tool), move the mouse pointer to the selected object, click the left button in the center point and drag, press the Alt key, such as the left picture, complete the selection, first Start the left button, release the Alt key, so you quickly complete the selection starting from the center point.

(3) Creating a circular (or square) selection from central point

First select the Elliptical Marquee Tool (or Rectangular Marquee Tool), move the mouse pointer to the selected object, click the left button in the center point and drag, press the Alt and Shift keys, let the left miles after the selection is complete. Also release the Alt and Shift keys.

2. Transition between Lasso (Subso) Tools Group

The Lasso tool group helps users generate borders that are very complex selection areas, which generates the selection area of ​​the boundary as a curve, and the Polygon Lasso Tool (Polygon Subworker) generates the selection of the boundary as a line. area.

(1) Convert to Polygon Lasso Tool from Lasso Tool

First use the Lasso Tool to select the profile of the curve profile, keep the left mouse button to press the state, press the Alt key to release the left button, then the selection of the fold line profile is available. (Keep the ALT key when the line profile is selected.)

(2) Restore from Polygon Lasso Tool as lasso Tool

After the Polygon Lasso Tool is selected, the left mouse button is kept to press the left button, and the ALT key can be used to select the profile of the curve. (When the ALT button is released, you should also keep the left mouse button to press the state).

Second, the use of Shift and Alt keys when choosing

1. If you want to increase the selection area, press the Shift key (a plus sign next to the mouse pointer), select the object to be added, and the current selection is added.

2. If you want to subtract a part of the selection area, press the Alt key (a minus sign next to the mouse pointer), select the object you want to remove, and then subtract the current selection from the existing selection.

3. If you want to keep two parties that have a coincide with the selection area, first select the first selection domain, press the Shift and Alt keys (one by one next to the mouse pointer), then select the second selection domain, so that two Select the part of the coincide. Third, the use of the Shift key when the transformation is selected

Use the Free Transformation command to achieve transformation of the selected zoom, rotation. When this command is used, the transform rectangle appears to place the mouse pointer on the small square box on the transform rectangle angle, the mouse pointer becomes a double arrow, the user can adjust the size of the selected size, press SHIFT After the key is dragged, the two direction proportion of the selected can remain unchanged.

Fourth, the use of Ctrl, Shift, and Alt keys when moving

Mobile selection

Select the object, press the CTRL button, move the mouse pointer to the selection (the mouse pointer with a scissors appear on the screen), after dragging to the destination, loosen the Ctrl key and mouse left mouse.

2. When you move the selection, press the SHIFT button to limit the direction of movement to the horizontal, vertical or 45 degree direction.

3. When you use the arrow keys to move the selected, press the SHIFT key to move 10 pixels at a time.

4. Move and copy

Select the object, click the ALT key after clicking the Move Tool mobile tool, move the mouse pointer to the selection (the mouse pointer turns into a double arrow), drag to the destination, release the left mouse button and the Alt key.

V. Use of Shift, Alt key when moving auxiliary line

Auxiliary lines can help users handle images with precise scale. To move the auxiliary line, first select the mobile tool Move Tool, move the mouse pointer to the auxiliary line, drag the auxiliary line to the new location, press the SHIFT button while dragging the secondary line to the grid point, or A certain size unit moves. When dragging, press the ALT key to change the auxiliary line: If the horizontal auxiliary line is dragged, press the Alt key when dragging, turn a vertical auxiliary line, and the vertical auxiliary line passes through the mouse pointer; if it is vertical The auxiliary line, press the ALT key when dragging, turn the horizontal auxiliary line, and the horizontal auxiliary line passes through the mouse pointer.

Sixth, the use of the Alt key when portrayed

When using the Line Tool line tool, press the SHIFT button to force the straight line to level, vertical or 45 degrees.

Seven, the use of the ALT key when the path anchor points

The depiction of the path is performed by the Pen Tool Pen Tools. After painting a curve segment, hold down the Alt key and click the wireful point to delete the handle, which can convert the smoothing into a corner point; hold down Alt The keys and drag the just established smoothing point can convert the smoothing into the angle (sometimes called inflection points) with two handles.

8. Use the use of Shift and Alt keys when selecting

Select Direct Selection Direct Select Tools, click any of the anchors in the path, indicating that it is selected, and the SHIFT button can be selected, if you press the Alt button, click on the path, All anchors are selected.

Nine, adjust the use of the ALT key under the curve command

The Curves adjusts the curve command to adjust the hue range of an image. Open the Curves Command dialog, the graphical grid in the dialog box can be adjusted. If you want to make the grid becomes smaller, just press the Alt button and click the grid again, then press the Alt button again and click the grid to make the grid Ge Relic.

Back to the directory Take the very channel - Very Electronic Newspaper recommended to friends □ ... Ultradev4.0 Using Frequent Error Gate when using Ultradev4.0, you will often encounter "... JavaScript

Error ... ", the software exits an error. In fact, this problem is related to the stability and compatibility of Ultradev4,

There are many reasons for a phenomenon:

1. Reason for the database: When designing the database, the fields in the data table should avoid using Chinese, and do not use some

The reserved word in Abscript is the best way to add a prefix or suffix before the name. There is also a database used in the database.

There will be an error, and it is generally re-established a data sheet or the library can be solved (I have met such a thing, look at the barbarian database.

It is an error, and it is better to reconstruct it);

2. When the page has been edited multiple times, the behavior deleted in the server behavior window sometimes leaves many ASP residual code, this will

Resulting in your page editing or test error, etc.. So sometimes you care more about the source code after editing;

3. Excessive installation plugins sometimes cause UltraDev execution errors. This error can cause Ultradev crash,

In fact, because the plug-in authors do not consider the weekly, I have encountered an UPDATE data operation.

Increase the current page code five times, and finally remove some plugins solved. Therefore, it is best to remove it for unused plugins;

4. Do not place the Access database in the design status when performing the Ultradev database link, otherwise it will not be linked.

When you preview the ASP page, you will be wrong, and if you don't pay attention, this problem is enough to be busy;

5. ElTradev4 conflicts with several memory residents, such as the early Jinshan poison tyrants even Ultradev4

I can't open it, so I only try to open the background program less.

6. There is a user grade setting in the Ultradev4 production login system, and the level name here is not used.

Wen, otherwise it will definitely be wrong.

7. "... JavaScript Error ..." When the data source is established, it usually has an error, even if you

Setting the data source correctly will also report an error, it is best to restart Ultradev, and then restart the operating system, the user level asked

I am trying to solve this problem (for solving JS errors, reloading Ultradev or even reloading operating systems).

8. Operating systems There will be more or less effects on Ultradev. Usually used Windows2000 Server

Windows 98 Personal Web Server is good, one is stable, breaded with IIS5.0 without having to find server software

, And I found that the probability of an error is also a lot.

User using Ultradev4.0 is best upgraded to 4.01, it is published in Macromedia, modified some

Error, avoiding some common problems, my website has a brief description of download and upgrade package.

9. Don't use any Ultradev Chinese package. I used the Chinese package when I used Ultradev1.0, and the results always appeared.

Unclear mistakes, I have never dared to use it. I heard that many netizens have similar situations in the forum, so I recommend UltraDev users.

Do not use the Chinese package.

These are some of the experiences and solutions for I am using Dreamweaver Ultradev for more than half a year.

Method, I hope to help you use UltraDev. For software launched in June 2000, there are some bugs that belong to normal.

The key is how to accumulate experience in use to deal with it. In fact, there are many people who don't care for Dreamweaver Ultradev.

In order to be a chicken rib product ... but I think he is a good way to learn the ASP, because it can make you make it in the shortest time.

The power of the learned Web program is achieved.

转载请注明原文地址:https://www.9cbs.com/read-70791.html

New Post(0)