中文版Dreamweaver-CS6-项目一

1、中文版Dreamweaver CS6 网页制作案例教程联系方式：计算机应用教研室 王向超电话-mail: 项目一 网页制作基础知识任务一 了解网页制作基础知识任务二 创建“石市科干院”站点及欢迎首页任务一 了解网页制作基础知识任务描述随着网络的飞速发展，各类公司、企事业单位都相继建立了自己的网站。本任务主要了解网页制作基础知识并欣赏优秀网站，从而为制作优秀网页打下坚实的基础。一、网站开发基础1InternetInternet，中文译名为因特网，又叫国际互联网，是由广域网、城域网、局域网及单机按照一定通讯协议组成的国际计算机网络。只要你的计算机连接到它的任何一个节点上，

2、就意味着你可以通过网络与远在千里之外同样连入Internet的朋友相互发送邮件、共同完成一项工作或共同娱乐。2TCP/IP协议TCP/IP（Transmission Control Protocol/Internet Protocol的简写），中文译名为传输控制协议/因特网互联协议，又叫网络通讯协议，是Internet最基本的协议，也是国际互联网络的基础。3IP地址所谓IP地址，就是为连接在Internet上的主机分配的一个网络地址。按照TCP/IP协议规定，IP地址用32位二进制数（也就是4个字节）表示。4域名由于IP地址在使用过程中难于记忆和书写，一种与IP地址对应的字符应运而生，这就是域

3、名（Domain Name）。每一个网站都有自己的域名，并且域名是独一无二的。2015年2月4日，奇虎360斥资1700万美元（约合人民币1.1亿元）收购5网址网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文件在网络中的位置。一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。6浏览器浏览器是安装在计算机上的一种软件，通过它可以方便地看到Internet上提供的各种信息和服务资源，浏览器种类很多，有IE、360、腾讯、搜狗、火狐等，目前国内常用的有IE和搜狗。二、认识

4、网站和网页网页就是我们上网时在浏览器中打开的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。1主页打开某个网站时显示的第一个网页被称为网站的主页（或首页）。一般来说，主页是一个网站中最重要的网页，也是访问最频繁的网页。它是一个网站的标志，体现了整个网站的制作风格和性质，主页上通常会有整个网站的导航目录，所以主页也是一个网站的起点或者说主目录。网站的更新内容一般都会在主页上突出显示。2网站互联网起源于美国国防部高级研究计划管理局建立的阿帕网。网站（Website）最初是指在因特网上，根据一定规则，使用HTML等语言制作的用于展示特定

5、内容的相关网页的集合。3网页的构成元素我们可以将网页中的元素按功能分为站标、导航条、广告条、标题栏和按钮等。站标导航条广告条标题栏3网页的构成元素我们可以将网页中的元素按功能分为站标、导航条、广告条、标题栏和按钮等。站标导航条广告条标题栏（1）站标站标也叫Logo，是网站的标志，也是网站特色和内涵的集中体现。它一般会出现在网站的每一个页面上，是网站给人的第一印象。网站的标志就如同商标一样，其作用是使人看见它就能够联想到网站和企业。因此，网站Logo通常采用企业的Logo。（1）站标（2）网站导航导航栏是一组链接到网站内主要页面的超链接组合，一般由多个按钮或者多个文本超链接组成，通过单击这些超链

6、接可以轻松打开网站中的各个页面。常见的网站导航有横排导航、竖排导航、下拉菜单式导航等。（3）广告条广告条又称Banner，其功能是宣传网站或为其他商品做广告。在制作Banner时，有以下几点需要注意。Banner可以是静态的，也可以是动态的。Banner的体积不宜过大，尽量使用GIF格式图片与动画或Flash动画。Banner中的文字不要太多，只要达到一定的提醒效果就可以。Banner中图片的颜色不要太多，尤其是GIF格式的图片或动画。（4）标题栏此处的标题栏不是指整个网页的标题栏，而是网页上各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，大大地方便了浏览者。4网页的本质

7、一般情况下，网页中除了包含网页文件（扩展名为.html，.asp等）外，还要用到图像文件（扩展名为.jpg，.png，.gif等）、Flash动画文件（扩展名为.swf）、脚本文件（扩展名为.js）、样式文件（扩展名为.css）以及视频文件（扩展名为.avi，.flv等）等。在浏览器中选择“文件”“另存为”菜单，将网页保存到磁盘中，便可看到网页的组成文件。三、网页配色基础知识1色彩简介人们肉眼所能看到的所有颜色都是由红、黄、蓝三种基本原色构成的。基本原色也就是我们通常所说的三原色。原色，又称为基色，是用于调配其他色彩的基本色；将原色以不同比例混合，可以产生其他新颜色。原色的色纯度最高、最纯净、

8、最鲜艳，可以调配出绝大多数色彩，而其他颜色不能调配出三原色。2色彩特征从色彩的功能上来看，它具有以下基本特征。（1）色彩的冷暖（2）色彩的轻重（3）色彩的软硬（4）色彩的缩扩3网页颜色的搭配设计网页时，可根据以下原则确定网页的背景色和主色调，并进行颜色搭配。（1）网页背景颜色最好选择白色。（2）可根据网站的性质确定网页的主色调，并且该主色调应贯穿于网站中的全部网页。（3）设计网页时恰当利用同类色、邻近色和对比色，可增强网页的层次感、丰富网页的色彩或突出某些重要内容（如导航条或版块标题）。4网站配色技巧无论是平面设计，还是网页设计，色彩永远是最重要的一环。在选择网页色彩时，可以遵循以下原则。（1

