Dreamweaver CC网页设计与应用整本书课件完整版电子教案全套课件最全教学教程ppt（最新）.ppt

《Dreamweaver CC网页设计与应用整本书课件完整版电子教案全套课件最全教学教程ppt（最新）.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver CC网页设计与应用整本书课件完整版电子教案全套课件最全教学教程ppt（最新）.ppt（265页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、本章简介： 本章主要讲解Dreamweaver的基础知识和基本操作。通过这些内容的学习，读者可以认识和了解工作界面的构成，学习网站框架的创建及站点的管理方法，为以后的网站设计和制作打下一个坚实的基础。,第1章 初识 Dreamweaver CC 2019,了解工作界面的构成 掌握创建网站框架的方法和流程 掌握站点的管理方法,课堂学习目标,1.1 工作界面,Dreamweaver CC 2019的工作区将多个文档集中到一个窗口中，不仅降低了系统资源的占用，还可以更加方便地操作文档。Dreamweaver CC 2019的工作窗口由5部分组成，分别是“插入”面板、“文档”工具栏、“文档”窗口、面板

2、组和“属性”面板。Dreamweaver的操作环境简洁明快，可大大提高设计效率。,1.1.1 开始屏幕,启动Dreamweaver CC 2019后，首先看到的画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等。 选择“编辑 首选项”命令，弹出“首选项”对话框，取消选择“显示开始屏幕”复选框，单击“应用”按钮完成设置，单击“关闭”按钮关闭对话框。Dreamweaver CC 2019将不再显示开始屏幕。,开始页面 “首选项”对话框,1.1.2 不同风格的界面,选择 “窗口 工作区布局”命令，弹出其子命令菜单，选择“标准”或“开发人员”命令。选择其中一种界面风格，页面会发生相应的改变。

3、,“工作布局”命令,1.1.3 多文档的编辑界面,Dreamweaver CC 2019提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单击文档编辑窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。,多文档的编辑界面,1.1.4 “插入”面板,“插入”面板包括“HTML”“表单”“模板”“Bootstrap组件”“jQuery Mobile”“jQuery UI”和“收藏夹”7个选项卡，将不同功能的按钮分门别类地放在不同的选项卡中。在Dreamweaver CC 2019中，“插入”面板可用菜单和选项卡两种方式显示。如果需要菜

4、单样式，用户可用鼠标右键单击“插入”面板的选项卡，在弹出的快捷菜单中选择“显示为菜单”命令。,“插入”面板,1.2 创建网站框架,站点管理器 定义新站点 创建文件夹 创建和保存网页,1.2.1 站点管理器,站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点及导入或导出站点。若要管理站点，必须打开“管理站点”对话框。,在Dreamweaver CC 2019中，站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver CC 2019

5、中创建 Web 站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再将这些网页的副本上传到一个远程 Web 服务器上，使公众可以访问它们。本节只介绍如何创建本地站点 （1）选择“站点 管理站点”命令，弹出“管理站点”对话框。 （2）在对话框中单击“新建站点”按钮，弹出“站点设置对象 未命名站点2”对话框。在对话框中，设计者通过“站点”选项卡设置站点名称；单击“高级设置”选项，在弹出的选项卡中根据需要设置站点。,1.2.2 定义新站点,1.2.3 创建文件夹,站点建立好之后，要先在站点管理器中规划站点文件夹。新建文件夹的具体操作步骤如下。 （1）在“文件”面板中选择站点。 （2）通过以下两

6、种方法新建文件夹。 单击“文件”面板右上方的 按钮，在弹出的菜单中选择“文件 新建文件夹”命令。 在“文件”面板中，用鼠标右键单击站点，在弹出的菜单中选择“新建文件夹”命令。 （3）输入新文件夹的名称。,1.2.4 创建和保存网页,选择“文件 新建”命令，或按Ctrl+N组合键，弹出“新建文档”对话框，选择“新建文档”选项，在“文档类型”选项框中选择“HTML”选项，在“框架”选项框中选择“无”选项卡，创建空白网页。 网页设计完成后，选择“文件 保存”命令，弹出“另存为”对话框，在“文件名”选项的文本框中输入网页的名称，单击“保存”按钮，将该文档保存在站点文件夹中。,1.3 管理站点,打开站点

