网页设计中针对中文排版CSS心得

第一篇：网页设计中针对中文排版CSS心得

网页设计中针对中文排版CSS心得

数月来学习web标准，并遵循标准设计和制作web页面。一直想写点什么，整理一下自己的心得体会。写这篇文章，主要是针对中文排版设计，英文排版因为很少做，所以不涉及。

先介绍如何设定字体、颜色、大小、段落空白等比较简单的应用，后面再介绍下比如首字下沉、首行缩进。最后讲一些常用的web页面中文排版，比如中文字的截断、固定宽度词内折行（word-wrap和word-break）等等。因为只是写一些应用方面的心得，如果需要完整的CSS属性介绍，请参考CSS手册。

1、如何设定文字字体、颜色、大小 —— 使用font

font-style设定斜体，比如font-style: italic;

font-weight设定文字粗细，比如font-weight: bold;

font-size设定文字大小，比如font-size: 12px;（或者9pt，不同单位显示问题参考CSS手册）

line-height设定行距，比如line-height: 150%;

color设定文字颜色（注意不是font-color），比如color: red;

font-family设定字体，比如font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;（这是通用的写法）

以上都可以写在一行font属性里（除了color属性需要单独写）：

font: italic bold 12px/150% “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

2、如何控制段落排版 —— 使用margin，text-align

中文段落使用

标签，左右（相当于缩进）、段前段后的空白，都可以用margin。比如：

p{

margin: 18px 6px 6px 18px;/*分别是上、右、下、左，十二点开始的顺时针方向*/}

文字的对齐方式用text-align，比如：

p{

text-align: center;/*居中对齐*/

}

对齐方式还有left、right和justify（两端对齐）

PS.谈起margin，我习惯于在写CSS的时候为所有的标签定义margin: 0;因为时而出现由于默认的margin值导致页面排版问题，而自己找不到原因（特别注意的是ul/ol/p/dt/dd等标签）

3、竖排文字 —— 使用writing-mode

writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。

比如：

p{

writing-mode: tb-rl;

}

可以结合direction排版。

4、项目符号的问题 —— 使用list-style

在CSS里项目符号有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无）。比如设定一个列表（ul或

ol）的项目符号为方块，如：

li{

list-style: square;

}

另外list-style还有一些值，比如可以采用一些小图片作为项目符号，在list-style下直接写url(“图片地址”)就可以了。注意如果一个项目列表的左外补丁（margin-left）设为零的时候，list-style-position: outside（默认是outside）的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小，圆点和方块始终是那么点。并且不能设定垂直方向上的对齐。

5、首字下沉 —— 使用:first-letter

伪对象:first-letter配合font-size、float可以制作首字下沉效果。

比如：

p:first-letter{

padding: 6px;

font-size: 32pt;

float: left;

}

6、首行缩进 —— 使用text-indent

text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写：

p{

text-indent: 2em;/*em是相对单位，2em即现在一个字大小的两倍*/

}

如果font-size是12px的话，那么text-indent: 2em则缩进24px。

7、关于汉字注音 —— 使用ruby标签和ruby-align属性

比如说注音zhu yin，可以利用ruby-align设置对齐方式。这是在CSS手册里面看到的，具体可以自行查阅ruby-align项。

8、固定宽度汉字截断 —— 使用text-overflow

用后台语言可以对从数据库里的字段内容做截断处理，比如说截12个汉字（之后用省略号）。但是有时还需要html标签的过滤等，而用CSS来控制则没有这个问题。比如对列表应用以下样式

第二篇：DIV CSS在计算机网页设计中的运用

DIV+CSS在计算机网页设计中的运用

【摘 要】互联网发展至今，网络已经成为人们生活的重要部分，各色网站层出不穷，众多网页各有千秋。本文从计算机网页设计中的布局入手，分析了传统网页布局的局限性，介绍了计算机网页中典型的 “DIV+CSS”布局方式。通过对DIV 和CSS 技术的研究，介绍了DIV+CSS布局方法及其优势，为计算机网页设计提供思路。

【关键词】DIV；CSS；计算机网页；布局

一、前言

传统的计算机网页布局的方法主要有框架布局和表格布局。框架布局比较灵活，若有效运用，则能使网页更整洁、清晰。但是，对于内容多、布局复杂的网站，不宜采用框架布局，因为，过多的框架会影响网页下载所需的时间，影响网页的读取速度，而且浏览器对框架结构的兼容性也不是很好。

表格是计算机网页设计制作中的一个重要网页元素，用来对网页进行排版，使页面的信息布局合理、简洁。但是表格排版也存在以下的问题：

1.用表格排版的页面很难再修改或升级。当页面制作完成后，如果要将其中的某些位置对调，那么表格排版的工作量相当于重新制作一个页面。而CSS排版利用position和float属性可以轻松地移动和重新定位各个块，实现让用户动态选择界面的功能。

