Shulou(Shulou.com)06/02 Report--

This article mainly explains "the method of web page design with Dreamweaver". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the method of web page design with Dreamweaver".

First of all, we need to understand the task of web design.

I. the task of design

Design is an aesthetic activity, and successful design works are generally very artistic. But art is only a means of design, not a task of design. The task of design is to realize the designer's intention, not to create beauty.

The task of web design refers to the theme that the designer wants to show and the function to be realized. The nature of the site is different, the task of the design is also different. Formally, sites can be divided into the following three categories.

The first category is information sites, such as Sina, NetEase, Sohu and other portals. Such sites will provide visitors with a lot of information and a large number of visitors. Therefore, we should pay attention to the segmentation of the page, the reasonable structure, the optimization of the page, the affinity of the interface and so on.

The second category is the website with the combination of information and image, such as some larger companies, domestic universities and so on. This kind of website has higher design requirements, not only to ensure the above requirements of information websites, but also to highlight the image of enterprises and units. However, in terms of the current situation, this kind of website is suspected of being shoddy.

The third category is the image of websites, such as some small and medium-sized companies or units. This kind of website is generally small, some have several pages, the function that needs to be realized is also relatively simple, the main task of web page design is to highlight the corporate image. This kind of website has higher requirements on the artistic level of the designers.

Of course, this is only taken as a whole, and the specific situation needs to be analyzed in detail. Different sites should be treated differently. Don't forget the most important point, that is the customer's requirements, it also belongs to the design task.

After defining the task of the design, the next thing to think about is how to accomplish the task.

Second, the realization of the design

The implementation of the design can be divided into two parts. The first part is the site planning and sketching, which can be completed on paper. The second part is the production of web pages, which is completed on the computer.

The first step in designing the home page is to design the layout. We can edit the web page as a traditional newspaper and magazine, in which there are words, images and even animations. What we need to do is to arrange the pictures and text in different places on the page in the most suitable way. In addition to having a well-configured computer, software is also necessary. We can't simply say whether a software is good or bad, as long as it is convenient and handy for the designer to use, it can be called good software. Of course, it should meet the requirements of the designer. The software commonly used by the author is Macromedia's Dreamweaver, Fireworks, Flash and Adobe's Photoshop, imageready. These are all very good software. The next thing we need to do is to turn the blueprint of the design into reality through the use of the software, and the final integration is usually done in Dreamweaver. Although in the sketch, we set the general outline of the page, but the inspiration is usually generated in the production process. Design works must be creative, this is the most basic requirement, there is no creative design is a failure. In the process of production, we will encounter many problems, of which the most sensitive one is the color of the page.

Third, the use of color

Color is a strange thing, it is beautiful and rich, it can arouse the perception of human mind. Generally speaking, red is the color of fire, passionate and unrestrained, and it is also the color of blood, which can symbolize life. Yellow is the brightest color, which is gorgeous, noble and bright. Green is the color of natural vegetation, which means pure nature and growth, symbolizing peace and security, such as green food. Purple is a symbol of nobility, with a sense of dignity. White can give people a feeling of purity and innocence, indicating peace and holiness.

We know that color is produced by the refraction of light, red, yellow and blue are the three primary colors, and other colors can be reconciled with these three colors. In another way of thinking, we can use color changes to show the effect of light and shadow, which will undoubtedly make our works closer to reality.

Color represents different emotions and has different symbolic meanings. These symbolic meanings are a complex issue in the exchange of ideas among people. it varies according to people's age, region, time, nationality, stratum, economic area, working ability, education level, customs, religious beliefs, living environment and gender differences.

Simple color has no practical meaning, and with different colors, it shows different effects. For example, green and golden, light collocation, can produce an elegant, comfortable atmosphere. The mixture of blue and white can reflect the gentle, elegant and romantic atmosphere. The collocation of red, yellow and gold can render a festive atmosphere. The collocation of gold and millet will bring warmth to people. The design task is different, the color scheme is also different. Considering the adaptability of the web page, you should try to use web-safe colors.

