网页设计教案首页_第1页
网页设计教案首页_第2页
网页设计教案首页_第3页
网页设计教案首页_第4页
网页设计教案首页_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、精选优质文档-倾情为你奉上南京信息职业技术学院教 案授课班级授课形式讲授页 码1授课日期 年 月 日 第 周 教学时数2授课章节名称第1章HTML基础知识1.1HTML简介1.2HTML基本术语1.3Dreamweaver介绍教学目标1 对HTML语言有初步的认识2 掌握Dreamweaver工具的使用教学重点HTML基础知识和Dreamweaver工具的使用教学难点Dreamweaver工具的使用 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第1章 HTML基础知识一、新授课1.1 HTML（HyperText Markup Language）简介超文本标记语

2、言用于指定在Web浏览器中显示的文本的格式，指定文档内容，结构和格式编辑器 (记事本、写字板、Dreamweaver等)文件扩展名：.html 或 .htmWeb 浏览器（IE、Netscape、Firefox等）1.2 HTML基本术语1.HTML标记（Tag）标记都括在一对尖括号“<”和“>”中，标记一般成对出现，中间加入受标记控制的信息内容，例如：<b>和</b>2.HTML元素（Element）用于指示浏览器如何组织和显示文档。元素一般由一个起始标记和其对应的结束标记、标记之间的内容构成。例如：<title>这是一个HTML文件</

3、title>3.HTML属性（Attribute）属性是元素具有的，用来告诉浏览器如何控制或显示元素内容的。例如：<a href="" target="_blank">sohu网站</a>1.3 Dreamweaver介绍- 一款用于设计、开发网站和 Web 应用程序的专业HTML 编辑器 - 用户可以选择使用布局单元格或框架来设计页面的布局- 可用于创建文本、插入动态图像、提供网页超链接、创建 Flash 文本和 Flash 按钮等- 可用于组合由某些软件（如 Photoshop、ImageReady 和 Flash 等）

4、制作的图形、动画和按钮二、总结南京信息职业技术学院教 案授课班级 授课形式讲授页 码2授课日期 年 月 日 第 周 教学时数2授课章节名称第2章 创建HTML文件2.1 创建HTML文件2.2 HTML的组织规范2.3 HTML基本标记第3章 文档格式化3.1 文字格式化3.2 超链接和锚站教学目标1 理解HTML文件的基本结构2 掌握文字格式化和超链接教学重点 1 <html>、<head>、<body>2 <a>教学难点如何控制文字格式和建立超链接 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第2章 创建HTM

5、L文件一、 复习Dreamweaver工具的使用二、新授课2.1 创建HTML文件- 注释以<!-开始，以 ->结束- html 元素head 元素文档标题样式和脚本body 元素浏览器显示的页面内容- 开始标记：<元素名>- 结束标记：</元素名>2.2 HTML的组织规范 所有的HTML文档都遵循由W3C规定的HTML规范。2.3 HTML基本标记- 结构标记<html>- 头标记<head>- 文档标题标记<title>- 内容标记<body>第3章 文档格式化3.1 文字格式化- 字体标记<fon

6、t>- 使用属性检查器中的字体类型、字体大小、字体颜色等设置格式化文本：3.2 超链接和锚站 - 链接到其他资源（如XHTML文档和图像）三、学生随堂练习四、总结专心-专注-专业南京信息职业技术学院教 案授课班级授课形式讲授页 码3授课日期 年 月 日 第 周 教学时数2授课章节名称第3章 文档格式化3.2 超链接和锚站 3.3 段落格式化3.4 使用列表教学目标1 掌握内部链接的使用2 掌握段落格式化和使用列表教学重点内部链接和列表教学难点列表 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第3章 文档格式化一、引入 HTML的基本标记，组织规范。二、新授

