1、新疆亿欣铝业有限公司网站制作网（论文初稿）摘 要在网络越来越接近我们生活的当今社会，Internet 的应用已普及到了人们生活与工作的各个层面。网页作为一个宣传企业和展示自我的平台，其重要性也越来越受到人们的关注。随着 Adobe 公司发布的 CS3 系列设计软件的出现，Dreamweaver 与 Photoshop、Flash 的结合更加紧密，使用更加方便。熟练地使用这三种设计软件，可以大大提高网页设计和制作的效率，以便制作出精美的网页。本文阐述了当今的发展趋势、现状以及 Dreamweare CS3 网页设计与制作的组件的概况。重点介绍了该企业网站设计制作的过程和功能模块：包括公司介绍、产
2、品信息、行业资讯、用户留言和联系我们五个板块。管理员可增加、修改、删除产品信息，修改、删除留言板帖子， 浏览、删除产品信息等。普通用户登录后可浏览公司及产品信息，查看联系方式在线留言等。关键词：网页设计； Dreamweaver；Photoshop ；Flash；企业网站第 1 章 前言随着 Internet 的迅猛发展,网页设计技术已成为计算机学习的重要内容之一.,而网页设计技术也随着需求的提高不断更新，目前网页设计技术可以分为静态网页技术和动态网页技术两种。 静态网页技术一般是指 HTML 和 CSS 技术.采用静态网页技术的网页只能在网页中展示文字和图片,但它却是所有网页设计的基础技术。
3、动态网页技术是指让网页能够按照用户的需求做出动态响应的技术,例如 JavaScript , VBScript 及 ASP 等技术都属于动态网页技术的范畴. 目前,大部分制作网页的方式,都是运用网页设计软件,这些软件的功能相当强大,使用非常方便.不论是那一种网页设计软件,最后都是将所设计的网页转化为HTML,CSS,JavaScript/VBScript 和 ASP。网页设计是指使用标识语言（markup language)，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面（GUI）的形式被用户所浏览。简单来说，网页设计的目的就是产生网站，什么是网站呢，就是服
4、务器内的一系列网页的组合，终端用户发出请求后服务器通过传输特定的网页向用户传输所需的信息。简单的信息如文字，图片（GIFs， JPEGs，PNGs）和表格，都可以通过使用 HTML/XHTML/XML 放置到网站页面上。而更复杂的信息如vector graphics,动画，视频，声频则需要插件程序例如 Flash, QuickTime, Java run-time environment,等等，这些插件程序也是通过 HTML/XHTML/XML 植入网页的。随着浏览器和 W3C 标准一致性的改善，XHTML/XML（可扩展标识语言）与 CSS（层叠样式表）共同用作网页内容的设计已经被广泛的接受
5、和使用。最新的标准和建议则是朝着浏览器的能力扩充和改善发展，使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。第 2 章 网页设计的基础知识2.1 万维网和浏览器WWW是环球信息网（World Wide Web ）的缩写，也可以简称为 Web，中文名字为“万维网 ”。另外， www也是世界气象监视网的英文简称。Internet Explorer， 简 称 IE 或 MSIE， 是 微 软 公 司 推 出 的 一 款 网 页 浏 览 器 。 Internet Explorer 是 使 用 最 广 泛 的 网 页 浏 览 器 ， 虽 然 自 2004 年 以 来 它 丢 失 了 一 部
6、 分 市场 占 有 率 。 在 2005 年 4 月 ， 它 的 市 场 占 有 率 约 为 85%。 Internet Explorer 是 微 软的 新 版 本 Windows 操 作 系 统 的 一 个 组 成 部 分 。 在 旧 版 的 操 作 系 统 上 ， 它 是 独 立 、 免 费的 。 从 Windows 95 OSR2 开 始 ， 它 被 捆 绑 作 为 所 有 新 版 本 的 Windows 操 作 系 统 中的 默 认 浏 览 器 。 微 软 公 司 于 美 国 当 地 时 间 2009 年 3 月 19 日 上 午 ， 北 京 时 间 2009年 3 月 20 日 凌
7、晨 正 式 发 布 Internet Explorer 8 浏 览 器 ， 并 同 时 开 放 下 载 。2.2 IP 地址和域名域名 表示的组织或机构的类型 域名 表示的组织或机构的类型com 商业机构 firm 商业或公司edu 教育机构或设施 store 商场gov 非军事性的政府机构 web 和 WWW 有关的实体int 国际性机构 arts 文化娱乐mil 军事机构或设施 arc 消遣性娱乐net 网络组织或机构 info 信息服务org 非赢利性组织机构 nom 个人机构域名表 表1- 2.3 HTML 概述与基本结构2.3.1 HTML的概述 HTML的英语意思是：Hyperte
8、xt Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.HTTP 协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作（是World Wide Web的缩写，也可简写WEB 、中文叫做万维网） 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。2.3.2 HTML 的基本结构：一个HTML文档是由一系列的元素和标签组成，元素名不区分大小写，HTM
9、L用标签来规定元素的属性和它在文件中的位置。HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。2.4 文 本文本指的是网页的文字内容部分，其中包括文本的内容、格式、字体样式、连接等。2.4.1 文本的显示 在网页直接输入没有定义任何样式 图 2-1 文本在 IE 中默认效果与属性的文本内容，其显示效果和浏览器的设置有关。其默认的文本显示效果如图所示。2.4.2 文本的格式在网页中可以为文本设置各种格式，其中包括文本中字体的选择、字体的大小、文本的颜色、行高等。在浏览器中，文本内容的字体要依赖浏览者操作系统中的字体，所以最好不
10、要定义特殊字体，通常使用“宋体” 。2.5 图像网页中使用的图像可以分为两个部分：一部分是起修饰作用的图像，一般在页面中起美化作用：另一部分是作为内容的图像，其中有些内容部分的文本内容，因为涉及到特殊的字体，所以也要用图像的方式来显示。2.5.1 矢量图和位图计算机中显示的图形一般可以分为两大类矢量图和位图。矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。位图：又
11、称光栅图，一般用于照片品质的图像处理，是由许多像小方块一样的“像素“组成的图形。由其位置与颜色值表示，能表现出颜色阴影的变化。在 PHOTOSHOP 主要用于处理位图。2.5.2 网页设计中常用的图片格式1，BMP 格式:Windows 系统下的标准位图格式 ,未经过压缩，一般图像文件会比较大。在很多软件中被广泛应用.2，JPEG 格式：也是应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比(可达到 2:1 甚至 40:1)，因为JPEG 格式的文件尺寸较小，下载速度快,所以是互联网上最广泛使用的格式!3，GIF 格式：最大的特点是不仅
12、可以是一张静止的图片,也可以是动画，并且支持透明背景图像，适用于多种操作系统，“体型” 很小，网上很多小动画都是 GIF 格式。但是其色域不太广,只支持 256 种颜色.2.6 多媒体网页中使用的多媒体包括音频文件、视频文件、Flash 动画等内容，其中使用最多的是 Flash 动画。2.6.1 音频多媒体内容在网页中音频文件可以直接作背景使用。如果要再其他浏览器中使用音频文件，则需要使用播放器。2.6.2 Flash 动画在网页中使用的 Flash 动画非常多。Flash 动画可以用来制作站点的片头、Logo、 Banner、页面中的广告等内容。2.6.3视频多媒体内容在网页中无法直接播放视
13、频内容。如果要播放内容，必须使用相应的播放器。2.7 超链接HTML 文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，web 上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们我们可享受丰富多采的多媒体世界。2.8 脚本脚本一般在网页中用来实现某种特殊的效果或功能。通常使用的是JavaScript 和 VBScript，使用 Dreamweaver 等网页制作软件，可以直接在页面中添加脚本。脚本一般用来完成一
14、个或多个相应的动作。第 3 章 网页设计的一般步骤3.1 需求分析 需求分析是制作一个网站的第一步。在制作网站之前，首先要了解客户的需要和要求。这些必要的信息包括客户所要表达的理念、界面显示的内容和栏目的要求、网站功能方面的要求等。根据客户的具体情况，需求也会有所差别。3.2 制作页面效果图制作页面效果图的目的是向客户展示页面的显示效果，以便客户对页面设计提出具体的修改意见。使用效果图的好处在于便于修改，并且方便直观。常使用到的软件是 Photoshop 和 Fireworks，本文以 Photoshop 为主。3.3 制作 Flash 动画在网页中使用的多媒体内容主要为 Flash 动画。因
15、为 Flash 动画内容可以在页面中直接使用，而其他的多媒体内容都需要在客户端安装相应的播放器来支持。3.4 切图在制作静态网页之前，要对效果图进行切片。目的主要是制作页面中使用的修饰图片。主要工具是 Photoshop。3.5 制作静态 Web 页面静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。静态页面需要占一定的服务器空间，且不能自主管理发布更新的页面,如果想更新网页内容,要通过 FTP 软件把文件 DOWN 下来用网页制作软件修改。制作静态页面通常使用的软件是 Dreamweaver。一般是 HTML 页面，文件的后缀名为.html。3.6 添加程序添加程序
16、的目的是使页面能够和服务器中的资源进行交互，一般要涉及对数据库的操作。根据使用的程序语言不同，网页中的使用程序可以分为 ASP 程序、ASP.NET 程序、JSP 程序、PHP 程序等。3.7 Web 站点的发布、推广和维护客户对网页的所有功能和页面都确认后，就可以正式发布制作好的站点了。网站的推广和维护也是网站建设中相当重要的部分。针对站点的性质和不同的需求，推广和维护的方法也不尽相同。其中推广的方法包括百度等搜索引擎上的推广、相关论坛推广、邮件推广等。维护需指定专业人士来做定期的维护。第 4 章 软件与硬件的设施4.1 硬件操作系统：Microsoft Windows XP Profess
17、ional设备：Pentium（R）4 CPU 3.06GHz 512MB 的内存 NVIDIA GeForce 7100 GS 的显卡 1280*1024 的分辨率 80GB 的可用磁盘空间 DVD-ROM 驱 动 器4.2 软件4.2.1 Dreamweaver CS3Dreamweaver 是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着 Dreamweaver CS 系列的发布，更坚定 Dreamweaver 在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。1、灵活的编写方式Dr
18、eamweaver 具有灵活编写网页的特点，不但将世界一流水平的“设计” 和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。2、可视化编辑界面Dreamweaver 是一种所见即所得的 HTML 编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的 HTML 编辑器和任何第三方的 HTML 编辑器进行实时的访问。无论用户习惯手工输入 HTML 源代码还是使用可视化的编辑界面，Dreamweaver 都能提供便捷的方式使用户设计网页和管理网站变得更容易。3、功能更多的 CSS 支持
19、CSS 可视化设计、CSS 检查工具4、动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags 或 CSS 结构。动态跨浏览器有效性检查功能可以自动核对 tags 和 CSS 规则是否适应目前的主浏览器。5、强大的 WEB 站点管理功能6、内建的图形编辑引擎7、Dreamweaver 的集成特性Dreamweaver CS3 继承了 Fireworks、Flash 和 Shockwave 的集成特性，可以在这些 Web 创作工具之间自由地切换，轻松地创建美观实用的网页。8、丰富的媒体支持能力可以
20、方便地加入 Java、Flash、Shockwave 、ActiveX 以及其他媒体。Dreamweaver 具有强大的多媒体处理功能，在设计 DHTML 和 CSS 方面表现得极为出色，它利用 JavaScript 和 DHTML 语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver 还提供行为和时间线两种控件来产生交互式响应和进行动画处理。9、超强的扩展能力Dreamweaver 还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver 的功能，并且可以发布这些插件。4.2.2 Adobe Photoshop CS3Adobe Photoshop 是公认的最好的
21、通用平面美术设计软件。由 Adobe 公司开发设计。其用户界面易懂，功能完善，性能稳定，所以，在几乎所有的广告、出版、软件公司，Photoshop 都是首选的平面工具。Photoshop 的专长在于图像处理，而不是图形创作。有必要区分一下这两个概念。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形，这类软件主要有 Adobe 公司的另一个著名软件 Illustrator 和 Micromedia 公司的 Freehand。 Photoshop CS3 新增的特性及功能: 1、Photoshop
22、CS3 最大的改变是工具箱，变成可伸缩的，可为长单条和短双条。 2、工具箱上的快速蒙版模式和屏幕切换模式也改变了切换方法。 3、工具箱的选择工具选项中，多了一个组选择模式，可以自己决定选择组或者单独的图层。 4、工具箱多了快速选择工具 Quick Selection Tool，应该魔术棒的快捷版本，可以不用任何快捷键进行加选， 按往不放可以像绘画一样选择区域，非常神奇。当然选项栏也有新、加、减三种模式可选，快速选择颜色差异大的图像会非常的直观、快捷。 5、所有的选择工具都包含重新定义选区边缘(Refine Edge)的选项，比如定义边缘的半径，对比度，羽化程度等等，可以对选区进行收缩和扩充。另
23、外还有多种显示模式可选，比如快速蒙版模式和蒙版模式等，非 常 方便。举例来说，您做了一个简单的羽化，可以直接预览和调整不同羽化值的效果。当然，选择菜单里熟悉 的羽化命令从此退出历史舞台。6、调板可以缩为精美的图标，有点儿像 CorelDraw 的泊坞窗，或者像 Flash 的面板收缩状态，不过相比之下这个更酷，两层的收缩，感觉超棒！ 7、多了一个“克隆（仿制）源”调板，是和仿制图章配合使用的，允许定义多个克隆源（采样点），就好像 Word 有多个剪贴版内容一样。另外克隆源可 以进行重叠预览，提供具体的采样坐标，可以对克隆源进行移位缩放、旋转、混合等编辑操作。克隆源可以是针对一个图层，也可以是上
24、下两个，也可以是所有图 层，这比之前的版本多了一种模式。 8、在 Adobe Bridge 的预览中可以使用放大镜来放大局部图像，而且这个放大镜还可以移动，还可以旋转。如果同 时选中了多个图片，还可以一起预览，真是酷毙了。 9、Adobe Bridge 添加了 Acrobat Connect 功能，用来开网络会议的，前身是Macromedia 的降将 Breeze。 10、Bridge 可以直接看 Flash FLV 格式的视频了，另外 Bridge 启动感觉好快，比 CS2和 CS 两个版本都要快，没有任 何拖累感和“死机感” 。 11、在 Bridge 中，选中多个图片，按下 Ctrl+G
25、 可以堆叠多张图片，当然随时可以单击展开，这个用来节省空间 12、新建对话框添加了直接建立网页、视频和手机内容的尺寸预设值。比如常用的网页 Banner 尺寸，再比如常见的手机屏幕尺寸等等4.2.3 Adobe Flash CS3Adobe Flash CS3 是 Adobe 公司收购 Macromedia 公司后将享誉盛名Macromedia Flash 更名为 Adobe Flash 后的一款动画软件。 Flash 软件可以实现多种动画特效,动画都是由一帧帧的静态图片在短时间内连续播放而造成的视觉效果,是表现动态过程、阐明抽象原理的一种重要媒体.使用设计合理的动画,不仅有助于学科知识的表达和传播,使学习者加深对所学知识的理解,提高学习兴趣和教学效率,同时也能为课件增加生动的艺术效果,特别对于以抽象教学内容为主的课程更具有特殊的应用意义.第 5 章 网页具体制作5.1 需求分析