7、 编辑站点 复制站点 删除站点 导出和导入站点,1.3.1 打开站点,当要修改某个网站的内容时，首先需要打开该站点。打开站点就是在各站点间进行切换，具体操作步骤如下。 （1）启动Dreamweaver CC 2019。 （2）选择“窗口 文件”命令，或按F8键，弹出“文件”面板，在其中选择要打开的站点名，打开站点。,1.3.2 编辑站点,当用户需要修改站点的一些设置时，就需要编辑站点。例如，修改站点的默认图像文件夹的路径，其具体的操作步骤如下。 （1）选择“站点 管理站点”命令，弹出“管理站点”对话框。 （2）在“管理站点”对话框中，选择要编辑的站点，单击“编辑当前选定的站点”按钮 ，在弹出的

8、对话框中，选择“高级设置”选项，此时可根据需要进行修改，单击“保存”按钮完成设置，回到“管理站点”对话框。 （3）如果不需要修改其他站点，可单击“完成”按钮关闭“管理站点”对话框。,1.3.3 复制站点,复制站点可省去重复建立多个结构相同站点的操作步骤，从而提高用户的工作效率。在“管理站点”对话框中可以复制站点，其具体操作步骤如下。 （1）在“管理站点”对话框中选择要复制的站点。 （2）单击“复制当前选定的站点”按钮 进行复制。 （3）双击新复制的站点，弹出“文稿 复制”对话框，在“站点名称”选项的文本框中可以输入新站点的名称。,1.3.4 删除站点,删除站点只是删除Dreamweaver C

9、C 2019与本地站点间的关系，而本地站点包含的文件和文件夹仍然保存在磁盘原来的位置上。换句话说，删除站点后，虽然站点文件夹保存在计算机中，但在Dreamweaver CC 2019中已经不存在此站点了。例如，在按下列步骤删除站点后，在“管理站点”对话框中，就不存在该站点的名称了。 （1）在“管理站点”对话框中选择要删除的站点。 （2）单击“删除当前选定的站点”按钮 即可删除选择的站点。,1.3.5 导出和导入站点,1导出站点 （1）选择“站点 管理站点”命令，弹出“管理站点”对话框。在对话框中，选择要导出的站点，单击“导出当前选定的站点”按钮 ，弹出“导出站点”对话框。 （2）在该对话框中浏

10、览并选择保存该站点的路径，单击“保存”按钮，将该站点保存为扩展名为“ste”的文件。 （3）单击“完成”按钮，关闭“管理站点”对话框，完成导出站点的设置。,2导入站点 导入站点的具体操作步骤如下。 （1）选择“站点 管理站点”命令，弹出“管理站点”对话框。 （2）在对话框中，单击“导入站点”按钮，弹出“导入站点”对话框，浏览并选定要导入的站点，单击“打开”按钮，站点被导入。 （3）单击“完成”按钮，关闭“管理站点”对话框，完成导入站点的设置。,本章简介： 文本是网页设计中最基本的元素。本章主要讲解文本的输入和编辑、水平线与网格的设置。通过这些内容的学习，读者可以充分利用文本工具和命令在网页中输

11、入和编辑文本内容，设置水平线与网格，运用丰富的字体和多样的编排手段，表现出网页的内容。,第2章 文本,掌握输入和编辑文本的方法 掌握设置页边距和插入换行符的方法 掌握水平线的设置方法 掌握显示和隐藏网格方法,课堂学习目标,2.1 编辑文本格式,输入文本 设置文本属性 输入连续空格 设置显示或隐藏不可见元素 设置页边距 插入换行符 课堂案例青山别墅网页,2.1.1 输入文本,应用Dreamweaver CC 2019编辑网页时，在文档窗口中光标为默认显示状态。要添加文本，首先应将光标移动到文档窗口中的编辑区域，然后直接输入文本，就像在其他文本编辑器中一样。打开一个文档，在文档中单击鼠标左键，将光

12、标置于其中，然后在光标后面输入文本即可。,2.1.2 设置文本属性,利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方式等，以获得预期的效果。 选择“窗口 属性”命令，或按Ctrl+F3组合键，弹出“属性”面板，在HTML和CSS属性面板中都可以设置文本的属性。,“属性”面板,2.1.3 输入连续空格,在默认状态下，Dreamweaver CC 2019只允许网站设计者输入一个空格，要输入连续多个空格则需要进行设置或通过特定操作才能实现。具体操作步骤如下。 （1）选择“编辑 首选项”命令，弹出“首选项”对话框。 （2）在“首选项”对话框左侧的“分类”列表中选择“常规”选项，在右侧的“

