毕业论文0902马兰兰.docx
- 文档编号:4604750
- 上传时间:2022-12-07
- 格式:DOCX
- 页数:13
- 大小:74.94KB
毕业论文0902马兰兰.docx
《毕业论文0902马兰兰.docx》由会员分享,可在线阅读,更多相关《毕业论文0902马兰兰.docx(13页珍藏版)》请在冰豆网上搜索。
毕业论文0902马兰兰
北京科技大学远程与成人教育学院
毕业设计(论文)
题目:
网站的设计与实现
学习中心:
北京ITET培训中心
专业:
计算机科学与技术
年级:
0902
姓名:
马兰兰
学号:
2093592116
指导教师:
2011年12月22日
北京科技大学远程与成人教育学院
毕业设计(论文)
题目:
实用网站的设计与实现
学习中心:
北京ITET培训中心
专业:
计算机科学与技术
年级:
0802
姓名:
刘吉惠
学号:
2083592089
指导教师:
年月日
北京科技大学远程与成人教育学院
毕业设计(论文)任务书
北京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网站,这似乎也已经成为一种潮流。
关键字:
网站网页制作
目录
引言4
1.1网站域名的注册与使用4
1.2网站建设的相关软件4
1.3网站的规划设计4
1.3.1网站的栏目设计5
1.3.2确定网站的框架5
1.4网页基本构成元素5
一、建站须知6
1、确定主题6
2、选择空间6
3、网站设计要点6
4、在本地搭建网站服务器平台6
二、个人网页的制作7
1、用Photoshop完成网页设计7
2.Dreamweaver完成网页制作8
3、制作时应注意事项10
三、网站的上传10
总结12
致谢12
引言
1.1网站域名的注册与使用
建立一个网站首先要有一个自己的网站地址(网址),网址是由域名来决定的。
因此若想建立网站,首先需要注册或者转入一个域名以便命名要建立的网站。
随着Internet的发展,人们把域名分为几个大类,分别以不同的后缀结尾:
.com用于商业公司
.org用于组织、协会等
.net用于网络教育
.edu用于教育机构
.gov用于政府部门
.mil用于军事领域
.cn中国专用的顶级域名
因此,在做一个网站以前要先注册一个好的域名。
一个非产品推销的纯信息服务网站,其所有建设的价值,都凝结在其网站域名之上。
失去这个域名,所有前期工作就将全部落空。
目前,做个人网站的很多都依赖免费个人空间,其域名也是依赖免费域名指向,如网易的虚拟域名服务,其实这对个人网站的推广与发展很为不利,不光是它“适时”开启的窗口妨碍了浏览者的视线和好感,让人一看就知道是个人网站,而且也妨碍了网页的传输速度。
所以,可以花点钱去注册一个域名,独立的域名就是个人网站的第一笔财富,要把域名起得形象、简单、易记。
1.2网站建设的相关软件
1、Photoshop
2、Dreamweaver
3、Flash
4、Fireworks
1.3网站的规划设计
在进行一个网站设计之前,要先明确网站的风格及特点,这对具体的设计是很有利的。
利用制作网站的软件如dreamweaver进行网页框架、文字布局、页面链接、动态效果等设计,也包括利用photoshop或者fireworks等平面设计软件实现平面设计、静态无声图片设计,或者利用flash实现动画效果。
网站的延伸设计。
主要包括网站主题的定位、用户群定位、智能交互、制作策划、形象包装和宣传营销等。
1.3.1网站的栏目设计
在我们确定了网站的主题和风格后,就应该围绕主题制作相应的网页内容,设计相应的题材栏目。
设计网站logo
网站logo是网站的标志,是站点特色和内涵的集中体现。
设计时不仅要考
虑到网站整体发展到一个高度时相应的推广活动所要求的各类效果,同时应
使用能够让多数用户喜欢、印象深刻的造型。
设计网站的标准色彩
网站给人的第一印象来自视觉冲击,所以确定网站的标准色彩是相当重要的一步。
不同的色彩搭配产生不同的效果,并可能影响到网页浏览者的情绪。
网站标准色彩的选择和确定,是由网站的主题和企业自身的特点决定的。
所以,在定位网站VI形象时,要明确网站所要传达的信息、定位网站的用户群,不要使用过多的颜色和注意网站色差问题等。
1.3.2确定网站的框架
网站框架可以使站点链接清楚,层次清晰。
同时,为以后为以后业务需要和规模扩充,提供了方便,以免以后修改整个网站的框架。
1.4网页基本构成元素
要学会制作网页,首先需要了解网页都是由什么元素构成的。
文字:
文本是构成网页的基本元素。
一个最简单的网页可以只有几行文本。
图片:
正是有个各种美丽的图片,网页才变得多姿多彩。
动画:
如今,网页上的动画越来越多,最常用的有GIF动画、Flash动画等。
超连接:
如上所述,超连接几乎是必不可少的。
一个没有超连接的网页,就如同汪洋大海中的一座孤岛,失去了与外界的一切联系。
其它元素:
还可以在网页中添加声音、视频等元素。
一、建站须知
1、确定主题
做个人网站,好多人都喜欢在网页中放一些自己感兴趣的内容,但是个人的能力毕竟有限,网站后期会因为无力维护而导致站点更新缓慢、内容匮乏。
所以个人建议在做个人网站时,要选定一个主题。
做一个小而精的有自己风格的网站。
2、选择空间
个人认为建站初期可以申请免费域名空间,但是到后期为了网站更好的发展可以考虑去注册一个域名。
3、网站设计要点
制作清晰的网页链接关系。
其中导航清晰,布局合理,层次分明,页面的链接层次不需太深,这样可使浏览者在最短的时间内找到需要的东西。
尽量保持风格统一,这样可以加深浏览者对自己网站的印象。
色彩和谐、重点突出。
保持主页界面的清爽性
动态不易太多。
动态效果太多会让浏览者眼花缭乱,适当的动态效果可起到画龙点睛的作用。
4、在本地搭建网站服务器平台(安装以windowsXP为例)
1)将windowsXP系统安装光盘插入到驱动器里。
2)选择开始菜单上的设置-控制面板命令,打开控制面板,双击添加或删除程序,打开
3)在左侧列表中选择添加/删除windows组建
4)选中【internet信息服务(IIS)】
5)单击下一步,安装完成后就会出现【windows组件向导】安装结束对话框(一般默认IIS会被安装在C盘,集中一个wwwroot文件夹就是浏览访问的默认目录)
6)打开IIS,如图。
创建一个新的web站点
从图中可以看到新建,选择新建|虚拟目录,这是就会出现虚拟目录创建向导的对话框。
按照对话框的提示逐步进行下一步的操作。
其中虚拟目录别名就是新建的站点名称,网站内容目录就是输入虚拟目录的真实位置(即个人网站的所有网站文件)。
7)设置站点属性因为是选择本地计算机作为web服务器,所以可以在URL前缀的文本框中输入http:
//127.0.0.1/
二、个人网页的制作
1、用Photoshop完成网页设计
1)页面内容翔实
网络是虚拟的,而网站往往体现的是现实世界中的一个实体,不管是企业或个人。
极富特色、内容翔实、浏览顺畅、效果独特的网页才会使人驻足观看。
2)视觉效果新颖
网页形象要不落俗套,把内容的独特的元素,如名称、标志、标准字体、标准色等等。
通过这些元素的合理应用,来实现网站形象与个性的塑造提高视觉效果。
3)栏目布局明确
页面合理流畅、环环相扣、可信安全,这几点是一个优秀网站的精神所在,也是吸引力的来源。
所以在建网站时应把网站内容的层次性和空间性突出显示出来,使人一眼就能看出网站重点突出,结构分明。
4)特殊字体慎用
在photoshop中虽然可以使用任意字体,但是当页面上传至网络空间中,文字是非图片形式可编辑的时候,谁也不能预测访问者在他们的计算机上将看到什么。
所以为了避免所选择的字体在访问者的计算机上不能显示,特殊字体须谨慎使用。
2.Dreamweaver完成网页制作
站点
2.1创建站点
要制作一个网站,第一步操作都是一样的,就是要创造一个“站点”,这样可以使整个网站的脉络结构清晰地展现在面前,避免了以后再进行纷杂的管理。
从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”,之后再选择其中的“站点”,再次弹出一个对话框,在文本框中输入自己已经想好的网站名称“myself”。
填好后,单击“下一步”,进入下一个步骤。
由于我要做的是一个静态的网页,所以选择上面的一项“否,我不想使用服务器技术。
”
单击“下一步”,进入下一个步骤。
在此选项中有两个选择,选择推荐的“编辑我的计算机上的本地副本,完成后再上传到服务器”。
底下的文本框允许在本地磁盘上指定一个文件夹,Dreamweaver将在其中储存站点文件的本地副本。
单击该文本框后面的文件夹图标,新建并指定一个空的文件夹如“E:
/website”。
之后单击“下一步“,进入下一个步骤。
这一步是如何设置连接到远程服务器,弹出式菜单中有6种选择,这里选择“无”。
而后“下一步”再“完成”,即可。
2.2创建站点内容
站点创建完成后,就可以创建Web页来填充站点了。
在“右侧浮动面板组”中选择“文件/文件”面板,此时整个网站中没有任何内容。
用鼠标右击面板中的本地根目录文件夹。
在弹出的菜单中选择“新建文件”,新建一个文件后将其命名为“index.htm(或index.html),它就是未来的首页。
由于“myself”网站并不是只有一个栏目,所以继续用鼠标右击右侧,在弹出的菜单中选择第二项“NewFolder(新建文件夹)”。
执行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客户端软件(如OutlookExpress),并打开一个空白的新邮件,供浏览者撰写内容来与网站联系人联系,这是一种最方便的互动方式。
建立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。
适当变化网页中的字体
网页中的字体字号、字距、行距和文字颜色可作些适当变化,以求最美的视觉效果。
需要突出的地方可以用不同的字体、字号和不同的颜色表示。
字体最好采用系统自带的字体,因为字体的显示效果是由浏览者的浏览器来决定的。
许多漂亮的文字,浏览器可能并不支持,可以把文字做成图片的方式来处理,不过这种方法不适合在大段的文字上采用。
恰当的运用css样式表会使文字处理达到事半功倍的效果。
但每一页中的字体要限制在4种以内,过多的字体反而显得杂乱无序。
三、网站的上传
完成网页制作后,在浏览器中输入http:
//127.0.0.1访问一下,检查一下页面是否还存在什么问题,尤其是链接这一部门。
若页面没有问题后,就可以将其上传至申请的服务器了。
个人网站一般采用FTP软件进行上传文件、更新文件和维护网站。
FTP客户机可以向服务器发出各种命令,包括下载文件、上传文件、创建或改变服务器上的目录。
总结
在互联网走进我们的生活之前,没有人敢梦想拥有自己的报纸、杂志、电台、电视台。
现在不同了,互联网给我们提供了一个“表达自我”的自由天地,你可以拥有自己的新闻邮件,你可以建立自己的个人网站。
只要你办得成功也可以吸引成千上万的订户、读者,并建立自己在众多参与者中的权威地位。
建立个人网站的基本过程可以分为以下七个环节:
1 了解中国网络个人主页研究背景与发展现状
2 系统需求分析与总体设计
3 熟悉网站开发模式、工具及环境
4 把自己的作品和想要展示的内容制作成网页。
5 使用动态网页技术,实现动态内容更新。
6 认真地选取测试用例,进行交叉测试
7 网站的后期完善、宣传及发展方向
其中,网页制作和使用动态网页技术实现动态内容更新是网站开发的核心内容。
通过这次的学习过程,让我巩固了以前所学的知识。
同时,也让我看到自己的欠缺之处,如对使用动态网页技术,实现动态内容更新。
在这块是我学习不足的地方,也是我以后重点学习的地方。
致谢
本设计能够顺利的完成,应归功于各位任课老师的认真负责,使我能够很好的掌握和运用专业知识,并在设计中得以体现。
在此向北京科技大学远程教育学院,北京ITET培训中心的的全体老师表示由衷的谢意,感谢他们两年来对我的的辛勤栽培与指导。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 毕业论文 0902 马兰
![提示](https://static.bdocx.com/images/bang_tan.gif)