网页设计与制作.doc

《网页设计与制作.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页设计与制作（2011/2012学年第一学期）课程名称网页设计与制作设计题目小米课程性质公共选修课学生专业10级外语系语言三班学生学号1040501385学生姓名肖姗授课教师刘红军邵阳学院2011年10月30日目录一、设计1.1设计目的………………………………………………………………p11.2设计特点………………………………………………………………p11.3设计思想………………………………………………………………p1二、网站整体结构规划2.1主页设计规划及分析…………………………………………………p22.2子页设计规划及分析①

2、………………………………………………p32.3子页设计规划及分析②………………………………………………p42.4子页设计规划及分析③………………………………………………p52.5子页设计规划及分析④………………………………………………p62.6子页设计规划及分析⑤………………………………………………p72.7子页设计规划及分析⑥………………………………………………p8三、总结3.1设计总结………………………………………………………………p91.1设计目的国产手机小米于8月16号发布，10月份正式上市。小米手机配置了世界上主频最快

3、的高通MSM8260双核1.5GHz的手机处理器，采用石墨散热，4.0吋的半反半透的夏普屏幕，800W像素的摄像头，F2.4大光圈，以及1930mAh的大容量锂聚合物电池。由于是刚起步的国产机，而且又是那么高配置的手机，质量又有保证，因此我想要帮小米手机做宣传。1.2设计特点利用了现在流行的DreamweaverCS5工具来编写网页，比传统的设计方法要方便，而且代码也更加的简洁。1.3设计思想网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈

4、电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。小米作为直接在线上发售的手机，网络的宣传显得尤为重要。2.1主页设计规划及分析首页包含了公司的简介以及小米的简单介绍。主图下含盖了6个子页链接。产品设计一栏利用flash工具做成，从而使其滚动起来，给浏览者一个简单全面的了解。2.2子页设计规划及分析①作为线上销售的手机，即时的信息对于爱好者必不可少。因此即时信息这个版面可以与浏览者分享小米的即时动态信息。与小米的发烧友论坛连接，让想买的人了

5、解更多的小米动态。2.3子页设计规划及分析②此版面主要介绍小米公司的详细信息。此版面分为5个模块，第一是公司的介绍，第二是小米的来源，第三是招聘信息，第四是小米团队，第五个是小米及其系列产品。2.4子页设计规划及分析③手机的宣传视频同样作为手机的一大卖点之处。此版面插入了小米的宣传视频，以方便让浏览者在视觉上更全面的了解到小米的优点和特色之处。2.5子页设计规划及分析④作为中国首款双核1.5GHz的智能手机，小米的开发和设计还有待完善和加强，因此团队需要更多的先进人才。此版面作为对爱好者及各类人才的需要，公开招聘要求，以求得更多

6、的人才为小米的开发和进步注入新的力量。2.6子页设计规划及分析⑤作为消费者，在买手机之前必须要对手机有个全面的了解。因此此版面专门介绍了小米的特点以及配置，方面浏览者对小米作深入了解。2.7子页设计规划及分析⑥此版面作为公司的位置介绍，插入了地图以及详细的路线。以方便想对小米了解的人们可以进入实地查看，也方便了有意愿进入团队的有才人士与我们进行联系。3.1设计总结一、网页应易读。网站设计最重要的诀窍，恐怕就是你的网页要易读 。这就意味着,你必须花点心思来规划文字与背景颜色的搭配方案。 因此我直接采用白底黑字，使页面清晰易读。二、

7、网站导航要清晰。所有的超链接应清晰无误地向读者标识出来，所有导航性质的设置，像图像按钮，都要有清晰的标识，让人看得明白。因此在子页链接处采用淡蓝色背景框。在即时信息的消息链接处采用传统的未访问的：蓝色，访问过的:紫红色。三、网页风格要统一。这个原则和传统的印刷出版物没什么区别。网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，会对你的网站留下一个“很专业”的印象。 因此我在每个页面的顶上都统一设有小米的图片，侧栏有团队联系方式及招聘信息。四、页面容量越小越好

8、。有研究显示，如果一个网站页面的主体在15秒之内显现不出来，访客会很快失去对该站的兴趣。因此我设计的页面以简洁为主，打开速度快，加载量小。五、设计工具。此次网页设计工具大多采用的是DreamweaverCS5。