《网页制作教案电子版.docx》由会员分享，可在线阅读，更多相关《网页制作教案电子版.docx（75页珍藏版）》请在三一办公上搜索。
1、教学内容第一章网页与网站基础知识校历第一周课时4课型理论+实践教学目标网站的策划与创建原则教学方法任务驱动法作业布置分析总结本章主要通过三个活动的开展，让学生了解DreamweaverCS3网页浏览的基本原理和网页制作技术的发展，知道目前网页制作常用的几种工具。了解HTML语法的基本构成及几种常用标签。通过具体的网页实例制作，掌握起始页的设置以及基本的界面操作。教学过程新课引入：越来越多的人开始熟悉网络，熟悉网页。人们已经渐渐意识到网络正在改变日常生活。人们需要为个人、企业制作一个精彩的网站，这就带来一个新的问题：怎样设计制作一个实用而美观的网站？实用与美观似乎总是相悖的。新课内容：一、网页与
2、网站的概念网页：我们在浏览器中看到的页面，它是一个单个的文件。网页里可以有文字、表格、图像、声音、视频等等。网站中的第一个页面成为首页或主页。网站：存放在网络服务器上的完整信息的集合体，它包含一个或多个网页。这些网页按照一定的组织结构，以链接等方式连接在一起，形成一个整体，描述一组完整的信息。二、网页的设计网页的主题指网页所要表现的最主要的思想内涵，可以说师网页的灵魂。确定主题时应遵循的原则1 .自己擅长或喜欢的内容2 .主题小而精3 .不要太滥或目标太高2、网页的文字最适合于网页正文显示的字体大小为12磅左右，如果在一个页面中需要安排的内容较多可采用9磅的字号。标题和需要强调的内容可以用较大
3、的字号。行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点，则行距12点。在网页设计中，设计者可以为文字、文字链接、己访问链接和当前活动链接选用各种颜色。使用不同颜色的文字可以使想要强调的部分更加引人注目，但应该注意的是，对于文字的颜色，只可少量运用，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非你有特殊的设计目的。3、网页的色彩教学过程色彩助鲜明性 色彩的独特性 色彩的合适性 色彩的联想性 页面中各处用色的选择4、网页版式和布局1.版面设计的步骤(1)画出页面的结构草图：只需画出页面的大体结构。注：分
4、辨率为640*480时，页面显示尺寸为620*311；分辨率为800*600时，页面显示尺寸为780*428；分辨率为1024*768时，页面显示尺寸为1007*600；(2)布局细化和调整：将需要放置的功能模块安排在页面上，注意突出重点和平衡协调(3)定格：确定出完美的布局方案，定格为最后的版式2.常见网页布局(1)T型结构教学过程(2)同字结构yxMVif,13MAM1I.,11工4-二Iawf*w-KihB*0方大-文安WRWCaWHNBMmXttt*W3EWvnMr费:CZ0VM5”x心E*R三5番上M8MMSsa三nxaMiagM*wwejw*qmcfm5wa三morxwrfi三三m
5、mre03g今MyM-a田遁伴平4WtM8E.raEEgVUMhac匕.4PI!里*F5r主XRGfflMa0*/公rjcyawx3M乃ntf三ouHwMmea0*weuom3Eyngu.拿0,.gWMLeX：_)CfrCJBSMmK呻:SfEil2J6tGWEWygM*BW类&(3M96:WS*kFMHV-SGT*TMMI*IWr编假f蕾1.er3，3“f一mw竽立的(3)川字结构(4)三字结构7OO1ZO&也教学过程or.s三24。XfuiaEmail夕*皎未支持oWAamOOnaMW。三ftMS。ITIVBMfIo3esgsomm1MXR大U离b式U11Jtl*Mer3加白大。B阳光“日
6、记*BOMiexa”，rnw三r”/,*3”IWam务UMmmnBaasrwBw*内AI8UWwwtwe(3)川字结构(4)三字结构7OO1ZO&也教学过程or.s三24。XfuiaEmail夕*皎未支持oWAamOOnaMW。三ftMS。ITIVBMfIo3esgsomm1MXR大U离b式U11Jtl*Mer3加白大。B阳光“日记*BOMiexa”，rnw三r”/,*3”IWam务UMmmnBaasrwBw*内AI8UWwwtwe(5)单一结构教学过程教学内容第一章网页与网站基础知识校历第一周课时2课型理论+实践教学目标网站的策划与创建原则教学方法任务驱动法作业布置分析总结本章主要通过三个活
7、动的开展，让学生了解DreamweaverCS3网页浏览的基本原理和网页制作技术的发展，知道目前网页制作常用的几种工具。了解HTML语法的基本构成及几种常用标签。通过具体的网页实例制作，掌握起始页的设置以及基本的界面操作。三、网站的策划与创建原则1、定位网站主题和名称设计一个站点，首先遇到的问题就是定位网站主题。所谓主题也就是你的网站的题材。对于题材的选择，应注意：（1）主题要小而精。定位要小，（2）题材最好是你自己擅长或者喜爱的内容。（3）题材不要太滥或者目标太高。“太滥”是指到处可见，网站名称及域名的选择也是非常重要的。和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广
8、也有很大影响。一般的建议是：（1）名称要正。也就是要合法，和理，和情。不能用反动的，色情的，迷信的，危害社会安全的名词语句。（2）名称要易记。根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。另外，网站名称的字数应该控制在六个字（最好四个字）教学过程（3）名称要有特色。名称平实就可以接受，如果能体现一定的内涵,给浏览者更多的视觉冲击和空间想象力，则为上品。域名的选择也是如此，选一个简单易记，比如可以模仿知名网站扩大自己的影响，有一定含义的域名也是网站成功的一部分。2、网站的风格网站的整体风格及其创意设计是站长们最希望掌握，也是最难以学习的。难就难
9、在没有一个固定的程式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。有风格的网站与普通网站的区别在于：普通网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。如何树立网站风格呢？我们可以分这样几个步骤：第一，确信风格是建立在有价值内容之上的。第二，你需要彻底搞清楚自己希望站点给人的印象是什么。第三，在明确自己的网站印象后，开始努力建立和加强这种印象。对于确定风格，这里提供一些参考：1.将你的标志log。,尽可能的出现在每个页面上。或者页眉，或者页
10、脚，或则背景。2 .突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。3 .突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字教学过程体。4 .想一条朗朗上口宣传标语。把它做在你的banne里，或者放在醒目的位置，告诉大家你的网站的特色5 .使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。6 .使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。7 .创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用,.食。口一（区位码里自己参看）等等。虽然很简单的一个变化，却给人与众不同的感
11、觉。8 .用自己设计的花边，线条，点9 .展示你网站的荣誉和成功作品。10 .告诉网友关于你的真实的故事和想法。教学内容第二章站点的建立与管理校历第二周课时6课型理论+实践教学目标1、站点创建2、页面设置教学方法任务驱动法作业布置制作个人空间网站分析总结通过为“我的个人网站”收集相关资料，掌握站点素材及其制作工具的有关知识；为“我的个人网站”规划站点目录，并比较大型站点的站点结构与小型站点的站点结构区别，从而了解站点的设计流程；学会使用“高级”标签为“我的个人网站”建立站点，并设置相关参数；通过网站地图，实现对“我的个人网站”中的网站文件管理，检查链接等。一、站点概念多个网页文档通过各种链接并
12、联起来就构成了站点。二、规划站点结构1、一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹,将文件分类，如图片文件放在image文件夹内，HTML文件放在HTML文件夹内，当然，如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再分类。如I：html:放网页，img:放图像，SoUnd:放声音文件，back:放备份文件，Other:放其他2、用英文或者拼音给文件命名（推荐英文），不要使用中文的名字（因为有的机器对中文支持不太好，有可能出现链接的错误，你自己以为正确的东西在别人看来有可能是错的）。三、创建站点教学过程1、选择“窗口”/“文件”命令打开“文件”面板2、展开文件一项，选中
13、站点，然后再选编辑站点3、点击“新建”未命名站点1的站点定义为本地信息站点名0）：未在gi1本地根文件夹0）:D5M名站点K-二3回自动即本地文件碉默UStt文件夹a）：I|。站点名称（N）处填上你要建立的站点的名称，这个名字只起着识别的作用，与网站发布后真实的名字无关；本地根文件夹（F）处选择设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录；缓存可以使文件的移动、改名、查找等站点管理的操作速度大大提升，因此建议大家在这里打上钩；其它的可以默认，当然你可以试试选择不同的，默认图像文件夹为站点默认存放图片的文件夹（以后在做网页的过程中，使用非站点内的图片
14、时，它会提示是否把该文件复制到这个文件夹内）；HTTP地址（三）为你站点的网址。作业：建立一个名字为“我的个人网站”的站点，站点内有imagxpicturehtml三个文件夹和index.html文件，远程FTP服务器为.1,用户名教学过程为：tastelife,密码为:教学内容第三章新建文档与对象校历第三周课时4课型理论+实践教学目标通过本章的学习，用户可以掌握DreamweaverMX中文版的基本操作及一些使用技巧。如文本的编辑、修改、文本列表的创建及网页性性的基本设置等。教学方法任务驱动法作业布置制作“中国民俗文化”网站分析总结通过本章练习，让我们学会网页制作中有关文档的一些基本操作，其
15、中包括；通过三种方法创建网页、打开现有网页文档及保存网页；文本和特殊字符的输入及编辑方法以，学会创建列表；掌握在网页中插入日期、水平线等常见网页元素的方法以，并分析其共同之处；掌握设置网页属性的方法，并了解站点设计的一些基本理念。一、编辑文本1、输入文本(1)换行利用Enter键换行：在输入文字后按Enter键，文字成段，且上下段各空一行。利用Shift+Enier键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按Shift+Enter键。(2)加入特殊字符有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，例如注册商标、版权符等。(3)加入批注文字在网页中加入适当的批注文字
16、，可以使日后修改、管理网页时更加方便。由于批注只有在编辑网页时或查看原代码时才能看到，所以不必担心批注教学过程文字破坏版面。2、查找和替换文本二、设置文本属性1、文本属性栏文本属性栏也就是DreamWeaVer默认的属性栏，如下图所示，其默认状态是打开。如果不小心将属性栏关闭，则可以通过以下2种途径打开文本属性栏：(1)按快捷键CM+F3(2)选择窗口/属性命令2、设置文本格式教学过程文本格式一般包括文字的字体、字号、颜色及文本的对齐方式等。3、设置文本样式(1)、粗体、斜体，以及其也样式(2)、对齐方式(3)、段落扩展/缩进三、文本列表1、创建创建文木列表最简单的方法是通过文本属性栏上的列表
17、按钮将光标停在文本前，单击属性栏中的无序列表按钮与有序列表，即可对文本进行无序或有序排列。2、修改属性在网页中加入文本列表后，还可以根据个人的习惯改变列表的属性，如将无序列表的实心小圆圈改成实心矩形，将有序列表的阿拉伯数字改变为英文字母等。列表属性的修改是通过列表属性对话框来完成的。在列表类型下拉列表框中，可以设置列表的类型。列表类型包括无序列表、有序列表、目录列表和菜单列表。3、创建嵌套文本列表如果想把不同级别的文本内容用列表的形式表现出来，则需要用到文本列表的嵌套。创建文本列表的嵌套，需用到文本属性栏上的段落扩展/缩进按钮。作业：1、文本录入与编辑2、文本及其格式化教学内容第四章表格处理与
18、网页布局校历第三周课时2课型理论+实践教学目标让学生熟练掌握对表格的使用插入表格表格的基本操作设置表格属性表格的高级操作层与表格的相互转换教学方法任务驱动法作业布置制作课程表等各种表格分析总结通过本章练习，让学生学会如何利用表格来布局页面，以及表可知及其单元格的编辑与属性设置。一、在网页中插入表1、定位插入点，使用鼠标单击。2、调出“插入表”对话框，方法一：单击“对象”面板（普通）中的“插入表格”对象按钮；方法二：单击“插入”I“表格”菜单；3、确定行与列数在“行”与“列”的输入框内输入所需的数值。4、确定边距与间距在“单元格边距”与“单元格间距”的输入框内输入所需的数值。边距：指单元格内的数
19、据（内容）与边框线的距离，默认为1个像素。间距：指相邻单元格之间的距离（包括上、下、左、右），默认为2个像素。5、确定表格宽度在“宽度”输入框内输入所需的数值，在其右边选择教学过程单位。6、确定边框的厚度在“边框”输入框内输入所需的数值。默认为1,若为0,则没有边框线（在布局时应用相当广）二、在表格中添加内容1、插入文本直接输入文本定位单元格，直接输入文本，若文本超过宽度，则自动扩展。首先是按横向自动分摊宽度，若不够，则转到下行。粘贴其它文本先将其它文本存入到剪贴板中，再将剪贴板中的内容粘贴至当前光标处。教学过程2、在单元格中插入图片与在文档中插入图片一样操作。（1）选定位，鼠标单击；然后单击
20、“对象”面板中的“插入图像”钮或选择“插入”I“图像”菜单，弹出查找图像文件对话框；选择所需的图像文件，单击“选择”即可。三、输入外部数据Dreamweaver可接受其它程序创建的表格数据，但这些表格数据要使用定界符。定界符即单元格间的分隔符，一般有制表位、冒号、分号等。还可以是Excel文件。导入Excel文件操作方法为：启动Dreamweaver,建立一个文档（2）选择“文件”I“导入I“Excel文档”菜单，弹出对话框。选择EXCel文件，确定即可。导入表格数据文件操作方法为：启动Dreamweaver,建立一个文档选择“文件”I“导入”I“导入表格数据”菜单，弹出对话框。（6）选择“数
21、据文件”单击“浏览”钮，查找到所需文件，选择“定界符”后，单击“确定”钮。还可进行其它设置：“表格宽度”、“边距”、“间距”、“格式化首行”、“边框”等。四、选择单元格元素1、选择单元格用鼠标在所要选定的单元格内单击。2、选择一行将指针指向待选行的最左边，当出现黑色的向右箭头时教学过程单击。3、选择一列将指针指向待选列的最上面，当出现黑色的向下箭头时，单击。4、选择整个表先在表中单击，再选择状态左边的粗黑标记“table”教学内容第四章表格处理与网页布局校历第五周课时6课型理论+实践教学目标1、认识布局模式2用布局视图布局页面3、掌握进入和退出页面模式的方法4、创建布局表格和布局单元格5、掌握
22、布局表格和单元格属性教学方法任务驱动法作业布置制作“世锦赛”网站分析总结通过本章练习，让学生学会如何利用表格来布局页面，以及表可知及其单元格的编辑与属性设置。教学过程创建页布局的一种常用的方法是使用HTML表格对元素进行定位。但是，使用表格进行布局不太方便，因为最初创建表格是为了显示表格数据，而不是用于对Web页进行布局。为了简化使用表格进行页面布局的过程，Dreamweaver提供了“布局”模式。在“布局”模式中，您可以使用表格作为基础结构来设计页，同时避免使用传统的方法创建基于表格的设计时经常出现的一些问题。一、绘制布局单元格和表格绘制布局表格，请执行以下操作：1、确保您处于“布局”模式中
23、。2、在“插入”栏的“布局”类别中，单击“绘制布局表格”按钮。3、鼠标指针变为加号()o4、将鼠标指针放置在页上，然后拖动指针以创建布局表格。绘制布局表格，请执行以下操作：1、确保您处于“布局”模式中。2、在“插入”栏的“布局”类别中，单击“绘制布局单元格”按钮。3、鼠标指针变为加号(+)“媒体”“Flashwo二、创建和插入Flash按钮在“设计”视图或“代码”视图中工作时，可以在文档中创建和插入Flash教学过程按钮。在“文档”窗口中，将插入点放置在您要插入Flash按钮的位置。打开“插入Flash对象”对话框，在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash按钮”图标。若
24、要修改Flash按钮对象，在“文档”窗口中，单击Flash按钮对象以选择它。可以使用属性检查器修改按钮的HTML属性，例如宽度、高度和背景颜色。若要对内容进行更改，双击Flash按钮对象。在属性检查器中单击“编辑”。三、创建和插入Flash文本创建和插入Flash文本与Flash按钮类似。四、插入Shockwave影片Shockwave作为Web上用于交互式多媒体的Macromedia标准，是一种经压缩的格式。教学过程五、添加视频在Dreamweaver中可以通过不同方式和使用不同格式将视频添加到Web页面。视频可被下载给用户，或者可以对视频进行流式处理以便在下载;它的同时播放它。六、嵌入声音
25、文件嵌入音频将声音直接并入页面中，但只有在访问站点的访问者具有所选声音文件的适当插件后，声音才可以播放。七、插入ActiveX控件可以在页面中插入ActiveX控件。ActiveX控件（以前称作OLE控件）是可以充当浏览器插件的可重复使用的组件，有些像微型的应用程序。八、插入Javaapplet可以使用Dreamweaver将JaVaaPPlel插入HTML文档中。Java是一种编程语言，通过它可以开发可嵌入Web页中的小型应用程序。swidth=100height=,230注：插件必须与所在网页在同目录九、插入图像查看器作为图片之间互相交换方法：插入”“媒体”“图像查看器”，“窗口”标签选择
26、器”教学过程bgColor:设置图像检看器的背景颜色。captionCo1or:设置图片的标题颜色。CaptionFont:设置图片标题的字体。CaPtionSkize:设置图片标题的字体大小。frameCo1or:设置边框的颜色。frameShow:设置是否显示边框。frameThickness:设置边框的宽度。imageCaption:设置图片的标题。imagel1RLs:指定图片的地址。ShowControls:设置是否显示控制台。SlideAUtoPlay:设置是否自动播放。SIideDelay:设置图片播放的延迟时间。SIideLOoP:设置图片是否循环播放。Iitle:设置图像检看
27、器的标题。TtleColor:设置图像查看器的标题颜色。IitleFont:设置图像查看器的标题的字体。IitleSize:设置图像查看器的标题的字体大小。transitionsType：设置图片切换的模式。教学内容第七章建立框架网页校历第八周课时4课型理论+实践教学目标1、理解框架网页的基本原理；2、掌握新建框架网页的两种方法；教学方法任务驱动法作业布置建立框架网页分析总结本章主要通过四个活动的展开，让我们了解框架的基本概念，掌握框架网页的创建、调整、删除等基本集操作，能区分框架和框架集中的文件，并能区别保存。能够利用“属性”面板设置框架属性及相关的链接属性。掌握创建无框架内容及内嵌式框架的
28、基本方法。教学过程一、框架与框架集的概念框架：是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。框架集：是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。框架集文件本身不包含要在浏览器中显示的HTML内容，但noframes部分除外；框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。二、框架的用途最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。三、框架和框架集工作流程要在浏览器中查看一组框架，请输入框架集文件的U
29、RL；浏览器随后打开要显示在这些框架中的相应文档。通常将一个站点的框架集文件命名为index.htm,以便当访问者未指定文件名时默认显示该名称。样例说明四、创建框架和框架集1、使用预定义的框架集通过预定义的框架集，您可以很容易地选择您要创建的框架集类型。创建预定义的框架集有两种方法：(1) 插入栏(2) “新建文档”对话框创建新的空框架集。2、设计框架集可以通过向窗口添加拆分器，在DreanIWeaVer中设计您自己的框架集。 创建框架集操作：选择“修改”“框架集”，然后从子菜单选择拆分项 框架拆分操作：要拆分插入点所在的框架，从“修改”“框架集”子菜单选择拆分项。请在按住Alt键的同时拖动框
30、架边框。 删除框架操作：将边框框架拖离页面或拖到父框架的边框上。调整框架大小操作：五、嵌套框架集在另一个框架集之内的框架集称作嵌套的框架集。六、框架和框架集的编辑1、选择框架和框架集要更改框架或框架集的属性，首先要选择您要更改的框架或框架集。您既可以在“文档”窗口中选择框架或框架集，也可以通过“框架”面板进行选择。教学过程2、在框架中打开文档将插入点放置在框架中，选择“文件”“在框架中打开，选择要在该框架中打开的文档，该文档随即显示在框架中。3、框架和框架集文件浏览器中预览框架集前，必须保存框架集文件以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文
31、件和框架中出现的所有文档。4、控制具有链接的框架内容九、Iframe的使用iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。在DreamWeaVerMX开始，可以可视化操作iframe,不再需要第三方插件。1、插入iframe1.点击“插入面板”的“标签选择器”教学过程2 .在“标签选择器”对话框中，选择iframe标签，点击“插入”按钮。3 .在“标签编辑器-IframJ对话框中，根据面板提示操作。最基本的两项是“源”和“名称”。2、设置链接在某个iframe中打开选中链接，在属性面板中的“目标”项，手工输入目标iframe的“名称”。3、iframe透明为了使iframe内容和网页背景相同，需要使iframe透明。在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“允许透明”。教学内容第八章插入多媒体元素校历第九周课时4课型理论+实践教学目标
