网页设计与制作基础PPT课件.ppt

网页设计与制作 李顺联系电话1 内容概要 一 WWW的工作原理二 网站制作流程三 Web标准四 网页的组成元素五 课程主要内容 2 一 WWW的工作原理 客户端 服务器端 发出请求 发回网页 3 1 什么是静态网页所谓 静态 指的是网站的网页内容 固定不变 当用户浏览器通过互联网的http协议向web服务器请求提供网页内容时 服务器仅仅是将原已设计好的html文档传送给用户浏览器 如果网站维护者要更新网页的内容 就必须手动更新所有相关的html文档 静态网页的扩展名 htm或html 1 1静态网页 4 2 静态网页示例 5 3 静态网页的工作原理 接受请求 找到静态网页 发送网页 服务器端 客户端 6 4 静态网页源代码显示方法查看 源文件 7 1 2动态网页 由用户生成内容 1 什么是动态网页所谓动态网页 就是服务器端可以根据客户端的不同请求动态产生网页内容 两个显著特点 可以动态产生页面支持客户端和服务器端的交互功能 8 2 动态网页示例 BBS论坛 留言板 聊天室 9 3 动态网页的工作原理 接受请求 找到动态网页 发送网页 服务器端 执行程序生成HTML页面 客户端 10 4 动态网页编程技术 ASP ActiveServerPages 微软产品 扩展名 aspPHP HypertextPreprocessor 网络小组开发维护 扩展名 phpJSP JavaServerPages 由SUN公司推出 扩展名 jspASP NET 微软产品 扩展名 aspx 11 课程定位 静态网页的设计与制作 12 评价方式 平时成绩考试 13 二 网站制作流程 1 网站的整体规划和设计主题和内容的确定网站栏目的确定网站目录结构的设计网站链接结构的设计网站的风格设计2 网站素材的准备和收集 3 网页的设计制作页面美工设计静态页面制作程序开发4 后期维护 14 15 16 17 网站目录结构的设计 依据栏目创建目录结构 18 小型网站目录结构的设计 19 在设计网站目录结构时要根据情况灵活处理 如 课程管理系统StudyOA 20 创建网站注意事项 建立树型文件夹保存文档创建网站所需的所有资源均应保存于站点文件夹中合理的为文件命名避免使用中文为文件夹 文件命名 21 网页设计与制作不仅是一种技能 更是技术与艺术的高度统一 它要求网页设计者既要掌握网页制作的技术 更要具有相应的艺术修养 网站的风格设计 22 23 24 25 26 27 28 大型网站开发群体的人员组成 总体策划人员网络媒体技术人员美工编辑人员网页制作人员网络数据库开发人员 网站测试人员网站管理人员 29 三 Web标准 1 什么是web标准web标准是由W3C WorldWideWebConsortium 中文译名万维网联盟 和其他标准化组织制定的一套规范集合 web标准的目的在于创建一个统一的用于web表现层的技术标准 以便通过不同浏览器或终端设备向最终用户展示信息内容 30 2 web标准的构成 可扩展标记语言 ExtensibleMarkupLanguage XML1 0 TheExtensibleHyperTextMarkupLanguage 可扩展标识语言 XHTML1 0 在HTML4 0的基础上 用XML的规则进行扩展 得到了XHTML 31 3 什么样的网页是符合标准的真正符合标准的网页设计是指能够灵活地使用web标准对web内容进行结构 表现与行为的分离 32 符合web标准的布局方式 页面里有的仅仅是内容 文字和图片 图片是指内容中的图片 而非修饰图片 没有任何修饰 它看上去就像一张单调的页面 这些文字和图片仅仅是依次罗列下来 没有任何样式 然后加入表现 将所有修饰的图片做为背景 用CSS来定义每一块内容的位置 字体 颜色等 当抽掉css文件 剩下的就是最本质的内容 这样才能在文本浏览器 手机 PDA等设备中阅读 才能随时修改css实现改版 33 四 网页的组成元素 文本图像动画超链接表格表单音频视频 34 1 文本 文本是网页存在的基础 在网页中 网页的设计与制作者可以通过设置字体 字号 颜色等来改变文本的视觉效果 35 1 文字风格 风格要与内容性质相吻合 例如 政府网页其文字具有庄重和规范的特质 字体造型规整而有序 简洁而大方 36 37 38 休闲旅游类内容网页 文字编辑应具有欢快轻盈的风格 字体生动活泼 跳跃明快 有鲜明的节奏感 给人以生机盎然的感受 39 40 41 42 个人网页则可结合个人的性格特点及追求 别出心裁 给人一种独特个性的印象 43 44 45 46 2 文字的大小一般情况下 网页正文可以使用12px 9磅 16px 12磅 大小的文字 最适合网页正文显示的字体大小为12磅 16px 左右 现在很多的综合性网站 由于在一个页面中需要安排的内容较多 通常采用9磅 12px 的字号 47 3 字体的选择网页设计者可以用字体来更充分的体现设计中要表达的感情 粗体字强壮有力 有男性特点 适合机械 建筑业等内容 细体字高雅细致 有女性特点 更适合服装 化妆品 食品等行业的内容 在同一页面中 字体种类少 版面雅致 有稳定感 字体种类多 则版面活跃 丰富多彩 关键是如何根据页面内容来掌握这个比例关系 从加强平台无关性的角度来考虑 正文内容最好采用默认字体 宋体基本上是目前显示中文唯一的通用web字体 48 4 行距行距的常规比例为10 12 字10 行距12 适当的行距会形成一条明显的水平空白条 以引导浏览者的目光 行距过宽则会使一行文字失去较好的延续性 5 字距现代网页设计比较流行把标题文字字距拉开或变窄的排列方式 以体现轻松 舒展 娱乐或抒情的版面 也常通过压扁文字或加宽行距来体现 运用字距与行距的宽窄同时做综合变化 这样能够给作品版式增加空间层次和弹性 49 图形图象必须完全符合网页的主题 并以创新的构思和强烈的个性 使主题与表现两者较好的统一 2 图像 50 制作网页时可用的图片格式 GIF图形采用非失真的压缩方式 在压缩的过程中 像素信息不会被牺牲掉 被牺牲的是图形的颜色 GIF图片文件最多只能保存256色 对于颜色不多 线条清楚的图 采用GIF格式 GIF图像支持透明的背景色和动画格式 51 JPG JPEG图片文件采用失真的压缩方式 图片在压缩的过程中 图形的像素信息会被减去一些 但图片的颜色不会丢失 因此 全彩的连续色调 没有明显边缘的图 如风景照 适合采用JPG文件格式显示 其不支持透明的背景色和动画格式 52 PNG是Fireworks的默认文件格式 支持高级别无损耗压缩 受最新的web浏览器支持 支持透明图像的制作 53 3 动画 网页动画主要分为flash动画和gif动画 其中 flash动画运用的最广泛 gif动画通常用于制作简单的 只有几帧图片的交替动画 54 4 超链接 所谓超链接是指从一个网页指向一个目标的链接关系 这个目标可以是另一个网页 也可以是一幅图片 一个电子邮件地址 一个文件甚至是一个应用程序 它表明了网页文件之间的相互链接关系 55 5 表格 表格的两大用途 显示数据和排版 56 6 表单 57 7 音频 网页中的音频文件格式 WAV格式 无损的音乐 完全未经压缩 10MB 分钟 Windows系统使用的标准数字音频格式 MP3格式 能够以较小的比特率 较大的压缩比达到近乎完美的CD音质 MIDI格式 文件一般较小 常用于提供背景音乐 WMA格式 适合在网络上在线播放RealAudio 流动的旋律 流音频格式 主要用于提供网络实时广播 Real的文件格式主要有 ra rm rmx等 58 8 视频 网页中的视频文件格式 ASF WMV RM RMVB 59 网页设计小贴士 1 符合视觉规律文字横向编排由于人眼的视线横向移动比竖向移动快而且不易疲劳 因此将文字尽量横向排布 页面尽量保持横向尺寸固定 竖向尺寸不固定 目的是使人们能连续不间断地浏览页面 需要注意的是 应避免页面左右 上下都能滚动 这会给浏览者带来极大的不便 60 将重要信息置于 最佳视觉区域 在进行网页版式设计中 要考虑将最重要的信息或视觉流程的停留点安排在注目价值高的位置 这就是最佳视觉区域 由于人们习惯于将视线从左到右 从上到下移动 因而视区中的不同位置注目程度不同 视觉区域内上部比下部注目程度高 左侧比右侧更引人注意 61 2 避免视觉疲劳 限制网页长度尽可能将网页限制在1屏以内 即满屏 浏览者不需要拖动滚动条就可以看到下面的导航信息 页面不宜过长 一般控制在1 3屏 尽量不超过5屏 文字大小适中 行距合理位置的一致如 按照人的阅读习惯 固定导航的位置 免去用户去找导航的麻烦 62 适量安排多媒体元素网页中的动画不是越多越好 而是要形成动静相宜的效果 因此需要适量安排多媒体元素 并注意主次关系 合理配色同类色相对比邻近色相对比对比色相对比互补色相对比 63 五 课程主要内容 html HyperTextMarkuplanguage 超文本标记语言CSS CascadingStyleSheets 层叠样式表DreamweaverCS4的使用 64 HTML HyperTextMarkuplanguage 超文本标记语言HTML文件的基本结构 1关于html 65 HTML常用标记 n 1 2 3 4 5 6 标题字标记 段落标记换行标记 无序列表标记 有序列表标记分隔线标记插入图片标记 超级链接标记 表格标记 插入滚动字幕添加背景音乐 嵌入视频 音频 表单 66 CSS CascadingStyleSheet 可译为 层叠样式表 或 级联样式表 它定义如何显示HTML元素 用于控制Web页面的外观 通过使用CSS实现页面的内容与表现形式分离 CSS的基本语法选择符 属性 属性值 CSS的使用方法内联式样式表 偶尔使用 内嵌式样式表外部链接式样式表导入外部样式表 2关于CSS 67 Dreamweaver发展版本MacromediaDreamweaver1 0 发布于1997年12月 Dreamweaver1 2承接于1998年3月 MacromediaDreamweaver2 0 发布于1998年12月 MacromediaDreamweaver3 0 发布于1999年12月 MacromediaDreamweaverUltraDev1 0 发布于2000年6月 MacromediaDreamweaver4 0 发布于2000年12月 MacromediaDreamweaverUltraDev4 0 发布于2000年12月 MacromediaDreamweaverMX6 0 发布于2002年5月 3关于dreamweaver 68