关于网站制作报告

论文关键词：dreamweaver 、adobe photoshop、flash mx

论文摘要：网页的内容通常是由图片和文字组成。由文字构成网页的主体，而图片则能够美化和增色你的网页。那些包含了设计精美图片的网站，往往能让浏览者流连忘返。因此，有漂亮的图片是你的网页能吸引人的一个有力保证。

一、介绍

超链接是网页中最活泼、最有吸引力的一种元素。表单用于特殊的信息，使用户和网站进行交互，使你找到用户的详细信息。表格在许多工作中有着广泛的应用。

框架网页是一种特殊的html网页，使用框架网页可以同时浏览几个不同的web页面，使用web页面显示一致的用户界面和灵活的页面内容。

网页制作的高级技术包括：在网页中插入flas利用java或者javascript制作网页的动态效果。网页中使用插件，视频等web组件以及创建、和管理站点等技术。

web页面往往是具有各种各样的页面元素、丰富的内容和复杂的布局。因此仅仅使用到一种或者两种网页制作技术，不可能创作出一个优秀的web页面，一个美观而实用的web页面往往需要综合利用各种技术。

二、概述

1. 网站名称：“济南中天环保设备有限公司”

2. 步骤：

(1) 确立主题

(2) 收集资料

(5) 美化网页

三、目的

运用已经掌握的知识完成一个环境保护企业网站。通过此次设计可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握运用dreamweaver制作网页的基础上再加以实践，进一步提高、加强自身的综合能力。

四、要求

根据公司的要求，设计一个企业站点，以达到宣传该公司及其产品的目的。有整体框架结构，表格定位等，布局合理，色彩搭配协调统一，内容丰富多彩，页面风格独特。

五、设计工具

dreamweaver、flash、photoshop等。

六、站点构思

1.整体构思：

本网站主题为：济南中天环保设备有限公司。总共有网页24个。主页是一个总目录的网页，里面加有网页动画效果“滚动字幕”及flas，本站几个主要分网页分别为：公司简介、资质认证、产品介绍、业务范围、经营业绩、联系方式。还有许多子网页。

2.页面构思：

下面介绍一下网站中的几个网页的制作。

业务范围中的二氧化氯发生器产品公司服务承诺页面，背景色采用跟主页一样的蓝色，淡蓝色的背景给人以干净大方的感觉，与环保网站的主旨相一致。上方为flas与链接页，左下方是用photoshop

处理过的图片，与主页是一致的。右边的标题是用photoshop制作的图片，小标题采用斜体加黑，这样制作丰富了页面内容，使整个页面条理清晰。服务承诺分条目标示，一目了然。最后的“空气净化服务范围”标题，即可以链接到空气净化服务范围页面。

标题“服务范围和承诺”是用photoshop制作的，先用油漆桶工具把背景色填充为与页面相同的淡蓝色，调整文字的大小与位置，两边分别加上符号“【”、“】”和“”，使图片看起来更加美观。

经营业绩页面，背景色与flas，链接页与主页保持一致。这一页的主要内容是用表格形式来固定的，边框设置为1，颜色为淡灰色。表格宽度与flash宽度一致。整个页面清晰有致，比较大方，浏览者可以清楚的看到公司近年来的经营业绩。

联系方式页面，左下方的图片与右边的标题都是用photoshop制作的，在联系方式中还添加了一个outlook express电子邮件，方便用户与公司的联系，用户可以直接点击给公司发送邮件。outlook express作为全球范围内的联机通讯软件，已经被越来越多的人所接受，无论是与同事和朋友交换电子邮件，还是加入新闻组进行思想与信息的交流，outlook express都已成为不可或缺的助手。联系方式中除了电子邮件，还列出了公司地址，电话，传真，邮编。

左边的图片是在photoshop中，先用椭圆选框工具选中所要的部分，放置新建的画布中，再用油漆桶工具把空白处填充为与页面背景相同的蓝色并对画面进行淡化处理。右边的标题是在photoshop中，用油漆桶工具填充背景色，然后写上“联系方式”，调整其大小与位置，“方式”二字较“联系”稍小一些，左右分别加上符号“”，“「”，“”，“”，使图片放置页面中显得美观，更突出了主题内容。

