中央电大计算机专业DW简介

1、DW简介(第1节课一、教学目标1、初步了解DREAMWEAVER界面与工具,了解站点建设的意义与用途。2、熟悉网站建设流程。3、掌握站点的新建与管理、文件的基本操作、页面属性的设置、文本的添加以及如何插入图象。4、通过网站建设流程和站点建立,让学生有个笼统的学习目标,养成思考问题和规划项目的习惯。二、教学重难点1、重点:站点的新建与管理、文件的基本操作、页面属性的设置、文本的添加以及如何插入图象的综合应用。2、难点:(1、站点建设的意义与用途。(2、学生思考问题与规划项目能力的培养。三、教学方法:讲解法、练习法、演示法、案例法、尝试法四、课时安排:1课时五、教学步骤(一新课导入(8分钟1、作品

2、展示2、分析作品中包括那些内容,如文本、图象、表单、框架、CSS的应用等等3、分析步骤该怎么走,需要注意那些东西。(二讲解新课1、网站建设流程(8分钟(1规划阶段:初步定模块,找资料,与别人沟通讨论等等。(2设计阶段:根据所找的资料以及别人有用的建议,重新定模块,确定表现方式等等。(3制作阶段:根据设计的模型应用相应的知识进行制作。(4发布上传阶段:按照要求制作好网站,传到相应的服务器上运行。(5维护管理阶段:网站运行时,要对里面的内容进行更新等等。注意:通常没有经验的网页设计者容易忽略规划阶段与设计阶段,或者把二者混起来,大家回去仔细琢磨一下,一定要把它们搞懂。2、站点的新建与管理(18分钟

3、(1新建本地站点与远程站点新建站点不同的方式方法,例如可以通过菜单也可以直接通过面版,可以选择基本的也可以选择高级的(讲解的同时展示给学生看到底在哪里,下面就介绍比较好用且比较简单的方法本地站点:在站点面版上选择新建站点选择高级默认本地信息上填写站点名称、选择站点路径、选择自动刷新本地列表与启动缓存等远程站点:在站点面版上选择新建站点选择高级选择远程信息选择访问FTP填写FTP的有关信息,如用户名、密码等。(2本地站点与远程站点的区别(3管理注意形式:合理分配文档、文件的归类以及上传与下载。注意:本地站点与远程站点的不同点学生练习3、文件的基本操作(8分钟(1新建文件:可视化向导、文件的基本格

4、式;简单介绍文件的类型(2打开和保存文件任务:新建文件目标:了解文件的保存格式学生练习4、设置页面属性(20分钟设置页面属性,是在正式开始制作网页前一个必不可少的工序。双击打开刚才新建的index.htm,就自动转入编辑窗口。选择页面属性CTRL+J为该操作的快捷键,设置一些必要的页面属性,如下:(1标题:页面的标题会直接显示在浏览器的左上方,例如用浏览器打开草原孤星网站,可以在浏览器的左上角看到该页的标题“草原孤星-轻轻松松做网页(清爽新版”(举例给学生看。务必要养成为每一页都设定一个标题的习惯,这既便于访问者的浏览,也有助于你在网页编辑的过程中区分不同的页面。虽然标题并不是一个网页必要的元

5、素,但却是体现着网页制作者有否从细处为浏览者着想。(2背景图像:点击浏览按钮,可以为网页添加背景图片。(3背景:默认为白色,点击小三角可以选择其他的颜色。后面“#FFFFFF”是以16进制形式显示的RGB色值。(4文本:在这里将文字默认设置为黑色。要注意,假如不对背景及文字的颜色进行设置(此时RGB色值显示为空,那么浏览器在显示页面的时候,就会采用系统的默认设置。但因为不同的系统的设置都可能会有所区别,这样就回导致页面的显示效果也是千差万别。因为,为了更好地让页面体现出你的设计思想,就千万别忘记设定页面的背景颜色及文字颜色。(5链接:设定超级链接的颜色,不设定则默认为蓝色。(6顶部边界和左边界

6、:设置左部及顶部的页边距,一般都设置为“0”以方便于网页的编辑。注意:边界的设置,很多设计者忘了设置,导致制作的网页顶端留有1像素白色的区域。学生练习5、添加文本(10分钟(1如何添加文本注意:添加文本的时候输入法采用中文全角,否则空格键就没法使用。(2设置文本属性A、设置文本的格式:可以选择几种预设的文字格式;B、改变字体和尺寸:可以选择的全是是英文字体,如果想选择其他字体,就要选择最底的一项,编辑字体列表.(一般的文字编辑,默认字体就可以了,在那里,你可以加入删除字体列表,这里就不多说了;注意:因为别人的系统上不一定装有与你相同的字体,所以不要将一些特殊的字体加到列表中并使用。如果真有需要用到这些字体,应当做成图片后再使用。C、字体和段落D、文字的拷贝和粘贴学生练习6、插入图象(10分钟(1浏览器支持的影像格式:GIF、JEPG、JPG以及PNG等格式(2设定属性A、改变图片的大小:如果图片长与宽跟原图的大小不一致的话,这里的数字会用粗体显示;点取一张图片,你可以看到图片会被套上一个框和三个点,三个点分别代表将图片向三个不同的方向拉伸,从而达到放大和缩小的效果;在拉伸过程中,按着Shift键,再拖动角上的点,可以使图片保持宽高比例拉伸,如下图。如果要将图片恢复为原始大小,可以按属性面板右下角的