7、课3.2 超链接和锚站 - 内部链接 ：在同一个文档的不同位置之间进行跳转- 命名锚站的一般语法格式为：<a name="书签名">锚站A</a>“书签名”用来标示“锚站A”在HTML文档中的位置- 要找到上述锚站，需要编写如下代码：<a href="#书签名">点击此处将使浏览器跳到锚站A处</a>注意：href属性赋的值若是锚站的name属性值，则必须在书签名前边加一个“#”号。- email链接：mail:URL3.3 段落格式化 - <p>标记：最常用段落标记 - 其他段落标记：<

8、div>、<span>、<address>、<blockquote> - 预格式化段落标记: <pre> - 标题：<h1><h6> - 换行与空行：<br>- 水平线：<hr> <hr width =”宽度” align =”对齐方式” size =”粗细” noshade> 3.4 使用列表- 有序列表 - 无序列表 - 定义列表三、学生随堂练习四、总结南京信息职业技术学院教 案授课班级授课形式实验页 码4授课日期 年 月 日 第 周 教学时数2授课章节名称实验一：超链接与列表

9、教学目标1 会使用HTML创建Web页面2 学会标记信息列表和超链接教学重点超链接的建立、列表的使用教学难点嵌套列表 更新、补充、删除内容无教学手段上机实验课外作业实验报告课后体会教 学 过 程 设 计实验一：超链接与列表一、复习理论超链接与列表二、布置实验任务1 实验目的会使用HTML创建Web页面学会标记信息列表和超链接掌握列表在实际问题中的应用 2 实验任务创建有序列表“有序列表.html”创建嵌套列表“嵌套列表.html”创建有序列表和无序列表之间的超链接 三、指导学生上机实验针对学生普遍存在的问题进行集体讲解和指导。四、总结这次实验存在的问题五、布置作业：实验报告南京信息职业技术学院

10、教 案授课班级授课形式讲授页 码5授课日期 年 月 日 第 周 教学时数2授课章节名称第4章 使用图像和背景4.1 常用网络图像格式4.2 使用图像4.3 创建图像地图教学目标1、掌握<img>标签各种属性的使用2、会创建图像地图教学重点<img>标签各种属性的使用教学难点灵活使用<img>标签的各种属性 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第4章 使用图像和背景一、 复习引入图像和背景可以大大增强网页的吸引力和易用性，一个优秀的网页设计者必须善于合理运用图像和背景以突出网页所要表现的内容。二、新授课 4.1 常见网络

11、图像格式- GIF（Graphics Interchange Format）图像- JPEG（Joint Photographic Experts Group）图像- PNG（Portable Network Graphics）图像 4.2 使用图像 img - - src属性设置为要插入图像文件的URI - height和width属性 - align属性 - hspace和vspace属性 - border属性、background属性- 创建图片链接- 使用缩略图 4.3 创建图像地图：一个图像地图中设置多个链接热点：整张图片被分成的多块活动的区域。用户自己定义这些热点，把它们分别链接到

12、各自独立的URI地址。图像地图的基本类型包括两种： 1. 客户端图像地图：该地图直接被浏览器处理2. 服务器端图像地图：该地图将被Web服务器上的一段程序负责解析处理三、学生随堂练习 img标签属性的使用 创建图像地图四、总结 南京信息职业技术学院教 案授课班级授课形式讲授页 码6授课日期 年 月 日 第 周 教学时数2授课章节名称第5章 表格布局5.1 创建表格5.2 设置表格格式5.3 高级表格标记教学目标1 学会创建带有数据行和数据列的表格2 学会控制表格格式教学重点表格的定义；表格行的控制；单元格的控制；表格的分组教学难点控制表格格式 更新、补充、删除内容无教学手段多媒体课外作业无课后

13、体会教 学 过 程 设 计第5章 表格布局一、 复习引入HTML网页可以看做是一个二维空间，可以使用表格对这个二维空间进行划分，然后对要表现的内容进行合理的布局，表格是一种重要的布局方式。二、新授课5.1 创建表格 - 基本表格标记：<table>和</table> - 设置表格行：<tr>和</tr> - 设置表格列：<th>和</th> <td>和</td> <th>是 table head的简称，用来设置表头 <td>是 table data的简称，用来标记表头以外的其

