《苹果公司》网页设计与制作.docx

《《苹果公司》网页设计与制作.docx》由会员分享，可在线阅读，更多相关《《苹果公司》网页设计与制作.docx（21页珍藏版）》请在三一办公上搜索。

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

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

3、以链接的方式加载到Html文档，以实现网页结构和形式的分 离。工作量1. 独立完成整个网站；2. 网站至少7-8个页面；3. 完成课程设计报告的书写。工 作 计 划整个工作分5个部分完成：1. 网站内容的确定和整体规划（3学时）根据自己的兴趣爱好，选定一个主题。然后准备相关的文字和图片 资料；确定网站的目录结构。2. 进行素材收集和整理（3学时）用ps或Firworks制作网站首页的效果图。3. 网站的制作（5学时）首先制作首页，再制作各个二级页面。4. 网站的测试（2学时）测试网站链接，精简样式文件。5. 书写课程设计报告书（2学时）将设计思路、制作过程、技术要点和特色说明以报告书的形式书写

4、 出来。参 考 资 料1 .袁磊.网页设计与制作实例教程M.清华大学出版社，2008.23-29,167-210.2 .黄斯伟.HTML完全使用详解M.人民邮电出版社，2006.55-79.3 .李烨.别具光芒 DIV+CSS 布局与美化M.人民邮电出版社，2006.120-150.4 .李超.CSS网站布局实录M.科学出版社，2006.67-99.5 .贾素玲等.JavaScript程序设计M.清华大学出版社，2007.167-180.指导教师签字教研室主任签字说明：此表一式叁份，学生、指导教师、二级学院各一份。2013年6月18日第1章课程设计概述1第2章网站设计方案说明 32.1需求分析

5、32.2网站布局类型和配色方案的确定32.3网站整体规划52.4素材的收集和整理5第3章网站制作73.1创建站点73.2创建样式表文件73.3页面制作9第4章主要技术特点和特色说明 13第5章课程设计总结16第1章课程设计概述本课程设计主要是利用已经学习的网页设计与制作知识和初步掌握的网页 开发工具如Dreamweaver、Photoshop等软件为苹果公司设计并实现一个公司网 站。根据老师的要求及指导，我设计了此网站。此网站属于小型网站，网站以苹果公司原网站为依托，按照原网站配色方案 和表面结构以DIV+CSS的方式仿制，苹果公司(Apple Inc.)是美国的一家高科 技公司，2007年由

6、苹果电脑公司(Apple Computer, Inc.)更名而来，核心业 务为电子科技产品，总部位于加利福尼亚州的库比蒂诺。苹果公司由史蒂夫乔 布斯、斯蒂夫沃兹尼亚克和Ron Wayn在1976年4月1日创立，在高科技企业 中以创新而闻名，知名的产品有Apple II、Macintosh电脑、Macbook笔记本电 脑、iPod音乐播放器、iTunes商店、iMac 体机、iPhone手机和iPad平板电 脑等。2012年8月21日，苹果成为世界市值第一的上市公司。本网站的主要功能是提供丰富、清晰的公司信息和资源，主要包括iphone、 ipad、ipod、Mac、itunes等硬件产品以及i

7、OS、Mac OS和APP应用软件等软件 产品的全方位展示和介绍；通过在线商店网页为顾客和公司提供购买和销售苹果 产品的便利通道；通过技术支持网页为产品购买者提供维修服务和支持范围。设计者希望通过清新简洁，赏心悦目的外观设计给予客户和顾客以舒适的网 页浏览体验。网站充分展示公司提供的产品及设计理念和售后服务能力，注重推 广公司各方面形象。以公司的宣传推广和将网站浏览者吸引成为公司的客户作为 网站的目标。坚持严谨、负责、创新的态度为消费者提供展示苹果公司完美产品 和周边设备的个性化页面，不断创新变革助力科技进步和公司前进。此外，这不仅是为了肩负学生的责任而去完成老师交给我的任务，更是对过 去学习

