计算机个人网站的设计与制作.docx
- 文档编号:10794858
- 上传时间:2023-02-23
- 格式:DOCX
- 页数:12
- 大小:27.48KB
计算机个人网站的设计与制作.docx
《计算机个人网站的设计与制作.docx》由会员分享,可在线阅读,更多相关《计算机个人网站的设计与制作.docx(12页珍藏版)》请在冰豆网上搜索。
计算机个人网站的设计与制作
目录
第一章绪论1
第二章网站制作的基础知识2
2.1建站工具2
2.2网站建设的三个阶段2
2.3网站设计步骤2
第三章制作网页3
3.1建立站点3
3.2制作首页3
3.2.1页面设置3
3.2.2网页布局3
3.2.3插入图象3
3.2.4插入多媒体3
3.2.5插入文本3
3.3建立子网页4
3.4文本链接4
第四章HTML语言介绍5
4.1HTML语言5
4.2网页基本代码5
第五章工具介绍7
5.1PHOTOSHOP7
5.2Dreamwear7
总结8
参考文献9
后记10
附录11
网站策划书11
个人网站的设计与制作
内容摘要
摘要:
随着经济社会的发展,计算机已被应用到生活的各个领域.与此同时,互联网作为信息技术的通信桥梁连接着全球的计算机,而网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者,在internet上表现出及其重要的作用.无论是国内还是国外都得以迅速的发展和壮大,并被人们重视和关注,互联网已彻底改变了世界,互联网的世界蕴藏着无限的可能,在这种情况下,各行各业及其个人|,单位,工厂,企业等等在网上苟建属于自己的网络信息[平台,保护自己的网络资源并在互联网上开辟自己的市场和消费群体,以及构造自己数字化世界和加强全球范围内地域的人们联系交流等等活动也就显得日益重要.于是各种各样的网站便如雨后春笋般的出现鱼龙混杂切良莠不齐.internet的日益兴起和以网页为载体的网络信息的广泛传播和应用,使得网站的建设及网页制作得到发展的空间,大至大型企业的产品推销,售后服务,解决方案,小至个人WEB页面开发,形形色色,五彩缤纷,网站建设及网页制作也成为计算机网络领域最热门的话题.基于如今社会的需要,本论文主要介绍怎么制作一个静态的个人网站,在我个人的理解中,能够有自己的个性和特点,这样才能吸引人.只有一个目标,那就是做好自己
.
关键词:
个人设计网站
Abstract:
:
Withthedevelopmentofeconomyandsociety,thecomputerhasbeenappliedtoallareasoflife.Atthesametime,theInternetasaninformationtechnologycommunicationbridgebetweentheglobalcomputer,andasawebsiteinformationmainmanifestationsandInternetinformationcarriers,Internetdemonstrateditsimportantrolebothindomesticandabroad.Toberapidlydevelopandgrow,andpeople'sattentionandconcern,theInternethaschangedtheworld,theworldofInternetunlimitedpossibility,inthiscase,allwalksoflifeandpersonal|,units,factories,enterprisesandsoonintheonlineGouJianoftheirownnetworkinformationplatform,toprotecttheircybersourceandtheInternethasopeneditsownmarketandconsumergroups,andtoconstructtheirowndigitalworldandstrengthenglobalregionsofthepeopletocontacttheexchangeactivitiesandsoonalsoappearsincreasinglyimportant.Thenavarietyofsiteslikebambooshootsafteraspringrainappearslikedragonsandfishesjumbledtogethercuttinguneven,somegoodandsomebad.Internetgrowingandwebpageasthecarriernetworkinformationspreadandtheapplication,thewebsiteconstructionandwebpagemakingroomfordevelopment,tothebigEnterpriseproductstosell,aftersaleservices,solutions,rangingfrompersonalWEBpagedevelopment,ofeveryhue,ariotofcolours,websiteconstructionandwebpagemakinghasbecomethehottopicinthedomainofcomputernetworkbasedontheneedsofthesociety.Nowadays,thispapermainlyintroduceshowtoproduceastaticwebsite,inmyunderstanding,canbehavetheirownpersonalityandcharacteristics,inordertoattractpeople.Onlyoneobjective,thatistodotheir.
Keywords:
personalwebsitedesign
第一章绪论
人类已经进入21世纪科学技术突飞猛进,经济知识和信息产业初件端倪,特别是信息技术和网络技术的迅速发展和广泛应用,社会的政治,经济,军事,文化等领域产生越来越深刻的影响,也正在改变人们的生活学习,交流方式.信息的获取处理,交流和应用能力,已经成为人们最重要的能力之一.在不久的将来,知识经济将占世界的经济发展的主导地位,国家综合国力和国际竞争能力越来越取决于教育发展科学技术和知识创新的水平,教育发展,教育在经济和社会发展过程中将呈现出越来越突出的重要作用.随着internet的出现,网络正在改变整个世界,由于internet具有传播信息,容量极大,形态多样,迅速方便,全球覆盖,自由和交互的特点,已经成为心的传媒,而将教育和网络,而且个人网站也如雨后春笋般大量的出现,通过计算机网络实现宣传,交流及资源的整合
第二章网站制作的基础知识
2.1建站工具
编辑网页的工具很多,但是我们一般采用的是Macromedia公司的网页三剑客来制作网页.三剑客分别为DreamwearCS3,fireworks,flash.
2.2网站建设的三个阶段
网站的定位即网站设计的最终目标及指导方针.确立网站主题,解决为谁设计,吸引谁,交流什么.
制作网页通过网页设计体现网站整体协调一致的风格.网站色彩基调,配色方案,页面色彩的格调,页面构图及图片,动画处理等都要反复研究.方便的导航设计使用户易于访问站点中的资源.
网站的发布与维护完成对网站所有的文件测试并上传到服务器,进行网站的推广和宣传,建立信息收集反馈,即使更新网页.
2.3网站设计步骤
设定网站主题并收集资料分析网站访问对象是什么样的群体,确定网站设计要达到的目标,进一步解决网站展示的内容和网站要实现的功能.
建立站点的目录结构用来分类保存网站中的不同资源,精心设计的网站目录结构,所有的文件都保存在一个目录中,这给今后的网站维护和扩充带来了很大的困难.例如:
files保存非index之外是文件,image保存图片文件,sounds保存声音文件等等.
建立网页的链接关系网页的链接结构要层次清晰,访问方便快捷,就要设计网站中网页的链接关系用最少的电击打开网页站内的任何一个网页,为用户提供最便捷的服务
页面制作与网页制作,网站图标,网页标题,导航栏设计,各页风格,页面规划,便捷的链接,合理使用框架,巧用背景色,合适的图片,网页空白
网站测试,已经建好的一个精美的网站在发布之前进行严格的测试.如果在测试中发现错误,就要及时修改,在准确无误后,可正式在internet上发布
网站发布把制作好的网站发布到自己的服务器系统上,也可以使用上传工具把网站发布到ISP提供的虚拟主机上.在国外或国内网站提供免费的主页空间或域名,上传后就可以使用浏览器访问自己的网站了
推广宣传后期维护网页上传后,及时更新网站内容,为浏览者提供丰富,及时的信息.网页的更新速度是衡量一个网站的主要目标.同时增加可网站的访问量,要采用各种方法加以推广.例如在搜索引擎上注册,发布网络广告提供免费服务或者使用传统的促销媒介等等方式来推广网站.
第三章制作网页
3.1建立站点
选择”站点”,单击”管理站点”,单击”新建”,选择站点,在面板组就会出现站点等文件夹;了.在右边的面板组中选择”站点”文件名.右击”新建文件”,命名为”index”完成首页的命名.
3.2制作首页
3.2.1页面设置
首先双击”index.html”,进入页面的编辑窗口.右击空白区域,在菜单选择”页面属性”,之后弹出”页面属性”对话框,若选择主菜单”修改/页面属性”项,也可以把打开该对话框.在”页面属性”对话框中,左侧窗口显示”分类”,其中包括了”外观””链接””标题””标题/编码””跟踪图象”……..5项,右侧区域则显示各种可以设置的项目
3.2.2网页布局布局.下面简单的介绍下表格的布局方式.通过单击”插入”面板中的”常用”选项中的”表格”来打开”表格”对话框,对话框可分为”表格大小””页眉””辅助功能”三部分.
3.2.3插入图象
图象是网页中不可缺少的组成部分,恰当地使用图象,可以使网站充满生活生命与说服力,吸引更多的浏览者,加深他们欣赏你网站的意愿,首先将游标停留在要插入图片的位置,通过单击”常用”拦中的”图象”的下拉按扭,单击第一个”图象”按扭,随即弹出”选择图象源文件”对话框.从计算机磁盘中选择想要插入的图象文件.
3.2.4插入多媒体
将光标移动到要插入flash动画的位置,选择”插入”面板中的”常用”选项卡单击第一个”flsh”动画(*.swf),调整flash动画的大小,既可以手动调整,也可以在下面的属性里添加上,想要看效果的话,只有按F12预览下.
3.2.5插入文本
文字是人类语言最基本的表达方式,在网页中,文本内容也可以说是重要的组成部分,它是最关键的因素.插入文本的两种方式:
一种是在网页编辑窗口中直接键盘输入文本;另一种是复制文本方式.直接使用Dreamwear的文本复制功能,将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作,具体步骤如下:
打开文本编辑软件(如Micrsoftword),选种要复制的文本,执行菜单”编辑/复制”的文本,执行菜单”编辑/复制”命令或直接使用快捷键ctrl+c,之后切换回Dreamwear将游标停留在插入文本的位置,执行主菜单”编辑/粘贴”命令或直接使用快捷ctrkl+v,即可将打断的文本快速粘贴到网页中.
3.3建立子网页
制作子网页的一般步骤和首页的步骤差不多.如果说你的首页有标题的话,那么在子网页中一般需要大量的打字叙述或者是图片,这就需要做好细节工作了.
网页链接
网站实际上是由很多网页组成的,那么网页之间是如何联系的呢?
这就是本章要讲的内容……网页的”链接”.又称”超链接”,它作为网页的桥梁.网页中的很多对象都可以加入”链接”属性.在Dremwear中,如果以”链接”的媒介来划分的话,则”链接”可以划分为”文本链接””图象链接”……..”地图链接””Email链接””锚记链接””文件下载”…..链接和”跳转菜单”.
3.4文本链接
“文字链接”即以文字作为媒介的链接,他是网页中最常被使用的链接方式,具有”文件小,制作简单和便于维护”的特点.接下来结合我的个人网站为实例,来讲解如何为文字”链接”1.将已经制作完成的首页的各个子网页准备好.在Dreamwear中打开首页,之后为文字建立”链接”的文字,观察属性面板,其中包括一个”链接”文本框和”目标”文本框.接下来需要把链接的地址加入到文本框中,在链接文本框下还有一个”目标”下拉列表,从中可以选择链接网页显示窗口方式,共有4种.分别为-blank,-parent,-sel或top.还可以在属性窗口设置一些”链接”分类,可以进行的设计有”链接大小””链接颜色”“变换图象链接”“已访问链接”,至此,第一个栏目的链接就完成了,按下ctrl+s保存网页,在按下F12预缆,测试一下,当鼠标放在你所链接的地方时变成手形,并且浏览器窗口下面的状态出现链接的地址,单击文字,页面立即跳转到第一个栏目,这表示链接已经制作成功了.
第四章HTML语言介绍
4.1HTML语言
HTML是用来描述网页的一种语言。
HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言,而是一种标记语言(markuplanguage)标记语言是一套标记标签(markuptag),HTML使用标记标签来描述网页.Web浏览器的作用是读取HTML文档,并以网页的形式显示出它们。
浏览器不会显示HTML标签,而是使用标签来解释页面的内容
,
,MyFirstHeading
,Myfirstparagraph.
,,与之间的文本描述网页,与之间的文本是可见的页面内容,与
之间的文本被显示为标题,与
之间的文本被显示为段落.4.2网页基本代码
border=0> //www.alles.or.jp/~queen/webgraph/bg/image/star_kabe_01.jpgborder=0> //www.alles.or.jp/~queen/webgraph/bgmage/star_kabe_01.jpgborder=0> ODY> 第五章工具介绍 5.1PHOTOSHOP photoshop是Adobe公司旗下最为出名的图像处理软件之一。 PHOTOSHOP的应用领域很广泛,在图像、网页设计、视频、WEB出版各方面都有涉及。 Photoshop的专长在于图像处理,而不是图形创作。 图像编辑是图像处理的基础,可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。 也可进行复制、去除斑点、修补、修饰图像的残损等。 这在婚纱摄影、人像处理制作中有非常大的用场,去除人像上不满意的部分,进行美化加工,得到让人非常满意的效果。 图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像,这是美术设计的必经之路。 photoshop提供的绘图工具让外来图像与创意很好地融合,成为可能使图像的合成天衣无缝。 5.2Dreamwear dreamwraver软件由美国著名的网站应用开发工具生产厂商Adobe于2005年6月推出并正式投入市场以来,已经发展得相当成熟。 关于dreamwraver的技术介绍的相关书籍与网络信息相当丰富。 通过大学中软件开发环境课程的学习,对dreamwraver有了比较深刻的认识,并比较轻松的掌握了dreamwraver的操作。 因此,软件技术可以完成任务的要求 它现在有Mac和Windows系统的版本。 随Macromedia被Adobe收购后,Adobe也开始计划开发Linux版本的Dreamweaver了。 Dreamweaver自MX版本开始,使用了Opera的排版引擎"Presto"作为网页预览。 Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。 它包含HomeSite和BBEdit等主流文字编辑器。 帧(frames)和表格的制作速度快的令您无法想像。 进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 甚至可以排序或格式化表格群组,Dreamweaver支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。 总结 在本次设计的全过程中,我对在校所学的知识有了一个比较系统的认识和理解.涉及了各个方面的知识,大大扩充另外我的知识面,同时是我学会了如何用我所学的知识解决实际问题,在设计中我深知自己掌握的知识还远远不够,掌握的一些理论知识应用到实践中去,总会出现这样或那样的问题,不是理论知识没有掌握好,而是只知道书本上知识是远远不够的一定要把学到的理论知识和实践联系起来,多练多做,计算机是一门非常复杂且庞大的学科,一项课往往需要多项技术才可以完成.在设计阶段,通过对课题的深入研究与分析,迫使我对技术有了一定的了解.计算机技术的高速发展,使我深深的认识到只有不断学习,才能不至于在计算机领域被淘汰,今后还要加强学习,努力使自己成为一名专业的计算机人员,为自己所从事的工作服务. 参考文献 [1]姜楠完美网页设计与制作中国青年出版社,2004年5月. [2]王映雪等编著作,HTML网页制作,上海科学普及出版社,2006 [3]雁滕创作室编,网页制作方法与技巧,机械工业出版社,2009. [4]Dansuciu,Gottfriedvosen,theworldwidewebanddatabases,springer,2001.1 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。 copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1
br>
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。