网页制作DREAMVEAWER.doc

教 案 首 页编号 1 课题初识Dreamweaver CS3首次授课日期2012 年 9月 23日第一周 星期三第一、二节课时2编写日期2011年2月 20日首次授课班级计算机38班教学目标知识目标：了解建站的制作流程掌握制作过程中的一些建站经验和建站技巧能力目标：初识Dreamweaver CS3本课重点初识Dreamweaver CS3本课难点对建站过程的理解教学课型多媒体教具器材计算机教师后记该软件是制作网页的重要软件之一，通过上个学期对FLASH的学习，学生已基本对网页制作有初步的了解，但本软件涉及许多英文词汇，许多学生的理解能力尚欠缺。1.1 初识Dreamweaver CS3 1.1.1 Dreamweaver CS3的启动开始”“Macromedia”Dreamweaver CS3”1.1.2 Dreamweaver CS3的工作环境面板组文件面板文档编辑窗口插入栏文档工具栏标签状态栏属性检查器1.1.2 Dreamweaver CS3的工作环境“插入”面板组文档工具栏1.1.2 Dreamweaver CS3的工作环境“属性”检查器文档编辑窗口1.1.2 Dreamweaver CS3的工作环境浮动面板组1.1.2 Dreamweaver CS3的工作环境浮动面板组常用的浮动面板组的操作方法如下。（1）展开和折叠浮动面板组单击面板左上角的三角标记即可展开与折叠浮动面板。（2）移动浮动面板组将鼠标指向浮动面板组左上角的标签，当鼠标指针变成4个方向箭头的图标时，便可移动浮动面板组。（3）重新组合浮动面板选中浮动面板组中某个选项，单击浮动面板组右上角的按钮，打开下拉式菜单，并在级联菜单中选择与当前浮动面板组合的浮动面板组，可重新组合浮动面板 教 案 首 页编号 2 课题制作简单网页首次授课日期2011 年 2月 23日第一周 星期三第三、四节课时2编写日期2011年2月 20日首次授课班级计算机38班教学目标知识目标：制作简单网页我的足球网能力目标：初识Dreamweaver CS3本课重点制作简单网页本课难点建立站点程序教学课型上机教具器材计算机教师后记本次上机，大部分同学都能独立制作完成这一简单的网页，但存在不够细致的问题。1.2 创建本地站点我的足球网1.2.1 案例综述效果图：我的足球网通常创建一个网站，总是先在本地计算机上进行开发和调试，待完成后再上传到Internet服务器上。因此，创建网站的第一步，就是首先创建一个本地站点，用以进行网站的开发和管理。 1.2.2 案例分析创建一个网站应遵循的流程为： 1.对站点进行规划2.素材准备3.管理站点。（首先要创建一个站点）4.制作Web页面。7.设置Web应用程序运行环境。8.创建动态页。9. 测试站点。10. 上传站点到远程服务器1.2.3 实现步骤1规划站点2新建站点3在文件面板中管理文件4编辑首页文件1.2 创建本地站点我的足球网规划站点：在F盘新建文件夹“myfootball”，作为整个站点内容的文件夹，也是网站的根目录。网站名的“我的足球网”，分3个栏目：“我与足球”、“足球新闻”、“足球明星”，这3个栏目内容分别存放在网站根目录下的“aboutme”、“news”、“photo”文件夹里。网站所有素材图像存放于根目录下的文件夹“image”中。1.3 创建网站1.3 创建网站1.3 创建网站1.3.3 管理站点在“文件”面板中实现以下操作选择多个文件剪切、粘帖、复制、删除、重命名文件或文件夹创建文件或文件夹1.3.3 管理站点文件面板（扩展）的使用 1.3 创建网站1.3.4 网页文件的基本操作创建HTML文档文件新建新建文档常规类别基本页在文件面板中右击新建文件双击打开已建的HTML文档文件打开在文件面板中双击该文档保存指定文件文件保存（或Ctrl+S)文件另存为文件保存全部关闭文件文件关闭教 案 首 页编号 3 课题网页的编辑首次授课日期2011 年 3月 2日第二周 星期三第一、二节课时2编写日期2011年2月 29日首次授课班级计算机38班教学目标知识目标：了解建站的制作流程掌握制作过程中的一些建站经验和建站技巧能力目标：初识Dreamweaver CS3本课重点制作简单网页我与足球本课难点对建站过程的理解教学课型多媒体教具器材计算机教师后记随着网页制作知识的延伸，有部分同学的学习热情开始散失，这一点值得注意。2.1图文混排我与足球2.1.1 实例综述通过本例我们可以掌握网页制作时的一些基本步骤和相关的属性设置，学会在网页中加入最基本的元素文字和图像。 2.1.2 案例分析在制作网页，大致需要以下几下环节：新建或打开网页设置页面属性设置头部信息规划页面布局添加页面元素制作超链接保存网页2.1图文混排我与足球2.1.3 实现步骤1、新建或打开网页2、设置页面属性3、设置头部信息插入作者信息插入“关键字”插入“说明”插入“刷新”4、规划页面布局5、添加页面元素（1）插入文本（2）插入图像（3）图像文字的混排 （4）图像的编辑 6、设置超链接7、保存网页2.2网页文本的输入和属性设置2.2.1 文本输入1.输入文本文件导入复制粘贴直接输入2.输入网页中的空格汉字输入状态下输入属性面板格式预先格式化的Shift+Ctrl+空格编辑首选参数常规允许多个连续的空格3.文本换行Enter分段（隔一行）Shift+Enter换行（不分段）2.2网页文本的输入和属性设置2.2.2 文本的格式设置Dreamweaver 文字格式化主要有三种方式：手工格式化方式用HTML标记格式化方式 CSS样式 (第9章再讲教 案 首 页编号 4 课题网页文本的编辑首次授课日期2011 年 3月 2日第二周 星期三第三、四节课时2编写日期2011年2月 29日首次授课班级计算机38班教学目标知识目标：了解文本编辑以及图片属性编辑能力目标：能熟练编辑网页文本本课重点文本编辑和图片编辑本课难点对属性设置的理解教学课型上机教具器材计算机教师后记本次上机有部分学生在上课期间玩游戏，已对他们做好思想工作，并责令改正，欣慰的是，大部分同学对本软件任然抱有很大的学习兴趣。2.2网页文本的输入和属性设置2.2.2 文本的格式设置1.手工格式化方式 属性面板中的字体、样式、大小、颜色等2.用HTML标记格式化方式属性面板中的格式2.3网页图片的插入与属性设置2.3.1 网页图像格式网络上支持的图像格式有3种： GIF, JPEG和PNG GIF对色彩要求不高的地方可使用JPEG用于色彩丰富的图片PNG保留所有原始层、矢量、颜色和效果信息。2.3网页图片的插入与属性设置2.3.2 插入图像插入图像插入面板常用图像直接将图像文件拖入编辑区注意：在插入图像前应先将网页文件已保存，从而使所插图像引用正确。图像插入网页后，应确定图像文件已存入站点，否则在下次打开网页时，会出现看不到图像的情况。2.3.3 设置图像的属性图像设置的名称宽、高可缩小和放大图片的显示尺寸。源文件图片的路径和名称。链接图像超链接的URL地址。替代图像的说明文字2.3.3 设置图像的属性编辑可打开外部编辑器进行图片的编辑。（默认为Fireworks）垂直边距和水平边距图片四周突出的尺寸低品质源原图的低品质替换图形边框图片是否要加边框对齐在一行中图形和文本的对齐方式地图创建热区的工具教 案 首 页编号 5 课题编织网页的链接首次授课日期2011 年 3月 9日第三周 星期三第一、二节课时2编写日期2011年2月 29日首次授课班级计算机38班教学目标知识目标：了解文本编辑以及图片属性编辑能力目标：能熟练编辑网页文本本课重点文本编辑和图片编辑本课难点对属性设置的理解教学课型多媒体教具器材计算机教师后记部分同学对网页链接的类型理解不到位。3.1 编织网站链接足球新闻3.1.1 案例综述3.1.2 案例分析本例以编织网站中的各种超链接为主要目的，介绍创建超链接种种方法和技巧 为实现网页的跳转，将创建：到网站内页面的超链接内部链接；到网站外页面的超链接外部链接；电子邮件形式的超链接E-mail链接；到网页某一特定位置的超链接锚点链接；以及其他一些链接。 3.1.3 实现步骤一、准备网页内容 步骤1选中站点；步骤2将素材文件夹中的相关文档复制到站点文件夹下。二、创建超链接1、创建内部链接网站内部页面之间创建相互链接关系步骤1选中页面中的文字或图像，在属性面板中单击“链接”文本框右侧的文件夹图标，以通过浏览选择一个文件步骤2从“目标”下拉菜单中，选择文档的打开位置。_blank :新打开的空窗口_parent：如果是嵌套的框架，则在父框架中打开。_self：会在当前网页所在的窗口或框架中打开。_top：会在完整的浏览器窗口中打开。2、创建外部链接创建链接到绝对地址的外部链接选中文字或图像之后，直接在属性面板的“链接”文本框中输入外部的链接地址，如然后在“目标”下拉菜单中设置这个链接的目标窗口。3、创建Email链接当浏览者单击电子邮件链接时，可即时打开浏览器默认的电子邮件程序处理程序。方法：选中文本和图像插入栏常用电子邮件链接输入邮件地址或在属性面板的链接栏中直接输入4、锚点链接是指同一个页面中的不同位置链接。分为两步：创建命名锚记，就是在文档中设置位置标记，并给该位置一个名称，以便引用。创建到命名锚记的链接创建命名锚记将光标定位在要设置标记的位置，插入栏命名锚记输入锚记名称（注意：区分大小写）创建到命名锚记的链接选择要创建链接的文本或图像在属性面板的链接文本框中，键入号和锚记名称或在浏览对话框中，选中要链接的文件后加和锚记名称。5、创建其他类型的链接（1）创建下载链接当被链接的文件是exe文件或zip文件等浏览器不支持的类型时，这些文件会被下载，这就是网上下载的方法。链接到下载文件的方法，和链接到网页的方法完全一样。（2）、创建空链接空链接用来激活页面中的对象或文本。当文本或对象被激活后，可以为之添加行为。方法：选中要制作空链接的对象，在链接文本框中直接输入。在一般站点首页的导航栏中的首页链接，就可以是一个空链接6、创建跳转菜单跳转菜单是文档中的弹出式菜单，可以创建到可在浏览器中打开的任何文件类型的链接。方法：插入栏表单跳转菜单在“插入跳转菜单”对话框中，单击号添加菜单项在“选择时。转到URL”文本框中，输入该文件的路径。7、创建图像地图图像地图指已被分为多个区域（热点）的图像。当用户单击某个热点时，会发生某种操作。方法：选中图像在图像属性面板中，使用热区工具（矩形、椭圆、多边形），在图像上划分热区。为绘制的每一个热区设置不同的链接地址和替代文字。3.2.1 超链接的类型 内部链接这种链接的目标端点是本站中的其他文档。利用这种链接，可以跳转到本站点其他的页面上。外部链接这种链接的目标端点是本站点之外的站点或文档。利用这种链接，可以跳转到其他的网站上。教 案 首 页编号 6 课题超链接的类型首次授课日期2011 年 3月 9日第三周 星期三第三、四节课时2编写日期2011年2月 29日首次授课班级计算机38班教学目标知识目标：了解超链接的类型能力目标：掌握不同链接类型的链接方法本课重点超链接的类型本课难点在站点地图中管理链接教学课型上机教具器材计算机教师后记本次上机题目由于较为简单，都能独立制作完成。3.2 超链接概述 3.2.1 超链接的类型 Email链接单击这种链接，可以启动电子邮件程序书写邮件，并发送到指定的地址。锚点链接这种链接的目标端点是文档中的命名锚记，利用这种链接，可以跳转到当前文档中的某一指定位置上，也可以跳转到其他文档中的某一指定位置上。 3.2.2 链接路径（1）绝对路径：如果在链接中使用完整的URL地址，这种链接路径就称作绝对路径。路径同链接的源端点无关。 （2）相对路径：相对路径可以表述源端点同目标端点之间的相互位置，它同源端点的位置密切相关。 （3）基于目录的路径：所有的路径都是从站点的根目录开始的，它同源端点的位置无关。通常用一个斜线“/”表示根目录。3.2.3创建超链接 在文档窗口中选中想作为链接的文本或图片在属性面板链接一项的空白处填入链接的路径，或者单击浏览按钮，在弹出的【选择文件】对话框中，选定要链接的文档及采用哪种方式表达路径。链接的对象可以是多样的，如图片文件，电子表格，或者某个网站。 3.2.4 插入导航条导航条中按钮图像的状态根据浏览者的鼠标动作而改变。 1、将光标放到要插入导航条的位置；2、选择插入|图像对象|导航条命令 ；3、或选择插入|常用|图像|导航条命令。3.3 管理超链接 3.3.1 自动更新链接 在首选参数对话框中设置自动更新选择编辑|首选参数命令，打开首选参数对话框，在移动文件时更新链接选项的下拉列表中进行选择。总是每当移动或重命名选定文档时，Dreamweaver将自动更新该文档的所有链接。提示将显示一个提示对话框，列出更改影响到的所有文件，以进行进一步选择，系统默认的选项是提示。.3.1 自动更新链接 在“站点定义”对话框中设置缓存Dreamweaver创建缓存文件，主要用以存储有关本地文件夹中所有链接的信息，可以加快更新过程。选择站点|管理站点命令，出现编辑站点对话框。选择一个站点，然后单击编辑按钮，出现站点定义对话框。高级|本地信息。在本地信息选项组中，选择启用缓存复选框。 注意：启动Dreamweaver之后，第一次更改或删除指向本地文件夹中文件的链接时，Dreamweaver会提示载入缓存。3.3.2 在站点地图中管理更改链接在站点地图窗口中，选择要更改的链接。在文件面板的主菜单栏选择站点|改变链接命令，或单击鼠标右键，从快捷菜单中选择改变链接命令。 在出现的选择HTML文件窗口中，通过找到希望链接指向的文件，或者输入URL。 删除链接 在站点地图窗口中，选择站点|删除链接命令，或从右键快捷菜单中选择删除链接命令。 删除链接不会删除该文件，但会从指向该链接的页面上的HTML源代码中删除该链接。 3.3.2 在站点地图中管理打开链接源 在站点地图中选择一个文件。 选择站点|打开链接源命令，或从右键快捷菜单中选择打开链接源命令。 在文档窗口中打开属性面板和含有此链接的源文件，同时该链接以高亮显示。 3.3.3 在整个站点范围内更改链接 在文件面板中选择一个文件，如果更改电子邮件链接、FTP链接、空链接则不需要选择文件。 选择站点|改变站点范围内链接命令，出现更改整个站点链接对话框，在更改所有的链接文本框旁，单击文件夹图标，选择要更改其链接的文件；在变成新链接文本框旁，单击文件夹图标，选择要链接到的新文件。 单击确定按钮，会出现更新文件对话框，其中列出了需要更新的链接文件，单击更新按钮。教 案 首 页编号 7 课题创建网站相册初识表格首次授课日期2011 年 3月 16日第三周 星期三第一、二节课时2编写日期2011年3月 15日首次授课班级计算机38班教学目标知识目标：通过案例了解创建相册的快捷方法能力目标：能初步了解表格本课重点创建网站相册本课难点表格相册的美化教学课型多媒体教具器材计算机教师后记上课时，有部分同学在讲小话，已告知班主任。4.1 创建网站相册初识表格 4.1.1 案例综述使用Dreamweaver 中提供的【创建网站相册】命令，自动生成足球明星页photo.htm。从中使读者初步认识表格的基本操作方法及其作用。 4.1 创建网站相册初识表格 4.1.2 案例分析使用【创建网站相册】命令创建的Photo.htm页是采用表格布局，将图片的缩略图排列在网页中的。表格的修改和美化表格的插入添加或删除行列拆分合并单元格等基本操作 4.1 创建网站相册初识表格 4.1.3 实现步骤一、创建网站像册 方法：1、将需制作相册的图片放在源图像文件夹中，同时建立一个空目标文件夹，用来存放系统生成的图片和文件。 2、执行 “命令|创建网站相册”命令 3、在【创建网站相册】对话框中输入相应的参数，即可。 4.1 创建网站相册初识表格 4.1.3 实现步骤二、网站相册的修改 方法： 选择“页面属性”，可以进行文字、背景、颜色，以及表格的一些修改。三、相册表格的美化 选择“命令|格式化表格”命令。 教 案 首 页编号 8 课题表格的基本操作首次授课日期2011 年 3月 16日第三周 星期三第三、四节课时2编写日期2011年3月 15日首次授课班级计算机38班教学目标知识目标：了解表格的基本操作能力目标：初步掌握表格的各项操作本课重点表格的基本操作本课难点表格与单元格的区别对填充的理解教学课型上机教具器材计算机教师后记部分同学对表格与单元格的区别任然存在误区，这问题下周将继续讲解。4.2表格的基本操作4.2.1 插入表格【插入】【表格】命令，或单击【插入】栏中的【常用】类型中的【插入表格】按钮 理解表格、单元格：理解表格边框、单元格边框、间距：理解填充：单元格边框和内容之间的距离就是填充。4.2.2选定表格和单元格 表格包括行、列、单元格3个组成部分 。1、选定整个表格 2、选定行或列 3、选定单元格 方法一：单击标签选择器中的相应标签方法二：使用菜单命令方法三：用鼠标或键盘4.2.3 调整表格的大小 1、选定表格鼠标拖动 。2、调整行和列的宽度 鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。在属性面板中可以设置所选列的宽和高。 为列设置宽度和高度4.2.4 设置表格和单元格的属性设置表格属性 设置单元格属性 4.2.5 添加/删除行列 通过表格【属性】面板增加与删除表格的行和列 通过【修改】菜单完成增加与删除表格的行和列 4.2.6单元格的合并和拆分1、合并单元格按Ctrl，点单元格，选中表格，在属性面板中点“合并所选单元格，使用跨度”。 2、拆分单元格在单元格中单击，选中单元格。点击属性面板中的“拆分单元格为行或列”，设置拆分方式。 拆分后的效果4.2.7单元格的复制、粘贴、移动和清除 在网页编辑窗口中选中要复制的对象复制按Ctrl+C，或【编辑】【复制】命令。移动按Ctrl+X，或【编辑】【剪切】命令。粘贴按Ctrl+V，或【编辑】【粘贴】命令。拖动按住Ctrl拖，则完成复制操作。直接拖曳可完成对象的操作。清除按Delete，或【编辑】【清除】命令。 4.2.8 表格的嵌套嵌套表是在表格中的一个表格。在一个单元格中，插入一个表格，就是嵌套表。将光标插入当前表格的某个单元格中，然后可选择【插入】【表格】命令，或单击【插入】栏的【常用】类型中的【插入表格】按钮 教 案 首 页编号 9 课题网页布局的基本概念首次授课日期2011 年 3月 23日第三周 星期三第一、二节课时2编写日期2011年3月 20日首次授课班级计算机38班教学目标知识目标：了解网页布局类型及尺寸及布局的相关概念能力目标：熟练使用各种网页布局类型本课重点网页布局的基本概念本课难点网页布局的分类以及网页尺寸的使用教学课型多媒体教具器材计算机教师后记今天上课应到28人，实到20人，还有8人没有上课，已把名单交给班主任处理。4.3网页布局的基本概念 4.3.1 网页布局类型 国”字型 拐角型 标题正文型 左右框架型 上下框架型综合框架型 封面型 Flash型 变化型 4.3网页布局的基本概念4.3.2 页面构成 1. 页面尺寸：分辨率为800600：页面的显示尺寸为：780428个象素；分辨率为640480：页面的显示尺寸为:620311个象素；分辨率为1024768：页面的显示尺寸为：1007600。 4.3网页布局的基本概念4.3.2 页面构成 2. 页头页头又可称之为页眉，页眉的作用是定义页面的主题。页头常放置站点名字的图片（Logo）和公司标志以及旗帜广告（Banner）。4.3网页布局的基本概念4.3.2 页面构成 3. 页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方，称为版权信息。4. 导航栏导航栏能让人们在浏览时方便地到达不同的页面，是网页素非常重要的部分，所以导航栏一定要清晰、醒目，一般讲，导航栏要在第一屏能显示出来。4.2 网页布局的基本概念表格布局要领在IE中只有当完全下载一个表格的内容后，才能显示出来。如果页面文件小，可以只有一个表格放内容。如果页面文件很大，则从上到下放几个宽度相同的表格，分别放不同的内容.4.4应用表格布局页面布局案例4.4.1 案例综述本例使用表格进行页面布局，从中使读者掌握以下知识要点 4.4应用表格布局页面布局案例 页眉区导航栏区左信息区中信息区右信息区版权区信息区为三个嵌套的表格其他区均为宽度一致的独立表格4.4应用表格布局页面布局案例4.4.3 实现步骤一、设计页眉区T1：33表宽778页面属性：左、上边距均为0可插入固定大小占位符，以方便排版。加入收藏联系我们设为首页网页广告图像网站Logo图标1677149971默认4.4应用表格布局页面布局案例 二、 设计导航栏区T 2：217表宽778栏目间的分隔符用，也可用其他特殊符号。第二行用于间隔。4.4应用表格布局页面布局案例三、设计信息区T3：13表宽7781.设置左右内容区T31：21表，宽100%，表格边框为1，白色。第1格高15，第2格高163，单元格边框为1，绿色。第1格：背景图像，输入栏目名第2格：输入栏目的具体内容复制T31表至左、右内容区。1814111564.4应用表格布局页面布局案例三、设计信息区2.设计主内容区T32：23表，宽100%，边框为0，边距为0，间距为0第一行：设置各单元格背景图像，输入栏目名称第二行：合并第二行T321：在第二行插入11表，宽100%，边框为1，白色，单元格边框为1，绿色。拆分T321为2列，第一列输入具体内容，第二列设置132145的图像占位符。复制和T32表，更名，并添加内容4.4应用表格布局页面布局案例四、设计版权区T4：21表，宽778，边框为0，边距为0，间距为0第一行：插入水平线第二行：输入相关版本信息 版权所有：Copyright ? 2003-2005 All rights reserved网页制作：青岛大学软件学院E-mail:邮编：266061建议使用800600分辨率4.3 使用表格的其他视图Dreamweaver CS3提供了标准视图、扩展视图、布局视图3种视图模式。通常使用的是标准视图，可通过插入栏的“布局”类别，切换到布局视图或扩展视图。 4.5使用表格的其他视图 4.5.1 扩展视图 扩展视图的主要作用是临时向文档中的所有表格添加单元格的边距和间距，并且增加表格的边框，这样可以使编辑操作更加容易 。 “插入”面板|“布局”类型中，可看到“标准”、“扩展”视图按钮， 单击可切换教 案 首 页编号 10 课题使用表格的其他视图首次授课日期2011 年 3月 23日第三周 星期三第三、四节课时2编写日期2011年3月 20日首次授课班级计算机38班教学目标知识目标：了解表格的其他视图能力目标：使用表格视图理解网页制作流程本课重点表格的其他视图本课难点设置布局表格和单元格的属性教学课型上机教具器材计算机教师后记本次上机效果较好。4.5使用表格的其他视图 4.5.2 布局视图 在“布局视图”方式下利用表格进行网页排版设计更为直观方便。通过鼠标自由拖拽就可绘制任意的表格布局，且可自由移动。 “查看”|“表格模式”|“布局模式”命令，可切换为布局视图。 4.5使用表格的其他视图 4.5.3 创建布局表格和布局单元格 在“布局视图”模式下，需要先绘制表格，后绘制单元格。 1、绘制布局表格 2、绘制布局单元格 3、移动布局表格和布局单元格 4.5使用表格的其他视图1、绘制布局表格步骤： 在“布局视图”模式下，单击“绘制布局表格”图标，光标变为十字形状，开始绘制布局表格。 移动光标到想要绘制单元格的任意位置，拖动鼠标，就完成了布局表格的绘制。此时表格的标志名称“布局表格”及其尺寸在表格顶部区域显示出来。4.5使用表格的其他视图1、绘制布局单元格布局单元格不能存在于布局表格之外。当不在布局表格中绘制布局单元格时，会自动创建一个布局表格以容纳该单元格。步骤：插入栏“布局”“绘制布局单元格” ，拖动鼠标指针以绘制布局单元格。Ctrl“绘制布局单元格（或表格）”连续创建布局单元格（或表格）。4.5使用表格的其他视图3、移动布局单元格和表格5 选择布局表格和布局单元格后，用鼠标将其拖曳到新的位置，也可以使用方向键移动。 4.5使用表格的其他视图 4.5.4设置布局表格和单元格属性 1、设置布局表格属性 2、设置布局单元格的属性 教 案 首 页编号 11 课题AP元素的创建与编辑首次授课日期2011 年 3月 30日第六周 星期三第一、二节课时2编写日期2011年3月 25日首次授课班级计算机38班教学目标知识目标：掌握AP元素的创建与编辑能力目标：使用AP元素制作复杂网页本课重点AP元素的创建与编辑本课难点AP元素的顺序调整AP元素面板的使用教学课型多媒体教具器材计算机教师后记由于机房安装的本版较低，这里所称的AP元素其实就是机房软件里面的层，这点已重点讲解区分。5.2 AP元素的创建与编辑5.2.1 创建AP元素方法： 1、插入法 插入布局对象AP元素 2、拖放法 拖AP元素图标到编辑区 3、绘制法 单击AP元素图标后，到编辑区拖动鼠标绘制。5.2.2 创建多个AP元素及AP元素的嵌套方法： 1、连续创建多个AP元素“插入”面板|“布局” |“绘制apDiv”按钮，按下Shift键，在文档窗口中可以连续绘制多个AP元素。 2、创建嵌套的AP元素在AP元素中再插入AP元素称为AP元素的嵌套,嵌套AP元素可称为子AP元素，包含嵌套AP元素的那个AP元素称为父AP元素。将光标插入到已建好的AP元素中，然后前面所说的插入法或拖入法继续插入新一个AP元素，即可在已建的AP元素中插入一个嵌套AP元素。 5.2.3 激活和选中AP元素方法：1. 单击AP元素的激活标志，或AP元素内任何地方2. 将光标置于该AP元素内，然后单击标签。3. 单击AP元素边界。4. 在AP元素面板中单击AP元素。（shift可选择多个AP元素）。5.2.4 设置AP元素的属性5.2.5 AP元素的编辑 1 调整AP元素的大小2. 移动AP元素3. 对齐AP元素4. 删除AP元素5.2 AP元素的创建与编辑5.2.1 创建AP元素方法：1、插入法插入布局对象AP元素2、拖放法拖AP元素图标到编辑区3、绘制法单击AP元素图标后，到编辑区拖动鼠标绘制。5.2 AP元素的创建与编辑5.2.2 创建多个AP元素及AP元素的嵌套 方法：1、连续创建多个AP元素、插入面板|布局 |绘制apDiv按钮，按下Shift键，在文档窗口中可以连续绘制多个AP元素。2、创建嵌套的AP元素在AP元素中再插入AP元素称为AP元素的嵌套,嵌套AP元素可称为子AP元素，包含嵌套AP元素的那个AP元素称为父AP元素。将光标插入到已建好的AP元素中，然后前面所说的插入法或拖入法继续插入新一个AP元素，即可在已建的AP元素中插入一个嵌套AP元素。 5.2 AP元素的创建与编辑5.2.3 激活和选中AP元素方法：单击AP元素的激活标志，或AP元素内任何地方将光标置于该AP元素内，然后单击标签。单击AP元素边界。在AP元素面板中单击AP元素。（shift可选择多个AP元素）。5.2 AP元素的创建与编辑5.2.4 设置AP元素的属性AP元素编号：AP元素的名称。左和上：距页面或父AP元素的左上角相对位置宽和高：AP元素的宽度和高度。Z轴：AP元素的重叠顺序。可见性：AP元素的初始显示状况（可见或隐藏）背景图像、背景颜色：溢出：确定当AP元素中内容超出设定大小时要采取的行动。剪辑：定义AP元素的可见区域，并用于将该范围外的内容裁剪掉。5.2 AP元素的创建与编辑5.2.5AP元素的编辑调整AP元素的大小移动AP元素对齐AP元素删除AP元素】5.2 AP元素的创建与编辑5.2.5AP元素的编辑1、调整AP元素的大小 方法：选中需要调整的AP元素，用鼠标拖曳AP元素的边框四周某个活动块。选中需要调整的AP元素，在AP元素的【属性】面板的【宽】和【高】文本框中，输入AP元素的宽度和高度尺寸，可精确调整该AP元素的尺寸。 5.2 AP元素的创建与编辑5.2.5AP元素的编辑2、移动AP元素 前提：“防止重叠”未被勾选。方法：鼠标:选定AP元素，出现AP元素激活标志，用鼠标左键拖该标志。键盘:选定AP元素，用键盘方向键移动AP元素。5.2 AP元素的创建与编辑5.2.5AP元素的编辑3、 对齐AP元素选定多个AP元素，对齐的标准是最后一个选择的AP元素，该AP元素控制点的实心点，而其他为空心点。 修改对齐对齐下缘。5.2 AP元素的创建与编辑5.2.5AP元素的编辑4 删除AP元素方法：当选中一个AP元素后，按Delete键或单击【剪切】按钮，可删除该AP元素。也可在AP元素面板中删除该AP元素 5.3 AP元素面板的使用打开AP元素面板:选择【窗口】【其他】【AP元素】命令，或按F2键，可打开【AP元素】面板 。5.3 AP元素面板的使用选定某个AP元素:在“AP元素”面板列表中单击AP元素 更改AP元素名 双击AP元素名称，输入新的AP元素名称。显示、隐藏AP元素 单击“AP元素”面板左边的显示与隐藏列，可显示或隐藏该AP元素。 5.3 AP元素面板的使用改变AP元素的叠放次序 在AP元素面板修改Z值或用鼠标拖曳AP元素，也可以调整该AP元素的叠放次序。创建和取消嵌套AP元素 按住Ctrl键，将子AP元素拖曳到父AP元素上，当父AP元素上出现黑框时松开鼠标，便可创建一个嵌套AP元素 ;用鼠标将子AP元素拖离父AP元素，便可取消嵌套AP元素。 禁止AP元素重叠 选中“AP元素”面板中的“防止重叠”复选框，表示对AP元素操作时禁止各AP元素重叠。 5.4 AP元素与表格互换5.4.1 表格转换为AP元素表格布局，调整起来比较麻烦。而把表格布局转换为AP元素布局，通过移动AP元素来调整布局，既方便又快捷。5.4 AP元素与表格互换5.4.1 表格转换为AP元素方法:5.4 AP元素与表格互换5.4.2 将AP元素转换为表格问题：不是所有的浏览器都支持AP元素。解决方法：使用AP元素创建网页布局，然后将AP元素转换为表格。5.4 AP元素与表格互换5.4.2 将AP元素转换为表格操作步骤如下:教 案 首 页编号 12 课题AP元素案例制作首次授课日期2011 年 3月 30日第六周 星期三第三、四节课时2编写日期2011年3月 25日首次授课班级计算机38班教学目标知识目标：初步了解AP元素能力目标：使用AP元素制作环游世界本课重点初步了解AP元素本课难点制作小鸟飞翔动画教学课型上机教具器材计算机教师后记由于机房维修，有部分同学没有电脑上机操作，希望学校能加强机房硬件改造。5.1.1 实例综述通过本例的学习，读者可充分体会使用AP元素布局页面的随意性，以及通过时间轴制作动画的技巧。5.1 应用AP元素布局页面“环游世界” 5.1.2 实例分析本例中不论文字还是图片都是采用AP元素来进行定位的，这里将逐步介绍：如何在页面插入AP元素如何通过控制AP元素的Z轴参数来设置AP元素之间的重叠关系如何精确定位AP元素等操作方法。5.1 应用AP元素布局页面“环游世界” 5.1.3实现步骤1、制作基本页面2、用时间轴控制图片替换3、制作小鸟飞翔动画4、制作滚动字幕5.1 应用AP元素布局页面“环游世界” 5.1.3实现步骤1、制作基本页面精确定位AP元素插入AP元素在AP元素中添加内容控制AP元素的大小AP元素的叠放次序2、用时间轴控制图片替换打开时间轴面板在时间轴上增加关键帧在各关键帧处设置不同图片创建放置图片的AP元素3、制作小鸟飞翔动画将Ap元素中的图片拖入时间轴 打开时间轴面板在时间轴上右击“记录AP元素的路径”拖动AP元素录制路径创建放置图片的AP元素4、制作滚动字幕教 案 首 页编号 13 课题框架的基本操作首次授课日期2011 年 4月 6日第七周 星期三第三、四节课时2编写日期2011年3月 28日首次授课班级计算机38班教学目标知识目标：框架的基本操作能力目标：能使用框架制作简单网页本课重点初步了解框架的基本操作本课难点框架与框架集的区别教学课型多媒体教具器材计算机教师后记本次上课效果较好。6.2 框架的基本操作6.2.1 创建框架和框架集 选择预定义的框架集(2).创建新的空预定义框架集文件|新建“新建文档”对话框|框架集选择一个所需框架集6.2 框架的基本操作6.2.1 创建框架和框架集设计自定义的框架集(1).创建框架集新建一个空白HTML文档修改|框架集|拆分左(右、上、下)框架在光标停留在某个框架中，可继续拆分注：利用“查看|可视化助理|框架边框”使边框可6.2 框架的基本操作6.2.1 创建框架和框架集设计自定义的框架集(2).删除框架集选择要删除框架的边框将边框拖到上一级框架的边框上(3).调整框架大小拖动边框6.2 框架的基本操作6.2.2 选择框架和框架集选择框架在“文档”窗口中：按Alt+单击框架内部在“框架”面板中：单击某个框架区域选择框架集在“文档”窗口中：单击内部框架边框在“框架”面板中：单击某一内部框架边框6.2 框架的基本操作6.2.3 框架和框架集属性设置设置框架的属性 框架名称：是链接的Target属性或脚本在引用该框架时所用的名称。源文件：指定在框架中显示的源文件滚动：指定在框架中是否显示