苹果公司网页设计及制作

1、-. z.课 程 设 计 报 告 书题目：苹果公司网页设计与制作二级学院数学与计算机科学学院年级专业2012级计算机网络学 号学生指导教师教师职称讲师-. z.*学院课程设计论文任务书二级学院： 学 号1202010002学生董帅专业班级12计网设计题目苹果公司网页设计与制作设计技术参数以Dreamweaver为开发工具，采用css为主要手段的开发技术。具体容包括：Html、Dreamweaver操作、css层叠样式表，javaScript脚本。设计要求本课程设计的目的是为了让学生掌握一个完整的制作过程，并熟练运用网页制作的各种技术并学会使用div+css设计并开发制作出一个符合web2.0标

2、准的。具体任务和要求如下：任务自选容，可参考如下主题: 科普、科幻知识；公益形象宣传；大、中、小学教学用动画形象；奥林匹克体育；环境保护；战争与和平；求职；校园生活；诚信、传统美德；交通平安；卫生与安康；爱心；教育；新青年；管理；实用工具等，根据选择的容制作一个完整的。二要求整个要突出主题，信息分类合理，导航清晰。合理规划站点和目录，首页文件名为inde*.html。用div+css布局。用css美化网页中的各个元素。适当运用动画和javaSript脚本，自己处理图片和背景。二级页面风格统一，所有的css样式统一以文件的形式保存，以的方式加载到Html文档，以实现网页构造和形式的别离。工作量独

3、立完成整个；至少7-8个页面；完成课程设计报告的书写。工作计划整个工作分5个局部完成：1.容确实定和整体规划3学时根据自己的兴趣爱好，选定一个主题。然后准备相关的文字和图片资料；确定的目录构造。2.进展素材收集和整理3学时用ps或Firworks制作首页的效果图。3的制作5学时首先制作首页，再制作各个二级页面。4的测试2学时测试，精简样式文件。5书写课程设计报告书2学时将设计思路、制作过程、技术要点和特色说明以报告书的形式书写出来。参考资料袁磊.网页设计与制作实例教程M.清华大学，2008.23-29，167-210.黄斯伟.HTML完全使用详解M.人民邮电，2006.55-79.烨.别具光辉

4、DIV+CSS网页布局与美化M.人民邮电，2006.120-150.超.CSS布局实录M.科学，2006.67-99.贾素玲等.JavaScript程序设计M.清华大学，2007.167-180.指导教师签字教研室主任签字说明：此表一式叁份，学生、指导教师、二级学院各一份。2013年 6 月 18 日 -. z.目录TOC o 1-3 h z uHYPERLINK l _Toc359079050第1章课程设计概述 PAGEREF _Toc359079050 h 1HYPERLINK l _Toc359079051第2章设计方案说明 PAGEREF _Toc359079051 h 3HYPERL

5、INK l _Toc3590790522.1 需求分析 PAGEREF _Toc359079052 h 3HYPERLINK l _Toc3590790532.2 布局类型和配色方案确实定 PAGEREF _Toc359079053 h 3HYPERLINK l _Toc3590790542.3 整体规划 PAGEREF _Toc359079054 h 5HYPERLINK l _Toc3590790552.4 素材的收集和整理 PAGEREF _Toc359079055 h 5HYPERLINK l _Toc359079056第3章制作 PAGEREF _Toc359079056 h 7HY

6、PERLINK l _Toc3590790573.1创立站点 PAGEREF _Toc359079057 h 7HYPERLINK l _Toc3590790583.2创立样式表文件 PAGEREF _Toc359079058 h 7HYPERLINK l _Toc3590790593.3页面制作 PAGEREF _Toc359079059 h 9HYPERLINK l _Toc359079060第4章主要技术特点和特色说明 PAGEREF _Toc359079060 h 13HYPERLINK l _Toc359079061第5章课程设计总结 PAGEREF _Toc359079061 h