13、编辑选项”选项组中选择“允许多个连续的空格”复选框，单击“应用”按钮完成设置，单击“关闭”按钮关闭对话框。此时，用户可连续按Space键在文档编辑区内输入多个空格。,2.1.4 设置显示或隐藏不可见元素,显示或隐藏某些不可见元素的具体操作步骤如下。 （1）选择“编辑 首选项”命令，弹出“首选项”对话框。 （2）在“首选项”对话框左侧的“分类”列表中选择“不可见元素”选项，根据需要选择或取消选择右侧的多个复选框，以实现不可见元素的显示或隐藏，单击“应用”按钮完成设置，单击“关闭”按钮关闭对话框。 最常用的不可见元素是换行符、脚本、命名锚记、AP元素的锚点和表单隐藏区域，一般将它们设为可见。,2.

14、1.5 设置页边距,按照文章的书写规则，正文与页面之间的四周需要留有一定的距离，这个距离叫页边距。网页设计也如此，在默认状态下，HTML文档的上、下、左、右边距不为零。修改页边距的具体操作步骤如下。 （1）选择“文件 页面属性”命令，弹出“页面属性”对话框。 （2）根据需要在对话框的“左边距”“右边距”“上边距”“下边距”选项的数值框中输入相应的数值。,2.1.6 插入换行符,为段落插入换行符有以下几种方法。 选择“插入”面板中的“HTML”选项卡，单击“字符：换行符”展开式工具按钮 。 按Shift+Enter组合键。 选择“插入 HTML 字符 换行符”命令。 在文档中插入换行符的操作步骤

15、如下。 （1）打开一个网页文件，输入一段文字。 （2）按Shift+Enter组合键，将光标切换到另一个段落。按Shift+Ctrl+Space组合键，输入空格，输入文字。 （3）使用相同的方法，输入换行符和文字。,2.1.7 课堂案例青山别墅网页,使用“页面属性”命令，设置页面外观、网页标题效果；使用“首选项”命令，设置允许多个连续空格。,效果图,2.2 水平线与网格,水平线 显示和隐藏网格 课堂案例休闲度假村网页,2.2.1 水平线,1. 创建水平线 创建水平线的方法有以下两种。 选择“插入”面板中的“HTML”选项卡，单击“水平线”工具按钮 。 选择“插入 HTML 水平线”命令。 2.

16、 修改水平线 在文档窗口中，选中水平线，选择“窗口 属性”命令，弹出“属性”面板，可以根据需要对属性进行修改。,2.2.2 显示和隐藏网格,使用网格可以更加方便地定位网页元素，在网页布局时网格也具有至关重要的作用。 1显示和隐藏网格 选择“查看 设计视图选项 网格设置 显示网格”命令，或按Ctrl+Alt+G组合键，此时处于显示网格的状态，网格在“设计”视图中可见。 2设置网页元素与网格对齐 选择“查看 设计视图选项 网格设置 靠齐到网格”命令，或按Ctrl+Alt+Shift+G组合键，此时，无论网格是否可见，都可以让网页元素自动与网格对齐。,3修改网格的疏密 选择“查看 设计视图选项 网格

17、设置 网格设置”命令，弹出“网格设置”对话框。在“间隔”选项的文本框中输入一个数字，并从下拉列表中选择间隔的单位，单击“确定”按钮关闭对话框，完成对网格线疏密的修改。 4修改网格线的形状和颜色 选择“查看 设计视图选项 网格设置 网格设置”命令，弹出“网格设置”对话框。在对话框中，先单击“颜色”按钮并从颜色拾取器中选择一种颜色，或者在文本框中输入一个十六进制的数字，然后单击“显示”选项组中的“线”或“点”单选项，最后单击“确定”按钮，完成网格线颜色和线型的修改。,2.2.3 课堂案例休闲度假村网页,使用“水平线”命令，在文档中插入水平线；使用“属性”面板，取消水平线的阴影；使用代码改变水平线的

18、颜色。,效果图,课堂练习有机果蔬网页,使用“页面属性”命令，设置页面外观、网页标题效果；使用“首选项”命令，设置允许多个连续空格；使用“CSS设计器”面板，设置文字的字体、大小和行距。,效果图,课后习题国画展览馆网页,使用“属性”面板，设置文字大小、颜色及字体。,效果图,本章简介： 图像和多媒体是网页中的重要元素，在网页中的应用越来越广泛。本章主要讲解图像和多媒体在网页中的应用方法和技巧，通过这些内容的学习，学生可以使设计制作的网页更加美观形象、生动丰富，更可以增加网页的动感，使网页更具有吸引力。,第3章 图像和多媒体,掌握在网页中插入和编辑图像的方法 掌握多媒体在网页中的应用方法和技巧,课堂