14、他单元格- 添加标题：caption标记 “align”属性：指定表格的标题位置- 调整表格尺寸：width（宽度）和height（高度）属性- 对齐方式align：属性值有left、right、和center三种，默认为left5.2 设置表格格式 - 设置表格背景颜色：bgcolor属性 <table>、 <tr>、 <td>（或<th>）标记中使用 - 在表格中插入图片：可放入某一个单元格内，也可作为表格背景 加背景图片：<table>标记中加入background属性在一个单元格中加入图片：在（<td>或<t

15、h>）之间加入<img>标记 - 调整单元格大小：width属性 - 单元格内容的对齐方式：align和valign属性 - 设置单元格间距和边距：cellspacing属性和cellpadding属性：- 扩展行和列：rowsapn属性和colspan属性5.3 高级表格标记- 行编组：赋予表格行特殊的含义包括<thead>，<tbody>和<tfoot>三种标记<thead>：表示该行定义为当前表格的题注<tfoot>：表示该行定义为当前表格的尾注<tbody>：表示表格的主体部分<tfoot&

16、gt;标记必须出现在<tbody>标记之前和<thead>标记之后举例讲解- 列编组：<colgroup>标记三、学生练习四、总结南京信息职业技术学院教 案授课班级授课形式实验页 码7授课日期 年 月 日 第 周 教学时数2授课章节名称实验二：链接、图像与表格教学目标1 学会创建跨行、跨列的表格2 会控制表格格式，使用表格进行合理布局3 学会使用img标签教学重点会创建表格，使用图像教学难点使用表格进行合理的布局 更新、补充、删除内容无教学手段上机实验课外作业实验报告课后体会教 学 过 程 设 计实验二：链接、图像与表格一、复习理论超链接、图像、表格二、布置

17、实验任务1 实验目的：学会创建跨行、跨列的表格学会使用img标签会控制表格格式，使用表格进行合理布局2实验任务：习题一：创建跨行和跨列的表格习题二：创建嵌套表格如下图所示，并在此基础上加入图像和超链接，网页围绕一个主题合理布局 三、指导学生上机实验针对学生普遍存在的问题进行集体讲解和指导。四、总结这次实验存在的问题五、布置作业：实验报告南京信息职业技术学院教 案授课班级授课形式实验页 码8授课日期 年 月 日 第 周 教学时数2授课章节名称实验二：链接、图像与表格（续）教学目标1 学会创建跨行、跨列的表格2 会控制表格格式，使用表格进行合理布局3 学会使用img标签教学重点会创建表格，使用图像

18、教学难点使用表格进行合理的布局 更新、补充、删除内容无教学手段上机实验课外作业实验报告课后体会教 学 过 程 设 计实验二：链接、图像与表格（续）一、复习理论超链接、图像、表格二、布置实验任务1 实验目的：学会创建跨行、跨列的表格学会使用img标签会控制表格格式，使用表格进行合理布局2实验任务：在上次习题二的基础上发挥主观能动性加入图像和超链接，网页围绕一个主题合理布局 三、指导学生上机实验针对学生普遍存在的问题进行集体讲解和指导。四、总结这次实验存在的问题五、布置作业：实验报告南京信息职业技术学院教 案授课班级授课形式讲授页 码9授课日期 年 月 日 第 周 教学时数2授课章节名称第6章 框

19、架布局6.1 框架的概念 6.2 创建含有框架的HTML文档教学目标1 学会使用frameset元素在单一浏览窗口显示多个Web页面2 使用框架进行布局教学重点框架的创建和使用教学难点使用框架创建符合需求的页面 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第6章 框架布局一、复习引入 窗口框架可用于将窗口画面分割成多个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同时浏览不同网页的效果。二、新授课6.1 框架 框架能够同时显示多个HTML文档，框架之间可以互相联系，触发一个框架中的事件可以改变另一个框架中的内容和行为。6.2 创建含有框架的HTML文