7、15-. z.第1章 课程设计概述本课程设计主要是利用已经学习的网页设计与制作知识和初步掌握的网页开发工具如Dreamweaver、Photoshop等软件为苹果公司设计并实现一个公司。根据教师的要求及指导，我设计了此。此属于小型，以苹果公司原为依托，按照原配色方案和外表构造以DIV+CSS的方式仿制，苹果公司Apple Inc.是美国的一家高科技公司，2007年由苹果电脑公司Apple puter, Inc.更名而来，核心业务为电子科技产品，总部位于加利福尼亚州的库比蒂诺。苹果公司由史蒂夫乔布斯、斯蒂夫沃兹尼亚克和Ron Wayn在1976年4月1日创立，在高科技企业中以创新而闻名，知名的产

8、品有Apple II、Macintosh电脑、Macbook笔记本电脑、iPod音乐播放器、iTunes商店、iMac一体机、iPhone手机和iPad平板电脑等。2012年8月21日，苹果成为世界市值第一的上市公司。本的主要功能是提供丰富、清晰的公司信息和资源，主要包括iphone、ipad、ipod、Mac、itunes等硬件产品以及iOS、Mac OS和APP应用软件等软件产品的全方位展示和介绍；通过在线商店网页为顾客和公司提供购置和销售苹果产品的便利通道；通过技术支持网页为产品购置者提供维修效劳和支持围。设计者希望通过清新简洁，赏心悦目的外观设计给予客户和顾客以舒适的网页浏览体验。充分

9、展示公司提供的产品及设计理念和售后效劳能力，注重推广公司各方面形象。以公司的宣传推广和将浏览者吸引成为公司的客户作为的目标。坚持严谨、负责、创新的态度为消费者提供展示苹果公司完美产品和周边设备的个性化页面，不断创新变革助力科技进步和公司前进。此外，这不仅是为了肩负学生的责任而去完成教师交给我的任务，更是对过去学习的知识的温习稳固，是一个把理论转化为实践的过程，是一个把自己的设计思想转化为实物的过程，是一个发挥自己创造力和想象力的过程。再者，这是对自己在一学期该学习科目以来的成果的检查，这是一个自我审视的过程：检测我该学期的学习成果，衡量一期以来的收获，更为重要的是扬长避短，发现自己的问题与缺点

10、，使自己及时改正，觉察自身的优点和长处并坚持发扬，有利于我以后的学习和开展。加强教师和同学们对我的认识，深化我们大家的情谊，有利于以后在学习、工作生活当中的团结协作。-. z.第2章 设计方案说明2.1 需求分析对公司目标用户进展分析，得出结论用户主要包括以下几方面的需求即希望从获取的信息：1公司产品的介绍；2公司产品的设计；3消费情况说明；4在线购置；5售前咨询和售后效劳根据以上需求分析，结合公司的实际情况，为了更好地推广公司及其公司产品，需求进一步细化为：的建立意义满足顾客的需求，为企业公司赢得利润；向顾客提供更好的效劳是一个商务的目标；能够使企业实现全国化与全球化经营战略；实现改善经营管

11、理、开拓市场、提高企业竞争力等。功能对于公司，及时发布介绍和展示最新创新产品，为顾客提供完善的咨询效劳工作。对于顾客，通过建立商务平台，让公司可以与顾客严密地联系在一起。重视顾客的意见反应，掌握顾客的需求，加强与客户之间的关系与往来，是企业营销的重要环节。很重要的一个优势就是交互性，利用在上设置用户调查表、产品相关的留言评论、讨论公告板等方式可以迅速准确地得到大量用户反应和建议，这些有助于新产品推出，新市场开拓，又有助于售后效劳和客户调查，同时可以为顾客随时随地地提供完美的效劳。市场的情报信息收集有关客户市场研究和竞争对手的信息，包含丰富的有价值的信息，分层次地提供给相关人员，如销售报表、市场

