网站构建涉及哪些环节
网站搭建简易步骤解析
-
规划与草图
-
设计与制作
-
分割与输出
-
编辑与模板
-
动画与广告
-
链接与上传
按软件及时长划分制作环节:
- 规划与草图
1.1 所有网站及其他设计作品的创作过程都始于规划。这是最能展现你才华和创造力的环节。人类与其他动物最大的区别在于思考与创造,这一点尤为珍贵!在动手使用PS或FW进行制作之前,我们必须完成一个网站最关键的规划部分,它将直接影响网站的成败。一个优秀的网站,不仅外观美观,而且便于浏览,可读性强,简洁明快!
网站的风格、用色、版式、布局、栏目甚至每个细微的图标都要经过精心打磨,深思熟虑。风格的制定要考虑你所做网站的浏览人群和读者职业背景、文化程度和兴趣爱好等,只有投其所好才能最大化地产生共鸣;另一方面,也要考虑公司的类型和企业法人的喜好,如果不是要强行加入自己的意志,那么上述几点已经为网站的大致方向奠定了基础!
1.2 本站是面向企业的商业化网站,因此我采用简约风格,明快亮丽的颜色和风格。只要学习一下平面构成和色彩构成,就知道如何按照这种风格布置各个元素和内容,以及如何使用颜色来表达你要传达的效果了。包括冷暖明暗都是非常重要的。大面积的中性色不会刺眼,而重要的引导视线可以让亮色来承担,冬天喜欢暖色,夏天喜欢冷色是人之常情。蓝色那种给人以信任和科技的感觉是我选择它的原因,而像橙、黄等促进食欲的颜色更容易受到食品网站的青睐!
1.3 坚持简洁科学的分类原则来划分栏目:首页、客户中心、窄告介绍、合作媒体、常见问题、媒体报道、关于我们。如果栏目划分不当,会影响框架的调整,后果就是:从头再来,郁闷!
本网站主要面向潍坊企业,所以要做得本地化,让人看了感觉亲切,而且要做得漂亮,废话!
1.4 完成上述步骤后,请拿起笔在纸上按照你的创意和设想绘制一个草图,尽量具体一些,最好精细到每个阴影和描边!这一步非常关键!
1.5 本节最后就是准备制作网站所需的素材了,包括图标、LOGO、广告语、内容介绍等,这些都是最基本的!
- 设计与制作
2.1 如果草图已经绘制完美,就可以打开PS或FW开始制作和设计界面了。在这里我使用PS,虽然没有FW的高效和专业,但更加灵活和自由,这是我最喜欢的,也因为习惯了嘛!呵呵!
2.2 可以在新建的778600页面中先打框架,然后采用逐步细化的方法,还可以采用你独特的手法,比如透明玻璃水晶按钮等效果来营造特别的风格。要力求简约和精致!不要放过每个细节的刻画,即使是11的5%透明度的阴影都会给你的页面增色,别以为别人看不见!
2.3 最好养成分层的习惯,这样可以方便分类和编辑,不至于把上百个图层放在一个层级里搞得一团糟,分不清楚。
作为一名优秀的设计师应该有条理,所以请养成分类并为每个图层命名的习惯,这决不是浪费时间!
- 分割与输出
无论是PS还是FW,哪怕是AI做的设计界面,在分割的原则都是一样的,请遵循以下几个方面:
3.1 首先按大致的框架分割,如国字型或T字型,注意其完整性。
3.2 对于要输入的文字区域、大面积色块或单独的图片以及flas***要单独分割成非图片格式的切片以备插入。
3.3 对于添加内容需要很长的区域要注意其伸缩性分割,若有图案要保证可以重复排列。
3.4 在分割时要特别认真和小心,不要空留一行或列的一个像素的间隙,要放大让切片都对齐,不留空隙。
3.5 其他如按钮和空白处等自动生成的切片,以及创建需要改变图片外观的切片等。
分割完毕后,选择文件另存为WEB页命令,导出为HTML文件待DW编辑。
- 编辑与模板
4.1 在DW中打开导出的HTML文件开始编辑,包括大表格居中,设置背景,修改空白可输入区单元格背景为原来分割的图片等。
4.2 将编辑完毕的文件添加CSS样式,包括最基本的TD和ALINK等标签,然后存为模板DWT文件,并使用^+alt+v新建可编辑区域。
4.3 通过模板新建各个页面并添加相应的内容。
- 动画与广告
5.1 按照原来切片所预留的大小制作FL动画广告条,使用相应的文字内容和广告语,在FL中新建文件。
5.2 **粘贴广告词到场景中,排版并转换为元件578*104。
5.3 添加相应的背景和动画,调试节奏后发布为SWF文件。
5.4 插入到DW中的模板页并调整大小后存盘,其他页面会自动更新。
- 链接与上传
6.1 重新设置模板页的导航链接,本步骤也可在第四节完成。
6.2 在本地打开首页检查链接与文字内容直到无错,确保链接可正常访问。
6.3 上传到申请的空间,在域名解析成功后在浏览器中浏览网上的效果并进行相应后期维护!