网页设计与制作 教案（第12周）

课程名称：网页设计与制作主备人：审核人：第20页网页设计与制作教案（第12周）专业课程学习任务项目8：掌握运用插入及创建链接任务1掌握网页中插入图像任务2掌握Dreamweaver中图片编辑任务3掌握插入鼠标经过图像任务4掌握插入声音及多媒体任务5了解超链接概念任务6掌握各种链接方式课时6教学对象授课时间设计者一、学习任务分析1．了解在网页中插入元素和创建超级链接。2．教材中的知识与案例均是从实际工作中精选而来，具有很强的应用性和示范作用。同时教材结构清晰、内容翔实、语言浅显易懂，并配以精美的素材图片。二、学情分析对于刚刚接触网页设计的学生，思想活跃，有探索新知识的强烈心理，专业课的学习，除需要一定专业基础外，还需要学生具有很强的技能操作能力，所以在本次课的讲授中，采用演示、引导、任务练习的方法，让学生了解所学的内容。三、学习目标知识目标：掌握在网页中插入图像的方法。掌握以背景的方式插入图像。掌握如何在Dreamweaver中编辑图像。掌握鼠标经过图像的方法。掌握插入声音及视频。掌握插入超级链接。掌握检查链接的方法。能力目标：学会插入图像。学会以背景的方式插入图像。学会编辑图像。学会插入超级链接学会创建文件下载链接素质目标：要学会将各个元素在网页的整体中进行运用，要知道螺丝虽小可定万斤的道理。不要只会学不会用，要做到实践与知识共同进步。对自己要有信心，信心是万事开头的基石，要做到有信心、有能力的全新工作者。四、教学策略重点难点：重点：插入元素的方法；难点：掌握创建超链接的应用。教学方法：演示案例教学法。教学模式：分组讨论，集中点评，共同提高。五、教学环境及资源准备教学环境：多媒体实训室课前准备：1.对应本节课制作了相应的备课。2.认真设计教案、课件和教学过程。六、教学过程教学环节教学内容教师活动学生活动设计意图情景描述上课，同学们好！（相互问好！）7S管理组织教学。课前3分钟：不轻易言弃，学习上的困难会成为你进步的阶梯。。有责任、有担当的人生，才是最美丽的。复习提问：一、创建表格还有哪些不了解？7S管理组织教学、统计出勤；课前3分钟教育；进行复习提问，让学生进入思考状态。以小组为团体回答，并加分。使学生注意力集中积极思考，积极回答问题。7S管理形成习惯，巩固知识，增强团队意识。引导问题文本与表格在网页的学习中已经完成了，一个能够吸引人的网页单单靠表格的布局精彩的文字是不能够成为一个合格的网页的，在网页中创建链接、插入图像、插入多媒体，这些能够吸引人的图像和视频能够把当前的网页衬托的更加非富多彩，如何才能在网页中创建链接、插入图像等操作是小艾非常想要知道的，在她对着计算机发呆的时候，凯程来到了她的身边，告诉小艾，超级链接、漂亮的图片才是网页的灵魂，图像有着丰富的色彩和表现形式，恰当地利用图像可以加深用户对网站的印象。这些图像是文本的说明及解释，可以使文本清晰易读、更加具有吸引力，目前的网页也不再是单一的文本，图像、声音和动画等多媒体技术更多地应用到了网页之中。在网络中，超级链接是将所有数据串连起来的基础。借由超级链接，就可随心所欲的畅游网络世界而不受时空的限制，如果把网站比喻为住家，那么超级链接就是四通八达的道路系统，将整个网络世界架构起来。接下来，大家就跟随小艾一同走进Dreamweaver中的插入图像、鼠标经过图像、插入多媒体及其创建超级链接。和小艾一起进行相关内容的学习，在网页设计的道路上展现自己的才华，好了，下面我们就一起来进行学习和进步吧！引出本节重点内容，注意培养学生的观察力和注意力。学生跟随老师的讲解和启发进入内容，积极思考。通过导入问题,让学生分小组思考。相关知识介绍任务1掌握网页中插入图像图像是网页构成中最重要的元素之一，美观的图像会为网站增添生命力，同时也加深用户对网站风格的印象。活动1掌握插入图像在Dreamweaver中创建表格并设置表格的宽度与高度后，将光标放置到其中的一个单元格，执行菜单栏中的“插入/Image”命令，打开“选择图像源文件”对话框，在对话框中找到需要插入的图像，如图所示。设置完毕单击“确定”按钮，会将选择的图像插入到鼠标指针所在的表格中，如图所示。将鼠标指针放置到第2行中，再次选择一个图像将其插入到表格中，如图所示。活动2掌握将图像设置为整个网页的背景背景图像有“单一图像”及“拼贴”二种效果类型，虽然使用“拼贴”方式的图像文档容量小，不过效果却较为单调。若要强调站点的风格，则可以考虑“单一图像”。默认情况下被当成网页背景的图像是以“拼贴”方式显示的，在“属性”面板中单击“页面属性”按钮，打开“页面属性”面板，单击“背景图像”后面的“浏览”按钮，可以选择作为背景的图像，如图所示。设置完成单击“确定”按钮，可以看到当前网页的背景以背景图像进行显示，如图所示。在预设情况下Dreamweaver会将指定的图像文件自动拼贴填满网页画面，不过各位也可以根据页面效果的需要来调整拼贴模式，在“属性”面板中单击“页面属性”按钮，打开“页面属性”面板，在这里可以设置图像显示的不同方式，如图所示。任务2掌握Dreamweaver中图片编辑虽然图片及效果在网站设计初期就已经决定好，不过最后在利用Dreamweaver进行整合时，还是有可能做一些修改或调整，以配合整个网页的风格。要调整或编修图片属性，通常都是通过“属性”面板来处理，以下针对Dreamweaver所提供的各项功能来为各位做个说明。活动1掌握调整图片大小图片加入到Dreamweaver后，如果发现图片尺寸需要缩小，可以透过以下方式做修正。点击插入的图片后，在“属性”面板中改变图片的尺寸来做修正，如图所示。选择插入的图像后，将鼠标放置到图像的右下角控制点上，按下鼠标进行拖曳，此时可以看到图像会跟随拖曳来改变大小，即可选中表格，如图所示。活动2掌握加入方块阴影图片除了可以添加边框以外，各位也可以轻松为图片加入阴影喔！只要在“box-shadow”的属性上设置阴影的垂直/水平偏移值、模糊半径、扩散半径或色彩，如图所示。此时只要就可以透过“实时视图”功能看到效果，如图所示。此阴影不需要再通过绘图软件来处理。活动3掌握设置图片对齐当段落文字及图片并存时，如果希望文字能够沿着图片右侧或左侧依序排列，那么可利用鼠标右键来选择“对齐”的方式，如图为选择“右对齐”；还可以在“CSS设计器”中进行对齐设置，选择图片后，在“属性”中选择“布局”按钮，在下来列表中设置“float”，以此来设置对其方式，如图所示。选择“左对齐”或“右对齐”的方式后，会形成文绕图的编排效果，这是一般网页上常看到的编排方式，效果如图所示。任务3掌握插入鼠标经过图像在浏览器中查看网页时，当鼠标指针经过图像时，该图像就会变成另外一幅图像；当鼠标移开时，该图像又会变回原来的图像。这种效果在Dreamweaver中可以非常方便地做出来。任务4掌握插入声音及多媒体在网页中可以添加各种不同格式的声音文件，但在加入声音文件之前要考虑用途、文件大小、声音品质和浏览器差别等因素，多媒体文件是当前网页中更离不开一项内容。活动1掌握关于音频文件格式音频文件格式常见的特点有：要在计算机内播放或是处理音频文件，也就是要对声音文件进行数、模转换，这个过程同样由采样和量化构成，人耳所能听到的声音，最低的频率是20Hz，最高频率是20KHz，20KHz以上人耳是听不到的，因此音频文件格式的最大带宽是20KHz，故而采样速率需要介于40~50KHz之间，而且对每个样本需要更多的量化比特数。音频数字化的标准是每个样本16位-96dB的信噪比，采用线性脉冲编码调制PCM，每一量化步长都具有相等的长度。在音频文件的制作中，正是采用这一标准。音频格式日新月异，常见的音频格式包括：CD格式、WAVE（*.WAV）、AIFF、AU、MP3、MIDI、WMA、RealAudio、VQF、OggVorbis、AAC、APE。活动2掌握插入HTML5VideoHTML5目前是网页发展的趋势，将HTML5的视频轻松添加到网站上，可让网站具有娱乐效果。目前HTML5支持的格式包括*.ogg、*.mp4、*.m4v、*.webm、*.ogv、*.3gp等格式，打开一个网页后，将鼠标指针放置到中间的一个表格中，设置“水平”为“居中对齐”、“垂直”为“居中”，如图所示。执行菜单栏中“插入/HTML/HTML5Video”命令，页面自动加入此对象，请点选该对象后，在“属性”面板中的“源”后面单击“浏览”按钮，如图所示。单击后，系统会打开“选择视频”对话框，找到一个“.mp4”格式的视频，如图所示。选择视频后单击“确定”按钮，就可以将视频插入到网页中，此时在“属性”面板中设置视频的尺寸、是否自动播放、重复、以及是否显示控件等内容，如图所示。保存文档，按F12键在浏览器中预览，效果如图所示。任务5了解超链接概念超级链接是从一个网页或文件到另一个网页或文件的链接，包括图像或多媒体文件，还可以指向电子邮件地址或程序。当网站访问者单击超级链接时，将根据目标的类型执行相应的操作，即在Web浏览器中打开或运行。要正确创建链接，就必须了解链接与被链接文档之间的路径。每个网页都有一个唯一的地址，称为统一资源定位符（URL）。当在网页中创建内部链接时，一般不会指定链接文档的完整URL，而是指定一个相对当前文档或站点根文件夹的相对路径。路径可分为绝对路径和相对路径。一．了解绝对路径绝对路径是包括服务器规范在内的完全路径。不管源文件在什么位置，通过绝对路径都可以非常精确地将目标文档找到，除非它的位置发生变化，否则链接不会失败。采用绝对路径的好处是，它同链接的源端点无关。只要网站的地址不变，则无论文档在站点中如何移动，都可以正常实现跳转而不会发生错误。另外，如果希望链接到其他站点上的文件，就必须使用绝对路径。采用绝对路径的缺点在于，这种方式的链接不利于测试。如果在站点中使用绝对路径，那么要想测试链接是否有效，就必须在Internet服务器端对链接进行测试。了解相对路径相对路径也叫文档相对路径，对于大多数的本地链接来说，是最适用的路径。在当前文档与所链接的文档处于同一文件夹内时，文档相对路径特别有用。文档相对路径还可用来链接到其他文件夹中的文档，方法是利用文件夹的层次结构，指定从当前文档到所链接文档的路径。任务6掌握各种链接方式超级链接功能不只是用来链接网址及页面，它还包括电子邮件、文件下载及锚点链接等其它形式的链接效果。也因此要先了解各种超级链接的功能，才能根据需求选用适合的超级链接。活动1掌握网站内部链接内部链接的作用是链接到网站中的其它页面，让浏览者可以浏览到网站中的其它页面数据。掌握创建文字链接文字超级链接是最基本的链接方式，请先输入如图中的内容。输入链接文字时请在每组文字间加入空白及分隔线，这样不仅看起来美观，同时也可避免点选时的困扰。新建一个网页文档，输入六组链接文字，将第一组文字进行选取，在“属性”栏中“链接”后面的“浏览文件”按钮，如图所示。单击此按钮后，弹出“选择文件”对话框，在对话框中选择文字对应的网页，如图所示。单击“确定”按钮，完成文字的链接创建，效果如图所示。掌握使用“插入”面板中的超级链接功能接下来我们来练习如何透过“插入”面板来插入超级链接，新建空白文档，在“插入”面板中选择“HTML”后，单击“Hyperlink”按钮，如图所示。单击后弹出“Hyperlink”对话框，输入文本后，在“链接”后面设置链接的文件，如图所示。设置完毕单击“确定”按钮，完成文字链接的创建，如图所示。掌握创建超级链接图片当浏览网页时，鼠标经过图像时，会出现一个手形图标，提示浏览者这是带链接的图像。此时单击鼠标，会打开所链接的网页，这就是图像超级链接。运用图片来创建超级链接的做法和文字相同，都是通过“属性”面板来设置，在打开的网页文档中选择一个需要创建连接的图像，之后在“属性”栏中“链接”后面的“浏览文件”按钮，选择一个链接文档即可，如图所示。活动2掌握网站外部链接网站外部链接是指要连到其它网址，目前有很多网站都会互相交换链接，以扩大网站的曝光率。不论是文字或图片，在创建网站外部链接时的做法都一样。这里我们要链接到可进行搜索的百度首页，“/”网站。活动3掌握电子邮件链接电子邮件链接提供了一个方便的通讯管道，除了信件及电话以外，几乎所有的商业网站，都有提供电子邮件的链接，以做为服务的一部份。掌握通过创建文字来设置邮箱打开一个文档，在单元格空白处点击后，执行菜单栏中的“插入/HTML/电子邮件链接”命令，也可以在“插入”面板中直接点击“电子邮件链接”按钮，弹出“电子邮件链接”对话框，设置“文本”和“电子邮件”，如图所示。设置完毕单击“确定”按钮，即可创建邮件的链接，如图所示。掌握通过图片设置邮箱各位也可以在图片上直接创建电子邮件链接，不过链接要在电子邮件地址前面加上“mailto：”而非“http：//”，选择图片后，设置邮箱链接地址，如图8-59所示。在广告邮件非常泛滥的今天，一些没有信件主旨的邮件很容易被认为是广告邮件而删除，为了避免误删的情形发生，各位可以在电子邮件链接中另外加上邮件的「信件主题”，这样在收信时，就会知道这是一封浏览者表达意见的邮件了。请在电子邮件链接的后面加上「?subject=读者意见”文字，而完整的写法为「mailto:caopeiqiangcr@163.com?subject=读者意见”，其中的「读者意见”四个字是本节中的范例，各位可以视需要自行改成其它的文字，如图所示。活动4掌握文件下载链接如果要在网站中提供下载资料，就需要为文件提供下载链接，如果超级链接指向的不是一个网页文件，而是其他文件例如zip、mp3、exe文件等，在网页文档中点击图片或选择文本后，在“属性”栏中“链接”后面的“浏览文件”按钮，如图所示。单击此按钮后，弹出“选择文件”对话框，在对话框中选择需要下载的文件，如图所示。单击“确定”按钮，完成下载链接的创建，储存后按“F12”，在网页中点击就可以完成下载，效果如图所示。活动5掌握图像地图创建热区链接图像地图是一种网页导览结构，它能在单一图像上创建许多的链接区域。因此可以设计一张导览图像，然后利用图像地图的功能，在上面创建多个链接区域，如此即可让页面风格完整呈现，又可同时兼顾导览链接的功能。图像地图的链接区域有“矩形”、“圆形”及“多边形”三个外形可以选用，各位可以从属性面板上做选择。打开一个网页文档选择其中的图像后，在“属性”栏中选择“矩形热点工具”，在图像中的“国际线路”区域创建矩形热点区域，如图所示。之后创建链接的方法与文字和图像一样，这里我们直接在“链接”文本框中输入“#”，将其作为空链接，选择“圆形热点工具”或“多边形热点工具”，创建热区并设置空链接，如图所示。课件设疑，引起注意，牢牢抓住和吸引学生探究新知识的心理。讲练结合，突出实操能力培养。跟随老师进入思考分析状态。认真完成操作任务。通过课件引出问题，演