网页设计的布局与排版论文（推荐5篇）

窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：

窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体，则使用下列格式：

document.mytest.submit()

第五章

色彩在网页中的应用

6.1.3 窗体对象的属性

窗体对象中的属性主要包括以下：elements name action target encoding method。除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：

elements[0].Mytable.elements[1] 6.1.4 访问窗体对象

在JavaScript中访问窗体对象可由两种方法实现：（1）通过访问窗体

在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。

（2）通过数组来访问窗体

除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：

document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗体的先决条件

在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

6.2 窗体中的基本元素

窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。

在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下：

formName.elements[].methadName(窗体名.元素名或数组.方法)formName.elemaent[].propertyName(窗体名.元素名或数组.属性)下面分别介绍：

（1）Text单行单列输入元素

功能：对Text标识中的元素实施有效的控制。基本属性：

Name：设定提交信息时的信息名称。对应于HTML文档中的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。defaultvalue：包括Text元素的默认值 基本方法：

blur()：将当前焦点移到后台。

第五章

色彩在网页中的应用

select()：加亮文字。主要事件：

onFocus：当Text获得焦点时，产生该事件。OnBlur：从元素失去焦点时，产生该事件。Onselect：当文字被加亮显示后，产生该文件。onchange：当Text元素值改变时，产生该文件。例：

功能：实施对Textarea中的元素进行控制。基本属性

name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。Default value：元素的默认值。方法：

blur()：将输入焦点失去 select()：将文字加亮后 事件：

onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件（3）Select选择元素

功能：实施对滚动选择元素的控制。属性：

name:设定提交信息时的信息名称，对应文档select中的name。Length:对应文档select中的length options:组成多个选项的数组 selectIndex;该下标指明一个选项

select在中每一选项都含有以下属性： Text:选项对应的文字

selected:指明当前选项是否被选中 Index:指明当前选项的位置 defaultselected:默认选项 事件：

第五章

色彩在网页中的应用

OnBlur：当select选项失去焦点时，产生该文件。onFocas:当select获得焦点时，产生该文件。Onchange:选项状态改变后，产生该事件。（4）Button按钮

功能：实施对Button按钮的控制。属性：

Name:设定提交信息时的信息名称，对应文档中button的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。方法：

click()该方法类似于一个按下的按钮。事件：

onclick当单击button按钮时，产生该事件。例 ：

document.testcallvalue=“mytest”;// 通过名字访问 </script>.....（5）checkbox检查框

功能：实施对一个具有复选框中元素的控制。属性：

name:设定提交信息时的信息名称。

Value:用以设定出现在窗口中对应HTML文档中Value的信息。Checked:该属性指明框的状态true/false.defauitchecked:默认状态 方法：

click()该方法使得框的某一个项被选中。事件：

Onclick：当框的选被选中时，产生该事件。（6）radio无线按钮

功能：实施对一个具单选功能的无线按钮控制。属性：

Name：设定提交信息时的信息名称，对应HTML文档中的radio的name相同 Value：用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。

length：单选按钮中的按钮数目。defalechecked:默认按钮。

checked:指明选中还是没有选中。

第五章

色彩在网页中的应用

index:选中的按钮的位置。方法：

chick():选定一个按钮。事件：

onclick:单击按钮时，产生该事件。（7）hidden:隐藏

功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。属性：

name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。

defaleitvalue:默认值（8）Password口令

功能：实施对具有口令输入的元素的控制。属性：

Name:设定提交信息时的信息名称，对应HTML文档中password中的name。Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。

defaultvalu:默认值 方法：

select():加亮输入口令域。

blur():使这丢失passward输入焦点。focus():获得password输入焦点。（9）submit提交元素

功能：实施对一个具有提交功能按钮的控制。属性：

name:设定提交信息时的信息名称，对应HTML文档中submit。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。

方法

click()相当于按下submit按钮。事件：

onclick()当按下该按钮时，产生该事件。

6.3窗体对象实例

下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。

test8_1.htm <script Language=“JavaScript”> //原来的颜色

document.bgColor=“blue”;

第五章

色彩在网页中的应用

document.vlinkColor=“white”;document.linkColor=“yellow”;document.alinkcolor=“red”;//动态改变颜色

function changecolor(){

document.bgColor=“red”;

document.vlinkColor=“blue”;

document.linkColor=“green”;

document.alinkcolor=“blue”;} </script> 调用动态按钮文档

第三篇：网页设计论文

网页设计基础课程论文

