第1讲 网站建设的整体流程课件.ppt

《网站设计与网页制作》 子项目一 第一讲 网站建设的整体流程 引言 要想制作一个好的网站一定不能随心所欲，要有明确的设计思路。对于网页设计者来说，在动手制作网页之前，应对网页设计的整体工作流程有一个清晰的认识，即站点主题要明确，网页素材准备要充分，站点内容和目录结构要规划好，要本着由面到点、由宏观到细节的原则进行设计。 网站制作流程 确定网站的名称 整理客户提交的资料 网站逻辑结构图 网站形象设计 网页设计 在PhotoShop中裁切设计稿 站点规划 创建站点 制作网页 测试站点 申请域名、空间 上传 宣传 后期维护 确定网站的名称 讨论主题：你能列举出一些你所喜欢的网站名字并说明你喜欢它们的理由吗？ 　网站的名称很重要，它决定着你的网站是否更容易被人接受。 【举例】：“网上书店”这个网站，名字读起来琅琅上口、能反映出网站的题材、且易记。 网站命名应遵循的原则 （1）要有很强的概括性，从网站的名称就能反映出网站的题材。 （2）要合理、合法、易记，最好读起来琅琅上口。 （3）名称不宜过长，要方便其它网站链接。 （4）有个性，体现出一定的内涵，能给浏览者以更多的想像力和冲击力。 整理客户提交的资料 　　在做网页之前，我们要尽可能多地收集与网站主题相关的素材（文字、图像、多媒体等素材），再去芜存菁，取其精华为我所用。 【举例】： 网站逻辑结构图 网站逻辑结构图也就是网站导航设计 【举例：三层】： 网站形象设计 网站的标志 网站的标准色彩 网站的标准字体 网站的宣传标语 网站的标志 【举例】： 【赏析】： 网站的标准色彩 【举例】： 主色调：蓝+白+黑 辅助色：绿+橙+黄+灰 【赏析】： 特殊字体欣赏 网站的宣传标语 讨论主题：请大家列举出生活中给你留下深刻印象的宣传标语，并分析标语的优劣。 【举例】：李宁 —— 一切皆有可能 网页布局图 网页布局元素一般包括：网站名称（logo）、广告区（banner）、导航区（menu）、新闻（what’s new）、搜索（search）、友情链接（links）、版权（copyright）等。 网页版式：我们常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。(书P10) 网页布局图举例 首页 子页——新书展示 网页设计 页面设计主要包括创意、色彩和版式三个方面。创意会使网页在众多的竞争对手中脱颖而出；色彩可以使网页获得生命的力量；版式则是和用户沟通的核心，所以这三者缺一不可。 使用Photoshop设计首页效果图，首页设计完之后，其他页面的设计就没有主页那么复杂了。主要是和主页风格保持一致，页面设计美观，要有返回主页的链接等。 网页设计举例 首页 子页 在PhotoShop中裁切设计稿 首页裁切图： 站点的规划与建立 在网页编辑软件中制作网页 用Dreamweaver来完成。 设计（重点、保障）——制作（任务） 测试站点 网站创建好了。在上传到网上之前要测试它的兼容性和链接的有效性。兼容性可以使用Dreamweaver的“检查浏览器”功能测试，链接可以使用Dreamweaver的“检查整个站点的链接”功能进行测试。这种方法我们将在后续项目中学习，在此亦不做赘述。 　　 还有一种测试，是把网页上传到Internet服务器上去测试链接的有效性、网页的下载速度等。这种测试，只是你将网页上传到网上申请的个人空间后，以一名普通浏览者浏览的方式去检验即可。 上传 方法一：使用Dreamweaver的FTP功能上传。 方法二：使用一些FTP工具上传。 宣传 像产品一样，再优秀的主页、网站如果不宣传，很难有较大访问量。那么，如何使网站增大访问量呢？ 【讨论主题】 讨论主题1：常见的宣传方式有哪些？请大家尽可能多地列举。 讨论主题2：在各种媒体上，给你印象深刻的广告有哪些？ 你为什么对它们印象深刻？ 讨论主题3：请列举一些你所熟悉或认可的优秀网络广告。 后期维护 网站做好之后必须要有专人维护，网站才具有生命力，才会有点击率。对于一个网站来说，它的更新与管理是极其重要的。一个再好的网站如果不进行内容更新与管理，都会出现许多这样或那样的问题。例如，网站内容陈旧，超级链接断开等。 * *温馨提示* * 在实际设计中我们也不要局限于以上几种布局格式，有时候稍作适当的变化会收到意想不到的效果。另外，平时在浏览网页时要多留心别人的布局方式，遇到好的布局就可以保存下来，作为我们设计布局的参考。 [1] /