fls－系列风淋室，净化空调厂房，中效送风机组，各种医疗器械设备及实验室设备等页面由页面“产品介绍”链接的，并且均以淡蓝色为背景底色。页面大部分有图片和文字两部分组成。文字部分由表格固定，表格边框设为零，图片是用photoshop制作成的。

所有页面整齐划一，设计风格保持一致，加上淡蓝色的背景，给人简洁、明了、大方的感觉。

七 所用各技术的特点

1.dreamweaver : dreamweaver是美国macromedia公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。dreamweaver是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。dreamweaver的介入，使得网页一些部分的实现变得更加直观简便。

dreamweaver的主要特点：

最佳的制作效率

dreamweaver可以用最快速的方式将fireworks，freehand，或photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。dremweaver能与您喜爱的设计工具，如playback flash，shockwave和外挂模组等搭配，不需离开dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使dreamweaver自动开启firework或photoshop来进行编辑与设定图档的最佳化。

网站管理

使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网页位置或档案名称，dreamweaver会自动更新所有链接。使用支援文字，html码，html属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

无可比拟的控制能力

dreamweaver是唯一提供roundtrip html、视觉化编辑与原始码编辑同步的设计工具。它包含homesite和bbedit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。

所供即所得

dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给third-party厂商，包含asp， apache，broadvision， cold fusion，icat， tango与自行发展的应用软体。当您正使用dreamweaver在设计动态网页时，所供即所得的功能，让您不需要透过浏览器就能预览网页。

梦幻样版和xml

dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页建立网页外观的样版，指定可编辑或不可编辑的部分，内容提供者可直接编辑以样式为主的内容，却不会不小心改变既定之样式。您也可以使用样版正确地汇入或输出xml内容。

全方位的呈现

利用dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态html支援和鼠标换图效果，声音和动画的dhtml效果资料库可在netscape和microsoft浏览器上执行。使用不同浏览器检示功能，dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从dreamweaver的网站下载它的描述档，便可得知详尽的成效报告。

2.photoshop:adobe photoshop 在绘图、色彩调整等诸多方面有着出色的功能，集成度高、适应面广和操作简便。他不仅提供强大的绘图工具，可以直接绘制艺术图形，还能直接从扫描仪，数码相机等设备中采集图像，并对他们进行编辑、修复、以及调整效果，同时可以改变图像的颜色模式，并能在图像中制作艺术文字等。photoshop中的高级绘图工具，可自动生成背景纹理、图层效果，多种特殊效果滤镜，可创建多种艺术效果和绚丽的web图形并可直接在photoshop中定义和编辑切片的工具透明控制，包括用于混合到任意背景中的边缘的仿色透明度。强大的彩色校正工具——修复画笔，可在消除瑕疵的同时保留色调和纹理图层。photoshop的强大工具可以使操作者不管制作任何图像都游刃有余。对于设计网页，photoshop是不可或缺的工具，是强大的图片处理工具。

3.flashmx: macromedia公司出品的flash是制作网页动画的利器。严格来说， f1ash是网络多媒体制作工具而不是网页编辑工具。f1ash是制作动感网页的权威。对于使用者来说，只需很短时间的学习，就可以用它制作出美观的网页动画。可以让制作者随心所欲地实现各种创意，并且可以和javascript一起创作出具有强大交互性的网页动画。

flash是一种绘制矢量图形和创作互动多媒体动画的软件。它可以用少量的矢量数据就可以描述相当复杂的对象，所以生成的文件尺寸小，便于在网上传输。flash创建的动画集可以插入到html文档中，也可以单独制作网页。使网页的效果更加完美。

八 网页制作的优缺点

比较明确，风格统一。并运用了一些其它的设计软件加以辅助设计。使网页更加具有动感，形式丰富。就内容而言，比较丰富。大量运用了图片，并进行了文字说明，做到了图文并茂。但是由于我们刚接触网页制作，做出的效果还是有些稚嫩的，需要以后不断的实践。

九 代码

1．滚动字幕

<td height="167"> <marquee id=news onmouseover=this.stop()

style="font-weight: normal; left: 0px; margin-left: 1px; top: 1px; text-align: center"

onmouseout=this.start() scrollamount=1 scrolldelay=50

