个人网页设计论文.docx
- 文档编号:7348476
- 上传时间:2023-01-23
- 格式:DOCX
- 页数:13
- 大小:95.56KB
个人网页设计论文.docx
《个人网页设计论文.docx》由会员分享,可在线阅读,更多相关《个人网页设计论文.docx(13页珍藏版)》请在冰豆网上搜索。
个人网页设计论文
炎黄职业技术学院信息工程系
毕业设计(论文)
个人网页设计
年级:
_2009级____
学号:
_0******17_
姓名:
___****_____
专业:
网络数字媒体_
指导老师:
__****____
二零一一年十二月
摘要
本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。
在介绍网页设计与制作语言的基础上,着重使用CSS样式表作为工具语言进行网页设计与制作的实际操作,分别对基于对象的JavaScript语言、用于编辑HTML语言的软件进行了详细的介绍。
本论文主要章节如下,第一章:
绪论,本章主要介绍网页设计的相关知识。
第二章:
网页设计技术概述,本章主要介绍网页设计的工具——dreamweaver,用于编辑HTML语言的软件,为后续工作奠定基础,以及基于对象的JavaScript语言。
第三章:
网站制作需求分析,介绍了本网站的主要页面。
第四章:
制作过程。
描述了网站的制作流程,着重部分页面的制作步骤。
关键词:
网页设计;HTML;CSS样式表
目录
摘要I
第1章绪论1
1.1本论文的背景和意义1
1.2网页设计的要素1
1.3本论文的主要内容1
第2章主要技术介绍3
2.1DREAMWEAVER3
2.2JAVASCRIPT3
2.3CSS样式表5
第3章网站制作需求分析6
3.1网站栏目6
3.2网站主题8
3.3网站风格8
第4章制作过程9
4.1index.html页面的制作9
4.2suibi.html页面的制作9
4.3suibi4.html页面的制作9
4.4xiangce1.html页面的制作9
4.5xiangce2.html页面的制作10
4.6xiangce4.html页面的制作11
4.7yinyue1.html页面的制作12
致谢13
参考文献14
第1章绪论
1.1本论文的背景和意义
网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台,离开网站(或者只是利用第三方网站)去谈电子商务是不可能的。
企业的网址被称为“网络商标”,也是企业无形资产的组成部分,而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。
1.2网页设计的要素
网页设计的两大要素是:
整体风格和色彩搭配。
一、确定网站的整体风格
在这里,我提供给大家一些参考经验:
1.将你的标志logo,尽可能的放在每个页面上最突出的位置。
2.突出你的标准色彩。
3.总结一句能反映贵站精髓的宣传标语!
4.相同类型的图像采用相同效果,比如说标题字都采用阴影效果,那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的!
二、网页色彩的搭配
1.用一种色彩。
这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。
2.用两种色彩。
先选定一种色彩,然后选择它的对比色。
3.用一个色系。
简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。
在网页配色中,还要切记一些误区:
1.不要将所有颜色都用到,尽量控制在三至五种色彩以内。
2.背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。
1.3本论文的主要内容
本论文主要是对对网页设计与制作进行探讨,主要内容如下:
第一章:
绪论
本章主要介绍网页设计的相关知识。
第二章:
网站制作需求分析
网站包括哪些栏目,主题是什么?
风格是什么,确定的颜色的搭配。
第三章:
用到的技术介绍
Dreamweaver\javascript\css样式表。
第四章:
网站制作过程
第2章主要技术介绍
2.1DREAMWEAVER
Dreamweaver是美国Adobe(原Macromedia,2005年被Adobe收购)公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
它不仅是优秀的WYSIWYG编辑器,更是优秀的代码编辑器,有代码加亮,代码提示等丰富功能,提供各种示例代码,并支持Javascript,PHP,ASP,JSP等多种脚本语言。
最新版本为CS4,发布于2008年9月。
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。
它包含HomeSite和BBEdit等主流文字编辑器。
帧(frames)和表格的制作速度快的令您无法想像。
进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
甚至可以排序或格式化表格群组,Dreamweaver支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。
所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能,提供超强的支援能力给Third-party厂商,包含ASP,Apache,BroadVision,ColdFusion,iced,Tango与自行发展的应用软体。
当您正使用Dreamweaver在设计动态网页时,所见即所得的功能,让您不需要透过浏览器就能预览网页。
梦幻样版和XMLDreamweaver将内容与设计分开,应用于快速网页更新和团队合作网页编辑。
建立网页外观的样版,指定可编辑或不可编辑的部份,内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。
您也可以使用样版正确地输入或输出XML内容。
全方位的呈现利用Dreamweaver设计的网页,可以全方位的呈现在任何平台的热门浏览器上。
对于cascadingstylesheets的动态HTML支援和鼠标换图效果,声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。
使用不同浏览器检示功能,Dreamweaver可以告知您在不同浏览器上执行的成效如何。
当有新的浏览器上市时,只要从Dreamweaver的网站在下载它的描述档,便可得知详尽的成效报告。
2.2JAVASCRIPT
JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。
使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。
从而可以开发客户端的应用程序等。
它是通过嵌入或调入在标准的HTML语言中实现的。
它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择,具有以下几个基本特点:
1、是一种脚本编写语言
JavaScript是一种脚本语言,它采用小程序段的方式实现编程。
像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。
它的基本结构形式与C、C++、VB、Delphi十分类似。
但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。
它与HTML标识结合在一起,从而方便用户的使用操作。
2、基于对象的语言。
JavaScript是一种基于对象的语言,同时以可以看作一种面向对象的。
这意味着它能运用自己已经创建的对象。
因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
3、简单性
JavaScript的简单性主要体现在:
首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡。
其次它的变量类型是采用弱类型,并未使用严格的数据类型。
4、安全性
JavaScript是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。
从而有效地防止数据的丢失。
5、动态性的
JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。
它对用户的反映响应,是采用以事件驱动的方式进行的。
所谓事件驱动,就是指在主页(HomePage)中执行了某种操作所产生的动作,就称为“事件”(Event)。
比如按下鼠标、移动窗口、选择菜单等都可以视为事件。
当事件发生后,可能会引起相应的事件响应。
6、跨平台性
JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可正确执行。
从而实现了“编写一次,走遍天下”的梦想。
实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。
无须有高性能的电脑,软件仅需一个字处理软件及一浏览器,无须WEB服务器通道,通过自己的电脑即可完成所有的事情。
总之,JavaScript是一种新的描述语言,它可以被箝入到HTML的文件之中。
JavaScript语言可以做到回应使用者的需求事件(如:
form的输入),而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给伺服端(server)处理,再传回来的过程,而直接可以被客户端(client)的应用程式所处理。
JavaScript和Java很类似,但到底并不一样!
Java是一种比JavaScript更复杂许多的程式语言,而JavaScript则是相当容易了解的语言。
JavaScript创作者可以不那麽注重程式技巧,所以许多Java的特性在JavaScript中并不支援。
2.3CSS样式表
级联样式表(CascadingStyleSheet)简称“CSS”,通常又称为“风格样式表(StyleSheet)”,它是用来进行网页风格设计的。
比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。
通过设立样式表,可以统一地控制HMTL中各标志的显示属性。
级联样式表可以使人更能有效地控制网页外观。
使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
CSS目前最新版本为CSS2,能够真正做到网页表现与内容分离的一种样式设计语言。
相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象盒模型的能力,并能够进行初步交互设计,是目前基于文本展示的最优秀的表现设计语言。
在网页上使用样式表有三种方法可以在站点网页上使用样式表:
将网页链接到外部样式表。
在网页上创建嵌入的样式表。
应用内嵌样式到各个网页元素。
当要在站点上所有或部份的网页上一致地应用相同样式时,可使用外部样式表。
在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页外观的一致性。
如果人们决定更改样式,只需在外部样式表—中作一次更改—而该更改会反映到所有与该样式表相链接的网页上。
通常外部样式表以.css做为文件扩展名,例如Mystyles.css。
当人们只是要定义当前网页的样式,可使用嵌入的样式表。
嵌入的样式表是一种级联样式表,“嵌”在网页的
标记符内。嵌入的样式表中的样式只能在同一网页上使用。
使用内嵌样式以应用级联样式表属性到网页元素上。
如果网页链接到外部样式表,为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。
第3章网站制作需求分析
3.1网站栏目
网站主要包括首页、随笔、相册、音乐、关于我,这五个页面。
首页效果图2-1如下:
图2-1首页
随笔效果图2-2如下:
图2-2随笔
相册效果图2-3如下:
图2-3相册
音乐效果图2-4如下:
图2-4音乐
关于我效果图2-5如下:
图2-5关于我
3.2网站主题
本网站是一个简单的个人网站设计,以动漫为主题,主要包括了本人的自我介绍、比较喜爱的动漫作品以及平时的娱乐等。
3.3网站风格
1.本网站主要体现了清新自然的风格,以简洁为主。
2.网站的主色调为绿和白,充分衬托清新自然的风格。
第4章制作过程
新建站点,命名为yyl,在站点中新建image、flash、wenben等文件夹。
4.1index.html页面的制作
1.在Dreamweaver中新建一个html页面,命名为index.html。
2.在页面中插入边框为0的表格。
3.logo的制作:
新建一个flash文档,制作一个探照灯动画,保存为swf格式。
4.背景左.jpg的制作:
打开Photoshop,在已有的背景图片上绘制白色部分,再输入首页等文字。
5.移动文字的制作:
输入代码
。
。
6.输入文字,制作超链接。
4.2suibi.html页面的制作
1.在页面中插入表格,设置表格背景颜色。
2.在Photoshop中截取适当大小图片,保存为jpg格式插入到第一步表格中,调整表格大小。
3.输入文字,制作超链接。
4.3suibi4.html页面的制作
1.在页面中插入文本区域。
2.在“属性”框中粘贴文章。
3.输入文字,制作超链接。
4.4xiangce1.html页面的制作
1.新建文档并设置影片。
2.导入图像。
3.制作百叶窗影片剪辑并遮罩。
(1)执行“插入”—“新建元件”命令,创建一个名称为“拉伸的叶片”的影片剪辑元件。
(2)选择矩形工具,设置填充颜色,在舞台上绘制一个无描边举行,在属性面板中设置宽和高。
(3)选择矩形,将其转换成“名称”为“叶片”的图形元件。
(4)选择第1帧的“叶片”实例,将属性面板中的坐标设为0。
(5)在第20帧,第40帧分别插入关键帧,将第20帧处实例的高设为1px。
(6)在1-20,20-40帧之间分别创建补间动画。
(7)进入主场景编辑模式。
(8)在图层“风景2”上方插入新图层,命名为“百叶窗”,将“拉伸的叶片”元件从库面板中拖曳到舞台上,共创建9个实例。
(9)调整实例的坐标。
(10)选择这9个实例,按F8键,将其转化为影片剪辑元件。
(11)在图层“百叶窗”上右击,从弹出的菜单中选择“遮罩层”。
4.根据遮罩效果修改“拉伸的叶片”元件。
4.5xiangce2.html页面的制作
1.输入代码
--begin
functionmakevisible(cur,which){
if(which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20}
//end-->
alpha(opacity=20)" onmouseover="makevisible(this,0)"onmouseout="makevisible(this,1)"alt="X战记"/> alpha(opacity=20)" onmouseover="makevisible(this,0)"onmouseout="makevisible(this,1)"alt="圣传"/> 2.输入文字,制作超链接。 4.6xiangce4.html页面的制作 1.制作图库页面。 (1)新建一个网页文档,建立图库页面的基本布局。 (2)将光标定位在页面左侧的第一个单元格中,执行[插入记录]—[图像]命令,将图像文件插入到单元格中,居中对齐。 2.插入AP元素。 (1)选中要显示预览图的那个单元格,将此单元格的对齐方式改为左对齐和顶对齐。 (2)将光标放置在此单元格内。 选择[插入记录]—[布局对象]—[APDiv]命令插入一个AP元素。 选中此AP元素,查看“属性”面板,确保AP元素的左边距和上边距为空。 (3)打开“AP元素面板”,确认其中的“防止重叠”选项没有被选中。 (4)将光标放置在此AP元素中,再次执行[插入记录]—[布局对象]—[APDiv]命令。 在刚才的AP元素中嵌套一个AP元素。 (5)根据要在AP元素中显示的图像的大小,调整新插入AP元素的位置和大小。 (6)将光标定位在AP元素中,插入图像。 3.将图像添加到时间轴。 (1)选择[窗口]—[时间轴]命令,打开时间轴面板。 (2)选中AP元素中的图像,将图像拖至时间轴。 在时间轴的第1帧处放下鼠标。 拖曳后面的一个关键帧至第60桢。 (3)选中时间轴的第15帧,单击鼠标右键,再弹出的快捷菜单中选择[增加关键帧]命令。 用同样的方法在第30帧,第45帧处各增加一个关键帧。 (4)选中第15帧的关键帧,打开“属性”面板,更改图像源文件。 用同样的方法更改第30帧,第45帧处的图像原文件。 4.给文字添加行为动作。 (1)选中文字“连续播放”,在其属性面板中添加空链接“javascript: ;”,在“行为”面板中单击[添加行为]按钮,在弹出的菜单中执行[时间轴]—[播放时间轴]命令,在弹出的文本框中输入“timeline1”后按[确定]按钮。 (2)“暂停播放”,“从头播放”设置同上。 5.给缩略图添加行为动作。 (1)选中第一张缩略图,单击[添加行为]按钮,在弹出的菜单中执行[时间轴]—[转到时间轴帧]命令,在弹出的文本框中输入“timeline1”,在“前往帧”文本框中输入“1”,单击[确定]按钮回到行为面板,将此行为事件改为“onclick”。 (2)用同样的方法,给另外3张图像添加同样的行为,将第2张缩略图的“前往帧”设为“15”,第3张缩略图的“前往帧”设为“30”,第4张缩略图的“前往帧”设为“45”,行为事件改为“onclick”。 4.7yinyue1.html页面的制作 1.下载格式为mp3的歌曲,保存在站点中的music文件夹中。 2.在页面中执行插入记录—插件命令,在页面中插入播放器及浏览音乐文件位置。 2.插入图片,输入文字. 3.输入文字,制作超链接。 致谢 本论文历时两个多月,我系统综合地将我所学的知识运用于毕业设计的全过程。 在完成毕业设计中,首先我要感谢我的指导教师****老师。 *老师耐心细致地指导我毕业设计,提出了很多精辟而富有建设性的建议。 *老师认真负责的工作态度,严谨的治学态度都给我留下了深刻的印象,在学习上给予了我极大的关心和帮助,在此表示衷心感谢! 同时,感谢炎黄职业技术学院为我提供了一个良好的学习环境,感谢学院的领导和老师们! 他们无微不至的关怀、精心的培养使我到了很多的知识,终生受益! 参考文献 [1]缪亮.DreamweaverCS3基础与实训教程.电子工业出版社,2008年. [2]李冬芸.Flash动画实例教程.电子工业出版社,2010年. [3]缪亮,郭刚.Photoshop平面设计实用教程.清华大学出版者,2008年.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 个人 网页 设计 论文