毕业设计（论文）-个人网站设计——个人网站建设
时间：2020-08-15 08:08:25 来源：天一资源网 本文已影响 人 
鄂尔多斯电视广播大学
毕业设计（论文）
题目：个人网站设计——个人网站建设
学 院：_鄂尔多斯电大 _
专 业：计算机应用技术
班 级： 计算机班
姓 名：____s.____
2014年12月完成
摘 要
在Internet飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。
现今的社会，人们已经离不开了网络，网络已经成为人与人之间交流的一种形式，它能够把事情的复杂化转为简单化，摆脱了时间和空间的限制。网站为很多人提供了一个网络生活空间，通过其网页展示了企业介绍、城市文化、校园文化介绍、招商信息、加盟程序、留言等一系列内容的介绍。为了更好的宣传和服务于经济发展，我通过制作一个网站来介绍宣传一下我的家乡。本文比较系统的阐述了有关网站建设方面的相关理论知识及该网站开发设计，充分体现了计算机技术服务于经济建设的重要思想。
关键词: 网站建设，Internet，城市
目录
第一章 前言 1
1．1课题来源 1
1．2 网站开发项目需求分析 1
第二章 网页制作概述 2
2.1 网页的类型 2
2.1.1 静态页面 2
2.1.2 动态页面 2
2.2 网页开发技术 3
2.3 网页布局 3
2.3.1 网页布局的基本概念 4
2.3.2网页布局方法 5
2.3.2 网页布局技术 7
2.4网页配色 8
2.5 网页设计流程 8
第三章 涉及软件 9
3.1 DreamWeaVer cs5介绍 9
3.2 DreamWeaVer cs5操作界面 9
第四章 建立网页链接 10
4.1 文字链接 10
4.2 图像链接 11
4.3在HTML语言中建立网页链接 12
第五章 结论 14
致 谢 15
参考文献 16
第一章 前言
1．1课题来源
随着二十一世纪新兴科技的飞速发展，如今的信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。就目前的科技发展水平而言，信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。
互联网拉近了各个领域之间的距离，如今利用互联网来宣传已经是必不可少的工具，城市发展也需要互联网的宣传来带动自身的发展。
1.2网站开发项目需求分析
一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分来自于客户的实际需求或者是出于自身发展的需要。在Internet飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。
第二章 网页制作概述
2.1 网页的类型
网页有多种分类,我们笼统意义上的分类是动态和静态的页面,原则上讲静态页面多通过网站设计软件来进行重新设计和更改,相对的比较滞后，当然现在有网站管理系统，也可以生成静态页面~我们称这种静态页面为伪静态。动态页面通过网页脚本与语言自动处理自动更新的页面静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外）常见的静态页面.html、.htm为扩展名的。并非网站上没有动画的就是静态页面。动态页面是通过执行aspphp、jsp、.net等程序生成客户端网页代码的网页。动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能也是我们常见的。动态页面常见的扩展名有：.asp .php、 .jsp 、.cgi 等。动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面。动态网页技术介绍ASP、JSP、CGI、PHPHTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。
? ? HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。CGI技术，即Common Gateway Interface(公用网关接口)。在早期，你可以使用不同的程序编写合适的CGI程序，如Visual Basic,Delphi或C/C++等。虽然CGI技术成熟而且功能强大，但由于编程困难，效率低下，修改复杂等缺陷，所以有逐渐被新技术取代的趋势。
ASP全名Active Server Pages，是一个WEB服务器端的开发环境利用它可以产生和运行动态的、交互的、高性能的WEB服务应用程序。ASP采用脚本语言VB Script（Java script）作为自己的开发语言。
ASPWeb上的请求转入到一个解释器中，在这个解释器中将所有的ASP的Script进行分析，再进行执行，而这时可以在这个中间件中去创建一个*.html文件（静态网页）。
PHP是一种跨平台的服务器端的嵌入式脚本语言. 它大量地借用C,Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态生成页面.它支持目前绝大多数数据库。还有一点，PHP是完全免费的JSP 是Sun公司推出的新一代站点开发语言，他完全解决了目前ASP,PHP的一个通病－－脚本级执行（据说PHP4 也已经在Zend 的支持下，实现编译运行）Sun 公司借助自己在Java 上的不凡造诣，将Java 从Java 应用程序 和 Java Applet 之外，又有新的硕果，就是Jsp－－Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。
网站主页就好象是宣传或者店面——对访问者产生第一印象，都希望尽量给人留下好的印象
一般来说，好的网站应该给人有这样的感觉：
干净整洁；
条理清楚；
网页
专业水准；
引人入胜。
网页应该力求抓住而不是淹没浏览者的注意力，过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从——离开是最好的选择，就象一些商，播放震耳欲聋的发烧音乐，你要做的唯一决定就是离开那里，越快越好。
图2-1 手绘布局图 图2-2 布局图
考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形，(也可以是一条线段) 如图2-3。
图2-3 布局图的改善
然后，增加页头。一般页头都是位于页面顶部，所以我们为图3增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线，如图2-4。
图2-4 页头的图示
然后，增加文本。页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调，如图2-5。
图2-5 文本的图示
最后，增加图片。图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方，如图2-6。
图2-6 图片的图示
经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。
（2）软件布局法
除了纸上布局，还可以利用软件来完成这些工作。如利用Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。
2.3.2 网页布局技术
（1）层叠样式表的应用
在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS有点复杂，但它的确是一个好的布局方法[7]。曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。比如一些企业网站。
（2）表格布局
表格布局被广泛使用，已经成为一个潜在的标准。随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响[8]。对于表格布局，打开一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，会可以看到这个页面是如何利用表格的。
（3）框架布局
由于它的兼容性，框架布局并没有被所有人接受。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。
2.4网页配色
网站充斥着枯燥的设计，惠普、IBM、戴尔、微软，以及其他数不尽的网站（相似的布局，相似的配色）。这样一种标准化的界面可以使浏览更方便，带给用户一种很世俗的体验，并不能与访客产生一种积极的联系。面对这种单调的设计，有一种解决方法，就是使用颜色。可能没有其他设计元素能像颜色一样能影响人们对世界感受。颜色可以瞬间改变我们的情绪和意见。颜色会让我们感觉到舒适、敬畏，或者激动。在界面设计中，颜色组合对设计非常有用。可以区分设计让用户更加难忘、引导用户使用户专注于交互、吸引用户使页面布局更舒适，更有魅力。一旦有机会可以让网站更独特，就不能放弃。如果你的网站，那么用户可能会花更多时间浏览并且想是从哪里访问过来的，他们有可能记住这个网站并且下次再访问。可能没有比颜色更好的元素可以达到这样的效果了。人们会马上对颜色产生感觉：激动、高兴或者枯燥乏味。当你试图在一个充满饱和色调的页面上浏览信息时，你的眼睛会不断地返回那些亮的颜色。最强的视觉元素是最重要的。我们趋向于忘记那些深蓝、黄色和灰色，因为每天都看到。在那些用户需要长时间在线使用的 Web 应用程序中，注意这一点尤为重要。不是很强烈的配色可以使用户专注于工作和接收重要信息。当然完美的 Web 体验不能仅仅依靠颜色，结构、交互、布局等方面也必须协同工作，来创建可用、易用的网站和应用程序。但是颜色是平衡中的重要部分，不能忽略。
第三章 涉及软件
3.1 DreamWeaVer cs3介绍
Dreamweaver CS3是Adobe(奥多比)公司收购Macromedia公司后推出的Creative Suite 3 设计套装中用于网页设计与制作的组件。作为全球最流行，最优秀的所见即所得的网页编辑器，Dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作Web页站点,Web页和Web应用程序开发的理想工具。Dreamweaver，Fireworks，Flash被称为网页制作的“三剑客”，这三款工具相辅相承，是制作网页的最佳拍档界面设计友好，空间广阔，操作精微细致是一种所见即所得的网页编辑器，既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。。
图3.1 DreamWeaVer cs3操作界面
第四章 建立网页链接
网站实际页组页之间联这就讲内网页链接链接称链接"Hyperlink）,它作为网页桥页对链接属Dreamweaver 8中，如果以“链接来话则链接为链接图链接图图链接内部链接部链接E-mail链接锚记链接载链接转单8种。
4.1 文字链接链接为媒链接页链接简单维护点来结合个为实来讲解为链接骤骤1?备经页个栏页骤2Dreamweaver 中打开页选为链接骤3观“属个链接骤4来链接骤5链接还个标从选择链接页显4种。如图
步骤6还以设链接的属单击“属页属选择链接分类进设链接链接颜变换图链接颜已访问链接颜动链接颜线样骤71个栏链接毕Ctrl+S保存网页F12预览，测试当标这4个上时将变浏览状态区会显链接到页单击页会立即跳转1个栏这链接经骤8骤为栏对应栏链接个链接实.2 图链接图链接链接为图链接应该页图关图导条”钮内来my web“为讲解图链接骤骤1备经页个栏页骤2Dreamweaver中打开页选链接图骤3观“属链接输链接骤4标选择链接页显别为-blank -parent 、-self或 top。
步骤1个栏图链接毕Ctrl+S保存网页F12预览，测试将标动画4个上时将变时浏览状态区会显链接到页会显动画单击页会立即跳转3个栏这链接经骤骤为图对应栏链接骤栏页页链接单击转页个图链实.3在HTML语页链接链接HTML语链接标记个标为：<a href=URL”文本内</a>举个简单链接实该实对应HTML代码<html><head><title>文字链接</title></head><body><p>a href-index2.html”target=”-blank”> 平面设计</a>开-blank)</p><p><a href=”index3.html>相册</a>认为空</p><p><a href=”index4.html>留言</a></p></body></html>
解释? href:是<a>标记属该属URL等于链接标 Target:也是<a>标记属当Dreamweaver“属标-blank,效果是在新窗口中打开还3种：-parent,-self和-top。这Dreamweaver中“目标内样 文本内码实设计这将链接属href和目标属target的 <a>与</a>标记之间产链接图链接举个简单图链接实该实对应码<html><head><title>图链接</title></head><body><p><a href=web/web-001.htm”target=”-blank”><img src=”images/btn-001-out.gif”alt“平面设计=width=”85”height=”18”border=”0”></a>（新开-blank）</p><p><a href=wallpaper/walpaper-001.htm”><img src=”images/btn-002-out.gif”alt=“原创壁纸width=”85
height=”18”border=”0”></a>（原窗口，默认为空</p><p>a href=”3d/3d-001.htm”><img src=”images/btn-003-out.gif”alt“三维=width=”85”height=”18”border=”0”></a></p></body></html>
解释细观码发现图链接链接别<a>与<a/>之间内链接<a>与</a>之间内是文字内图链接图片内讲过图<img src=”图<”的标记这当然会例还<img 的属alt（替换width（宽height（高）、及border（边ail链接该实对应码<html><head><title>Email连接</title></head><body><p><a href=”mailto:jiangnan@?subject=网站的意见议>给写</a></p></body><html>
解释href 等于“mailto：邮subject=主题＂subject为选项subject=主题?本次设计用Macromedia开发的专业HTML编辑Dreamweaver,对Wed点Web页Web应进设计编码和开发Dreamweaver中的可视编辑功户创页无须编写任码Dreamweaver，还务语ASP,ASP.NET,ColdFusion标记语CFML），JSP，PHP）。本设计页这写些处还开发和进。
致 谢
在论文完成之际，我要特别感谢我的指导老师的热情关怀和悉心指导。在我撰写论文的过程中，老师倾注了大量的心血和汗水，无论是在论文的选题、构思和资料的收集方面，还是在论文的研究方法以及成文定稿方面，我都得到了悉心细致的教诲和无私的帮助，特别是广博的学识、深厚的学术素养、严谨的治学精神和一丝不苟的工作作风使我终生受益，在此表示真诚地感谢和深深的谢意。在论文的写作过程中，也得到了许多同学的宝贵建议，同时还到许多在工作过程中许多同事的支持和帮助，在此一并致以诚挚的谢意。感谢所有关心、支持、帮助过我的良师益友。最后，向在百忙中抽出时间对本文进行评审并提出宝贵意见的各位表示衷心地感谢
1
鄂尔多斯电视广播毕业设计
16
相关关键词： 个人网站设计主题