direction=up behavior=loop width=250 height=150 background="">

<p style="margin-top: 5px; margin-bottom: 5px"><a

href="http://untitled-21.htm" target=_blank>二氧化氯的发展史 </a></p>

<p style="margin-top: 5px; margin-bottom: 5px"><a

href="http://untitled-22.htm" target=_blank>二氧化氯对健康的影响 </a></p>

<p style="margin-top: 5px; margin-bottom: 5px"><a

href="http://untitled-23.htm"

target=_blank>二氧化氯作为水体消毒剂的特性</a></p>

<p style="margin-top: 5px; margin-bottom: 5px"><a

href="http://untitled-24.htm"

target=_blank>二氧化氯的主要应用领域：用于造纸、用于饮用水处理、用于环境废物处理、用于油田......</a></p>

</marquee> &nbsp; </td>

2．链接站点

<select class=ourfont

style="margin: 0px; color: #000000; background-color: #ffffff"

onchange=javascript:window.open(this.options[this.selectedindex].value)

size=1 name=select>

<option selected>友情链接站点</option>

<option

value=.cn>新浪网</option>

<option

value=>网易</option>

<option

value=>搜狐网</option>

<option

value=>新视听</option>

<option

value=>中华网</option>

<option

value=>雅虎</option>

<option

value=>263首都在线</option>

<option

value=>索易</option>

</select>

</p>

<p align="center"><font color="#333333" size="2">

<select

class=ourfont

style="margin: 0px; color: #000000; background-color: #ffffff"

onchange=javascript:window.open(this.options[this.selectedindex].value)

size=1 name=number1>

<option selected>环境保护站点</option>

<option

value=/>国家环境保护总局

<option

value=/>北京市环境保护局

<option

value=/>山东环境

<option

value=/default.aspx>济南市环境保护局

<option

value=/>青岛海晟环保技术

</select>

3．下拉列表

<select class=ourfont

style="margin: 0px; color: #000000; background-color: #ffffff"

onchange=javascript:window.open(this.options[this.selectedindex].value)

size=1 name=select>

<option selected>

产品介绍</option>

<option

value="untitled-6.htm" target="_blank">二氧化氯发生器-wpr型</option>

<option

value="untitled-7.htm" target="_blank">二氧化氯发生器-wprⅰ型</option>

<option

value="untitled-8.htm" target="_blank">二氧化氯发生器-wprⅱ型</option>

<option

value="untitled-18.htm" target="_blank">二氧化氯发生器型号说明</option>

<option

value="untitled-9.htm" target="_blank">破氰、除铬一体化设备</option>

<option

value="untitled-10.htm" target="_blank">zt系列空气净化工作台</option>

<option

value="untitled-11.htm" target="_blank">zt系列百级层流罩</option>

<option

value="untitled-12.htm" target="_blank">zt系列高效自净器</option>

<option

value="untitled-13.htm" target="_blank">zt系列高效空气过滤器</option>

<option

value="untitled-14.htm" target="_blank">fls-系列风淋室</option>

<option

value="untitled-15.htm" target="_blank">净化空调厂房</option>

<option

value="untitled-16.htm" target="_blank">中效送风机组</option>

<option

value="untitled-17.htm" target="_blank">各种医疗器械设备及实验室</option>

</select>

参考文献

1.魏洪斌 《dreamweaver mx网页设计》清华大学出版社

2.马波 《dreamweaver mx完美网页设计与制作》中国青年出版社

3.黄梦 《dreamweaver mx完全征服手册》中国青年出版社

4.周明涛 《dreamweaver mx网页设计指南》机械工程出版社

5.陈青、刘时燕、macromedia 《flash mx标准案例教材》人民邮电出版社

6.刘淼 《flash mx入门与提高》人民邮电出版社

7.李伟 《flash mx动画制作实例教程》清华大学出版社

8.刘睿、陈志宇 《photoshop6.0实用教程》山东科学技术出版社

9.飞思教育产品研发中心 《photoshop6.0基础及应用教程》北京电子工业出版社

10.（美）barry haynes、wendy grumpter、陈玉明、李玉龙 《老照片，新照片：photoshop绘画与创意》电子工业出版社