第一章-网页设计基础(最新)ppt课件

课程要求 期末考试成绩 期末卷面成绩 60 平时成绩 40 平时成绩 平时上机作业 30 课堂纪律 10 考勤要求 1 迟到一次期末最终成绩 2分2 旷课一次期末最终成绩 8分 旷课3次取消本门课程考试资格 了解预备知识明确网页设计的任务了解网页设计的流程掌握网页设计的基本原则掌握常用网页设计软件 学习目标 基于工作过程的网页设计与制作教学 第1章网页设计基础 什么是网页和网站 1 1预备知识 什么是网页 网页是由HTML 超级文本标识语言 或者其他语言编写的 通过IE浏览器编译后供用户获取信息的页面 它又称为Web页 其中可包含文字 图像 表格 动画和超级链接等各种网页元素 什么是网页和网站 1 1预备知识 什么是网站 网站就是一个或多个网页的集合 这些网页以一定的形式链接在一起 成为一个整体 简单的说 网站就像布告栏一样 人们可以通过网站来发布 或浏览 想要公开 或查看 的资讯 或者利用网站提供相关的网络服务 公司企业宣传 资讯发布网上志愿填报及录取电子商务网站个人网站 1 1预备知识 网页的分类 按所处位置分类按表现形式分类 1 1预备知识 按所处位置分类 按网页在网站中所处的位置可将网页分为主页和子页两类 主页或首页 index default 子页或内页 按表现形式分类 按网页的表现形式可将网页分为静态网页和动态网页 按表现形式分类 按网页的表现形式可将网页分为静态网页和动态网页 静态 htm html 动态 asp php jsp 什么是HTML 是HyperTextMarkupLanguage的简写 即超文本标记语言 是用来描述Internet上超文本文件的语言 超级文本标记语言 HTML 提示 1 HTML并不是一种编程语言 而是一种页面描述性标记语言 它通过各种标记描述不同的内容 说明段落 标题 图像和字体等在浏览器中的显示效果 浏览器打开HTML文件时 将依据HTML标记去显示内容 2 HTML文件独立于平台 对多平台兼容 通过网页浏览器能够在任何平台上阅读 HTML标记的一般格式如下 内容说明 标记符一般需要配对使用 之间的内容是被作用的对象 所有的标记都用一对尖括号 括起来 1 HTML编写方法HTML文件是分层组织的 最外层是标记 在此标记内一般有两层 head层 文档头 和body层 文档体 这两部分内容都包含在和之间 在这些标记内可以嵌套其他标记 一般情况下文档头存储网页的信息 比如网页标题存放在标记中 网页关键字存放在标记中 文档体是网页内容的显示部分 主要由表格标记 段落标记 图像标记等组成 标题文档主体部分 演示实例1 欢迎访问西安交通大学城市学院这是我做的第一个网页 演示 HTML的语法 HTML语法由标记 Tags 和属性 Attributes 组成 1 单标记 标记属性 参数 例如 常见强制换行标签 分割线标签 2 双标记 标记属性 参数 内容例如 这是我做的第一个网页 3 标记属性 元素属性出现在标记的内 并且和标记名之间有一个空格分隔 属性值用可以用 引起来 多属性间用空格分隔 文字标签属性 1 文字颜色指定文字颜色 RRGGBB 16进制数码或者颜色名例 01 htm2 文字字体指定文字字体 例 02 htm 1 文字标签及属性 3 文字大小 1 2 3 4 5 6 7or 例 03 htm 2 段落标签 及属性 1 段落标签 在HTML文档中无法用多个回车 空格和Tab键来调整文档段落的格式 要用HTML标记来强制换行和分段 是换行单标记 它的作用相当于回车符 标记用于划分段落 可以单独使用 也可以成对作用于一段文字 每一个段落后面会自动空出一行 例 05 htm注意 标签与标签区别结束会空一行 结束不空行 仅换行 标记不是成对出现的 HTML文档可以插入注释 注释内容不会在浏览器窗口显示HTML注释的格式为 例 10 htm left center right 例 11 htm 普通超级链接 超级链接是整个WWW应用的核心和基础 如果没有超级链接的概念 那么 我们现在所有的WWW的应用将不复存在 所以 对超级链接的掌握具有特殊重要的意义 普通超级链接 超级链接是用标记定义的在标记下 有属性href href的属性值为一个URL地址如 指向学院的超级链接如 普通超级链接例 18 htm 新开链接窗口 开一个新的 浏览器 窗口 TargetWindow target self 在当前页面打开网页target blank 以新建页面的方式打开网页例 20 htm HTML对图片的控制 基本语法 引用图片必须用标签 标签下的基本属性是src属性 src的属性值为所引用的图片的URL地址 src属性是必须的 Src的URL可以是绝对地址 也可以是相对地址例 21 htm HTML对图片的控制 所谓图片的替代文本 指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本 定义图片替代文本的方法是 例 21 htm 图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小 定义图片的显示大小的方法是 width指定图片的宽度 height指定高度 它们的属性值可以是象素 也可以是 例 22 htm HTML对图片的控制 图片的边框我们可以为一幅图片加一个边框以突出显示 border的属性值为象素数例 23 htm HTML对图片的控制 图片的对齐方式图片可以相对于页面或单元格有一个对齐方式 定义水平对齐方式的方法是 HTML对图片的控制 定义图片与左 右的文本之间的间距图片在显示时 与左右的文本之间可以有一定的间距 hspace horizontal 定义水平间距 vspace vertical 定义垂直间距 单位都是象素数 例 25 htm HTML对图片的控制 表格 TABLE 标记 标记 定义一个表格 每一个表格只有一对和 一张页面中可以有多个表格 标记 定义表格的行 一个表格可以有多行 所以对于一个表格来说不是唯一的 标记 定义表格的一个单元格 每行可以有不同数量的单元格 在和之间是单元格的具体内容 需要注意的是 上述的三个元素必须 而且只能够配对使用 缺少任何一个元素 都无法定义出一个表格 表格的基本结构 定义表格 定义表头 定义表行 定义单元格例 26 htm 表格的属性width属性 指定表格或某一个表格单元格的宽度 单位可以是 或者象素 height属性 指定表格或某一个表格单元格的高度 单位可以是 或者象素 border属性 表格边线粗细例27 htm 表格的属性bgcolor属性 指定表格或某一个单元格的背景颜色 background属性 指定表格或某一个单元格的背景图片 其属性值为一个URL地址 例 28 htm 表格的属性bordercolor属性 指定表格或某一个单元格的边框颜色 例 29 htmalign属性 指定表格或某一个单元格里的内容 文本 图片等 的对齐方式 例 30 htmcellspacing属性 单元格间距 例 31 htm 表格的属性cellpadding属性 单元格边距 例 32 htm 1 2 1网页设计的任务 1 2如何设计网页 站点的性质不同 设计的任务也不同 1 资讯类网站如新浪 网易 搜狐等门户网站 这类站点一般会为访问者提供大量的信息 而且访问量较大 因此 应对这些信息进行合理的分类 将页面划分为多个栏目 页面结构要合理 美观 便于浏览者浏览 新浪首页 网易首页 1 2 1网页设计的任务 1 2如何设计网页 2 资讯与形象相结合的网站如大型公司或高校的网站 这类网站在设计上要求较高 既要考虑到资讯类网站的各项指标 信息量大 同时又要突出企业 单位的形象 国家电网首页 腾讯首页 1 2 1网页设计的任务 1 2如何设计网页 3 形象类网站如一些中小型公司或单位的网站 这类网站一般较小 有的只有几页 需要实现的功能也比较简单 网页设计的主要任务是宣传企业形象 对于这类网站来说 版式 色彩 动画设计等是项目重点 一般对美工的要求较高 长安汽车首页 软件配合及制作流程 使用Dreamweaver编辑输出的静态网页 2 发布为Flash动画文件 3 4 5 使用Flash制作Flash动画源文件 将Photoshop中制作好的页面效果图切片输出 使用Photoshop完成静态页面效果图的制作 1 网页流程制作 1 2如何设计网页 1 2 3网页设计的的基本原则 1 2如何设计网页 1 明确内容 明确网站功能和用户需求2 色彩和谐统一 遵循 总体协调 局部对比 3 打开速度要快 网页的大小应控制在50KB以内为宜 因此 需要在网页的设计过程中对图片进行优化 在图像质量与显示速度两方面取得一个平衡 4 导航明朗 导航项目5 9个为宜 若确实需要建立很多导航链接时 尽量采用分级目录的方式列出 5 定期更新 除了及时更新内容之外 还需要每隔一定时间对版面 色彩进行改进 让浏览者对网站保持一种新鲜感 否则就会失去大量的浏览者 6 平台的兼容性 最好在不同的浏览器和分辨率下进行测试 基本原则是确保在IE5以上的版本中都有较好效果 在1024 768和800 600的分辨率下都能正常显示 1网页编辑排版软件Dreamweaver 1 3网页制作的常用软件 Dreamweaver是一款极为优秀的可视化网页设计制作工具和网站管理工具 支持当前最新的web技术 在编辑模式上允许用户选择可视化方式或源码编辑方式 借助DreamweaverCS3软件 用户可以快速 轻松的完成设计 开发 维护网站和web应用程序设计的全过程 DreamweaverCS3新功能中包含了CSS工具 可用于构建动态用户界面的Ajax组件 以及与其他Adobe软件的智能集成 2 网页动画制作软件Flash 1 3网页制作的常用软件 Flash软件是一款多媒体动画制作软件 作为一种交互式动画设计工具 使用它可以将音乐 声效和动画融合在一起 制作出高品质的动画 Flash采用的是矢量绘图技术 能将绘制的图像在质量无损的情况下放大 由于Flash动画是矢量图构成 大