DreamweaverCS3中文版实例教程 12 网页代码

《DreamweaverCS3中文版实例教程 12 网页代码》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第12章　网页代码本章简介：DreamweaverCS3提供代码编辑工具，方便用户直接编写或修改代码，实现Web页的交互效果。在DreamweaverCS3中插入的网页内容及动作都会自动转换为代码，因此，只有熟悉查看和编写代码的环境，了解源代码才能真正懂得网页的内涵。课堂学习目标网页代码编辑代码常用的HTML标签脚本语言响应HTML事件12.1网页代码课堂案例——音乐世界网使用“参考”面板代码提示功能使用标签库插入标签用标签选择器插入标签12.1.1课堂案例——音乐世界网使用“页面属性”命令改变页面的颜色。使用“插入标签”命令制作浮动框架效果。效果图12.1.2使用“参考”

2、面板“参考”面板为设计者提供了标记语言、编程语言和CSS样式的快速参考工具，它提供了有关在“代码”视图中正在使用的特定标签、对象或样式的信息。启用参考面板的方法“参考”面板的参数调整“参考”面板中文本的大小12.1.3代码提示功能代码提示是网页制作者在代码窗口中编写或修改代码的有效工具。只要在“代码”视图的相应标签间按下键，即会出现关于该标签常用属性、方法、事件的代码提示下拉列表。提示下拉列表12.1.4使用“参考”面板在DreamweaverCS3中，标签库中有一组特定类型的标签，其中还包含DreamweaverCS3应如何设置标签格式的信息。标签库提供了D

3、reamweaverCS3用于代码提示、目标浏览器检查、标签选择器和其他代码功能的标签信息。使用标签库编辑器，可以添加和删除标签库、标签和属性，设置标签库的属性以及编辑标签和属性。新建标签库新建标签新建属性删除标签库、标签或属性12.1.5用标签选择器插入标签如果网页制作者对代码不是很熟，那么DreamweaverCS3提供了另一个实用工具，即标签选择器。标签选择器不仅按类别显示所有标签，还提供该标签格式及功能的解释信息。在“代码”视图中单击鼠标右键，在弹出的菜单中选择“插入标签”命令，启用“标签选择器”对话框，左侧选项框中包含支持的标签库的列表，右侧选项框中显示选定标签库

4、文件夹中的单独标签，下方选项框中显示选定标签的详细信息。12.2编辑代码使用标签检查器编辑代码使用标签编辑器编辑代码12.2.1使用标签检查器编辑代码标签检查器列出所选标签的属性表，方便设计者查看和编辑选择的标签对象的各项属性。选择“窗口>标签检查器”命令，启用“标签检查器”控制面板。若想查看或修改某标签的属性，只需先在文档窗口中用鼠标指针选择对象或选择文档窗口下方要选择对象相应的标签，再选择“窗口>标签检查器”命令，启用“标签检查器”控制面板，此时，控制面板将列出该标签的属性。设计者可以根据需要轻松地找到各属性参数，并方便地修改属性值。12.2.2使用标签编辑器编辑代码标

5、签编辑器是另一个编辑标签的方式。先在文档窗口中选择特定的标签，然后单击“标签检查器”控制面板右上角的选项菜单，在弹出的菜单中选择“编辑标签”命令，打开“标签编辑器”对话框。“标签编辑器”对话框12.2.3常用的HTML标签HTML是一种超文本标志语言，HTML文件是被网络浏览器读取并产生网页的文件。常用的HTML标签有以下几种。文件结构标签排版标签列表标签表格标签框架图形标签链接标签表单标签滚动标签载入网页的背景音乐标签12.2.4脚本语言脚本是一个包含源代码的文件，一次只有一行被解释或翻译成为机器语言。在脚本处理过程中，翻译每个代码行，并一次选择一行代码，直到脚本中所有代

6、码都被处理完成。Web应用程序经常使用客户端脚本，以及服务器端的脚本，本章讨论的是客户脚本。脚本创建的应用程序有代码行数的限制，一般小于100行。脚本程序较小，一般用“记事本”或在DreamweaverCS3的“代码”视图中编辑创建。12.2.5响应HTML事件前面已经介绍了基本的事件及其触发条件，现在讨论在代码中调用事件过程的方法。调用事件过程有3种方法，下面以在按钮上单击鼠标左键弹出欢迎对话框为例介绍调用事件过程的方法。通过名称调用事件过程通过FOR/EVENT属性调用事件过程通过控件属性调用事件过程12.2.6课后习题——儿童乐园使用“修改”菜单命令改变页面的颜色。使

7、用“插入标签”命令制作浮动框架效果。效果图