




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、精选范本第1章网页设计基础教学目标与要求熟记站标、导航条、广告条、按钮等网页构成要素,以及网贝、网站、IP地址、域名、网址等概念;了解网贝的本质和网页的布局类型和HTML文档的基本结构,熟练掌握网站建设的基本流程。教学重点重点:站标、导航条、广告条、网贝、网站、IP地址、域名、网址等概念,以及网站建设的流程教学难点难点:IP地址、域名、网址,HTML文档的基本结构及其常见标签教学方法提问、启发、图示、情景教学、案例、课堂讨论教学课时2课时第1章网页设计基础教学提示导入课程:大家会输入文字、制作和处理图像、设计动画,如何把这些作品放到internet中,让更多的人去查阅和欣赏呢?-DW就可以制作
2、网页。1 .网贝的构成要素和组成兀素网页的构成要素:站标、导航条、广告条、标题栏和按钮;网贝的组成兀素:文字、图片、动回(gif、flash)、表单(交互功能)、音频、视频、超链接、表格、框架、导航等。2 .网页相关知识简介基本概念:网页的本质网贝、网站、主页、互联网以提问的方式引入课程采用课堂讨论教学法,打开几个典型的网贝让同学们讨论总结构成要素和组成元素。打心个搜狐主页,保存成不同的类型,让大家看保存的效果,加深对网页本质的理解;先打心个网页的源文件,结合网络常识,详细讲解网页的定义,然后略讲网站和主页的概念。并提醒同学理解并记忆这些概念。精选范本动态网页、静态网页IP地址、域名、网址(u
3、rl )、浏览器等概念以注册和登录邮箱为例,对比讲解动态网页和静态网页的特点和区别。以平顶山学院和搜狐网站的IP地址与域名为例,简要讲述这两个概念。通过查看分析知名网站的网址引入url的定义和组成,其它概念略讲。提醒学生理解并记忆上述概念。网页布局网页布局的相关概念常见的布局类型网站管理与网页制作相关软件制作和管理网页工具;制作和优化网页图像工具;制作网页动画工具;其中 Dreamweaver fireworks 、 flash这三个软件合称为网页“三 剑客”。其他小工具软件。HTMLSbHTML勺概念HTM及档的基本结构几个常见的 html标签:html、head、title 、style、
4、script 、link、 meta、body、img、p、font 等。XHTM昭言简介脚本语言简介3 .网页的设计理念和配色方案网页的设计理念色彩的三要素网页中的色彩心理与网页表现打开一网页(详细讲解网页布局效果的教程)让学生讨论、分析总结布局类型。根据学生特点简要讲解ps、flash、fw等软件在网页设计中的功能。打开搜狐主页的源代码,让学生认识一下html语言及其结构,然后分别用记事本和dw创建2个最简单的网页,让学生细看其源代码,并详细讲解8个基本标签及其结构关系,最后根据时间酌情讲解其它几个常见标简要讲解这两个概念,然后创建一个网页,复制无缝循环的代码并粘贴到网页的body标签,让
5、学生了解脚本语言的功能。让学生欣赏插入后的效果,吸引学生dw的相关代码。结合上网的经验,让学生总结网页的设计理念。色彩的三要素和心理表现学生在上学期的ps课程中学习过,采用提问法,进行复习;然后打开几个典型网色彩搭配应遵循的原则4 .网站的开发流程网站需求分析设计制作网站页面空间和域名申请测试和发布网站网站推广站,分析其配色方案,最后总结网页中色彩运用的原则。根据设计的先后顺序和学生一起分析总结网站的开发流程,并用图加以解释,重点讲解网站的需求分析,以加深学生对重点知识的掌握。第一阶段:网站需求分析第三阶段:申请空间和域名第四阶段:测试和发布网站第五阶段:网立腕广5 .典型网站分析页面结构色彩
6、运用采用课堂讨论教学法,打开几个典型的网页让同学们讨论总结网站的构成要素、组成元素、布局结构和配色方木。作业布置:提问1 .察看并对比分析大型网站(如中国网、著名学校网、著名医院网、官方网、科技网、娱乐休闲运动网、儿童网、体育网、著名出版社网、cctv网站、sohu、yahoo、旧M、微软等)的风格、色彩搭配与布局。2 .察看的同时下载自己需要的文章、图片、软件等资源。3 .课后习题。小结:通过提问、启发、图示、情景教学、课堂讨论等教学方法的综合运用,提高了学生的学习兴趣,从学生的反应看,授课效果很好。第2章Dreamweaver基础知识教学目标与要求熟悉Dreamweaver8工作界面,熟记
7、几个常用的工具按钮和菜单命令;熟练掌握站点的创建步骤,能快速规范地创建站点;能够快速创建、打开、保存网页文档;能熟练设置贡面的属性。教学重点1.创建站点并组织站点的结构;2.在站点中创建网页3.页面的属性设置教学难点HTM息础教学方法举例为主,适当讲授操作要领,提问以测试课题效果。教学课时2课时第2章Dreamweaver基础知识教学提示我们一贯都是浏览网页,想自己动手做网站吗?用什么工具做网站?怎样做呢?-Dreamweaver网贝制作工具。2.1 熟悉Dreamweaver8工作界面2.2 网站创建与管理2.2.1 站点的定义、组成和结构2.2.2 网页文档与文件夹命名规则2.2.3 创建
8、本地站点的步骤2.2.4 组织站点结构2.3 网页文档基本操作新建、保存、预览、书开、关闭2.4 基本页向属性设置制定文档标题和边距、网页背景颜色和背景图像,为网页设置文本属性、链接属性和跟踪图像的属性,总结贞陶的使用的技巧:抛出问题,引入新课启动dw,详细讲解插入栏、文档标签与“文档”工具栏、状态栏的作用,区分标签检查器、标签选择器、标记选择符3个概念及其作用详细讲解站点的定义、组成、结构,以及文件和文件夹的命名规则。演示站点的创建过程和步骤,着重提出保存和站点文件夹的命名。详细讲解站点结构的组织方法和原贝U。分别演示这几个操作通过dw设计视图分别创建1个网页,分别演示文档标题和边距、背景颜
9、色和背景图像、文本和链接属性,以及跟踪图像的属性的设置方法和步骤,帮助学生掌握页面的设置过程。并总结页面设置和创建过程中的一些使用技巧。作业:习题一第1,2,3题小结:本次课内容操作性很强,经过学生自己上台操作,发现大多数学生都能创建并组织好一个站点,还能快速地设置网页的属性,达到了教学目标的要求。第3章网页中的基本兀素教学目标与要求1 .熟练操作网贝中的文本;2 .熟练插入各种格式的图像并设置其属性;3 .了解图像切片的作用;4 .熟练制作图像切片,并插入到dw中教学重点1 .文本对象的插入和格式设置;2 .GIF、PN®JPEG£种图像格式的异同点和使用环境;3 .用f
10、ireworks制作网页切片的方法;教学难点1 .设置文本标题;段落的设置效果;2 .GIF、PNGF口JPEG£种图像格式的异同点和使用环境;3 .Dreamweaver8.0中使用图像的一些基本方法和技巧;4 .在dreamweaver中插入用fireworks制作的切片教学方法课堂讲授为辅,多媒体演示为主,适当举例,提问以测试课题效果,实验式教学。教学课时4课时第3章网页中的基本兀素教学提示复习上节内容:如何创建站点?如何站点结构的组织3.1 网贝中文本的操作3.1.1 认识文本按钮及属性面板思考题:根据以前所学知识说出文本的编辑和设置属性各包括几个方面?3.1.2 插入义本和
11、对象将文本(英文、中文、数字)添加到文档中的3种方法。插入特殊字符水平线插入日期:菜单法;插入栏按钮法对插入的文本也可以执行删除、搜索、替换、检查拼写(文本检查拼写/shift+f7)等操作。3.1.3 设置文本格式以提问的方式复习上次课内容结合WORD!过复习的方式,总结dw中文本的操作;先简要演示一下各种文本符号的插入方法,然后输入一首小诗,调整其格式;接着复制一篇文章粘贴到dw中;最后导入一篇word文档;1.2.字符的样式包括的方面及其设置方法3.1.4设置义本标题标题的含义与作用3.1.5设置段落效果1 .设置段落格式2 .缩进段落3 .对齐段洛(4种对齐方式)4 .分段与换行的相关
12、操作和区别:3.36创建项目列表3.2网页图像的运用3.2.1网页中图像格式简介1.图像在网贝中日勺作用和网贝中常用图像格式有:GIF、JPEG、PNG2.三种图像格式的特点和在网页中的使用场合。在We顷上显示图片之前,通常需要考虑下列三个问题:3.2.2在网页中使用图像1.插入图像:2 .插入图像占位符:注意图像占位符的命名规则和作用3 .创建鼠标经过图象(轮换图像)4 .在dw中图像的编辑功能仅适用于GIF和JPEG图像格式。在属性检面板中编辑图像,上述设置也可通过菜单实现:修改一图像用fireworks优化图像。5 .热点工具的使用和图像热区的添加6 .设置图文混排的效果:7 .制作电子
13、相册:命令一一创建网站相册8 .2.3切片在fw中的创建和在dw使用打开大图片网页时,总是等待很长时间,怎样处埋才减少图片的下载时间呢?-做成切片。1 .切片的定义和作用2 .切片在fw中的创建方法和步骤先简要讲述一卜义本格式、标题、段落的设置的含义和步骤,然后让学生走上讲台对上述插入的文本设置相应的字符格式、标题级别、段落效果,并选择个别段落创建项目列表,以加深印象。通过比较法讲解各图像格式的特点举例:在文档中插入各种图像对象,并设置其格式属性。演示制作图像热区和图文混排的效果;演示制作电子相册3.在DM插入FireworksHTML(切片)的方法和步骤将FireworksHTML插入至UD
14、reamweaver中的方法。方法1:将切片从Fireworks复制到剪贴板上,然后直接粘贴到Dreamweaver文档代码视图中的相应位置处。方法2:直接将FireworksHTML插入到Dw中的操作步骤3.3网页多媒体的运用3.3.1 在网页中使用视频flash1 .网页中常见的视频文件格式和插入方法;2 .常见的flash文件格式和插入方法;flash文件(.fla格式)、flash影片文件(.swf格式)、flash模板文件(swt格式)、flash兀素文件(.swc格式)、flash视频文件(.flv格式)3 .3.2在网页中使用音频添加声音需要考虑的因素:添加的的、文件大小、声音品
15、质和在/、同浏览器中的差异。1 .音频文件的格式和相应的特点:网贝中常见的首频格式启:mid/midi格式:。wav和aif(aiff)文件2 .在网贝中插入音频文件的2种方式:链接到音频文件嵌入声首义件3 .4dw扩展插件1 .安装扩展插件2 .使用扩展插件使用扩展插件主要有2个步骤:以问题的形式引入切片的定义和作用。本内容尽量调整在机房讲解。详细讲解并演示切片在fw中制作和在dw中插入的方法与步骤。用比较法总结网页中出现的视频文件的格式及其特点,举例讲解视频文件的插入方法和属性设置;用比较法总结网页中出现的flash文件的格式及其特点,重点讲解flash按钮、flash文本和flash视频
16、的插入方法和属性设置;用比较法总结网页中常见的音频文件格式及其特点。举例演示音频文件的插入和属性设置,重点讲解背景音乐的插入和设置。先安装插件重点讲解页面过度然后启动dreamweaver,在相应的位置找到调用扩展的命效果、sound、令即可。marquee和滚动链3.在“类型”栏中显示扩展的类型含义:接的AP儿素4个插含义件的用法和设置对象在dw界面的“插入”工具栏调用该扩展插件先演示这几个常用命令在dw的“命令”菜单中调用扩展扩展插件的安装和在dw的“行为”面板中调用扩展使用方法,然后让4.常用扩展插件的安装和使用学生上台操作,教Pagetransitions有超级链接时,页过渡(进入/命
17、令要选定整个页面(即body标签),再在命令菜单中找到该命令即可实现(效果见实例站点中guodong1.html、guodong2.html、guodong3.html)师指点操作过程和方法扩展这本分内容安排到行为之后讲解退出)效果Typewriter.mxp先把要添加该效果的对象放入AP元素中,模拟打字行为然后在行为面板中找到yaromat|typewriter即可实现,文子的打印效果就显示在AP元素中。(guodong1.html中打印文字)Sound.mxp对要选定整个页面(即body标签),再在“常插入背景音乐象用”插入栏中找到sound按钮即可实现Marquee.mxp对要选定整个页
18、面(即body标签),再在“常滚动文字插件象用“插入栏中找到marquee按钮即可实现InsertGreeting.mxp插入问候语对象把光标定位在页面的合适位置,然后选择"插入"栏中的"CNInsertGreeting”按钮即可实现Calander.mxp对象把光标定位在页面的合适位置,然后选择“插入”栏中的“calander”按钮即可实现Persistentlayers滚动链接的AF儿系行为先把要添加该效果的对象放入AP兀素中,然后在行为面板中找到ribberszeewolde|Persistentlayers即可实现,Ti用来显示广告信息。(guodong1
19、.html中的”送给你了“)作业:1 .填空题(1)使用属性检查器或【文本】菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体(如粗体或斜体)和。(2)若要插入更多的特殊字符,请选择|或在栏中选择图标,选择一个字符,然后单击【确定】。(3)在计算机领域中,图像分为?口2大类。(4) GIF图像采用的是压缩格式。2 .选择题(1)在网页中连续输入空格的方法是。A.连续按空格键B.按下Ctrl键再连续按空格键C.转换到中文的全角状态下连续按空格键D.按下Shift键再连续按空格键(2)网页通常可以支持的图像格式有oA.GIFB.BMPC.AVID.PSDE.PNGF.JPEG3 .简答题(
20、1)网页中常用的图像格式有哪些?各有什么特点?如果在网页中添加动画格式的浮动广告,采用何种格式?为什么?电子相册,应该用哪种格式最好?(2)如何创建鼠标变换图像和图像热点?4 .操作题:搜集自己的喜爱的图片,制作一个电子相册。小结:本章内容较多,但交简单,需要边讲解边对比总结,通过对比总结和学生上台操作演示,从学生上机的作业来看,授课效果很好。第4章使用表格与布局表格布局网页教学目标与要求1 .了解表格和布局表格在网贝布局中的作用;2 .掌握表格和布局表格的插入方法和基本编辑方法;3 .掌握表格和布局表格、单元格和布局单元格的属性设置;4 .通过对表格和布局表格的学习,提高学生学习网页制作的兴
21、趣,增强学生的审美观教学重点1 .表格的插入方法、基本编辑方法与应用;2 .布局表格和布局单元格的绘制方法、属性设置与应用教学难点1 .表格和单元格的属性设置与应用;2 .布局表格和布局单元格的绘制与属性设置教学方法多媒体演示,案例教学,任务驱动,引导教学;提问式教学。教学课时2学时第4章使用表格与布局表格布局网页教学提示用表格控制文字、图片、动化等对象的位置,使网页的布局紧凑又整齐美观。常用的页面设计布局类型有:表格、布局表格和AP元素三种,本章着重讲解如何使用表格和布局表格布局贞向。4.1 .表格模式1 .dw中表格的3种模式2 .模式切换的操作方式:查看-表格模式一标准模式/布局模式/表
22、格扩展模式。3 .模式的区别与注意事项:只有在“设计”视图中才可切换到“布局”模式;在不同模式下,工具栏的各个按钮作用不同;在布局模式中不能像布局表格的空白区域插入内容,只能创建布局单元格,布局单元格才是承载具体内容的容器。4.2 使用表格布局网页1.表格的作用展示一个布局合理、美观的网页,激起学生的学习兴趣。简要讲解并3种表格模式的作用,重点演示不同模式下按钮的使用回顾word和excel中讲过的有关表格的概念和基本操作,引入dw中表格的概念和基本操作。重2 .表格的组成部分表格的行、歹h单元格、边距、间距、边框3 .表格的标记table标记、tr标记、td标记三者的对应位置关系4 .表格的
23、基本操作表格的插入、选择、删除、大小调整;单元格的选择、合并、拆分、大小调整;表格在“扩展表格”模式和“标准”模式下的应用5 .嵌套表格表格嵌套的作用创建嵌套表格的操作方法。6 .导入和导出表格数据、7 .表格布局网页的应用实例8 .表格布局的缺点9 .3布局表格布局网贝1 .绘制布局表格绘制布局表格的注意事项:2 .绘制布局单元格绘制布局单元格的注意事项:3 .设置布局表格和布局单元格的属性和参数4 .在布局单元格中添加内容5 .课堂实例一一用布局表格布局网站主页点讲解表格的属性设置含义。插入一个表格,并在每个格中插入不同的内容,然后切换到代码视图,让学生识记三个标签。逐一演示表格的各个基本
24、操作。重点讲解创建嵌套表格的原因打开一个示例网页,让学生上讲台比照着制作出相同效果讨论总结表格布局的缺占八、重点演示并总结绘制布局表格和布局单元格的注意事项。演示设置布局表格和单元格的属性;在设置好属性的布局单元格中添加文章、图像和多媒体。先和学生一起分析左侧网页的操作思路和主要步骤,然后让学生上台操作,以加深印象。肝交/MrlV*用下Amm*阳15也里作必WlYBHi片i课堂作Mk:.1.叙述3种模式的概念及切换方法。顼段.说出表格和布局表格的作用jpfrmi:3.叙述“表格扩展模式”的作用:4.什么是间隔图像?书面作业:,课后习题。值3e育|碑件七小结:通过与学生熟悉的word中表格的操作
25、对照讲解,本章的讲解显得较轻松;让学生上台操作,提高了学生的学习积极性和主动性,教学效果较好第5章使用框架布局网页教学目标与要求解框架网页的概念;熟练创建、保存框架网页,并设置框架和框架集的属性;框架中超级链接的创建和目标属性设置教学重点熟练创建保存框架网页,并设置框架和框架集的属性;框架中超级链接的创建和目标属性设置教学难点框架网页的概念和保存;框架中超级链接的创建和目标属性设置教学方法多媒体演示为主,适当举例,人体媒体结合式教学,课堂讲授,师生互动,提问式教学。教学课时2学时第5章框架网页教学提示5.1 框架和框架集的概念、结构和应用1 .基本概念框架网页、框架集、框架框架和框架集的关系2
26、 .框架网页的结构3 .认识框架面板:4 .框架网页的应用:通常用于导航。5 .框架网页的优缺点5.2 创建和保存框架与框架集通过看看和分析知名网站使用框架的布局效果,引入框架和框架集的概念5.2.1使用预设的框架集1.创建新的空预设框架的具体操作步骤。修改框架名称必须以字母开头,可以包含数字、但不允许是javascript中的保留子(如top或符(-)、句点、空格和;而且区分大小写。At-t-tr-、tt,tt>-t.一,、,/.rr»t»t一rr*.、r、r下划线(_);navigator)、连字2.团建块设的惘架果什仕呆一惘架中显小现倡乂档5.2.2创建和编辑框
27、架1 .创建框架2 .删除框架3 .建立嵌套的框架集4 .保存框架和框架集5.3 设置框架及框架集的属性1 .选择框架:通过“框架”面板来选择框架和子框架。2 .设置框架属性框架的背景颜色可以在页面属性中进行设置在框架的属性面板中进行设置框架的的名称、源文件、链接、边距、滚动、边框和能否调整大小等。3 .设置框架集属性:边框、边框大小和边框颜色。5.4 设置框架集中的超级链接5.4.1 在框架网贝中建立超链接5.4.2 框架网页中设置超级链接的目标打开方式1 .相对链接目标:_blank、_top、_parent、_self2 .绝对链接目标:mainframe、Leftframe、Right
28、frame、Topframe。5.6课堂实例制作一个框架网贝举例演示框架的创建和保存操作打开框架面板,查有并总结框架和框架集的属性设置及其含义演示框架中的超级链接效果举例演示框架网页的设计与制作It vetHrihacaHfiRacl-iia:r第6章AP兀素的创建和使用教学目标与要求理解AP元素的作用;熟记AP元素的命名原则和特点;掌握绘制AP元素和插入AP元素的方法和区别;熟练设置AP元素的属性;灵活、合理地使AP元素随心所欲的布局页面内容。教学重点AP元素的作用;AP元素的插入和绘制;AP元素的属性设置;AP元素的特点;AP元素的应用教学难点AP元素的作用;AP元素的属性设置;AP元素的
29、应用教学方法多媒体演示为主,适当举例,人体媒体结合式教学,课堂讲授,师生互动,提问式教学。教学课时2课时第6章AP兀素的创建和使用教学提示在浏览网页时,注意到滚动的广告图片了吗?-它是使用AP元素做出来的效果。6.1应用AP兀素布局网页611Ap6的概述1、AP元素的应用:布局网页;制作简单动回;设计特效等。2、AP元素的定义、AP元素的特点、AP元素的分类、AP兀素的优缺点、AP兀素面板。6.1.2 创建AP元素1 .在首选参数对话框中设置AP元素的参数,可设置AP元素嵌套和显示AP元素锚记。2 .插入AP元素与绘制AP元素3 .绘制AP元素和插入AP元素的差别4 .AP兀素的html代码5
30、 .AP元素的绝对定位(一般是默认设置)和相对定位6.1.3 .AP元素属性详解1 .单个AP兀素的属性:AP兀素编号、左和,、宽和局、Z轴、背景图像、背景颜色、剪辑、可见性、溢出:抛出问题,引入新课强调AP元素在页面布局中的作用演示AP元素的绘制要领;选择AP元素,让学生观察的属性,并详细讲解各属性的设2.多个AP元素的属性:6.1.4 AP兀系的基本操作激活AP元素、选择AP元素、调整AP元素大小、移动AP兀素、对齐AP兀素、吸附AP兀素到网格6.1.5 嵌套AP66.1.6 .AP元素和表格的相互转换6.2课堂实例一一用AP元素布局网站首页置含义。演示AP元素的各种操作综合举例作业:课后
31、习题上机作业:使用AP元素、表格和css排版网站首页小结:本章着重讲解AP元素的创建、命名和属性设置,让学生亲自上台制作案例,加深了对新知识的印象。上机时发现学生基本都能完成操作任务,总体感觉授课效果较好。教学难点教学方法教学提示 抛出问题,引入新课。(2分钟)打开几个典型网站的 主页,让大家分析超级 链接的功能,进而引入 超级链接的定义、分类 和目标列表的设置。让 学生讨论总结创建超级链接的注意事项(20 分钟)通过举例和配图讲解 链接路径的类型和在 创建超级链接时路径第7章超级链接了解超级链接的路径和链接结构;熟记超级链接目标打开方教学目标与要求式的设置含义;熟练掌握超级链接的4种创建方法
32、;能快速完成5种特殊超级链接的创建方法和步骤。1.超级链接的各种创建步骤教学重点2 .超级链接目标打开方式的设置含义3 .超级链接的4种创建方法4.5种特殊超级链接的创建方法和步骤1 .超级链接的路径2 .超级链接目标打开方式的设置含义多媒体演示为主,适当举例,人体媒体结合式教学,课堂讲授,师生互动,提问式教学。教学课时2课时3 7章超级链接大家已经会创建不同内容的网页了,怎样把这些分散的网页组合成一个统一的整体,让浏览者只打开主页就能访问到其它各个面呢?-需要创建超级链接。7.1超级链接的定义和目标选项的含义1 .超级链接的定义2 .属性检查器的“目标”弹出菜单中各个选项的含义:_blank
33、、_parent、_self、_top。3:创建一个完整的超级链接必须考虑的4个方面:链接的载体链接的目标链接的路径链接目标的打开方式7.2超级链接的路径在dreamweaver中有三种类型的链接路径:绝对路径、文档相对路径、站点根目录相对路径。的书写方法(20分钟)7.3 超级链接的分类1按照链接路径的不同,网页中超链什般分为内部链接、锚点链接、外部链接3种类型。2按照使用对象的不同,网页中的链接又可以分为以下几种:文本超链接、图像超链接、电子邮件链接、锚点链接、软件下载链接、多媒体文件链接、空链接等。7.4 超级链接的创建方法1 .使用属性检查器中链接后的文本框创建各种各样的超级链接;2
34、.使用属性检查器中的浏览文件图标创建各种各样的超级链接;3 .使用“指向文件”图标创建超级链接;4 .使用菜单中的“超级链接”命令创建超级链接;7.5 几种特殊的超级链接详解1 .锚记链接2 .创建脚本链接3 .给图像热区加上超级链接4 .创建电子邮件超链接5 .创建空链接7.6 超级链接的基本操作:更新、修改、检查7.7 超级链接的结构7.8 总结创建超级链接的5点建议采用讨论法,让学生讨论总结超级链接的分类。(8分钟)举例讲解各种方法下超级链接的创建方法和创建步骤,并总结各种方法的使用情况(25分钟)借助上面讲过的创建方法,让学生上台操作实践,创建各种类型的超级链接。根据情况不部分内容调整
35、到机房讲解。(30分钟)简要讲述超级链接的修改与更新操作。(15分钟)结构较为简单(15分钟)总结并提出建议。(10分钟)作业:1.叙述超级链接的定义2.说出超级链接的路径3.说出超级链接的4种创建方法。小结:本章内容较多,超级链接的路径较难理解;其他内容相对容易,且操作性较强,易掌握,学生基本都能创建各种类型的超级链接,总体感觉授课效果还好。第8章交互(行为、图AP元素和时间轴的综合运用,以及javascript)第8章交互(行为、图AP元素和时间轴的综合运用,以 及js )问题:大家已经会在网页中的特殊效果如:弹出消息、检 查表单、设置导航文本、鼠标的花瓣、棉花糖、下雪了、 礼花绽放等,这
36、样的动态网页是如何制作的呢?使用行为 就可以实现。8.1.1初步认识行为1.熟练地应用行为,能够随心所欲地制作出具交互功能的网教学目标与要求2 .掌握时间轴的概念和基本用法;3 .通过对行为的学习应用,增加网页设计的特殊效果,提高学生对学习网页制作的兴趣,培养大家的动手操作能力。4 .了解java脚本的基本用法教学重点1.行为的概念和创建,2.使用DWfi置的行为3.AP元素、行为和时间轴的综合运用教学难点1.使用DW内置的彳丁为;2.局级行为的应用;3.AP元素、行为和时间轴的综合运用教学方法多媒体演示为主,适当举例,人体媒体结合式教学,课堂讲授,师生互动,提问式教学;任务驱动、引导教学、理
37、论与操作紧密结合。教学课时4课时页;教学提示抛出问题,导入新课举出几个典型的带有行为的网页显示行为的应用,进而引出行为的作用和相关概念(25 分钟)举例讲解行为 的创建步骤。1、DW行为的引出2、行为的概念3、与行为相关的三个重要部分:对象、事件和动作4、认识行为面板8.1.2行为的创建、修改和更新创建行为的三个步骤修改行为更新行为8.1.3使用DW内置的行为dw8.0自带的行为主要有:1 .弹出消息2、“播放声音”实例3、跳转菜单和跳转菜单开始4、打开浏览器窗口5、交换图象与恢复交换图象6、控制shockshave或flash7、设置导航栏图像8、设置文本9、显示弹出菜单(下拉菜单)10、显
38、示和隐藏AP元素11、拖动AP元素12、滚动链接的AP元素8.1.4高级行为的应用1、插入滚动字幕示例:文本自动向上循环滚动,鼠标放到上面还会暂停2、下载安装扩展插件3、下载网页特效,适当修改相关代码,再把代码放到代码视图的具体位置。举例:花瓣、棉花糖。8.2AP元素、行为和时间轴的综合运用1.时间轴面板2、时间轴和图AP元素的综合运用(1)滚动字幕(2)网贝浮动动回(3)设置文字的阴影效果(4)幻灯片效果(5)控制图像播放动画(6)制作滚动的折叠菜单(7)具有预览功能的电子相册效果8.3在网页中应用javascript1 .认识代码片段面板2 .应用代码片段3 .应用举例(10分钟)演示常用
39、的DW内置行为的操作步骤和要领,部分调整在机房讲解;(30分钟)本部分为选讲内容。举例讲解高级行为的应用;重点讲解4种扩展插件的安装和应用效果。(30分钟)举典型实例演示AP元素和行为综合应用效果(40分钟)引入特效代码,举例讲解js在Dw中的应用。(20分钟)作业:课后习题1、2、3题小结:通过举例,详细讲解了AP元素、时间轴和行为的综合运用。本节的内容较多,步骤也繁琐。通过视频演示和实际操作演示,加深对行为的理解,加强了学生的实际操作能力。希望同学们下去自己多多练习。学完本章,大家应该能灵活的制作出较为简单的具有特殊效果的动态网页。第9章cssAP兀素叠样式表教学目标与要求1 .了解css
40、的概念及样式类型2 .熟练掌握css的属性设置、能熟练操作(创建、导入、导出)cssAP兀素曾样式表;3 .css和表格、css和div的综合运用教学重点css的概念及样式类型;Css的创建及属性设置;css和表格的综合运用教学难点Css的创建及属性设置;css和表格、css和div的综合运用教学方法多媒体演示为主,课堂讲授,师生互动,案例教学。教学课时4课时第9章cssAP兀素叠样式表教学提示打什个没有应用样式设置的预先准备好的网页,先让学生观察设计视图中的效果,然后在IE中预览,让学生总结显示效果的变化,这是怎么回事呢?-没有使用样式。9.1 css基础1. css样式表的基本概念样式、c
41、ascading和cssCss可能改变的性质外部css样式表的扩展名是.css02. css的5个优点:3. css面板打开css面板的3种方法css面板中的按钮和功能adobe建议用css面板作为创建和编辑css的主要工具。用户可以自己创建AP兀系曾样式表,还可以dw附中的AP兀系曾样式表4.样式表类型(理解即可)选择器有三种(常见)类型,可以创建4种不同选择器类型的样式:(1)自定义css规则(类样式),命名规则抛出问题,引入新课打开几个典型的应用css的网页,让大家分析css的优点,进而引入css的定义、类型。打开样式面板,演示各按钮的作用;打开css样式创建的对话框,通过创建过程的选择
42、讲解css的类型。(2)html标签样式表(3)对于高级样式(也称ID、伪类选择器)通过举例详细 讲解css规则 的各项设置内 容。先演示css创 建的具体步骤, 然后让学生上 台操作演练。9.2 CSS规则详解在“规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化页面。在定义某个CSS样式时,不需要对每一个项都进行设置,需要什么效果,就选择相应的项进行设置。9.3 创建新的CSS®则9.4 应用CSS羊式9.4.1 各种样式表的应用应用自定义CSS羊式,有下列3种方法先讲解应用的 方法,然后通过 大量举例讲解 各种样式的创 建和应用。举了 4
43、个例子,分 别是类样式、伪 类样式、ID样式、标签样式。对于html标签样式和高级样式,定义仅对该文档后,会自动应用到相应的文档中。对于外部的css样式表:在样式面板中选择附件样式表按钮,打开“链接外部样式表”对话框,可以链接外部的CSS羊式文件。清除样式:选中要清除中¥式的对象,设置成“无”样式即可。使用范例css样式表9.4.2 应用举例(参看课本p131-139示例)1 .课堂实例一一用CSSB式化文本2 .课堂实例一一用CSS空制表格3 .用CSS空制列表4 .用CSS空制背景5 .用CSS空制区块6 .CSS样式滤镜的应用9.5 编辑CSSM则和CSS羊式打开代码视图, 观
44、察各种样式 在代码中的显 示位置和显示 方式。举特例讲解各 种冲突解决的 规则。让学生学 会在代码视图 中修改或删除 不需要的样式。最后总结本章 所学知识,让学 生对样式表灵 活运用。编辑cssrn则:在样式面板中直接双击进行修改。编辑css羊式:在样式列表中选中需要编辑的规则的名称,直接单击“编辑样式”按钮,在弹出的“CSS®则定义”对话框中修改相应的设置。9.6 CSS样式的三种存放方式(1)直接插入(叫内部标签):<tablestyle="coloured;font-size:10Pt”>(2)嵌样式(也叫嵌入式):位于html文件头(<head&g
45、t;</head>标签)的style标签内。(3)链接到已创建的外部文件.css(统一风格):这类样式表要保存在站点的commons件夹,而在html的<卜62><小62>中弓I用。<linkRel="stylesheet"href="文件名.css”Type="text/css”>9.7关于冲突的CSS®则1、不冲突则共同显示。2.当内部的CSS规则和外部的CSS规则冲突时,内部规则优先显示。3、如果应用于同一文本的两种规则的属性发生冲突,则按就近原则显示。4、如果有直接冲突,则自定义CSS规则
46、优先显示。作业:1、什么是cssAP元素叠样式表?简述使用css样式的优点。2、css的类型、背景、区块、方框、边框、列表、定位、扩展分别可以定义什么样的设置?3制作实例.小结:本章前一部分理论较多,且窗体的节的相关概念较难理解;后一部分操作性较强,易掌握,学生基本都能完成操作任务,总体感觉授课效果还好。第10章(1)管理和使用站点资源与库项目教学目标与要求灵活使用和管理站点资源、库和模板,提高网页制作的速度和效率。教学重点资源面板的使用教学难点库的管理、创建和编辑教学方法任务驱动、引导教学,学生自学为主,教师讲授为辅,简单演小教学课时1课时第10章(1)管理和使用站点资源与库项目教学提示10
47、(1).1资源和库的概念和作用10(1).2站点资源面板1.打开资源面板的方式2.站点资源的资源分类3站点资源的类型4.查看和选取资源5.添加资源6.刷新资源向板7.资源定位8.管理资源面板10(1).3创建、管理和编辑库项目1.3种创建库项目的方法创建的库项目自动保存到站点的library文件夹中,右站点中没有,dreamweaver则会自动创建该文件夹。库项目的扩展名为.lbi。2.应用库项目:在文档中应用库项目的操作步骤3.管理库项目:主要有修改、重命名、重建、删除、从源文件中分离几个方面随堂练习:下列关于库的说法中不正确的一项是()A库是一种用来存储想要在整个网站上经常被重复使用或更新
48、的贡面兀素B库头际上世段html源代码C在dreamweaver中,只有文字数字口以作为库项目,向图片脚本则/、口作为库项目D库可以是email地址一个表格或版权信息等.举例说明资源和库项目的意义演示库项目的创建和应用作业:课后习题小结:知识总结:本章主要介绍了资源面板和库项目的使用,学完本章应熟练应用站点资源和库项目,提高制作网页的效率。第10章(2)利用模板设计网页教学目标与要求1、学会创建模板2、巧妙使用模板创建风格务-的贝闻教学重点模板的创建、编辑和管理教学难点模板的创建、编辑和管理教学方法任务驱动、引导教学,学生自学为主,教师讲授为辅,简单演示教学课时1课时第10(2)章利用模板设计
49、网页教学提示如何提高做网页的效率呢?-巧用模板。10(2).1利用模板创建网页举例说明模板的定义、使用模板的实际意义、模板区域类型、模板的链接模版的作模板默认被保存在templetes义件夹中,模板的士展名为:.dwt。用,10(2).2创建模板1.将现有的文档保存为模板演示操作2.通过“资源”面板创建新的空白模板的创3.使用新建文档对话框创建模板建,重点10(2).3使用模板的可编辑区域讲解可编1、插入可编辑区辑区域的定义可编辑区域的两种方法插入可编辑区域的命名规则:不可使用单引号、双引号、尖括号(<>)、和与符号(&)一、/江思:可将整个表格或某个单元格定义为可编辑区域
50、,/、可同时指定儿个单格为可编辑区域;将AP元素定义为可编辑区域时,用户可以改变AP元素的位置,将根据已创AP元素上的内容定义为可编辑区域时,才可以修改AP元素上的内建的模板容。2.删除可编辑区域10(2).4使用可选区域1 .插入可选区域2 .插入可编辑的可选区域3 .修改可选区域10(2).5使用重复区域10(2).6应用模板1 .创建基于模板新页面2 .将模板应用到现有义档(自学,容易出现不T区域,建议不采用)3 .将文档与模板分离10(2).7编辑模板10(2).8管理模板重命名模板、删除模板、重命名可编辑区域、选择可编辑区域创建新的网页,体会模板的作用注意模板使用的注意事项作业:1、
51、说出使用模板的使用意义。2、模板默认被保存在哪个文件夹中,模板的扩展名是什么?3、模板共有几种模板区域类型?4、课后习题的页面。小结:本章讲了模板的意义、创建、编辑和应用几个问题,学完本章应创建出风格一致第12章DW8站点的创建、设置与管理教学目标与要求1 .学会编辑设置和管理站点2 .理解站点面板的设置使用3 .能打开、编辑、删除、上传站点。教学重点创建和管理站点与站点文件教学难点编辑、设置和管理站点教学方法任务驱动、引导教学,学生自学为主,教师讲授为辅,简单演小教学课时1课时第12章DW8站点的创建、设置与管理教学提示12.1 安装和配置web服务器12.2 创建和设置站点一、创建和设置本
52、地站点:二、设置远端站点以下是几种连接服务器的方式方式1 .通过ftp访问远端站点2 .通过局域网访问远端站点3 .通过RDSJ问远端站点4 .通过Sourcesafe数据库访问远端站点5 .通过WebbDAV问远端站点12.3 、站点文件的管理:打开站点、编辑站点、复制站点、删除站点、站点的导入导出、使用存回/取出功能12.4 站点地图1 .设置主页:只有设置了主页,才可打开站点地图A将现有义件设置为主页B创建新主页2 .显小站点地图3 .站点地图中显示文件标题4 .从分枝查看站点地图演示安装配置的步骤设置本地站点和远端站点演示主页的设置和站点地图的打开操作5 .在站点地图中进行操作6 .显示或隐藏站点地图7 .保存站点地图12.5 设置站点的参数选项12.6 、指定服务器技术12.7 站点测试与发布1检查站点链接2检查浏览器的兼容性3使用站点报告4分辩率测试5上传网页有如下方法A.用dw自带的方法上传B.用cuteftp5.0软件上传网贝必须经过诸如检查站点链接状态、检查浏览器兼咨性和贝闻分辩率兼容性测试等几个步骤后,才方长上传到远程服务
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论