As you can see now, the layout design of the web page is getting more important. Visitors are reluctant to see sites that only pay attention to content. Although the content is important, only when the webline layout and web content are successfully engaged, this web page or the standpoint is like it. Take any side you can't keep too "picky" visitors.
I. Basic concept of web page layout
At the beginning, the web page is presented in front of you, it seems like a white paper, it needs you to sway your design. At the beginning, you need to understand, although you can control all what you can control, but if you know what is a conventional criteria or most visitor's browsing habits, then you can be on this Plus your own things. You can of course create your own design, but if you are an initiator, then it is best to understand the basic concept of the web layout.
1. Page size:
Since the page size and display size and resolution are related, the limitations of the web page is that you cannot break through the range of the monitor, and because the browser will also take a lot of space, leave a page range giving you more and smaller. . In the case of 800x600, the display size of the page is: 780x428 pixels; the resolution is 640x480, the display size of the page is: 620x311 pixels; the resolution is 1024x768, the page display The size is: 1007x600. As can be seen from the above data, the higher the resolution, the larger the page size.
The toolbar of the browser is also why the page size is affected. Generally, the current browser toolbar can be canceled or added, then when you display all the toolbars, the size of the page is different when you turn off all toolbars.
Drag the page is the only way to add more content (sizes) to the web page during the web design process. But I want to remind you that unless you can affirm the content of the site can attract everyone to drag, don't let the visitors drag the page more than three screens. If you need to display more than three screens on the same page, you can easily connect to the page on the page, which is convenient for visitors to browse.
2. Overall shape:
What is a shape, the shape is the image of the object being created. Here is the overall image of the page, which should be a whole, the joining of graphics and text should be stacked in order. Although the display and browser are rectangular, for the shape of the page, you can make full use of other shapes in nature and their combinations: rectangles, circles, triangles, diamonds, etc.
For different shapes, the significance of them is different. For example, the rectangle represents formal, rules, you noticed that many ICPs and government web pages are integrated with rectangles; the circular is soft, united, warm, safe, etc., many fashion sites like to shape the entire shape of the page; The triangle represents power, authority, firm, aggression, etc., many large commercial sites to show its authority is always a top shape in triangles; rhombus represents balance, coordination, fairness, and some dating sites often use rhombuses as a page integral shape . Although different shapes have different significance, most of the current web pages is to engage a plurality of graphics, which may occupy more patterns in this graphics.
3. Top:
The header can be called the header, the role of the header is the theme of the definition page. For example, most of the names of a site are displayed in the header. In this way, the visitor can quickly know what this site is. The page is the key to the entire page design, which will involve more design and coordination of the entire page. Pagettons often place images and company logos and banner advertisements of site names.
4. Text:
Text appears in the page or block (paragraph), and their placement position determines the visibility of the entire page layout. In the past, due to the limitations of page production techniques, the location of the text placed is very small, and with the rise of DHTML, the text can be placed in any location of the page in accordance with its own requirements. 5. Footer:
Footers and page heads echo. The page is placed places where the site topics are placed, while the footer is placed in places or company information. You can see that many production information is placed on footage.
6. Picture
The picture and text are two major components of the web page, but it is not. How to handle the position of pictures and texts into the key to the entire page layout. And your layout thinking will also be reflected here.
7. Multimedia
In addition to text and pictures, there are sounds, animations, videos, etc. Other media. Although they are not often utilized, they will become more important as the web page layout is even more important as the dynamic web page.
2. Method for web page layout
There are two methods for web-layout, the first is the layout of paper; the second is a software layout. The following introduces:
1. Paper layout method
Many web makers don't like the sketch of the page layout, but the design layout directly in the web designer. This method of nothing can not allow you to design outstanding web pages. So when you start making a web page, you must first draw a layout sketch of your page.
Prepare a number of white paper and a pencil, you have to design a fashion site.
* Size selection:
Currently, the resolution of the general 800x600 is the conventional browsing mode. So in order to take care of most visits, your size is based on 800x600 resolution.
* Selection of styling:
Picture of a symbolic browser window on white paper, this rectangle is the range of your layout. Choose a shape as the topic shape of the entire page, we choose a circular, because its representative is soft, and the fashion is commensurate, and then draw in the rectangular frame, you can try to add some round or other shapes. This draws this, you will find a mess. In fact, if you want to design a perfect layout, it is more difficult, and you have to find a special shape hidden in this seemingly chaotic graph. Also note that you don't worry if your design is capable of implementation. In fact, as long as the layout you can think of can rely on today's HTML technology.
Taking into account the left left sagged arc, in order to obtain a balance We add a rectangle on the right side of the page (or a line segment).
* Add page:
.jpg is a layout style we got from .jpg and 2.jpg, then we will add the page. The general page is located at the top of the page, so we add a page header to .jpg, in order to take a balance in the left arc and the rectangle, we add a rectangular page and allow the page header to intersect the left arc .
* Add text:
The blank section of the page adds to the text and graphics. Because there is a rectangle on the right side of the page as a froun, the text is placed in the blank portion does not coordinate because the left arc is not coordinated.
* Add image:
The picture is the beautification page and the media must be described. Here you add pictures to the appropriate place.
After several steps, a fashion page of a fashion page appears. Of course, it is not the final result, but an important reference for you in the future.
2. Software layout method
If you don't like to draw your layout with a paper, you can also use the software to complete these work. This software is Photoshop. Photoshop has the editing function of the image to be more eye-catching on the design web page layout. Unlike paper, you can use Photoshop to easily use color, use graphics, and you can use the layer's function to design the paper impossible layout.
Third. Techniques for web layout
1. Application of laminated style sheet
In the new HTML 4.0 standard, the CSS (laminated style sheet) is proposed, it can fully and accurately position text and pictures. CSS is a bit complicated for beginners, but it is indeed a good layout method. The idea you have not implemented can be implemented using CSS. At many sites, the use of stacked style sheets is an excellent manifestation. You can find a lot about CSS introductions and how to use it online. 2. Table layout
The form layout seems to have become a standard, just browse a site, they must be layout with a table. The advantage of the form layout is that it can be handled different objects without worrying about the impact between different objects. Moreover, the table is more convenient to locate the picture and text compared to CSS. The only disadvantage of the form layout is that when you use too many tables, the page download speed is affected. For the form layout, you can find a site, then save it as an HTML file, use the web editing tool to open it (the software you want to see), how you will see how this page uses a table.
3. Frame layout
I don't know what the original, the page of the frame structure begins to be disliked by many people, possibly because of its compatibility. However, from the layout, the frame structure is not a good layout method. As with the form layout, place different objects into different pages, because the frame can cancel the border, so it is generally not affecting the overall beauty.
I have been introduced today is not all of the web layout technology. In a sense, I want to guide you when making a web page, how to put pictures and text is just right, and how to have a design design thinking.
