《HTML+CSS网页设计与布局》教案

上传人：文*** IP属地：河北上传时间：2023-04-03 格式：PDF 页数：17 大小：716.43KB 积分：12 举报 版权申诉

已阅读5页，还剩12页未读，继续免费阅读

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

文档简介

第01周—第1/25页

《HTML+CSS网页设计与布局》课程教案

授课教师：授课班级：地点：周课时：5课时

网页设计基础知识

章节

Dreamweaver软件介绍及其基础操作

内容

HTML基础知识及常用标记

教学1)使学生了解网页设计的相关基础知识；

目标2)使学生熟悉Dreamweaver软件界面的基本操作方法。

重点1)了解网页设计相关概念和网页的类型；

难点2)熟练掌握Dreamweaver软件创建和管理站点的方法。

教学

课堂讲授、案例讲解与指导

方法

教学

计算机机房

环境

时间

教学过程及内容提要备注

分配

一、引入

1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内约15分钟

容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种

学习氛围，尊重同学，互帮互学，真正达到学以致用；

2、提出问题：上过网吧？有谁自学过网页设计？听说过HTML或者CSS

这两个概念吗？

教二、告知学生课堂任务

本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软

学件基础操作；

过三、逐步演示讲解分析教学内容

1、网站和网页的区别：约35分钟学生理解

程（1）网页是Internet基本元素；

（2）网站由网页组成；

设2、静态网页和动态网页：

静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态

计网页的后缀名通常为.htm、.html、.shtml、.xml。

动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，

在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢

了。真正的动态网页是指实际上并不是独立存在于服务器上的网页

文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，

它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、

ASPX为结尾就是动态的网页了。

静态网页的特点：

（1）内容相对稳定，容易被搜索引擎检索到；

第01周—第2/25页

（2）没有数据库支持，在网站制作和维护方面工作量大；

（3）交互性差，在功能方面有很大的限制。

动态网页的特点：

（1）以数据库技术为基础，可大大降低网站维护的工作量；

（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；

（3）不利于使用搜索引擎进行网站推广。

3、常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；

4、网页设计原则：

（1）了解客户需求

（2）遵循Web标准

（3）运用形式美法则

5、网页设计流程：

（1）手绘效果图：确定网页主题内容和风格

（2）设计效果图：搜集、整合设计所需素材

（3）版面编辑：网页的制作与实现

（4）网页美化：动画设计，网页测试和发布

6、网页设计的主要软件：

（1）Photoshop

（2）Dweamveawer

（3）Flash

（4）Firworks

7、HTML基础知识：约20分钟学生熟记

（1）HTML概念：HyperTextMarkupLanguage超文本标识语言；

（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化

HTML编辑器Dreamweaver、由Web服务器动态生成；

（3）网页文件命名：首页文件名默认为：index.htm或

index.html；

（4）HTML文件结构：

<HTML>

<HEAD>

</HEAD>

<BODY>

HTML文件的正文

</BODY>

</HTML>

（5）用编辑器手工编写第一张网页；

8、学生实训及辅导；约30分钟学生实践

9、Dreamweaver软件界面介绍：约20分钟

（1）软件面板组成及基本操作方法

（2）软件首选参数设置

10、Dreamweaver站点创建：

站点->新建站点->设置站点名称->设置站点默认图像文件夹。

11、学生实训操作：Dreamweaver站点创建与设置；约20分钟学生实践

12、Dreamweaver创建第一个网页：约20分钟

（1)名称：index.html

第01周—第3/25页

（2)设置标题、输入文本、输入特殊字符

（3）页面属性设置

（4）预览网页

13、学生实训及辅导；约30分钟学生实践

14、HTML常用标记：约20分钟

（1）标题标记：<h#>主题文字</h#>

（2）段落标记：<p>这里表示段落</p>

（3）换行与注释：<br>、

（4）粗体与斜体：<b>粗体</b>、<i>斜体</i>

（5）删除线与下划线：<s>删除线</s>、<u>下划线</u>

（6）上标与下标：<sup>上标</sup><sub>下标</sub>

15、学生实训及辅导；约30分钟学生实践

16、字体标记：约20分钟

（1）字体大小：<fontsize="1">字体大小</font>

（2）字体颜色：<fontcolor="">字体颜色</font>

（3）设置标题字体：<h#>主题文字</h#>

（4）物理字体：

<B>…</B>，将字符设置成粗体。

<I>…</I>，将字符设置成斜体。

<U>…</U>，给字符增加下划线。

<S>…</S>，给字符增加删除线。

<TT>…</TT>，将字符设置成打字机字体。

<SUP>…</SUP>，将字符设置成上标字体。