19、学习目标,3.1 图像的基本操作,网页中的图像格式 在网页中插入图像 设置图像属性 给图片添加文字说明 跟踪图像 课堂案例蛋糕店网页,3.1.1 网页中的图像格式,网页中通常使用的图像文件有JPEG、GIF、PNG 三种格式，但大多数浏览器只支持JPEG和GIF两种图像格式。因为要保证浏览者下载网页的速度，网站设计者也常使用JPEG和GIF这两种压缩格式的图像。,3.1.2 在网页中插入图像,要在Dreamweaver CC 2019文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内，否则图像不能正确显示，所以在建立站点时，网站设计者常先创建一个名为“images”的文件夹，并将需要的

20、图像复制到其中。 在网页中插入图像的具体操作步骤如下。 （1）在文档窗口中，将插入点放置在要插入图像的位置。 （2）通过以下几种方法启用“图像”命令，弹出“选择图像源文件”对话框。 （3）在对话框中，选择图像文件，单击“确定”按钮完成设置。,3.1.3 设置图像属性,插入图像后，在“属性”面板中显示该图像的属性。,“属性”面板,3.1.4 给图片添加文字说明,当图片不能在浏览器中正常显示时，网页中图片的位置就变成空白区域。 为了让浏览者在不能正常显示图片时也能了解图片的信息，常为网页的图像设置“替换”属性，将图片的说明文字输入“替换”文本框中。,3.1.5 跟踪图像,在工程设计过程中，一般先在

21、图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。Dreamweaver CC 2019利用“跟踪图像”功能来实现上述网页设计的方式。,3.1.6 课堂案例蛋糕店网页,使用“Image”按钮，插入图像；使用“CSS样式”命令，控制图像的水平边距。,效果图,3.2 多媒体在网页中的应用,插入Flash动画 插入FLV 插入Animate作品 插入HTML5 Video 插入音频 插入插件 课堂案例物流运输网页,3.2.1 插

22、入Flash动画,Dreamweaver CC 2019提供了使用Flash对象的功能，虽然Flash中使用的文件类型有Flash 源文件(.fla)、Flash SWF文件(.swf)、Flash 模板文件(.swt)，但Dreamweaver CC 2019只支持Flash SWF(.swf)文件，因为它是 Flash (.fla) 文件的压缩版本，已进行了优化，便于在Web上查看。,3.2.2 插入FLV,在网页中可以轻松添加FLV视频，而无须使用Flash创作工具。但在操作之前必须有一个经过编码的 FLV 文件。使用Dreamweaver插入一个显示FLV文件的SWF组件，当在浏览器中

23、查看时，此组件显示所选的FLV文件及一组播放控件。,3.2.3 插入Animate作品,Animate是Adobe最新出品的制作HTML5动画的可视化工具，可以简单理解为HTML5版本的Flash Pro。使用该软件，可以在网页中轻而易举地插入视频，而不需要编写烦琐复杂的代码。,3.2.4 插入HTML5 Video,在网页中插入HTML5 Video的具体操作步骤如下。 （1）在文档窗口的“设计”视图中，将插入点放置在想要插入视频的位置。 （2）通过以下几种方法启用“HTML5 Video”命令。 在“插入”面板的“HTML”选项卡中，单击“HTML5 Video”按钮 。 选择“插入 HT

24、ML HTML5 Video”命令。 按Ctrl+Shift+Alt+V组合键 （3）在页面中插入一个内部带有影片图标的矩形块。选中该图形，在“属性”面板中，单击“源”选项右侧的“浏览”按钮 ，在弹出的“选择视频”对话框中选择视频文件。单击“确定”按钮，完成视频文件的选择。 （4）保存文档，按F12键预览效果。,3.2.5 插入音频,1插入背景音乐 Html中提供了背景音乐标签，该标签可以为网页实现背景音乐效果。 2插入音乐 插入音乐和背景音乐的效果不同，插入音乐可以在页面中看到播放器的外观，如播放、暂停、定位和音量等按钮。 3嵌入音乐 上面我们介绍了背景音乐及插入音乐，下面我们来讲解一下嵌入

25、音乐。嵌入音乐和插入音乐相同，只不过嵌入音乐播放器的外观要比插入音乐播放器的外观多几个按钮。,3.2.6 插入插件,利用“插件”按钮，可以在网页中插入aiv、mpg、mov、mp4等格式的视频文件，还可以插入音频文件。 在网页中插入插件的具体操作步骤如下。 （1）在文档窗口的“设计”视图中，将插入点放置在想要插入插件的位置。 （2）通过以下几种方法弹出“插件”命令，插入插件。 在“插入”面板的“HTML”选项卡中，单击“插件”按钮 。 选择“插入 HTML 插件”命令。,3.2.7 课堂案例物流运输网页,使用“Flash SWE”按钮，为网页文档插入Flash动画效果；使用“属性”面板，设置动

