网页设计课程标准

云南城市建设职业学院云南城市建设职业学院 网页设计网页设计 课课 程程 标标 准准 系 部 机电与信息工程系 课程名称 网 页 设 计 编制教师 张捷编制教师 张捷 编制时间 编制时间 20152015 年年 5 5 月月 2 前言前言 网页设计 是职业院校计算机领域的一门主干专业课程 也是计算机及相关专业人 才培养计划中的一门专业课程 在大二第二学期开设 课程总学时为 108 学时 主要是为 了让学生掌握网站建设必备的基础知识 基本技能和基本素养 其主要任务是通过网页设 计基础学习和实训两方面内容培养学生制作网页 建立维护网站的能力 使学生了解网页 制作的方法 掌握网页三剑客与其它多媒体软件相结合开发网站的技能 同时达到培养高 素质劳动者和网站建设专门人才的目的 为今后学生就业和继续学习打下良好的基础 当 今正处于网络化和信息化时代 很多工作都离不开互联网 网站是政府 企事业单位 企 业公司信息化的核心 更是其应用宣传信息的关键媒体 所以特依据人才培养方案要求制 订以下网页设计课程标准 一 课程基本信息一 课程基本信息 1 课程名称 网页设计 2 课程类别 专业课基础课 3 课程编码 4 学 时 108 5 适用专业 计算机 网络 移动通信等相关专业 1 11 1 课程的性质与作用课程的性质与作用 1 1 课程的性质课程的性质 网页设计课程是高职计算机 网络 移动通信等相关专业重点建设的核心课程之一 是学生职业教育的核心课程 通过本课程的学习 使学生了解网页设计 网站项目创建实 施的流程及方法 具备网页设计 网站建设与维护的基本能力 为今后学生到相应的职业 岗位工作打下基础 计算机 网络 电子商务等相关专业是为适应市场经济发展需要 培养能在政府 企业 企事业单位从事算机系统维护 网络维护 网页设计 网站建设管理维护 中小型信息系 统开发等工作的高技能人才 让学生具有良好的职业道德 熟练的专业技能和可持续发展 的计算机应用技术领域的高级应用型人才 本课程是一门既包含理论知识又包含实践性 技能都相对较强的课程 2 2 课程作用 课程作用 本课程相关的典型工作岗位是 前端 网站策划师 网页美工 后台 网站开发工 程师 对其进行典型工作任务与职业能力分析后 归纳提炼出岗位核心能力为 网站建 设 再按照各个典型工作任务的先后顺序设置支撑的项目课程群 网站建设 的先行课程为 图像处理 photoshop HTML CSS DIV 和 Dreamweaver 网页设计 flash T1 基础能力美术 图案 色彩基础 网站建设实 训 等 详细的可见下表 它们是支撑 网站建设 核心能力的基础课程 基础能力基础能力扩展能力扩展能力高级能力高级能力 HTMLHTML CSSCSS DIVDIV PHPPHP 或 或 ASPASP JSPJSP 等动态 等动态 网站开发工具基础能力网站开发工具基础能力 HTML div cssHTML div css DreamweaverDreamweaver 快速建站模板工具快速建站模板工具AjaxAjax 等最新技术等最新技术 T1 T1 网页设网页设 计师计师 FireWorkFireWorkFireWorkFireWork 网页效果图制作网页效果图制作 3 PhotoShopPhotoShop 基础基础 一定的语言表达 沟通能一定的语言表达 沟通能 力力 图形图像处理图形图像处理 FlashFlash 网站商业广告宣传动画制网站商业广告宣传动画制 作能力作能力 广告宣传动画广告宣传动画 flashflash 图片制作图片制作 T1T1 基础能力基础能力 美术 图案美术 图案 色彩基础色彩基础熟练掌握熟练掌握 PhotoShopPhotoShop T2 T2 网页美工网页美工 LogomakerLogomaker 软件应用软件应用 标志设计标志设计 网站标志设计制作网站标志设计制作 T1T1 基础能力基础能力IISIIS 服务器配置服务器配置 数据库设计能力数据库设计能力 T3 T3 网站建设网站建设 项目网站建设 美化项目网站建设 美化 数据库 数据库 SQLSQL 或或 ACCESSACCESS 使用能力使用能力 动态网站开发工具高动态网站开发工具高 级能力级能力 T3T3 全部能力全部能力数据库设计能力数据库设计能力软件工程分析能力软件工程分析能力 策划 分析能力策划 分析能力网站需求分析能力网站需求分析能力理解领域业务的能力理解领域业务的能力 T5T5 网站分析 网站分析 和设计和设计 语言表达 沟通能力语言表达 沟通能力 通过网站项目开发的教学 使学生掌握网站开发的过程及网页的设计制作方法和步骤 该课程主要内容有网站规划与网页设计 静态网页制作 CSS 规则的应用 网站测试发布与 维护的知识和技能 为后续课程的学习提供网页设计与制作的理论基础和技能支持 本课程无论对培养学生的创新思维 协作精神 正确的设计理念和方法 信息处理能 力 解决问题能力 自我学习能力 高级能力 还是对培养网页 网站制作的实践操作技 能 满足职业岗位需求以及对后继课程的学习 都具有十分重要的作用 1 21 2 课程的基本理念课程的基本理念 1 突出学生职业能力的培养 本课程以建设企业网站项目为载体 以网站项目的建设与维护工程流程为主线 通过 项目全面学习网站建设与维护的相关知识和技能 及步骤方法 使学生对真实的建设网站 项目的流程有一个较全面的认识 形成职业岗位所需的基本能力 为今后从事相关职业岗 位作前期准备 2 以学生主体 从实践中锻炼学生能力 本课程在实施过程中 按工作流程将项目分解为具体的工作任务 教学中实施任务驱 动 同时 引导学生组建项目团队 以学生为主体 团队在教师的启发 提示下自主地开 展学习 学生根据任务 通过团队讨论 主动查阅资料 养成独立策划 分析问题和解决 问题的能力 3 尊重个体差异 注重过程评价 本课程在教学实施过程中 倡导学生自主学习 鼓励多元思维方式 并将其表达出来 尊重个体差异 发挥不同类型学生的长处 建立由形成性评价和总结性评价相结合的评价 体系 教学过程中以形成性评价为主 注重学生学习的积极和自信心 总结性评价注重评 价学生做成事的能力 1 31 3 课程标准的设计思路课程标准的设计思路 在课程标准的设计过程中以网页设计基础为必须掌握知识 以实训企业网页设计项目 的完整创建过程对各环节知识 技能进行知识巩固和运用 围绕预设能力目标 对学习目 标 学习任务 能力要求 教学内容 活动设计和教学建议等都均参照人才培养方案 4 1 41 4 教学方法教学方法 在教学网页设计基础中主要采用案例 讲解 实做的方式来进行 通过理论 案例的 讲解和演示 让学生能够清楚到实践的操作 掌握本课程的相关知识 图表表示如下 教教学学方方法法 对比法 任务驱动法 讨论教学法 案例教学法 教学 方法 讲授法 理实结合法 案例教学法 教学过程中 老师举例子讲解一个网站创建的过程和方法 其它相关类 网站的创建就可以用第一个网站建设中的一些方法去完成 讨论式教学 注重课堂教学整体设计 通过引入问题 如建设网站的市场分析 可以 组织学生通过讨论寻找答案 让学生参与交流 分享自己的看法 并进行总结和归纳 通 过讨论 学生真正做到了积极参与课堂学习 分析问题 解决问题的能力 又加强了理论 知识在实际的应用 还有其它的一些方法如讲授法 任务驱动法等 再此就不多说 二 课程目标二 课程目标 2 12 1 课程的总体目标课程的总体目标 通过本课程的学习 使学生掌握网页设计的整个工作流程和方法 能够使用网页三剑 客及其它相关软件完成网站前端相关工作 如网页效果图制作 网页布局 用代码生成网 页等 在教学过程中 通过团队开发 形成基本的职业道德规范和职业素养 及团队合作 精神 三 内容标准三 内容标准 第一章第一章 HTMLHTML网页基础网页基础 教学内容教学内容 5 一 教学目的和要求 一 教学目的和要求 1 1 目的 目的 1 掌握HTML文件编写方法 2 使用浏览器浏览HTML源文件 3 了解html基本概念 2 2 要求 要求 掌握常用的浏览器打开网页方法 IE 火狐 360浏览器 谷歌浏览器等 掌 握网页设计的一些基本概念 二 教学重点与难点 二 教学重点与难点 重点 重点 网页设计相关概念 难点 难点 网页设计相关属性 三 三 教学方法与手段教学方法与手段 讲授 案例演示 实际操作 作业 通过理论讲授的方式让学生了解本章的理论的内容 四 四 内容部分内容部分 1 1 经典网页欣赏经典网页欣赏 1 蓝色代表海洋 宇宙 大海 是一种博大的颜色 此网页采用主色为蓝色 代表了一 种博大的精神 也代表了本公司的科技领域强项 不同的蓝色的转换给人一种轻松的感觉 网页右边加以黄色区域来烘托出产品的外形 以及独特 网页整体简单明了 正是这种公 司所需要的 2 网页是一则汽车的网页 和传统汽车网页一样采用黑色的背景 凸显出一种高贵 科技的 感觉 文章的文字部分采用高明度灰色 体现了主题 汽车轮子处的火 表现了激情 兴 奋 使主题更加生化一步 给人庄重稳重的同时 不失激情活跃的一面 2 2 网页设计相关概念网页设计相关概念 1 统一资源定位器 绝对路径 相对路径 2 超链接 3 网站 静态网页 动态网页 主页 网页三剑客 4 Html语言概念 5 常见的浏览器 6 Html语言的基本结构及语法 五 五 作业作业 1 使用浏览器打开网页源代码 2 写出 html 超文本标记语言的主体结构 第二章第二章 文字与段落标记文字与段落标记 教学内容教学内容 一 教学目的和要求 一 教学目的和要求 1 1 目的 目的 6 1 掌握网页中文字编排 美化方法 2 掌握网页中图像插入的方法 2 2 要求 要求 1 掌握标题标记 2 掌握文本基本标记 文本格式化标记 3 掌握段落标记 水平线标记 二 教学重点与难点 二 教学重点与难点 重点 重点 掌握文本基本标记 文本格式化标记 难点 难点 单 双标记的区分 三 三 教学方法与手段教学方法与手段 讲授法 案例演示 讨论法 四 四 内容部分内容部分 1 1 设置段落的标记 设置段落的标记 段落标记是一个双标记 每个标记对表示一个段落 语法格式 这里表示段落 2 2 换行标记 换行标记 换行标记是单标记 即不会成对出现 是在尖括号中加一个的单标记 语法格式 3 3 给代码添加注释 给代码添加注释 添加注释是不会再网页中显示的 语法格式 4 粗体和斜体粗体和斜体 1 粗体标记 是一对双标记 起到强调的作用 语法格式 标题文字 2 斜体标记语气较弱 语法格式 表示斜体标记 5 5 下划线与删除线标记 下划线与删除线标记 为了使部分文字特别显示 可以使用下划线或者删除线标记 也是一对双标记 语法格式 下划线的 删除线的 6 6 上标和下标 上标和下标 双标记 语法格式 上标 下标 H2o H 2so4 a2 b2 c2 7 7 文字标记 文字标记 是一个双标记 语法格式 文字 8 8 标题标记对齐属性 标题标记对齐属性 h1 h6 h1 表示文字标题最大 h6 表示文字标题最小 对齐属性 align left center right 7 如 标题居中 9 9 文本标记的属性 文本标记的属性 1 字体属性 face 如 云南城市建设职业学院 2 设置字体大小属性 size 如 云南城市建设职业学院 绝对值 1 7 相对值 4 4 的整数 字体相对于 3 号放大和缩小字号 注意 属性与属性之间用空格隔开注意 属性与属性之间用空格隔开 3 字体的颜色属性 color 如 云南城市建设职业学院 可以用英文单词或者二进制代码 1010 粗体标记 粗体标记 b b 与与 strongstrong 语法格式 需要加粗的文字 需要加粗的文字 标记是可以嵌套的 1111 斜体的标记 斜体的标记 1 i em cite 语法格式 需要变为斜体的文字 需要变为斜体的文字 需要变为斜体的文字 1212 大字号和小字号标记 大字号和小字号标记 big 和 small 语法格式 需要加大的文字 big 需要加大的文字 加大 在原来定义的字体大小基础上加大一个级别 变小 在原来定义的字体大小基础上变小一个级别 不自动换行的标记 不自动换行的标记 1 nobr 语法格式 不换行的文字 1414 水平线标记 水平线标记 1 水平线标记的属性 width 宽度 color 颜色 size 高度 noshade 无 阴影 align 对齐 1515 其他特殊标记其他特殊标记 1 空格 五 五 作业作业 制作一个公司简介页面 包含标题 文字 下划线 图片 橫线 8 第三章第三章 使用图像使用图像 教学内容教学内容 一 教学目的和要求 一 教学目的和要求 1 1 目的 目的 1 掌握网页中图形图像的格式 2 掌握网页中图像插入的方法及图像的超链接 2 2 要求 要求 1 掌握常用图像的格式 2 掌握网页中插入图像的方法 及插入图像的标记 二 教学重点与难点 二 教学重点与难点 重点 重点 网页中图像插入的方法及图像的超链接 难点 难点 超链接中图像的地址 三 三 教学方法与手段教学方法与手段 讲授法 案例演示 讨论法 习题法 四 四 内容部分内容部分 1 1 常见的一些图像格式 常见的一些图像格式 1 jpeg 压缩图像格式 不支持透明 1670 万像素 图像要求比较绚丽的时 候使用 2 Gif 图形交换格式 支持透明 256 色 支持动画 由多张位图连续播放形成 3 Png firework 支持透明 1670 万像素 是网络可移植格式 2 2 如何在网页中插入图像如何在网页中插入图像 单标记单标记 语法格式 Src 表示指定图像的位置 路径 绝对地址 具有详细的位置 即提供目标文档的完整主机名称 路径信息 整主机名称 路径信息 及文档的全称及文档的全称 相对地址 从当前文档开始的地址 1 如果当前文档和目标文档位置平行 则直接书写目标文档的全称 2 如果当前文档和目标文档文件夹位置平行 则输入路径为 文件夹名 称 目标文档名称 3 如果当前文档所在文件夹和目标文档位置平行 则书写 目标文 档全称 3 3 属性 属性 1 alt 属性 语法格式 2 图像宽度高度属性 width height 3 vspace 垂直间距 hspace 水平间距 五 五 作业作业 9 制作一个图文并茂的婚纱网页 素材图片自己到互联网上找 第四章第四章 使用列表使用列表 教学内容教学内容 一 教学目的和要求 一 教学目的和要求 1 1 目的 目的 1 掌握有序列表 2 掌握无序列表 2 2 要求 要求 1 了解列表标记 2 掌握有序 无序 定义 菜单列表的使用方法 二 教学重点与难点 二 教学重点与难点 重点 重点 列表标记 难点 难点 有序 无序列表浮动的使用 三 三 教学方法与手段教学方法与手段 讲授法 案例演示 习题法 四 四 内容部分内容部分 1 1 列表的使用 列表的使用 定义说明 列表是一种数据的排列方式 对页面的布局非常重要 分为三类 有序列表 无序列表 自定义列表 无序列表 项目符号由几个符号构成 有序列表 项目符号由字母 数字排列构成 自定义列表 通过自己灵活定义 1 1 有序列表有序列表 语法格式 表示列表项 1 表示列表项 2 表示列表项 3 难点说明 本列表会自动换行 不用加换行符号 如果非要成一行 那么就给他加上 css 定义浮动 有序列表的序号类型 1 a A i I 默认情况下是数字 语法格式 表示列表项 1 表示列表项 2 表示列表项 3 设置列表的起始数值 表示列表项 1 表示列表项 2 10 表示列表项 3 注意 start 起始数值 中起始数值必须为数字 否则不起作用 2 2 无序列表无序列表 无序列表的项目排列没有顺序 以符号作为分项标识 a 语法格式 列表项 1 列表项 2 列表项 3 和分别表示无序列表的开始和结束 表示列表项 b 无序列表的列表类型 实心圆 空心圆 方框 disc circle square c 无起始数值属性 3 3 目录列表目录列表 显示效果与无序列表相同 一般用来创建多列目录 a 语法格式 列表项 1 列表项 2 列表项 3 b 类型 列表项 1 列表项 2 列表项 3 列表类型 实心圆 空心圆 方框 disc circle square c 无起始数值属性 4 4 定义列表定义列表 a 语法格式 1321 定义条件 1 定义描述 1 定义条件 2 定义描述 2 定义条件 3 定义描述 3 5 5 菜单列表菜单列表 用于设计单列菜单列表 显示效果与无序列表相同 语法格式 11 列表项 1 列表项 2 列表项 3 五 五 作业作业 1 输入五组列表 无序 有序 自定义 菜单 目录列表 代码 并给每组第一个列 表项加上超链接 链接目标自定 第五章第五章 使用表格使用表格 教学内容教学内容 一 教学目的和要求 一 教学目的和要求 1 1 目的 目的 1 掌握创建表格的方法 2 掌握表格属性 2 2 要求 要求 1 掌握创建表格方法 2 掌握表格边框 背景 行 列属性 二 教学重点与难点 二 教学重点与难点 重点 重点 创建表格 难点 难点 合并单元格 三 三 教学方法与手段教学方法与手段 讲授法 案例演示 习题法 问题法 四 四 内容部分内容部分 1 1 建立表格用到的四个标记 建立表格用到的四个标记 1 table 是双标记 用于定义表格元素 和 2 tr 是双标记 用于定义表格的行 和 tr 3 td 是双标记 用于定义表格的单元格 和 4 th 是双标记 用于定义表头 和 2 语法格式语法格式 第一行第一列单元格 第一行第一列单元格 第一行第一列单元格 第一行第一列单元格 第一行第一列单元格 第一行第一列单元格 姓名性别年龄 张三丰男 25 12 总结总结 与表示表头 里面的内容 自动加粗 自动居中 和表示单元格 里面的内容不加粗 不居中 3 标记属性标记属性 1 border 表示表格的边框属性 属性值为数值 border 数值 2 width 表示表格宽度属性 属性值示数值或者百分比 3 height 表格高度属性 属性值示数值或者百分比 4 bgcolor 设置表格背景颜色的属性属性值可以是英文单词 也可以是 rgb 或者 cmyk 颜色值 5 background 用于设置表格背景图像属性 属性值 就是设置背景路径值 建议使用相对路径 6 cellspacing 用来设置表格间距 属性值是数值 7 cellpadding 用来设置表格边距 属性值是数值 8 align 用于设置表格对齐的属性 属性值 left right center 左对齐 右对齐 居中对齐 4 表格行的控制表格行的控制 1 width 表示行的宽度 属性值示数值或者百分比 2 height 行高度属性 属性值示数值或者百分比 3 align 设置行中文字对齐方式 4 vlign 文字垂直方向对齐 5 bgcolor 设置表格行背景颜色的属性 属性值可以是英文单词 也可以是 rgb 或者 cmyk 颜色值 6 bordercolor 设置表格行边框颜色 5 tdtd 单元格的属性控制单元格的属性控制 1 align vlign 单元格中水平 垂直方向文字对齐方式 2 bordercolor 单元格边框属性 3 bgcolor 单元格背景颜色 4 rowspan 表示单元格跨行的行数 5 colspan 表示单元格跨列的列数 五 五 作业作业 13 作业 1 用 html 标记语言中表格标记和属性等完成上图所示表格 2 用 html 标记语言中表格标记和属性等完成本班级课程表 第六章第六章 使用建立超链接使用建立超链接 教学内容教学内容 一 教学目的和要求 一 教学目的和要求 1 1 目的 目的 1 掌握超链接的基本知识 2 掌握超链接建立方法 2 2 要求 要求 1 掌握网页内部链接方法 2 掌握网页外部链接方法 3 掌握锚点链接方法 二 教学重点与难点 二 教学重点与难点 重点 重点 外部链接 内部链接方法 难点 难点 链接时路径的正确书写 三 三 教学方法与手段教学方法与手段 讲授法 案例演示 习题法 四 四 内容部分内容部分 1 1 路径的概念 路径的概念 路径分为相对路径和绝对路径 相对路径相对路径 以引用文件的网页所在的位置为参考基础而建立的路径如 1 如果链接到同一目录下 则直接输入要链接的文档的名称 2 如果链接到下一级目录中的文件 则先输入目录名 然后再加 在输入 文件名 3 如果链接到上一级目录中的文件 先输入 再输入目录名 文件名 绝对路径 绝对路径 14 绝对路径是以站点的根目录为参考基础的目录路径在 www 中以 http 开头的链 接都是绝对路径 说明 当链接到本机器上的文件时 建议使用相对路径 如果使用绝对路径 当把文件移 动到其它盘符后 那么链接就会失效 这样就要对文件链接重新编辑才能使用 3 3 建立超级链接建立超级链接 文字文字 1 格式 要链接的文字 要链接的文字 表示链接的开始 链接的结束 href 定义文件链接的地址 路径 位置 2 Target 用于指定打开链接的目标窗口 默认方式是在原来的窗口中打开 blank 在浏览器新的窗口中打开 parent 将链接的文件载入含有该链接框架的副窗口中打开 self 在同一框架中打开 top 在当前整个浏览器窗口中打开 格式 要链接的文字 图像的链接图像的链接 要将图片做成超链接 只需将标记放在和之间即可 格式 邮箱的链接邮箱的链接 格式 描述文字 如 写信 站内链接站内链接 如果一个页面很长 寻找相应内容比较困难 就可以使用站内链接 格式 目录文字 在链接的目标处使用超链接目标 五 五 作业作业 1 做一个脑筋急转弯页面的站内链接 至少 10 个 2 做一个图片链接页面 3 做一个文字链接页面 标题的 第七章第七章 添加多媒体添加多媒体 教学内容教学内容 一 教学目的和要求 一 教学目的和要求 1 1 目的 目的 15 1 掌握常见的媒体文件格式 2 掌握插入多媒体方法 2 2 要求 要求 1 设置滚动文字方法 2 掌握插入音频 视频文件方法 3 掌握设置网页背景音乐方法 二 教学重点与难点 二 教学重点与难点 重点 重点 音频 视频文件方法 难点 难点 滚动文字设置 鼠标控制 停止 运动 三 三 教学方法与手段教学方法与手段 讲授法 案例演示 习题法 提问法 四 四 内容部分内容部分 1 1 滚动字幕 滚动字幕 使用滚动字幕可以增加网页的动感 让网页显得更有生气 达到动感十足的效果 是一个双标记 语法格式语法格式 文字 属性 direction beavior loop scroollamount scrolldelay align bgcolor height 和 width hspace 和 vspace 1 1 directiondirection 用于设置滚动文字移动方向 用于设置滚动文字移动方向 属性值 left 右向左移动 默认值 right 左向右移动 up 下往上移动 down 上往下移动 2 2 behaviorbehavior 用于滚动文字的移动效果 用于滚动文字的移动效果 属性值 Scroll 循环往复滚动 Slide 表示滚动到一方后停止 只滚动一次 alternate 表示滚动一方后向相反方向滚动 交替进行 3 looploop 用于设置滚动文字的循环次数用于设置滚动文字的循环次数 如果未指定 则循环不止 4 scrolldelayscrolldelay 用于设置每次滚动的间隔的延迟时间 用于设置每次滚动的间隔的延迟时间 一般以毫秒作为单位 5 5 alignalign 用于设置滚动文字的对齐方式 用于设置滚动文字的对齐方式 top 顶对齐 middle 中间对齐 bottom 底部对齐 6 bgcolor bgcolor 用于设置滚动的背景颜色用于设置滚动的背景颜色 7 7 heightheight 和和 widthwidth 用于设置滚动文字的高度和宽度 8 8 hspacehspace 和和 vspacevspace 用于设置滚动文字四周的水平空间和垂直空间 如何实现鼠标光标移动到滚文字上停止滚动 移开鼠标继续滚动效果 Onmouseover javascript this stop 表示鼠标经过停止 16 Onmouseout javascript this start 表示鼠标移开继续运动 2 2 如何嵌入多媒体文件 如何嵌入多媒体文件 网页中嵌入的多媒体不但有文字 图像还有音频 视频 flash 动画等文件 1 使用标记嵌入多媒体文件 是一个单标记 属性说明 src 用于指定媒体文件的地址 Height 和 width 用于设置媒体文件的高度和宽度 Loop 用于设置媒体文件的播放次数 Hidden 用于隐藏播放器 五 五 作业作业 1 1 制作一网页 在网页中插入滚动文字 视频 音频文件 素材自备 制作一网页 在网页中插入滚动文字 视频 音频文件 素材自备 第八章第八章 使用表单使用表单 教学内容教学内容 一 教学目的和要求 一 教学目的和要求 1 1 目的 目的 1 掌握表单标记 2 掌握菜单和列表使用方法 3 掌握文本框 文本域使用方法 2 2 要求 要求 1 熟悉表单对象 2 熟悉表单标记及其属性 二 教学重点与难点 二 教学重点与难点 重点 重点 表单概念 表单对象建立方法 难点 难点 密码框建立 菜单 复选框建立方法 三 三 教学方法与手段教学方法与手段 讲授法 案例演示 习题法 提问法 四 四 内容部分内容部分 1 1 建立表单建立表单 1 1 表单是实现交互式动态网页的一种主要的外在形式 是网站管理者与浏 览者之间沟通的桥梁 其主要功能是收集信息 由标记来定义 2 2 格式格式 属性共有三个 name 属性 form name method 属性 get 和 post action 属性 表单处理程序的位置 3 3 输入标记输入标记 标记是表单中输入标记 是一个单标记 语法格式如下 4 4 文本框文本框 单行文本框 当 type 的属性值为 text 时表示输入项输入的字符串是以 17 单行显示 value 定义文本框初始值 size 定义文本框长度 maxlength 定义输入最大字符串数 如 联系方式 电子邮件 联系地址 手机号码 电话号码 QQ 5 5 密码框密码框 如 用户登录 用户名 输入密码 当 type 属性的值 为 password 时表示的是密码框 其他属性与 text 相似 不同之处 输入的 内容均以 表示 保证密码的安全性 语法格式 2 2 按钮按钮 表单中的按钮起着至关重要的作用 主要有三种类型 普通按钮 提交按钮 重置按钮 1 1 普通按钮 普通按钮 当 type 的属性值为 button 时表示该输入项输入的 是普通按钮 语法格 式如下 注意 value 表示显示在按钮上面的文字 2 2 提交按钮 提交按钮 当 type 的属性值为 submit 时表示该输入项输入的 是提交按钮 语法 格式如下 3 3 重置按钮 重置按钮 当 type 的属性值为 reset 时表示该输入项输入的 是重置按钮 语法格式 如下 3 3 单选框与复选框单选框与复选框 1 1 单选框单选框 当 type 的属性值为 radio 时表示该输入项输入的 是单选项 语法格式如下 2 2 复选框复选框 当 type 的属性值为 checkbox 时表示该输入项输入的 是复选项 语法格式 如下 4 4 文件输入框文件输入框 18 当 type 的类型为 file 表示输入项是一个文件输入框 用户可以在文件输入 框内部填写自己硬盘中文件的路径 然后通过表单上传 格式 五 五 作业作业 1 使用表单标记创建如下密码框 用户登录 用户名 输入密码 第九章第九章 使用框架结构使用框架结构 教学内容教学内容 一 教学目的和要求 一 教学目的和要求 1 1 目的 目的 1 掌握框架的使用方法 2 框架的 属性 2 2 要求 要求 1 掌握框架的使用方法 2 掌握框架的链接 二 教学重点与难点 二 教学重点与难点 重点 重点 框架的属性 难点 难点 框架的链接 三 三 教学方法与手段教学方法与手段 讲授法 案例演示 习题法 四 四 内容部分内容部分 框架的作用框架的作用 通常用于页面导航 框架框架 1 框架集框架集 2 框架框架 框架集框架集 用 标记来定义 用于定义网页显示的框架 数量 大小 等其他属性 框架框架 用 标记定义 定义的是网页上一个显示的区域 3 语法格式语法格式 说明 框架文档的书写格式与和 html 文档的书写格式基本相同 唯一不同的 是使用 frameset 标记替换了 body 标记 4 4 框架结构框架结构 19 1 左右结构 2 上下结构 3 嵌套结构 左右结构 左右结构 采用 cols 属性 即在垂直方向将浏览器分割成多个窗口 语法格式 Value 值可以是数值也可以是百分比 还可以混合 数值之间用逗号 进行分割 有几个值则说明窗口就被分割成几个部分 上下结构 上下结构 采用 rows 属性 即在水平方向将浏览器分割成多个窗口 语法格式 语法格式 例如 将网页页面水平分割成三个部分 例如 将网页页面水平分割成三个部分 10 10 20 20 60 60 嵌套结构 既有左右分割 有上下分割嵌套结构 既有左右分割 有上下分割 语法格式 语法格式 例 例 将网页分割成田字形将网页分割成田字形 2 2 框架集的属性框架集的属性 a a 设置窗口框架宽度设置窗口框架宽度 borderborder 语法格式 语法格式 b b 设置边框颜色设置边框颜色 bordercolorbordercolor 语法格式 语法格式 20 c c 设置框架隐藏设置框架隐藏 frameborderframeborder 语法格式 语法格式 值为 值为 0 或者 1 0 表示不显示边框 1 表示显示边框 默认情况下值为 1 3 3 框架属性框架属性 a a scrscr 用于设置框架显示的文件路径 语法格式 语法格式 如果没有 src 属性则表示该窗口显示为空白 b b namename 用于定义框架的名称用于定义框架的名称 语法格式 语法格式 c frameborder 属性用于显示框架 值与框架集一样 d d scrollingscrolling 属性用于设定是否有滚动条 value 值有两个 yes 和 no auto 语法格式 语法格式 e noresize 属性用于用户能否自己调整框架窗口大小 语法格式 注意 此属性无属性值注意 此属性无属性值 f marginwidthmarginwidth 属性 属性 用于设定内容与框架的距离 语法格式 g g marginheightmarginheight 属性 属性 用于设定框架边缘高度 语法格式 五 五 作业作业 1 1 用框架将页面分割成左右两个部分 用框架将页面分割成左右两个部分 20 20 80 80 然后再把右部上下分割成 然后再把右部上下分割成 相等两个部分 并设置左边框架名称为相等两个部分 并设置左边框架名称为 leftleft 而且左边框架窗口显示滚动条 右 而且左边框架窗口显示滚动条 右 边窗口不显示滚动条 左边框架上部分连接到边窗口不显示滚动条 左边框架上部分连接到 右框架上右框架上 部分接到部分接到 第十章第十章 使用使用 csscss 样式表样式表 教学内容教学内容 一 教学目的和要求 一 教学目的和要求 1 1 目的 目的 1 掌握css样式表使用方法 2 掌握css分类 21 3 属性的使用 2 2 要求 要求 1 css样式表使用 2 掌握css分类及其属性 二 教学重点与难点 二 教学重点与难点 重点 重点 样式表的使用 难点 难点 样式表的名称定义 三 三 教学方法与手段教学方法与手段 讲授法 案例演示 习题法 四 四 内容部分内容部分 1 1 认识 认识 csscss Css 又称层叠样式表 是一种现在大家都使用的网页技术 为大多浏览器支持 成为 网页设计必不可少的工具 2 2 样式表组成 样式表组成 1 1 选择符 选择符 此组样式编码所要针对的对象 可以是一个标记如 body h1 等 也可以是定 义了的 id 或 class 标记 2 2 样式属性 样式属性 颜色 大小 定位 浮动等 3 3 值 值 指定值 数字 百分比 3 3 样式表类型 样式表类型 外联样式表 内联样式表 内嵌样式表 4 4 语法格式 语法格式 如 1 样式表格式 h 样式表格式 h 五 五 作业作业 1 应用外联样式表对页面进行简单布局 四 四 网页设计网页设计 实训部分实训部分 1 1 实训目的与要求实训目的与要求 网页设计 dreamwvaverdreamwvaver 综合实训 主要目的是让学生通过这门实践课程的学习了 解和掌握网页设计的基本方法和技巧 通过不断上机实践训练达到能够熟练顺利完成网 站的制作 掌握网站设计流程 技巧 集中实践使学生综合运用所学习的网页设计知识 及以前所学习的计算机方面的知识 按照网站制作的流程 完成一个具体 综合性的网 站 巩固学生系统性的知识 培养学生解决实际问题的能力 锻炼相互合作的工作能力 提高学生综合素质 2 2 实训内容实训内容 1 1 实例实训 实例实训 绿色食品 手机 餐饮 美容 22 以绿色食品网站设计的实例指导学生如何独立完成食品网站站点的设计和制 作 让学生在机房实际操作 按照给定的实例完成实例中整个站点页面的创建和 设计 2 2 自建站点实训 绿色食品 手机 餐饮 美容 自建站点实训 绿色食品 手机 餐饮 美容 让学生自行选择站点的主题 从规划站点到一步一步完成整个站点的规划 设 计 创建 调试等工作 3 总结 对学生的全部作品进行批改 并选择案例对实训的结果进行考核 3 3 参考步骤参考步骤 实训内容实训内容实训课时实训课时 实训说明 知识回顾 基本知识回顾 实训作品策划 规划书 整体布局设计 搜集和创建资源 效果图制作 程序设计 首页模板设计 二级页面模板设计 各页面的细化 测试修改 文档总结 4 4 实训准备 实训准备 1 1 软件准备 软件准备 Dreamweaver firework PhotoShop logomaker Flash 中文版 本实训对 FLASH 技术不做要求 2 2 硬件准备 硬件准备 网络条件 与因特网连接的局域网 最好不带还原的计算机 教师用机 Windows xp 或 win7 及以上版本 学 生用机 Windows xp 或 win7 及以上版本 5 5 考核办法 考核办法 1 网站规划书 10 分 2 效果图设计 20 分 3 编写代码 30 分 4 实训出勤 20 分 5 技术含量 10 分 6 整体美观统一搭配 10 分 23 6 6 实训内容说明 实训内容说明 由实训指导教师自行选择网站作为实例 实例要求如下 1 选择企业绿色食品网站或者其它企业网站 2 站点模块功能清晰 能反映各模块的基本功能 结构清晰 风格统一 色调 一致 3 为了便于教学 站点应该具有大热 dreamweaver 页面布局 链接 CSS div 样 式等网页设计制作中常用的知识点和操作 7 7 内容 内容 1 讲解和演示整个站点的制作过程和设计方法 2 学生自由组队 三人一组分工合作 也可以一人一组 最多不超过三人 8 8 实训步骤 学生实训周内完成 实训步骤 学生实训周内完成 1 完成整个站点规划 规划书 包括色调 logo 站点风格策划 2 素材 文档材料收集 3 效果图制作 firework 或 ps flash 4 页面设计 页面布局 dreamweaver css div 5 程序设计 调试 6 模板建立 7 应用模板生成相关二级页面 8 测试链接等完成站点建立 9 总结 除内容外还包括对在实训中有什么收获 有什么困难等内容 五 实施建议五 实施建议 5 15 1 教学建议教学建议 本课程学习活动的设计以网站项目为依托 课程内容的教学要求必须以学生主动学习为 主 教师以启发 引导为主 充分体现学生的主体性 为保证学习活动的顺利开展 要求教师事先为学习布置学习任务 提供必要的学习资料 教师在课堂上的讲授务必精炼 条理清晰 学生活动以团队形式开展 教师对团队活动 要及时给予帮助 并实施有效控制 具体教学建议 具体教学建议 1 课程教学采用 工作任务驱动式 教学方