8、的知识的温习巩固，是一个把理论转化为实践的过程，是一个把自己的设 计思想转化为实物的过程，是一个发挥自己创造力和想象力的过程。再者，这是对自己在一学期内该学习科目以来的成果的检查，这是一个自我 审视的过程：检测我该学期的学习成果，衡量一期以来的收获，更为重要的是扬 长避短，发现自己的问题与缺点，使自己及时改正，发觉自身的优点和长处并坚 持发扬，有利于我以后的学习和发展。加强老师和同学们对我的认识，深化我们 大家的情谊，有利于以后在学习、工作生活当中的团结协作。第2章网站设计方案说明2.1需求分析对公司网站目标用户进行分析，得出结论用户主要包括以下几方面的需求 （即希望从网站获取的信息）：1）公

9、司产品的介绍；2）公司产品的设计；3）消费情况说明；4）在线购买；5）售前咨询和售后服务根据以上需求分析，结合公司的实际情况，为了更好地推广公司及其公司产 品，网站需求进一步细化为：网站的建设意义（1）满足顾客的需求，为企业（公司）赢得利润；（2）向顾客提供更好的服务是一个商务网站的目标；（3）网站能够使企业实现全国化与全球化经营战略；（4）实现改善经营管理、开拓市场、提高企业竞争力等。功能对于公司，及时发布介绍和展示最新创新产品，为顾客提供完善的咨询服务 工作。对于顾客，通过建立商务网站平台，让公司可以与顾客紧密地联系在一起。 重视顾客的意见反馈，掌握顾客的需求，加强与客户之间的关系与往来，

10、是企业 营销的重要环节。网站很重要的一个优势就是交互性，利用在网站上设置用户调 查表、产品相关的留言评论、讨论公告板等方式可以迅速准确地得到大量用户反 馈和建议，这些有助于新产品推出，新市场开拓，又有助于售后服务和客户调查, 同时可以为顾客随时随地地提供完美的服务。市场的情报信息收集有关客户市场研究和竞争对手的信息，包含丰富的有价值的信息，分层 次地提供给相关人员，如销售报表、市场环境分析报告、竞争对手情况、产品技 术工艺、生产计划、质量问题报告等等，建立一个面向市场的情报信息中心系统。 企业的各个人员可随时在任何地方获取这些准确最新的有价值的信息，从而有利 于他们的工作或决策。原则与重点企业

11、的电子商务网站的受众主要是企业内部相关人员、最终客户及与企业生 产相关的物资供应商及合作伙伴，网站的主题不仅是在内容上有丰富的产品信 息、情报信息，更重要的是应具有满足以上目标的相关功能。因此，网站的重点 不是在网站界面宣传制作上的如何美观与漂亮，而是在于网站提供的信息内容价 值及功能实用性，这样才能使网站长期有效地运行，从而达到既定的进行电子商 务经营的目标。系统要注意的重点有：（1）安全性电子商务网站作为企业经营的一个重要部份，网站的内容信息具有非常重要 的价值。信息的安全包括重要信息绝不能被竞争对手所获取，不同级别的信息不 能被不具有相应权限的用户所获取，数据在意外损害的情况下应有相应的

12、备份恢 复措施等等。这就要求系统应具有高度的安全性、复杂的权限控制级别及自动自 我保护系统。这是一般的网站信息发布系统难以实现的。（2）高效性由于系统不仅仅完成简单的网页浏览功能，更多地要实现许多事务处理，如 消息传递、多媒体通讯、信息关联、排序、排版、复杂查询、全文搜索等功能， 这会导致系统的运行效率较低，而我们不能让用户有过长的等待，那将导致用户 不再愿意上网使用。因为，运行系统必须考虑其高效性，要求最终系统在数百个 联机事务处理时要有一个很好表现性能。（3）稳定性许多系统运行后，由于稳定性不好，我们可以常常看见系统管理员整天忙碌 于系统的维护补救，而更重要的是，众多的工作人员都在上面处理

13、各种工作事务， 系统的经常性崩溃导致这些工作无法进行，反而使事务工作效率大大降低，从而 使企业运行效率大大降低。因此，信息系统的稳定性非常关键。2.2网站布局类型和配色方案的确定根据对网站内容的需求分析，网站的页面将多以图片为主，文字为辅图文混 排的形式设计，因此根据内容表现的需要设计该网站采用“三”型布局，同时作 为公司网站，配色方案以灰系为主色调，以表达公司庄重沉稳、简约大方的主题， 同时配合使用颜色艳丽的图片，一方面改善灰色的冷色调影响，另一方面符合公 司爱好者对生活充满热情和活力的特征。2.3网站整体规划整个网站以首页为入口，对公司提供的产品和服务做详细介绍，并以公司主 要产品为栏目制

