Webpage Design-[webpage methods and skills]

In terms of web page design, many people seem to be stuck at the height of web page creation. I think that as long as the web page creation software is used, we can do a good job in web page design ......

In terms of web page design, many people seem to be stuck at the height of web page creation. I think that as long as the web page creation software is used, we can do a good job in web page design.
In fact, web design is a complex process that combines perceptual thinking and rational analysis. Its direction depends on the design task. Its implementation depends on the production of web pages. In the so-called "Kung Fu outside poetry", the most important thing in web design is not in the application of software, but in our understanding of web design and the level of design and production, it lies in our own aesthetic and our grasp of the page.

First, we need to figure out the webpage design task.

I. design tasks

Design is an aesthetic activity. Successful design works are generally artistic. However, art is only a means of design, not a task of design. The task of design is to realize the intent of the designer, not to create beauty.

The task of Web Design refers to the themes and functions to be implemented by the designers. The nature of the site varies with the design tasks. In terms of form, websites can be divided into the following three types.

The first category is information websites, such as Sina, Netease, and Sohu. This type of site will provide visitors with a large amount of information and a large amount of traffic. Therefore, you must pay attention to issues such as page segmentation, reasonable structure, page optimization, and interface affinity.

The second category is websites that combine information and images, such as large companies and domestic universities. Such websites have high design requirements. They must ensure the above requirements of information websites and highlight the image of enterprises and organizations. However, in terms of the status quo, such websites are suspected of being shoddy.

The third category is image websites, such as small and medium enterprises. Such websites are generally small, some have several pages, and the functions to be implemented are relatively simple. The main task of web design is to highlight the corporate image. Such websites have high requirements on the level of designers.

Of course, this is only an overall analysis of the specific situation. Different Sites must be treated differently. Don't forget the most important thing, that is, the customer's requirements. It is also a design task.

After clarifying the design task, the next step is how to complete the task.

Ii. Design implementation

The implementation of the design can be divided into two parts. The first part is site planning and sketch drawing, which can be completed on paper. The second part is web page creation, which is completed on the computer.

The first step to design the homepage is to design the layout. We can edit webpages as traditional newspapers, magazines, and even animations, what we need to do is to exhaust images and text in different locations on the page in the most appropriate way. In addition to a well-configured computer, software is also required. It cannot be simply said that a piece of software is good or bad, as long as it is convenient for the designer to use and can be handy, it can be called good software. Of course, it should be able to meet the requirements of designers. My commonly used software is Macromedia's Dreamweaver, fireworks, Flash, Adobe's Photoshop and imageready. These are all very good software. What we need to do next is to turn the design blueprint into reality through the use of software, and the final integration is generally completed in Dreamweaver. Although we have made a general outline of the page on the sketch, the inspiration is generally generated during the production process. Design works must be creative. This is the most basic requirement. A non-creative design fails. During the production process, we will encounter many problems, the most sensitive of which is the page color.

3. Use of colors

Color is a strange thing. It is beautiful and rich. It can arouse human perception. In general, red is the color of fire, enthusiasm, and unrestrained; also the color of blood, can represent life. Yellow is the highest brightness color, looks gorgeous, noble, Bright. Green is the color of natural vegetation, which means pure nature and growth. It symbolizes peace and safety, such as green food. Purple is a symbol of elegance and has a solemn sense. White can give people a pure sense of purity and innocence, indicating peace and holy.

We know that color is produced by the refraction of light, and red, yellow, and blue are the primary colors. Other colors can be combined with these three colors. In another way, we can use color changes to express the effect of light and shade, which will undoubtedly make our work closer to reality.

Color represents different emotions and has different symbolic meanings. These symbolic meanings are a complex problem in people's ideological exchanges, it varies with age, region, times, ethnicity, class, economic region, working ability, education level, customs, religious belief, living environment, and gender.

A pure color has no practical significance. It works differently with different colors. For example, the combination of green, golden, and pale colors can produce an elegant and comfortable atmosphere. The combination of blue and white reflects a soft, elegant, and romantic atmosphere. The combination of red and yellow and gold can render a festive atmosphere. The combination of gold and corn brings warmth to people. The color scheme varies depending on the design task. Considering the adaptability of the web page, we should try our best to use the secure color of the web page.

