《HTML+CSS网页设计与布局》教案Word格式文档下载.docx

1、（2）遵循Web标准（3）运用形式美法则5、网页设计流程：（1）手绘效果图：确定网页主题内容和风格（2）设计效果图：搜集、整合设计所需素材（3）版面编辑：网页的制作与实现（4）网页美化：动画设计，网页测试和发布6、网页设计的主要软件：（1）Photoshop（2）Dweamveawer（3）Flash（4）Firworks7、HTML基础知识：（1）HTML概念：Hyper Text Markup Language 超文本标识语言；（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web 服务器动态生成；（3）网页文件命名：首页文件名默认为：

2、index.htm 或 index.html；（4）HTML 文件结构： HEADtitle/HEADBODY HTML 文件的正文/BODY/HTML（5）用编辑器手工编写第一张网页；8、学生实训及辅导；9、Dreamweaver软件界面介绍：（1）软件面板组成及基本操作方法（2）软件首选参数设置10、Dreamweaver站点创建：站点-新建站点-设置站点名称-设置站点默认图像文件夹。11、学生实训操作：Dreamweaver站点创建与设置；12、Dreamweaver创建第一个网页：（1） 名称：index.html（2） 设置标题、输入文本、输入特殊字符（3）页面属性设置（4）预览网页

3、13、学生实训及辅导；14、HTML常用标记：（1）标题标记：h#主题文字（2）段落标记：p这里表示段落（3）换行与注释：br、（4）粗体与斜体：b粗体i斜体（5）删除线与下划线：s删除线u下划线（6）上标与下标：sup上标sub下标15、学生实训及辅导；16、字体标记：（1）字体大小：font size=1字体大小（2）字体颜色：font color=字体颜色，将字符设置成粗体。I/I，将字符设置成斜体。U/U，给字符增加下划线。S/S，给字符增加删除线。TT/TT，将字符设置成打字机字体。 /SUP，将字符设置成上标字体。SUB/SUB，将字符设置成下标字体。（5）逻辑字体：EM/EM强调

4、文字。STRONG/STRONG字体加重。CODE/CODE显示编程代码。SAMP/SAMP显示示例文字。KBD/KBD显示键盘按键文字。SMALL/SMALL缩小文字。BIG/BIG放大文字。17、字体标记实例讲解；18、学生实训及辅导；四、课外作业第3章上机实践。五、课堂小结本次课主要内容：1、网页设计基础知识；2、Dreamweaver基本使用方法；3、HTML基础知识及常用标记；约15分钟约35分钟约20分钟约30分钟约40分钟学生理解学生熟记学生实践总结后记文字布局插入图像超级链接3）使学生熟练掌握HTML常用标记的基本使用方法；4）使学生掌握HTML常用标记各种属性的含义和设置方法

5、。3）掌握各种HTML常用标记的基本使用方法；4）熟记各种HTML常用标记的含义。六、引入3、回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础知识及Dreamweaver软件基础操作，重点介绍了HTML基础知识及常用标记；4、提出问题：网页中文字如何布局？如何在网页中插入图像？如何运用超级链接？七、告知学生课堂任务本次课所学习的主要内容是HTML文字布局和插入图像、超级链接的标记应用。八、逐步演示讲解分析教学内容19、换行控制：文字一、文字二20、不换行控制：nobr/nobr21、文字对齐：align=#center居中22、设置段落：段落一段落二li表项一表项26、有序列表：ol

6、/ol27、欲格式化文本：pre文字xmp文本28、计算机输出格式：code代码样式小型固定宽度字体显示的文本kbd代码样式固定宽度字体渲染tt代码样式固定宽度字体渲染文本var代码样式斜体字渲染29、学生实训及辅导；30、在网页中插入图像：img src=cn.jpg31、图像无法显示时的提示信息： alt=风景32、控制图像的大小： width=400px height=300px33、设置边框： border=0px34、图像的链接：a href=/a35、学生实训及辅导；36、图像映射图：map/map37、文本与图像对齐： align=middle38、学生实训及辅导；39、最简单的

7、文字超链：文字链接163网站42、设置图片链接：43、设置锚点：a name=锚点名文章中的文字44、邮箱地址链接：mailto:leiningcn作者的邮箱/form、属性action和method49、文本框：input type=text50、密码框：password51、单选框：radio52、复选框：checkbox53、按钮设置：submit value=按钮提交54、学生实训及辅导；55、上周课外作业点评；56、下拉表：select设置下拉表选项-option选项一选项二选项三绝对路径57、文本域：textarea文本域内容-/textarea58、表单应用实例讲解；59、学生实

8、训及辅导；60、表格基本语法：table/tabletr标签对表示表行th标签对表示表头td标签对表示表元61、跨多行表元：Rowspan62、跨多列表元：colspan 63、表格内设置文字对齐：对齐语法用align表示，后面接的值是left、center和right，分别代表向左、居中和向右对齐复选框 64、表格在网页中对齐：table align=#；65、学生实训及辅导；66、表格应用实例讲解；67、学生实训及辅导；一十四、课外作业第8章上机实践。一十五、课堂小结1、表单的使用；2、插入表格；3、表格应用实例；网页框架对象移动属性多媒体对象应用7）使学生熟练掌握HTML常用标记的基本使