20、档 1. 基本框架标记：frameset - 不使用body标记- cols属性：垂直框架，指定框架的宽度- rows属性：水平框架，指定框架的高度- frame标记：没有结束标记>>>定义单个框架中的显示内容及其外观样式>>>src属性：指定要显示的页面的 URL>>>单个标记，无需结尾- noframes标记:浏览器无法显示框架时，显示此标记中的内容 举例演示多框架和弹性框架 2. 框架集嵌套:<frameset>标记中嵌套使用另外一个<frameset>标记 框架目标：一个框架内的链接目标在另一个框架中显示 命

21、名框架：<frame>标记的name属性设置锚站目标：<a>中使用target属性设置三、学生进行课堂练习四、总结南京信息职业技术学院教 案授课班级授课形式讲授页 码10授课日期 年 月 日 第 周 教学时数2授课章节名称6.3 框架格式化 6.4 浮动框架教学目标1 学会设置框架的各种属性2 学会使用浮动框架教学重点浮动框架的使用教学难点框架的实际应用 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第6章 框架布局一、复习理论框架的frameset、frame标签二、新授课6.3 框架格式化 1. 边框设置： 框架边框的属性：- fram

22、eborder:0表不要边框，1表示显示边框- border:设定边框宽度- bordercolor：设置边框颜色- <frameset>标记和<frame>标记中都可以使用 2. 页白设置：框架边框到框架内容的空白区域- Marginweidth:控制左右页白- marginheight:控制上下页白 3. 大小设置 - noresize属性:禁止浏览者调整框架的大小 4. 滚动设置：scrolling属性 - yes:不管是否需要都使用滚动条- no:不使用滚动条- auto:根据需要显示滚动条6.4 浮动框架 浮动框架:<iframe>标记- 创建一个

23、内嵌的框架区或窗口- 与<frame>同样的属性设置：name、src、marginwidth、marginheight、frameborder及scrolling- 与图形类似属性设置：height、width和align- 遵循与普通框架一样的target原则：通过name属性来指向它 三、学生进行课堂练习四、总结南京信息职业技术学院教 案授课班级授课形式讲授页 码11授课日期 年 月 日 第 周 教学时数2授课章节名称第7章 使用表单收集数据7.1 表单初步7.2 表单元素教学目标1、理解<form>、<input>标签；下拉菜单select/opti

24、on；2、理解多行文本框textarea；3、掌握表单在网页中的应用。教学重点各种表单元素教学难点<input>标签；下拉菜单select/option；多行文本框textarea 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第7章 使用表单收集数据一、复习引入 随着Internet的迅速发展，用户的要求越来越高。他们不仅希望能从Web服务器中获得信息，而且还希望能向Web服务器反馈信息。HTML是利用表单（Form）来设计交互界面的。二、新授课7.1 表单初步 - 填充式的表单使用户可以提交更复杂的信息，进行更复杂的交互- 表单是HTML标记中较为

25、复杂的部分，它往往与脚本、动态页面和数据处理等功能相结合，制作动态网站- 表单元素包括： >>文本字段 >>复选框 >>单选按钮 >> 按钮>>下拉菜单/列表框7.2 表单元素：1. <form>标记- <form>标记可以看作是一个包含许多表单控件的容器- 排列各种表单控件的布局，让表单以一种友好的界面呈现在浏览者面前- 控件是用来收集用户信息的域。表单中的每一个控件都有名称（name）和值（value）。当用户填写好表单并提交时，可用这些“名/值”对处理表单。- 把整个最终处理数据结果发送到目标程序上，这个

26、数据结果是由许多对名称和数据值的统一体（即“名/值”对）组成的 - method属性：指定表单数据以什么方式发送到Web服务器method = “post”：将表单数据添加到浏览器请求method = “get”：将表单数据直接添加到URL的结尾action属性：指定位于Web服务器上的脚本的URL<form action="url" method=“get|post” >表单元素</form> 2. <input>标记：限定表单内的输入区域，不同的输入方式由属性type指定type属性的值可为text、radio和checkbox等 举