26、画背景透明。,效果图,课堂练习咖啡馆网页,使用“Image”按钮，插入图像。,效果图,课后习题五谷杂粮网页,使用“Flash SWF”按钮，插入Flash动画效果。,效果图,第4章 超链接,本章简介： 本章主要讲解超链接的概念和使用方法，包括文本超链接、图像超链接、电子邮件超链接和鼠标经过图像超链接等内容。通过这些内容的学习，学生可以熟练掌握网站链接的设置与使用方法，并精心编织网站的链接，为网站访问者能够尽情地遨游在网站之中提供必要的条件。,掌握设置文本超链接的方法和技巧 掌握设置电子邮件链接的方法和技巧 掌握设置图像超链接的方法和技巧 掌握设置鼠标经过图像超链接的方法和技巧,课堂学习目标,4

27、.1 文本超链接,创建文本超链接 文本链接的状态 电子邮件超链接 课堂案例创意设计网页,4.1.1 创建文本超链接,创建文本超链接的方法非常简单，主要是在链接文本的“属性”面板中指定链接文件。指定链接文件的方法有以下3种。 1直接输入要链接文件的路径和文件名 2使用“浏览文件”按钮 3使用指向文件图标,4.1.2 文本链接的状态,一个未被访问过的链接文字与一个被访问过的链接文字在形式上是有所区别的，以提示浏览者链接文字所指示的网页是否被看过。,每当浏览者单击包含电子邮件超链接的网页对象时，就会打开邮件处理工具（如微软的Outlook Express），并且自动将收信人地址设为网站建设者的邮箱地

28、址，方便浏览者给网站发送反馈信息。 1利用“属性”面板建立电子邮件超链接 2利用“电子邮件链接”对话框建立电子邮件超链接,4.1.3 电子邮件超链接,使用“电子邮件链接”按钮，制作电子邮件链接效果；使用“属性”面板，为文字制作下载链接效果；使用“页面属性”命令，改变链接的显示效果。,4.1.4 课堂案例创意设计网页,效果图,图像超链接 鼠标经过图像超链接 课堂案例狮立地板网页,4.2 图像超链接,建立图像超链接的操作步骤如下。 （1）在文档窗口中选择图像。 （2）在“属性”面板中，单击“链接”选项右侧的“浏览文件”按钮 ，为图像添加文档相对路径的链接。 （3）在“替换”选项中可输入替换文字。设

29、置替换文字后，当图片不能下载时，会在图片的位置上显示替换文字；当浏览者将鼠标指针指向图像时也会显示替换文字。 （4）按F12键预览网页的效果。,4.2.1 图像超链接,4.2.2 鼠标经过图像超链接,“鼠标经过图像”是一种常用的互动技术，当鼠标指针经过图像时，图像会随之发生变化。一般来说，“鼠标经过图像”效果由两张大小相等的图像组成，一张称为主图像，另一张称为次图像。主图像是首次载入网页时显示的图像，次图像是当鼠标指针经过时更换的另一张图像。“鼠标经过图像”经常应用于网页中的按钮上。,4.2.3 课堂案例狮立地板网页,使用“鼠标经过图像”按钮，制作导航条效果。,效果图,使用“热点”按钮，为图像

30、添加热点图像；使用“属性”面板，为热点创建超链接。,课堂练习建筑规划网页,效果图,使用“电子邮件链接”命令，制作电子邮件链接效果；使用“浏览文件”链接按钮，为文字制作下载文件链接效果。,课后习题摩托车改装网页,效果图,第5章 表格,本章简介： 在制作网页时，表格的作用不仅是列举数据，更多地是用在网页定位上。很多网页都是以表格布局的，这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能。本章主要讲解表格的操作方法和制作技巧。通过这些内容的学习，学生可以熟练地掌握数据表格的编辑方法及如何应用表格对页面进行合理的布局。,掌握插入表格的方法 掌握设置表格的方法和技巧 掌握在表格内添加

31、元素的方法 掌握网页中数据表格的编辑方法,课堂学习目标,5.1 表格的简单操作,插入表格 设置表格属性 在表格内添加元素 课堂案例租车网页,5.1.1 插入表格,要将相关数据有序地组织在一起，必须先插入表格，然后才能有效地组织数据。 插入表格的具体操作步骤如下。 （1）在“文档”窗口中，将插入点放到合适的位置。 （2）通过以下几种方法弹出“Table”对话框。 选择“插入 Table”命令。 单击“插入”面板“HTML”选项卡中的“Table”按钮 。 按Ctrl+Alt+T组合键。 （3）根据需要选择新建表格的大小、行列数值等，单击“确定”按钮完成新建表格的设置。,5.1.2 设置表格属性,

