DreamweaverCS3网页设计培训教程电子教案01

1、第1课 网页制作基础 本课要点具体要求本课导读上机练习本课要点点网页制作作的相关关知识初识Dreamweaver CS3具体要求求了解网页页的定义义及组成成元素了解网页页常见部部分的称称谓及规规范了解网页页制作的的流程了解网页页配色技技巧了解Dreamweaver CS3的工工作界面面掌握Dreamweaver CS3的基基本设置置掌握Dreamweaver CS3的基基本操作作本课导读读网页是构构成网络络的主体体，是互互联网信信息的主主要载体体。在学学习网页页制作前前，需要要了解网网页制作作的相关关知识，以便在在以后的的学习及及工作中中运用。另外，我们还还需要认认识网页页制作工工具Dream

2、weaverCS3的工作界界面、基基本设置置以及一一些简单单的应用用，如启启动与退退出DreamweaverCS3、新建、保存、预览及及打开网网页文档档等。1.1网页制作作的相关关知识网上冲浪浪已成为为生活的的一个重重要组成成部分，人们通通过网络络来获取取知识、资源，越来越越多的企企事业单单位也将将网页作作为宣传传公司品品牌形象象的一种种重要手手段，网网页也从从以前的的纯文本本形式逐逐步发展展到图、文、声声音及动动画兼有有的综合合形式。下面我我们就来来学习网网页制作作的各种种知识。1.1网页制作作的相关关知识1.1.1知识讲解解1.1.2典型案例例用“记事事本”制制作“welcome.html

3、”网页1.1.1知识讲解解在开始学学习网页页制作之之前，应应先了解解一下什什么是网网页以及及一些相相关的专专业术语语。1.1.1知识讲解解1.网页的定定义及组组成元素素2.网页常见见部分的的称谓及及规范3.网页制作作的流程程4.网页配色色技巧1.网页的定定义及组组成元素素浏览网页页时在浏浏览器中中看到的的一个个个页面就就是网页页，其中中包括多多种多样样的网页页元素，如文本本、图像像、动画画和音乐乐等。文本是网网页最基基本的组组成元素素，是网网页的主主体部分分。图像也是是网页中中不可缺缺少的元元素，是是使网页页看起来来更美观观的点睛睛之笔。动画在网网页中也也有广泛泛的应用用，网页页中常用用的动画

4、画格式主主要有两两种：一一种是SWF动画，一一种是GIF动画。播放音乐乐是为浏浏览者提提供听觉觉感受的的最佳选选择，但但因为受受音乐版版权的约约束，在在专业网网站中很很少有使使用背景景音乐的的，只在在部分个个人主页页或企业业网站中中有所使使用。2.网页常见见部分的的称谓及及规范通常情况况下，网网页的基基本组成成部分有有Logo、Banner、导航条条、超链链接和版版权信息息等。3.网页制作作的流程程制作网页页不像编编辑文档档那样轻轻松，需需要遵循循一定的的流程：收集资资料和素素材、规规划站点点、制作作网页、测试站站点、发发布站点点、更新新和维护护站点等等。1）收集资资料和素素材2）规划站站点3

5、）制作网网页4）测试站站点5）发布站站点6）更新和和维护站站点4.网页配色色技巧网页中的的色彩通通常用十十六进制制数来表表示，如如“#FF0000”表示红色色，“#00FF00”表示绿色色、“#0000FF”表示蓝色色、“#FFFF00”表示黄色色、“#FFFFFF”表示白色色、“#000000”表示黑色色等，即即每两位位为一种种色彩，从左到到右分别别为红、绿、蓝蓝三色，每组色色彩的取取值均为为00FF（十进制制数255的十六进进制值）。1.1.2典型案例例用“记事事本”制制作“welcome.html”网页案例目标标本案例将将使用“记事本本”制作作一个简简单的网网页。1.1.2典型案例例用“

6、记事事本”制制作“welcome.html”网页操作思路路（1）利用以以HTML代码创建建的文本本文件可可以通过过“记事事本”等等文本编编辑程序序直接进进行编写写的特点点制作本本网页文文档。（2）创建图图像和文文本等内内容。（3）从结构构上讲，HTML文件由两两大部分分组成：一是头头部（即即标签与标签之间间的内容容，如网网页的标标题就放放置在头头部），二是主主体（即即标签与标签之间间的内容容，也就就是在浏浏览器中中看到的的内容）。为了了与普通通的文本本文件相相区别，将标签与标签分别别放置在在网页代代码最前前及最后后，这样样，一个个简单的的网页就就创建好好了。1.1.2典型案例例用“记事事本”制

