潍坊网页设计服务:网站构建全过程详解

网站构建涉及哪些环节

网站制作简化流程概述

1策划与草图

2设计及制作

3分割与输出

4编辑与模板

5动画与广告

6链接与上传

按软件及时长划分制作环节:

1策划与草图

1.1所有网站及其他设计作品的起始环节都是策划。这是最能展现你的才华和创造力的阶段。人类区别于其他动物的最大特点就是思考与创造,这一点尤为珍贵!在动手使用PS或FW制作界面之前,我们必须完成一个网站最关键的策划环节,它将直接决定网站的成败。一个优秀的网站,不仅外观美观,而且易于浏览,可读性强,简洁大方!网站的风格、色调、版式、布局、栏目以及每一个细微的图标都需要精心打磨,深思熟虑。风格的确定取决于网站的浏览者群体、读者职业背景、文化程度和兴趣爱好等,只有迎合他们的喜好,才能最大限度地产生共鸣;另一方面,也取决于公司的类型和企业法人的喜好,如果不强行加入个人意志,那么上述几点已经为网站的大致方向奠定了基础!

1.2本站为面向企业的商业化网站,因此我采用简约风格,明快亮丽的色调和风格。只要学习过平面构成和色彩构成,就能知道如何按照这种风格布置各个元素和内容,以及如何运用颜色来营造所需的效果,包括冷暖明暗都非常关键。大面积的中性色不会刺眼,而重要的引导视线则由亮色来承担。冬天喜欢暖色,夏天喜欢冷色,这是人之常情。蓝色给人一种信任和科技的感觉,这是我选择它的原因。而像橙、黄等促进食欲的颜色更容易受到食品网站的青睐!

1.3本着简洁科学的分类原则来划分栏目:首页、客户中心、广告介绍、合作媒体、常见问题、媒体报道、关于我们。如果栏目划分不当,会影响框架调整,导致重头再来,让人郁闷。

本网站主要面向潍坊企业,所以要本地化,让人感觉亲切,而且要美观,别无他言!

1.4完成上述步骤后,请拿起笔在纸上根据你的创意和设想绘制草图,尽量具体,最好精细到每个阴影和描边!这一步非常重要!

1.5本节最后就是准备制作网站所需的素材,包括图标、LOGO、广告语、内容介绍等,这些都是最基本的!

2设计及制作

2.1如果草图已经绘制完美,就可以打开PS或FW开始制作和设计界面了。在这里我使用PS,虽然FW更高效和专业,但PS更加灵活和自由,这是我最喜欢的,也因为习惯了!哈哈!

2.2可以在新建的778600页面中先绘制框架,然后采用逐步细化的方法,还可以运用自己独特的手法,比如透明玻璃水晶按钮等效果来营造特别的风格。要力求简约和精致!不要放过每个细节的刻画,即使是11的5%透明度的阴影都会给你的页面增色,别以为别人看不见!

2.3最好养成分层的习惯,这样可以方便分类和编辑,不至于把上百个图层放在一个层级里变得一团糟,难以辨认。

作为一名优秀的设计师,应该有条理,所以请养成分类并为每个图层命名的习惯,这决不是浪费时间!

3分割与输出

无论是PS还是FW,哪怕是AI制作的设计界面,在分割的原则上都是一样的,请遵循以下方面:

3.1首先要按大致的框架分割,如国字型或T字型,注意其完整性。

3.2对于要输入的文字区域、大面积色块或单独的图片以及flash动画要单独分割成非图片格式的切片以备插入。

3.3对于添加内容需要很长的区域要注意其伸缩性分割,若有图案要保证可以重复排列。

3.4在分割时要特别认真和小心,不要留下任何一行或列的一个像素的间隙,要放大让切片都对齐,不留空隙。

3.5其他如按钮和空白处等自动生成的切片,以及创建需要改变图片外观的切片等。

分割完成后,选择文件另存为WEB页命令,导出为HTML文件待DW编辑。

4编辑与模板

4.1在DW中打开导出的HTML文件开始编辑,包括大表格居中、设置背景、修改空白可输入区单元格背景为原来分割的图片等。

4.2将编辑完毕的文件添加CSS样式,包括最基本的TD和ALINK等标签,然后存为模板DWT文件,并使用^+alt+v新建可编辑区域。

4.3通过模板新建各个页面并添加相应的内容。

5动画与广告

5.1按照原来切片所留出的尺寸制作FL动画广告条,使用相应的文字内容和广告语,在FL中新建文件。

5.2复制粘贴广告词到场景中,排版并转换为元件578*104。

5.3添加相应的背景和动画,调试节奏后发布为SWF文件。

5.4插入到DW中的模板页并调整大小后存盘,其他页面会自动更新。

6链接与上传

6.1重新设置模板页的导航链接,本步骤也可在第四节完成。

6.2在本地打开首页检查链接与文字内容直到无错,确保链接可正常访问。