<SUB>…</SUB>，将字符设置成下标字体。

（5）逻辑字体：

<EM>…</EM>强调文字。

<STRONG>…</STRONG>字体加重。

<CODE>…</CODE>显示编程代码。

<SAMP>…</SAMP>显示示例文字。

<KBD>…</KBD>显示键盘按键文字。

<SMALL>…</SMALL>缩小文字。

<BIG>…</BIG>放大文字。

17、字体标记实例讲解；约20分钟

18、学生实训及辅导；约40分钟学生实践

四、课外作业

第3章上机实践。

五、课堂小结总结

本次课主要内容：

1、网页设计基础知识；

2、Dreamweaver基本使用方法；

3、HTML基础知识及常用标记；

后

第01周—第4/25页

记

第01周—第5/25页

《HTML+CSS网页设计与布局》课程教案

授课教师：授课班级：地点：周课时：5课时

文字布局

章节

插入图像

内容

超级链接

教学3)使学生熟练掌握HTML常用标记的基本使用方法；

目标4)使学生掌握HTML常用标记各种属性的含义和设置方法。

重点3)掌握各种HTML常用标记的基本使用方法；

难点4)熟记各种HTML常用标记的含义。

教学

课堂讲授、案例讲解与指导

方法

教学

计算机机房

环境

时间

教学过程及内容提要备注

分配

六、引入

3、回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础知约10分钟

识及Dreamweaver软件基础操作，重点介绍了HTML基础知识及

常用标记；

4、提出问题：网页中文字如何布局？如何在网页中插入图像？如何运

用超级链接？

教七、告知学生课堂任务

本次课所学习的主要内容是HTML文字布局和插入图像、超级链接

学的标记应用。

过八、逐步演示讲解分析教学内容

19、换行控制：文字一<p>、文字二<br/>约30分钟学生理解

程20、不换行控制：<nobr></nobr>

21、文字对齐：align="#"、<center>居中</center>

设22、设置段落：<p>段落一</p>、<p>段落二</p>

23、学生实训及辅导；约30分钟

计24、上周课外作业点评；约40分钟

25、无序列表：约20分钟

<ul>

</ul>

26、有序列表：

<ol>

第01周—第6/25页

</ol>

27、欲格式化文本：<pre>文字</pre>、<xmp>文本</xmp>

28、计算机输出格式：

<code>代码样式小型固定宽度字体显示的文本</code>

<kbd>代码样式固定宽度字体渲染</kbd>

<tt>代码样式固定宽度字体渲染文本</tt>

<var>代码样式斜体字渲染</var>

29、学生实训及辅导；约20分钟学生实践

30、在网页中插入图像：<imgsrc="cn.jpg">约30分钟

31、图像无法显示时的提示信息：<imgsrc="cn.jpg"alt="风景">

32、控制图像的大小：

<imgsrc="cn.jpg"alt="风景"width="400px"height="300px">

33、设置边框：

<imgsrc="cn.jpg"alt="风景"border="0px">

34、图像的链接：

<ahref=""><imgsrc="cn.jpg"></a>

35、学生实训及辅导；约30分钟学生实践

36、图像映射图：<map></map>约20分钟

37、文本与图像对齐：<imgsrc="cn.jpg"align="middle">

38、学生实训及辅导；约30分钟学生实践

39、最简单的文字超链：<ahref="">文字链接</a>约30分钟

40、超链网页的打开方式：_blank、_parent、_self、_top

41、链接的注释：

<ahref=""title="网易网站">163网站</a>

42、设置图片链接：<ahref=""><imgsrc=""></a>

43、设置锚点：<aname="锚点名">文章中的文字</a>

44、邮箱地址链接：

<ahref="mailto:">作者的邮箱</a>

45、相对路径：

相对路径是指这个文件在所在的位置与其他文件或文件夹的关系；

46、绝对路径：

HTML绝对路径（absolutepath）指带域名的文件的完整路径。

47、学生实训及辅导；约30分钟学生实践

九、课外作业

第6章上机实践。

十、课堂小结总结

本次课主要内容：

1、HTML文字布局；

2、HTML插入图像；

3、HTML超级链接。

后

第01周—第7/25页

记

第01周—第8/25页

《HTML+CSS网页设计与布局》课程教案

授课教师：授课班级：地点：周课时：5课时

章节表单的使用

内容插入表格

教学5)使学生熟练掌握HTML常用标记的基本使用方法；

目标6)使学生掌握HTML常用标记各种属性的含义和设置方法。

重点5)掌握各种HTML常用标记的基本使用方法；

难点6)熟记各种HTML常用标记的含义。

