41网站的规划与设计.ppt

41网站的规划与设计
欣赏优秀作品
一、欣赏优秀作品：

2. 观鸟green-
二、思考以下问题：
？
？
41网站的规划与设计
欣赏优秀作品
一、欣赏优秀作品：

2. 观鸟green-
二、思考以下问题：
？
？
，是否便捷？
、色彩运用有哪些特点？
themegallery
Company Logo
一、开发网站的基本过程
themegallery
Company Logo
二、网站的规划
网站的规划从选择网站的主题开始。网站的选题，就是要根据网站的开发目标和访问网站的用户群，确定网站的主题，并给网站起一个简练响亮的名字。
注意：贴近学习和生活
网站环境包括网站服务器情况、文件磁盘存储空间、网站域名管理等方面。
　　
主要包括选择网页制作工具（Frontpage、Dreamweaver)、图像处理工具（Photoshop、Fireworks、paintshop）、动画制作软件（flash、Ulead gif animator）等。
　　
　　(1)任务分工　 (2)时间安排
themegallery
Company Logo
主要软件Dreamweaver
themegallery
Company Logo
themegallery
Company Logo
主要软件Photoshop
由Adobe公司推出的专门用于图形、图像处理的软件Photoshop以其强大的功能、集成度高、适用面广和操作简便而著称于世。它不仅提供强大的绘图工具，还能直接从扫描仪、数码相机等设备采集图像，并对它们进行修改、修复，调整图像的色彩、亮度，改变图像的大小，而且还可以对多幅图像进行叠加，并增加特殊效果，使现实生活中很难遇见的景像十分逼真地展现。
themegallery
Company Logo
Photoshop界面
界面默认打开的面板有：属性栏、工具栏导航、颜色、图层：
Photoshop入门介绍
效果欣赏
themegallery
Company Logo
“虎门销烟启思录”网站的结构
themegallery
Company Logo
“虎门销烟启思录”网站的结构
themegallery
Company Logo
三、网站的设计
（二）网页的版面设计

包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等。
如：严肃庄重、清爽温馨、深沉厚重、生动活泼、古朴典雅。。。
themegallery
Company Logo
简洁大方
themegallery
Company Logo
风格独特，构图巧妙
themegallery
Company Logo
生动活泼
themegallery
Company Logo
色彩丰富
themegallery
Company Logo
浓郁的文化气息
themegallery
Company Logo
标题信息、栏目信息、内容信息、附加信息等，要进行合理的放置，让人看起来井井有条，主次分明。
一般来说：
屏幕中央最能引人注意，屏幕上方紧随其后，屏幕左右侧通常放置不太重要或固定信息，附加信息一般放在最下方。
themegallery
Company Logo
常见网页布局类型
布局类型
布局方式
实例
“国”字型
上面是网站的标题及横幅广告，接下来是网站的主要内容，左右分别列一些小条，中间是主要内容，下面是一些网站的信息
人民网
拐角型
上面是标题广告，接下来在左侧是导航栏，右侧是正文，下面是网站的信息。
itedu/zuopin2019/mansu
标题正文型
上面是标题，下面是正文。
左右框型
左边是导航栏，右边是正文。有时最上方会有一个小标题。
上下框型
上面是导航栏，下面是正文。
/
综合框架型
左右、上下两种框架结构的结合。
封面型（Flash型）
精美的平面或动画作为首页。
green-
themegallery
Company Logo
（三）网页的交互设计
用户如何访问网站？