However, there are no rules for color use. If you must use a rule to set the color, the effect will only be counterproductive. In terms of experience, we can first determine a subject color that can express the subject, and then use the color approximation and comparison to complete the color scheme of the entire page. The whole page should be visually integrated to achieve a harmonious and pleasing visual effect.

Iv. Combination of shapes

In webpage design, we mainly express themes through visual communication. Shape is an important element in visual communication. All elements on the screen can be processed as the basic elements of the screen, such as points, lines, and surfaces. In a successful file, you need to combine and match points, lines, and surfaces to construct the entire page.

Usually we can use a combination of order, proportion, balance, symmetry, continuity, interval, overlap, repetition, InterAction *, rhythm, rhythm, induction, variation, close-up, reflection, and so on, they all have their own characteristics. In the design, we should select the most suitable performance method based on the actual situation, which is conducive to the performance of the topic.

Through the combination of points, lines, and surfaces, you can highlight the important elements on the page, highlight the design themes, enhance the aesthetic, and let the viewer understand the design themes in the Process of feeling the beauty, to implement the design task.

The clever use of styling not only brings a great aesthetic, but also can better highlight the corporate image, and can organically organize various elements on the web page, it can even guide the viewer's sight.

V. Design Principles

There are principles in design. No matter what method is used to combine elements in the screen, there must be five major principles: unity, coherence, segmentation, comparison and harmony.

Uniformity refers to the integrity and consistency of design works. The overall effect of the design work is crucial. Do not isolate the components in the design, which will make the picture show a messy effect.

Coherence refers to the relationship between pages. In the design, the internal links and expressions of each component should be used to echo each other, and the consistency of the whole page design style should be paid attention to achieve visual and psychological coherence, the entire page is designed to be extremely harmonious, just like in one breath.

Splitting refers to dividing a page into several small parts, which are visually different, so that the viewer can see at a glance. When there is a large amount of information, it is important to note that the picture is effectively divided. Splitting is not only a manifestation of the need. In other words, segmentation can also be considered as a classification and Induction of page content.

Comparison is to make the design more angry through contradictions and conflicts. There are many comparison methods, such: multiple and few, Qu and straight, strong and weak, long and short, coarse and fine, sparse and secret, virtual and real, master and times, black and white, dynamic and static, beautiful and ugly, gathering and dispersing. Be cautious when using the comparison. If the comparison is too strong, it will easily damage the aesthetic and affect unification.
Harmony means that the whole page conforms to the beautiful law and is integrated with one another. If a design work is only a random mix of colors, shapes, and lines, the work will not only have a sense of life, but also cannot realize the communication function of visual design. Harmony depends not only on the structure, but also on whether the visual effect of the work can communicate with people's visual feelings and resonate with the soul. This is the key to successful design.

Vi. webpage Optimization

In webpage design, webpage optimization is an important part. Its success or failure will affect the page browsing speed and adaptability, and influence the viewer's impression on the website.

In information websites, text is the largest component of pages, so font optimization is particularly important. It is necessary to use a CSS style sheet to specify the text style. Generally, we specify the font as, And the size as 12px. The color depends on the background color, in principle, we recommend that you see and match the entire page in harmony. On a white background, we generally use black, which makes it difficult to produce visual fatigue and ensures that visitors can browse the webpage for a long time.

Images are an important element in Web pages. Image optimization can minimize the size of images while ensuring the quality of browsing, which improves the download speed of webpages exponentially. You can use photoshop6 or fireworks4 to cut images into small pieces for optimization. The output format can be GIF or JPEG, depending on the actual situation. Generally, we optimize small pieces with more complex color changes to JPEG, and the small pieces with only simple color blocks to gif, which is determined by the characteristics of these two formats.

A table is an important element in a page and a primary means of page layout. You can set parameters such as the table width, height, border, background color, and alignment. Most of the time, we set the border of the table to 0 to locate the elements on the page, or use this to determine the relative position of each element on the page. We know that the browser is reading the original htmlCodeIt is displayed only after reading the entire table. If a large table contains multiple sub-tables, the sub-tables must be displayed together after reading the large table. When we visit some sites and wait for a long time without any results, we press the "stop" button to display the page for this reason. Therefore, when designing a page table, we should try to avoid embedding all elements in a table, and try to minimize the number of nested layers. When using Dreamweaver to create a webpage, an empty character "" is automatically added to each TD. If the cell is not filled with other elements, this empty character will be retained. After specifying the width or height of TD, you canSource code.

The adaptability of web pages is very important. on different systems, at different resolutions, and on different browsers, we will see different results. Therefore, we should make overall considerations during design. Generally, we create a web page under 800*600, and the best browsing effect is also at a resolution of 800*600. In other cases, we only need to ensure the basic consistency without a major problem.

After talking about this, I just want to help people who are doing "Webpage Design". I hope they can focus on the whole page while doing the webpage. It is worthy of the two words "design.

★Step ☆

It must be noted that building your own website is a huge project, which is generally troublesome. Therefore, we should follow certain steps step by step.

In my opinion, you can follow these steps:
1. First, set a local folder as the place where the website is stored. The best name is "My sites ".
2. Create some folders in the website folder, including "Images" (storing images and files), and create Several folders Based on the webpage content. (You can also separate the folders for storing images and files in each content folder)
3. Open your webpage and editProgram(Such as FP and dreamwear), create a webpage, and save it as "Index" (home page). Repeat the preceding steps to create "Search" in the website folder), "map" (site map), "index02" (website introduction, etc ).
4. Follow the steps above to create many webpages in the category folder of the website (and then enter the content into the webpage)
5. We have already done so much. Let's prepare the content. Create a folder "file" on the hard disk and put the prepared documents, images, programs, files, and webpage special effects. (You can add some dynamic webpages)
6. Slowly put these files into the web page without leaking them (master the skills)
7. Enrich the website. At this time, you should apply for a domain name (free space and additional fees are acceptable ). And put your website into a search engine, and publicize it on various message versions.
8. Upload the website to the space and delete the preparation file!

However, you can also use FP to build a website like this:

1. Select create site in FP.
2. Set the webpage name and title in navigation.
3. Prepare documents, images, programs, files, and special webpage effects, and add them to the website.
4. Apply for a domain name (free space and additional fees are acceptable ). And put your website into a search engine, and publicize it on various message versions.
5. Upload the website to the space and delete the preparation file. Complete.

If you use dreamwear to build a website, it will be more advanced! Dreamwear is very powerful, and friends who have installed it can study it.

In website design, web pages in pure HTML format are often referred to as "static Web pages". Early websites were generally made from static Web pages. The static Web page is usually in the form of www.example.com/eg/eg.htm, and is suffixed with .htm?.html=.shtml=.xml. Dynamic effects can also be displayed on HTML-formatted web pages, such. animated GIF, Flash, and scroll letters. These "dynamic effects" are only visually different from the dynamic web pages described below.

In Chapter 3rd of network marketing basics and practices, "network marketing-oriented enterprise website construction", this paper proposes the impact of static Web pages on search engines, there are few introductions to static webpages in the book, especially the characteristics of static webpages. The web marketing teaching website (www.wm23.com) briefly summarizes the characteristics of static web pages as follows:

(1) every webpage has a fixed URL, and the URL of the webpage is suffixed in common forms such as .htm?.html=.shtml, but does not include "?";
(2) once the webpage content is published to the website server, the content of each static webpage is stored on the website server, no matter whether there are users or not. That is to say, static web pages are files actually stored on servers. Each web page is an independent file;
(3) The content of static Web pages is relatively stable and therefore easy to be searched by search engines;
(4) static Web pages do not support databases and have a large workload in website production and maintenance. Therefore, it is difficult to rely solely on static Web page production when the website information volume is large;
(5) interactive interaction between static Web pages, which imposes great functional limitations.

Selection of web page creation software

U select a webpage editing tool suitable for you
After learning about the webpage type and related technologies, the next step is to select a webpage editing tool suitable for you.

Frontpage

FrontPage is developed by Microsoft and may be the simplest, easiest, but powerful webpage editing tool. Using a typical word interface design, as long as you know how to use word, it is almost equivalent to using FrontPage. Even if you do not understand the word, it does not matter. The "What you see is what you get" operation method will give you quick start, and you do not need to learn HTML syntax.

