静态网页设计简要

更新时间:2024-01-09 作者:用户投稿原创标记本站原创 点赞:9664 浏览:42357

摘 要:本论文将对个人网页设计与制作的方法、工具等展开研究和探讨.在介绍网页设计与制作语言的基础上,着重于较为基础的静态网页布局设计分析,其中包含了基础的设计背景和理念,已经使用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代码的精简、优化!