第2讲+手工编写HTML网页 (1).doc

授课计划 一、授课时间：2014年 月 日二、授课章节项目一：任务二 手工编写HTML网页三、教学目的要求1、掌握手工编写HTML网页文件和查看网页文件源代码的方法；2、掌握HTML文档的基本结构及语法使用规范。四、教学重点难点1、HTML文档的基本结构及语法使用规范；Dreamweaver界面的基本使用（重点）2、懂得运用HTML语句修改网页元素属性效果（难点）五、教学方法 讲授法、演示法、实验法六、教学用具 多媒体计算机、互联网七、教学过程l 复习：评讲P19-20练习题l 案例导入：（1） 在记事本输入P9图1-13源代码，并浏览效果。 （2） 进入DW查看源代码（或在浏览网页效果时，击“查看”源文件（P17）；（3） 在DW中新建空白文档，在代码视图下查看文档源代码。 让学生总结：网页是由HTML语句所组成。l 新授一、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键，在XHTML1.0Transitonal规范里所有的标签都要求闭合，以前那种单一标签都要在其后加“/”，例：变为（在DW中拆分视图下把第一行代码删除演示分析，若要显示代码提示：击“编辑”-显示代码提示）3、水平线段标记(P12，单标记，具有4个属性) 例：在XHTML1.0Transitonal规范中要变成 （DW中击“插入”HTML-水平线）4、段落标记（相当于在DW中按enter键）l 语法格式：文本。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。 例：13电子商务 （在DW中运用工具设置效果看观察代码的变化） 5、文字标记(p13)l 语法格式：文本例：欢迎光临 6、插入图像标记（ P15） 基本语法：其中，src属性指明了所要链接的图像文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。例如： 三、Dreamweaver cs6 工作界面的认识（P38）1、 启动Dreamweaver的方法：（1）双击图标；（2）击“开始”-程序-MacromedimaDreamweaver cs6。 2、工作区的基本组成（P38） 标题栏；菜单栏；“插入“面板；(在DW中演示，击“窗口”-“插入”)文档工具栏：（文档工具栏的显示/隐藏：击“查看”工具栏文档；演示：标题的输入方法，观察代码的变化）l 提供了四种视图切换模式：A.设计视图：系统默认的文档窗品视图模式，显示设计视图；B代码视图：用于显示和编辑HTML源代码。例：新建一个空白文档，在“代码”视图查看源代码C拆分视图：用于同时显示HTML源代码和设计视图。 d.实时视图：可在实际的浏览器条件下设计网页。单击该按钮将显示“实时代码”和“检查”按钮，可以显示代码或启动检查模式。【多屏幕】：用户可以选择网页显示的屏幕分辨率。（相对于DW8版本新增内容）【在浏览器中预览/调试】按钮：通过指定浏览器预览网页文档，可以在文档中存在JavaScript错误时查找错误。【文件管理】按钮：有于快速执行“获取”、取出、上传、存回等文件管理命令。【W3C验证】按钮：可弹出W3C验证菜单。（W3C是万维网联盟的缩写，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。）【可视化助理】按钮：用于在文档窗口中显示各种可视化助理。【检查浏览器兼容性】按钮：检查所设计的页面对不同类型的浏览器的兼容性。【刷新设计视图】按钮：在代码视图中修改网页后，可以使用该按钮刷新文档窗口。标签选择器； 可快速选择某一对象。（演示）属性面板（演示：属性面板的显示/隐藏：击“窗口”-“属性”）；浮动面板组；文档窗口（文档编辑区）3、文本编辑 （1）文本属性修改（颜色、对齐方式）；方法：选定文本，后击“属性”面板CSS-大小/颜色等 （2）连续多空格的插入 方法一：全角状态，按空格； 方法二：击“插入”“HTML”-“特殊符号”-“其他字符“空格”；方法三：在代码视图输入 方法四：设置“首选参数”对话框，击“编辑”首选参数勾选“允许多个连续空格”。（DW默认允许输一个空格） （3）段落：按Enter：相当于分段，行间隔比较_大_;按Shift+Enter：相当于换行，行间隔比较_小_; （4）对齐方式：选定对象；击“格式”“对齐”4、图像的添加：击“插入”-图像；n 对齐方式：右击图片对齐5、网页属性修改：击“修改”-“网页属性”外观CSS；（教师演示分析）四、练习在Dreamweaver中，根据素材和以下效果图制作网页内容，并浏览。五、小结附：而这一串字符就是一个声明，声明给用户端的浏览器，语句作用：网页是一种超文本，这种超文本有他自己的解析方法。该语句属于注释标记，声明了我们是使用了XHTML1.0Transitonal(过渡版)来开发网站的（这个版本是兼容html4.01的，目当大部分（98%）的页面用它），也就是说告诉浏览器应该以哪种格式或方法来解析这个网页。l 若删除该声明，则默认为开发网站是使用HTML版本的标准。l XHTML是可扩展超文本标记语言。第二句，说明如果找不到，浏览器将使用后面的 URL 作为寻找文档类型的位置。 W3C（是万维网联盟的简称）最重要的工作是发展 Web 规范，这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。语句作用：在HTML标记中使用xmlns属性，主要用来声明 HTML 文档中自定义标签的命名空间。这是一个默认值，我们在编写HTML时可以不添加，浏览器会自