html第二章.ppt

第2章 创建页面及代码基础 目标 从建立的文件了解HTML文件的基本结构 掌握创建本地站点准备页面的制作 2.1.1 创建、打开与保存页面 创建一个页面实例： 打开“文件”菜单----选择“新建”菜单项----出现“新建文档”对话框----“常规”选项卡----“类别”列表框中选择“基本页”类别----选择HTML选项----单击右下角的“创建”按钮----在标题栏中输入标题名称“我的第一个网页”----在“编辑区”输入“大家好，欢迎浏览我的第一个页面，祝大家愉快”----打开“文件”----选择“保存”----出现“另存为”对话框----输入名称，选择格式----单击“保存”----按F12快捷键查看页面的效果----完成。 2.1.1 创建、打开与保存页面 注意事项 文件名前的星号表示当前文件包含尚未保存的更改，默认标题是“无标题文档”。 2.1.1 创建、打开与保存页面 打开页面实例： “文件”菜单----选择“打开”菜单项----选择文件----单击“打开”按钮----编辑文件----保存文件。 2.1.2 了解HTML文件的基本结构 三种视图： 代码视图：查看或编辑源代码； 设计视图：显示效果，静态页面下，基本实现所见即所得。 代码视图和设计视图：窗口被拆分，上面显示代码，下面显示效果，单击“拆分”按钮进入。 2.1.2 了解HTML文件的基本结构 HTML文件由元素与标签组成。元素即嵌入网页中的字、图片等，标签即像HTML/HTML一样的，放在开始和结束括号之间的用于分割并描述元素的标记。 所有标签都有一个标签名称，有些标签后面还有一个可选的属性列表，标签和属性名不区分大小写。 赋给特定属性的值都可能是要区分大小写的，尤其是对文件位置和名称的引用，以及统一资源定位符（URL），这些都要区分大小写。 属性跟随在标签名称的后面，每个属性都由一个或者多个制表符、空格或者回车符分开。但是它们出现的顺序无关要紧。 大多数只包括字母、数字、连字符和点号的属性值不需要引号，其它的值必须加单引号或双引号。 2.1.2 了解HTML文件的基本结构 HTML文档的基本结构实例： HTML HEAD ………… /HEAD BODY …………. /BODY /HTML 对应的结束标签只是在标签名称前面加一个“/”，结束标签没有属性，可以自如地运用硬回车、空格和Tab键来编排代码文档，使它更易于阅读。 2.1.3 HTML整体结构标签 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title我的第一个网页/title /head body 大家好，欢迎浏览我的第一个页面，祝大家愉快。 /body /html 2.1.3 HTML整体结构标签 DOCTYPE用于向浏览器和验证服务说明文档遵循的HTML版本，HTML3.2和HTML2.4规范都要求文档具备这个标准，一般输入在文档的开关。 HTML表示该文档为HTML文档。 HEAD包含文档的标题，文档使用的脚本，样式定义和文档名信息。 meta http-equiv=Content-Type content=text/html; charset=gb2312 /用来在HTML文档中模拟HTTP协议的响应头的报文，属性有2种：name和http-equiv。 title我的第一个网页/title包含文档的标题。 BODY放置浏览器中显示信息的所有标志和属性。 2.2.1 使用代码工具栏 1）不同颜色显示不同代码； 2）折叠代码； 3）显示行号，自动换行； 4）快速标签编辑器。 2.2.2 优化代码 命令----清理HTML： 1）空标签区块； 2）多余的嵌套标签； 3）不属于Dreamweaver的HTML注解； 4）Dreamweaver特殊标签； 5）指定的标签； 6）尽可能合并嵌套的Font标签； 7）完成后显示记录。 2.2.3 使用标签编辑器和标签选择器 使用标签选择器可以在网页代码中插入新的标签。使用标签编辑器可以对网页代码中的标签进行编辑。 插入新标签实例： 从设计窗口切换到代码窗口----选定插入点----单击鼠标右键----选择“插入标签”----单击左边“+”号展开标签类别文件夹----选择子类----选择要插入的标签（如果有属性还可对其属性进行设置）。 编辑标签实例： 选中一个标签----单击鼠标右键----编辑标签----左边显示属性类