摘要:随着互联网的不断发展和中国网络人口的日益增长，建立个人网站，不但可以更好的展示自己，而且可以提高自己在计算机应用方面的能力,网站越发普及，网站建设也有新的要求,网站已发展为一种工具，一个企业对外信息展示的工具.以前网站上常见的大幅图片，长达几十钟的flash动画，已悄然而逝，浏览者再也不用为了查找一些信息而必须等待动画的时间，可以简单方便的找到自己想要的东西，是浏览者主要的目的，也是网站设计时应该考虑的问题。以前只是一味的追求网站的外观，其实网站是一个公司的对外信息窗口，因此在考虑美观的同时也得考虑浏览者的感受，如有些色调是很亮丽，但是这些过于亮的色彩看的时间长了会让你的眼睛不舒服，这样浏览的人就不会长时间在网站上逗留，网站没把公司的信息完全的传达给客户． 关键词：网站网页设计发展趋势网站标准 正文：一:网页设计发展趋势: 1.更多的CSS3 + HTML5 这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5，但在以后CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者，新技术（指CSS3+HTML5）将会取而代之 2简单的配色方案

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的，太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然，颜色最好保持使用2到3种。调整颜色的透明度，或许会给你意想不到的效果 3.移动互联网时代的到来

智能手机，ipad和上网本随处可见，将来这个将会更加明显。这意味着你的设计需要考虑更多的设备。4.Parallax Scrolling 先来解释下Parallax Scrolling，Parallax scrolling 是让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验仍然非常出色。202_年的网页设计趋势热点就是要创造这样的深度视觉效果。5.设计需考虑更多的触屏设备

触屏技术应用越来越广泛，触屏设备随处可见。这意味着，你的导航设计不再只是鼠标导航，你必须要要考虑你的设计适合触屏设备。6.深度判析

深度判析是关于在网页设计使用维数，这样可以使你的网页变得更加真实。如果运用得恰当，那将会是一个虚拟的3D效果，就像3D电影阿凡达那样。尽管3D技术还没有去到网站设计，你仍然尝试使用维数进行设计。7.大背景图

大背景图的网页设计应用在202_年将会更加明显。这些背景图像一般是高分辨率，覆盖这个网站。高清照片是一个迅速抓住你的读者的好方式，可以产生极具冲击力的视觉效果-游客的视线会不自觉地落在宽大的背景上。8.不拘谨于顶级域名

严格意义上这一点与网页设计无关，但这一点也是发展的趋势，将出现更多创造性的域名。.com域名的吸引力越来越少，主要是你很难再找到一个比较短的.com域名。202_年人们开始将视线慢慢转移到.me、.co和.cc等身上。想想域名的发展，抢先一步，不然你很可能再次错失先机。9.QR: Quick Response 如果你注意现在越来越多的名片、杂志或者其他地方出现方形条形码，证明你已经看到202_年的这个趋势热门

10.缩略图设计（Thumbnail Design）

Google已经向浏览用户推出它们的浏览预览技术。过去我们只能通过点击链接才能看到网页的内容，现在你只需点击放大镜然后将鼠标悬停在链接上就可以预览该链接的网页内容。11.持续联系/ Life Stream Lifestreaming, 一种在线记录个人日常活动的网络应用，包括直接通过视频feed或通过聚焦一个人的网络在线内容，比如博客日志，在社会性网络上面的更新，在线相册，聊天内容甚至只是一些喜欢的网站的链接等等.二:网站标准是在W3C（W3C.org）的组织下，商业公司（Netscape、Microsoft等）也认识到统一标准的好处。网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。

为什么要建立网站标准: 我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的“浏览器大战”，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。如何解决这些问题呢？有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司（Netscape、Microsoft等）也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。

采用网站标准的好处:

对网站浏览者的好处：

1、文件下载与页面显示速度更快

2、内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；

3、内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等）；

4、用户能够通过样式选择定制自己的表现界面；

5、所有页面都能提供适于打印的版本。对网站所有者的好处:

1、更少的代码和组件，容易维护；

2、带宽要求降低（代码更简洁），成本降低。举个例子：当ESPN.com使用CSS改版后，每天节约超过两兆字节（terabytes）的带宽；

3、更容易被搜寻引擎搜索到；

4、改版方便，不需要变动页面内容；

5、提供打印版本而不需要复制内容；

6、提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

参考文献： 一：温谦.HTML+CSS网页设计与布局从入门到精通[M].北京:人民邮电出版社,202_.3 二：http://www.feisuxs

三：http://btgyjlbjx.nease.net(北极星网站域名）

课程论文

系院:土木工程学院

专业:建筑工程 姓名:王奎

学号:105140340043 网页设计基础

第四篇：网页设计布局基础教程(献给初学者)

正如你现在所看到的一样，网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功接合时，这种网页或者说站点才是受人喜欢的。取任何一面你都无法留住太过“挑剔”的访问者。一.网页布局的基本概念

最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。1.页面尺寸：

