网页制作基础教程（Dreamweaver CS6）教学指南.docx

《网页制作基础教程（Dreamweaver CS6）教学指南.docx》由会员分享，可在线阅读，更多相关《网页制作基础教程（Dreamweaver CS6）教学指南.docx（14页珍藏版）》请在优知文库上搜索。

1、中等职业学校教学用书(计算机应用专业)网页制作基础教程(DreamweaverCS6版)电子教学资料黄洪杰杨军主编重孑工首出版aPub1.ishingHouseofE1.ectronicsIndustry北京.BEIJING为了配合网页制作基础教程（DreamWCaVCrCS6州课程的教学，体现教材的编写特色，更好地为读者服务，编写了此教学资料。教学资料内容有三个部分：第一部分是教学指南.包括了课程性质与任务、课程内容和要求、教学建议，教学时间分配。第二部分是习题答案，给出了每道习题的详细解答过程。第三部分是电子教案,采用PowerPoint谀件形式。教师可以根据不同的教学要求按需选取和重新组

2、合。限于编著者水平，教学资料中有错误或不妥之处，请读者给予批评指正。如果您有什么建议或想法.请和我们联系.E-mai1.:veeD电话：010-68152133编者/2014年8月j网页制作基础教程(DreamWeaVCrCS6版)教学指南一、课程的性质与任务“网页制作基础教程”是中等职业学校计究机专业的一门专业课,其主要任芬是使学生掌握网页制作的般础知识和范本技能，培养学生开发网站的能力，提高学生的职业技能和素质，为适应职业岗位和继续学习打下一定的基础。通过学习，学生能够达到如下的教学目标：令知道网站、网页的概念能弊确定网站的主8S,画出网站结树草图：Q了解DreamWeaYer操作界面，能

3、覆创建网站地图；了解各种网站和网页布局特点，能第利用表格、布局模式或框架规划网页布局：熟练常攫在网页中输入文字、修饰文字以及插入图片.更改背班的方法：令熟练掌握网页布局的方法：。熟练掌握各种超级链接的插入与修改，包括图片热区等：O堂押.样式表的相关概念以及使用方法：常押AP元素和时间轴的相关概念以及使用方法：令掌握在网页中插入多媒体文件、Spry页面特效的方法：掌握去单的相关概念以及使用方法，的编税确认表单：。常押Fircwork和Hash的操作方法，熟练掌握两个软件与Dreamweaver的整合使用方法：令熟练掌握网站的管理以及上传到囚相网上的方法.二、预备知识在学习本课程之前,最好具备以下