27、例说明三、课堂练习四、总结南京信息职业技术学院教 案授课班级授课形式讲授页 码12授课日期 年 月 日 第 周 教学时数2授课章节名称7.2 表单元素7.3 表单标记访问控制7.4 处理表单7.5 设计方法教学目标1 表单的各种元素2 表单标记访问控制教学重点表单元素及访问控制教学难点表单的实际应用 更新、补充、删除内容无教学手段多媒体课外作业无课后体会 教 学 过 程 设 计第7章 使用表单收集数据一、复习 表单的各种元素二、新授课7.2 表单元素 <input>标签：- 文本域：type = “text”- 密码域：type = “password”- 单选按钮：type =

28、“radio”- 复选框：type = “checkbox”- 文件上传：type = “file”- 隐藏域：type = “hidden”- 提交和重置按钮：type = “submit”、type = “reset”- 图像提交按钮: type = "image"- 下拉菜单：<select><option>,选项编组标记:<optgroup>- 多行文本框：<textarea>- 表单区域fieldset和legend举例演示7.3 表单标记访问控制- 控制Table键的次序：tabindex属性- 快捷键：acces

29、sskey属性- 控件的禁用和只读状态：disabled、readonly- 工具提示与表单域：title属性7.4 处理表单- method属性：get和post- action属性：指定表单数据提交到哪个地址进行处理- enctype属性 7.5 设计方法表单必须便于使用，使访问者能够很方便的回答问题。三、学生练习四、总结南京信息职业技术学院教 案授课班级授课形式实验页 码13授课日期 年 月 日 第 周 教学时数2授课章节名称实验三：框架与表单的设计教学目标1 学会创建和使用表单2 学会使用框架进行布局教学重点表单和框架教学难点表单的使用，灵活使用框架进行布局 更新、补充、删除内容无教学

30、手段上机实验课外作业实验报告课后体会教 学 过 程 设 计实验三：框架与表单的设计一、复习理论表单和框架的使用二、布置实验任务1 实验目的：学会创建和使用表单学会使用框架进行布局2实验任务： 三、指导学生上机实验针对学生普遍存在的问题进行集体讲解和指导。四、总结这次实验存在的问题五、布置作业：实验报告 南京信息职业技术学院教 案授课班级授课形式实验页 码14授课日期 年 月 日 第 周 教学时数2授课章节名称实验三：框架与表单的设计（续）教学目标1 学会创建和使用表单2 学会使用框架进行布局教学重点表单和框架教学难点表单的使用，灵活使用框架进行布局 更新、补充、删除内容无教学手段上机实验课外作

31、业实验报告课后体会 教 学 过 程 设 计实验三：框架与表单的设计（续）一、复习理论表单、框架二、布置实验任务1 实验目的：学会创建和使用表单学会使用框架进行布局2实验任务：在前次实验的基础上发挥主观能动性加入超链接和框架内容，网页围绕一个主题合理布局 三、指导学生上机实验针对学生普遍存在的问题进行集体讲解和指导。四、总结这次实验存在的问题五、布置作业：实验报告南京信息职业技术学院教 案授课班级授课形式讲授页 码15授课日期 年 月 日 第 周 教学时数2授课章节名称第8章 样式表8.1 样式表简介8.2 使用样式表教学目标1 会使用样式表将元素表示与文档结构分开2 会使用内联样式、嵌入式样式

32、表和外部样式表教学重点内联样式表、嵌入式样式表、外部样式表教学难点三种样式表的使用 更新、补充、删除内容无教学手段多媒体课外作业无课后体会 教 学 过 程 设 计第8章 样式表一、复习引入 CSS是为了简化Web页面的更新工作而诞生的，它的功能非常强大，它将让网页变得更加美观，维护更加方便。CSS跟HTML一样，也是一种标记语言，甚至很多属性都来源于HTML，它也需要通过浏览器解释执行。二、新授课8.1 样式表简介 - 样式表是规范浏览器如何显示HTML特定标记的一组规则标记名称：决定页面中的哪些标记受到样式规则的控制标记属性：决定如何显示这些受控制的标记- DHTML = HTML + CS