2.用表格排版的页面在下载时必须等整个表格的内容都下载完毕后才会一次性显示出来，而利用DIV+CSS排版的页面在下载时，各个子块可以分别下载显示，从而提高了页面的下载速度。

3.复杂的表格设计使得设计极为不易，修改更为复杂，最后生成的网页代码除了表格本身的代码，还有许多没有任何意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢，网站的维护和更新困难。

二、DIV和CSS的具体内容

DIV元素是用来为HTML文档内大块的内容提供布局的结构和背景。它是HTML中的一个标签，此标签的作用就是定位网页内容中的图片、文字、视频等相关信息。一般我们也叫为DIV层定位。

CSS（cascading style sheet），层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。CSS 是 1996由W3C 审核通过，并且推荐使用的。CSS 的引入就是为了使 HTML语言更好的适应页面的美工设计。它以 HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和 PDA 等）来设置不同的样式风格。CSS的引入引发了网页设计一个又一个的新高潮。使用CSS设计的优秀页面层出不穷。

DIV+CSS布局方式使网页结构和外观相分离，极大地简化了代码，而且使站点加载的速度变得快捷、维护也更加方便，无疑对传统布局的网页方式造成了极大的冲击。除此之外，DIV+ CSS布局方式的使用，使传统的网页布局的不足得到很好的弥补，当前国内多数比较著名的网站都利用此类方式方法进布局，给用户带来了全新的体验模式。

三、DIV+CSS设计计算机网页布局

采取DIV和CSS的网页布局结构，首先需要用DIV来分块，定义语义结构；然后用CSS来定位和添加样式，如浮动、位置、对齐属性、加入背景等；最后在这个CSS定义的各个块中添加相应的样式，如文字、图片等。下面通过一个布局实例介绍使用DIV+CSS布局网页的基本方法。

首先，把网页区分成不同的三个区块，包括header、content（其中有main主体区域，并将main主体部分分为两个区域lside和rside）、footer三个区域，分别作为网页的头部、内容和版权区域。编写HTML部分文档代码如下：

第三篇：网页设计心得

网页设计心得

一转眼，网页设计课程已经结束。这门课程对于我们理工科的学生来说是非常实用的，只可惜在刚刚学到一些皮毛就要告别对它的学习。

老师给我们布置的期末作业是制作一个小型网站，下面，让我介绍一下我们小组制作网页的一些心得。

我们小组选定的制作主题是军事，相比起其他的一些小组来说，我们制作的网站虽然涉及的方面比较少，但是却避免了杂乱无章和内容显浅的情况出现。我们不求大不求多不求广，却是求精，求专业。我们希望能够用我们小小的力量像蚂蚁搬家一样搭建一个大大的网站。

在制作主页的时候，我们费了较大的周折。整个团队提出了几个不同的布局方案：A，按历史的发展编排主题。B，按最新的军事科技进行系统介绍。C,按各种海军，陆军，空军的发展史进行制作。每种方法都有各自的优缺点，最后，我们选择了比较折中的C方案。于是，在我们的主页就可以看到这样一排主题：海军，空军，陆军，十大元帅，军事趣文

十大元帅和军事趣文这两个主题是我们在后期制作中添加进去的。我们认为新中国建国后的十大元帅为中国的军事发展做出了不可磨灭的奉献，在我们的军事网站中缺少了他们是怎么都说不过去的。牢记历史，把握今天，这也是我们的初衷。后来我们又感觉单纯讨论、介绍军事和兵器知识实在过于严肃，所以就特别添加了“军事趣文“这个版块。

在制作过程中，我们通过动手实践更加加深了对Front Page 2003的认识，同时也锻炼了我们的操作能力。对于主页，我们多用表格进行排版，因为主页主要是排放图片、各版的文字介绍、最新军事新闻等内容。只有使用表格才能使主页看起来更加整洁规范。在主页我们使用的主色调是黑色和白色。因为我们确定的风格以严肃、专业为主，选择黑色和白色会看起来会更加严肃。在选择图片的时候我们也尽量避免选择过于花哨的图片，以配合我们的主题和风格。

我制作的板块是军事图片和军事趣文。在安放图片的时候我选择使用“图片库”组件，这样让可以让图片看起来更加整洁美观，不会显得杂乱无章。使用幻灯片的形式播放页可以增加网页打开的速度，也能让浏览者感受到我们的用心。在军事趣味版块我也花了很多心思去收集考证资料。在网上，随便就能搜索到很多军事方面的趣文。但是，为了突出我们的网站的专业性，我在选择资料方面还是比较谨慎的。一些有伤领导人形象，无法考证的无稽之谈是坚决不不要，败坏人民军队名声的坚决不要。我的目的只有一个，全力打造我们专业的军事网站。虽然短短的几十个课时就这样结束，但是我们今后学习网页制作的步伐却不会停止。在今后的日子里，我们仍会自行学习网页设计内容，我们的目标是力图全面掌握网站制作知识，努力完善我们制作的网站，最终让我们的网站真正上网，打造全中国最专业的军事网站！