32、插入表格后，通过选择不同的表格对象，可以在“属性”面板中看到它们的各项参数，修改这些参数可以得到不同风格的表格。 1表格的属性 2单元格和行或列的属性,表格“属性”面板,单元格和行或列的“属性”面板,5.1.3 在表格内添加元素,建立表格后，可以在表格中添加各种网页元素，如文本、图像、表格等。 1输入文字 在单元格中输入文字，有以下几种方法。 单击任意一个单元格并直接输入文本，此时单元格会随文本的输入自动扩展。 粘贴从其他文字编辑软件中复制的带有格式的文本。,2插入其他网页元素 （1）嵌套表格。将插入点放到一个单元格内并插入表格，即可实现嵌套表格。 （2）插入图像。在表格中插入图像有以下几种方

33、法。 将插入点放到一个单元格中，单击“插入”面板“HTML”选项卡中的“Image”按钮 。 将插入点放到一个单元格中，选择“插入 Image”命令。 将插入点放到一个单元格中，将“插入”面板“HTML”选项卡中的“Image”按钮 拖曳到单元格内。 从资源管理器、站点资源管理器或桌面上直接将图像文件拖曳到一个需要插入图像的单元格内。,5.1.4 课堂案例租车网页,使用“Table”按钮，插入表格进行页面布局；使用“Image”按钮，插入图像。,效果图,5.2 网页中的数据表格,导入和导出表格的数据 排序表格 课堂案例典藏博物馆网页,5.2.1 导入和导出表格的数据,1将网页内的表格数据导出

34、2在其他网页中导入表格数据,“导出表格”对话框 “导入表格式数据”对话框,日常工作中，常常需要对无序的表格内容进行排序，以便浏览者可以快速找到所需的数据。表格排序功能可以为网站设计者解决这一难题。 将插入点放到要排序的表格中，然后选择“编辑 表格 排序表格”命令，弹出“排序表格”对话框。根据需要设置相应的选项，单击“应用”或“确定”按钮完成设置。,“排序表格”对话框,5.2.2 排序表格,5.2.3 课堂案例典藏博物馆网页,使用“表格式数据”命令，导入外部表格数据；使用“属性”面板改变表格的宽度、高度和背景颜色。,效果图,课堂练习火锅餐厅网页,使用“Table”按钮，插入表格效果；使用“Ima

35、ge”按钮，插入图像；使用“CSS设计器”面板，为单元格添加背景图像及控制文字大小和字体。,效果图,课后练习OA办公系统网页,使用“导入表格式数据”命令，导入外部表格数据；使用“属性”面板，改变表格的高度和对齐方式；使用“CSS设计器”面板，改变文字的颜色。,效果图,第6章 ASP,本章简介： 本章主要介绍ASP动态网页基础和内置对象，包括ASP服务器的安装、ASP语法基础、数组的创建与应用及流程控制语句等。通过对本章的学习，读者可以掌握ASP的基本操作。,掌握ASP服务器的运行环境及安装IIS的方法 掌握ASP语法基础及数组的创建与应用方法 掌握VBScript选择和循环语句 掌握Reque

36、st请求和响应对象的方法 掌握Server服务对象,课堂学习目标,6.1 ASP动态网页基础,ASP服务器的安装 ASP语法基础 数组的创建与应用 流程控制语句 课堂案例节能环保网页,6.1.1 ASP服务器的安装,ASP是一种服务器端脚本编写环境，其主要功能是把脚本语言、HTML、组件和Web数据库访问功能有机地结合在一起，形成一个能在服务器端运行的应用程序，该应用程序可根据来自浏览器端的请求生成相应的HTML文档并将其回送给浏览器。使用ASP可以创建以HTML网页作为用户界面，并能够对数据库进行交互的Web应用程序。 1ASP的运行环境 2安装IIS,6.1.2 ASP语法基础,1ASP文

37、件结构 ASP文件是以“asp”为扩展名的。在ASP文件中，可以包含以下内容。 （1）HTML标签 （2）脚本命令 （3）ASP代码 （4）文本 2声明脚本语言 在编写ASP程序时，可以声明ASP文件所使用的脚本语言，以通知Web服务器文件是使用何种脚本语言来编写程序的。,3ASP与HTML 在ASP网页中，ASP程序包含在“”之间，并在浏览器打开网页时产生动态内容。它与HTML标签两者互相协作，构成动态网页。ASP程序可以出现在HTML文件中的任意位置，同时在ASP程序中也可以嵌入HTML标签。,6.1.3 数组的创建与应用,数组是有序数据的集合。数组中的每一个元素都属于同一个数据类型，用一