教学

课堂讲授、案例讲解与指导

方法

教学

计算机机房

环境

时间

教学过程及内容提要备注

分配

十一、引入

5、回顾上周所学内容：上周主要介绍了HTML文字布局和插入图像的约10分钟

基本方法，重点介绍了超级链接的标记应用；

6、提出问题：什么是表单？常见的表单有哪些？如何在网页中使用表

格？

十二、告知学生课堂任务

教本次课所学习的主要内容是HTML表单和表格的标记应用。

学十三、逐步演示讲解分析教学内容

48、表单基本语法：<form></form>、属性action和method约30分钟学生理解

过49、文本框：<inputtype="text">

50、密码框：<inputtype="password">

程51、单选框：<inputtype="radio">

52、复选框：<inputtype="checkbox">

设53、按钮设置：<inputtype="submit"value="按钮提交">

54、学生实训及辅导；约40分钟学生实践

计55、上周课外作业点评；约30分钟

56、下拉表：约20分钟

<!—设置下拉表选项-->

</select>绝对路径

57、文本域：<textarea><!—文本域内容--></textarea>

第01周—第9/25页

58、表单应用实例讲解；约20分钟

59、学生实训及辅导；约40分钟学生实践

60、表格基本语法：约30分钟

<tr>标签对表示表行

<th>标签对表示表头

<td>标签对表示表元

61、跨多行表元：Rowspan

62、跨多列表元：colspan

63、表格内设置文字对齐：

对齐语法用align表示，后面接的值是left、center和right，

分别代表向左、居中和向右对齐复选框

64、表格在网页中对齐：<tablealign=#></table>；

65、学生实训及辅导；约40分钟学生实践

66、表格应用实例讲解；约20分钟

67、学生实训及辅导；约40分钟学生实践

十四、课外作业

第8章上机实践。

十五、课堂小结

本次课主要内容：总结

1、表单的使用；

2、插入表格；

3、表格应用实例；

后

第01周—第10/25页

记

第01周—第11/25页

《HTML+CSS网页设计与布局》课程教案

授课教师：授课班级：地点：周课时：5课时

网页框架

章节

对象移动属性

内容

多媒体对象应用

教学7)使学生熟练掌握HTML常用标记的基本使用方法；

目标8)使学生掌握HTML常用标记各种属性的含义和设置方法。

重点7)掌握各种HTML常用标记的基本使用方法；

难点8)熟记各种HTML常用标记的含义。

教学

课堂讲授、案例讲解与指导

方法

教学

计算机机房

环境

时间

教学过程及内容提要备注

分配

十六、引入

7、回顾上周所学内容：上周主要介绍了HTML表单和表格的标记应用约10分钟

方法，重点介绍了表单的应用实例；

8、提出问题：框架网页如何创建？如何使网页中的对象移动？如何在

网页中插入Flash、影片、声音？

十七、告知学生课堂任务

教本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒

体对象的标记应用。

学

十八、逐步演示讲解分析教学内容

过68、框架的基本语法：约20分钟学生理解

程<frame></frame>

<framesetcols="25%,50%,25%">

设<framesrc="/">

<framesrc="/">

计<framesrc="/">

</frameset>

69、框架垂直分栏：

垂直分栏是在<frameset>中用cols表示跨多列表元，colspan

70、框架水平分栏：

水平分栏的语法用rows表示

71、设置不可调节框架大小：noresize

72、学生实训及辅导；约30分钟学生实践

73、上周课外作业点评；约30分钟

第01周—第12/25页

74、浏览器不支持框架：<noframes></noframes>约10分钟

75、设置框架边框：<framesetframeborder=#>

76、设置滚动条：

设置滚动条在是<frame>里面，用scrolling属性

77、导航框架：

导航框架是在网页框架的<frame>中加入name属性，表示该

<frame>的名称，然后通过用<a>标记的链接，并用target的属性

值等于<frame>的名称；

78、内联框架：

内联框架存在<body></body>的单个HTML文件中，可以链接其他网

页并显示它，即在一个页面中嵌入一个框架窗口来显示另一个页面

的内容，叫做浮动框架也称内联框架；

79、学生实训及辅导；约20分钟学生实践

80、框架应用实例讲解；约20分钟

81、学生实训及辅导；约40分钟学生实践

82、移动属性基本语法：<marquee>要移动的对象</marquee>约20分钟

83、文字的移动设置：<marqueedirection=#>文字</marquee>

84、图片移动的设置：<marquee><imgsrc="仙境.gif"></marquee>

85、文本移动的方向：<marqueedirection=up>向上移动</marquee>

86、文本的滚动循环；

