《四章网站设计.ppt》由会员分享，可在线阅读，更多相关《四章网站设计.ppt（34页珍藏版）》请在三一文库上搜索。
1、第四章 网站设计,学习网站：,网站的种类 网站的规划 网页外观的设计 网页制作工具概述,按照Internet网站的功能和结构形式，大体上可分为门户、普及型、电子商务类、媒体信息服务类、办公事务类、商务管理类等网站,门户网站，也称入门网站 Internet发展初期，门户网站专指提供搜索引擎的网站 随着网络的发展，门户网站不断增加服务种类，纷纷推出了大量免费的服务项目，如免费电子信箱、聊天室、天气预报、新闻、论坛等 比较知名的中文门户网站有：搜狐 ()、中文雅虎 ()、人民网() 等,普及型网站 指个人或企事业单位根据自身要求建立和发布的，以介绍基本情况、通信地址、产品及服务信息、供求信息、人员招
2、聘信息和合作信息等为主旨的网站 这类网站以宣传自身、树立网上形象为目的，网站内容一般比较全面 这类网站包括企业网站、大学网站、政府网站以及数量众多的个人网站,电子商务类网站 如B2B、B2C网站 按照交易过程可分为商品检索、商品采购、订单支付三个阶段 电子商务通常是指使用计算机技术、网络技术和远程通信技术，实现整个商务过程的电子化、数字化和网络化,媒体信息服务类网站 是报社、杂志社、广播电台、电视台等传统媒体为了树立自己的网上形象，方便服务对象而建立的网站 办公事务类网站 是企业、事业单位为了实现办公自动化而建立的内部网站 商务管理类网站 是企业内部为了进行广告及商品管理、客户管理、合同管理、
3、营销管理等目的而建立的网上办公平台,在制作网页前应该了解网站的开发流程 网站的开发流程分为：规划、设计、开发、发布与维护以及评估阶段,网站种类繁多，在建立网站前必须明确网站建立的目的 在规划阶段，目的越明确就能越具体地确定下一步的实际工作,选择题材,下一步工作是选择相关资料。网站的资料来源主要有以下三个途径： 原创作品 书籍、报刊杂志 因特网。这是资料的主要来源，可以从网站、BBS、新闻组、虚拟社区等处查找 注意： 尽量少在主页上放置文学作品、软件注册码等有争议的内容 主题一定要明确,网站内容组织原则,有了足够丰富的内容后，所面临的问题就是内容的合理组织安排： 页面不要过于庞大，用户等待页面下
4、载的极限时间是10秒 除最终页面外，其他页面都应有指向首页的链接 插入图形不要删除WIDTH和HEIGHT属性，否则页面下载时文字会抖动 默认的链接使用蓝色 尽量不使用FRAME (框架) ，因为这样的页面不能正确打印，不能被搜索引擎处理，页面元素不宜过多,网站内容组织原则,大于50KB的文件应注明大小，并注明文件格式 不要忽视HEAD区域，加上KEYWORDS (关键字) 和CONTENT (内容) 页面留出合理空白，不要将页面塞得太满 页面千万不要使用一个大表格，至少表头是一个表格，最下面版权信息是一个表格，中间是一个表格，如果可能，将中间部分也拆分成若干个表格 网页和图片文件命名统一使用
5、小写英文 (不要使用拼音的首写字母的形式) 、数字和下划线的组合,网站结构中的文件夹可取IMAGES、SCRIPT、TEMP、MEDIA这样的目录，以分别存放图片、脚本、临时文件、多媒体文件等，并统一放在一个目录下 尽量多使用模板和库,网站应该包括以下内容： 站点结构图 导航栏 联系方式页面 反馈表 引入入胜的内容、图片、新闻页面 常见问题解答 (FAQS) 搜索引擎 相关站点链接,在开始制作网页之前，建议用少量时间对自己要制作的主页进行总体设计。例如 希望主页是怎样的风格 应该放一些什么信息 其他网页如何设计 分几层来处理等等,通常在进行网页开发时，首先要进行静态网页的制作，然后在其中加入脚
6、本程序、表单等 静态网页指仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分 一个好的网站首先是内容丰富，其次就是网页设计美观,静态网页的制作,对于网页外观设计的几点建议： 不要先决定网页的外观，应该根据网站向访问者提供的信息以及制作目标做出一个最适合的网页架构 每页排版不要太松散或用太大的字，对于篇幅太长的一页可以使用内部链接解决 常用的分辨率是640480及800600 不应该在每页中插入大多的广告 不要每页都采用不同的墙纸。采用相同的底色或墙纸还可以增强网页的一致性，以树立自己的风格 底色或墙纸必须与文字对比强烈，以便于阅读,为网页添加动态效果,静态网页制作
7、完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等,网页制作工具概述,网页制作工具可分为两类 源代码型编辑工具，代表产品有HotDog、 HomeSite、EditPlus等 所见即所得编辑工具，主要有HotMetal、FrontPage、Dreamweaver等 网页的本质是HTML源代码，但现在绝大多数的网页都是用所见即所得网页编辑工具完成的，此外还需要使用素材处理工具对一些原始材料进行处理,FrontPage 是Microsoft公司的Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制
8、作和管理方法 FrontPage界面与Word、PowerPoint等软件的界面极为相似，是Office家族的一员,Dreamweaver 是Macromedia公司的专业化网页制作软件，它具有可视化编辑界面，可以生成跨平台、跨浏览器的网页，能满足专业网页编辑人员的需要，也容易被业余网友掌握 Dreamweaver的网页动态效果与网页排版功能比一般软件好用，即使是初学者也能制作出相当于专业水准的网页 Dreamweaver支持动态HTML，从而奠定了在网页高级设计功能方面的领先地位,Dreamweaver的主要特点归纳如下： 最佳的制作效率。能与动画设计工具，如Flash等搭配，不需要离开Dr
9、eamweaver便可以完成制作，整体流程自然顺畅。除此之外，只要单击便可以自动开启Fireworks进行编辑，并完成图片的优化 网站管理。使用站点地图可以快速制作网站构架，设计个性化和重组网页。如果改变网页位置或文件名称，Dreamweaver会自动更新所有链接,无可比拟的控制能力。Dreamweaver提供可视化编辑与源代码编辑同步功能，还包含HomeSite和BBEdit等主流文字编辑器 所见即所得。Dreamweaver成功整合了动态式可视化编辑及电子商务功能。在使用Dreamweaver设计动态网页时，用户不需要通过浏览器就能预览网页 浏览器适应性。Dreamweaver设计的网页，
10、可以全方位地呈现在任何平台的浏览器上,样板和XML。Dreamweaver将内容与设计分开，适用于快速网页更新和团队合作编辑网页。建立网页外观的样板，指定可编辑或不可编辑的部分，可以直接编辑以样式为主的内容而不会改变既定的样式，还可以使用样板正确地导入或导出XML内容 虽然入门容易，然而如果需要得到全面的Dreamweaver经验，将需要理解Dreamweaver工作区域背后的基本概念和如何选择选项、使用检查器和面板以及最适合您的工作模式的参数选择的设定,在介绍图像制作工具之前，先了解一下有关浏览器显示和图像处理方面的知识。 图像的分辨率。分辨率是指用户在屏幕上观察图像时感受到的图像的精细程度
11、，一般用每英寸所包含的像素点表示 图像格式。比较流行的图像文件的存储格式有BMP、PCX、GIF、JPEG、PNC、TIFF等，但在Web上，常用的是GIF、JPEG和PNG格式,浏览器。当浏览器载入一个页面时，它首先会读所有的源代码，然后逐条解释，遇到一条便执行一条 如果浏览器能事先知道图形的大小，就能在网页中划出一个适当空间的区域给该图片慢慢显示，然后安排临近文字的版式 但如果不知道图像大小，浏览器只好等图片显示出来，确定了图片的“占地面积”后，才安排其他文字和内容的版式 图片越多，显示速度越慢。因此，如果能在HTML文件中定义好图片的大小，将加快页面显示的速度,可以使用的图像制作工具很多
12、 Photoshop 是Adobe公司的图形处理软件，它是公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具,Fireworks 是Macromedia公司的图形处理工具，是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案 还能够自动切割图像、生成光标动态感应的JavaScript程序等，而且具有强大的动画功能和完美的网络图像生成器,Paint Shop Paint Shop几乎是专为Internet设计的，该软件有许多功能都是针对网页设计的图形而提供的，比如压缩图
13、片、制作透明背景等 Paint Shop具有多任务的特性，可以同时运行多个程序，基本没有限制。它的界面比较友好，而且具有良好的中文支持,动画制作工具,Flash是Macromedia公司的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果 Flash主要用于网页设计和多媒体创作领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行，F1ash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中,Flash通过使用关键帧技术使生成的动画文件非常小，下载速度很快，缩短了网页打
14、开和动画播放的时间。另外它还使用矢量图形和流式播放技术。矢量图形可以任意改变尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而节省了浏览时间,小结,门户网站或称入门网站，多是指那些提供搜索引擎的网站 搜索引擎是一个对互联网上的信息资源进行搜集整理，然后供用户查询的系统 电子商务通常是指采用计算机技术、网络技术和远程通信技术，实现整个商务过程，使商务电子化、数字化和网络化,整个网站开发流程分为：规划阶段、设计阶段、开发阶段、发布与维护阶段 站点结构图是有关站点结构、组织方式的示意图 每个网站都应该包括一组导航工具，它出现在此网站的每一个页面中 网页设计工具可分为两类：一是源代码型；二是所见即所得。网页的本质是HTML源代码,分辨率是指用户在屏幕上观察图像时感受到的图像的精细程度，一般用每英寸所包含的像素点来表示 JPEG是一种带压缩的文件格式，在节省存储空间方面非常有效，可以保存24位真彩色的图像或照片信息，是目前比较流行的一种图像格式 GIF文件格式是压缩存储，可保存最多256色的图像或照片信息,