由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。

在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。2.整体造型：

什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。

对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。

3.页头：

页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。4.文本：

文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。5.页脚：

页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。6.图片

图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。7.多媒体

除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。二.网页布局的方法

网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍： 1.纸上布局法

许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。准备一若干张白纸和一只铅笔，你要设计一个时尚站点。*尺寸选择：

目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。

*造型的选择：

先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点，你不要担心你设计的布局是否能够实现。事实上，只要你能想到的布局都能靠现今的HTML技术实现。

第五篇：教学设计(利用表格布局网页)[推荐]

利用表格布局网页

教学设计

授课教师：刘春霞

授课班级：计算机应用1202班

一、课题名称：利用表格布局网页

二、授课课时：1个课时

三、教学内容分析

本节课以利用表格制作一个简单主页为例，要求学生掌握并灵活运用表格及单元格的一些基本属性设置，从而设计出一个“匡”字型的主页。本次课要求学生具有创建站点的知识，以及Dreamweaver CS3的一些基本操作。

四、学生特征分析

授课对象是职高高二学生，学生已具有熟练操作一些常用软件的能力，已掌握Dreamweaver CS3的一些基本操作。

五、教学目标（知识与技能、过程与方法、情感态度与价值观）

1、知识与技能目标

掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。

2、过程与方法目标

引导学生分析项目，自主独立思考及操作，指导与修正，掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。

3、情感态度与价值观目标

提高学生的观察能力及分析能力，调动学生自主能动性，培养学生较浓的学习兴趣，使学生建立正确的人生观与价值观。

六、教学重点难点

掌握插入表格的方法 掌握表格属性设置的基本方法 掌握单元格或行属性设置的基本方法 掌握使用表格进行页面布局的基本方法

七、教学方法

1、讲授法

2、演示法

3、任务驱动法

八、教学环境与资源

教师机，教学广播软件，学生机（60台）

九、教学过程

1、创设情境，导入新课

欣赏网页，分析网页结构，引入本次课学习的项目：利用表格制作一个简单的“匡”字型网页。

2、讲解知识，演示操作 讲解插入表格的方法，表格属性设置的基本方法及单元格属性设置的基本方法，（1）插入表格的方法

将光标置于页面中，然后在主菜单中选择【插入记录】／【表格】命令或在【插入】／【常用】面板中单击（表格）按钮打开【表格】对话框进行参数设置，最后单击【确定】按钮插入表格。（2）表格属性设置

首先选中表格，然后通过表格【属性】面板设置表格的行数、列数、宽度、高度、填充、间距、边框、对齐方式、背景颜色、背景图像、边框颜色等属性。

▲宽度中的百分比单位一般在制作表格嵌套的时候用。（3）设置单元格或行【属性】的方法

首先选择单元格或行，然后通过单元格或行【属性】面板可以设置单元格的宽度和高度、水平和垂直对齐方式、背景颜色和背景图像以及边框颜色等。

（4）展示网页的最终结果并引导学生分析其结构，提示并演示操作的关键步骤，让学生独立思考完成，培养学生知识的迁移能力，效果图如下：

主要操作步骤：

a、新建一个站点，站点根目录为自己的文件夹（含有素材），在站点里新建一个文件index,html。

b、在页面属性里设置字体为“12像素”，页边距为“0”

c、制作页眉部分，插入一个1行1列的表格，宽度为770像素，其它属性参考效果图设置，然后插入Logo图片，d、制作主体部分，I、插入一个1行2列，宽度为770像素的表格，左侧单元格为200像素，设置间距为2，其它属性参考效果图设置。II、III、在左侧单元格中插入一个5行1列，宽度为70%的表格，设置间距为5，其它属性参考效果图设置。（表格嵌套）

在右侧单元格中插入一个4行2列，宽度为96%的表格，设置间距为5，表格标题为“参考咨询”，第一列单元格宽度为160像素，其它属性参考效果图设置。（表格嵌套）

e、制作页脚部分，插入一个1行1列，宽度为770像素的表格，插入图像“foot,.jpg”。

3、学生练习，巡堂指导

（1）、学生参考最终效果图，根据教师提示的主要步骤，独立思考分析，完成主页。（2）、教师巡堂指导，留意学生在操作时出现的细节问题，做好作业点评。

4、上交作业，点评作业

（1）、要求学生把主页及素材（自己的文件夹）一起交到教师机“1202班”文件夹中。（2）、抽出两个学生的作业点评，修正错误，完善主页。

5、课堂小结，宣布下课

本次课主要学习插入表格、表格基本属性的设置、单元格或行的基本属性的设置，利用表格布局网页的方法。

十、教学反思（欢迎名位听课老师提出您宝贵的教学建议）