网页设计流程课件.ppt

《网页设计流程课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计流程如何学习网页设计？做页面设计的话，要学习图像绘画处理软件，如PS，AI，FW，FLASH等，然后学习代码，你需要了解一些前端开发的各种代码，学习Html并适当的了解一些客户端脚本语言（如Vbscript,Javascript）。为了让页面结构与表现分开应熟练掌握CSS样式，并且在各种浏览器的代码兼容问题掌握好，并了解后台编码技术，大公司一般工作分的很细，光前端就有交互设计师，视觉设计师，前端开发工程师等等，要是一般小公司估计前端的活就你一个人包了。下面就将网页设计简单作下介绍：做网页的知识结构(

2、所需知识，工具)做网页的体系结构(制作页面的步骤)做网页的知识结构(所需知识，工具)网页设计所需的工具：PhotoShop，Dreamweaver，Flash，Fireworks。PhotoShop与Fireworks都属于图像处理软件；在网站制作中可采用Photoshop或Fireworks来制作页面效果图（页面效果图就是平面图）、图片元素等。Dreamweaver是一款比较出名的网页编辑软件,配合Phtoshop或Fireworks可直接生成Html语言并在Dreamweaver里面进行编辑和整理。Fl

3、ash用来制作一些动画特效；如果可以的话还需懂一些简单的AS脚本语言。除了以上还需了解一些Ai，Coreldraw等做矢量的工具。网页设计所需的知识点要懂Html标签，CSS样式，脚本语言（Javascript,Vbscript）。一张网页一般分为三层，即结构层，表现层，行为层，而这三层分别对应的代码技术就是，Xhtml(html)，Css，Javascrpt。结构层尽量少使用标签，保持其结构清晰，比如

就用来控制段落而不是用来创建一个空行，之类的控制页面表现的代码一律清除。Css用于控制页

4、面的表现，如页面的背景图片，文字大小，颜色，行高，链接样式等，额外Css滤镜不是特殊需要尽量不用。行为层则是Javascript的掌权区了，Javascript常常用于提高站点的交互性，使站点使用更方便，提高站点的装载性能等，如使用Javascript创建动感的动画；创建页面装载的提示信息；还有Ajax技术创建局部刷新等。做网页的体系结构(步骤)网页设计流程一般情况下可分为以下八个步骤：了解客户需求搜集整理相关资料规划网站结构书写页面设计文档实现设计思想出页面效果图用户确认切割成静态页面（Html页）添加页

5、面特效（Js，Flash等）交付程序员嵌入代码了解客户需求参与网站的需求分析，了解网站的功能模块及模块的详细介绍、网站定位、面向的群体、以及客户对网站页面设计的要求、分析客户提供的相关资料。并书写需求分析文档。搜集整理相关资料根据网站的类型及客户的需求，搜索相应的网站。参考网站的设计风格及布局并收集相应的素材，吸取好的元素融入自己的网页中。规划网站结构书写页面设计文档根据用户的需求分析及参考资料，来确定页面的风格、栏目及内容的排版。绘制页面的草图或是编写Word文档，并在草图或是编写Word文档中绘制出应有

6、的版块及说明所有版块的功能和操作方式，且说明各草图之间的链接关系。草图即是页面。确定网站的主色调。书写页面设计说明书。提出面页应遵寻的规范和建议，如：Div+Css，Table或是采用什么语言等。在设计规划时我们会考虑：建设网站的目的是什么？为谁提供服务和产品？企业能提供什么样的产品和服务？网站的目的消费者和受众的特点是什么？企业产品和服务适合什么样的表现方式（风格）？实现设计思想出页面效果图根据页面设计文档在Photoshop或是Fireworks里面进行设计页面效果图。首先，跟据页面设计文档利用标尺来划

7、分页面的结构，如以下几个页面结构：实现设计思想出页面效果图注：页面结构的划分不局限于上述的几种方式，可以把他们结合在一起应用。页面布局无定式，“简单即美”。注：在页面设计的时候利用标尺工具来使页面版块之间控制的间距更加准确，使页面排版的效果更加整齐。然后，对每一块进行细分再划分进行美化土填允相应的内容，丰满页面。实现设计思想出页面效果图一般一个网站通常包括：1．通用顶部：网站的首页及每个栏目页面顶部都会显示该内容2．主要内容：不同于其他页面的特殊内容3．通用底部：网站的首页及每个栏目页面底部都会显示改内容如

8、下图所示：实现设计思想出页面效果图用户确认拿出页面设计文档及效果图跟客户进行沟通及确认，根据用户的反馈进行修改和调整。确认的内容包括页面的风格，布局，及主色调等。切割成静态页面（Html页）经过确定的效果图，切成相应的静态页，可以在Photoshop或是Fireworks直接生成Html页面，并尊寻预定的规则。如布局方式采用Div或是Table等。首先，拿到一个页面的效果，先整体观看并分析一下网站的结构。如：上述