环保设备网站设计制作李悦.docx
- 文档编号:6736867
- 上传时间:2023-05-10
- 格式:DOCX
- 页数:6
- 大小:20.40KB
环保设备网站设计制作李悦.docx
《环保设备网站设计制作李悦.docx》由会员分享,可在线阅读,更多相关《环保设备网站设计制作李悦.docx(6页珍藏版)》请在冰点文库上搜索。
环保设备网站设计制作李悦
环保设备网站设计制作----------李悦
————————————————————————————————作者:
————————————————————————————————日期:
ﻩ
环保设备网站设计制作
ENVIRONMENTALPROTECCTIONEQUIPMENTWEBSITE DESIGNMUNFACTURE
专 业:
(计算机应用技术)
姓 名:
(李悦)
指导教师姓名:
(王丹丹)
报告提交日期:
(2011年11月)
天津科技大学
摘 要
网页的内容通常是由图片和文字组成。
由文字构成网页的主体,而图片则能够美化和增色你的网页。
那些包含了设计精美图片的网站,往往能让浏览者流连忘返。
因此,有漂亮的图片是你的网页能吸引人的一个有力保证。
关键词:
Dreamweaver 、Adobephotoshop、FlashMX
ABSTRACT
The contentsof thewebsiteisusuallycomposedbyimagesandtext. By the character layoutpage main body,thepicture,canbeautificationandgracesyourweb pages.Thosewhocontainelegant designpicturewebsite,often viewerslingerover.Therefore,abeautiful picture isyourwebpagedrawsa powerfulguarantee.
Keywords:
Dreamweaver 、Adobephotoshop、FlashMX
目 录
引言 ……………………………………………………………………1
一、项目应用软件
应用软件:
Dreamweaver、Flash、Photoshop …………1
二、网站内容
1.项目概述及需求分析……………………………………………1
1.1ﻩ网站建设总体目的…………………………………………1
1.2网站设计原则ﻩ……………………………………………1
2.网页设计…………………………………………………………1
2.1整体构思ﻩ……………………………………………………1
2.2ﻩ页面设计……………………………………………………1
3.所用技术特点……………………………………………………3
3.1 最佳制作效率……………………………………………3
3.2 Dreamweaver的主要特点……………………………3
3.3无可比拟的控制能力ﻩ……………………………3
3.4所供即所得 ……………………………3
3.5梦幻样版和XML ……………………………3
3.6全方位的呈现 ……………………………4
4.网页制作的优缺点………………………………………………4
结论 ..............................................4
参考文献………………………………………………………………………4
致谢ﻩ …………………………………………………………………………4
引言
超链接是网页中最活泼、最有吸引力的一种元素。
表单用于特殊的信息,使用户和网站进行交互,使你找到用户的详细信息。
表格在许多工作中有着广泛的应用。
框架网页是一种特殊的HTML网页,使用框架网页可以同时浏览几个不同的Web页面,使用Web页面显示一致的用户界面和灵活的页面内容。
网页制作的高级技术包括:
在网页中插入FLASH动画利用Java或者JavaScript制作网页的动态效果。
网页中使用插件,视频等Web组件以及创建、发布和管理站点等技术。
Web页面往往是具有各种各样的页面元素、丰富的内容和复杂的布局。
因此仅仅使用到一种或者两种网页制作技术,不可能创作出一个优秀的Web页面,一个美观而实用的Web页面往往需要综合利用各种技术。
1、项目应用软件
应用软件:
Dreamweaver、Flash、Photoshop
二、网站内容
1.项目概述及需求分析
1.1网站建设总体目的
运用已经掌握的知识完成一个环境保护企业网站。
通过此次设计可以达到全面理解、运用网页制作的知识,并使之得以融会贯通,在掌握运用Dreamweaver制作网页的基础上再加以实践,进一步提高、加强自身的综合能力。
1.2网站设计原则
设计一个企业站点,以达到宣传该公司及其产品的目的。
有整体框架结构,表格定位等,布局合理,色彩搭配协调统一,内容丰富多彩,页面风格独特。
2. 网页设计
2.1整体构思
ﻩ本网站主题为:
环保设备网站。
总共有网页24个。
主页是一个总目录的网页,里面加有网页动画效果“滚动字幕”及Flash动画,本站几个主要分网页分别为:
公司简介、资质认证、产品介绍、业务范围、经营业绩、联系方式。
还有许多子网页。
2.2页面设计
ﻩ下面介绍一下网站中的几个网页的制作。
业务范围中的二氧化氯发生器产品公司服务承诺页面,背景色采用跟主页一样的蓝色,淡蓝色的背景给人以干净大方的感觉,与环保网站的主旨相一致。
上方为Flash动画与链接页,左下方是用Photoshop
处理过的图片,与主页是一致的。
右边的标题是用Photoshop制作的图片,小标题采用斜体加黑,这样制作丰富了页面内容,使整个页面条理清晰。
服务承诺分条目标示,一目了然。
最后的“空气净化服务范围”标题,即可以链接到空气净化服务范围页面。
标题“服务范围和承诺”是用Photoshop制作的,先用油漆桶工具把背景色填充为与页面相同的淡蓝色,调整文字的大小与位置,两边分别加上符号“【”、“】”和“≡”,使图片看起来更加美观。
经营业绩页面,背景色与Flash动画,链接页与主页保持一致。
这一页的主要内容是用表格形式来固定的,边框设置为1,颜色为淡灰色。
表格宽度与Flash宽度一致。
整个页面清晰有致,比较大方,浏览者可以清楚的看到公司近年来的经营业绩。
联系方式页面,左下方的图片与右边的标题都是用Photoshop制作的,在联系方式中还添加了一个outlookexpress电子邮件,方便用户与公司的联系,用户可以直接点击给公司发送邮件。
outlook express作为全球范围内的联机通讯软件,已经被越来越多的人所接受,无论是与同事和朋友交换电子邮件,还是加入新闻组进行思想与信息的交流,OutlookExpress都已成为不可或缺的助手。
联系方式中除了电子邮件,还列出了公司地址,电话,传真,邮编。
左边的图片是在Photoshop中,先用椭圆选框工具选中所要的部分,放置新建的画布中,再用油漆桶工具把空白处填充为与页面背景相同的蓝色并对画面进行淡化处理。
右边的标题是在Photoshop中,用油漆桶工具填充背景色,然后写上“联系方式”,调整其大小与位置,“方式”二字较“联系”稍小一些,左右分别加上符号“≡”,“「”,“」”,“≡”,使图片放置页面中显得美观,更突出了主题内容。
FLS-系列风淋室,净化空调厂房,中效送风机组,各种医疗器械设备及实验室设备等页面由页面“产品介绍”链接的,并且均以淡蓝色为背景底色。
页面大部分有图片和文字两部分组成。
文字部分由表格固定,表格边框设为零,图片是用Photoshop制作成的。
所有页面整齐划一,设计风格保持一致,加上淡蓝色的背景,给人简洁、明了、大方的感觉。
3.所用技术特点
3.1最佳制作效率
ﻩDreamweaver可以用最快速的方式将Fireworks,FreeHand,或Photoshop等档案移至网页上。
使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。
对于选单,快捷键与格式控制,都只要一个简单步骤便可完成。
Dremweaver能与您喜爱的设计工具,如PlaybackFlash,Shockwave和外挂模组等搭配,不需离开Dremweaver便可完成,整体运用流程自然顺畅。
除此之外,只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化
3.2Dreamweaver的主要特点
ﻩDreamweaver:
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver是当前主流的站点和网页编辑器,其代码简洁、兼容性和整体功能都很强。
Dreamweaver的介入,使得网页一些部分的实现变得更加直观简便。
3.3无可比拟的控制能力
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。
它包含HomeSite和BBEdit等主流文字编辑器。
帧(frames)和表格的制作速度快的令您无法想像。
进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
甚至可以排序或格式化表格群组,Dreamweaver支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。
3.4所供即所得
ﻩDreamweaver成功整合动态式出版视觉编辑及电子商务功能,提供超强的支援能力给Third-party厂商,包含ASP,Apache,BroadVision, Cold Fusion,iCAT,Tango与自行发展的应用软体。
当您正使用Dreamweaver在设计动态网页时,所供即所得的功能,让您不需要透过浏览器就能预览网页。
3.5梦幻样版和XMLﻩ
Dreamweaver将内容与设计分开,应用于快速网页更新和团队合作网页编辑。
建立网页外观的样版,指定可编辑或不可编辑的部分,内容提供者可直接编辑以样式为主的内容,却不会不小心改变既定之样式。
您也可以使用样版正确地汇入或输出XML内容。
3.6全方位的呈现ﻩ
利用Dreamweaver设计的网页,可以全方位的呈现在任何平台的热门浏览器上。
对于cascadingstylesheets的动态HTML支援和鼠标换图效果,声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。
使用不同浏览器检示功能,Dreamweaver可以告知您在不同浏览器上执行的成效如何。
当有新的浏览器上市时,只要从Dreamweaver的网站下载它的描述档,便可得知详尽的成效报告。
4.网页制作的优缺点
比较明确,风格统一。
并运用了一些其它的设计软件加以辅助设计。
使网页更加具有动感,形式丰富。
就内容而言,比较丰富。
大量运用了图片,并进行了文字说明,做到了图文并茂。
但是由于我们刚接触网页制作,做出的效果还是有些稚嫩的,需要以后不断的实践。
结论:
通过运用所学知识,软件实现了网站的功能及效果。
参考文献:
1.魏洪斌《DreamweaverMX网页设计》清华大学出版社
2.马波 《DreamweaverMX完美网页设计与制作》中国青年出版社
3.黄梦《DreamweaverMX完全征服手册》中国青年出版社
4.周明涛 《DreamweaverMX网页设计指南》机械工程出版社
5.陈青、刘时燕、macromedia《FlashMX标准案例教材》人民邮电出版社
6.刘淼 《FlashMX入门与提高》人民邮电出版社
7.李伟《FlashMX动画制作实例教程》清华大学出版社
8.刘睿、陈志宇《Photoshop6.0实用教程》山东科学技术出版社
9.飞思教育产品研发中心《Photoshop6.0基础及应用教程》北京电子工业出版社
10.(美)BarryHaynes、Wendy Grumpter、陈玉明、李玉龙《老照片,新照片:
Photoshop绘画与创意》电子工业出版社
致谢:
感谢老师以及学校的教导,培育。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 环保 设备 网站 设计 制作