网站设计与规划

null网站的规划与设计网站的规划与设计null学习目标：了解网站开发的基本过程、网站规划、网站设计的基本内容 学习重难点：网站规划、网站设计的基本内容。 学习方法：实例分析 学习任务：欣赏优秀网站，学习本节课的教学内容 欣赏优秀作品欣赏优秀作品一、欣赏优秀作品： 1、虎门销烟启示录 2、观鸟 http://www.green-web.org/zt/birds 3、2003年“全国电脑制作活动”优秀作品中的网页作品 二、思考以下问题： 1、这些网站是怎样围绕主题展现内容的？ 2、这些网站提供了哪些栏目及功能？ 3、网站的链接有哪些特色，是否便捷？ 4、网站主页的布局、色彩运用有哪些特点？ 一、开发网站的基本过程一、开发网站的基本过程二、网站的规划二、网站的规划1、网站主题的确定 网站的规划从选择网站的主题开始。网站的选题，就是要根据网站的开发目标和访问网站的用户群，确定网站的主题，并给网站起一个简练响亮的名字。然后围绕这个主题搜集素材和相关资料，并把它们通过网页的形式呈现出来。 2、网站运行环境的确定 网站环境包括网站服务器、文件磁盘存储空间、网站域名解析等方面。 　　 3、网页制作工具的选择 主要包括网页制作工具、图像处理工具、动画制作软件的选择等。 　　 4、网站开发任务的管理 　　(1)任务分工　 (2)时间安排三、网站的设计三、网站的设计（一）网站结构的设计 制作网站前要设计好网站的栏目。网站的栏目可以有多层，以能够恰当地体现网站主题为好。此外，每个栏目本身应有一个大致的内容描述，以表达该栏目的设计思路，充实整个网站的总体结构设计。“虎门销烟启思录”网站的结构“虎门销烟启思录”网站的结构“虎门销烟启思录”网站的结构“虎门销烟启思录”网站的结构三、网站的设计三、网站的设计（二）网页的版面设计 1、风格设计 包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等 2、版面布局设计 标题信息、栏目信息、内容信息、附加信息等，要进行合理的放置，让人看起来井井有条，主次分明。常见网页布局类型常见网页布局类型null（三）网页的交互设计任务任务 本学期以小组为单位，每个小组制作一个专题网站。网站主题由各小组定。每小组选出小组长，确定好主题，作好网站的规划。 1、填写好网站规划表 2、给自己组的主题网站设计栏目、结构和作版面设计 参考下面阅读材料，给主题网站作好结构设计、版面设计。1、个人网站的规划与设计 1、个人网站的规划与设计 一、个人网站与个人主页 主页就像一份报纸的头版，通常用来作为一个站点的目录或索引。网站的内容都会在主页上面有超级链接，以便用户点击访问。主页在一个网站的处于中心地位，所以常常用主页代称网站。比如：个人网站也经常被称为“个人主页”。 二、个人网站的规划与设计 1.明确你建网站的目的 是为了宣传自己；还是介绍自己的爱好；还是为了传播某项技术或专业知识；还是建立一种公益性服务；还是为一种思想、观念、事业做宣传；还是使自己走向世界，与更多的人交流。 2.建站前的调查 根据自己的目的，调查下相关的个人网站，看别人的网站申请了什么样的网站空间、采用了什么建站技术、设置那些栏目、提供了那些功能。 3.网站的定位 　　如今互联网上的个人网站如雨后春笋般蓬勃发展，绚丽多彩的主页比比皆是。每个人都有发挥个人才能，挥洒自己个性的网上伊甸园。但透过华丽外表，不难看出个中的一些问题所在。 （1） 内容定位 （2） 技术定位问题 （3） 广告定位问题 4.网站的表现形式 基本上与企业网站的表现形式一样，但要时刻注意紧扣自己建立的目的主题。1、个人网站的规划与设计 1、个人网站的规划与设计 三、个人网站的栏目设置 栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下几方面： 1.一定记住要紧扣你的主题！ 一般的做法是：将你的主题按一定的方法分类并将它们作为网站的主栏目。记住：主题栏目个数在总栏目中要占绝对优势，这样的网站显的专业，主题突出，容易给人留下深刻印象。 2.设一个最近更新或网站指南栏目 这样做是为了照顾常来的访客，让你的主页更有人性化。　 3.设定一个可以双向交流的栏目 不需要很多，但一定要有。比如论坛，留言本，邮件列表等 4.设一个下载或常见问题回答栏目 网络的特点是信息共享。在你自己的主页上设置一个资料下载栏目，会得到大家的喜欢。另外，如果您的站点经常收到网友关于某方面的问题来信，你最好设立一个常见问题回答的栏目，既方便了网友，也可以节约自己更多时间用以学习。 至于其他的辅助内容，如关于本站，版权信息等可以不放在主栏目里，以免冲淡主题。总结以上几点，我们得出划分栏目需要注意的是： ●尽可能删除与主题无关的栏目 ●尽可能将网站最有价值的内容列在栏目上 ●尽可能方便访问者的浏览和查询2、网站规划书的写作规范 2、网站规划书的写作规范 网站规划书出应该尽可能涵盖网站规划中的各个方面。网站规划书包含的内容如下： 一、建设网站前的市场分析 二、建设网站目的及功能定位 三、网站技术解决 四、网站内容规划 五、网页设计 六、网站维护 七、网站测试 八、网站发布与推广 九、网站建设日程表：各项规划任务的开始完成时间，负责人等。 十、费用 　　 　　以上为网站规划书中应该体现的主要内容，根据不同的需求和建站目的，内容也会在增加或减少。在建设网站之初一定要进行细致的规划，才能达到预期建站目的。 3、网站设计必知的65条原则（略） 3、网站设计必知的65条原则（略） 通过搜索引擎自己搜索一下4、网页色彩的选择 4、网页色彩的选择 　　不同的颜色会给人们不同的心理感受，设计网页时，要结合主题的需要选择不同的色彩。 　　■红色：是一种激奋的色彩，能使人产生喜庆、热情、活力的感觉。 　 　　■绿色：介于冷暖两种色彩的中间，显得和睦、宁静、健康、安全，它和金黄、淡白搭配，可以营造优雅舒适的气氛。 　　■橙色：也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果。 　　■蓝色：是最具凉爽、清新、专业的色彩，它和白色混合，能体现柔顺、淡雅、浪漫的气氛。 　　□白色：让人产生洁白、明快、纯真、清洁的感觉。 　　■黑色：使人产生深沉、神秘、寂静、悲哀、压抑的感觉。 　　■灰色：让人联想到中庸、平凡、温和、谦让、中立和高雅的感觉。 　　每种色彩在饱和度、透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽静、阴深。 网页色彩搭配的原理 网页色彩搭配的原理 　　1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。 　　2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。 　　3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 　　4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。 　　在网页配色中，不要将所有的颜色都用到，尽量控制在三种色彩以内，背景色和前景文字的对比尽量要大，以便让文字看起来更清晰。 5、确定网站的栏目和版块 5、确定网站的栏目和版块 前面说的是栏目，我们再看看版块设置。版块比栏目的概念要大一些，每个版块都有自己的栏目。举个例子：网易的站点分新闻，体育，财经，娱乐，教育等版块，每个版块下面有各有自己的主栏目。一般的个人站点内容少，只有主栏目(主菜单)就够了，不需要设置版块。 如果你觉得的确有必要设置版块的，应该注意 1.各版块要有相对独立性。 2.各版块要有相互关联。 3.版块的内容要围绕站点主题。 6、确定网站的目录结构 6、确定网站的目录结构 　 网站的目录是指建立网站时创建的目录。例如：在用frontpage98建立网站时都默认建立了根目录和images子目录。目录的结构是一个容易忽略的问题，目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。 下面是建立目录结构的一些建议： 　　 ●不要将所有文件都存放在根目录下。 　　 ●按栏目内容建立子目录。 　　 ●在每个主目录下都建立独立的images目录。 　　 ●目录的层次不要太深：建议不要超过3层。维护管理方便。 　　 其它需要注意的还有： 1.不要使用中文目录；网络无国界，使用中文目录可能对网址的正确显示造成困难。 2.不要使用过长的目录；尽管服务器支持长文件名，但是太长的目录名不便于记忆。 3.尽量使用意义明确的目录； 　　 随着网页技术的不断发展，利用数据库或者其他后台程序自动生成网页越来越普遍，网站的目录结构也必将飞跃到一个新的结构层次。 7、文件夹文件名命名规范 7、文件夹文件名命名规范 　　 文件夹命名一般采用英文，长度一般不超过20个字符，命名采用小写字母。除特殊情况才使用中文拼音，一些常见的文件夹命名如：images(存放图形文件)，flash（存放Flash文件），style(存放CSS文件)，scripts（存放Javascript脚本），inc(存放include文件)，link（存放友情链接）,media(存放多媒体文件)等。 　　 文件名称统一用小写的英文字母、数字和下划线的组合。命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作 。 1、图片的命名原则名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质例如广告、标志、菜单、按钮等等。 　放置在页面顶部的广告、装饰图案等长方形的图片取名： banner 　标志性的图片取名为： logo 　在页面上位置不固定并且带有链接的小图片我们取名为 button 　在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu 　装饰用的照片我们取名： pic 　不带链接表示标题的图片我们取名： title 　　 下面是几个范例： banner_sohu.gif 、banner_sina.gif、 menu_aboutus.gif 、menu_job.gif、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg 。 2、动态语言文件命名规则性质_描述，描述可以有多个单词，用”_”隔开，性质一般是该页面得概要。 　　 范例：register_form.asp，register_post.asp,topic_lock.asp