14、作不同的子页面，分别对产品做详细介绍，网站的整体层次结构 图如图所示：图2-1网站结构图2.4素材的收集和整理根据内容需求共收集了如下格式的素材：图片、文字;其中图片处理为*.jpg、 *.png和*.ico格式，以所在页面名称开头加位置命名图片，例如： index-top1.jpg；页面的Logo的设计理念：由DONG四个英文大写字母组成采用可口可乐英文 字体设计，标志整体白色字体透明背景，与导航条的黑底白字形成呼应，力求简 约大方，与网站的黑白灰色彩方案相搭配，体现网站整体的简单之美。DONG是 设计者董帅的姓的英文拼音，代表网站设计者是董帅先生。实现效果如图所示：aw图2-2 logo实

15、现效果图第3章网站制作3.1创建站点使用Dreamweaver创建站点，并组织好站点的结构。站点结构图如下所示:图3-1站点结构图创建了 images文件夹用于存放图片文件；css文件夹存放css样式文件； Library文件夹存放库文件；SpryAssets文件夹存放脚本文件；Templates文件 夹存放模板文件；根据页面的栏目设计分别创建了 index、store、Mac、ipod、 iphone5、ipad、itunes和support文件夹；考虑到每个页面都需要使用Logo 图片和版权通知，因此将它们创建成库项目以便在网站中频繁使用； 3.2创建样式表文件本网站采用外部样式表的形式，