However, FrontPage also has its shortcomings: first, the browser is not compatible, and the Web pages made are often not displayed normally using Netscape; second, many garbage codes are generated, the code will also be modified automatically, causing extreme inconvenience in some cases; again, the support for DHTML is not good. However, in any case, FrontPage is indeed the best entry-level webpage editing tool.

Common versions include frontpage98 and frontpage2000.

Dreamweaver

Dreamweaver is another "WYSIWYG" Web editing tool for Macromedia products, or web page layout software. Different from FrontPage, deamweaver adopts the design style of floating panel on Mac, which may be difficult for beginners. However, when you get used to the operation method, you will find that the intuition and efficiency of Dreamweaver are incomparable to those of FrontPage.

Dreamweaver supports DHTML very well and can easily make many dazzling page effects. Plug-in-type program design allows unlimited extension of its functions. Dreamweaver has a very close combination of functions because it is a product of the same company and has a very close combination with three muskeys of Web Page production, flash and firework, also known as Macromedia. The latest Dreamweaver ultradev supports ASP and JSP. Therefore, Dreamweaver is not the first choice for advanced webpage creation.

The common versions are dreamweaver4.0 and Dreamweaver ultradev 1.0.

Flash

Flash is also a product of Macromedia, and Flash is the standard for interactive vector images and Web Animation. Web designers use flash to create a beautiful and scalable navigation interface and other distinctive effects. I believe that none of the people who have seen Flash technology do not want to master it. It is not only easy to learn, easy to use, but also can make websites with many animations, and combine sound and color, is a promising web page production technology.

Firework

Firework is also a product of Macromedia and a real web page drawing software. Fireworks is closely integrated with Dreamweaver. As long as the default Dreamweaver image editor is set to fireworks, the files modified in fireworks will be updated in Dreamweaver immediately. Another function is to change the color of a single word in the same text box. Of course, fireworks can reference all Photoshop filters and import PSD images directly. It is used for drawing. It is equivalent to combining Photoshop (dot matrix processing) and CorelDraw (vector drawing) functions. The effects of shadows, three-dimensional buttons, and so on the web page can also be clicked with the mouse, without any plug-in filters such as KPT. Moreover, fireworks fully supports the hexadecimal color mode of web pages and provides the use and conversion of secure color disks. It needs to cut images, make image maps, and make the background transparent, the diagram is small and beautiful. It is very convenient to do it in fireworks, and it is easy to modify the image. You don't need to open Photoshop, CorelDraw, and other software at the same time. You can switch between them.

Dreamweaver, Flash, and firework are called the three muskeys of Web Page production. They can be used together to produce very exquisite web pages.

Gifanimator

Ulead GIF animator 4.0 is currently the fastest and easiest to use GIF animation tool. It provides top-level functions in a software package for animation orchestration, editing, special effects, and optimization. GIF animator supports almost every major file format, including video files, and allows output to Windows Avi, QuickTime movies, Autodesk animations, or image sequences. You can generate appropriate HTML code to embed the animation into a webpage, and package the animation into an independent EXE file so that it can be published by email and viewed anywhere.

U production Homepage

Creating a home page is nothing more than adding text, adding images, and adding links. It is no different from using word. After a simple study, you will create a home page! However, there are too many things to learn to make a high-level homepage, but in summary, there are several parts: HTML, graphic production, animation production, page special effects production, and background program production.

U applies for the home page space and uploads the home page you created

The pages we create are placed on our own computers, which are invisible to others. To let others see the pages we make, we must place them on a computer (server) that is connected to the Internet. You can apply for a home page on the site that provides the space service. If you have space, you can use the response FTP (file transfer protocol) tool to upload the page we created. In this way, you can share your wonderful pages.

Common FTP tools include CuteFTP and LeapFTP. Their functions and usage are similar. For details about how to use them, refer toArticle.

It may be very simple for you to start the homepage, but this is your first step and a good start. Then you can learn how to make the webpage more beautiful? How to create an animation? For beginners, do not think about it all at once: How did a webpage become so beautiful? I really want to do it right away, so I will study complicated webpages right away, so that you will find it difficult to create web pages. I will give up after learning twice, so that I will never make a home page. I was so happy that my webpage could generate links for a long time, so I became more interested. Remember: do not become a master in one step. Otherwise, it is difficult to become a master.