环保设备网站设计制作李悦.docx
《环保设备网站设计制作李悦.docx》由会员分享,可在线阅读,更多相关《环保设备网站设计制作李悦.docx(6页珍藏版)》请在冰豆网上搜索。
环保设备网站设计制作李悦环保设备网站设计制作李悦环保设备网站设计制作-李悦作者:
日期:
环保设备网站设计制作ENVIRENTALPROTECIONUIPMTESSIGMFAR专业:
(计算机应用技术)姓名:
(李悦)指导教师姓名:
(王丹丹)报告提交日期:
(2011年月)天津科技大学摘要网页的内容通常是由图片和文字组成。
由文字构成网页的主体,而图片则能够美化和增色你的网页。
那些包含了设计精美图片的网站,往往能让浏览者流连忘返。
因此,有漂亮的图片是你的网页能吸引人的一个有力保证。
关键词:
reaeaver、dobphtoho、FlahMXATRAThecntentsofthewebstisusllcoposedbyimagesadext.ytarctrlayoutaeinbdy,thepicture,canbeautifiaionadgacsorwebes.hosewhocontaieeantdesignpicturwebite,oftenvieerslgever.ereor,aeutupictureisyorwebpedrwsapowerulguaraneeeywods:
Daweave、Adoepotshp、FlahMX目录引言1一、项目应用软件应用软件:
reamwever、Flsh、Poshop1二、网站内容1项目概述及需求分析11.网站建设总体目的112网站设计原则12.网页设计12.整体构思122页面设计13.所用技术特点3.1最佳制作效率33.2Dreamweaver的主要特点3.3无可比拟的控制能力3.所供即所得33.梦幻样版和XM3.6全方位的呈现.网页制作的优缺点4结论.参考文献致谢4引言超链接是网页中最活泼、最有吸引力的一种元素。
表单用于特殊的信息,使用户和网站进行交互,使你找到用户的详细信息。
表格在许多工作中有着广泛的应用。
框架网页是一种特殊的HM网页,使用框架网页可以同时浏览几个不同的eb页面,使用Web页面显示一致的用户界面和灵活的页面内容。
网页制作的高级技术包括:
在网页中插入FASH动画利用Jaa或者JvaSrit制作网页的动态效果。
网页中使用插件,视频等We组件以及创建、发布和管理站点等技术。
Web页面往往是具有各种各样的页面元素、丰富的内容和复杂的布局。
因此仅仅使用到一种或者两种网页制作技术,不可能创作出一个优秀的Web页面,一个美观而实用的We页面往往需要综合利用各种技术。
1、项目应用软件应用软件:
Dramweavr、Fash、Photosop二、网站内容.项目概述及需求分析11网站建设总体目的运用已经掌握的知识完成一个环境保护企业网站。
通过此次设计可以达到全面理解、运用网页制作的知识,并使之得以融会贯通,在掌握运用Dremweaer制作网页的基础上再加以实践,进一步提高、加强自身的综合能力。
1.2网站设计原则设计一个企业站点,以达到宣传该公司及其产品的目的。
有整体框架结构,表格定位等,布局合理,色彩搭配协调统一,内容丰富多彩,页面风格独特。
2网页设计2.整体构思本网站主题为:
环保设备网站。
总共有网页4个。
主页是一个总目录的网页,里面加有网页动画效果“滚动字幕”及Flash动画,本站几个主要分网页分别为:
公司简介、资质认证、产品介绍、业务范围、经营业绩、联系方式。
还有许多子网页。
2.2页面设计下面介绍一下网站中的几个网页的制作。
业务范围中的二氧化氯发生器产品公司服务承诺页面,背景色采用跟主页一样的蓝色,淡蓝色的背景给人以干净大方的感觉,与环保网站的主旨相一致。
上方为lash动画与链接页,左下方是用hosop处理过的图片,与主页是一致的。
右边的标题是用Photoso制作的图片,小标题采用斜体加黑,这样制作丰富了页面内容,使整个页面条理清晰。
服务承诺分条目标示,一目了然。
最后的“空气净化服务范围”标题,即可以链接到空气净化服务范围页面。
标题“服务范围和承诺”是用Potoshop制作的,先用油漆桶工具把背景色填充为与页面相同的淡蓝色,调整文字的大小与位置,两边分别加上符号“【”、“】”和“”,使图片看起来更加美观。
经营业绩页面,背景色与Flas动画,链接页与主页保持一致。
这一页的主要内容是用表格形式来固定的,边框设置为1,颜色为淡灰色。
表格宽度与Fash宽度一致。
整个页面清晰有致,比较大方,浏览者可以清楚的看到公司近年来的经营业绩。
联系方式页面,左下方的图片与右边的标题都是用htoshp制作的,在联系方式中还添加了一个outoxpress电子邮件,方便用户与公司的联系,用户可以直接点击给公司发送邮件。
olookxress作为全球范围内的联机通讯软件,已经被越来越多的人所接受,无论是与同事和朋友交换电子邮件,还是加入新闻组进行思想与信息的交流,OutlookExrss都已成为不可或缺的助手。
联系方式中除了电子邮件,还列出了公司地址,电话,传真,邮编。
左边的图片是在Potshp中,先用椭圆选框工具选中所要的部分,放置新建的画布中,再用油漆桶工具把空白处填充为与页面背景相同的蓝色并对画面进行淡化处理。
右边的标题是在Photoshop中,用油漆桶工具填充背景色,然后写上“联系方式”,调整其大小与位置,“方式”二字较“联系”稍小一些,左右分别加上符号“”,“”,“”,“”,使图片放置页面中显得美观,更突出了主题内容。
FS系列风淋室,净化空调厂房,中效送风机组,各种医疗器械设备及实验室设备等页面由页面“产品介绍”链接的,并且均以淡蓝色为背景底色。
页面大部分有图片和文字两部分组成。
文字部分由表格固定,表格边框设为零,图片是用Phoosho制作成的。
所有页面整齐划一,设计风格保持一致,加上淡蓝色的背景,给人简洁、明了、大方的感觉。
3.所用技术特点3.1最佳制作效率Dmweaver可以用最快速的方式将Firework,reeHand,或Photoshop等档案移至网页上。
使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。
对于选单,快捷键与格式控制,都只要一个简单步骤便可完成。
Dremwav能与您喜爱的设计工具,如laybacFlas,howave和外挂模组等搭配,不需离开Dremweavr便可完成,整体运用流程自然顺畅。
除此之外,只要单击便可使Deamevr自动开启Fiewor或otoshop来进行编辑与设定图档的最佳化Dreamweaer的主要特点Deaweavr:
raeav是美国CROMEIA公司开发的集网页制作和管理网站于一身的网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreameaver是当前主流的站点和网页编辑器,其代码简洁、兼容性和整体功能都很强。
Dreamweavr的介入,使得网页一些部分的实现变得更加直观简便。
.3无可比拟的控制能力ewa是唯一提供RondtipHM、视觉化编辑与原始码编辑同步的设计工具。
它包含Homeite和BBEt等主流文字编辑器。
帧(fams)和表格的制作速度快的令您无法想像。
进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
甚至可以排序或格式化表格群组,eawer支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。
3.4所供即所得Demeaver成功整合动态式出版视觉编辑及电子商务功能,提供超强的支援能力给ird-ry厂商,包含A,Aace,Broadision,CldFson,AT,Tang与自行发展的应用软体。
当您正使用Damweave在设计动态网页时,所供即所得的功能,让您不需要透过浏览器就能预览网页。
.5梦幻样版和MLDramwver将内容与设计分开,应用于快速网页更新和团队合作网页编辑。
建立网页外观的样版,指定可编辑或不可编辑的部分,内容提供者可直接编辑以样式为主的内容,却不会不小心改变既定之样式。
您也可以使用样版正确地汇入或输出XML内容。
3.6全方位的呈现利用Deamwevr设计的网页,可以全方位的呈现在任何平台的热门浏览器上。
对于cascadngstylesets的动态HTML支援和鼠标换图效果,声音和动画的DHTML效果资料库可在tscpe和Microsoft浏览器上执行。
使用不同浏览器检示功能,Dramweaver可以告知您在不同浏览器上执行的成效如何。
当有新的浏览器上市时,只要从Dreamweavr的网站下载它的描述档,便可得知详尽的成效报告。
4.网页制作的优缺点比较明确,风格统一。
并运用了一些其它的设计软件加以辅助设计。
使网页更加具有动感,形式丰富。
就内容而言,比较丰富。
大量运用了图片,并进行了文字说明,做到了图文并茂。
但是由于我们刚接触网页制作,做出的效果还是有些稚嫩的,需要以后不断的实践。
结论:
通过运用所学知识,软件实现了网站的功能及效果。
参考文献:
.魏洪斌DreameaerM网页设计清华大学出版社2马波DreamwverX完美网页设计与制作中国青年出版社.黄梦DreamweaveMX完全征服手册中国青年出版社4周明涛DaweaeMX网页设计指南机械工程出版社5.陈青、刘时燕、maomediaFlsX标准案例教材人民邮电出版社6.刘淼FlahMX入门与提高人民邮电出版社7.李伟FlasMX动画制作实例教程清华大学出版社8.刘睿、陈志宇Potohop6.实用教程山东科学技术出版社9.飞思教育产品研发中心Potosh0基础及应用教程北京电子工业出版社10.(美)BarrHyns、endyGupt、陈玉明、李玉龙老照片,新照片:
Photosop绘画与创意电子工业出版社致谢:
感谢老师以及学校的教导,培育。