网站的设计与制作.doc
《网站的设计与制作.doc》由会员分享，可在线阅读，更多相关《网站的设计与制作.doc（23页珍藏版）》请在冰豆网上搜索。
网站的设计与制作
目录
前言
第一章
1．1课题来源
1．2网站开发项目需求分析
1．3软件运用
1．4软件运行环境
第二章网站制作
2．1做网页的步骤
1确认网站主题
2素材搜集
3规划网站
4选择工具软件
5制作网页
6测试网页
2.2做网页的体会
1、网页的整体布局设计关乎全局效果
2、网页设计中色彩的运用不够恰当
3、网页形式与内容不够动感和统一
第三章结束语
参考文献
摘要
企业网站是一个结合了企业宣传、企业文化、企业产品销售等多功能浏览的商业网站，结合自己的专业为企业设计一个个性化的网站，即锻炼了自己又能为企业做点贡献。
我所使用的软件是Macromedia公司推出的一款用于网页设计的软件——dreamweaver8。
在网页的制作与链接中，我学到了很多网页设计知识。
关键词：
静态网页超链接外观产品展示店面展示
第一章前言
1．1课题来源
随着二十一世纪新兴科技的飞速发展，如今的电子信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。
就目前的科技发展水平而言，电子信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。
可喜的是在这几十年的发展中我们有了互联网。
互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。
以往，企业宣传以传统媒体如报刊、杂志、电视广告居多，这种宣传的效果不是很理想，有地域的局限性。
企业宣传成本投入也大。
自从九十年代中国引入互联网并逐步使之发展壮大，人们通过互联网看到了外面的世界，同时也认识到了自身的落后以及互联网的发展带来的巨大商机。
许多有远见的企业看到了互联网的巨大影响力，尝试着走入互联网寻求商机。
其中不乏佼佼者。
正是因为互联网给企业所带来的巨大效益的显现，越来越多的企业网站出现在网络上，使人们可以随时了解自己想了解的产品，真正的做到足不出户，便知天下事。
拥有自己的企业网站，是今后所有企业宣传展示自己、走出国门谋求发展的必然手段之一。
1．2网站开发项目需求分析
企业网站，就是企业在互联网上进行网络建设和形像宣传的平台。
企业网站就相当于一个企业的网络名片，不但对企业的形象是一个良好的宣传，同时可以辅助企业的销售，甚至可以通过网络直接帮助企业实现产品的销售，企业可以利用网站来进行宣传、产品资讯发布、招聘等等。
企业网站的作用就是为展现公司形象，加强客户服务，完善网络业务，还可以与潜在客户建立商业联系。
我国目前有近70％的大中型企业建有企业内部网络系统。
从整体上看，这一数字与我国目前企业的发展规模及市场增长勉强相称；从企业的外部网站来说，90％以上的企业有建设企业网站系统计划，对于不同规模的公司，实施的程度也是不同的：
50－100人的中小企业比500人以上的大中型企业建有网站的比例低，前者为53.6％，后者为75.3％。
数据表明，全国有75.4％的企业尚未自建网站。
主要表现在：
一是中小企业的建站比例太低，仅为12.5％，许多中小企业尤其是规模较小的企业缺乏足够的网站建设资金，也缺乏专业技术人员，这些问题严重制约了企业建站。
二是企业建站与工业水平的高低有直接关联。
三是优强企业建站比例及水平明显高于中小企业。
中小企业同时也是最迫切需要进行网上宣传的一个庞大群体，他们没有完全建设全国范围的营销渠道，网络是一个快捷有效且廉价的重要宣传方式。
但还是有很多企业没有认识到网站的重要性，也成为中小企业网站建设不利的重要障碍。
国际互联网的出现无疑具有划时代的意义，它为不同规模的企业提供了一个平等竞争的舞台，企业无论大小都有着同等的机会，都可以以极低的成本向世界发布信息。
中小企业较以往有更多机会得到客户的认同，取得商业上的成功。
所以，中小企业主动转变观念，破除畏难情绪，尽快建立自己的网站是当务之急。
1．3使用软件
Dreamweaver软件由美国著名的网站应用开发工具生产厂商AdobeMacromedia于2005年6月推出并正式投入市场以来，已经发展得相当成熟。
关于Dreamweaver的技术介绍的相关书籍与网络信息相当丰富。
通过大学中软件开发环境课程的学习，对Dreamweaver有了一定的认识，并且能够运用Dreamweaver进行一般性的操作。
因此，运用Dreamweaver软件技术可以基本完成任务的要求。
1．4软件运行环境
我使用的Dreamweaver8.0是一款简体中文软件，在WinXP中运行。
第二章网站制作
2．1制作网页的步骤
再做网页之前，我确定了做网页的五个步骤。
一、确定网站主题：
网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。
我把现在就职的公司思域信息技术有限公司作为网站的主题。
网站的主要内容就是要从几个方面介绍我公司的手机店面及无线视频监控产品。
让浏览者了解我公司的企业文化、主营业务、服务模式及营业网点。
达到宣传推广的目的。
二、搜集材料：
明确了网站的主题以后，我开始围绕主题搜集材料了。
图片材料手头上就有现成的，只需PS一下就可用于网站，公司LOGO及店面照片从市场部同事那copy过来。
公司简介、企业文化、服务模式等文字材料依赖于人事部提供。
在此还得感谢同事们的理解与合作。
三、规划网站：
一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。
我从网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等方面考虑后，决定以黑色为网站背景，一来考虑黑色具有稳重大气的特点，二来黑色具有现代感及个性化，有视觉冲击力，让人过目难忘。
导航栏我安排在上方及左侧。
上方为主导航栏。
左侧边栏为二三级页面的细化导航。
产品图片安排在中间一字排开，下半部分为文字信息。
底部为版本信息。
总体规划为三字型结构。
下图为网站结构图：
网站首页
首页
产品介绍
营业厅
公司公告
手机知识
公司简介
公司简介
企业文化
主营业务
服务模式
营业网点
网络视频
车载硬盘
指挥终端
摄像机
东后街
小西沟
河北路
克东路
最新公告
手机视频
1
2
3
4
四、选择合适的制作工具：
我选择dreamweaver8.0作为我制作网站的主要工具，辅助工具软件有firework8.0，photoshopCS2，flash8.0等。
这几款工具是我制作网页的首选。
firework8.0与dreamweaver8.0衔接紧密，制作压缩图片非常方便。
photoshopCS2对于合成图片的效果比较好。
网站banner就是用photoshopCS2制作。
五、制作网页：
材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程。
我是按照先大后小、先简单后复杂的顺序进行制作。
就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。
我先把网站的总体布局搭好。
安排好图片文字档的空间大小，然后根据空间用firework及photoshop制作压缩好图片填入布局空间。
导航栏运用了CSS样式表。
这样比较快速有效。
文字信息根据设计内容的不同分割成了不同的小块。
在制作的过程中逐步添加进去。
在公司公告栏内的信息由于时间关系未能从公司内部的文件中调取，只好在网上摘抄了几则新闻放入。
实属无奈之举。
我公司手机营业厅本来有十几个网点，也是由于家里孩子尚小需要照顾没时间，所以只放入了四个网点。
产品介绍的也不是很完备，没有形成系列。
图片底色于网站底色没有很好的融合。
总之在制作网站的过程中遇到了很多的困难。
一是时间紧，二是对营业网店的分布及介绍缺乏。
无线视频监控的产品没有介绍完全。
手机知识是从其他网站下载的手机介绍。
首页截图：
二级页面截图：
三级页面截图：
六、网站测试：
制作过程中经常使用IE浏览器预览观察效果。
发现了很多问题。
如导航栏的链接不正确、视频格式无插件无法在线播放、侧边栏于主导航栏重复等问题。
大部分都予以了解决。
但由于本人水平有限，有些技术问题没能得到很好的解决。
设计上存在了很多的缺陷。
2.2制作网页的体会
1、网页的整体布局设计关乎全局效果
网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。
版式设计通过文字图形的空间组合，表达出和谐与美。
我作为一个初学网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。
多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。
尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如一家生产型的企业，它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对产品的了解，促成最后的购买。
而我在设计完页面的整体布局并添加进内容后才发现整个页面表现的有些沉闷压抑，显得有些呆板乏味。
没能体现出一个成长中的IT公司的创新及活力。
这与我的设计初衷相差甚远。
从这点我体会到要想成为一名合格的网页设计师，需要学习的东西太多了。
比如色彩学，统计学，美学等等。
2、网页设计中色彩的运用不够恰当
色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。
根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。
色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。
另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的VI进行色彩运用。
在色彩的运用过程中，还应注意的一个问题是：
由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。
如：
儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。
在设计中要考虑众多因素。
一个成长的IT公司的网页的网页设计主色调应该选择浅蓝色或金属银色体现创新与科技的结合。
而我一味的选择了黑色，追求了个性化，而忽略了公司的IT这一最显著的行业特征。
这点是在指导老师的点拨下体会到的。
在此也要感谢指导老师给我一次学习提高的机会。
3、网页形式与内容不够动感和统一
要将丰富的意义和多样的形式组织成统一的页面结构不是一件容易的事，需要设计者有丰富的专业知识及很深的美学造诣。
显然我作为初学者还达不到这样的水准。
我制作的网页看上去功能是具备了，但缺乏动感和统一。
丰富的图片内容和时尚动感的flash动画没能在我的网站设计中体现。
使我设计的整个页面形式与内容不够动感和统一。
第三章结束语
在制作网站的过程中，由于不能熟练运用工具软件，产生了很多的困难，通过与指导老师的探讨与沟通，我渐渐地对所制作的网站有了一个大体的认识。
认识到了其中的不足。
需要改进的地方很多。
这需要我不断地学习与提高。
致谢
在整个毕业设计过程中，指导教师给了我极大的帮助，并给予我悉心的关怀与指导，在此表示衷心地感谢。
老师认真负责的
升级会员 