But the use of color does not have a certain law, if you must use a certain law to cover, the effect will only be counterproductive. Empirically, we can first determine a main color that can represent the theme, and then according to the specific needs, apply color approximation and contrast to complete the color scheme of the whole page. The whole page should be a whole visually, in order to achieve a harmonious and pleasing visual effect.

Fourth, the combination of modeling

In web design, we mainly express the theme through visual communication. In visual communication, modeling is a very important element. Throwing away the question of whether it is a picture or a text, all the elements on the screen can be dealt with as the basic elements of the picture, such as points, lines and surfaces. In a successful work, the combination and collocation of points, lines and surfaces are needed to construct the whole page.

Usually the combination techniques we can use are order, proportion, balance, symmetry, continuity, interval, overlap, repetition, intersection *, rhythm, rhythm, induction, variation, close-up, reflection and so on, all of which have their own characteristics. In the design, we should choose the most suitable means of expression according to the specific situation, which is conducive to the performance of the theme.

Through the combination of point, line and surface, we can highlight the important elements on the page, highlight the theme of the design, enhance the sense of beauty, and let the viewer understand the theme of the design in the process of feeling beauty, so as to realize the task of the design.

The ingenious use of modeling can not only bring great beauty, but also better highlight the corporate image, but also organically organize the various elements on the web page, and it can even guide the viewer's line of sight.

V. principles of design

Design has principles, no matter what method is used to combine the elements in the picture, we must follow five major principles: unity, coherence, segmentation, contrast and harmony.

Unity refers to the integrity and consistency of design works. The overall effect of the design work is very important, do not separate the components in the design, that will make the picture show a messy effect of branches and vines.

Coherence means to pay attention to the interrelationship of pages. In the design, we should make use of the internal relationship of the various components in the content and the mutual echo in the form of expression, and pay attention to the consistency of the whole page design style, so as to achieve visual and psychological coherence, so that all parts of the whole page design are extremely harmonious. It's like doing it at one go.

Segmentation, refers to the page is divided into a number of small pieces, there are visual differences between small pieces, so that the viewer can see at a glance. When there is a lot of information, in order to enable the viewer to see clearly, it is necessary to pay attention to the effective segmentation of the picture. Segmentation is not only the need of the form of expression. On the other hand, segmentation can also be seen as a classification of page content.

Contrast is to make the design more alive through contradictions and conflicts. There are many contrastive techniques, such as: more and less, curved and straight, strong and weak, long and short, thick and thin, sparse and dense, virtual and real, primary and secondary, black and white, dynamic and static, beauty and ugliness, gathering and scattered, and so on. In the use of comparison should be cautious, the contrast is too strong easy to destroy the sense of beauty, affect the unity.

Harmony means that the whole page conforms to the law of beauty and is integrated. If a design work is only a random mixture of colors, shapes, lines, etc., then the work will not only have no "sense of life", but also can not achieve the communication function of visual design. Harmony depends not only on the structural form, but also on whether the visual effects formed by the works can communicate with people's visual feelings and produce spiritual resonance. This is the key to the success of the design.

VI. Optimization of web pages

In web page design, web page optimization is a more important link. Whether it is successful or not will affect the browsing speed and adaptability of the page, and affect the viewer's impression of the website.

In information websites, text is the largest component of the page, so font optimization is particularly important. Use the css style sheet to specify the style of the text is necessary, usually we specify the font as the Song style, the size specified as 12px, the color depends on the background color, in principle to be able to see clearly and with the entire page to prevail. On the white background, we generally use black, which is not easy to produce visual fatigue and can ensure that visitors can browse the web for a long time.

Picture is an important element in a web page. The optimization of pictures can minimize its size while ensuring the browsing quality, which can double the download speed of the web page. Using Photoshop6 or Fireworks4, the picture can be cut into small pieces and optimized separately. The format of the output can be gif or jpeg, depending on the situation. Generally speaking, we optimize the small pieces with more complex color changes to jpeg, and the cartoon blocks with only simple color blocks to gif, which is determined by the characteristics of these two formats.