38、个统一的数组名和下标可以唯一地确定数组中的元素，下标放在紧跟在数组名之后的括号中。有一个下标的数组称为一维数组，有两个下标的数组称为二维数组，以此类推。数组的最大维数为60。 1创建数组 在VBScript中，数组有两种类型：固定数组和动态数组。 2应用数组函数 数组函数用于数组的操作。数组函数主要包括LBound函数、UBound函数、Split函数和Erase函数。,6.1.4 流程控制语句,在VBScript语言中，有顺序结构、选择结构和循环结构3种基本程序控制结构。顺序结构是程序设计中最基本的结构，在程序运行时，编译器总是按照先后顺序执行程序中的所有命令。通过选择结构和循环结构可以改变

39、代码的执行顺序。本节介绍VBScript选择语句和循环语句。 1运用VBScript选择语句 2运用VBScript循环语句,6.1.5 课堂案例节能环保网页,使用“拆分”按钮和“设计”按钮切换视图窗口，使用函数“Now()”显示当前系统日期和时间。,效果图,6.2 ASP内置对象,Request请求对象 Response响应对象 Session会话对象 Application应用程序对象 Server服务对象 ObjectContext事务处理对象 课堂案例网球俱乐部网页,6.2.1 Request请求对象,在客户端/服务器结构中，当客户端Web页面向网站服务器传递信息时，ASP通过Requ

40、est对象能够获取客户提交的全部信息。信息包括客户端用户的HTTP变量在网站服务器端存放的客户端浏览器的Cookies数据、附于URL之后的字符串信息、页面中表单传送的数据及客户端的认证等。 1获取表单数据 2检索查询字符串 3获取服务器端环境变量 4以二进制码方式读取数据,6.2.2 Response响应对象,Response对象用来访问所创建并返回客户端的响应。可以使用Response对象控制发送给用户的信息，如直接发送信息给浏览器、重定向浏览器到另一个URL或设置Cookies的值。Response对象提供了标识服务器和性能的HTTP变量、发送给浏览器的信息内容和任何将在Cookies中

41、存储的信息。 Response对象只有一个集合Cookies，该集合用于设置希望放置在客户系统上的Cookies的值。Response对象的Cookies集合用于当前响应中，将Cookies值发送到客户端，该集合的访问方式为只写。 1将信息从服务器端直接发送给客户端 2利用缓冲输出数据 3重定向网页 4向客户端输出二进制数据 5使用Cookies在客户端保存信息,6.2.3 Session会话对象,用户可以使用 Session 对象存储特定会话所需的信息。这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。 当用户请

42、求来自应用程序的 Web 页时，如果该用户还没有会话，则 Web 服务器将自动创建一个 Session 对象。当会话过期或被放弃后，服务器将终止该会话。 1返回当前会话的唯一标识符 2控制会话的结束时间 3应用Abandon方法清除Session变量,6.2.4 Application应用程序对象,ASP程序是在Web服务器上运行的，在Web站点中创建一个基于ASP的应用程序之后，可以通过Application对象在ASP应用程序的所有用户之间共享信息。也就是说，Application对象中包含的数据可以在整个Web站点中被所有用户使用，并且可以在网站运行期间持久保存数据。用Applicati

43、on对象可以实现统计网站的在线人数、创建多用户游戏及创建多用户聊天室等功能。 1锁定和解锁Application对象 2制作网站计数器,6.2.5 Server服务对象,Server对象提供对服务器上的方法和属性的访问，大多数方法和属性是作为实用程序的功能提供的。 1设置ASP脚本的执行时间 2创建服务器组件实例 3获取文件的真实物理路径 4输出HTML源代码,6.2.6 ObjectContext事务处理对象,ObjectContext对象是一个以组件为主的事务处理系统，可以保证事务的成功完成。使用ObjectContext对象，允许程序在网页中直接配合Microsoft Transacti

44、on Server（MTS）使用，从而可以管理或开发高效率的Web服务器应用程序。 事务是一个操作序列，这些序列可以视为一个整体。如果其中的某一个步骤没有完成，所有与该操作相关的内容都应该取消。,6.2.7 课堂案例网球俱乐部网页,使用“代码显示器”窗口输出代码，使用Request对象获取表单数据。,效果图,课堂案例挖掘机网页,使用“Form集合”命令，获取表单数据。,效果图,课后习题建筑信息咨询网页,使用“Response”对象的Write方法，向浏览器端输出标记显示日期。,效果图,第7章 CSS样式,本章简介： 通过CSS的样式定义，可以将网页制作得更加绚丽多彩。本章主要对CSS的技术应用