4、知识和能力：文本操作，例如能够使用Word创建并编辑文件等。(2因特网使用能力，例如网页的浏览，图片的卜载等，计算机网络的相关知识,例如知道眼务零与客户机的关系等.三、教学提要1. 重点难点(一)点内容本课程的程点内容是“第2章编辑网页的内容二“第3章网页的布局”、“第5章使用超琏接、第6堂CSS与行为”和“第8章使用表单”，在这三章中介绍了如何规划网页的布局.怎样创建图文并茂的网页.如何通过超超接招各个网页连接起来以及使用CSS、行为、衣单的方法.这些是学习网页制作所必须熟练掌握的内容,在学习是要注意体现出这一HTM1.语宫.也就是IhperTex1.Markup1.anguage（超文本标

5、识语言）。HTM1.谙*作为超文本标记谱*,用来描述某个事物应该如何合理地显示在计算机屏幕上,也可以这么说,HTM1.就是以特殊的标记形式将网页存储为通常的文本文件.2. HTM1.语言的特点与缺点要在网页上实现“欢迎参观我的主页”这句话为界体18号字并居中显示,相应的IITM1.谙旬为：vfcntSiZC=I8欢迎参观我的主页句首的:衣示居中，句尾的UCen1.Cr表示居中结束：而去示In体，与之相呼应：VfOntfaCC=黑体”表示文字为黑体.VfontSiZc=18表示字体型号为18号，句尾的两个&示改猊结束.子项目3方网页与动态网页网页可以分为静态网页和动态网页，区分它们的标准是网站所

6、使用的服务技术，与网页上是否有动态效果无关.支持动态网页的技术又分为客户端动态技术和服务器动态技术.客户端动态技术在显示网页内容时并不与网站服务器产生交互，而是将显示脚本程序嵌在网页文件中，眼务器接受浏览器的请求发送网页后，脚本程序会自动在计算机上运行并将结果显示在浏览器中，服务器动态技术在显示N页内容的过程中偌要服务器和客户箍的共同配合.服务涔会根据客户端发来的参数运行相关程序,产生页面，然后再把已经形成的网页发送到客户端的浏览器上。子项目4网页制作工具Drcamweavcr原本是Macromedia公Hj的产品.后被Adobe公司收吻.该软件除本身具彳1的强大功能以外,还得益于其他相应软件

7、的有力支持，它和该公司的另外两个产从F1.ash（动画制作工具）、Fireworks（图像编辑工具一起被称为“网络三剑客）项目2使用DEInmeHVer建立网站子项目1Dreamweaver的操作环境电击任务栏上的“开始”按钮，打开“开始”菜维：将鼠标指针指向“开始”菜笊中的“所行程序”,打开程序”菜单：当单击-F菜单中的“AdobeDrCamWCaVerCS6”,启动Dreamweaver.DkamwCaVer的操作环境由标鹿菜单栏、文档工具栏、文档编辑区、状态栏、面板组等组成.子项目2建立网站Ir的准备工作在制作网站之前应该先画出结构图,这样不但可以怖助规划同咕结构，使网站条理清楚、主题鲜

8、明，还可以确定各个网页的内容，方便大家思考各网页之间的链接方式。为每一个网页建立了网页索材文件夹.用于存放该网页使用的文字、图片等.而网页通用的背景图片、背咏声音、动画等也分别存放在相应的文件夹中.子项目3建立站点新建一个网站有多种方法，可以单击“站点”菜单中的“新建站点”命令，也可以单击标题栏的“站点”按钮,在下拉菜单中选择“新建站点”命令,还可以在面板组中打开“文件”选项卡，通过冷击“管理站点”，然后新建站点，6）掌握插入图片修饰网页的方法。本章的教学建议，本章的教学内容主要是文字与图片的相关设置，由于操作界面与Word等学生熟悉的软件不同，学生在操作上可能会有所不习惯，在教学中要注意以下

9、几个问8S：1.换行操作；2.添加中文字体；3.字号的大小关系：4.行苜空两格的操作;5.水平线的颜色更改。以上五个问题在操作中会使学生感到不方便,要通过练习进行加强,尽快钻卷Dreamweaver的操作特点.以免影响下面的学习.教材在讲述插入图片时，着我讲述了将图片保存在当前网站的方法。这是网站管理的内容，要使学习者认识到这种操作的重要性，以免造成文件埴多而产生的麻烦。本章的教学内容I第2章网页的内容项目1字体与段落的”子项目I入文字像在记事本中一样,在网页弟辑区域单击取标,出现光标后就输入文字了.也可以同过复制、粘贴命令,将网页索利文件中的文字纪制到网页中.用键盘操作换行有两种方法：按En

10、ter键和按Enter+Shift组合键。按Emer键，实侑的是分段操作，段与段之间的距离较兀而使用EmCr+Shi1.i纲合键，实施的是换行操作，也就是正常行间距子项目2导入中文字体在设时字体之前，应先将中文字体添加到“性”面板字体下拉列衣框中。“JR性”面板有两种横式,在供认情况卜rhim1.”模式被打开，从图2.1.4中可以发现,在该模式下是不悭修设置字体的，单i曲CSS按钮，可以切换到-CSS”模式，单击Ia幽三IG端而三1.在下拉菜单中选打唱婚国。花弹出的“编辑字体列表”对话框中,选中“可用字体”栏中的中文字体,本例选中“仿宋”,单击1.字体出现在“选择的字体”栏中.单击“确定”按钮

11、,“仿宋”被加入到“属性”面板的字体列表下拉菜单中.子项目3设型文字在DreamWCaVa网页编辑区域选择几个字.然后单,届皿三右边的三1在下拉列表中选择“黑体二在选择器名称下面的文本框中检入：y$1.作为新建CSS瓦则的名字，ys1.就是样式1的意思.中击“确定此时，属性面板中目标规则右边的对话根中显示的是“.ys1.单击大小付氏三k边的三1.在下拉列表中选择“16”,将字体设为16号字。单击回.珞文字设为加粗.然后在“属性”面板中单击口，打开颜色面板，选择一种颜色，更改文字的颜色.子项目4段苜缩进要实现在段首空两个格.可以切换到代码编辑状态,在段首文字前输入代码“ （不要漏掉于项

12、目5列表与第进1 .列表列表有两种类型：项目列表和编号列表.拖动鼠标，选中要添加列次的文字.然后在展性面板中单击“项目列表”按地，注意是在“ohini1.”模式下，不是在“CSS”模式下，单击项目符号”按钮，保一行都出现了一个黑点.2 .蟾进选中文字，将R1.标移动到属性面板上，在保证处于“HTM1.”的情况下，多次单击“内缩区块“按钮，文字将向右移动。项目2美化网页于项目I入水平线将光标移动G下面一个单元格的行首，的击菜的栏上的“插入记录”，然后选择HTM1.”子菜单卜的“水平城”命令,网页上自动插入一条水平城，那么怎样删除水平线呢？很简单,只要选中水平线，按下健盘上的DdCte健即可.子事

13、目2箱入图片1 .图片的格式图片的基本格式是BMP,但这种文件由于没有压缩.往往比较大.因特网并不采用它.因特网上应用最广泛的图片格式有一:种：GIF文件、JPEG文件和PNG文件.2 .插入图片首先单击取标,确定光标的位置,单击“插入”面板上的田按钮,然后在冲出的菜单中选择“图像”.在弹出“选择图像源”对话框，再单击“查找被围右边的,在下拉菜单中,选择图像文件，选择文件单击“确认”,将图片插入网页.子项目3设置图片单击图片,使图片被一个矩形框住，同时出现三个小的实心矩形。取标指针指向图片右卜角，当取标指针变成双向箭头时,拖动鼠标.就可以更改图片的大小.于项目4设置网页Ir景单击菜单栏上的“修

14、改”,在下拉菜单中单击“页面同性”，打开“页面属性”对话框，在“页面屈性”对话框中，可以设置文本的颜色,背景颜色等.常击“背景”右边的G1.选择一种颜色,将网页背景设置成该颜色.单击背景图像栏右边的“浏览”，找到存放图像的文件夹.打开“选择图像源文件”对话框.选中要使用的图片文件，单击“确认”，然后将图片保存到网站站点的文件夹“images”中，返回“页面词性”对话框,单击“确定”按妞，效果如图2227所示.在默认状态卜，背景图片泣盖在背景颜色之上。所以，在设置背景图片以后，背景颜色是看不到的.第3章网页的布曷本章的敦学目标为，（1） 知道网页设计中的几种常见布局和风格.（2） 熟练拿捱插入表

15、格.对表格进行设跣的方法得(3)熟练掌握插入视频的方法.(4)掌握设置SPry特效的方法.本章的教学建议：本章内容学生比较感兴趣，要注意讲解清楚各种音频、视频的格式，为什么有的音频和视频不适合插入到网页中，这一点要让学生有一个直观的感受关于SPry是一个难点,但不足理点.操作中也容身发生问遨.这需要学生的耐心和细心.作为教师在讲解的过程中要注意操作细节，避免学生在悚作中可能产生的各种错误.本章的收学内容，第7章制作多媒体网页项目1在网页中入多媒体文件子事目I入音乐单击“插入”菜单，选择“媒体”下的插件”命令,在弹出的“选择文件”对话框中，选择存放音乐文件的文件夹,选择事先确定好的音乐文件，单击“确定”按钿在DreanIWCaVer中选择该插件.然后在属性面板中单击“参数”按钮.怆入“hidden”作为参数的依，怆入“fake”作为值.这两个参数的作用是隐藏播放器插件.子项目2加入FIaSh动应用广泛的FESh文件主要出两种，SWF文件主