Table is an important element in the page and the main means of page typesetting. We can set the width, height, border, background color, alignment and other parameters of the table. In many cases, we set the border of the table to 0 to locate the elements on the page, or to determine the relative position of the elements on the page. We know that when browsers read the original html code of a web page, they read the entire table before displaying it. If a large table contains multiple sub-tables, you must wait for the large table to be read before the sub-tables can be displayed together. When we visit some sites, we wait for a long time without results, but press the "stop" button to display the page for this reason. Therefore, when designing a page table, we should try to avoid nesting all elements in a single table with as few levels of table nesting as possible. When you use Dreamweaver to create a web page, an empty character is automatically added to each td. If no other elements are populated in the cell, the empty character is retained and can be deleted from the source code after specifying the width or height of the td.

The adaptability of web pages is very important, in different systems, different resolutions, different browsers, we will see different results, so the design should be considered as a whole. Generally speaking, we make web pages under 800cm 600, and the best browsing effect is also at 800pm 600 resolution. In other cases, as long as it is basically consistent, there are no major problems.

Having said so much, I just hope that it can be helpful to the people who do "web design". I hope they can look at the web page as a whole and live up to the word "design".

A better step for ★ to build his own website ☆

It must be noted that: the establishment of their own website is a huge project, generally more troublesome. Therefore, we should follow certain steps step by step.

I think the construction of the station can be carried out in accordance with the following steps:

1. First set up a folder locally as the storage place for the website. The best name is "My Sites".

2. Set up some folders in the website folder, including "images" (storing pictures, files, etc.), and create several folders according to the contents of the web page. (you can also make some folders for storing pictures and files in each content folder.)

3. Open your web editing program (such as FP, Dreamwear, etc.), create a new web page, save it as "index" (home page), repeat the above steps, and create "search" (find), "map" (site map), "index02" (site introduction, etc.) in the website folder.

4. Follow the above steps to create a number of web pages in the site category folder (and then enter the content into the web page)

5. Having done so much, it is time for us to prepare the content. Create a folder "File" on your hard drive to put prepared documents, pictures, programs, documents, web effects, etc. (you can add some dynamic web pages)

6. Slowly put these documents into the web page one by one (master skills)

7. Enrich the website, and it's almost enough. At this time, you should apply for a domain name (free space or additional fee is fine). And put their own website into the search engine, and promote it on various message boards.

8. Upload the website to the space, delete the preparation file, and OK it!

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

1. Select the new site in FP.

2. Then set the page name and title in the Navigation.

3. Prepare documents, pictures, programs, documents and web special effects, etc., and enrich them into the site.

4. Apply for a domain name (free space or additional fee is fine). And put their own website into the search engine, and promote it on various message boards.

5. Upload the website to the space and delete the preparation file. Over and out.

If you use Dreamwear to build a station, it will be even more advanced! Dreamwear is so powerful that friends who have installed it can study it.

In website design, web pages in pure HTML format are often called "static web pages", and early websites are generally made of static web pages. It is suffixed with .htm, .html, .shtml, .xml, etc. In HTML format web pages, there can also be a variety of dynamic effects, such as .GIF format animation, FLASH, scrolling letters, etc., these "dynamic effects" are only visual and are different from the dynamic web pages that will be introduced below.

In Chapter 3 of the second edition of "Network Marketing Foundation and practice", "Network Marketing-oriented Enterprise website Construction", this paper puts forward the influence of static web page on search engine, and there is little introduction to static web page itself. in particular, there is no special introduction to the characteristics of static web pages. The characteristics of static web pages are briefly summarized as follows:

(1) static web pages each page has a fixed URL, and the web page URL is suffixed with .htm, .html, .shtml and other common forms, but does not contain "?"

(2) once the web page content is published to the website server, the content of each static web page is saved on the website server, regardless of whether the user visits it or not, that is to say, the static web page is a file actually saved on the server. each web page is a separate file

(3) the content of static web pages is relatively stable, so it is easy to be searched by search engines.

(4) static web pages do not have the support of database, and there is a large amount of work in website production and maintenance, so it is difficult to rely entirely on static web page production when the website has a large amount of information.

(5) the interaction of static web pages is crossed, which has great limitations in terms of function.

The selection of Web Page making Software

U choose a web editing tool that suits you

After understanding the types of web pages and related technologies, the next step is to choose a web editing tool that suits you.

Frontpage

