网站的规划与设计：欣赏优秀作品，探究开发过程

hwyzw

    《网站规划与设计.ppt》由会员分享，可以在线阅读。更多《网站规划与设计.ppt（20页珍藏版）》请在智学网搜索。

    1. 网站规划设计 网站规划设计 优秀作品欣赏 优秀作品欣赏 1. 1. 优秀作品欣赏 优秀作品欣赏： 1. 虎门销毁鸦片启示录 2. 观鸟 ，2003 年网页作品“全国计算机生产活动”优秀作品 2、思考以下问题： 1、这些网站如何围绕计算机展示内容 主题？ 2、这些网站提供哪些栏目和功能？ 3、网站的链接有什么特点，是否方便？ 4、网站首页的布局和色彩运用有何特点？一、开发网站的基本流程 1.开发网站的基本流程 2.网站策划 2.网站策划 1.网站主题的确定 网站策划从选择网站主题开始。网站的主题选择是根据网站的发展目标和访问网站的用户群体确定网站的主题，并给予

    2、给网站起一个简洁、响亮的名字。然后围绕这个主题收集材料和相关信息，并以网页的形式呈现。 2、网站运行环境的确定 网站环境包括网站服务器、文件磁盘存储空间、网站域名解析等。 3、网页制作工具的选择主要包括网页制作工具、图像处理工具、动画的选择4.网站开发任务的管理（1）任务分工（2）时间安排3.网站设计3.网站设计（1）（1）网站结构设计结构设计在制作网站之前，栏目必须设计网站的内容。 。网站的栏目可以有多层，这样才能恰到好处地体现网站的主题。另外，每个栏目本身应该有一个粗略的内容描述，以表达该栏目的设计思想，丰富整个网站的整体结构设计。 “虎门吸食鸦片的反思”网站的结构 “虎门吸食鸦片的反思”网站

    3.网站结构 3.网站设计 3.网站设计 （二）网页版式设计 1.风格设计包括网页整体造型布局、色彩搭配、字体和图片风格设置、网站标志设计等。 2.标题信息、栏目信息、内容信息、附加信息等的版式设计必须合理放置，使其看起来有序、有主次。常见网页布局类型 布局类型布局方法示例 “国”字型 上面是网站的标题和横幅广告，后面是网站的主要内容，左右有一些小条，主要内容是中间是网站的一些信息，下面是网站人​​物的一些信息。网页角上面是标题广告，后面是左边的导航栏，右边是正文，下面是网站信息。标题文本类型 标题在上，文本在下。左右框左侧为导航栏，右侧为文字。有时顶部会有一个副标题。顶部和底部框上方是导航栏。

    4、以下为正文。 http:// 这学期我们以小组形式进行工作，每个小组都会制作一个专门的网站。网站的主题由每个小组确定。每个小组选出一名小组组长，确定主题并规划网站。 1. 填写网站规划表 2. 设计贵集团主题网站的栏目、结构和布局。参考以下阅读材料进行主题网站的结构设计和布局设计。 、个人网站规划设计、网站规划写作标准、网站设计必须了解的65条原则、网页色彩的选择与搭配原则、确定网站的栏目和版块、确定网站的目录结构、命名文件夹文件规范 一、个人网站规划设计 个人网站规划设计 1、个人网站和个人主页 主页就像报纸的头版，通常用作网站的目录或索引。网站的内容会在主页上有超链接，供用户点击访问。

    5.主页在网站中起着核心作用，因此主页经常被用来指代网站。例如：个人网站通常被称为“个人主页”。二、个人网站规划设计 1、明确自己建立网站的目的是否是为了宣传自己；介绍你的爱好；传播一定的技术或者专业知识；建立公益服务；或服务于某个想法 推广想法、概念和事业；或者让自己走出去，去外面的世界，与更多的人交流。 2、建站前调查：根据自己的目的，调查相关的个人网站，看看别人的网站申请了什么样的网站空间，采用了哪些建站技术，设置了哪些栏目，提供了哪些功能。 3、网站的定位 如今，个人网站在互联网上如雨后春笋般涌现，丰富多彩的主页比比皆是。每个人都有一个网上伊甸园，在那里他们可以发挥个人才能，表达自己的个性。但透过华丽的外表，我们不难看出

   

    6. 中的一些问题 (1) 内容定位问题 (2) 技术定位问题 (3) 广告定位问题 4. 网站的表现形式与企业网站基本相同，但要时刻注意目的和用途您自己建立的主题。 1、个人网站规划设计，个人网站规划设计 3、个人网站栏目设置 栏目实质是一个网站的概要索引，索引要清晰地展示网站的主体。制定栏目时，必须仔细考虑，合理安排。一般网站栏目布置时，应注意以下几个方面： 1、切记要紧扣主题！一般的做法是：将你的主题按照一定的方式进行分类，并将其作为网站的主要栏目。请记住：主题栏目数量必须在总栏目中占绝对优势。这样的网站看起来专业，主题突出，很容易给人留下深刻的印象。 2.设立最近更新或网站指南栏目来照顾

    7. 频繁的访问使您的主页更加人性化。 3. 设置一个允许双向通信的列并不需要花很多钱，但它必须存在。例如，论坛、留言簿、邮件列表等。 4. 设置下载或常见问题解答专栏。互联网的特点是信息共享。在自己的主页上设置一个数据下载栏目，会受到大家的喜欢。另外，如果你的网站经常收到网友关于某些问题的来信，你最好设立一个专栏来回答常见问题，这样不仅方便网友，也可以节省你更多的学习时间。至于其他辅助内容，如关于本站、版权信息等，则不能将其放置在主栏内，以免淡化主题。总结以上几点，我们得出的结论是，分栏时需要注意的是：尽可能删除与主题无关的栏目。尽量在栏目中列出网站最有价值的内容，以方便访问者的浏览和查询。 2.网站策划写作标准网站策划

    8、书籍写作标准 网站策划书籍应尽可能涵盖网站策划的各个方面。网站策划的内容如下： 1.网站建设前的市场分析 2.网站建设目的及功能定位 3.网站技术方案 4.网站内容规划 5.网页设计 6.网站维护 7.网站测试 8.网站发布与推广 9、网站建设进度：各项策划任务的起止时间、负责人等。 10、费用明细 以上是网站计划中应体现的主要内容。内容会根据不同的需求和网站建设目的而增减。网站建设之初，必须进行周密的策划，才能达到建设网站的预期目的。 3、网站设计必须了解的65条原则（略） 原则（略）自己通过搜索引擎搜索 4、网页颜色的选择 网页颜色的选择 不同的颜色会给人不同的心理效果感觉，设计

    9、对于网页，根据主题的需要选择不同的颜色。红色：是一种令人兴奋的颜色，可以使人感到喜庆、热情、充满活力。绿色：介于冷暖色之间，显得和谐、宁静、健康、安全。与金色、浅白色搭配时，能营造出优雅舒适的氛围。橙色：也是令人兴奋的颜色，具有轻盈、欢乐、温暖、温馨、时尚的效果。蓝色：最酷、最清新、最专业的颜色。与白色混合时，能体现出柔和、优雅、浪漫的气氛。白色：使人感觉洁白、明亮、天真、干净。黑色：使人感到深沉、神秘、安静、悲伤、压抑。灰色：让人联想到中庸、平庸、温柔、谦逊、中性和优雅。每种颜色的饱和度和透明度的轻微变化都会产生不同的感觉。以绿色为例，黄绿色具有青春、旺盛的视觉意境，而蓝绿色则具有青春活力的视觉意境。

    10、颜色显得沉静、暗淡。网页配色原则 网页配色原则 1、颜色的明度。网页的颜色应该明亮、引人注目。 2、色彩的独特性。拥有独特的颜色可以让每个人对你留下深刻的印象。 3、颜色的适宜性。也就是说，颜色适合你所表达的内容的氛围。例如，用粉色来体现女性部位的灵活性。 4、色彩的联想。不同的颜色会有不同的联想。蓝色代表天空，黑色代表夜晚，红色代表喜事等。您选择的颜色应该与您网页的内涵相关。在网页配色中，不要使用所有颜色，尽量控制在三种颜色之内，并尽量使背景色与前景文字的对比度尽可能大，使文字看起来更清晰。 5.确定网站的栏目和版块。确定网站的栏目和部分。我们前面谈到的是专栏。我们来看看部分设置。截面的概念比列的概念更大。各部分

   

    11. 每个部分都有自己的栏目。例如：网易的网站分为新闻、体育、财经、娱乐、教育等板块。每个部分都有自己的主栏。一般来说，个人网站的内容很少。只需要主栏（主菜单）就够了，不需要设置栏目。如果你认为确实有必要设立板块，你应该注意 1、每个板块必须相对独立。 2.各部分必须相互关联。 3.栏目内容应围绕网站主题。 6.确定网站的目录结构。确定网站的目录结构。网站目录是指网站建立时创建的目录。例如：使用.net创建网站时，默认创建根目录和子目录。目录的结构是一个很容易被忽视的问题。目录结构的好坏对浏览者影响不大，但对于网站本身的上传和维护，以及以后内容的扩展和移植却很重要。

    12.影响力。以下是设置目录结构的一些建议： 不要将所有文件都放在根目录中。根据列内容创建子目录。在每个主目录下创建单独的目录。目录层级不宜太深：建议不要超过3级。维护管理方便。其他需要注意的事项有： 其他需要注意的事项有： 1.不要使用中文目录；互联网无国界，使用中文目录可能会导致 URL 的正确显示出现困难。 2、不要使用太长的目录；虽然服务器支持长文件名，但是太长的目录名很难记住。 3、尽量使用含义明确的目录；随着Web技术的不断发展，利用数据库或其他后台程序自动生成网页的方式越来越普遍，网站的目录结构也将跃上一个新的结构层次。 7.文件夹文件名命名规范，文件夹文件名命名规范，文件夹命名一般为英文，长度

    13、一般不超过20个字符，且名称应采用小写字母。除特殊情况外，均使用汉语拼音。一些常见的文件夹名称有：（存放图形文件）、flash（存放Flash文件）、style（存放CSS文件）、（存放脚本）、inc（存放文件）、link（存放友情链接）、media（存放多媒体文件）等。文件名应由小写英文字母、数字和下划线组成。命名原则的指导思想是让自己和工作组的每一位成员都容易理解每​​个文件的含义。二、当我们在文件夹中使用“按名称排序”命令时，可以将同一类别的文件排列在一起，以便我们进行查找、修改、替换、计算负载等操作。 1.图片的原始名称

    14.名称分为头部和尾部两部分，中间用下划线分隔。头部部分表示图像的性质，如广告、标志、菜单、按钮等。 命名放置在页面顶部的广告、装饰图案等矩形图片： 将标志性图片命名为：标志。我们把页面上位置不固定的小图片和连续出现在页面某个位置的链接命名为“小图片”。 ，我们将链接栏中具有相同性质的图片命名为：menu，我们将用于装饰的照片命名为：pic，我们将不带链接的图片命名为表示标题：title 下面举几个例子：.gif、.gif、.gif ,. gif、.gif、.gif、.gif、.jpg。 2、动态语言文件命名规则。描述可以有多个单词，用“_”分隔。该属性通常是页面的摘要。示例：.asp、.asp、.asp