Many of my friends hope that I can share some of my website's processes and experiences with you. I have recently conducted an internal training session, so I just sorted it out a little. These are just for beginners on the web page, people who have a certain level of graphic design do not know much about html. Many of them here are some of my own experiences when I started school, so they may not be very professional, however, it is definitely easier to get started. I have always had this idea. You can only climb to a higher level if you collapsed in, now, I don't know what W3C, CSS, ASP, XML, and everything has a starting point. I hope it will help you a little. The overall PPT is relatively large, so I did not put it here. I have roughly sorted out the main content in text. If you need a PPT, please contact me. There is something unreasonable. I hope you can point out that you can discuss it together.
Main Content
1. Basic Elements of web pages
2. Basic tools for production and beautification
3. Basic Steps for creating a web page
Iv. Interface Design and Interaction Research
V. demo of instance Creation
1. Basic Elements of web pages
1. Text (title, font size, font size ...)
2 graphics (commonly used image formats on webpages: JPG, JPEG, GIF, SwF ...)
3. interactive functions (menu buttons, links, forms, data exchange ...)
...
Hypertext mark language (HTML)
Hypertext Markup Language (HTML) is a programming language used to create web pages. It describes the content of each part of Hypertext and shows the browser how to display text, how to generate links with other text or images.
In HTML, all the tags are enclosed by Angle brackets.
For example, <HTML> indicates an HTML Tag. Most of the tags appear in pairs, including start and end tags.
For example: <HTML>... </Html>.
2. Basic Structure of HTML documents
The basic structure of a typical HTML text is as follows:
<HTML>
<Head>
<Title> Research on onling website production process and interface interaction design </title>
</Head>
<Body> text: onling.net </body>
</Html>
Frequently used tools for creating web pages
1. hypertext mark language (HTML)
Editing tools: editplus, Dreamweaver, notepad, FrontPage,
2. Page design and beautification tools
Tools: all flat-level software
We recommend that you use Photoshop, fireworks, and Flash.
3. Basic Steps for creating a web page
1. Overall Planning
Planning to be completed: website subject, style, page elements, logical structure, etc.
2. Data collection
Collected content:
A. Text and image related to the topic
B. Some excellent page styles
C. download some of your favorite interaction pages
D. Open source code
3. Pseudo-Interface Design
Based on the pre-planned structure, design the final effect you want in the graphic software and display it first in the form of a graphic. Pay attention to the pleasant, man-machine, psychological, and other factors in the design.
4. Code Conversion and interactive Addition
Convert the pseudo interface of the plane to HTML code, and add the corresponding interaction functions JS, buttons, forms, and some code connected to the database.
5. Test webpage compatibility
You do not have to follow W3C standards to create pages, but you must ensure that all existing browsers can better present your work.
6. Release site
After the test is completed, you can release your website as required. The published server can be remote or local, and each language has its own server, for example, asp should correspond to the ASP server. remote FTP tools can be used for uploading.
Iv. Interface Design and Interaction Research
1. Interface Design (Web UI)
A. navigation bar Design
The design of the navigation elements determines whether users can easily use the website navigation elements. It is designed to be straightforward and clear, and to maximize the convenience of users.
B. webpage Layout
The layout of web pages is the core of the entire interface. This shows all the user-centric ideas and how producers can communicate with and appreciate each other. You must know what information you want to convey, the font size, model, font spacing, line spacing, and color are all completed at this stage, so how to present functions and aesthetics is the focus of your research.
PS: Before the layout, you must closely connect to the themes of your website. Pay attention to the overall style. you can sketch on the paper in advance and use the elements you are used to express your desired effect.
Webpage Layout-main composition principles
Eye-catching: refers to the part and content that users focus on when you induce browsing.
Readability: the website content is easy to understand.
Bright: it refers to the content that accurately and quickly conveys the website composition.
Styling: maintain a sense of stability and balance in the overall appearance
Creativity: with clear personality, creativity is essential
The layout consists of unification, coordination, flow, emphasis, and balance.
C. Interactive Research
My interactions are mainly focused on man-machine operations. I personally think that a successful personal homepage is not beautiful enough to study users' website browsing psychology, the important thing is that we should pay attention to the pleasant aspect. Goole and Douban are here.
V. demo of instance creation (omitted)
1. Overall page creation Planning
Object: A business promotion homepage printed
Style: lively, colorful, simple, generous
2. Data collection
A. Trademark, website, company brochure, understanding of corporate culture, the taste of the person in charge, their cases, and communication with the person in charge
B. Download the company homepage of the similar Printing Industry online to learn about the design features of the existing industry.
C. Download some gorgeous pictures or pictures associated with printing
D. If you do not use Dynamic Language, download a news publishing system and message source code that meets your needs.
3. Pseudo-Interface Design
A. Design a pseudo interface in PS
B. The slicing tool rationally splits the whole.
Note: Hide the text you want to input. Maintain the overall meaning of the text when splitting. Try to make each part complete. Pay attention to some interactive operations.
C. Export to Web format-direct export to HTML Format
Steps:
1. Click file storage in the Web file format
2. Adjust the ideal parameters on the Interface
3. Export and save the PS to automatically generate some HTML code, but it is not very standard and you must
Processing in dreamweave
D. Code processing in dreamweave
Procedure:
2. Modify page attributes: Background Color and background image .....
3. Adjust the page to the layout format (this can be set according to your habits. There are standard table methods and layout types)
4. Convert the image to be added to the background
A. Find the corresponding image path
B. Copy the path and delete the image.
C. Convert to Standard Form
D. paste the path to the background property.
E. Return to the layout page.
5. add specific text connection settings
6. CSS settings
7. trim the code and release the preview. Press F12 to preview the effect.
5. Test webpage compatibility
Adjust the desired effect based on the design objects and the IE version and browser. However, most of the problems that may occur are Javascript, VB, and other code. If it is just a static image, there is basically no big difference. We recommend that you rely on W3C standards as much as possible.
6. Release site
Purchase your own space domain name, in fact, should be purchased in advance, using FTP upload software, upload your page to your online server, we recommend an FTP upload tool leadftp
Summary
1. Before starting to create a webpage, we recommend that you apply a small amount of time to design your own homepage. For example, if you want to design the homepage, what information should be provided, and how to design other webpages, several layers are used for processing. Generally, during webpage development, static webpages are created first, and then script programs and forms are added to them. Static web pages are only used to passively publish information without any interactive functions. They are an important part of web pages. A good website: rich content first, secondly, Webpage Design
2. do not determine the appearance of a webpage first, and then force yourself to adapt to it. You should obtain the most suitable webpage architecture based on the visitor object, the information to be provided, and the production target of the website.
3. The layout of each page should not be too loose or use too many words. Avoid large scrolling when visitors browse the webpage as much as possible. For a page with too long length, use internal links. Note: on the top of a page, it is a conspicuous and valuable place. Do not just put a few large words or images.
4. Do not use different wallpapers on each page, so that you do not need to spend too much time downloading each page. Using the same background color or Wallpaper can also enhance web page consistency. To establish your own style.
5. The background color or wallpaper must be strong in contrast to the text for ease of reading.
6. After getting familiar with it, I began to try to use CSS, write code by myself, and write the required webpage according to W3C standards.
From http://www.51099.com/comp/wesk/20060526/16973.html
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
