Many friends hope that I can do some of the site's process and experience to share with you, recently happened to do an internal training, so a little tidy up, these are only for beginners, with a certain level of graphic design, the HTML is not very understanding, they may just want to do a personal homepage, So the whole is still tending to the traditional table layout , there are a lot of them are some of my personal experience when starting school, so it may not be very professional, but it is easy to get started, I have always had this thought, you only fall in, you can climb to a higher place, I think if there is no this paragraph of study, now I will not understand what the consortium, what CSS, what ASP, what XML, everything is a starting point, hoping to be a little help for everyone. Overall ppt is larger, did not put this, I put the main content with text roughly sorted out, if you need ppt, you can contact me. There are unreasonable places, I hope you can point out that we can discuss it together.
Main Content Introduction:
First, the basic elements of the Web page
Second, the basic tools of production and beautification
Third, the basic steps of Web page production
Four, interface design and interactive research discussion
V. Example production Demo
I. Basic elements of a Web page
1. Text (title, font size, font ...) ）
2 graphics (often used on the Web page format: JPG, JPEG, Gif, SWF ...) ）
3. Interactive Function (menu button, link, form, data exchange ...) ）
...
Hypertext Identification Language (HTML)
HTML (hypertext Markup Language) is a programming language designed for Web pages that describe the content of various parts of the hypertext, telling the browser how to display text, and how to generate links to other text or images.
In HTML, all the tags are enclosed in angle brackets.
For example,,such as:
The basic structure of HTML documents
The basic structural form of a typical HTML text is as follows:
<HTML>
<HEAD>
Research on <title>onling Web site production process and interface interaction Design </TITLE>
</HEAD>
<BODY> text content:onling.net</body>
</HTML>
Two. Basic tools for making and beautifying
1. Hypertext Identification Language (HTML)
Editing tools: EditPlus, Dreamweaver, Notepad, FrontPage,
2. Page design and Landscaping tools
Using tools: All the software that can be made flat
Recommended use of Photoshop, FireWorks, Flash
Third, the basic steps of Web page production
1. Overall planning
Planning to complete: site theme, style, page elements, logical structure, etc.
2. Data collection
Collect content:
A, related to the topic of text picture information
b, some excellent page style
C, download some of your favorite interactive pages
D, the Open source code
3. Pseudo-Interface design
According to the planning of the structure, in the plane software design you want the final effect, using the form of graphic pictures first, the design should pay attention to the pleasant, human machine, psychological factors
4, Code conversion and interactive add
The surface of the pseudo interface into HTML code, add the corresponding interactive functions JS, button, form, and some of the database connected to the code.
5, test Web compatibility
You don't have to make pages in strict accordance with the standards of the Web, but you have to make sure that all of your existing browsers are better at showing your work.
6, the publishing site
Test completed, in line with your requirements, of course, you can start publishing your site, the release of the server can be remote, can also be local, each language has its own corresponding server, such as ASP, should correspond to the ASP server, upload can use remote FTP tools.
Four. Interface design and interactive research
A, navigation bar design
The design of navigation elements determines whether the user can conveniently use the site navigation elements to design directly and clearly, and to the maximum convenience for the user to consider.
B, Web page layout
The layout of the Web page is the core of the entire interface, which embodies all the user-centric, and how the producer and the idea of appreciating the communication inside, you have to know what kind of message you want to convey, other people use it properly not, font size, model, word spacing, line spacing, and color everything is done at this stage, So how to perform function and beauty is the focus of your research.
PS: The layout should be closely linked to the theme of your site, to be careful to grasp the overall style, you can sketch the paper in advance, use the elements you are accustomed to show you want the effect
Web page layout--Main composition principle
Visibility: refers to the user's focus on the part and content that you induce to navigate
readability: refers to the content of the site to make people easy to read
sprightly: refers to the accurate and rapid transfer of the composition of the site
Modelling: maintain the stability and balance of the overall appearance
Creativity: Having a distinct personality, creativity is essential
The composition of the layout is in principle: unification, coordination, flow, emphasis, balance
C, Interactive research
My side of the interaction is mainly focused on human-computer operations, research users to browse the site psychology I personally think a successful personal homepage, simple beauty is not enough, it is important that the pleasant aspects should pay attention to, like Google, Douban on this.
V. Example production Demo (abbreviated)
1, page production overall planning
Objects: One print business promotion home
Style: Lively, color, simple, generous
2. Data collection
A, trademarks, Web sites, corporate brochures, understanding of corporate culture, to understand the quality of the person in charge, their case, with the person responsible for communication and grasp the information
b, online download similar printing industry company homepage, to understand the existing industry of some design characteristics
C, download some of the more gorgeous color pictures, or printing related to the picture
D, if you do not dynamic language, download a function to meet your news release system and message source
3. Pseudo-Interface design
A, in the PS Design pseudo interface
b, slicing tools to the whole of a reasonable division
Note: Hide the text you want to enter, and divide it to keep his whole meaning, try to make each part complete, and pay attention to some interaction actions.
C, into the web format-directly into the HTML format- steps:
1. Click on file to save as Web file format
2. Adjust the ideal parameters inside the interface
3, export save PS can automatically generate some HTML code, but he is not very standard, you have to
Dreamweave inside for processing
D, in the Dreamweave inside the code processing
Specific steps:
1, first change the title
2, modify the page properties: background color, background pictures ...
3, adjust the page to layout format (this can be set according to their own habits, there are standard forms, there are layout types)
4, to add text to the picture into the background form
A, find the corresponding picture path
b, delete the picture after the copy path
C, into a standard form
D, paste the path to the Background property
E, back to the layout interface
5, add specific text connection settings and other operations
6, CSS Settings
7, trimming code, Release preview Press F12 to preview the effect
4, Test Web compatibility
According to your design object, according to IE version and browser different, adjust the ideal effect, but most of the problem is Js\vb code, if only static picture, basically will not have very big difference, elect everybody as far as possible to the standard
5, the publishing site
Purchase their own space domain name, in fact, should be purchased in advance, using FTP upload software, upload your page to your Web server on the recommendation of an FTP upload tool leadftp
Summarize:
1, before starting to make the Web page, it is recommended to apply a small amount of time to the home page you want to make the overall design, such as the home page is how the style, what should be put some information, how to design other pages, several layers to deal with and so on usually in the development of Web pages, the first of all static Web page production Then add the script, form, and so on. Static Web pages are only used to passively publish information without any interactive features, it is an important part of Web pages, a good site: First is rich in content, followed by web design
2, do not first determine the appearance of the Web page, and then force themselves to adapt to it, should be based on the site's visitors, to provide information and production goals to get a most suitable web page structure.
3, the layout of each page is not too loose or too big words, try to avoid visitors to browse the page to make a large scroll, for the length of a page can use internal links to solve. Notice that in the upper part of the page is a conspicuous and valuable place, do not only put a few coarse words or pictures
4, do not use a different wallpaper every page, so that every time you turn the page to spend too much time to download, using the same background or wallpaper can also enhance the consistency of the Web page. To establish their own style.
5, background or wallpaper must be strong contrast with the text, to easy to read.
6, familiar with the beginning to try to use CSS, write their own code, in accordance with the standards of the international standard for writing to meet the requirements of the page.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
