网页设计第5讲 HTML3.ppt

导入后，Dreamweaver8是非常优秀的可视化web制作软件，具有丰富的源代码编辑功能，web制作者可以随时查看和编辑HTML源代码。 以前介绍的所有HTML标签都在标签之间，今天我们将介绍两个标签：标签和标签。 本课程的目标是学习Dreamweaver8的HTML源代码编辑功能，掌握HTML文档头标签的使用情况，11.2Dreamweaver的HTML源代码编辑功能，在Dreamweaver8的编辑环境中，编码、分割、 提供了三种设计视图模式，您可以通过单击文档工具栏左侧的按钮快速切换这些视图。 11.2.1Dreamweaver的3种视图模式，(1)在站点“长沙世界之窗”下创建文件夹“12HTML语言”，单击选择“文件”面板中新创建的子文件夹“12HTML语言”，单击鼠标右键，然后单击快捷菜单中的“新建” 将在子文件夹“12HTML语言”中创建默认名称为untitled.html的web文档。 在“11.2.2代码”视图中创建HTML页面，(2)将新创建的页面重命名为“12.html”，然后双击“文件”面板中的名称将其打开。 (3)在“文档”工具栏中单击“代码”按钮，切换到“代码”视图的编辑窗口。 (4)在代码窗口的标题位置输入新的网页标题“公司部门”，按下“Ctrl Enter”键，文档面板的标题文本框的标题也会同步变化。 (5)在代码窗口之间输入文字“长沙世界窗口实现了社长领导下的部门经理责任制，在管理上采用垂直领导、层次管理、阶段性责任”，然后输入“(6)改行”。 (7)保存该页面文件，在浏览器中预览该页面。 的双曲馀弦值。 程式码检视会以不同的颜色显示HTML来源程式码，让使用者可以区分标签，而使用者也可以自己指定标签和程式码的显示颜色。 编码工具可让您在11.2.3Dreamweaver8的程式码编辑工具、1 .程式码检视、(1)程式码收合非常长的页面收合程式码的一部分。 首先选择多行代码，然后单击所选代码左侧的折叠按钮，或者单击“编码”工具栏上的“折叠选择”按钮。 按住Alt键并单击“折叠选择”按钮可折叠未选中的代码。 您可以使用编码(encoding )工具列上的收拢整个标签(collection tag )按钮来收拢与标签前后对应的区域，而无需选取程式码。 方法是将光标放在要折叠的标签中，单击“折叠整个标签”按钮，折叠光标所在的标签区域。 然后按住Alt键并单击“折叠整个标签”按钮可折叠外部标签。 要打开部分折叠的代码，请单击列左侧的展开按钮。 要展开所有折叠的代码，请单击“编码”工具栏上的“全部展开”按钮。 (2)选择父标签的代码标签之间一般存在嵌套关系，如何快速调查某个代码标签属于其他代码标签？ 将光标直接放在该标签代码上，单击“选择父标签”按钮即可。 您可以多次单击以选择父选项卡。 (3)关于代码的注释，选择需要注释的代码行，点击“代码”工具栏的“应用注释”按钮，从弹出式菜单中选择注释方法即可。 要取消注释，请选择要取消注释的代码行，然后单击“编码”工具栏上的“删除注释”按钮。 (4)包围标签的标签的主要功能是防止在写标签时忽略结束标签。 如果首先选择内容，然后单击“包围标记”按钮，然后从下拉列表中选择或直接键入相应的代码，则会在选定内容周围自动添加完整的开始和结束标记。(5)缩进和强调代码时，首先选择代码段落，按下“Tab”键，或者单击“代码”工具栏上的“缩进代码”按钮，实现代码的缩进。 对于缩进的代码，按Shift Tab键或单击“编码”工具栏上的“凸出代码”按钮，实现代码的凸出。 (6)行号的显示/隐藏代码视图中，按HTML语句显示行号，便于检索。 在“代码”视图窗口中，单击“编码”工具栏上的“行号”按钮，或者单击“文档”工具栏上的“视图选项”按钮，然后单击弹出式菜单中的“行号”命令，可以显示或隐藏“行号”。 (7)在“自动换行代码”视图窗口中编辑代码时，单击“文档”工具栏上的“视图选项”按钮，然后从弹出式菜单中单击“自动换行”命令，可以清楚地看到代码行太长。 打开“文件”面板组，然后切换到“代码片段”选项卡以访问代码片段的子面板。 代码片段面使您能够存储HTML和JavaScript代码片段，这对于重复使用代码或创建和存储新代码片段非常有用。 4 .选择代码片段、(1)在要插入代码片段的子面板中插入的代码片段，例如“使用竖线作为分隔线”，然后直接单击面板上的“插入”按钮，代码片段就会插入到页面中。 (2)自定义代码片段自己编写代码的情况下，想要在其他页面重复使用该代码的情况下，使用代码片段子面板定制代码片段，可以容易地实现代码的重复使用。 在Dreamweaver8中，打开“代码视图”窗口，然后单击“命令”“清理html/xhtml”命令以打开“清理html/xhtml”对话框，如图11-18所示，从中可以选择优化方法。 5 .代码优化，然后单击“确定”按钮，Dreamweaver8进行优化处理会花费时间。 如果选中“完成后显示记录”复选框，处理完成后，将显示一个提示对话框，其中列出了所做的更改。 的双曲馀弦值。 典型的HTML文件会在前几行宣告HTML版本资讯，以指出符合哪些版本的HTML。 下面的代码称为doctype声明。 doctype是documenttype (文档类型)的简称，用于描述所使用的html版本。，HTML版本信息，HTML标题标记，HTML语言的标题标记是主要包含页面的基本说明文，后面叙述的JavaScript特殊效果，css(cascadingstylesheet )通常被定义为标题要素。 常见标题标记包括、1.Meta标记Meta标记，用于记录有关当前页面的信息，包括字符代码、作者和关键字。 meta标签是单一标签，其内容由浏览器读取。 有两个重要属性： name属性和http-equiv属性，这两个属性的值都以内容描述。 (1)name属性的选项值是用于说明构建工具的工具软件，如generator:microsoftfrontpage。 KeyWords :向搜索引擎描述您的网页的关键字Description :向搜索引擎告诉您站点的主要内容Author :向搜索引擎告诉您站点的创建者，(2)http-equiv属性的可选值为： content-type :用于创建网页的字符集中，text/html为文件类型，charset为字符集，gb2312为简体中文。 这是很常用的，通常表示浏览器中的文字会变成乱码。 Refresh :在指定的时间内将网页跳转到其他页面或更新网页。 这是方便的，n是秒的数字，url是该页面跳过的地址，例如用户登录后自动跳过。 Page-Enter :设定页面进入时的特殊效果，Page-Exit :设定页面动态转移页面时的特殊效果Duration值(以秒为单位)。Transition是迁移方式，其值从0到23，分别对应于24种迁移方式。 以下是： 注意：更新页面无效。 只有在页面跳过时才会有效果。 0箱状收缩1箱状放射2圆形收缩3圆形放射4从下向上5从上向下6从上向右7从上向左8垂直百叶窗9水平百叶窗10水平格子状百叶窗11垂直格子状百叶窗12随机溶解，从13左右两端向中央从展开14中央向左右两端从展开15上下两端向中央从展开16中央向上下两端17 .从右上角向左下角展开18 .从右下角向左上角展开19 .从左上角向右下角展开20 .从左下角向右上角展开21 .水平线状展开22 .垂直线状展开23随机转变的方法。2 .基本地址标记可以使用基本