9、用方法；8）使学生掌握HTML常用标记各种属性的含义和设置方法。7）掌握各种HTML常用标记的基本使用方法；8）熟记各种HTML常用标记的含义。一十六、引入7、回顾上周所学内容：上周主要介绍了HTML表单和表格的标记应用方法，重点介绍了表单的应用实例；8、提出问题：框架网页如何创建？如何使网页中的对象移动？如何在网页中插入Flash、影片、声音？一十七、告知学生课堂任务本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用。一十八、逐步演示讲解分析教学内容68、框架的基本语法：frameset/framesetframe/frameframeset cols=25%,50

10、%,25%frame src=69、框架垂直分栏：垂直分栏是在/noframes75、设置框架边框：frameset frameborder=#76、设置滚动条：设置滚动条在是里面，用scrolling属性 77、导航框架：导航框架是在网页框架的中加入name属性，表示该的名称，然后通过用标记的链接，并用target的属性值等于的名称；78、内联框架：内联框架存在/body的单个HTML文件中，可以链接其他网页并显示它，即在一个页面中嵌入一个框架窗口来显示另一个页面的内容，叫做浮动框架也称内联框架；79、学生实训及辅导；80、框架应用实例讲解；81、学生实训及辅导；82、移动属性基本语法：ma

11、rquee要移动的对象83、文字的移动设置：marquee direction=#84、图片移动的设置：仙境.gif85、文本移动的方向：marquee direction=up向上移动86、文本的滚动循环；87、文本的移动速度：scrollamount设置移动的速度88、学生实训及辅导；89、网页多媒体的基本语法：embed src=url loop=true|false90、隐藏面板的设置；91、对齐方式：align=top、bottom、center、baseline、 left、right、texttop、middle、 absmiddle、absbottom 92、学生实训及辅导；9

12、3、移动对象应用实例讲解；94、多媒体对象应用实例讲解；95、学生实训及辅导；一十九、课外作业第11章上机实践。二十、课堂小结1、网页框架；2、对象移动属性；3、多媒体对象应用。CSS基础知识CSS字体设置9）使学生熟练掌握CSS常用样式的创建方法；10）使学生掌握CSS常用样式各种属性的含义和设置方法。9）掌握各种CSS常用样式的基本使用方法；10）熟记各种CSS常用样式的含义。二十一、引入9、回顾上周所学内容：上周主要介绍了HTML网页框架和多媒体对象标记，重点介绍了HTML对象移动属性设置方法；10、提出问题：什么是CSS？CSS有什么用？如何创建和使用CSS？二十二、告知学生课堂任务本

13、次课所学习的主要内容是CSS基础知识和CSS字体样式设置方法和技巧。二十三、逐步演示讲解分析教学内容96、CSS相关基础知识；97、CSS文件链接方式：（1）内联定义：内联定义即是在对象的标记内，使用对象的style属性定义适用其的样式表属性。链入内部CSS：style type=text/css/*这里写CSS内容*/（2）链接外部CSS：link type= rel=stylesheet src=style.css98、CSS在浏览器兼容性：现在浏览器市场的主流浏览器主要是Internet Explorer（简称IE）和 Mozilla Firefox（简称FF），网页中的CSS因两个浏览

14、器支持不同，所以对同一代码会显示不同的效果，那么为了达到网页的风格，有时要注意哪个浏览器要写的CSS属性支持如何。如果某一属性只有一个浏览器支持，那么另一浏览器对这属性代码就不起作用。99、CSS选择符：CSS选择符就是CSS样式的名字，选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号，CSS选择符只能以字母开头，选择符在CSS中可分成多种，在本小节中只介绍常用的CSS选择符：HTML标签选择符、ID选择符和CLASS（类选择符）选择符。100、CSS伪类和伪元素：伪类：伪类选择符是基于一组预定义性质的选择符，HTML元素可以占有这些预定义性质。实际上这些性质与c

15、lass属性的功能是相同的，因此在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、上周课外作业点评；103、学生实训及辅导；104、字体和字体颜色：fo

16、nt : font-style | font-variant | font-weight | font-size | line-height | font-family105、字体大小：Font-size，后面可接的参数值有：xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length106、字体重量：Font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900107、行距：line-height:#；108、字体类型：Font-family:fontname；109、行距：110、间距与间隔：word-spacing：normal|长度单位、letter-spacing:normal|length111、字体应用实例讲解；112、学生实训及辅导；二十四、课外作业第16章上机实践。二十五、课堂小结1、CSS基础知识；2、CSS文件链接方式；3、CSS字体设置。约60分钟约50分钟约80分钟CSS文本设置CSS背景设置对象尺寸设置11）使学生熟练掌握CSS常用样式的创建方法；12）使学生掌握CSS常