45、进行讲解。通过对这些内容的学习，可以使设计者轻松、有效地对页面的整体布局、颜色、字体、链接、背景及同一页面的不同部分、不同页面的外观和格式等效果进行精确控制。,了解CSS样式类型的应用 掌握CSS属性的应用方法和技巧 熟练运用CSS过滤器,课堂学习目标,7.1 CSS样式概述,“CSS设计器”面板 CSS样式的类型,7.1.1 “CSS设计器”面板,使用“CSS设计器”面板可以创建、编辑和删除CSS样式，并且可以将外部样式表附加到文档中。 1打开“CSS设计器”面板 打开“CSS设计器”面板有以下两种方法。 选择“窗口 CSS设计器”命令。 按Shift+F11组合键。 2样式表的功能 层叠样

46、式表是HTML格式的代码，浏览器处理起来速度比较快。另外，Deamweaver CC 2019提供了功能复杂、使用方便的层叠样式表，方便网站设计师制作个性化网页。,7.1.2 CSS样式的类型,CSS样式可分为类选择器、标签选择器、ID选择器、内联样式、复合选择器等几种。 1类选择器 类选择器可以将样式属性应用于页面上所有的HTML元素。类选择器的名称必须以“.”为前缀进行标识，后面加上类名，属性和值必须符合CSS规范。 2标签选择器 标签选择器可以对页面中的同一标签进行声明，如对p标签进行声明，那么页面中所有的标签将会使用相同的样式。,3ID选择器 ID选择器与类选择器的使用方法基本相同，唯

47、一不同之处是ID选择器只能在HTML页面中使用一次，针对性比较强。ID选择器以“#”为前缀进行标识，后面加上ID名。 4内联样式 内联样式是直接以style属性将CSS代码写入HTML标签。 5复合选择器 复合选择器可以将风格完全相同或部分相同的选择器同时声明。,7.2 CSS样式的创建与应用,创建CSS样式 应用CSS样式 创建和附加外部样式,7.2.1 创建CSS样式,建立CSS样式的操作步骤如下。 （1）新建或打开一个文档。 （2）选择“窗口 CSS设计器”命令，弹出“CSS设计器”面板。 （3）在“CSS设计器”面板中单击“源”选项组中的“添加CSS源”按钮 ，在弹出的菜单中选择“在页

48、面中定义”选项，以确定CSS样式的保存位置，选择该选项后在“源”选项组中将出现“”标签。 （4）单击“选择器”选项组中的“添加选择器”按钮 ，在“选择器”选项组中出现一个文本框。根据要定义的样式的类型输入名称，如定义类选择器，首先要输入“.” ，再输入名称，按Enter键确认。 （5）在“属性”选项组中单击“边框”按钮 ，切换到有关边框的CSS属性，根据需要添加属性。,7.2.2 应用CSS样式,创建自定义样式后，还要为不同的网页元素应用不同的样式，其具体操作步骤如下。 （1）在文档窗口中选择网页元素。 （2）根据选择器类型使用不同的应用方法。,7.2.3 创建和附加外部样式,如果不同网页的不

49、同网页元素需要同一样式，则可通过附加外部样式来实现。首先创建一个外部样式，然后在不同网页的不同HTML元素中附加定义好的外部样式。 1创建外部样式 2附加外部样式,7.3 编辑CSS样式,网站设计者有时需要修改应用于文档的内部样式和外部样式，如果修改内部样式，则会自动重新设置受它控制的所有HTML对象的格式；如果修改外部样式文件，则会自动重新设置与它链接的所有HTML文档。,7.4 CSS的属性,布局属性 文本属性 边框属性 背景属性 课堂案例山地车网页,7.4.1 布局属性,“布局”选项组用于控制网页中块元素的大小、边距、填充和位置属性等。,7.4.2 文本属性,“文本”选项组用于控制网页中文字的字体、字号、颜色、行距、首行缩进、对齐方式、文本阴影和列表属性等。,7.4.3 边框属性,“边框”选项组用于控制块元素边框的粗细、样式、颜色及圆角。,7.4.4 背景属性,“背景”选项组用于在网页元素后加入背景图像或背景颜色。,7.4.5 课堂案例山地车网页,使用“表格”按钮，插入表格效果；使用“CSS样式”命令，设置翻转效果的链接。,7.5 过渡效果,“CSS过渡效果”面板 创建CSS过渡效果 课堂案例足球运动网页,7.5.1 “CSS过渡效果”面板,在“CSS过渡效果”面板中可以新建、删除和编辑CSS过渡