边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 12.ppt

本章简介： Dreamweaver CS3提供了代码编辑工具，方便用户直接编写或修改代码，实现Web页的交互效果。在Dreamweaver CS3中插入的网页内容及动作都会自动转换为代码，因此，只有熟悉查看和编写代码的环境，了解源代码才能真正懂得网页的内涵。 * 第12章　网页代码 课堂学习目标 网页代码 编辑代码 常用的HTML标签 脚本语言 响应HTML事件 12.1　运动鞋网页 案例分析 设计理念 操作步骤 相关工具 12.1.1　案例分析 选择一双合适的运动鞋，能够在运动中减少运动损伤和疲劳感。本例是为超齐运动鞋制作的网页界面。该网页的主要功能是通过网络销售推广企业的相关产品，网页的设计要体现出运动的快感和魅力。 12.1.2　设计理念 在网页设计、制作过程中，将页面的背景设计为红色，寓意着热情和悦动。使用半透明的滑板人物来衬托出界面的灵动和活力。右上方放置了导航栏，方便客户浏览相关信息。下方展示了运动鞋的款式和功能。 运动鞋网页效果图 12.1.3　操作步骤 1 2 3 12.1.4　相关工具 使用“参考”面板 “参考”面板为设计者提供了标记语言、编程语言和CSS样式的快速参考工具，它提供了有关在“代码”视图中正在使用的特定标签、对象或样式的信息。 启用参考面板的方法 “参考”面板的参数 调整“参考”面板中文本的大小 2.代码提示功能 代码提示是网页制作者在代码窗口中编写或修改代码的有效工具。只要在“代码”视图的相应标签间按下space键，即会出现关于该标签常用属性、方法、事件的代码提示下拉列表。 3.使用标签库插入标签 在 Dreamweaver CS3中，标签库中有一组特定类型的标签，其中还包含Dreamweaver CS3应如何设置标签格式的信息。标签库提供了Dreamweaver CS3用于代码提示、目标浏览器检查、标签选择器和其他代码功能的标签信息。使用标签库编辑器，可以添加和删除标签库、标签和属性，设置标签库的属性以及编辑标签和属性。 选择“编辑 标签库”命令，弹出“标签库编辑器”对话框。 “标签库编辑器”对话框 4.使用标签选择器插入标签 如果网页制作者对代码不是很熟悉，则可使用Dreamweaver CS3提供的另一个实用工具，即标签选择器。标签选择器不仅按类别显示所有标签，还提供该标签格式及功能的解释信息。 在“代码”视图中单击鼠标右键，在弹出的菜单中选择“插入标签”命令，启用“标签选择器”对话框，左侧选项框中包含支持的标签库的列表，右侧选项框中显示选定标签库文件夹中的单独标签，下方选项框中显示选定标签的详细信息。 5.使用标签检查器编辑代码 标签检查器列出所选标签的属性表，方便设计者查看和编辑选择的标签对象的各项属性。选择“窗口 标签检查器”命令，调出“标签检查器”控制面板。若想查看或修改某标签的属性，只需先在文档窗口中用鼠标指针选择对象或选择文档窗口下方要选择对象相应的标签，再选择“窗口 标签检查器”命令，调出“标签检查器”控制面板，此时，控制面板将列出该标签的属性。设计者可以根据需要轻松地找到各属性参数，并方便地修改属性值。 6.使用标签编辑器编辑代码 标签编辑器是另一个编辑标签的方式。先在文档窗口中选择特定的标签，然后单击“标签检查器”控制面板右上角的“选项菜单”按钮，在弹出的菜单中选择“编辑标签”命令，打开“标签编辑器”对话框。 “标签编辑器”对话框 12.1.5 实战演练-在线试听网页 使用“页面属性”命令改变网面的背景图案，使用“插入标签”命令制作浮动框架效果。 效果图 12.2　健康蔬菜网页 案例分析 设计理念 操作步骤 相关工具 12.2.1　案例分析 蔬菜是人们日常饮食中必不可少的食物之一，可提供人体所必需的多种维生素和矿物质。本例是为蔬菜种植公司制作的网页，在网页设计上要布局合理，能给客户提供一个完善的蔬菜信息交流平台。 12.2.2　设计理念 在网页设计、制作过程中，将页面的功能进行合理划分。上方是清晰明确的导航栏，方便客户浏览相关信息；左侧是现代人的十大最佳健康食品的展示图；右侧是每周要闻和推荐信息。通过这些栏目，客户可以更准确地掌握蔬菜的信息。 健康蔬菜网页效果图 12.2.3　操作步骤 1