12、环境分析报告、竞争对手情况、产品技术工艺、生产方案、质量问题报告等等，建立一个面向市场的情报信息中心系统。企业的各个人员可随时在任何地方获取这些准确最新的有价值的信息，从而有利于他们的工作或决策。原则与重点企业的电子商务的受众主要是企业部相关人员、最终客户及与企业生产相关的物资供给商及合作伙伴，的主题不仅是在容上有丰富的产品信息、情报信息，更重要的是应具有满足以上目标的相关功能。因此，的重点不是在界面宣传制作上的如何美观与漂亮，而是在于提供的信息容价值及功能实用性，这样才能使长期有效地运行，从而到达既定的进展电子商务经营的目标。系统要注意的重点有：1平安性电子商务作为企业经营的一个重要部份，的

13、容信息具有非常重要的价值。信息的平安包括重要信息绝不能被竞争对手所获取，不同级别的信息不能被不具有相应权限的用户所获取，数据在意外损害的情况下应有相应的备份恢复措施等等。这就要求系统应具有高度的平安性、复杂的权限控制级别及自动自我保护系统。这是一般的信息发布系统难以实现的。2高效性由于系统不仅仅完成简单的网页浏览功能，更多地要实现许多事务处理，如消息传递、多媒体通讯、信息关联、排序、排版、复杂查询、全文搜索等功能，这会导致系统的运行效率较低，而我们不能让用户有过长的等待，那将导致用户不再愿意上网使用。因为，运行系统必须考虑其高效性，要求最终系统在数百个联机事务处理时要有一个很好表现性能。3稳定

14、性许多系统运行后，由于稳定性不好，我们可以常常看见系统管理员整天忙碌于系统的维护补救，而更重要的是，众多的工作人员都在上面处理各种工作事务，系统的经常性崩溃导致这些工作无法进展，反而使事务工作效率大大降低，从而使企业运行效率大大降低。因此，信息系统的稳定性非常关键。2.2 布局类型和配色方案确实定根据对容的需求分析，的页面将多以图片为主，文字为辅图文混排的形式设计，因此根据容表现的需要设计该采用三型布局，同时作为公司，配色方案以灰系为主色调，以表达公司庄重沉稳、简约大方的主题，同时配合使用颜色艳丽的图片，一方面改善灰色的冷色调影响，另一方面符合公司爱好者对生活充满热情和活力的特征。2.3 整体

15、规划整个以首页为入口，对公司提供的产品和效劳做详细介绍，并以公司主要产品为栏目制作不同的子页面，分别对产品做详细介绍，的整体层次构造图如下图:inde*inde*storeiphoneipaditunessupportipodMac图2-1 构造图2.4 素材的收集和整理根据容需求共收集了如下格式的素材：图片、文字；其中图片处理为*.jpg、*.png和*.ico格式，以所在页面名称开头加位置命名图片，例如：inde*-top1.jpg；页面的Logo的设计理念：由DONG四个英文大写字母组成采用可口可乐英文字体设计，标志整体白色字体透明背景，与导航条的黑底白字形成照应，力求简约大方，与的黑白

16、灰色彩方案相搭配，表达整体的简单之美。DONG是设计者董帅的姓的英文拼音，代表设计者是董帅先生。实现效果如下图：图2-2 logo实现效果图-. z.第3章 制作3.1创立站点使用Dreamweaver创立站点，并组织好站点的构造。站点构造图如下所示：图3-1 站点构造图创立了images文件夹用于存放图片文件；css文件夹存放css样式文件；Library文件夹存放库文件；SpryAssets文件夹存放脚本文件；Templates文件夹存放模板文件；根据页面的栏目设计分别创立了inde*、store、Mac、ipod、iphone5、ipad、itunes和support文件夹；考虑到每个页

17、面都需要使用Logo图片和通知，因此将它们创立成库工程以便在中频繁使用；3.2创立样式表文件本采用外部样式表的形式，将样式表文件命名为inde*.css保存在站点文件css中，文件主要对页面的主题背景、字体和图片格式进展了定义，主要容如下图：图3-2 样式文件1图3-2 样式文件23.3页面制作为了提高工作效率，保持页面整体风格的统一，根据容制作了模版页面，具体效果如下图：图3-3 模版页面根据容的不同，依据模版页面分别制作了相关子页面，下面以Mac.html和support.html页面为例展示效果。效果如下图：图3-4 Mac页面图3-5 support页面设计的重点是首页，它对浏览用户的