87、文本的移动速度：scrollamount设置移动的速度

88、学生实训及辅导；约20分钟学生实践

89、网页多媒体的基本语法：<embedsrc=urlloop="true|false">约10分钟

90、隐藏面板的设置；

91、对齐方式：

align=top、bottom、center、baseline、left、right、texttop、

middle、absmiddle、absbottom

92、学生实训及辅导；约20分钟学生实践

93、移动对象应用实例讲解；约30分钟

94、多媒体对象应用实例讲解；

95、学生实训及辅导；约40分钟学生实践

十九、课外作业

第11章上机实践。

二十、课堂小结总结

本次课主要内容：

1、网页框架；

2、对象移动属性；

3、多媒体对象应用。

后

第01周—第13/25页

记

第01周—第14/25页

《HTML+CSS网页设计与布局》课程教案

授课教师：授课班级：地点：周课时：5课时

章节CSS基础知识

内容CSS字体设置

教学9)使学生熟练掌握CSS常用样式的创建方法；

目标10)使学生掌握CSS常用样式各种属性的含义和设置方法。

重点9)掌握各种CSS常用样式的基本使用方法；

难点10)熟记各种CSS常用样式的含义。

教学

课堂讲授、案例讲解与指导

方法

教学

计算机机房

环境

时间

教学过程及内容提要备注

分配

二十一、引入

9、回顾上周所学内容：上周主要介绍了HTML网页框架和多媒体对象标记，约10分钟

重点介绍了HTML对象移动属性设置方法；

10、提出问题：什么是CSS？CSS有什么用？如何创建和使用CSS？

二十二、告知学生课堂任务

本次课所学习的主要内容是CSS基础知识和CSS字体样式设置方法和

教技巧。

学二十三、逐步演示讲解分析教学内容

96、CSS相关基础知识；约40分钟

过97、CSS文件链接方式：学生理解

（1）内联定义：内联定义即是在对象的标记内，使用对象的style属性

程定义适用其的样式表属性。

链入内部CSS：<styletype="text/css">/*这里写CSS内容*/</style>

设（2）链接外部CSS：

<linktype="text/css"rel="stylesheet"src="style.css">

计98、CSS在浏览器兼容性：

现在浏览器市场的主流浏览器主要是InternetExplorer（简称IE）和

MozillaFirefox（简称FF），网页中的CSS因两个浏览器支持不同，所

以对同一代码会显示不同的效果，那么为了达到网页的风格，有时要注

意哪个浏览器要写的CSS属性支持如何。如果某一属性只有一个浏览器

支持，那么另一浏览器对这属性代码就不起作用。

99、CSS选择符：

CSS选择符就是CSS样式的名字，选择符的命名规则可以使用英文字母

的大写与小写、数字、连字号、下划线、冒号、句号，CSS选择符只能

第01周—第15/25页

以字母开头，选择符在CSS中可分成多种，在本小节中只介绍常用的CSS

选择符：HTML标签选择符、ID选择符和CLASS（类选择符）选择符。

100、CSS伪类和伪元素：伪类：伪类选择符是基于一组预定义性质的选择

符，HTML元素可以占有这些预定义性质。实际上这些性质与class属性

的功能是相同的，因此在CSS术语中，它们被称作伪类。在对应这些伪

类的标记中，不存在真正的class属性，相反，它们代表应用到这些元

素的某些方面，或者是相对于该元素的浏览器用户界面的状态。

101、CSS常用单位：

em：（em，元素的字体的高度）。

ex：（x-height，字母"x"的高度）。

px：（像素，相对于屏幕的分辨率）。

绝对长度单位：

in：（英寸，1英寸=2.54厘米）。

cm：（厘米，1厘米=10毫米）。

mm：（毫米，1米=1000毫米）。

pt：（点，1点=1/72英寸）。

pc：（帕，1帕=12点）。

102、上周课外作业点评；约40分钟

103、学生实训及辅导；约60分钟学生实践

104、字体和字体颜色：font:font-style||font-variant||约50分钟

font-weight||font-size||line-height||font-family

105、字体大小：Font-size，后面可接的参数值有：

aller|length

106、字体重量：

Font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600

|700|800|900

107、行距：line-height:#；

108、字体类型：Font-family:fontname；

109、行距：line-height:#；

110、间距与间隔：

word-spacing：normal|长度单位、letter-spacing:normal|length

111、字体应用实例讲解；约40分钟

112、学生实

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

温馨提示

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

《HTML+CSS网页设计与布局》教案

文档简介

温馨提示

最新文档

评论

《HTML+CSS网页设计与布局》教案

文档简介

温馨提示

最新文档

评论

相关文档