毕业设计（论文）-论个人网站的设计与实现.doc

北京科技大学远程教育学院毕业论文北京科技大学远程与成人教育学院毕业设计（论文）题 目： 网站的设计与实现 学习中心： 北京ITET培训中心 专 业： 计算机科学与技术 年 级： 0902 姓 名： 学 号： 指导教师： 2011年12月22 日北京科技大学远程与成人教育学院毕业设计（论文）题 目： 实用网站的设计与实现 学习中心： 北京ITET培训中心 专 业： 计算机科学与技术 年 级： 0802 姓 名： 刘吉惠 学 号： 2083592089 指导教师： 年 月 日第 22 页 (共 22 页)北京科技大学远程与成人教育学院毕业设计（论文）任务书北京itet培训中心 学习中心 计算机科学与技术 专业 0902 年级 马兰兰 同学（学号2093592116）： 经研究决定，你的毕业设计（论文）题目为： 网站的设计与实现 指导教师为： 请你于 2011 年 10月 11 日- 2010 年 12 月 31日期间完成。指导教师：（签字） 年 月 日学 生：（签字）马兰兰 2011年12 月22日北京科技大学远程与成人教育学院毕业设计（论文）任务书北京itet培训中心 学习中心 计算机科学与技术 专业 年级 刘吉惠 同学（学号2083592089）： 经研究决定，你的毕业设计（论文）题目为： 实用网站的设计与实现 指导教师为： 请你于 2010 年 10月 11 日- 2010 年 11 月 12日期间完成。指导教师：（签字） 年 月 日学 生：（签字） 刘吉惠 2010年10 月25日一、 设计题目及内容摘要设计题目：论个人网站的设计与实现内容摘要：Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间。大有大型企业的产品推销、售后服务、解决方案。而小的有形形色色，五彩缤纷的个人网站。这主要是因为很多人已经不满足仅仅在Internet上的浏览信息，而是希望更深入的参与其中，拥有自己的Web网站，这似乎也已经成为一种潮流。关键字：网站 网页制作 目 录引言41.1 网站域名的注册与使用41.2 网站建设的相关软件41.3网站的规划设计41.3.1网站的栏目设计51.3.2 确定网站的框架51.4网页基本构成元素5一、建站须知61、确定主题62、选择空间63、网站设计要点64、在本地搭建网站服务器平台6二、个人网页的制作71、 用Photoshop完成网页设计72. Dreamweaver完成网页制作83、制作时应注意事项10三、网站的上传10总结12致 谢12引言1.1 网站域名的注册与使用 建立一个网站首先要有一个自己的网站地址(网址)，网址是由域名来决定的。因此若想建立网站，首先需要注册或者转入一个域名以便命名要建立的网站。随着Internet的发展，人们把域名分为几个大类，分别以不同的后缀结尾： .com 用于商业公司 .org 用于组织、协会等 .net 用于网络教育 .edu 用于教育机构 .gov 用于政府部门 .mil 用于军事领域 .cn 中国专用的顶级域名因此，在做一个网站以前要先注册一个好的域名。一个非产品推销的纯信息服务网站，其所有建设的价值，都凝结在其网站域名之上。失去这个域名，所有前期工作就将全部落空。目前，做个人网站的很多都依赖免费个人空间，其域名也是依赖免费域名指向，如网易的虚拟域名服务，其实这对个人网站的推广与发展很为不利，不光是它“适时”开启的窗口妨碍了浏览者的视线和好感，让人一看就知道是个人网站，而且也妨碍了网页的传输速度。所以，可以花点钱去注册一个域名，独立的域名就是个人网站的第一笔财富，要把域名起得形象、简单、易记。1.2 网站建设的相关软件 1、Photoshop2、Dreamweaver3、Flash4、Fireworks1.3网站的规划设计 在进行一个网站设计之前，要先明确网站的风格及特点，这对具体的设计是很有利的。利用制作网站的软件如dreamweaver进行网页框架、文字布局、页面链接、动态效果等设计，也包括利用photoshop或者fireworks等平面设计软件实现平面设计、静态无声图片设计，或者利用flash实现动画效果。 网站的延伸设计。主要包括网站主题的定位、用户群定位、智能交互、制作策划、形象包装和宣传营销等。1.3.1网站的栏目设计 在我们确定了网站的主题和风格后，就应该围绕主题制作相应的网页内容，设计相应的题材栏目。设计网站logo 网站logo是网站的标志，是站点特色和内涵的集中体现。设计时不仅要考虑到网站整体发展到一个高度时相应的推广活动所要求的各类 效果，同时应使用能够让多数用户喜欢、印象深刻的造型。设计网站的标准色彩网站给人的第一印象来自视觉冲击，所以确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到网页浏览者的情绪。网站标准色彩的选择和确定，是由网站的主题和企业自身的特点决定的。所以，在定位网站VI形象时，要明确网站所要传达的信息、定位网站的用户群，不要使用过多的颜色和注意网站色差问题等。1.3.2 确定网站的框架 网站框架可以使站点链接清楚，层次清晰。同时，为以后为以后业务需要和规模扩充，提供了方便，以免以后修改整个网站的框架。1.4网页基本构成元素 要学会制作网页，首先需要了解网页都是由什么元素构成的。 文字：文本是构成网页的基本元素。一个最简单的网页可以只有几行文本。 图片：正是有个各种美丽的图片，网页才变得多姿多彩。 动画：如今，网页上的动画越来越多，最常用的有GIF动画、Flash动画等。 超连接：如上所述，超连接几乎是必不可少的。一个没有超连接的网页，就如同汪洋大海中的一座孤岛，失去了与外界的一切联系。 其它元素：还可以在网页中添加声音、视频等元素。一、建站须知 1、确定主题 做个人网站，好多人都喜欢在网页中放一些自己感兴趣的内容，但是个人的能力毕竟有限，网站后期会因为无力维护而导致站点更新缓慢、内容匮乏。所以个人建议在做个人网站时，要选定一个主题。做一个小而精的有自己风格的网站。 2、选择空间 个人认为建站初期可以申请免费域名空间，但是到后期为了网站更好的发展可以考虑去注册一个域名。 3、网站设计要点 制作清晰的网页链接关系。其中导航清晰，布局合理，层次分明，页面的链接层次不需太深，这样可使浏览者在最短的时间内找到需要的东西。 尽量保持风格统一，这样可以加深浏览者对自己网站的印象。 色彩和谐、重点突出。 保持主页界面的清爽性 动态不易太多。动态效果太多会让浏览者眼花缭乱，适当的动态效果可起到画龙点睛的作用。 4、在本地搭建网站服务器平台（安装以windowsXP为例）1）将windows XP 系统安装光盘插入到驱动器里。2）选择开始菜单上的设置-控制面板命令，打开控制面板，双击添加或删除程序，打开3）在左侧列表中选择添加/删除windows组建4)选中【internet信息服务（IIS）】5）单击下一步，安装完成后就会出现【windows组件向导】安装结束对话框（一般默认IIS会被安装在C盘，集中一个wwwroot文件夹就是浏览访问的默认目录） 6）打开IIS，如图。创建一个新的web站点 从图中可以看到新建，选择新建|虚拟目录，这是就会出现虚拟目录创建向导的对话框。按照对话框的提示逐步进行下一步的操作。其中虚拟目录别名就是新建的站点名称，网站内容目录就是输入虚拟目录的真实位置（即个人网站的所有网站文件）。7）设置站点属性 因为是选择本地计算机作为web服务器，所以可以在URL前缀的文本框中输入/二、个人网页的制作1、 用Photoshop完成网页设计 1）页面内容翔实网络是虚拟的，而网站往往体现的是现实世界中的一个实体，不管是企业或个人。极富特色、内容翔实、浏览顺畅、效果独特的网页才会使人驻足观看。2）视觉效果新颖网页形象要不落俗套，把内容的独特的元素，如名称、标志、标准字体、标准色等等。通过这些元素的合理应用，来实现网站形象与个性的塑造提高视觉效果。3）栏目布局明确 页面合理流畅、环环相扣、可信安全，这几点是一个优秀网站的精神所在，也是吸引力的来源。所以在建网站时应把网站内容的层次性和空间性突出显示出来，使人一眼就能看出网站重点突出，结构分明。4）特殊字体慎用 在photoshop中虽然可以使用任意字体，但是当页面上传至网络空间中，文字是非图片形式可编辑的时候，谁也不能预测访问者在他们的计算机上将看到什么。所以为了避免所选择的字体在访问者的计算机上不能显示，特殊字体须谨慎使用。2. Dreamweaver完成网页制作 站点2.1 创建站点要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，这样可以使整个网站的脉络结构清晰地展现在面前，避免了以后再进行纷杂的管理。从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”，之后再选择其中的“站点”，再次弹出一个对话框，在文本框中输入自己已经想好的网站名称“myself”。填好后，单击“下一步”，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。”单击“下一步”，进入下一个步骤。在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中储存站点文件的本地副本。单击该文本框后面的文件夹图标，新建并指定一个空的文件夹如“E:/website”。之后单击“下一步“，进入下一个步骤。这一步是如何设置连接到远程服务器，弹出式菜单中有6种选择，这里选择“无”。而后“下一步”再“完成”，即可。2.2 创建站点内容站点创建完成后，就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择“文件/文件”面板，此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录文件夹。在弹出的菜单中选择“新建文件”，新建一个文件后将其命名为“index.htm(或index.html),它就是未来的首页。由于“myself”网站并不是只有一个栏目，所以继续用鼠标右击右侧，在弹出的菜单中选择第二项“New Folder(新建文件夹)”。执行N操作，新建N个文件夹，并把它们重命名为网站其他栏目的名称，存放它们各自的内容。之后再次新建1个文件夹，命名为images,用来存放“所有的图象文件”的内容。之后在个栏目的文件夹里还要建立想相应的栏目网页。2.2.1 首页设置首页布局每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，至于网站上其他Web页，原则上都必须通过首页来连接散播出去，可见首页是多么的重要。首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。当然，后缀名为html也是正确的。设置首页的页面属性首先双击“文件”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目。查看和编辑头内容一个网页文件结构上实际是由两部分组成，头(head)内容和主体(body)内容主体内容(body)是文档的主要部分，也是包含文本和图像等的可见部分。头内容(head)是除文档标题外的不可见部分，包含有文档类型、语言编码、搜索引擎的关键的关键字和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键字。下面就以首页为例，说明怎样插入较常用的头( head)内容。单击“菜单拦”下面“插入快捷”的下拉列表，选择其中的HTML类，此时右侧将会显示该类中可以插入的对象快捷按钮，再次单击第2个按钮“文件头”旁边的下拉箭头，会弹出菜单，该项列出的便是即将插入的头内容。插入图像图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。下面就来详细介绍对网页图像进行处理的操作步骤，以使得它们在保持图形美丽与网站风格搭配的基础上，图片文件能够变的更小。首先将光标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用”类，则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像：图像”按钮，单击它右侧的下拉列表，选择第1项“图像”。随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件，或在URL编辑框中输入图像的路径和名称。下面的“相对于”下拉表框中，可选择文件URL地址的类型，如果选择“文档”选项，表示图像地址相对于当前文档;如果选择“站点根目录”选项，表示地址相对于根目录。最后单击“确定”按钮，即可完成插入图像的操作。插入文本文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，一个网站成功与否，它是最关键的因素。在这最关键的因素。可丰富网站的文字内容，并以最最美观、最整齐的方式放入到网页中。2.2.2创建其它网页还有其它的几个网站与主页的制作相同，一个网页是图象和文字的组合。2.2.3 建立网页链接网站实际上是由很多网页组成的，那么网页之间是如何联系的呢?这就是网页的“链接”。“链接”，又称“超链接(Hyperlink),它作为网页的桥梁，起着相当重要的作用。网页中的很多对象都可以加入“链接”属性。在Dreamweaver中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。文字链接“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。图像链接“图像”也是常被使用的链接媒体，它和“文字链接”非常相似。为图像加入链接，首先应该在网页中插入“图像”，有关插入“图像”或“导航条”按钮的内容。E Mail的链接E-Mail链接，是指当浏览者单击该链接之后，不是打开一个网页文件，而是启动用户的E- Mail客户端软件(如Outlook Express),并打开一个空白的新邮件，供浏览者撰写内容来与网站联系人联系，这是一种最方便的互动方式。建立E-Mail链接的步骤如下所述:操作步骤步骤1 将光标停留在页面右下角要插入E-mail链接的位置。步骤2 选择“插入快捷栏”中的“常用”分类，单击左侧第2个“电子邮件链接”按钮。步骤3 在弹出的“电子邮件链接”对话框中有两个输入项，分别是“文本”和“E-Mail” 。在“文本”项中输入链接的文字，中文、英文均可，在E-Mail项中输入网站联系人的电子邮件地址步骤4 单击“确定”按钮，具有“E-Mail链接”属性的文本就插入到光标所在位置了，按下 Ctrl+S保存网页，再按下F12预览查看实际效果。上面的方法只适用于文本的“E-Mail链接”，如果想在其它的对象(如图像)上也加入这种链接，该怎办呢?下面介绍第2种建立“E-Mail链接”的方法。其实很简单，与前面讲过的图像加入链接的方法基本一样。先在页面中需要的地方插入图像，之后选中图像，并在“属性面板”的“链接”文本框中输入如下语句即可-mailto:moumoumou邮箱。与第1种方法不同的是，E-Mail 地址前面增加了mailto:字样。用这种方法就可以给图像等其他对象建立“E-Mail链接”了。3、制作时应注意事项预览时看不到图片 有时图片在编辑状态下是好的，而在预览时或在网页发布后无法显示，究其原因，一个方面可能是路径问题，另一方面可能就是因为图片用的是中文文件名而招来的麻烦。如果是路径的问题，可能是图片不在站点内，这就需要把图片存人相应的文件夹中，然后改变图片的路径就可以了。如果图片是在站点内，在预览时仍看不见图片，则往往是使用了中文的文件名、目录名或文件名。解决的方法是把中文名字改为英文字母、数字和下划线等符号组合成文件名或目录。不要忽略页面属性的设置设置左边界、顶部边界、边界宽度和边界高度。细心的用户会发现在没有进行设置前浏览时页面会在上下、左右，各留一片空白，这块区域用户不能利用，白白浪费了，为了节省网页中的宝贵空间，建议把这四个选项都设置为0。适当变化网页中的字体网页中的字体字号、字距、行距和文字颜色可作些适当变化，以求最美的视觉效果。需要突出的地方可以用不同的字体、字号和不同的颜色表示。字体最好采用系统自带的字体，因为字体的显示效果是由浏览者的浏览器来决定的。许多漂亮的文字，浏览器可能并不支持，