网页设计毕业论文.doc

网页设计的诸要素分析静态网页设计说明书【摘要】本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互窗口和框架进行详细描述，并利用具体的实例进行验证。【关键词】网页设计;版式设计;CSS样式布局。【绪言】21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识 一、设计概述 1.随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等，直到CSS出现。CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。 CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。 2.CSS按其位置可以分成三种：内嵌样式(Inline Style)；内部样式表(Internal Style Sheet)；外部样式表(External Style Sheet)三种。内嵌样式(Inline Style)：Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效;例如： 这个Style定义里面的文字是20pt字体，字体颜色是红色。内部样式表(Internal Style Sheet)：内部样式表是写在HTML的里面的。内部样式表只对所在的网页有效。例如：H1.mylayoutborder-width:1;border:solid;text-align:center;color:red 这个标题使用了Style。这个标题没有使用Style。外部样式表(External Style Sheet)：如果很多网页需要用到同样的样式(Styles)，就可以用这种方法。首先将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点：样式代码可以复用。一个外部CSS文件，可以被很多网页共用，便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。二、使用CSS+DIV样式布局的方法： 1.在利用CSS+DIV样式布局的过程中，比较常用到的标签有：(描述一个大段的文本或文章的时候使用)；(该标签用于提于性文字)；、 、(使用于标题)，在这些标题中最带用到的有13。(使用于列表描述重复出现的或者列表性的无素（使用就多）)(使用于链接)(描述图片的，空元素，与数据有关的图片)(描述回车换行)等等。Borders边框可以运用到body里的大部分HTML元素。制作一个元素的边框，你需要border-style边框样式。值可以是：solid,dotted,dashed,double,groove,ridge,insetandoutset，具体样式大家可以实际下。border-width设定宽度，通常使用pixels即单位是px，同样有四边属性：border-top-width,border-right-width,border-bottom-widthandborder-left-width。border-color设定边框颜色。正确使用如下例子：h2border-style:dashed;border-width:3px;border-left-width:10px;border-right-width:10px; border-color:red; 说明：设定红色样式为dashed的边框，上下边框宽度为3px，而左右为10px（后面的属性覆盖了前面）。 2.在CSS里面有许多属性值要指定单位，而且在使用属性时尽量输入值，尽量不要用默认值。但有些基本单位被使用在一些属性上，在这之前值得属性下它们。em比如font-size:2em给于字体计算出的大小，所以2em就是实际字体大小的两倍。px比如font-size:12px是pixel像素的单位。pt比如font-size:12px是points镑的单位。%比如font-size:80%是百分比其他单位包括pc（12点西文活字）、cm（厘米）、mm（毫米）和in（英寸）当值是零的时候，不需要单位，例如：border:0意思没有边框。网页不是静态的、绝对的媒体。这意味着内能伸缩变形，用户应该被允许调整自己喜欢的方式，包括字体大小和屏幕大小。因为这样，建议使用em和%在font-size上（宽度和高度），相比下px不能够在大部分浏览器改变大小，所以要少用，可以用在边框的大小上。 3.添加背景图片，背景图片BackgroundImages有许多属性可以操作。如: background-color出现在前面。background-image图片的位置。background-repeat图片重复的形式。背景图片可以重复repeat（这就像建筑用的瓦片一样），repeat-x在x轴（左右）重复，repeat-y在y轴（上下）重复，no-repeat不重复只显示一个。background-position可以使用top,center,bottom,left,right或任何可以看到的组合，比如above在上面。可以为大部分html元素设置背景图片，不只是整个页面（body），可以用来制作简单但效果显著的美化，比如圆角等等不同的边角形状。使用背影图片非常简单，而且可以使用在页面的任何地方。许多人喜欢使用色彩鲜艳的图片作为背景的页面，带给用户判读前台文字困难加大。这是一个极端的例子，但事实上，大部分对用户友好、可读性强的文本是白色背景上显示黑色，或是黑色背景显示白色（建议使用柔和的颜色做为背景，减少刺眼的颜色）所以，最佳使用背景图片的位置要么是上面没有内容要么是背景非常淡，这样同样有利于减少图片大小，因为使用更少的颜色。（建议使用索引色格式，比如GIF） 4 .如果不太喜欢图片布局可以通过颜色来实现想要的效果，css可以处理16,777,216颜色，可以使用名字、rgb值或十六进制代码。有17个预先确定的颜色，只要你知道它们相关的颜色值，可以设计出很好看的网页布局，它们分别是：aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,orange,purple,red,silver,teal,white,andyellow. rgb的三个值都是从0到255，0是最低级，255是最高级，这些值同样可以是百分比。我们通常使用10进制即0-9，但hexadecimal使用16进制，即0到f。十六进制三或六个数字长度前面带上#字符，三个长度是六个的压缩形式，比如#f00是ff0000的压缩，#c96是#cc9966。三位数很好理解，像rgb，第一个是红色，第二个是绿色，第三个蓝色。但六位数给于更多的颜色控制。 5在CSS里的Text 文本属性的使用，font-family属性：这个属性必须详细制定，不能使用偏僻的字体，要使用安全字体（比如arial，verdana和timesnewroman和宋体），可以同时指定许多字体，只要使用逗号分开即可。这样的用意是，如果用户电脑里没有第一个字体浏览器可以使用后面指定的字体。这非常有用，因为不同的电脑拥有不同的字体。例子font-size:arial,helvetica，pc用户可以使用arial而苹果mac用户可以使用helvetica（如果字体的名称有许多单词组成，使用双引号组合，比如，font-family:TimesNewRomes）。font-size属性：字体的大小，要小心使用。比如标题不会和段落一样，它要用大字体，你可以使用h1h2等等。font-weight属性：这个属性决定字体是否加粗。在实际运用中通常使用font-weight:bold或font-weight:normal。理论上还可以使用bolder,lighter,100,200,300,400,500,600,700,800or900，但有些浏览器不认，仍坚持bold和normal。font-style属性：这个属性决定字体是否是斜体，可能是font-style:italic或font-style:normal。text-decoration属性这个属性决定是文本否需要下划线。可以是：text-decoration:overline，加上划线；text-decoration:line-through，加通过文本的线条。text-decoration:underline，这应该使用在链接上，因为用户习惯认为它代表链接。等等属性值。三、在使用CSS+DIV样式时需要注意事项1有些CSS属性允许使用一串值代替许多属性，使用这些属性可以得到填充的效果，值使用空格分开，使用多个属性时用分号分开来，margin(用来控制元素本身的浮动置),pdding(用来控制元素内部元素的位置)和border-width允许合并，margin-top-width,margin-right-width,margin-bottom-width等等，形式像这样：property:toprightbottomleft;逆时针顺序。所以下面的：p border-top-width: 1px; border-right-width: 5px; border-bottom-width: 10px; border-left-width: 20px;可以写成：p border-width: 1px 5px 10px 20px;border-width,border-color,border-style同样可以合并到一起，例如：p border: 1px red solid;（同样可以运用到border-top,border-right等等）如果只使用两个值（比如margin: 1em 10em;），第一个值包括顶部和底部，第二个值包括左右。字体属性同样可以使用font属性合并。p font: italic bold 1em/1.5 courier; （上面/1.5是 line-height的值）把它们总结在一起，试下下面的代码：p font: 1em/1.5 Times New Roman, times, serif; padding: 3em 1em; border: 1px black solid; border-width: 1px 5px 5px 1px; border-color: red green blue yellow; margin: 1em 5em; 推荐大家使用缩写形式，促进CSS代码的精简、优化！ 2应用CSS有三种方法，1、In-line行内：行内样式是在html标签里直接使用style属性，如：text，设定段落文字红色。但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。2、Internal内部：使用于整个页面的植入内部样式在head标签里面，style标签包围样式，可以在里面输入你想要的样式值。例如：CSSExamplepcolor:red; a color:blue; 所有段落文字红色，链接蓝色。3、外部：外部样式使用在整个多样页面网站。它是一个独立的CSS文件，像下面一样：p color:red; a color:blue; 如果上面保存为“web.css”，HTML里面的链接就会像下面所显示效果，相关的代码如下：。四、参考文献和资料1.书籍文献 1网页艺术设计高等教育出版社.彭刚.周绍斌等著. 2设计师谈网页风格构成电子工业出版社.崔美善.马晓阳等著.（第137页)在坚持比例原则前提下,完善具体刑事诉讼相关制度才有可能。 3德亚图考夫曼.类推与“事物本质”-兼论类型理论.吴从周译,台湾学林文化事业有限公司,1999.29页. 4陈光中.刑事诉讼法实施问题研究M.北京:中国法制出版社,2000.32. 5陈兴良.限权与分析:刑事法治视野中的警察权J.法律科学,2002.1. 6樊崇义.“平衡原则”遐想M.中国检察出版社,2002.2. 7祖鹏.我国刑事诉讼强制措施与人权保障J.法学杂志,2005(2). 8梁迎修.法律原则的适用基于方法论视角的分析.华中师范大学学报,2007(11).责任编辑:张新雷9 冯登国. 计算机通信网络安全. 北京：清华大学出版社, 200110 夏云庆 编著Visual C+ 6.0 数据库高级编程 北京希望电子出版社2.电子资料11百度百科，CSSDIV布局，/view/406109.htm12百度文库，网页设计理论，/view/5dd9e3d8d15abe23482f4d5c.html 五、设计工作后记1网页版式的设计和布局是设计师理性思维与感性表达的产物。它决定了网页的艺术风格和个性特征,并