DW项目一

中文版DreamweaverCS6网页制作案例教程魏敬民：[e-mail]•1、使用表格排版，制作首页（第八周之前统一交）•2、使用DIV+CSS排版，制作一个首页（第十二周之前交）•3、制作一个完整的网站，子页不少于5页（第十六周之前交）三次大作业AdobeDreamweaver，简称DW，中文名称梦想编织者，是集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具。早期Dreamweaver是美国Macromedia公司开发的，2005年Macromedia公司被Adobe公司收购，此后Dreamweaver就由Adobe公司负责开发新版本。初识Dreamweaver版本更新Macromedia时代Dreamweaver1.0Dreamweaver2.0Dreamweaver2.01Dreamweaver3Dreamweaver4DreamweaverMXDreamweaverMX2004Dreamweaver8Adobe时代DreamWeaverCS3DreamWeaverCS4DreamweaverCS5DreamweaverCS5.5DreamweaverCS6（2012-07-06）DreamweaverCC第一章网页制作基础知识一、网站开发基础知识二、认识网站和网页三、网页配色基础知识四、网站开发流程五、网页文档基本操作一、网站开发基础知识1．InternetInternet，中文译名为因特网，又叫国际互联网，是由广域网、城域网、局域网及单机按照一定通讯协议组成的国际计算机网络。只要你的计算机连接到它的任何一个节点上，就意味着你可以通过网络与远在千里之外同样连入Internet的朋友相互发送邮件、共同完成一项工作或共同娱乐（资源共享）。2．TCP/IP协议TCP/IP（TransmissionControlProtocol/InternetProtocol的简写），中文译名为传输控制协议/因特网互联协议，又叫网络通讯协议，是Internet最基本的协议，也是国际互联网络的基础。作用：①定义PC如何接入因特网②定义了PC之间的数据传输标准3．IP地址所谓IP地址，就是为连接在Internet上的主机分配的一个网络地址。按照TCP/IP协议规定，IP地址用32位二进制数（也就是4个字节）表示，为方便使用和记忆，IP地址经常被写成十进制形式。例：二进制形式的IP地址是0000101000000000000000000000001十进制形式是：10.0.0.14．域名由于IP地址在使用过程中难于记忆和书写，一种与IP地址对应的字符应运而生，这就是域名（DomainName）。每一个网站都有自己的域名，并且域名是独一无二的。域名，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位。（）域名可以说是IP地址上的面具。一个域名的目的是便于记忆和沟通的一组服务器的地址(网站，电子邮件，FTP等)。5．网址网址又叫URL，英文全称是“UniformResourceLocator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文件在网络中的位置。一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。6．浏览器浏览器是安装在计算机上的一种软件，通过它可以方便地看到Internet上提供的各种信息和服务资源，浏览器种类很多，有IE、360、腾讯、搜狗、火狐等，目前国内常用的有IE和搜狗。二、认识网站和网页网页就是我们上网时在浏览器中打开的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。1．主页打开某个网站时显示的第一个网页被称为网站的主页（或首页）。一般来说，主页是一个网站中最重要的网页，也是访问最频繁的网页。它是一个网站的标志，体现了整个网站的制作风格和性质，主页上通常会有整个网站的导航目录，所以主页也是一个网站的起点或者说主目录。2．网站互联网起源于美国国防部高级研究计划管理局建立的阿帕网。网站（Website）最初是指在因特网上，根据一定规则，使用HTML等语言制作的用于展示特定内容的相关网页的集合。3．网页的构成元素从功能角度分析网站，可将网页中的元素分为站标、导航条、广告条、标题栏和按钮等。站标导航条广告条标题栏（1）站标站标也叫Logo，是网站的标志，也是网站特色和内涵的集中体现。网站的标志就如同商标一样，其作用是树立形象、传递信息以及品牌拓展。因此，网站Logo通常采用企业的Logo。（2）网站导航导航栏是一组链接到网站内主要页面的超链接组合，一般由多个按钮或者多个文本超链接组成，通过单击这些超链接可以轻松打开网站中的各个页面。常见的网站导航有横排导航、竖排导航、下拉菜单式导航等。（3）广告条广告条又称Banner，其功能是宣传网站或为其他商品做广告。在制作Banner时，有以下几点需要注意。•Banner可以是静态的，也可以是动态的。•Banner的体积不宜过大，尽量使用GIF格式图片与动画或Flash动画。•Banner中的文字不要太多，只要达到一定的提醒效果就可以。•Banner中图片的颜色不要太多，尤其是GIF格式的图片或动画。（4）标题栏此处的标题栏不是指整个网页的标题栏，而是网页上各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，大大地方便了浏览者。4．网页的本质一般情况下，网页中除了包含网页文件（扩展名为.html，.asp等）外，还要用到图像文件（扩展名为.jpg，.png，.gif等）、Flash动画文件（扩展名为.swf）、脚本文件（扩展名为.js）、样式文件（扩展名为.css）以及视频文件（扩展名为.avi，.flv等）等。在浏览器中选择“文件”“另存为”菜单，将网页保存到磁盘中，便可看到网页的组成文件。三、网页配色基础知识1．色彩简介人们肉眼所能看到的所有颜色都是由红、黄、蓝三种基本原色构成的。基本原色也就是我们通常所说的三原色。原色，又称为基色，是用于调配其他色彩的基本色；将原色以不同比例混合，可以产生其他新颜色。原色的色纯度最高、最纯净、最鲜艳，可以调配出绝大多数色彩，而其他颜色不能调配出三原色。2．色彩特征从色彩的功能上来看，它具有以下基本特征。（1）色彩的冷暖（2）色彩的轻重（3）色彩的软硬（4）色彩的缩扩3．网站配色原则每个网站都有区别于其他网站的风格，同时也有其独特的颜色。由于每种颜色都有不同的代表意义，可以分为行业色彩、区域色彩、企业色彩、宗教色彩以及风格色彩这5类色彩类型。在进行网页配色的时候，要充分考虑各种色彩所代表的意义是否和网站的主题一致。行业色彩每个行业都有其特定的标志色彩。在网页配色的时候，要充分考虑其色彩的特点。政府网站配色要体现它的严肃性，以红、蓝居多；航空网站一般采用蓝色搭配，以体现它的行业特点。例：区域色彩地球上不同的区域有着不同的代表颜色，如蓝色代表海洋，绿色代表森林，黄色代表沙漠，白色代表冰雪。例：公司的CI（企业视觉形象识别系统）形象在现代企业中显得尤其重要，每个公司的CI设计必然要有标准的颜色。比如著名的德芙巧克力公司，使用巧克力色作为主色调，同时形象宣传、海报及广告使用的颜色都和网站的颜色一致。企业色彩宗教色彩每个宗教也有其自身的代表颜色，这些颜色象征着吉祥和神圣。例如在西方的宗教世界里，紫色代表尊贵。在伊朗，淡紫色是伊斯兰教的吉祥色等。例：风格色彩现在是一个倡导个性的社会，所以网页作品也需要体现个性。个性网站的色彩没有严格的限制，只要能够体现作者的个性即可。例：4．网页配色方案颜色在网页制作中运用的是否恰当是非常重要的。最简单的网页是由网页内容、网页标题、导航菜单以及页脚构成的。（1）网页内容网页内容作为网页最重要的组成部分之一，其可读性在网页中南应该是最高的。这就要求在网页中应用的色彩对比度要高。一般网页的背景色彩是非常亮的，而文字是非常暗的，这样其对比度就高了。最佳的选择是白底黑字。网页标题这一区域也应该具有较高的对比度，以便访问者能够快速看到其所在位置。标题通常与页面其他部分有不同的“风貌”，它可以使用与页面内容非常不同的字体颜色。例如：（2）网页标题导航菜单本身不应该太显眼。尽管他对用户很重要，但也不能与网页内容争夺人们的眼球。与被用做网页内容的背景颜色相比，菜单背景的颜色应该设置的暗一些，或者通过较高的颜色对比度、强烈的图形元素或独特的字体将网页内容和菜单准确的区分开来。例如：（3）导航菜单页脚与网页中的其他项相比是最不重要的，因此不能喧宾夺主。要选择对比度为中等的颜色，还要确保它仍能令人赏心悦目。网页中任何内容都不应该使读者在阅读时发生困难。例如：（4）页脚5．网站配色的几点建议（1）尽量使用网页安全色。（2）网页背景颜色与文字对比度要高。（3）尽量避免蓝色与红色，蓝色与黄色，绿色/蓝色与红色这几类颜色同时出现。（4）尽量少用细小的字体或蓝色表格。（5）有些颜色本身是很枯燥的，比如灰色，但配合一些橙色或亮色就会产生完全不同的感觉，可以尝试一下。（6）可以利用留白来平衡网站中的颜色刺激。（7）要始终保持整个网站颜色的统一性。四、网站开发流程网站开发流程是指从企业计划建设网站到网站建设完成的一套规范化运作过程。简单来说，可以把网站开发流程归纳为以下三个阶段：（1）规划和准备阶段；（2）网页设计与制作阶段；（3）网站的发布、推广和维护阶段。（1）规划和准备阶段规划和准备阶段的主要工作有：①需求分析②确定网站主题和内容③收集资料④规划网站风格⑤网站结构（栏目、目录、色彩、布局等）⑥页面形式（2）网页设计与制作阶段设计与制作阶段的主要工作有：①网站总体设计②界面设计③网站各个页面制作④网页超链接（3）网站的发布、推广和维护阶段发布、推广和维护阶段的主要工作有：①测试②调试与完善网站③发布与推广网站④维护和更新网站网站管理与网页制作相关软件当今时代，网络成了最重要的媒体和资源宝库。制作网页可以选择用HTML代码，也可以选择用软件编辑，最好是两者兼用。在制作网页时，除Dreamweaver外还需要用到Photoshop，Flash，Fireworks等辅助软件。DreamweaverCS6工作环境简介启动DreamweaverCS6后，进入如图所示界面：DreamweaverCS6的工作界面由菜单栏、文档标签栏、文档工具栏、文档编辑区、标签选择器、“属性”面板、“文件”面板组等组成。五、网页文档基本操作1.创建新文件，保存、关闭及打开2.站点的创建与管理3.表格的插入与编辑任务实施一、创建“石市科干院”网站站点在学习了前面的基础知识后，本节通过一个实例进一步巩固。二、制作“石市科干院”网站欢迎首页本节通过制作“石市科干院”网站的欢迎首页，来初步了解网页的制作方法。