33、S + JavaScript8.2 使用样式表- 四种样式表：内联式样式表、嵌入式样式表、输入外部样式表、链接外部样式表- 前两种可以称为内部样式表，后两种称为外部样式表- 优先级从高到低依次为：内联式样式表、嵌入式样式表、输入外部样式表、链接外部样式表。1. 内部样式表内联式样式表样式规则直接插入所应用的HTML标记中，作为标记的属性参数，因此其作用范围仅限于所应用的HTML元素。2. 内部样式表嵌入式样式表嵌入式样式表位于HTML内部，在<head>和</head>标记之间定义，或在</head>和<body>标记之间，嵌入式样式表使用<

34、;style>和</style>标记对实现。3. 外部样式表：操作多个页面，并且这些页面需要有统一的外观格式外部样式表文件以“css”为扩展名根据样式文件与网页的关联方式又分为：输入（import）：将外部样式表文件以输入方式添加到页面中，相当于复制一份样式表。链接（link）：如果标记使用到样式表，就会到所链接的外部样式表中索取指定的样式举例说明并演示三、学生当堂练习四、总结南京信息职业技术学院教 案授课班级授课形式讲授页 码16授课日期 年 月 日 第 周 教学时数2授课章节名称8.3 样式表创建规则8.4 层叠样式表教学目标1 掌握id规则、class规则2 掌握伪类和

35、伪元素教学重点id规则、class规则、伪类、伪元素、继承性 教学难点灵活使用样式表的各种规则 更新、补充、删除内容无教学手段多媒体课外作业无课后体会 教 学 过 程 设 计第8章 样式表一、复习引入 四种层叠样式表二、新授课8.3 样式表创建规则 1. id规则<style type="text/css"><!- #a1样式属性:属性值; 样式属性:属性值;. #a2样式属性:属性值; 样式属性:属性值;. #an样式属性:属性值; 样式属性:属性值;.-></style>2. class规则：同一类可应用于不同的标记，或者一个标记可以

36、定义不同的类<style type="text/css"><!- *.class规则1样式属性:属性值; 样式属性:属性值;. *.class规则2样式属性:属性值; 样式属性:属性值;.标签1.class规则1样式属性:属性值; 样式属性:属性值;. 标签2.class规则2样式属性:属性值; 样式属性:属性值;.-></style>3. 伪类：伪类是一种特殊的class规则，主要用来处理链接在不同状态下的不同样式效果。 伪元素：伪元素常用来给标记添加特殊的效果4. 继承性- 父标记和子标记的概念包含在外面的标记为父标记被包含在里面的标

37、记为子标记- 对子元素（后代）定义的样式比对子元素的父（或祖先）元素定义的样式更特殊8.4 层叠样式表- CSS可以细分为：CSS1、CSS-P、CSS2- 前两种可以称为内部样式表，后两种称为外部样式表举例说明并演示三、学生当堂练习四、总结南京信息职业技术学院教 案授课班级授课形式讲授页 码17授课日期 年 月 日 第 周 教学时数2授课章节名称8.5 样式表属性8.6 外部和内联样式表示例教学目标1 掌握设置字体样式2 掌握控制图文布局，颜色及背景3 了解美化网页与超链接的设置，CSS定位4 通过本章的学习使学生了解掌握CSS的各种属性应用教学重点设置字体样式；控制图文布局，颜色及背景；美

38、化网页与超链接的设置；教学难点各种层叠样式表及属性的使用 更新、补充、删除内容div层标签教学手段多媒体课外作业无课后体会 教 学 过 程 设 计第8章 样式表一、复习引入 层叠样式表及其规则二、新授课8.5 样式表属性- 文本属性：text-indent、text-transform、text-align、 text-decoration、letter-spacing- 颜色和背景属性：color、background-color、background-image、background-repeat、background-attachment、background-position- spa

