网站制作都有哪些步骤

网站制作简易流程介绍
The website production process simple introduction
1 策划与草图
Planning and sketches
2 设计与制做
Design and making
3 切割与导出
Cutting and export
4 编辑与模板
Editing and template
5 动画与广告
Animation and advertising
6 链接与上传
Links and upload
按软件及长度划分制做步骤:
According to the software and length divided making steps:
1 策划与草图
Planning and sketches
1.1所有网站和其它设计作品的过程都是从策划开始的。这是最能体现你的才华和创造力的地方。人大的区别于其它动物的地方就是会思考，会创造，而且唯有这点是难能可贵的!我们必须要在动手打开PS或FW制做界面前就要完成一个网站最最关键的策划部分，它将直接影响
All web sites and other design works from the start of the planning process. This is the most can reflect your talent and creativity of the place. The biggest difference between the people in other animals place is thinking, can create, and only this is valuable. We have to be on hands-on opened PS or FW making industry shall be completed before a key part of the most web site planning, it will directly influence
这个网站的成败与否。一个优秀的网站，不仅做得漂亮，而且要方便浏览，可读性强，简洁明快!
The success or failure of the website. A good website, not only to do well and to facilitate browsing, readable, concise and lively!
网站的风格，用色，版式，布局，栏目甚至每个细小的图标都要经过精雕细琢，深思熟虑。而风格的制定要取决于你所做网站的浏览人群和读者职业背景、文化程度和修养爱好等，只有投其所好才能大化地产生共鸣;另一方面取决于公司的类型和企业法人的喜好，如果不是要强加入你自己的意志的话，那上述几点已经制定了网站大致的努力方向了!
The website's style, coloring, format, layout, column and even every tiny ICONS are through excelsior, thoughtful. And the formulation of style depends on what you do web browsing the crowd and readers professional background, education and training the hobby, only cast its place to maximize the resonate; On the other hand depends on the type of company of the enterprise as a legal person and be fond of, if it's better to join you will of his own words, that the points above has made the web site the direction of roughly!!!!
1.2本站是商业化的网站面向企业为主，所以我采用简约风格，亮丽明快的颜色和风格，只要学学平面构成和色彩构成就知道如何按其风格去布置各个元素和内容，以及用何种颜色来营造你要表达的效果了，包括冷暖明暗都是很关键的。大面积的中性色不刺眼，而重要的引导视线可以让亮色来担当，冬天喜欢暖色夏天喜欢冷色是人之常情，蓝色那种给人以信任和科技的底韵是我选择它的原因，而像橙、黄等促进食欲的颜色更容易受到食品网站的青睐!
1.2 this site is the website of the commercial enterprises, so I use simple style, bright beautiful and lively color and style, as long as the plane composition and learn color composition knew how to according to the style to decorate each element and content, and with what kind of color to build you want to express the effect, including changes in temperature and light and shade is essential. Large areas of neuter color not dazzling, and important guiding the view can let bright color to bear, winter like warm color summer like cool color is human nature, that give a person with blue trust and technology DE yun is my choice of the causes, and like orange and yellow color of promote appetite more vulnerable to food web site favor!
1.3本着简洁科学的分类原则来划分栏目:首页客户中心窄告介绍合作媒体常见问题媒体报道关于我们
1.3 in line with concise scientific classification principle to differentiate column: front page customer center against media introduced narrow the common problems in media reports about us
栏目如果划分不好的话，影响框架的调整，后果就是:重头再来了，郁闷吧?
Column if bad word division, the influence of the framework adjustment, the result is: start again, depressed?
本网站主要面向潍坊企业，所以要做得本地化，让人看了感觉亲切，而且要做得漂亮，废话!!
This web site mainly to weifang enterprise, so to do localization, let a person see the sense kind, and to do well, blah!
1.4好了，完成上面这些后请拿起笔在纸上按你的创意和设想画一草图，尽是具体些，好精细到每处阴影和描边!这步很关键的说!
1.4 good, complete the above, please take up a pen on paper according to your creative ideas and draw a sketch, with some specific, best fine to every place of shadow and stroke! This step is the key!
1.5本节最后就是准备制做网站时所需要的素材了，包括图标，LOGO，广告语，内容介绍等这都是最基本的!
1.5 this section is ready to make final web sites need the source material, including ICONS, LOGO, advertising, introduced the content such as is the most basic!
2 设计与制做
Design and making
2.1如果草图都已经绘制好后就可以打开PS或FW开工制做和设计我们的界面了，在这里我使用PS，虽然没有FW的高效和专业但更加灵活和自由，这是我最喜欢的，也因为用惯了嘛!^^养兵千日用兵一时，平时的练习和学习在这里派上用场了!呵呵!
If sketches are drawing perfect after it is opened PS or FW start making and design our interface, here I use PS, although do not have efficient and professional FW but more flexible and free, that is my favorite, but also because of used to! ^ ^ only thing seven years time, the practice and study here come in handy! Ha ha!
2.2可以在新建的778*600页面中先打框架然后再采用逐步细化的方法，还可以采用你自己独特的手法，比如透明玻璃水晶按钮等效果来营造特别的风格，要力求简约和精致!不要放过每个细节的刻画，即使是1*1的5%透明度的阴影都会给你的页面增彩，别以为别人看不见!
Can on the new 778 * 600 page first dozen framework and then using stepwise refinement of method, still can use your own unique technique, such as transparent glass crystal button to create the special effects such as style, try to be contracted and exquisite! Don't let every detail of characterization, even 1 * 1 5% of the transparency of the shadow will give you increase the page color, don't think that other people can't see!
2.3好养成分层的习惯，这样可以方便分类和编辑，不至于把上百个图层放在一下层级里搞得一团乱麻，分不清楚。
The best form the habit of layered, so that can be easily classification and editing, and not to the levels hundreds of layer on the make a haslong been, points not clear.
作为一名优秀的设计师应该有条理，所以请养成分类并为每个图层命名的习惯，这决不是浪费你的时间!
As an excellent designers should be organized, so please get classification and for each layer of naming habits, this will never be wasting your time!
3 切割与导出
Cutting and export
无论是PS还是FW，哪怕是AI做的设计界面，在切割的原则都是一样的，请遵从以下几个方面:
Whether PS or FW, even if it is AI do design interface in the principle of cutting are the same, please follow the following several aspects:
3.1首先要按大致的框架切割，如国字型或T字型，注意其完整性
According to the frame of the first roughly cutting, such as country word or T word, pay attention to their integrity
3.2对于要输入的文字区域、大面积色块或单独的图片以及flash动画要单独切割成非图片格式的切片以备插入
Input text to regional, large area color piece or separate pictures and flash animation to separate cutting into the image format slice for insert
3.3对于添加内容需要很长的区域要注意其伸缩性切割，若有图案要保证可以重复排列
To add content need a long area should pay attention to its flexibility cutting, if there is a design to ensure that the arrangement can be repeated
3.4在切割时要特别认真和小心，不要空留一行或列的一个象素的间隙，要放大让切片都对齐，不留空隙
In cutting to special earnest and be careful, don't empty kept one row or column of a pixel gap, to enlarge the paraffin sections to align, leaving no space
3.5其它如按钮和空白处等自动生成的切片，以及创建需要改变图片外观的切片等
Other such as buttons and a blank space, automatically generated slice, and create a need to change the image of the look of the slice, etc
切割完毕后，选择文件另存为WEB页命令，导出为HTML文件待DW编辑。
After the completion of the cutting, choose file save for WEB page order, export to HTML documents to DW editor.
4 编辑与模板
Editing and template
4.1在DW中打开导出的HTML文件开始编辑，包括大表格居中，设置背景，修改空白可输入区单元格背景为原来切割的图片等
In the open in DW derived HTML documents to edit, including big form center, set background, modify the blank input area cell background for cutting the original pictures
4.2将编辑完毕的文件添加CSS样式，包括最基本的TD和ALINK等标签，然后存为模板DWT文件，并^+alt+v新建可编辑区域
The editor of the file will add CSS styles, including the most basic TD and ALINK, labels and save as template DWT files, and ^ + Alt + v new can edit area
4.3通过模板新建各个页面并添加入相应的内容
Through the template each page and new added to the corresponding contents
5 动画与广告
Animation and advertising
5.1按原来切片所容留的大小制做FL动画广告条，使用相应的文字内容和广告语，在FL中新建文件
According to the size of the original slice shelter making FL animation article advertising, use the corresponding text content and advertising, in FL new file
5.2复制粘贴广告词到场景中，排版并转换为元件578*104
Copy paste AD copy to the scene, layout and convert to element 578 * 104
5.3添加相应的背景和动画，调试节奏后发布为SWF文件
Add the corresponding background and animation, debugging promulgated after the rhythm for SWF file
5.4插入到DW中的模板页并调整大小后存盘，其它的页面会自动更新
Insert into the template pages and adjust DW after inventory size, other page is automatically updated
6 链接与上传
Links and upload
6.1重新设置模板页的导航链接，本步骤也可在第四节完成
Reset template page navigation links, this step also can be finished in the fourth quarter
6.2在本地打开首页检查链接与文字内容直到无错，确保链接可正常访问
In local open the front page text links and check until no wrong, make sure the links to normal visit
6.3上传到申请的空间，在域名解析成功后在浏览器中浏览网上的效果并做相应后期维护!
To apply for space, in the domain name system after the success in the browser on the online effect and do late corresponding maintenance!
本文发布于成都网站建设公司创新互联/