Frontpage, produced by Microsoft, is probably the simplest, easiest, yet powerful web editing tool. With a typical Word interface design, as long as you know how to use Word, it is almost equivalent to already using Frontpage. It doesn't matter if you don't know Word, WYSIWYG will get you started quickly, and you don't have to learn HTML grammar.

But Frontpage also has its shortcomings: first of all, the browser compatibility is not good, the web page, often can not be displayed normally with Netscape; second, generate a lot of junk code, will automatically modify the code, resulting in extreme inconvenience in some cases; third, the support for DHTML is not good. But in any case, Frontpage is the best entry-level web editing tool.

The common versions are Frontpage98 and Frontpage2000.

Dreamweaver

Dreamweaver is another WYSIWYG web editing tool, or web typesetting software, of Macromedia's products. Unlike Frontpage, Deamweaver adopts the design style of floating surface version of Mac, which may not be suitable for beginners. But when you get used to its mode of operation, you will find that the intuition and efficiency of Dreamweaver can not be compared with Frontpage.

Dreamweaver supports DHTML very well, and you can easily create a lot of dazzling page special effects. Plug-in programming makes its function can be expanded indefinitely. Dreamweaver and Flash, Firework, also known as Macromedia web page production three Musketeers, because they are the same company's products, so there is a very close combination of functions. The latest Dreamweaver UltraDev supports Asp,Jsp. Therefore, it is not too much to say that Dreamweaver is the first choice for advanced web creation.

The common versions are Dreamweaver4.0 and Dreamweaver UltraDev 1.0

Flash is also a product of Macromedia, and Flash is the standard for interactive vector graphics and Web animation. Web designers use Flash to create beautiful and resizable navigation interfaces and other strange effects. I believe that anyone who has seen Flash technology does not want to master it. It is not only easy to learn and use, but also can make a website with a lot of animation, and the combination of sound and color, so it is a promising web page making technology.

Firework

Firework is also a product of Macromedia and is a real web mapping software. Fireworks is closely integrated with Dreamweaver. As long as the default image editor of Dreamweaver is set to Fireworks, the files modified in Fireworks will be updated in Dreamweaver immediately. Another feature is that you can change the color of a single word in the same text box. Of course, Fireworks can reference all Photoshop filters, and you can import images in PSD format directly. It is used for drawing, it is equivalent to the combination of Photoshop (dot matrix processing) and CorelDRAW (drawing vector graph) functions. The popular shadows and stereo buttons on the web page. And so on, you only need to click with the mouse, and you don't have to rely on plug-in filters such as KPT. And Fireworks very complete support page hexadecimal color mode, to provide safe color disk use and conversion, to cut graphics, do image correspondence (Image Map), the background is transparent, to map small and beautiful, it is very convenient to do in Fireworks, it is easy to modify graphics. No need to open Photoshop and CorelDRAW... at the same time And so on, all kinds of software, switching back and forth.

Dreamweaver, Flash and Firework are called the three Musketeers of web page making. If the three softwares are used together, they will make a very beautiful web page.

Gifanimator

Ulead GIF Animator 4.0 is currently the fastest and easiest to use GIF animation tool, providing top-of-the-line functionality in a software package for animation choreography, editing, special effects, and optimization. GIF Animator supports almost every major file format, including video files, and allows you to export to Windows AVI, QuickTime movies, Autodesk animations, or image sequences. Users can generate the appropriate HTML code to embed the animation into a web page, and can package the animation into a separate EXE file that can be published via email and viewed anywhere.

U make home page

Making a home page is nothing more than adding text, pictures and links, which is no different from using word. After simple learning, you will make a home page! However, there is too much to learn to make a high-level home page, but to sum up, it is html, graphics, animation, page special effects and background programming.

U the home page space of the application, upload the home page you made

The pages we make are put on our own computers and cannot be seen by others. In order for others to see the pages we make, we have to put them on a computer (server) that is always connected to internet. You can apply for home page space at the site that provides space services. When there is space, we can use the response FTP (File transfer Protocol) tool software to upload the pages we have made. In this way, you can share my wonderful page.

Thank you for your reading, the above is the content of "the method of web page design with Dreamweaver". After the study of this article, I believe you have a deeper understanding of the method of web page design with Dreamweaver, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.