非常感谢卢老师对我们指导，谢谢！

第四篇：网页设计心得

一.充分发挥动手能力作为网页设计的初学者，我对网页设计非常感兴趣，一心想设计出一个美观、实用、内容丰富的个人网页。这次的教改方案由以前我们单纯接受知识变为主动参与教学活动。在这样的压力和动力下，通过自己动手、动脑，通过网络资源，老师的指导，在不断发现问题和解决问题的过程中学到了很多知识，也增强了我的创作能力和动手能力，在网页设计过程中，从构思到设计、完善、维护，整个过程我都全身心投入，使我真正学到了网页设计的知识。

二.在设计过程中不断提高网页设计水平在本次网页设计中，我不仅学到了很多关于网页设计方面的知识，也从中学会了关于网络、编程等方面的知识。我从最初开始运用FrontPage设计网页，到后来运用Dreamweaver、Flash、Fireworks等网软件设计网页，完善网页。在这个过程中，我通过自学教材、上网查询，学习了Dreamweaver、Flash、Fireworks等网页软件的应用，学会了管理、维护自己的站点，以及一些简单动画、控件的制作等等。在设计过程中也出现了很多的问题，但通过看书，上网查询，请教老师等方式，不断的学习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。

三.不足之处对于网页设计软件的强大功能运用得还不够。在网页设计过程中，由于没有网页制作代码的知识，所以在设计时 也遇到了很多麻烦，有时插入一个特效脚本也是很麻烦。在网页制作过程中，想提高设计水平，想有个理想的网页，必须学会代码的运用，我将在以后的学习过程中不断加强这方面的学习，希望老师能简单介绍一下代码，让我也对它有个初步的认识，以后再加强学习也才会有所提高。

总体来说，通过今次的对网页设计的学习，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。也希望老师在今后的日子里多指导。

第五篇：网页设计心得

网页设计学习心得

姓名：冯宇婷班级：09艺设一班学号：0908021006指导老师：葛书河

网页设计学习心得

随着社会的发展，计算机和网络已经深入到我们的生活。网页设计业也随之变成我们当代大学生需要掌握的一项技能。为了符合时代的发展，学校也为我们安排了网页设计的课程。

通过几周的学习，我掌握了制作网页的一些基本技能。同时也加深了对photoshop、fireworks这些辅助网页制作软件的了解应用。

在整个学习过程中，老师主要是通过将现有的一些优秀网页作为教程模板，对网页的制作过程进行拆解分析，向我们教授网页制作的方法和技巧。

在整个网页制作过程中，表格的构思、图片的处理、超级链接的建立，表单的设立等等，每一个步骤都是需要细致考量的。

就拿表格来说，在网页制作中，表格起着至关重要的作用，是网页制作的基础，作为网页的骨架，决定了网页的排版。在明确了网页的主题之后，要考虑的就是表格框架的构成。一个好的框架可以使网页的制作更加简洁方便，提高制作网页的效率。

当然，网页制作并不是像想象中的那么简单，其中让我觉得比较意外的是图片的处理。在网页制作过程中，图片的插入是吸引网页阅览者注意力的主要方式。但是图片的处理却比较特殊，插入网页中的图片为了能够在较短的时间内被阅览，就要保证图片的内存很小，所以图片的像素较低，同时图片保存的格式也应看图片颜色的实际情况

而定。所要插入的图片如果需要进行调整，必须要通过别的软件进行处理，同时还要对图像的大小进行估计。这就需要dreamweaver与photoshop的通力合作了。对于我来说，图片的处理还存在一定的难度，一张图片处理的好，需要的不仅仅是能够熟练使用软件，还需要有创意。

在网络的世界中，几乎没有哪一张网页是孤独存在的。单张的网页不免显得单薄，缺少内容。为了能够满足大众更多的阅览需求，将不同网页中相关内容联系在一起变得举足轻重。此时，超级链接就开始发挥其“说客”作用，将图片与文字进行不同的组合，使网页形式更加丰富的同时也为阅览者提供了更大范围的阅读量。如果表格和图片是网页的血肉，那么超级链接就是网页的灵魂，主导着网页的扩展方向。

通过网页设计这门课的学习，我已经掌握了一些基础的格式设定，这让我受益匪浅。但是那是远远不够的，在网页设计的过程中，我接触到的当然不是只有这些。其中表单的设计、css样式的设定、代码的编写还有很多的内容需要我自己去深入学习。更多的内容都需要我通过不断练习和发现才能真正熟练应用。