第一章-网页设计与制作PPT课件.ppt

1 教材 网页设计与制作 作者 李显萍出版社 高等教育出版社ISBN 9787040217147出版日期 2007 7 2 参考书 作者 徐国平出版社 高等教育出版社ISBN 7040158752出版日期 2005 6 3 课程安排 总学时 20理论学时 20实验学时 0 要求自己完成 学分 1起止周数 2 13考核形式 课堂测验 大作业成绩评定方法 平时成绩 考勤 上机 提问等 占50 期末考核占50 4 概述 网页设计与制作是学习计算机基础课程后的一门应用技能课 任务是培养学生熟悉网站的基本组成和结构 了解网页制作的基本技术 初步掌握HTML常识 以及Dreamweaver Frieworks Flash三种软件的实际应用 使学生能独立建立站点 制作网页 以此培养同学们设计网站的能力与网页编制的能力 为进一步学习其它网络应用打下良好的基础 5 网页设计与制作 第1章网页设计概述第2章HTML语言基础第3章Dreamweaver基础第4章网页中的基础元素第5章网页页面布局第6章网页中的层和时间轴第7章表单的应用第8章在网页中使用行为第9章CSS样式使用第10章网页中的多媒体应用第11章模板和库第12章站点测试和发布第13章Flash简介第14章Fireworks简介 6 第1章网页设计概述 知识目标 掌握网页 网站及主页的概念了解网页中的主要元素了解各种网页制作工具8 能力目标 各种网页制作工具的配合使用网站的整体规划网站的设计流程 7 1 1网页和网站1 2网页中的主要元素1 3网页制作工具1 4网页设计的基本流程本章小结 第1章网页设计概述 8 1 1 1网页1 1 2网站1 1 3网页的基本功能 1 1网页和网站 9 CNNIC 中国互联网络发展状况统计报告 10 1 1网页和网站 浏览网页流程图 11 1 1网页和网站 基本术语 WWW WorldWideWeb 也可以简写为W3 3W Web等 称为国际互联网 Internet因特网 又称万维网 它是Internet上基于客户 服务器体系结构的分布式多平台的超文本 超媒体信息服务系统 允许用户在一台计算机上通过Internet存取另一台计算机上的信息 俗称Web服务器 HTTP HyperTextTransferProtocol超文本传输协议 是一个用于在客户端和服务器间请求和应答的协议 是互联网上应用最为广泛的一种网络传输协议 URL UniformResourceLocator统一资源定位符 网址 如 12 浏览网页流程 URL 统一资源定位符 网址 UniformResourceLocator 13 1 网页网页 是用html HyperTextMark upLanguage 超文本标记语言 编写的 通过因特网 Internet 传输 并被web浏览器解释成可以显示出来的 集合文本 图片 声音和动画等信息元素的页面文件 网页示例 2 网页的类型根据页面内容可以分首页 主页 专栏网页 内容网页和功能网页等类型 按制作技术分为静态网页与动态网页 1 1 1网页 1 1网页和网站 14 网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合 信息可以是网页形式也可以是其他的文档形式 网页与网站的区别与联系 网站是一个文件夹 其中的文件不仅是网页还有网站所需的其他文件 素材 或文件夹 网页是一个页面文件 用来发布各种信息 网页是网站的构成要素 是网站信息发布与表现的一种主要形式 网站是网页通过超链接形成的集合 1 1 2网站 1 1网页和网站 15 网站 16 网页 17 网站构件关系 元素1 文字 图片 网页1 链接 动画 网站 元素m声音 视频 网页n表格 表单 18 网站结构图 所有网页和素材分门别类存放在某个目录下 19 网页关系图 为网站中的网页标注名称及链接关系 20 1 媒介的作用 使用者与信息之间的媒介 一方面是发布者 功能是发布信息 另一方面是浏览者 功能是提供浏览的信息 通过浏览网页找寻需要的信息 2 互动的作用 浏览者与网页制作单位之间互动的窗口 可以单向或双向传递信息 3 传输的作用 作为传输各种电子文件或信息之用 如下载说明书 更新文件 驱动程序等 1 1 3网页的基本功能 1 1网页和网站 21 各种浏览器使用情况 22 Netscape浏览器 23 IE InternetExplorer 浏览器 24 IE8浏览器 25 360安全浏览器 26 搜狗浏览器 27 火狐 Firefox 浏览器 28 腾讯tt浏览器 29 傲游 Maxthon 浏览器 30 UC手机浏览器 UC浏览器 原名UCWEB 已于2009年5月正式更名为UC浏览器 是一款把 互联网装入口袋 的主流手机浏览器 由优视科技 原名优视动景 公司研制开发 兼备cmnet cmwap等联网方式 速度快而稳定 具有视频播放 网站导航 搜索 下载 个人数据管理等功能 助您畅游网络世界 UC浏览器是目前中国手机用户使用最多的浏览器软件 功能强大且方便 傲游手机浏览器 31 1 2 1文本1 2 2图像1 2 3链接标志1 2 4其他的基本要素 网页的基本要素一般包括 文字 图像 动画和链接标志等 除此之外 网页的元素还包声音 多媒体和视频等 1 2网页中的主要元素 32 1 2网页中的主要元素 33 是网页中最基本的元素 网页中文字的设计一般从以下几个方面来考虑 1 字体的选择 2 字号 行距的选择 3 特殊字体的使用 4 字体的颜色 1 2 1文本 1 2网页中的主要元素 34 现在网络上使用的绝大多数图片和图像是gif jpeg jpg 和png文件格式 网页上使用图像要注意的问题 JPEG格式适合于照片图像 GIF格式适合于包含纯色的图像 例如插图和线条图 利用图像编辑软件来放大或缩小图像 屏幕显示图像的分辨率一般为72dpi 制作图像时 不必使用比此再高的分辨率 1 2 2图像 1 2网页中的主要元素 35 如果建立的图像中只有黑色和白色 处理时可将它保存为黑白图像格式 这样可以减少图像文件的大小 如果设计的GIF格式图像包含了渐变和直线 应尽量使得它们水平 因为GIF格以每条水平线为基础来压缩 可做成GIF动画图片 尝试各种不同的JPEG压缩率 使用合适的色彩模式 慎用动画 1 2 2图像 1 2网页中的主要元素 36 链接也叫超链接 Hyperlink 是从一个网页指向另一个目的端的链接 是页面间的链接关系 链接标志 载体 指的是网页中特殊的文本或图像 它们常常用不同的颜色和下划线来标识 在浏览器中 访问者可以用鼠标单击它们 能够从当前的网页转到链接的目的端位置 超链接的标志一般有 文本 图像 热区三种 要注意的是 所有超链接标志均应清晰无误地向浏览者标识出来 让人一看就知道 1 2 3链接标志 1 2网页中的主要元素 37 除上述几种要素之外 在网页上经常使用的还有动画 视频 声音等各种信息的形式 1 动画 目前网络上常用的动画类型有gif和Flash动画两种 2 视频 是多媒体网页的一个重要组成部分 常用的视频格式有avi mpeg和mov等 视频会大大增加网页的文件量 从而使用访问速度受到影响 因此要慎用 3 音频 在网页中插入音频会增加网页的生动性 常用的音频格式有rm ram midi wav和mp3等格式 音频文件和视频文件一样都会增加网页的文件量 因此要慎用 1 2 4其他的基本要素 1 2网页中的主要元素 38 1 3网页制作工具 1 3 1网页编辑工具1 超文本标识语言 HTML 2 FrontPage简介3 Dreamweaver简介1 3 2网页图像编辑工具1 3 3动态网页技术 39 1 3网页制作工具 1 超文本标识语言 HTML 40 FrontPageFrontPage是Microsoft公司开发的设计网页和管理网站的软件 除了所见即所得的编辑功能之外 也可以直接编辑HTML标记 让设计者可以轻松的编辑网页 FrontPage2000 2002 2003版本支持最新的网页标准 比如XML CSS2等等 Dreamweaver这是现在使用最广泛的网页编辑工具之一 Dreamweaver是Macromedia公司 已被Adobe公司收购 推出的网页编辑工具 它是一个所见即所得网页编辑器 支持最新的DHTML DynamicHTML 动态HTML 和CSS标准 采用了多种先进技术 能够快速高效地创建极具表现力和动感效果的网页 使网页创作过程变得非常简单 1 3网页制作工具 41 FrontPage软件 42 微软新开发的网页设计制作工具MicrosoftExpressionWeb 由于frontpage已经停止开发 取而代之的是OfficeSharepointDesinger 面向sharepoint开发 跟ExpressionWebDesigner 面向网页设计师 功能比较强大 对xhtml和css支持也很好 43 Dreamweaver软件 44 VisualStudio NetMicrosoftVisualStudio NET是一套完整的集成开发环境 VisualStudio NET中包含了VisualBasic VisualC VisualC 和VisualJ 等程序设计语言 用于设计ASPWeb应用程序 XMLWebServices 桌面应用程序和移动应用程序 EditPlusEditPlus是一款功能强大的文字处理软件 它可以充分的替换记事本 它也提供网页作编辑及程序设计许多有用的功能 支持HTML CSS PHP ASP Perl C C Java JavaScript VBScript等多种语法的着色显示 1 3网页制作工具 45 VisualStudio Net软件 46 EditPlus软件 47 1 3网页制作工具 常用网页图形制作软件FireworksFireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件 使用Fireworks可以轻松地制作出尺寸较小的图形 GIF动画 PhotoshopPhotoshop是Adobe公司推出的功能强大的平面图像处理软件 Photoshop在图像编辑 桌面出版 网页图像编辑 广告设计 婚纱摄影等各行各业的广泛应用 它已成为许多涉及图像处理的行业的事实标准 CorelDRAWCorelDraw是加拿大Corel公司开发的著名绘图软件包 它既是一个大型的矢量图形制作工具软件 也是一个大型的工具软件包 48 Fireworks软件 49 Photoshop软件 50 CorelDRAW软件 51 1 3网页制作工具 常用网页动画制作软件FlashFlash是Macromedia公司开发的一款优秀的网页动画开发软件 从简单的动画到复杂的交互式Web应用程序 它使用户可以创建任何作品 通过添加图片 声音和视频 可以使Flash应用程序媒体丰富多彩 UleadGifAnimatorUleadGIFAnimator是Ulead 友立 公司发布的一个动画GIF制作的工具 网页设计者可以快速地轻松创建和编辑网页动画文件 Swish虽然网上的动画早已是flash的天下 但Flash的设计太过繁琐 Swish是一款非常方便的Flash制作工具 可以实现简单地在网页中加入Flash动画 52 Flash软件 53 UleadGifAnimator软件 54 Swish软件 55 DreamweaverFlashFireworks三个软件被称为 网页制作三剑客 是现在公认的比较标准的网页制作利器 原先是美国MACROMEDIA公司开发的集网页制作和网站管理及图像 动画于一体的所见即所得开放工具 由于Macromedia2005年被Adobe并购 故现已成为Adobe旗下产品 1 3网页制作工具 56 动态网页可以实现网页浏览者和网页设计者的交互 实现交互技术有两种 一种是客户端技术如常用的JavaScript和VBScript 另一种是服务器端技术如目前常用的ASP和PHP 1 ASP ActiveServerPages 2 PHP HypertextPreprocessor 3 JSP JavaServerPages 1 3 3动态网页技术 1 3网页制作工具 57 静态网页与动态网页 静态网页 1 静态网页文件以 htm html shtml等常见形式为后缀 而不含有 2 网页内容一经发布到网站服务器上 无论是否有用户访问 每个静态网页都固定内容地保存在网站服务器上 静态网页是一个独立不变的文件 3 静态网页的内容相对稳定 因此容易被搜索引擎检索 4 静态网页没有数据库的支持 在网站制作和维护方面工作量较大 5 静态网页交互性仅限于客户端 在功能方面有较大的限制 6 网页上能动的元素只是一种动态效果 动效网页 不等于动态网页 58 静态网页与动态网页 动态网页 1 动态网页以asp jsp php perl cgi等形式为后缀 并且在某些动态网页网址中有一个标志性的符号 2 动态网页的内容是可根据某种条件的改变而自动改变 能与服务器端交互信息 如计数器 聊天室 论坛 3 动态网页以数据库技术为基础 并可读写服务器端的文件 大大降低网站维护的工作量 4 动态网页技术可以实现更多的功能 如用户注册登录 在线调查管理 企业事务处理等等 5 动态网页当用户请求时先由服务器运行完得到结果后才返回一个完整的 静态 网页给客户端浏览器 动态网页是存于服务器的文件与浏览在客户端的文件不相同的两个文件 59 1 4 1网站的设计流程1 4 2网页的设计与制作1 4 3网页的测试1 4 4网页上传和发布 1 4网页设计的基本流程 60 1 4网页设计的基本流程 1 确定网站的主题2 规划网站的整体结构3 收集整合网页素材4 确定网页版面布局 5 制作网页 6 添加网页特效 7 测试和发布网站 1 4 1网站的设计流程 61 1 确定网页的版面布局 1 平衡性 2 对称性 3 对比性 4 疏密度 5 比例 6 韵律感 网页的排版布局是决定网站美观与否的一个重要方面 通过合理的 有创意布局 才可以把文字 图像等内容完美地展现在浏览者前面 2 网页设计与制作网页设计与制作一般分为静态网页制作和动态网页制作两类 1 4 2网页的设计与制作 1 4网页设计的基本流程 62 1 浏览器兼容性测试 目前浏览器有 InternetExplorer与Netscape两大主流浏览器 二者对HTML和CSS等语法的支持度是不同的 在Dreamweaver中提供了可以检查网页中是否含有某版本浏览器不能识别的语法功能 设计者可以借助其进行检查 2 平台的兼容性测试 设计要为用户着想 必须最少在一台PC和一台Mac机上测试你的网站网页 看看兼容性如何 3 超链接完好性测试 超链接是连接网页之间 网站之间的桥梁 浏览者是不愿意访问一个经常出现 找不到网页 的问题的网站 作为设计者必须检测超链接的完好性 保证链接的有效性 不要留下太多的坏链接 1 4 3网页的测试 1 4网页设计的基本流程 63 1 4网页设计的基本流程 1 4 4网页上传和发布网页设计好 必须把它发布到互联网上 否则网站形象仍然不能展现出去 发布的服务器可以是远程 也可以是本地 如果是发布到互联网上 要先申请域名和主页空间 然后再利用专用软件 如 CuteFTP 上传 FTP有很多种软件 最著名的是CuteFTP和LeapFTP 也可以用Dreamweaver内置的FTP上传 可以向Internet上访问率较高的导航台注册 如Yahoo Excite AitaVista HotBot等 以便于搜索引擎进行检索 或做友情链接1 4 5网站日常维护和管理这甚至比网站开发工作更重要 不然不管开发工作多么优秀 网站不久就会因内容陈旧而无人问津 从而失去用户 这是一项长期的任务 需要投入大量的物力 财力和人力 持之以恒 坚持不懈 网站维护主要包括及时修改网页中的错误 修复由于其他意外引起的网站破坏 对网站内容进行定期备份等 网站更新主要包括网页内容的增加 调整 修改和删除等 这些工作不能靠主观来决定 而是更多的需要得到各类用户的反馈和评价 64 本章小结 第1章网页设计概述 65 1 1网站的种类1 2网页结构的规划1 3网站的设计原则及标准1 4网页外观的设计1 5架设WEB服务器补充网站目录 第1 章网页 网站制作基础 66 1 1网站的种类 将网站按照主体性质不同分为 政府网站 企业网站 商业网站 教育科研机构网站 个人网站 其它非盈利机构网站以及其它类型等 67 按网站的内容来分可以分为以下几类 1 搜索引擎式门户网站这类网站的主要功能是提供强大的搜索引擎和其他各种网络服务 如新闻 聊天 论坛 免费邮件等 这类网站往往需要先进的技术支持和大量网站维护及信息提供人员 目前在业界这类网站多是由大型网络公司的构建并运营的 门户网站最初提供搜索引擎和网络接入服务 后来由于市场竞争日益激烈 门户网站不得不快速地拓展各种新的业务类型 希望通过门类众多的业务来吸引和留驻互联网用户 以至于到后来门户网站的业务包罗万象 成为网络世界的 百货商场 或 网络超市 门户网站可分为综合门户 行业门户 地区门户等 1 1网站的种类 68 2 综合性门户网站这类网站以新闻信息 娱乐资讯为主 这类网站有较高的技术与维护要求 需要庞大的采编人员 许多大型的搜索引擎式门户网站也是综合性门户网站 3 电子商务网站这类网站以网上交易为主要功能 就其所面向的服务对象不同 可以分为B2B businesstobusiness B2C businesstocustomer 和C2C customertocustomer 等 电子商务是一个很好的销售形式 蕴藏着巨大的商机 1 1网站的种类 69 4 小型专题网站或个人网站这类网站是目前发展最迅速的 也是最具活力的 它主要提供创建者自身的信息 或者就某一专题提供最新资讯 完整详尽的历史资料以及相关论坛等内容 这类网站内容较为单一 技术要求相对较低 适合于企业机关 组织机构和个人建造 1 1网站的种类 70 1 2网页结构的规划 71 人们上网冲浪看到的网页是千姿百态的 一般来说 一个网站或者具有特定主题的一组网页应该包括3种类型 主页索引页内容页每一类型的网页都具有自己的特点 1 2网页结构的规划 72 1 主页主页是指个人或单位的基本页面 它是某一Web节点的起始点 主页是整个网站或者一组网页的入口 用户可以通过主页提供的线索访问其他页面的信息和资源 在浏览器URL栏中输入网址显示网站主页 1 2网页结构的规划 73 2 索引页索引页即网站中的导航页 为用户提供网站或者一组网页的索引 帮助用户较快地找到想要获取的信息 索引页的作用相当于一本书的目录 图书目录可以告诉读者这本书的内容和具体页数 同样 索引页可以告诉用户这个网站或这组网页的内容 并且通过单击索引页上的索引链接就能很快找到相应的具体内容 1 2网页结构的规划 74 3 内容页内容页是表达网站中相应主题具体内容的网页 相当于书的正文 它提供了网站的具体内容 是网站的主体 在这些内容页中既可以用文本来表现网站每个主题的具体内容 也可以用各种图片 动画 影视片段或插件来表现具体内容 1 2网页结构的规划 75 1 3网站的设计原则及标准 多媒体网页的制作过程就是根据一定的应用主题 选择 编辑表现主题的多媒体元素和数据 然后把这些多媒体元素和数据按照一定的结构有机地组织在一起 并实现交互控制的过程一个优秀的页面应考虑到以下3个方面 内容 速度 风格 网站设计必须知道的65条原则 76 01明确内容02抓住用户04快速下载05网站升级10网站地图12点击规则16避免长文本页面17不要使用卷滚条19网站介绍21闪烁让人头痛23向前和向后按钮 25点击记数器29避免使用过大的图像31选择使用Flash40使用先进技术45避免错误链接47在搜索引擎上登记网站55 空白万岁 65使用最新版本的软件 1 3网站的设计原则及标准 77 网站开发制作的工作流程图 1 3网站的设计原则及标准 78 创建站点的一般步骤 第一步是对站点进行规划 需要了解站点的目的 确定它要提供的服务 网页的内容等 在这一步里 用一张纸和一支笔就能很好地解决问题 有时 一个良好的构思比实际的技术实现更为重要 因为它直接决定站点质量和将来的访问流量 第二步是设计站点的基本结构 利用Dreamweaver可以在本地计算机上构建出整个站点的框架 并在各个文件夹中合理地安置文档 如果已经构建了自己的站点 也可以利用Dreamweaver来编辑和更新现有的站点 Dreamweaver可以在站点窗口中以两种方式显示站点结构 一种是目录结构 另一种是站点地图 用户可以使用站点地图方式快速构建和查看站点原型 1 3网站的设计原则及标准 79 第三步是搜集与网页制作有关的文本 图片 各种音频视频文件等资料 做好制作网页的各种素材准备工作 第四步开始具体的网页制作 一旦创建了本地站点 就可以在其中组织文档和数据 一般来说 文档就是在访问站点时可以浏览的网页 文档中可能包含其他类型的数据 如文本 图像 声音和动画等 网站中各个网页的制作完成以后 需要对网页中各种网页元素添加必要的链接 使整个网站具有整体性和交互性 1 3网站的设计原则及标准 80 站点规划网站可以看作是一系列文档的组合 这些文档通过各种链接关联起来 可能拥有相似的属性 如描述的主体具有相关性 采用的设计彼此相似或实现相同的目的等 也可能只是关系的链接 利用浏览器 就可以从一个文档跳转到另一个文档 实现对整个网站的浏览 不论是正规的商业网站还是个人网站 要想把网页制作得丰富多彩 吸引大量用户前来访问 网站规划设计都是至关重要的 除非只设计一两个网页 否则网页制作应该按网站来考虑 首先对网站内容进行规划设计 1 3网站的设计原则及标准 81 在站点规划中主要做的工作是网站内容的设计 也就是对网站主题 具体内容及表达内容所用的媒体的设计 创建新网站的最佳方法是先建立原型系统 再进行详细设计 最后正式实施 进行详细设计时 最重要的是确定网站的运行模式 是宣传性站点或者随意性很强的个人站点 还是通过广告 销售等方式获利的站点 区别对待 对于商业网站 必须充分考虑财力 人力 计算机数量 网络连接方式 系统的经济效益 网站验证和用户反馈等诸多方面的问题 必须准确地知道网站的目标和系统的资金投入 1 3网站的设计原则及标准 82 影响网站成功的因素主要有网站结构的合理性和直观性 多媒体信息的实效性和网站维护的开销等 成功网站的最大秘诀在于让用户感到网站对他们非常有用 因此 网站内容开发对于网站建设至关重要 进行网站内容开发的要点包括 HTML文档的效果由其自身的质量和浏览器解释HTML的方法决定 由于不同浏览器的解释方法不尽相同 所以在网页设计时要充分考虑到这一点 让所有浏览器都能够正常浏览 网站信息的组织没有任何简单快捷的方法 吸引用户的关键在于总体结构的层次分明 应该尽量避免形成复杂的网状结构 网状结构不仅不利于用户查找感兴趣的内容 而且在信息不断增多后还会使维护工作非常困难 1 3网站的设计原则及标准 83 图像 声音和视频信息能够比普通文本提供更丰富和更直接的信息 产生更大的吸引力 但文本可提供较快的浏览速度 因此 图像和多媒体信息的使用要适中 减少文件数量和文件大小是必要的 对于任何网站 每一个网页或主页都是非常重要的 因为用户的第一印象往往是一个网站的主页 好印象能够吸引用户再次光临这个网站 网站内容应该是动态的 定时进行修改和更新 以便使网站紧跟市场潮流 在主页上注明更新日期及URL 这对于经常访问的用户非常有用 网页中应该提供一些联机帮助功能 比如输入查询关键字就可以提供一些简单的例子 或者列出常用的关键字 千万不能让用户不知所措 网页的文本内容应简明 通俗易懂 所有内容都要针对设计目标而写 不要文不对题 文字要正确 尽量减少语法错误和错别字 1 3网站的设计原则及标准 84 1 3网站的设计原则及标准 网站信息归类 网站设计者先把整个网站结构规划好 然后再分别制作各个网页 大多数网站为网站浏览者提供一个首页 首页再链接多个网页 一般来说 网站是一个整体 其中包括一个首页和若干个网页构建而成的 85 网页版式的基本类型主要有骨骼型 满版型 分割型 中轴型 曲线型 倾斜型 对称型 焦点型 三角型 自由型等10种 1 骨骼型网页版式的骨骼型是一种规范的 理性的分割方法 类似于报刊的版式 常见的骨骼有竖向通栏 双栏 三栏 四栏和横向的通栏 双栏 三栏和四栏等 一般以竖向分栏为多 这种版式给人以和谐 理性的美 几种分栏方式结合使用 既有条理性 又活泼而富有弹性 下图综合运用多种分栏形式 1 4网页外观的设计 86 图骨骼型 1 4网页外观的设计 87 2 满版型页面以图像充满整版 主要以图像为诉求点 也可将部分文字压置于图像之上 1 4网页外观的设计 88 3 分割型把整个页面分成上下或左右两部分 分别安排图片和文字 1 4网页外观的设计 89 4 中轴型沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列 1 4网页外观的设计 90 5 曲线型图片 文字在页面上作曲线的分割或编排构成 产生韵律与节奏 1 4网页外观的设计 91 6 倾斜型页面主题形象或多幅图片 文字作倾斜编排 形成不稳定感或强烈的动感 引人注目 1 4网页外观的设计 92 7 对称型对称的页面给人稳定 严谨 庄重 理性的感受 1 4网页外观的设计 93 8 焦点型焦点型的网页版式通过对视线的诱导 使页面具有强烈的视觉效果 焦点型分3种情况 1 4网页外观的设计 94 1 中心以对比强烈的图片或文字置于页面的视觉中心 2 向心视觉元素引导浏览者视线向页面中心聚拢 就形成了一个向心的版式 向心版式是集中的 稳定的 是一种传统的手法 3 离心视觉元素引导浏览者视线向外辐射 则形成一个离心的网页版式 离心版式是外向的 活泼的 更具现代感 运用时应注意避免凌乱 1 4网页外观的设计 95 9 三角型网页各视觉元素呈三角形排列 1 4网页外观的设计 96 10 自由型自由型的页面具有活泼 轻快的风格 1 4网页外观的设计 97 下面所举的实例网站是一个关于图书的网站 网站名为 网上书苑 包括 文学作品 科普作品 儿童读物 社会科学 宗教书籍 和 考试用书 6个主题 在这6个主题中还包含其他一些相关的内容 网站主页设计为一个索引页 每一个网页设计一个索引 导航栏 以便浏览者随时跳转到想要浏览的主题 在各个主题页中还应该设计一个索引框架 以便在各主题的相关内容中浏览 在这些网页中主要以文本为主 另外 还需要添加一个用户信息反馈的网页 以便收集用户意见和联系用户 网站的基本结构设计主要是设计各项内容之间的层次关系和链接跳转关系 在网站内容设计的基础上 继续对 网上书苑 网站进行基本结构设计 图所示为网站的基本结构示意图 1 4网页外观的设计实例 98 图 网上书苑 网站基本结构示意图 1 4网页外观的设计实例 99 图 网上书苑 网站主页的页面设计 1 4网页外观的设计实例 100 图 网上书苑 网站 文学作品 网页的页面设计 1 4网页外观的设计实例 101 1 4网页外观的设计实例 102 103 搜集网页制作素材 网站的内容和结构设计好以后 就可以根据网站内容和基本结构设计的要求 进行素材的准备工作和网站编辑工作 具体说 就是要搜集与网页制作有关的文本 图像 音频和视频等资料 也可以从网上下载有用的内容和素材 并且根据要求进行图像处理 动画制作 音效生成和视频编辑等工作 以后的章节将介绍利用各种工具进行图像处理和动画制作 至于音效和视频的生成和编辑 感兴趣的同学可以参考有关书籍 1 4网页外观的设计 104 网站风格 网站风格设计决定了网站为浏览者提供的第一印象与直观反映 是网站吸引浏览者的重要参照指数之一 和网站内容与网站功能具有相同的重要地位 1 色彩搭配 白色和黑色背景的网页颜色搭配最方便 亮色与暗色配合最容易突出画面 如黑与白 红与黑 黄与紫 近似颜色搭配能给人一种柔和的感觉 如墨蓝与淡蓝 深绿与浅绿 一个页面最好有一个主色调 而且色彩最好不要超过三五种 最好采用同一个色系 1 4网页外观的设计 105 2 页面布局页面布局一般要遵循以下原则 将网站徽标 Logo 尽可能的放在每个页面上最突出的位置 突出网站的标准色彩 总结一句能反映网站精髓的宣传标语 相同类型的图像采用相同效果 最好所有页面都采用相同或相似的排列方式 这样给人一种整齐划一的感觉 每个页面的版面也可以根据内容的要求有一定的特点 但是版面之间应该有一定的联系和继承 1 4网页外观的设计 106 3 页面大小大多数情况下 页面总是在800 600或1024 768的全屏幕方式下浏览的 页面宽度应控制在整屏宽度 页面长度可稍长于整屏长度 对于较长的页面最好拆分成几个页面进行链接 为了保证下载时间 对于大多数页面来说 网页上所有元素 包括图像 组件 HTML文件等 的大小应该小于100KB 1 4网页外观的设计 107 4 文字格式最适合于网页正文显示的字体大小为12磅左右 或用CSS设计 字体可以更充分地体现设计中要表达的情感 在同一页面中 字体种类少 版面雅致 有稳定感 字体种类多 则版面活跃 丰富多彩 较大的字体可用于标题或其他需要强调的地方 小一些的字体可以用于页脚和辅助信息 需要注意的是 小字号容易产生整体感和精致感 但可读性较差 1 4网页外观的设计 108 5 图像处理图像的外形 大小 数量以及与背景的关系 都与内容有着密切的联系 方形的稳定 严肃 三角形的锐利 圆形或曲线外形的柔软亲切 退底图及一些不规则或不带边框的图像活泼 大图像容易形成视觉焦点 感染力强 传达的情感较为强烈 小图像常用来穿插在字群中 显得简洁而精致 有点缀和呼应页面主题的作用 1 4网页外观的设计 109 1 4网页外观的设计 目前网页多媒体文件常见格式 图片文件为 jpg gif等Flash文件为 swf音频格式为 mid rmi mp4 mpg mpa mp3 mp2 mp1 ra rm等视频格式为 avi wmv asf rm rmvb ram rmm rt smi smil等 110 在XP环境中利用IIS架构自己的网站安装IIS在WindowsXP专业版中 IIS并不是默认安装的 而是作为可选的组件 1 放入XP光盘 然后运行光盘 在运行界面中选择添加组件 2 或者打开控制面板然后打开添加或者删除文件 选择添加Windows组件 在弹出对话框中选择inte