搜索
DreamweaverCS3网页设计培训教程第1课网页制作基础本课要点具体要求本课导读上机练习DreamweaverCS3网页设计培训教程本课要点网页制作的相关知识初识DreamweaverCS3DreamweaverCS3网页设计培训教程具体要求了解网页的定义及组成元素了解网页常见部分的称谓及规范了解网页制作的流程了解网页配色技巧了解DreamweaverCS3的工作界面掌握DreamweaverCS3的基本设置掌握DreamweaverCS3的基本操作DreamweaverCS3网页设计培训教程本课导读网页是构成网络的主体，是互联网信息的主要载体。在学习网页制作前，需要了解网页制作的相关知识，以便在以后的学习及工作中运用。另外，我们还需要认识网页制作工具DreamweaverCS3的工作界面、基本设置以及一些简单的应用，如启动与退出DreamweaverCS3、新建、保存、预览及打开网页文档等。DreamweaverCS3网页设计培训教程1.1网页制作的相关知识网上冲浪已成为生活的一个重要组成部分，人们通过网络来获取知识、资源，越来越多的企事业单位也将网页作为宣传公司品牌形象的一种重要手段，网页也从以前的纯文本形式逐步发展到图、文、声音及动画兼有的综合形式。下面我们就来学习网页制作的各种知识。DreamweaverCS3网页设计培训教程1.1网页制作的相关知识1.1.1知识讲解1.1.2典型案例——用“记事本”制作“welcome.html”网页DreamweaverCS3网页设计培训教程1.1.1知识讲解在开始学习网页制作之前，应先了解一下什么是网页以及一些相关的专业术语。DreamweaverCS3网页设计培训教程1.1.1知识讲解1.网页的定义及组成元素2.网页常见部分的称谓及规范3.网页制作的流程4.网页配色技巧DreamweaverCS3网页设计培训教程1.网页的定义及组成元素浏览网页时在浏览器中看到的一个个页面就是网页，其中包括多种多样的网页元素，如文本、图像、动画和音乐等。文本是网页最基本的组成元素，是网页的主体部分。图像也是网页中不可缺少的元素，是使网页看起来更美观的点睛之笔。动画在网页中也有广泛的应用，网页中常用的动画格式主要有两种：一种是SWF动画，一种是GIF动画。播放音乐是为浏览者提供听觉感受的最佳选择，但因为受音乐版权的约束，在专业网站中很少有使用背景音乐的，只在部分个人主页或企业网站中有所使用。DreamweaverCS3网页设计培训教程2.网页常见部分的称谓及规范通常情况下，网页的基本组成部分有Logo、Banner、导航条、超链接和版权信息等。DreamweaverCS3网页设计培训教程3.网页制作的流程制作网页不像编辑文档那样轻松，需要遵循一定的流程：收集资料和素材、规划站点、制作网页、测试站点、发布站点、更新和维护站点等。1）收集资料和素材2）规划站点3）制作网页4）测试站点5）发布站点6）更新和维护站点DreamweaverCS3网页设计培训教程4.网页配色技巧网页中的色彩通常用十六进制数来表示，如“#FF0000”表示红色，“#00FF00”表示绿色、“#0000FF”表示蓝色、“#FFFF00”表示黄色、“#FFFFFF”表示白色、“#000000”表示黑色等，即每两位为一种色彩，从左到右分别为红、绿、蓝三色，每组色彩的取值均为00～FF（十进制数255的十六进制值）。DreamweaverCS3网页设计培训教程1.1.2典型案例——用“记事本”制作“welcome.html”网页案例目标本案例将使用“记事本”制作一个简单的网页。DreamweaverCS3网页设计培训教程1.1.2典型案例——用“记事本”制作“welcome.html”网页操作思路（1）利用以HTML代码创建的文本文件可以通过“记事本”等文本编辑程序直接进行编写的特点制作本网页文档。（2）创建图像和文本等内容。（3）从结构上讲，HTML文件由两大部分组成：一是头部（即head标签与/head标签之间的内容，如网页的标题就放置在头部），二是主体（即body标签与/body标签之间的内容，也就是在浏览器中看到的内容）。为了与普通的文本文件相区别，将html标签与/html标签分别放置在网页代码最前及最后，这样，一个简单的网页就创建好了。DreamweaverCS3网页设计培训教程1.1.2典型案例——用“记事本”制作“welcome.html”网页操作步骤具体操作步骤请教师参照软件及书中内容进行讲解。DreamweaverCS3网页设计培训教程1.1.2典型案例——用“记事本”制作“welcome.html”网页案例小结本案例用“记事本”制作了一个简单的网页文档。在制作过程中需注意的是：在保存文档时一定要在【保存类型】下拉列表框中选择【所有文件】选项；在输入网页文档名称时，一定要将网页文档的扩展名.htm（或.html）一并输入，否则“记事本”程序会将其保存为纯文本格式文档。DreamweaverCS3网页设计培训教程1.2初识DreamweaverCS3在学习了网页制作的基础知识后，接下来就应该认识网页制作利器——DreamweaverCS3了。DreamweaverCS3网页设计培训教程1.2初识DreamweaverCS31.2.1知识讲解1.2.2典型案例——用DreamweaverCS3创建“welcome2.html”网页DreamweaverCS3网页设计培训教程1.2.1知识讲解在学习DreamweaverCS3之前应先安装DreamweaverCS3，安装方法与其他应用程序的安装基本相同，这里不再赘述。DreamweaverCS3网页设计培训教程1.2.1知识讲解1.DreamweaverCS3的工作界面2.DreamweaverCS3的基本设置DreamweaverCS3网页设计培训教程1.DreamweaverCS3的工作界面DreamweaverCS3网页设计培训教程2.DreamweaverCS3的基本设置在使用DreamweaverCS3前，需要进行一些简单的设置，以方便使用软件。选择【编辑】→【首选参数】命令，打开【首选参数】对话框，如图1.17所示。该对话框左侧为【分类】列表框，右侧为对应的设置选项；默认打开的是【常规】分类，可单击左侧【分类】列表框中的选项进行切换，然后进行该分类的设置。DreamweaverCS3网页设计培训教程1.2.2典型案例——用DreamweaverCS3创建“welcome2.html”网页案例目标本案例将用DreamweaverCS3制作“welcome2.html”网页，其效果和用“记事本”创建的“welcome.html”网页相同DreamweaverCS3网页设计培训教程1.2.2典型案例——用DreamweaverCS3创建“welcome2.html”网页操作思路（1）创建一个新网页并将其保存。（2）在网页中添加素材并设置效果。（3）加入版权栏。DreamweaverCS3网页设计培训教程1.2.2典型案例——用DreamweaverCS3创建“welcome2.html”网页操作步骤具体操作步骤请教师参照软件及书中内容进行讲解。DreamweaverCS3网页设计培训教程1.2.2典型案例——用DreamweaverCS3创建“welcome2.html”网页案例小结本案例用DreamweaverCS3创建了一个网页，并在IE浏览器中进行了预览。通过本案例的学习，可以看出Dreamweaver的强大功能及由此带来的便捷。Dreamweaver最大的特点之一就是可视化的操作，使得用户在不是很了解网页的框架语言HTML时即可随心所欲地对网页元素进行添加、删除以及各种属性设置，大大地减轻了初学者的负担，使初学者能够轻松上手，为以后的学习打下基础。DreamweaverCS3网页设计培训教程1.3上机练习1.3.1用“记事本”创建“Goodmorning.html”网页1.3.2用DreamweaverCS3制作“Goodmorning2.html”网页DreamweaverCS3网页设计培训教程1.3.1用“记事本”创建“Goodmorning.html”网页本练习将使用“记事本”制作“Goodmorning.html”网页文档。DreamweaverCS3网页设计培训教程1.3.1用“记事本”创建“Goodmorning.html”网页操作思路：将素材文件夹中的所有图像复制到网页要保存的文件夹中，如“D:\web”。打开“记事本”程序，新建一个文件，将其保存到与素材图像相同的文件夹中，如“D:\web”，并将其名称设置为“Goodmorning.html”。参照效果图输入所有的代码，然后进行保存。DreamweaverCS3网页设计培训教程1.3.2用DreamweaverCS3制作“Goodmorning2.html”网页本练习将使用DreamweaverCS3制作与1.3.1节中用“记事本”制作的网页相同效果的网页“Goodmorning2.html”。DreamweaverCS3网页设计培训教程1.3.2用DreamweaverCS3制作“Goodmorning2.html”网页操作思路：新建一个网页并将其保存。将要用到的素材复制到保存网页的同一目录下。在网页中插入图像。