第2讲手工编T写HML网页.docVIP

授课计划 一、授课时间： 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开始标识) head （头部开始标记） 是HTML文档的头部信息 /head（头部结束标记） body （正文开始标记） 是HTML文档的主体部分 /body（正文结束标记） /html(HTML结束标识) 2、格式说明：（在DW中演示分析） （1）HTML（超文本标记语言）不是一种编程语言，仅仅是描述性的标记语言。它定义了一系列的标签，每个标签表示一种意义。 （2）标记是由相应的英文嵌在““内构成,英文不区分大小写； （3）标记可分为单标记与双标记； 例：单标记：br(换行)、hr（水平线） （4）标记不能嵌套使用（演示错误码效果） （5）大部分标记都拥有属性，通过属性可进一步描述标记的作用 二、HTML的常用标记 1、标题标记Hn(p11) 格式：Hn文本/Hn 功能：用于设置字体大小，共有6个等级，n越小，标题字号越大。 例：H113电子商务/H1 （在DW中可在“属性”面板—“格式”中选定标题字号） 2、换行标记br(单标记) 相当于在DW中按shift + enter键，在XHTML?1.0?Transitonal?规范里所有的标签都要求闭合以前那种单一标签在XHTML?1.0?Transitonal?规范—HTML-水平线） 4、段落标记P（相当于在DW中按enter键） 语法格式：p　align=属性文本/p。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。 例：p　align=left13电子商务/p （在DW中运用工具设置效果看观察代码的变化） 5、文字标记FONT(p13) 语法格式：FONT face=字体 size=字号 color=颜色值文本/FONT 例：FONT FACE=楷体_GB2312 SIZE=7 COLOR=RED欢迎光临/FONT 6、插入图像标记img（ P15） 基本语法：　IMG src=图形文件地址 　　其中，src属性指明了所要链接的图像文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。 　　例如：IMG src=images/bgmoni.gif 三、Dreamweaver cs6 工作界面的认识（P38） 启动Dreamweaver的方法：（1）双击图标； （2）击“开始”---程序---Macromedima—Dreamweaver cs6。 2、工作区的基本组成（P38） ①标题栏；②菜单栏； ③“插入“面板；(在DW中演示，击“窗口”--“插入”) ④文档工具栏：（文档工具栏的显示/隐藏：击“查看”—工具栏—文档；演示：标题的输入方法，观察代码的变化） 提供了四种视图切换模式： A.设计视图：系统默认的文档窗品视图模式，显示设计视图； B．代码视图：用于显示和编辑HTML源代码。 例：新建一个空白文档，在“代码”视图查看源代码 C．拆分视图：用于同时显示HTML源代码和设计视图。 d.实时视图：可在实际的浏览器条件下设计网页。单击该按钮将显示“实时代码”和“检查”按钮，可以显示代码或启动检查模式。  【多屏幕】：用户可以选择网页显示的屏幕分辨率。（相对于DW8版本新增内容） 【在浏览器中预览/调试】按钮：通过指定浏览器预览网页文档，可以在文档中存在JavaScript错误时查找错误。 【文件管理】按钮：有于快速执行“获取”、取出、上传、存回等文件管理命令。 【W3C验证】按钮：可弹出W3C验证菜单。（W3C是万维网联盟的缩写，像HTML、XHTML、CSS、XML的标准就是由W3C来定制—“HTML”-“特殊符号”-“其他字符“—“空