本站原创本文是一篇计算机论文范文,关于计算机硕士学位论文,关于静态网页设计简要相关毕业论文的格式范文。适合计算机及网络安全及艺术设计方面的的大学硕士和本科毕业论文以及计算机相关开题报告范文和职称论文写作参考文献资料下载。
摘 要：本论文将对个人网页设计与制作的方法、工具等展开研究和探讨.在介绍网页设计与制作语言的基础上,着重于较为基础的静态网页布局设计分析,其中包含了基础的设计背景和理念,已经使用CSS+DIV样式布局的方式方法,及其中较容易出问题的一些细节分析.
关 键 词：网页设计；版式设计；CSS+DIV样式布局
中图分类号：TP393.09
21世纪的到来,人们更深切地感受到计算机在生活和工作中的作用越来越重要,越来越来的职业需要具有计算机的应用技能.掌握计算机是职业的需要,更是事业发展的需要.网页设计与制作是计算机能力的具体表现,本章主要介绍网页设计的相关知识
1设计概述
随着Inter的迅猛发展,HTML被广泛应用,上网的人们当然希望网页做得漂亮些,因此HTML排版和界面效果的局限性日益暴露出来.为了解决这个问题,人们也走了不少弯路,用了一些不好的方法,直到CSS的出现.CSS可算是网页设计的一个突破,它解决了网页界面排版的难题.可以这么说,HTML的Tag主要是定义网页的内容（Content）,而CSS决定这些网页内容如何显示（Layout）.CSS的英文是CascadingStyleSheets,中文可以翻译成串联式样式表.
CSS按其位置可以分成三种：内嵌样式（InlineStyle）；内部样式表（InternalStyleSheet）；外部样式表（ExternalStyleSheet）三种.
1.1内嵌样式（InlineStyle）
InlineStyle是写在Tag里面的.内嵌样式只对所在的Tag有效；例如：这个Style定义
里面的文字是20pt字体,字体颜色是红色.
1.2内部样式表（InternalStyleSheet）
内部样式表是写在HTML的
里面的.内部样式表只对所在的网页有效.1.3外部样式表（ExternalStyleSheet）
如果很多网页需要用到同样的样式（Styles）,就可以用这种方法.首先将样式（Styles）写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式（Styles）的网页里引用这个CSS文件.使用外部（Extenal）样式表,相对于内嵌（Inline）和内部式（Internal）的,有以下优点：样式代码可以复用.一个外部CSS文件,可以被很多网页共用,便于修改.如果要修改样式,只需要修改CSS文件,而不需要修改每个网页.提高网页显示的速度.
2使用CSS+DIV样式布局的方法
2.1在利用CSS+DIV样式布局的过程中,Borders边框可以运用到body里的大部分HTML元素.制作一个元素的边框,你需要border-style边框样式.正确使用如下例子：
h2{border-style：dashed；border-width：x；border-left-width：10px；border-right-width：10px；border-color：red；}说明：设定红色样式为dashed的边框,上下边框宽度为x,而左右为10px（后面的属性覆盖了前面）.
2.2在CSS里面有许多属性值要指定单位,而且在使用属性时尽量输入值,尽量不要用默认值.但有些基本单位被使用在一些属性上,在这之前值得属性下它们.例如：border：0意思没有边框.网页不是静态的、绝对的媒体.这意味着内能伸缩变形,用户应该被允许调整自己喜欢的方式,包括字体大小和屏幕大小.因为这样,建议使用"em"和"%"在font-size上（宽度和高度）,相比下px不能够在大部分浏览器改变大小,所以要少用,可以用在边框的大小上.
2.3在CSS里的Text文本属性的使用,font-family属性：这个属性必须详细制定,不能使用偏僻的字体,要使用安全字体（比如arial,verdana和timesnewroman和宋体）,可以同时指定许多字体,只要使用逗号分开即可.这样的用意是,如果用户电脑里没有第一个字体浏览器可以使用后面指定的字体.这非常有用,因为不同的电脑拥有不同的字体.例子font-size：arial,helvetica,pc用户可以使用arial而苹果mac用户可以使用helvetica
font-weight属性：这个属性决定字体是否加粗.在实际运用中通常使用font-weight：bold或font-weight：normal.font-style属性：这个属性决定字体是否是斜体,可能是font-style：italic或font-style：normal.
3在使用CSS+DIV样式时需要注意事项
有些CSS属性允许使用一串值代替许多属性,使用这些属性可以得到填充的效果,值使用空格分开,使用多个属性时用分号分开来,margin（用来控制元素本身的浮动置）,pdding（用来控制元素内部元素的位置）和border-width允许合并,margin-top-width,margin-right-width,margin-bottom-width等等,形式像这样：property：toprightbottomleft；逆时针顺序.例如：
p{border：1pxredsolid；}（同样可以运用到border-top,border-right等等）
如果只使用两个值（比如margin：1em10em；）,第一个值包括顶部和底部,第二个值包括左右.字体属性同样可以使用font属性合并.p{font：italicbold1em/1.5courier；}（上面"/1.5"是line-height的值）把它们总结在一起,试下下面的代码：
p{font：1em/1.5"TimesNewRoman",times,serif；
padding：3em1em；
border：1pxblacksolid；
border-width：1px5px5px1px；
border-color：redgreenblueyellow；
margin：1em5em；}
推荐大家使用缩写形式,促进CSS代码的精简、优化!