9、）首先选择标准颜色。标准颜色是指能够体现网站形象和延伸内涵的颜色，主要用在网站标志和主菜单上，给人一种整体统一的感觉。（2）其他颜色。标准颜色定下来后，其他颜色也可以使用，但只能作为点缀和衬托，绝不能喧宾夺主。5网站配色的几点建议（1）尽量使用网页安全色。（2）网页背景颜色与文字对比度要高。（3）尽量避免蓝色与红色，蓝色与黄色，绿色/蓝色与红色这几类颜色同时出现。（4）尽量少用细小的字体或蓝色表格。（5）有些颜色本身是很枯燥的，比如灰色，但配合一些橙色或亮色就会产生完全不同的感觉，可以尝试一下。（6）可以利用留白来平衡网站中的颜色刺激。（7）要始终保持整个网站颜色的统一性。四、网站开发流程网站

10、开发流程是指从企业计划建设网站到网站建设完成的一套规范化运作过程。简单来说，可以把网站开发流程归纳为以下三个阶段：（1）规划和准备阶段；（2）网页设计与制作阶段；（3）网站的发布、推广和维护阶段。五、网站管理与网页制作相关软件当今时代，网络成了最重要的媒体和资源宝库。制作网页可以选择用HTML代码，也可以选择用软件编辑，最好是两者兼用。在制作网页时，除Dreamweaver外还需要用到Photoshop，Flash，Fireworks等辅助软件。任务实施欣赏优秀网站欣赏几个网站，并注意观察其颜色搭配和布局方式。任务二 创建“石市科干院”站点及欢迎首页任务描述首先熟悉一下Dreamweaver

11、CS6的工作环境，掌握利用Dreamweaver CS6创建和管理网站站点，以及创建、保存、打开和关闭网页文档的操作，然后创建“石市科干院”网站站点，并制作网站欢迎首页。一、Dreamweaver CS6简介Adobe 创建于1982年，是世界领先数字媒体和在线营销方案的供应商。公司总部位于美国加利福尼亚州圣何塞，在世界各地员工人数约 7000名。Adobe 的客户包括世界各地的企业、知识工作者、创意人士和设计者、OEM 合作伙伴，以及开发人员。一、Dreamweaver CS6简介公司名称“Adobe”来自于奥多比溪：这条河在公司原位于加州山景城的办公室不远处。2005年4月18日，Adob

12、e系统公司以34亿美元的价格收购了原先最大的竞争对手Macromedia公司一、Dreamweaver CS6简介Dreamweaver CS6是一个可视化网页设计和网站管理工具，即使没有任何网页制作基础，也能很轻松地利用它制作出漂亮的网页，只要从菜单、面板中选择选项就可以了。这免除了学习HTML语言的烦恼，也节省了很多编写源代码的时间。二、启动Dreamweaver CS6启动Dreamweaver CS6的操作很简单，和其他软件基本一致。三、Dreamweaver CS6工作环境简介Dreamweaver CS6的工作界面由菜单栏、文档标签栏、文档工具栏、文档编辑区、标签选择器、“属性”面

13、板、“文件”面板组等组成。四、网站站点相关操作1创建本地站点站点一般包括本地站点（本地计算机上的一组文件）和远程站点（远程Web服务器上的一组文件）。本节以本地站点为例说明创建过程。2打开站点打开站点的方法有两种。方法1：在菜单栏中选择“站点/管理站点”菜单命令，弹出“管理站点”对话框，选择要打开的站点，单击“完成”按钮即可。方法2：在“文件”面板的“站点”下拉列表中选择已创建的某个站点。3编辑站点编辑站点的方法也有两种。方法1：选择“站点/管理站点”菜单命令，在“管理站点”对话框中双击要编辑的站点。方法2：在“文件”面板中选择站点列表中的“管理站点”选项，也可打开“管理站点”对话框。4复制站

14、点首先在“管理站点”对话框中选择要复制的站点，单击“复制当前选定的站点”按钮，在站点列表中即增加了一个新的站点。双击复制产生的站点，可以对其进行编辑操作，如改变站名、改变存储位置等。5删除站点在“管理站点”对话框中单击选中要删除的站点名，单击“删除当前选定的站点”按钮 ，在弹出的对话框中单击“是”按钮确认删除，单击“否”按钮则取消删除。6导入和导出站点在Dreamweaver CS6中，可以将现有站点导出为一个站点文件，也可以将站点文件导入为一个站点。导入、导出的作用在于保存及恢复站点和本地文件的链接关系。五、网页文档基本操作1新建网页文档和文件夹“文件”面板是管理网站的重要工具，通过它可以直观地看到整个网站的结构，也可以快速创建网页文档和文件夹。2打开网页文档在Dreamweaver中打开网页文档的方法有多种，下面分别介绍。方法1：启动Dreamweaver后，移动鼠标至欢迎屏幕上的“打开最近项目”文件列表，单击“打开”选项，然后在“打开”对话框中选择要打开的文档。方法2：移动鼠标至菜单栏中的“文件”命令上单击，然后在弹出的下拉菜单中选择“打开”命令。方法3：打开“文件”面板后，移动鼠标至面板中的文件列表上，双击要打开的文档。3保存网页文档制作网页时，应及时将其保存。步骤1