第二讲手工编写HTML网页
授课计划
一、授课时间:
2014年 月 日
二、授课章节
项目一:任务二 手工编写HTML网页
三、教学目的要求
1、掌握手工编写HTML网页文件和查看网页文件源代码的方法;
2、掌握HTML文档的基本结构及语法使用规范。
四、教学重点难点
1、HTML文档的基本结构及语法使用规范;Dreamweaver界面的基本使用(重点)
2、懂得运用HTML语句修改网页元素属性效果(难点)
五、教学方法
讲授法、演示法、实验法
六、教学用具
多媒体计算机、互联网
七、教学过程
复习:评讲P19-20练习题
案例导入:
在记事本输入P9图1-13源代码,并浏览效果。
进入DW查看源代码(或在浏览网页效果时,击“查看”—源文件(P17));
在DW中新建空白文档,在代码视图下查看文档源代码。
让学生总结:网页是由HTML语句所组成。
新授
一、HTML文档结构
1、HTML的基本结构
(HTML开始标识)
是HTML文档的头部信息
(头部结束标记)
(正文开始标记)
是HTML文档的主体部分
(正文结束标记)
(HTML结束标识)
2、格式说明:(在DW中演示分析)
(1)HTML(超文本标记语言)不是一种编程语言,仅仅是描述性的标记语言。它定义了一系列的标签,每个标签表示一种意义。
(2)标记是由相应的英文嵌在“<>“内构成,英文不区分大小写;
(3)标记可分为单标记与双标记;
例:单标记:
(换行)、
(水平线)
(4)标记不能嵌套使用(演示错误码效果)
(5)大部分标记都拥有属性,通过属性可进一步描述标记的作用
二、HTML的常用标记
1、标题标记(p11)
格式:文本
功能:用于设置字体大小,共有6个等级,n越小,标题字号越大。
例:
13电子商务
(在DW中可在“属性”面板—“格式”中选定标题字号)
2、换行标记
(单标记)
相当于在DW中按shift + enter键,在XHTML?1.0?Transitonal?规范里所有的标签都要求闭合以前那种单一标签在XHTML?1.0?Transitonal?规范—HTML-水平线)
4、段落标记
(相当于在DW中按enter键)
语法格式:
文本
。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。例:
13电子商务
(在DW中运用工具设置效果看观察代码的变化)
5、文字标记(p13)
语法格式:文本
例:欢迎光临
6、插入图像标记( P15)
基本语法:
其中,src属性指明了所要链接的图像文件地址,这个图形文件可以是本地机器上的图形,也可以是位于远端主机上的图形。
例如:
三、Dreamweaver cs6 工作界面的认识(P38)
启动Dreamweaver的方法:(1)双击图标;
(2)击“开始”---程序---Macromedima—Dreamweaver cs6。
2、工作区的基本组成(P38)
①标题栏;②菜单栏;
③“插入“面板;(在DW中演示,击“窗口”--“插入”)
④文档工具栏:(文档工具栏的显示/隐藏:击“查看”—工具栏—文档;演示:标题的输入方法,观察代码的变化)
提供了四种视图切换模式:
A.设计视图:系统默认的文档窗品视图模式,显示设计视图;
B.代码视图:用于显示和编辑HTML源代码。
例:新建一个空白文档,在“代码”视图查看源代码
C.拆分视图:用于同时显示HTML源代码和设计视图。
d.实时视图:可在实际的浏览器条件下设计网页。单击该按钮将显示“实时代码”和“检查”按钮,可以显示代码或启动检查模式。
【多屏幕】:用户可以选择网页显示的屏幕分辨率。(相对于DW8版本新增内容)
【在浏览器中预览/调试】按钮:通过指定浏览器预览网页文档,可以在文档中存在JavaScript错误时查找错误。
【文件管理】按钮:有于快速执行“获取”、取出、上传、存回等文件管理命令。
【W3C验证】按钮:可弹出W3C验证菜单。(