18、第一直观印象起着非常重要的作用，因此首页的制作过程，我适当的参加了动画效果和平面设计的效果图以期到达更好的页面效果，如下图：图3-6 inde*页面-. z.第4章 主要技术特点和特色说明1、DIV+CSS的使用在这次网页设计过程中，使用了CSS布局和外部样式表，和传统的Html相比CSS有很多的优点，他具有强大的控制能力和排版能力：CSS控制字体的能力比标记好多了，因此现在标记早已被W3C组织列为不被推荐使用的标记。同时提高了网页的浏览速度：使用CSS设计方法比传统的Web设计节省了50%到60%的文件尺寸。Table标签是全部加载完才会显示出来，而CSS页面是加载一点显示一点也更好的提高了

19、网页的浏览速度。软件开发以前非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，改为从而能够更快地下载页面。使用他可以缩短修改时间提高工作量：传统的Web页面是需要修改每个及等标签，而利用CSS设计的Web页面只需要简单的修改几个CSS文件就可以重新设计整个站点。使用它更有利于搜索引擎的搜索：CSS减少了代码量，使得正文更加突出，有利于搜索引擎的更有效的搜索到你的Web页面。CSS的作用可以到达效果及特点：1在几乎所有的浏览器上都可以使用。2以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。3使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目4

20、你可以轻松地控制页面的布局。5你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进展控制，只要修改这个CSS文件中相应的行，则整个站点的所有页面都会随之发生变动。想一想，没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的？我们一般使用HTML标签来实现，代码非常烦琐。很难想象，如果在一个页面里需要频繁地更替字体的颜色大小，最终生成的HTML代码的长度一定臃肿不堪。说实话，CSS就是为了简化这样的工作诞生的，当然其功能决非这么简单。结合DIVCSS是通过对页面构造的风格控制的思想，来控制整个页面的风格的属性。浏览器通过CSS

21、类解释来呈现CSS属性来表现样式里设置的样式。CSS配合DIV或div+css作用与解决问题：1CSS技术帮我们控制网页中的字体大小、页面宽度、页面容靠左靠右、字体样式、*些网页里区域背景图片、背景颜色、超鼠标事件样式、图片居中、文字居中、网页中容板块间隔等样式把戏。2网页中一些标签元素样式控制，如：标题、段落、span、列表等等网页元素设置控制，包括上面讲的文字图片大小、DIVCSS布局宽度颜色等属性。2、使用 为方便读者的查阅，在各页面顶部导航都设置了页面。3、iphone网页设置了图片轮换效果，鼠标放置停顿图片切换。图片轮换的图片文件名通常是有规律的序列，比方说是从1到N，然后设置定时器

22、，每隔一段时间换一图片，图片文件名作为一个自加变量，在轮换完后再从头开场。另外在任意两图片的轮换时还会有一些转换的过渡效果，这个主要依靠转换滤镜来实现， iphone网页中利用revealTrans滤镜产生转换效果。4、运用Photoshop工具图片的插入和设置背景图像是两个不同的概念，当然可以到达一样的效果，这是很根本的知识运用，也用了很屡次，但是当图像较小时在层中插入更方便些，因为作为背景时图片会重复出现造成混乱的局面，但图片过小时，用层将之拉宽大就会使图片变模糊、严重变形，不但没能美化页面反而带来了负面影响，此时最好借助Photoshop工具来编辑图片。文本的插入在层或框架完成较好，但不能设置为艺术字体，因此需要运用Photoshop工具来辅助完成，其实很多地方都可以用到Photoshop工具特别是一些要表现自己独特的思想和设计画面。-. z.第5章 课程设计总结通过本次设计对之前学的开发与网页制作知识有了有效地利用，在做设计的时候遇到了很多问题，很多都是