7、制作“welcome.html”网页操作步骤骤具体操作作步骤请请教师参参照软件件及书中中内容进进行讲解解。1.1.2典型案例例用“记事事本”制制作“welcome.html”网页案例小结结本案例用用“记事事本”制制作了一一个简单单的网页页文档。在制作作过程中中需注意意的是：在保存存文档时时一定要要在【保存类型型】下拉列表表框中选选择【所有文件件】选项；在在输入网网页文档档名称时时，一定定要将网网页文档档的扩展展名.htm（或.html）一并输输入，否否则“记记事本”程序会会将其保保存为纯纯文本格格式文档档。1.2初识DreamweaverCS3在学习了了网页制制作的基基础知识识后，接接下来就就

8、应该认认识网页页制作利利器Dreamweaver CS3了。1.2初识DreamweaverCS31.2.1知识讲解解1.2.2典型案例例用DreamweaverCS3创建“welcome2.html”网页1.2.1知识讲解解在学习DreamweaverCS3之前应先先安装DreamweaverCS3，安装方方法与其其他应用用程序的的安装基基本相同同，这里里不再赘赘述。1.2.1知识讲解解1.DreamweaverCS3的工作界界面2.DreamweaverCS3的基本设设置1.Dreamweaver CS3的工作界界面2.DreamweaverCS3的基本设设置在使用DreamweaverC

9、S3前，需要要进行一一些简单单的设置置，以方方便使用用软件。选择【编辑】【首选参数数】命令，打打开【首选参数数】对话框，如图1.17所示。该该对话框框左侧为为【分类】列表框，右侧为为对应的的设置选选项；默默认打开开的是【常规】分类，可可单击左左侧【分类】列表框中中的选项项进行切切换，然然后进行行该分类类的设置置。1.2.2典型案例例用DreamweaverCS3创建“welcome2.html”网页案例目标标本案例将将用DreamweaverCS3制作“welcome2.html”网页，其其效果和和用“记记事本”创建的的“welcome.html”网页相同同1.2.2典型案例例用Dreamwe

10、averCS3创建“welcome2.html”网页操作思路路（1）创建一一个新网网页并将将其保存存。（2）在网页页中添加加素材并并设置效效果。（3）加入版版权栏。1.2.2典型案例例用DreamweaverCS3创建“welcome2.html”网页操作步骤骤具体操作作步骤请请教师参参照软件件及书中中内容进进行讲解解。1.2.2典型案例例用DreamweaverCS3创建“welcome2.html”网页案例小结结本案例用用DreamweaverCS3创建了一一个网页页，并在在IE浏览器中中进行了了预览。通过本本案例的的学习，可以看看出Dreamweaver的强大功功能及由由此带来来的便捷捷

11、。Dreamweaver最大的特特点之一一就是可可视化的的操作，使得用用户在不不是很了了解网页页的框架架语言HTML时即可随随心所欲欲地对网网页元素素进行添添加、删删除以及及各种属属性设置置，大大大地减轻轻了初学学者的负负担，使使初学者者能够轻轻松上手手，为以以后的学学习打下下基础。1.3上机练习习1.3.1用“记事事本”创创建“Good morning. html”网页1.3.2用DreamweaverCS3制作“Good morning2.html”网页1.3.1用“记事事本”创创建“Good morning. html”网页本练习将将使用“记事本本”制作作“Good morning.html”网页文档档。1.3.1用用“记记事本”创建“Goodmorning.html”网页页操作思路路：将素材文文件夹中中的所有有图像复复制到网网页要保保存的文文件夹中中，如“D:web”。打开“记记事本”程序，新建一一个文件件，将其其保存到到与素材材图像相相同的文文件夹中中，如“D:web”，并将其其名称设设置为“Good morning.html”。参照效果果图输入入所有的的代码，然后进进行保存存。1.3.2用DreamweaverCS3制作“Good morning2