39、n和div标签- 字体属性：font-family、font-style、font-variant、font-weight、font-size- 容器模型：为不同文本设置不同的容器级别，可以调整容器中的边距、填充和边框等- 列表：使用CSS属性控制列表的位置及项目符号样式 list-style-type、list-style-image、list-style-position、list-style- 混合属性：display、position、top、bottom、left、height、width、float、line-height、visibility8.6 外部和内联样式表示例- 内联样

40、式表、嵌入式样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件*.css某些样式不同的页面，除了链接外部样式文件，还需定义嵌入式样式某张网页内，部分内容”与众不同“，采用内联样式- <div>是块级容器标签，可以包含图片、标题、段落、文字等使用 zindex 指定是哪一层举例说明并演示三、学生当堂练习四、总结南京信息职业技术学院教 案授课班级授课形式实验页 码18授课日期 年 月 日 第 周 教学时数2授课章节名称实验四 层叠样式表CSS教学目标1 掌握四种类型的样式表2 会通过创建样式表来控制Web站点的外观教学重点四种

41、样式表的混合使用样式表属性设置教学难点四种样式表的混合使用 更新、补充、删除内容无教学手段上机实验课外作业实验报告课后体会 教 学 过 程 设 计实验四 层叠样式表CSS一、复习理论四种样式表及其各种属性的使用二、布置实验任务1 实验目的： 掌握四种类型的样式表 会通过创建样式表来控制Web站点的外观2实验任务： 1.链接外部样式表 2. 使用CSS样式制作以下网页布局三、指导学生上机实验针对学生普遍存在的问题进行集体讲解和指导。四、总结这次实验存在的问题五、布置作业：实验报告南京信息职业技术学院教 案授课班级授课形式实验页 码19授课日期 年 月 日 第 周 教学时数2授课章节名称实验四 层

42、叠样式表CSS教学目标1 掌握四种类型的样式表2 会通过创建样式表来控制Web站点的外观教学重点四种样式表的混合使用样式表属性设置教学难点四种样式表的混合使用 更新、补充、删除内容无教学手段上机实验课外作业实验报告课后体会 教 学 过 程 设 计实验四 层叠样式表CSS（续）一、复习理论四种样式表及其各种属性的使用二、布置实验任务1 实验目的： 掌握四种类型的样式表 会通过创建样式表来控制Web站点的外观2实验任务： （1）链接外部样式表 （2） 使用CSS样式制作以下网页布局（3）灵活使用样式表美化个人网站三、指导学生上机实验针对学生普遍存在的问题进行集体讲解和指导。四、总结这次实验存在的问

43、题五、布置作业：实验报告南京信息职业技术学院教 案授课班级授课形式讲授页 码20授课日期 年 月 日 第 周 教学时数2授课章节名称第9章 HTML高级主题9.1 使用多媒体9.2 区域组件布局教学目标1 学会在网页中使用多媒体2 学会使用区域组件进行合理布局教学重点多媒体及区域组件的使用教学难点灵活使用各种区域组件 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第9章 HTML高级主题一、复习引入 前面的章节已经介绍了与HTML网页设计有关的主要内容，随着Internet的迅猛发展对HTML提出了挑战，一些新的技术正不断推动HTML的发展，本章将讲述多媒体使用及区域组件布局。二、新授课9.1 使用多媒体 - Web 得以广泛使用的一个主要原因是 HTML 文档中集成了多媒体元素。- 添加活动的GIF- 添加音频- 添加视频- 添加flash动画9.2 区域组件布局- 将文字、图形、表格等对象以特定的样式进行组合布置，丰富了网页的布局1. <div>标记：在不同区域采用不同样式 <div class=样式规则名称><div> 或：<div id=样式规则名称><div>2. <span>标记：用于区域设置，一般用

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论