6.3上传到申请的空间,在域名解析成功后在浏览器中浏览网上的效果并进行相应后期维护!

网站的外观设计,色彩搭配,版面编排,布局结构,以及每一个细微的图标,都必须经过精心打磨,周密思考。风格的确定需根据网站的目标受众及其职业背景、教育水平和个人兴趣等来决定,只有迎合他们的喜好,才能最大限度地引发共鸣;另一方面,还需考虑公司类型和企业法人代表的偏好,除非有意强行融入个人意志,否则上述因素已为网站的设计指明了大致方向!

1.2 本站为面向企业的商业化网站,因此我选择了简约风格,明快鲜艳的色彩和布局。只要掌握一些平面构成和色彩搭配的基础知识,就能明白如何按照这种风格布置元素和内容,以及如何使用颜色来营造所需的效果,包括冷暖和明暗都是至关重要的。大面积的中性色不会刺眼,而重要的视觉引导则由亮色来承担。冬天偏爱暖色,夏天偏爱冷色,这是人之常情。蓝色给人以信任和科技的感觉,这是我选择它的原因。而像橙、黄等能促进食欲的颜色,更容易受到食品网站的青睐!

1.3 基于简洁科学的分类原则来划分栏目:首页、客户中心、窄告介绍、合作媒体、常见问题、媒体报道、关于我们。如果栏目划分不当,会影响框架的调整,导致重新开始,让人郁闷。

本网站主要面向潍坊企业,因此需要做到本地化,让人看了感觉亲切,同时也要做得漂亮,废话!

1.4 完成上述步骤后,请拿起笔在纸上按照你的创意和设想绘制一张草图,越具体越好,最好精细到每个阴影和线条!这一步非常重要!

1.5 本节最后是准备制作网站所需的素材,包括图标、LOGO、广告语、内容介绍等,这些都是最基本的内容。

2 设计与制作

2.1 如果草图已经绘制完美,就可以打开PS或FW开始制作和设计界面了。在这里我使用PS,虽然FW效率更高、专业性更强,但PS更加灵活自由,这也是我最喜欢的。因为习惯了嘛!呵呵!

2.2 在新建的778600页面中,先打好框架,然后采用逐步细化的方法。还可以采用你独特的手法,比如透明玻璃水晶按钮等效果,来营造特别的风格。要力求简约和精致!不要放过每个细节的刻画,即使是11的5%透明度的阴影都会让你的页面增色,别以为别人看不见!

2.3 最好养成分层的习惯,这样可以方便分类和编辑,不至于把上百个图层放在一个层级里,变得混乱不堪。作为一名优秀的设计师,应该有条理,因此请养成分类并为每个图层命名的习惯,这决不是浪费时间!

3 切割与导出

无论是PS还是FW,哪怕是AI做的设计界面,切割的原则都是一样的。请遵循以下方面:

3.1 首先按照大致框架切割,如国字型或T字型,注意其完整性。

3.2 对于需要输入文字的区域、大面积色块或单独的图片以及flash动画,要单独切割成非图片格式的切片以备插入。

3.3 对于需要添加内容的长区域,要注意其伸缩性切割,若有图案要保证可以重复排列。

3.4 在切割时要特别认真和小心,不要留下任何一行或列的一个像素的间隙,要放大切片,确保对齐,不留空隙。

3.5 其他如按钮和空白处等自动生成的切片,以及创建需要改变图片外观的切片等。

切割完成后,选择“文件”>“另存为网页”命令,导出为HTML文件,供DW编辑。

4 编辑与模板

4.1 在DW中打开导出的HTML文件开始编辑,包括大表格居中、设置背景、修改空白可输入区单元格背景为原来切割的图片等。

4.2 将编辑完毕的文件添加CSS样式,包括最基本的TD和ALINK等标签,然后存为模板DWT文件,并新建可编辑区域。

4.3 通过模板新建各个页面,并添加相应的内容。

5 动画与广告

5.1 按照原来切片所留的大小制作FL动画广告条,使用相应的文字内容和广告语,在FL中新建文件。

5.2 将广告词复制粘贴到场景中,排版并转换为元件578*104。

5.3 添加相应的背景和动画,调试节奏后发布为SWF文件。

5.4 将其插入到DW中的模板页,调整大小后存盘,其他页面会自动更新。

6 链接与上传

6.1 重新设置模板页的导航链接,这一步骤也可在第四节完成。

6.2 在本地打开首页,检查链接和文字内容,确保无错,确保链接可以正常访问。

6.3 上传到申请的空间,在域名解析成功后在浏览器中浏览网上效果,并进行相应的后期维护!

以上所转载内容均来自于网络,不为其真实性负责,只为传播网络信息为目的,非商业用途,如有异议请及时联系btr2020@163.com,本人将予以删除。
THE END
分享
二维码
< <上一篇
下一篇>>