静态网页设计简要分析.docVIP

静态网页设计简要分析 　　摘 要：本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重于较为基础的静态网页布局设计分析，其中包含了基础的设计背景和理念，已经使用CSS+DIV样式布局的方式方法，及其中较容易出问题的一些细节分析。 　　关键词：网页设计；版式设计；CSS+DIV样式布局 　　中图分类号：TP393.09 　　21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识 　　1 设计概述 　　随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，直到CSS的出现。CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容（Content），而CSS决定这些网页内容如何显示（Layout）。 CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。 　　CSS按其位置可以分成三种：内嵌样式（Inline Style）；内部样式表（Internal Style Sheet）；外部样式表（External Style Sheet）三种。 　　1.1 内嵌样式（Inline Style） 　　Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效；例如：这个Style定义 　　里面的文字是20pt字体，字体颜色是红色。 　　1.2 内部样式表（Internal Style Sheet） 　　内部样式表是写在HTML的里面的。内部样式表只对所在的网页有效。 　　1.3 外部样式表（External Style Sheet） 　　如果很多网页需要用到同样的样式（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：3px；border-left-width：10px；border-right-width：10px； border-color： red； }说明：设定红色样式为dashed的边框，上下边框宽度为3px，而左右为10px（后面的属性覆盖了前面）。 　　2.2 在CSS里面有许多属性值要指定单位，而且在使用属性时尽量输入值，尽量不要用默认值。但有些基本单位被使用在一些属性上，在这之前值得属性下它们。例如：border：0意思没有边框。网页不是静态的、绝对的媒体。这意味着内能伸缩变形，用户应该被允许调整自己喜欢的方式，包括字体大小和屏幕大小。因为这样，建议使用em和%在font-size上（宽度和高度），相比下px不能够在大部分浏览器改变大小，所以要少用，可以用在边框的大小上。 　　2.3 在CSS里的Text文本属性的使用，font-family属性：这个属性必须详细制定，不能使用偏僻的字体，要使用安全字体（比如arial，verdana和times new roman和宋体），可以同时指定许多字体，只要使用逗号分开即可。这样的用意是，如果用户电脑里没有第一个字体浏览器可以使用后面指定的字体。这非常有用，因为不同的电脑拥有不同的字体。例子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 在使用CS