16、将样式表文件命名为index.css保存在站点 文件css中，文件主要对页面的主题背景、字体和图片格式进行了定义，主要内 容如图所示：Utw ( taclcgroiind-roleT :丰FFFFFF： t ext-align: centeT; iGxgin: Qpx; padding: Opx;Wrapper ( tesct-align: lef t j| width: 354px; TtiS-Tgin-cop: Opx; icargin-rigiltz auto; i3i gin-tottor: Opx; i&irgin-left: ante;4sad.er ir；a.rgin-tcp:

17、20px; inirgin-bottom: 40px; lieighti 4Qpx; vidth! 3E4px; t Ex.t-align: center;J=ootei itar gin-top: 12px; Kar-gi-bQttcnL： clear: both;图3-2样式文件1.ont ( font-faiEily: * 宏体七 color: #0EC;cuxsor: pointer;y.KOJse cursor J p-ointer;.n.af： :bardex-xigiit-widtti:fcorde r-riglit-atle; solid;fcordex-rigiit-CGlo

18、r:color: # 0 3 C ;| enrsor : pcintei-;lieigZht : 5p k;III.tle border-top-style: none;border-rigIit-3t-le: none;fcordei-b-ottorc：-style: none：borderleft-stLe: none图3-2样式文件23.3页面制作为了提高工作效率，保持页面整体风格的统一，网站根据内容制作了模版页 面，具体效果如图所示：隹由Dw支甘日 M.EJ m.W IfiACII格却:叫芥倒：口 站点没口 也部我H)图3-3模版页面根据内容的不同，依据模版页面分别制作了相关子页面，下

19、面以Mac.html 和support.html页面为例展示效果。效果如图所示:MacBook Pro配奇Retina显示屏超高笔记本电脑分辨率，超穗你所见,_LJiMadiPhone 5易惹人爱，所以得众人所爱BWWDC 2013了奢目发布的产w,谟访问App岳关EEMPLAV-jDC ILApple与环坝* I门ST力*少噂户垠践质畋的Jtn：园巷帷构茵间蜘供中子甘工作机会 0案勘1,司*山，顷也痢佑MCI。咕sA的00,顿X ,顷.寂鼻或省找在伽Jlifi的年P1遛柄Can H- tght 2D12 Apple Inc. fti., 5,F?H r： ffifflSEffPHfUiS i

20、审村即蹈阙!:区*京.,硬祠* 面 11O1D5DDES6sUCPfiiffild6vi图3-6 index页面第4章主要技术特点和特色说明1、DIV+CSS的使用在这次网页设计过程中，使用了 CSS布局和外部样式表，和传统 的Html相比CSS有很多的优点，他具有强大的控制能力和排版能力： CSS控制字体的能力比标记好多了，因此现在标记早已被W3C组织列为不被 推荐使用的标记。同时提高了网页的浏览速度：使用CSS设计方法比传统的Web设计节省了 50%到60%的文件尺寸。Table标签是全部加载完才会显 示出来，而CSS页面是加载一点显示一点也更好的提高了网页的浏览速度。 软件开发以前非得通

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

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

23、风格的属性。浏览器通 过CSS类解释来呈现CSS属性来表现样式里设置的样式。CSS配合DIV或div+css作用与解决问题：（1）CSS技术帮我们控制网页中的字体大小、页面宽度、页面内容靠 左靠右、字体样式、某些网页里区域背景图片、背景颜色、超链接鼠标事件样式、 图片居中、文字居中、网页中内容板块间隔等样式（花样）。（2）网页中一些标签元素样式控制，如：标题h1、段落p、spanspan、 列表li等等网页元素设置控制，包括上面讲的文字图片大小、DIV CSS布局 宽度颜色等属性。2、使用链接为方便读者的查阅，在各页面顶部导航都设置了页面链接。3、iphone网页设置了图片轮换效果，鼠标放置停

24、止图片切换。图片轮换的图片 文件名通常是有规律的序列，比如说是从1到N，然后设置定时器，每隔一段时 间换一张图片，图片文件名作为一个自加变量，在轮换完后再从头开始。另外在 任意两张图片的轮换时还会有一些转换的过渡效果，这个主要依靠转换滤镜来实 现，iphone网页中利用revealTrans滤镜产生转换效果。4、运用Photoshop工具图片的插入和设置背景图像是两个不同的概念，当然可以达到相同的效果， 这是很基本的知识运用，也用了很多次，但是当图像较小时在层中插入更方便些， 因为作为背景时图片会重复出现造成混乱的局面，但图片过小时，用层将之拉宽 大就会使图片变模糊、严重变形，不但没能美化页面

25、反而带来了负面影响，此时 最好借助Photoshop 工具来编辑图片。文本的插入在层内或框架内完成较好，但 不能设置为艺术字体，因此需要运用Photoshop 工具来辅助完成，其实很多地方 都可以用到Photoshop工具特别是一些要表现自己独特的思想和设计画面。第5章课程设计总结通过本次设计对之前学的网站开发与网页制作知识有了有效地利用，在做设 计的时候遇到了很多问题，很多都是因为平时练习的少，一些知识点很难熟练的 运用。做网页不仅要有理论知识，还要有想象力，首先要将自己的网站在头脑中 形成一个整体的样式，之后再一个一个页面的做，在各个页面的连贯上也要提前 设计好，不仅要使自己的网站在表面上

26、看起来好看，还要实用，给人一种轻松的 感觉。做网站要大胆的设想。一开始没有什么思路，当做好首页之后就知道自己要 做些什么了，这个过程是漫长的，也很有意思。在设计时要运用到自己所学习的 知识，这样就又打开了一条思路，所有万事开头难，只要开好了头一切就变得很 简单。做设计是遇到的一些困难，要虚心的问老师和同学，在讨论的时候自己的 知识变得更加稳固，大家交换思想，自己会有更加开阔的想法。做网站只要有兴趣肯钻研，就会自然而然的冒出许多的灵感，设计起来自然 就很简单，只要有思路，再加上老师教得知识，就可以顺手的设计。本次设计中 我体验到了很多，什么东西只在脑子里想象不实践是出不来的，很多东西想的很 好实

27、践起来就不是那么简单了，动手才是考验知识的时候，有时候老师刚讲完做 起来很顺手，但是过一段时间再用到就有可能忘记了，这些东西就要经常的使用， 才能做到熟练，经常不用就会忘记。设计时还要积极与同学交流，在交流的过程 中可以学到很多东西，在交流的过程中也是知识再次利用的机会。遇到问题时一 定要勤于问，问完之后就会豁然开朗。在网络这么发达的今天，很多问题网络都 能替你解决，什么地方不懂可以上网搜一搜方便快捷。经过这次设计的制作，学到了很大课堂上没学到的东西，只要是感兴趣，完 成的就特别快，做的也会更加的快。实践与理论相结合就能很快的进步，知识的 综合利用会让我对网站有更多的了解。新余学院课程设计评审意见表