1、第12章网页代码本章简介：本章简介：Dreamweaver CS5Dreamweaver CS5提供代码编辑提供代码编辑工具，方便用户直接编写或修改代工具，方便用户直接编写或修改代码，实现码，实现WebWeb页的交互效果。在页的交互效果。在Dreamweaver CS5Dreamweaver CS5中插入的网页内容中插入的网页内容及动作都会自动转换为代码，因此，及动作都会自动转换为代码，因此，只有熟悉查看和编写代码的环境，只有熟悉查看和编写代码的环境，了解源代码，才能真正懂得网页的了解源代码，才能真正懂得网页的内涵。内涵。课堂学习目标网页代码网页代码编辑代码编辑代码常用的常用的HTMLHTML
2、标签标签脚本语言脚本语言响应响应HTMLHTML事件事件12.1 网页代码使用使用“参考参考”面板面板代码提示功能代码提示功能使用标签库插入标签使用标签库插入标签用标签选择器插入标签用标签选择器插入标签12.1.1使用“参考”面板“参考参考”面板为设计者提供了标记语言、编程语言和面板为设计者提供了标记语言、编程语言和CSSCSS样式的快样式的快速参考工具，它提供了有关在速参考工具，它提供了有关在“代码代码”视图中正在使用的特定标签、视图中正在使用的特定标签、对象或样式的信息。对象或样式的信息。“参考”面板12.1.2代码提示功能 代码提示是网页制作者在代码窗口中编写或修改代码的有效工代码提示是
3、网页制作者在代码窗口中编写或修改代码的有效工具。只要在具。只要在“代码代码”视图的相应标签间按下视图的相应标签间按下spacespace键，即会出现关于键，即会出现关于该标签常用属性、方法、事件的代码提示下拉列表。该标签常用属性、方法、事件的代码提示下拉列表。效果图12.1.3用标签库插入标签在在Dreamweaver CS5Dreamweaver CS5中，标签库中有一组特定类型的标签，其中中，标签库中有一组特定类型的标签，其中还包含还包含Dreamweaver CS5Dreamweaver CS5应如何设置标签格式的信息。标签库提供了应如何设置标签格式的信息。标签库提供了Dreamweav
4、er CS5Dreamweaver CS5用于代码提示、目标浏览器检查、标签选择器和其用于代码提示、目标浏览器检查、标签选择器和其他代码功能的标签信息。使用标签库编辑器，可以添加和删除标签他代码功能的标签信息。使用标签库编辑器，可以添加和删除标签库、标签和属性，设置标签库的属性以及编辑标签和属性。库、标签和属性，设置标签库的属性以及编辑标签和属性。选择选择“编辑编辑 标签库标签库”命令，启用命令，启用“标签库编辑器标签库编辑器”对话框。对话框。标签库中列出了绝大部分各种语言所用到的标签及其属性参数，设标签库中列出了绝大部分各种语言所用到的标签及其属性参数，设计者可以轻松地添加和删除标签库、标签
5、和属性。计者可以轻松地添加和删除标签库、标签和属性。12.1.4用标签选择器插入标签如果网页制作者对代码不是很熟，那么如果网页制作者对代码不是很熟，那么Dreamweaver CS5Dreamweaver CS5提供了提供了另一个实用工具，即标签选择器。标签选择器不仅按类别显示所有另一个实用工具，即标签选择器。标签选择器不仅按类别显示所有标签，还提供该标签格式及功能的解释信息。标签，还提供该标签格式及功能的解释信息。在在“代码代码”视图中单击鼠标右键，在弹出的菜单中选择视图中单击鼠标右键，在弹出的菜单中选择“插入插入标签标签”命令，启用命令，启用“标签选择器标签选择器”对话框。左侧选项框中包含
6、支持对话框。左侧选项框中包含支持的标签库的列表，右侧选项框中显示选定标签库文件夹中的单独标的标签库的列表，右侧选项框中显示选定标签库文件夹中的单独标签，下方选项框中显示选定标签的详细信息。签，下方选项框中显示选定标签的详细信息。12.2 编辑代码使用标签检查器编辑代码使用标签检查器编辑代码使用标签编辑器编辑代码使用标签编辑器编辑代码12.2.1使用标签检查器编辑代码 标签检查器列出所选标签的属性表，方便设计者查看和编辑选标签检查器列出所选标签的属性表，方便设计者查看和编辑选择的标签对象的各项属性。选择择的标签对象的各项属性。选择“窗口窗口 标签检查器标签检查器”命令，启用命令，启用“标签检查器
7、标签检查器”控制面板。若想查看或修改某标签的属性，只需先控制面板。若想查看或修改某标签的属性，只需先在文档窗口中用鼠标指针选择对象或选择文档窗口下方要选择对象在文档窗口中用鼠标指针选择对象或选择文档窗口下方要选择对象相应的标签，再选择相应的标签，再选择“窗口窗口 标签检查器标签检查器”命令，启用命令，启用“标签检查标签检查器器”控制面板，此时，控制面板将列出该标签的属性。设计者可以控制面板，此时，控制面板将列出该标签的属性。设计者可以根据需要轻松地找到各属性参数，并方便地修改属性值。根据需要轻松地找到各属性参数，并方便地修改属性值。12.2.2使用标签编辑器编辑代码标签编辑器是另一个编辑标签的
8、方式。先在文档窗口中选择特定标签编辑器是另一个编辑标签的方式。先在文档窗口中选择特定的标签，然后单击的标签，然后单击“标签检查器标签检查器”控制面板右上角的选项菜单控制面板右上角的选项菜单 ，在，在弹出的菜单中选择弹出的菜单中选择“编辑标签编辑标签”命令，打开命令，打开“标签编辑器标签编辑器”对话框。对话框。“标签编辑器-table”对话框12.2.3常用的HTML标签 HTML HTML 是一种超文本标志语言，是一种超文本标志语言，HTMLHTML文件是被网络浏览器读取并文件是被网络浏览器读取并产生网页的文件。产生网页的文件。12.4脚本语言 脚本是一个包含源代码的文件，一次只有一行被解释或
9、翻译成脚本是一个包含源代码的文件，一次只有一行被解释或翻译成为机器语言。在脚本处理过程中，翻译每个代码行，并一次选择一行为机器语言。在脚本处理过程中，翻译每个代码行，并一次选择一行代码，直到脚本中所有代码都被处理完成。代码，直到脚本中所有代码都被处理完成。WebWeb应用程序经常使用客应用程序经常使用客户端脚本，以及服务器端的脚本，本章讨论的是客户脚本。户端脚本，以及服务器端的脚本，本章讨论的是客户脚本。 脚本创建的应用程序有代码行数的限制，一般小于脚本创建的应用程序有代码行数的限制，一般小于100100行。脚本行。脚本程序较小，一般用程序较小，一般用“记事本记事本”或在或在Dreamweav
10、er CS5Dreamweaver CS5的的“代码代码”视图视图中编辑创建。中编辑创建。12.5响应HTML事件代码事件代码事件课堂案例课堂案例商业公司网页商业公司网页12.5.1代码事件1通过名称调用事件过程通过名称调用事件过程事件过程调用的实例 2通过通过FOR/EVENT属性调用事件过程属性调用事件过程事件过程调用的实例 3通过控件属性调用事件过程通过控件属性调用事件过程事件过程调用的实例 事件过程调用的实例12.5.2课堂案例商业公司网页 使用使用“页面属性页面属性”命令改变页面的颜色。使用命令改变页面的颜色。使用“插入标签插入标签”命命令制作浮动框架效果。令制作浮动框架效果。效果图12.6课后习题招商加盟网页 使用使用“页面属性页面属性”菜单命令改变页面的颜色。使用菜单命令改变页面的颜色。使用“插入标签插入标签”命令制作浮动框架效果。命令制作浮动框架效果。效果图
