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

《Dreamweaver CS3网页设计培训教程电子教案01》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

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

3、.1.1知识讲解1.网页的定义及组成元素2.网页常见部分的称谓及规范3.网页制作的流程4.网页配色技巧1.网页的定义及组成元素浏览网页时在浏览器中看到的一个个页面就是网页，其中包括多种多样的网页元素，如文本、图像、动画和音乐等。文本是网页最基本的组成元素，是网页的主体部分。图像也是网页中不可缺少的元素，是使网页看起来更美观的点睛之笔。动画在网页中也有广泛的应用，网页中常用的动画格式主要有两种：一种是SWF动画，一种是GIF动画。播放音乐是为浏览者提供听觉感受的最佳选择，但因为受音乐版权的约束，在专业网站中很少有使用背景音乐的，只在部分个人主页

4、或企业网站中有所使用。2.网页常见部分的称谓及规范通常情况下，网页的基本组成部分有Logo、Banner、导航条、超链接和版权信息等。3.网页制作的流程制作网页不像编辑文档那样轻松，需要遵循一定的流程：收集资料和素材、规划站点、制作网页、测试站点、发布站点、更新和维护站点等。1）收集资料和素材2）规划站点3）制作网页4）测试站点5）发布站点6）更新和维护站点4.网页配色技巧网页中的色彩通常用十六进制数来表示，如“#FF0000”表示红色，“#00FF00”表示绿色、“#0000FF”表示蓝色、“#FFFF00”表示黄色、“#FFFFFF”表示

5、白色、“#000000”表示黑色等，即每两位为一种色彩，从左到右分别为红、绿、蓝三色，每组色彩的取值均为00～FF（十进制数255的十六进制值）。1.1.2典型案例——用“记事本”制作“welcome.html”网页案例目标本案例将使用“记事本”制作一个简单的网页。1.1.2典型案例——用“记事本”制作“welcome.html”网页操作思路（1）利用以HTML代码创建的文本文件可以通过“记事本”等文本编辑程序直接进行编写的特点制作本网页文档。（2）创建图像和文本等内容。（3）从结构上讲，HTML文件由两大部分组成：一是头部（即标

6、签与标签之间的内容，如网页的标题就放置在头部），二是主体（即标签与标签之间的内容，也就是在浏览器中看到的内容）。为了与普通的文本文件相区别，将标签与标签分别放置在网页代码最前及最后，这样，一个简单的网页就创建好了。1.1.2典型案例——用“记事本”制作“welcome.html”网页操作步骤具体操作步骤请教师参照软件及书中内容进行讲解。1.1.2典型案例——用“记事本”制作“welcome.html”网页案例小结本案例用“记事本”制作了一个简单的网页文档。在制作过程中需注意的是

7、：在保存文档时一定要在【保存类型】下拉列表框中选择【所有文件】选项；在输入网页文档名称时，一定要将网页文档的扩展名.htm（或.html）一并输入，否则“记事本”程序会将其保存为纯文本格式文档。1.2初识DreamweaverCS3在学习了网页制作的基础知识后，接下来就应该认识网页制作利器——DreamweaverCS3了。1.2初识DreamweaverCS31.2.1知识讲解1.2.2典型案例——用DreamweaverCS3创建“welcome2.html”网页1.2.1知识讲解在学习DreamweaverCS3之前应先安装Dreamw

8、eaverCS3，安装方法与其他应用程序的安装基本相同，这里不再赘述。1.2.1知识讲解1.DreamweaverCS3的工作界面2.DreamweaverCS3的