幼儿园网站建设.doc

xx林业职业技术学院毕业设计（论文）信息工程系毕业设计材料 xx林业职业技术学院毕 业 设 计题 目 幼儿园网站建设班 级 网络技术111专 业 计算机网络技术学生姓名 指导教师 日 期_ 2014 年 3 月 14 日xx林业职业技术学院毕业论文（设计）成绩评定表姓名 班级网络111学号 照片系别信息工程系专业计算机网络技术论文题目幼儿园网站建设指导教师评语评分1 论文及设计内容的正确性；2论文观点、设计质量及其理论与实践意义；3题目难度；4综合运用知识及资料能力；5文字水平及书面表达能力。评阅评语评分：_分(满分50分)指导教师签字:_年_月_日答辩成绩1 规定时间内论文陈述情况；2逻辑思维能力与语言表达能力；3回答问题的正确性能超；4理论知识、设计创意及可应用性。评分：_分(满分50分)答辩组长签字:_年_月_日最后成绩总得分:_分 系主任签字：:_年_月_日 （系公章） xx林业职业技术学院计算机专业毕业论文（设计）任务书论文（设计）题目 系、专业 学生姓名 指导教师姓名、职称 下发日期 （任务起止日期： 年 月 日至 年 月 日）论文（设计）的主要内容与要求及其主要技术指标：进 度 安 排序号毕业论文（设计）工作进度与安排日期（起止周数）%123456系意见：签字： 年 月 日此任务书由指导教师填写。xx林业职业技术学院毕业论文（设计）开 题 报 告 书 2014 年 4 月 19 日姓名 系部信息工程系课题性质学号 专 业计算机网络技术课题来源题目幼儿园网站建设一、选题的目的和意义（含国内外相同领域、同类课题的研究现状分析）：了解幼儿园网站的制作流程和基本技法，掌握静态网页的制作技术，熟练掌握div+css布局页面的方法。网页的用处在当今社会的用途越来越广泛，一个好的网页能够吸引更多的视线，能够为人们创造更便利的服务。网站是我们面对互联网用户的“桥梁”，而这个“桥梁”的完美程度将对访客对我们的第一印象产生极大的影响。二、本题的基本内容（课题任务、重点研究内容、实现途径、方法及进度计划）：1 课题任务（1）收集一些有关幼儿的图片和素材（2）把收集的一些幼儿图片用photoshop进行一些美化和处理（3）制作出一张效果图（4）用dreamweaver开始设计网页2. 重点研究内容：（1）如何能更好的美化图片（2）要做出一张非常美观、能吸引人眼球的效果图（3）在网站中做出一些动画的效果，让网页更具活力（4）实现网页链接功能，让网页更加完整3. 实现途径及方法（1） 上网查阅相关资料（2） 向相关老师请教；（3） 用以前学过的知识或查相关的书2 进度计划：10月1日开题报告10月9日论文大纲3月15日论文初稿3月20日4月15日修改论文4月21日论文定稿5月31日论文答辩三、推荐使用的主要参考文献： 1 温谦 CSS设计彻底研究 人民邮电出版社 2008 2 倪洋 网页设计 上海人民美术出版社 20123 （美）林奇，（美）霍顿 优秀网站设计 机械工业出版社 20124 王红卫PS调色秘技 清华大学出版社 20125葛永明网页制作与网站管理机器工业出版社，2006.6王晓鹏 繆亮 Dreamweaver中文版基础与实例教程 电子工业出版社，2012.7柏松 中文版Photoshop CC完全自学手册（第三版）清华大学出版社 20148熊前兴，闵联营 网页设计与制作教程 科学出版社，2004四、本人签名 签字： 2014年4月19 日五、指导教师意见：签章： 年 月 日六、系审查意见： 签章： 年 月 日摘要在科技、信息技术高速发展的这个时代，Internet网络进入千家万户，它综合了报纸、广播、电视等传统媒体的优点，凭借着其成本低、效率高、速度快、传播面广等优势，已经成为大部分人们生活中不可或缺的重要获取信息的方式。对于教育类的幼儿园网站来说，首先建好一个网站能够让家长为自己的孩子快速获取自己所需要的园内的重要信息外，也能够让家长及时了解园内的教学、工作、最新动态等。文中主要进行家贝爱童网站的整体风格设计，并使用Div+css技术进行网站的首页、栏目页、内容页等页面的设计和制作。 【关键词】Internet，幼儿园，div+css目录一、制作网站的背景1二、采用软件的介绍2（一）Pshotoshop2（二）Dreamweaver31、软件优点3(三)Html语言介绍41、主要特点52、基本结构5三、整体设计7(一)网页布局类型7（二）网页整体造型7（三）网页设计要素7(四)网站的设计流程81、建立网站结构82、首页的设计和制作83、制作其他页面8四、详细设计9（一）首先用PS制作网页效果图9（二）利用Dreamweaver开始制作网页13（三）网站首页制作14（1）网站布局：14（2）制作banner部分15（3）制作导航栏15（4）制作内容页面：16（5）制作footer部分18五、运行和测试20六、总结21七、参考文献221、一、制作网站的背景 随着网络技术的不断发展，如今的公司越来越倾向于在网络上进行宣传产品，网页设计成了企业展示自身形象、发布产品信息、联系网上客户的新平台、新天地，进而可以通过电子商务开拓新的市场，以极少的投入获得极大的收益和利润。网页设计是通过网站管理员来管理整个网站的内容，使之公司的信息不断得到更新。 网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网站被称为（网络商标）也是企业无形资产的组成部分，而网站是Internet上宣传和反应企业形象和文化的重要窗口。在信息技术飞速发展的今天，人们获取信息的方式更多来源于互联网。而吸引游览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。我所做的这个关于幼儿园的网页设计，主要分为五大板块：早教课程、小学课程、英语课程、艺术课程和特色活动。这些实现了人们更好的了解佳贝爱童的重要信息。二、采用软件的介绍（一）Photoshop Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。 2003年，Adobe Photoshop 8被更名为Adobe Photoshop CS。2013年，Adobe公司推出了最新版本的Photoshop CC，自此，版本 Photoshop CS6是Adobe PhotoshopCS系列最后一个版本。 Adobe只支持Windows操作系统和Mac OS操作系统版本的Photoshop，Linux操作系统用户可以通过使用Wine来运行Photoshop CS6。从功能上看，该软件可分为图像编辑、图像合成、校色调色及特 效制作部 分等。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修补、修饰图像的残损等。图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合。校色调色可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。特效制作在该软件中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由该软件特效完成。（二）Dreamweaver Adobe Dreamweaver，简称“DW”，中文名称梦想编织者，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能。它有Mac和Windows系统的版本。随Micromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。 Dreamweaver自MX版本开始，使用了Opera的排版引擎Presto 作为网页预览。Dreamweaver 2.0版本具有强大的站点管理功能，内置FTP软件可以直接上传主页；所见即所得的页面编辑方式；支持Styles Sheet样式表单，创造丰富的页面效果；支持Layer层，并可使用Timeline时间轴制作动态网页；内置Behavior行为，为网页增加交互功能；提供模板和库可以加速页面的生成和制作；支持外部插件，提供无限的扩展能力。1、软件优点（1）制作效率Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤 便可完成。Dreamweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。（2）网站管理使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有链接。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。（3）控制能力Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。(三)Html语言介绍HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。html 是在 sgml 定义下的一个描述性语言，或可说 html 是 sgml 的一个应用程式，html 不是程式语言，它只是标示语言。1、主要特点设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面。也许你听说过许多可以编辑网页的软件，事实上，你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如McrosoftWord记事本写字板等等）以及HTML的工作常识。其实你很快就会发现,基础的HTML语言很容易。2、基本结构一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置。HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 下面是一个最基本的html文档的代码:11.html - 开始标签 - 一个简单的HTML示例 | 头部标签 - - | | | | | | | - - 结尾标签 在文档的最外层， 文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有 标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。 是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略此标记，良好的习惯是不省略。 和是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。 标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的。三、整体设计(一)网页布局类型 网页布局很多，大致可分为上中下字型、拐角型、标题正文型、左右型、封面型、Flash型、综合型等。（二）网页整体造型网页整体造型是指页面的整体形象，这种形象图形与文本的组合。页面元素的基本形状有：矩形，圆形，三角形，菱形等。这些形状的组合可以表达丰富的页面形象。采用形状时，往往要考虑形状的基本特性，从而根据要表达的页面意义来选择不同的形状。比如矩形代表着正式，规则，很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，因此，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。实际网页制作多数是接合多个图形加以设计，并结合动态网站设计技巧。（三）网页设计要素 网页最基本功能是为用户提供浏览信息和进行交互操作。因此，网页设计的基本要素是：内容、美观、简便、高效。1.内容，网页必须有实质性的信息，并且能恰当的、完全的展现出来。没有实质信息内容，或信息展现不全的网页是不受欢迎的。2.美观，网页的外观是用户的第一印象，一个设计美观的网页，能给用户带来愉悦的体验，相反，不美观的网页给用户的是痛苦的体验。美观不等于花哨，有时简朴去能恰到好处。3.简单，这一点是非常关键的，这是个和用户交互直接相关的。主要涉及导航和输入等方面。，糟糕的体验会使用户迷失方向，不知道如何操作，从而产生挫败感，造成用户的反感。4.高效，这一点涉及网页的实现技术层面。好的网页要求能高效的被浏览器解释执行。网页不能以牺牲用户浏览、操作的时间来换取界面的美观效果。一个慢腾腾的网页一定会让用户产生反感。(四)网站的设计流程1、建立网站结构网站的主要构件包括首页、列表页和内容页。首页是指浏览者访问网站时首先看到的网页，其中的内容种类丰富，是其他各个栏目的缩影，主要用于引导用户进行浏览。对于初学者而言，最容出现的问题是用其他栏目的内容把主页填充的满满的，看似信息量很大，但是对于用户体验上给人一种非常混乱感觉；列表页是对网站下某一类内容的归纳整理；内容页是网站具体内容的承载页，是制作网站的重点，也是体现网站主题的主体。2、首页的设计和制作首页的制作也需要先绘制一张草图，草图应包括网站的标志、广告条、菜单栏和友情链接等一些基本的部分。而且需要合理地布置它们。首页的内容一般都是比较概括性的文字，起引导性的作用，所以文字不应该太多。首页的草图设计好后，即可使用Dreamweaver动手制作。在首页中，注意不要使用太多的图像及音频和视频等，因为这些素材的数据量都比较大，是制约网页下载速度的重要因素之一。如果首页的下载速度比较慢，浏览者对这个网站可能就不会有太大的兴趣。3、制作其他页面其他页面的设计和制作不如首页复杂，但设计与制作的方法和首页设计一样，需要注意的是：要和首页保持相同的风格，要有返回首页的超链接，目录结构最好不要超过3层。四、详细设计（一）首先用PS制作网页效果图1、首先要制作网站的banner 网站的Banner是网站的标志，由标志图片，网站名称，宣传语和宣传图片组成。Banner是指居于网页头部，用来展示站点主要宣传内容、站点形象或者广告内部的部分。Banner部分的大小不固定。本网站的banner制作较为简单，需要在网上先找到一张效果图，之后加入一些文字，在为文字添加一些效果就可以了。制作过程如下： 首先打开Photoshop按Ctrl+N新建文档，本网站的Banner大小是919*248px，按确定完成。之后把在网上找的的图片移动到新建的文档里，按Ctrl+T调整大小，再把需要的文字添加到图片上，为文字添加效果，banner就做完了，效果如下：2、接下来就是网页的导航栏了，创建一个文件921*24px，如下图：之后用渐变工具拉个渐变现在就应该是这个样子了之后在菜单上打字，字体为宋体，颜色为#0000cc，大小为14pt。调整好字体间的距离。再创建一个新层，选择矩形选框工具，绘制1px宽度的线条并使用#ffffff填充。之后就按这个步骤把其他字体间添加线条。完整的就是下面的样子：3、之后就是制作下面的左右下部分。首先左半部分是文字加图片形式。 第一步要把图片先放到ps里，添加想要的文字，而最下面只需要输入想要的文字就行了。左半部分包括：佳贝简介、佳贝课程、特色活动和宝宝图库，做好了就是下图这样：然后要做右半部分，右半部分的上面就是全是文字形式，只要把文字输入上面，在进行文字的调整就可以了，下面的是需要一些儿童的图片。做完的效果如下：最后一步就是底部了，底部的制作主要是一张图片上面加上文字就可以了。本网站的文字就是地址和联系人还有电话。当然，选择的图片颜色最好与banner的相一致，这样做出的效果图才美观。如下图最终效果图如下：之后再做子页面的效果图。最后再用PS的切片功能，就网页的效果图切成若干图片。就可以制作网页了。（二）利用Dreamweaver开始制作网页下面开始制作网页的框架了，我要的网站是一个幼儿园网站，根据网站所需要的组成元素，本网站主要有首页、早教课程、小学课程、英语课程、艺术课程和特色活动网页组成。制作开始之前，要在本地硬盘上定义一个本地站点，用来储存网站中的诸多页面、图片、文字等。这样方便对网站内容的管理、以后的测试和网站的发布。单击“站点”下拉菜单中有一项“管理站点”，如下图：单击“新建”选择“站点”，然后单击“下一步”选择“否”连着单击“下一步”直到完成。右击文件下拉菜单中的站点，选择“新建”命令，把新建的文件更名为“index.html”。接下来就是用div+css布局。（三）网站首页制作 本网站总共设计为6个页面，每个页面都对佳贝爱童做了一些详细的介绍，主要运用div+css布局的方式来规划该网站，整体效果简洁，便于客户观看，下面具体介绍一下每个页面都涉及到了哪些内容。（1）网站布局： 本网站分为4三大部分，banner、导航栏、内容部分，及底部 。首先用div定义：代码如下：（2）制作banner部分先要在Dreamweaver 里把banner部分的大小定义好，banner的大小要根据事先做的效果图大小而定，本网站的banner大小为：921*244px。定义的代码如下：#bannerwidth:921px;height:244px;background:url(images/banner.jpg); padding-top:0px;（3）制作导航栏首先还是在div中定义好导航栏的名字，本网站的导航栏定义为“nav”，要为导航栏设置好大小，字体颜色：代码如下：#nav height:32px; background:url(images/佳贝爱童效果图_06.gif);#nav ul margin:0px; list-style:none;#nav li float:left;#nav a display:block; width:153px; text-align:center; padding-top:10px; height:24px; color:#0000CC; text-decoration:none; font-size:14px; font-family:黑体;#nav a:hover color:#FFFFFF; background:#FF9933;首 页早教课程小学课程英语课程艺术课程特色活动做好的效果就是下面的样子了：（4）制作内容页面： 首先还是在div中定好内容页的名字，本网站内容页在这里定义为“main”，当然“main”中还需要定义几个小的页面，如左半部分和右半部分，定义好之后就可以在里面设置大小背景和颜色等，代码如下：#main width:921px; height:730px;#zuo width:240px; height:730px; float:left;#you width:681px; height:730px; float:right; 首 页 制作好的效果如下：（5）制作footer部分 Footer部分也就是指网页的底部，开始还是要定义好底部的大小，本网页的footer大小为:921*171px，因为事先用PS都已经把需要的文字添加到图片上，在制作本网页时相对就简单了，只要把图片放到网页上就OK了，代码如下：这样首页就做好了，完整的首页如下图： 之后就可以制作其他的子页面了。五、运行和测试IIS配置当IIS被成功安装后，将在计算机C:Inetpubwwwroot下新建一个默认网站，通过修改默认网站配置可以建立自己的站点。如自己的网页放在D:Wy目录下，首页文件名为Index.asp其具体步骤如下：第一步：在“默认Web站点”上单击右键，选“属性”，以进入名为“默认Web站点属性”设置界面。第二步：转到“主目录”窗口，再在“本地路径”输入（或用“浏览”按钮选择）好自己网页所在的“D:Wy”目录。第三步：转到“文档”窗口，再按“添加”按钮，根据提示在“默认文档名”后输入自己网页的首页文件名“Index.asp”。 第四步：在“默认Web站点”上单击右键，选“新建虚拟目录”，依次在“别名”处输入“test”，在“目录”处输入“D: