以下是小编整理的网页设计中表格和层排版的使用技巧论文，本文共3篇，欢迎阅读分享，希望对大家有帮助。
篇1：网页设计中表格和层排版的使用技巧论文
网页设计中表格和层排版的使用技巧论文
摘要：文章指出，表格是网页设计中不可缺少的重要元素。使用表格排版可以规范整个页面，将页面中文字、图片、动画等众多元素有条理地统一组织起来。层是一种新的CSS定位技术，它具备许多表格所不具备的特点，比如可以重叠，移动方便，可以设为隐藏，还可以添加许多行为来丰富页面效果。所以，很多情况下，可以同时使用表格与层搭配进行排版，既可以使用到表格的整体规范性，又可以利用到层的灵活性与丰富功能，从而设计出更加精彩的页面。
关键词：Dreamweaver；表格；层；排版
作者简介：龙敏敏（1979-），女，湖南祁东，本科，讲师；研究方向：计算机教育教学
1Dreamweaver网页设计工具简介
浏览网页已经是现代社会人们生活中的一个重要组成部分，网页作为网络信息传播的主要载体，其设计也被大家所关注。网页设计的软件有多种，Dreamweaver是著名的“所见即所得”的可视化网站开发工具，是国内外普遍应用的专用网页设计软件。它被称为“织梦者”，即它的英文单词所表达的意思。Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制。它是一个集网页创作和站点管理两大利器于一身的超重量级创作工具。网页设计的重点是版面的设计，即如何将所有的素材按照设计要求精美地罗列在页面中。所以，如何排版成为网页设计中的关键。
2使用表格和层排版
在Dreamweaver网页设计中，排版的方法有很多种，其中使用表格和层排版是基本的方法，通过设计模式可以轻松完成，简单易学，是大家常用的方法，对网页排版起到了重要的作用。
2.1表格排版
在制作网页时，要想将文本、图片等组织得美观，有条理，就需要排版人员头脑里有一个整体布局的概念。在Dreamweaver中，安排页面内容布局主要是依靠表格来完成的。通过表格的相互嵌套和合并、拆分，可以将自己的构思完整地表现出来。表格是网页设计制作时不可缺少的`重要元素，它以简洁明了和高效快捷的方式将数据、文本、图片、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。使用表格排版的页面，在不同平台、不同分辨率的浏览器里都能保持其原有的布局，且在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。表格排版比较规范，整体性强，一般的网页排版中都会使用表格进行整体的排版，但其表现比较中规中矩，不会有太多其他的丰富功能。
2.2层排版
层是CSS中的定位技术，在Dreamweaver中可对其可视化操作。文本、图像、表格等元素只能固定其位置，不能相互叠加在一起，使用层功能，可以将其放置在网页文档内的任何一个位置，还可以按顺序排放网页文档中的其他构成元素。层体现了网页技术从二维空间向三维空间的一种延伸。层具有很多表格所不具备的特点，比如可以重叠，便于移动，可设为隐藏，还能为层添加一些行为，使页面具有更丰富的变化等。这些特点有助于设计思维不受局限，从而发挥更多的想象力。由于它是一种新的CSS定位技术，层在具有上述优点的同时，也存在着一些不可避免的缺陷，比如兼容性、定位问题。所以，目前比较大型的网站不会单独使用层来排版。
2.3层转换成表格排版
前面提到，层与表格都可以用来在页面中定位其他对象，它们有时可以互相取代，但两者并不完全相同，有时就必须使用其中的一种。比如，当需要用到表格来排版页面，但又觉得表格的添加比较烦琐，而层比较灵活，这时候，排版者可以使用层到表格的转换来实现。具体的操作步骤是：（1）首先在层面板中勾选“防止重叠”选项，这样绘制层的时候就不会出现叠加和嵌套的现象；（2）在页面中绘制若干个层，把页面中的各元素添加到层里面；（3）把每个层自由地排列到页面中各个相应的位置；（4）使用层排版结束之后，要将层排版转化为表格排版，选择“修改”—“转换”—“层到表格”命令，在对话框中设置好相应的参数，确定之后层就会转换成对应的表格。这种排版方法在排列对象时比较灵活一点，但有时也会产生一些多余的单元格。当然，这种方法一般适用于不太复杂的页面的排版，对于比较复杂的图文混排页面，最好还是采用传统的表格排版方法。
3排版时容易出现的问题及解决方法
3.1整体表格排版出现的问题
有很多人在网页中用表格排版时习惯使用一个大表格，然后在大表格中嵌入一个个小表格，认为这保持了排版的整体性，其实这个习惯是不好的。一个大而长的表格在浏览器中打开时会加重浏览器的负担，浏览器一般是等待整个表格的内容都接收到以后才显示这个表格的内容，如果一个很长的页面使用一个大表格排版，那么这个网页显示速度就会比较慢，使得页面呈现的时间大大加长，很多时候有些网页的访问者会失去等待的耐心而放弃浏览这个网页。解决的方法是：拆分表格，将大表格化整为零，把表格打散，并要尽可能地避免表格的层层嵌套。注意，拆分后的表格的宽度要设置为相等，这样表格的排版效果和拆分前相比并没有改变，在浏览器中呈现时，页面会从上至下一个个表格呈现出来，明显加快了页面打开的速度。
3.2层排版出现位置偏差
在页面中使用表格和层混合排版时，先加入表格进行页面的整体布局，然后在局部加入层。通常情况下，层加入到页面中之后是游离在表格之上的，它虽然移动方便，但在页面中的位置是固定的，由于表格的宽度是固定像素，设置在窗口中居中显示，所以当窗口变大时，表格会产生一个相对位移，但是层却还在原位，没有跟着相对位移，因而出现层与表格中其他内容位置上的偏差。所以，层排版的灵活性同样也体现了一定的不稳定性。要想办法使层与页面中其他元素一样，能够随浏览器的变化而产生相对位置上的变化，排版者可以将层嵌入到表格的单元格中，使层成为单元格中的一个元素，就像插入到单元格中的文本、图片一样，层就是属于单元格中的对象，当浏览器窗口大小变化时，表格必然会产生相对的变化，层也就会随着单元格的位置变化而产生相应的变化，这样就不会出现页面中元素相对位置的偏差。整个排版会变得很规范，就相当于是利用表格整体排版，层只是嵌入到单元格中的一个元素，又可以使用到层的丰富功能，两全其美。解决的方法是：先使用表格对整个网页的整体进行规划，然后添加一个层到表格中的某个单元格中。添加的方法：直接将工具栏中的层拖动到单元格中，这样该层就成为该单元格的嵌入层，该层在单元格中默认是靠左对齐，垂直方向居中，而且在水平方向是不能移动的，只要移动便会脱离该单元格，即成为普通层，不会是单元格的嵌入对象，如果在水平方向一定要移动的话，可以将该单元格的位置进行调整，进而单元格中的嵌入层也会随之移动。而在垂直方向上的位置是可以调整的，不过不要用鼠标拖动，这样容易使层脱离单元格，可以选中层通过方向箭上下移动或将该单元格垂直方向上的位置由“居中”改为“顶端”或“底端”。采用这种方法设置层后，无论窗口大小怎么变化，层始终是跟着单元格位置变化而变化，因而不会出现之前那种位置上的偏差。这个问题解决之后，接下来就可以在页面中利用层的一些行为来丰富页面。
4结语
总之，网页设计中，内容虽然很重要，但是如果只有好的内容而没有精美的排版以及合理的布局，那么再好的内容也很难引起浏览者的阅读浏览兴趣。通过合理的、有新意的页面布局，特别是主页设计，才可以将网页的内容完美地呈现在浏览者面前。所以，排版者在平时要多参考他人优秀的网页排版作品，加强排版练习，这样才可能创造更漂亮的网页排版。
[参考文献]
[1]李爱军.网页的排版布局[J].办公自动化：综合版，（7）：29-30.
[2]艺博，张明真.网页设计与制作——MacromediaDreamweaver8[M].北京：高等教育出版社，.
[3]王锦.DreamweaverMX中文版基础教程[M].北京：机械工业出版社，.
篇2：结构中id与class的使用原则与技巧网页设计
ID与CLASS的使用原则
据说W3C对于ID与CLASS的设定是ID具有唯一性，CLASS具有普遍性，所以我们这里的使用原则也是依据这一特性建立的。ID是不能重复的，所以在XHTML的结构中，大结构一定是用ID。比如标志、导航、主体内容、版权。这些呢接我自己制定的规范命名为#logo , #nav , #content , #copyright 这些是雷打不动的命名。有人说布局排版用ID，配色背景用CLASS，其实这是不正确的，ID与布局排版没有直接关系，CLASS与配色也下是对等的。有人呢为了麻烦全都用ID或是全都用CLASS，全都用CLASS呢还有可理解，全都用ID就不正常了，这有悖ID唯一性。如果每个ID都不一样，那非累死不可。我通过实践总结的使用原则是：ID需要具有唯一性，并且尽量在外围使用。而CLASS具有可重复性，并且尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的CLASS都成为ID的子级或是孙级。你可以有两个儿子但你能有两个爸爸吗，就是这个道理，
在我们写CSS的时候可以写成这样 #father .child {…} 尽量不要让Class包含ID，.father #child {…}如果写成这样显得有点可笑 。当然这也不是铁定的，特殊情况需要特殊对待嘛。但是通常情况下这种形式的必要性不大。
以上就是ID与CLASS使用原则，归总起来一句话：ID是唯一的并是父级的，CLASS是可以重复的并是子级的。
ID与CLASS的使用技巧
子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。
CLASS中的子级最好不用ID。当然特殊情况特殊对待。
CLASS的命名最好命名用大小写合用。例 .newMovie 这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是IE以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。
其实上面讲的都是一些大家都明白的内容，只是我捡了个漏先写下来算是一个总结。希望大家对于ID与CLASS的使用提出自己的新观点新思路。一起总结出最适合也最有效率的规范来。
来自：andymao.com/andy/post/31.html
篇3：数字媒体中网页设计原则与制作技巧分析论文
数字媒体中网页设计原则与制作技巧分析论文
在我国经济与社会快速发展的今天，数字媒体作为一种新兴工具，已经与我国网络紧密的结合在一定，这种结合使得数字媒体本身与与我国民众生活之间的联系日渐紧密，而为了保证数字媒体能够更好的为我国民众提供服务，本文就数字媒体中的网页设计原则与制作技巧进行了具体研究，希望这一研究能够在一定程度上推动我国数字媒体网页设计的相关发展。
前言：
得益于计算机与智能手机的普及，我国网民数量已达7亿，而这一庞大的网民人口则标志着网络与我国民众生活之间联系的日渐紧密。我国当下数字媒体的发展速度不断提升，其本身也开始真正融入我国各行各业之中，但数字媒体本身在发展中也暴露出了一些问题，而本文就数字媒体中网页设计原则与制作技巧展开的研究目的，正是为了解决其中一部分问题。
1.数字媒体概述
为了能够较好的完成本文就数字媒体中网页设计原则与制作技巧展开的研究，我们首先就需要对数字媒体进行深入了解。结合相关文献资料与笔者自身对数字媒体的认知，本文将数字媒体定义为利用二进制数据处理和记录，采取数字通信的原理，收集、存储、传输各种矢量数字文本的过程，简单的说数字媒体就是一种图形、图像、视频、声音、动画等信息的载体与平台。对于数字媒体来说，其本身具备着高效相互性、灵活多变性以及强大融合性等三方面的特点，这些特点也是其能够较好发挥自身功能的原因所在。具体来说，高效相互性指的是数字媒体能够通过自身的载体与平台特性，使信息变为可感、可知、可管、可交互的状态，这就使得信息的传播的过程中能够较好的实现作者与受众的交流网络影视、网络游戏等都属于这一特点的具体表现；而在灵活多变性这一特点中，这一特点使得数字媒体能够将声音、图片、视频、音频、文字等创作要素进行较好的改变，这样相关信息就能够实现更好的创造；而在强大融合性这一特点中，这一特点使得数字媒体本身能够与各类艺术方式实现较好的融合，这种融合由于往往能够发挥“1+1＞2”的作用，就使得数字媒体能够更好的满足各类受众的需求[1]。
2.数字媒体中网页设计原则
上文中我们深入了解了各类数字媒体，而在下文中笔者将结合自身实际工作经验与相关文献资料，就数字媒体中网页设计原则进行详细论述，希望这一论述能够在一定程度上为我国数字媒体的进一步发展带来一定帮助。
2.1明确网页主题
在数字媒体的网页设计中，为了保证这一网页设计能够较好的为受众提供服务，我们首先就需要结合网页内容确认网页主题，而为了实现这一目标，网页设计人员需要进行充分的市场调查，最大程度上了解网页受众的情况，这样才能够较好的确定整个网页的风格与主题。而在确定了网页的主题后，设计人员还需要在设计的过程中保证网页本身的鲜明突出、要点明确，最终实现通过简单的网页页面传达不简单的信息这一追求。值得注意的是，网页还需要最大程度上保证自身的'即时性，这样才能够更好的实现信息的传达[2]。
2.2结合受众需求
除了明确网页主题外，网页设计人员在进行数字媒体的网页设计过程中，还需要细致了解网页受众人群的性别、年龄、职业以及受教育程度、生活习俗等方面的分布，并以此更好的结合网页向受众传达某种情感，这样就能够更好的提高数字媒体中网页信息的传播效率。例如，对网页受众年龄的把握，使得设计人员能够更好的抓住网页设计的侧重点，这样就能够保证该网页设计传达的信息更具备针对性，这自然就大大提高了网页本身信息的传达效率。值得注意的是，我们还需要在网页设计中参考受众的接受与理解信息的态度、愿望、需求以及情感等心理因素，这样才能够更好的为其提供服务[3]。
2.3保证风格统一
除了上述两方面的原则外，设计人员还必须保证数字媒体中网页设计的风格统一。具体来说，据笔者调查发现，我国当下很多数字媒体中的网页设计存在着文字设计影响网页质量、色彩运用与搭配影响网页主题风格、图片选用不合理等一系列问题，这些问题归根结底属于网页设计中风格出现的问题，而这一问题也对数字媒体中网页设计带来了种种负面影响，为此设计人员必须在文字选择、色彩搭配、图片选用等方面注意保持整个网页的风格统一，这样才能够更好的保证数字媒体中网页设计的整体质量[4]。
3.数字媒体中网页制作技巧
3.1首页设计技巧
在数字媒体中的网页设计中，网站的首页一般存在形象展示型与信息罗列型两种，一般来说信息罗列型较为适用于大、中型网站，也是我国当下最为主流的网站首页设计选择。在形象展示型的网站首页设计中，设计人员需要在突出网站本身形象的同时向受众传达相关形象与气氛；而在信息罗列型的网站首页设计中，设计人员需要结合自身信息传播特点，合理选择“国”字、拐角、标题正文、左右框架、上下框架、封面、变化等型号的版面布局方式，这样才能够实现相关信息的较好传达。
3.2风格统一技巧
上文中笔者提到了数字媒体中网页设计必须遵循风格统一这一原则，而为了真正实现这一风格的统一，设计人员就需要从网页设计的结构、色彩、导航栏等三个方面实现这一风格统一。具体来说，在网页设计的结构统一中，设计人员需要保证整个网站除特殊网页外，在网站布局、文字排版、装饰性元素出现的位置、图片的位置等方面呈现较高的统一性；而在色彩的统一中，设计人员需要尽量保证网站的主体色彩一致，并只在有需求的时候改变网站的部分色块；而在导航栏的统一中，导航栏的位置与背景必须在大小、明暗、位置等方面实现统一，这样才能够较好的提高网站本身的特点，使更多的受众对该网站产生深刻印象。
结论：
在本文就数字媒体中网页设计原则与制作技巧展开的研究中，笔者详细论述了数字媒体的概念、网页设计的原则以及网页的制作技巧，虽然受限于篇幅原因本文并未对数字媒体中网页设计进行较为深入的研究，但还是希望本文论述的内容能够在一定程度上推动我国数字媒体的相关发展。
引用：
[1]杨旭兰.色彩在网页设计中的应用研究[D].南京林业大学,2009.
[2]张燕.多媒体素材的无障碍设计研究[D].浙江师范大学,2009.
[3]黄晓乾,陈超.网页设计原则与制作技巧[J].中国科技信息,2010,07:95-96.
[4]鬲波飞.网络媒体的视觉传达设计研究[D].湖南大学,2002.
文档为doc格式
