第一篇：網(wǎng)頁設(shè)計(jì)中針對(duì)中文排版CSS心得

網(wǎng)頁設(shè)計(jì)中針對(duì)中文排版CSS心得

數(shù)月來學(xué)習(xí)web標(biāo)準(zhǔn)，并遵循標(biāo)準(zhǔn)設(shè)計(jì)和制作web頁面。一直想寫點(diǎn)什么，整理一下自己的心得體會(huì)。寫這篇文章，主要是針對(duì)中文排版設(shè)計(jì)，英文排版因?yàn)楹苌僮?，所以不涉及?/p>

先介紹如何設(shè)定字體、顏色、大小、段落空白等比較簡單的應(yīng)用，后面再介紹下比如首字下沉、首行縮進(jìn)。最后講一些常用的web頁面中文排版，比如中文字的截?cái)唷⒐潭▽挾仍~內(nèi)折行（word-wrap和word-break）等等。因?yàn)橹皇菍懸恍?yīng)用方面的心得，如果需要完整的CSS屬性介紹，請(qǐng)參考CSS手冊(cè)。

1、如何設(shè)定文字字體、顏色、大小 —— 使用font

font-style設(shè)定斜體，比如font-style: italic;

font-weight設(shè)定文字粗細(xì)，比如font-weight: bold;

font-size設(shè)定文字大小，比如font-size: 12px;（或者9pt，不同單位顯示問題參考CSS手冊(cè)）

line-height設(shè)定行距，比如line-height: 150%;

color設(shè)定文字顏色（注意不是font-color），比如color: red;

font-family設(shè)定字體，比如font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;（這是通用的寫法）

以上都可以寫在一行font屬性里（除了color屬性需要單獨(dú)寫）：

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

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

中文段落使用

標(biāo)簽，左右（相當(dāng)于縮進(jìn)）、段前段后的空白，都可以用margin。比如：

p{

margin: 18px 6px 6px 18px;/*分別是上、右、下、左，十二點(diǎn)開始的順時(shí)針方向*/}

文字的對(duì)齊方式用text-align，比如：

p{

text-align: center;/*居中對(duì)齊*/

}

對(duì)齊方式還有l(wèi)eft、right和justify（兩端對(duì)齊）

PS.談起margin，我習(xí)慣于在寫CSS的時(shí)候?yàn)樗械臉?biāo)簽定義margin: 0;因?yàn)闀r(shí)而出現(xiàn)由于默認(rèn)的margin值導(dǎo)致頁面排版問題，而自己找不到原因（特別注意的是ul/ol/p/dt/dd等標(biāo)簽）

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

writing-mode屬性有兩個(gè)值lr-tb和tb-rl，前者是默認(rèn)的左-右、上-下，后者是上-下、右-左。

比如：

p{

writing-mode: tb-rl;

}

可以結(jié)合direction排版。

4、項(xiàng)目符號(hào)的問題 —— 使用list-style

在CSS里項(xiàng)目符號(hào)有disc（實(shí)心圓點(diǎn)）、circle（空心圓圈）、square（實(shí)心方塊）、decimal（阿拉伯?dāng)?shù)字）、lower-roman（小寫羅馬數(shù)字）、upper-roman（大寫羅馬數(shù)字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無）。比如設(shè)定一個(gè)列表（ul或

ol）的項(xiàng)目符號(hào)為方塊，如：

li{

list-style: square;

}

另外list-style還有一些值，比如可以采用一些小圖片作為項(xiàng)目符號(hào)，在list-style下直接寫url(“圖片地址”)就可以了。注意如果一個(gè)項(xiàng)目列表的左外補(bǔ)丁（margin-left）設(shè)為零的時(shí)候，list-style-position: outside（默認(rèn)是outside）的項(xiàng)目符號(hào)不會(huì)顯示?？上У氖巧鲜龅捻?xiàng)目符號(hào)似乎并不能設(shè)定大小，圓點(diǎn)和方塊始終是那么點(diǎn)。并且不能設(shè)定垂直方向上的對(duì)齊。

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

偽對(duì)象:first-letter配合font-size、float可以制作首字下沉效果。

比如：

p:first-letter{

padding: 6px;

font-size: 32pt;

float: left;

}

6、首行縮進(jìn) —— 使用text-indent

text-indent可以使得容器內(nèi)首行縮進(jìn)一定單位。比如中文段落一般每段前空兩個(gè)漢字?？梢赃@么寫：

p{

text-indent: 2em;/*em是相對(duì)單位，2em即現(xiàn)在一個(gè)字大小的兩倍*/

}

如果font-size是12px的話，那么text-indent: 2em則縮進(jìn)24px。

7、關(guān)于漢字注音 —— 使用ruby標(biāo)簽和ruby-align屬性

比如說注音zhu yin，可以利用ruby-align設(shè)置對(duì)齊方式。這是在CSS手冊(cè)里面看到的，具體可以自行查閱ruby-align項(xiàng)。

8、固定寬度漢字截?cái)?—— 使用text-overflow

用后臺(tái)語言可以對(duì)從數(shù)據(jù)庫里的字段內(nèi)容做截?cái)嗵幚恚热缯f截12個(gè)漢字（之后用省略號(hào)）。但是有時(shí)還需要html標(biāo)簽的過濾等，而用CSS來控制則沒有這個(gè)問題。比如對(duì)列表應(yīng)用以下樣式

第二篇：DIV CSS在計(jì)算機(jī)網(wǎng)頁設(shè)計(jì)中的運(yùn)用

DIV+CSS在計(jì)算機(jī)網(wǎng)頁設(shè)計(jì)中的運(yùn)用

【摘 要】互聯(lián)網(wǎng)發(fā)展至今，網(wǎng)絡(luò)已經(jīng)成為人們生活的重要部分，各色網(wǎng)站層出不窮，眾多網(wǎng)頁各有千秋。本文從計(jì)算機(jī)網(wǎng)頁設(shè)計(jì)中的布局入手，分析了傳統(tǒng)網(wǎng)頁布局的局限性，介紹了計(jì)算機(jī)網(wǎng)頁中典型的 “DIV+CSS”布局方式。通過對(duì)DIV 和CSS 技術(shù)的研究，介紹了DIV+CSS布局方法及其優(yōu)勢(shì)，為計(jì)算機(jī)網(wǎng)頁設(shè)計(jì)提供思路。

【關(guān)鍵詞】DIV；CSS；計(jì)算機(jī)網(wǎng)頁；布局

一、前言

傳統(tǒng)的計(jì)算機(jī)網(wǎng)頁布局的方法主要有框架布局和表格布局?？蚣懿季直容^靈活，若有效運(yùn)用，則能使網(wǎng)頁更整潔、清晰。但是，對(duì)于內(nèi)容多、布局復(fù)雜的網(wǎng)站，不宜采用框架布局，因?yàn)?，過多的框架會(huì)影響網(wǎng)頁下載所需的時(shí)間，影響網(wǎng)頁的讀取速度，而且瀏覽器對(duì)框架結(jié)構(gòu)的兼容性也不是很好。

表格是計(jì)算機(jī)網(wǎng)頁設(shè)計(jì)制作中的一個(gè)重要網(wǎng)頁元素，用來對(duì)網(wǎng)頁進(jìn)行排版，使頁面的信息布局合理、簡潔。但是表格排版也存在以下的問題：

1.用表格排版的頁面很難再修改或升級(jí)。當(dāng)頁面制作完成后，如果要將其中的某些位置對(duì)調(diào)，那么表格排版的工作量相當(dāng)于重新制作一個(gè)頁面。而CSS排版利用position和float屬性可以輕松地移動(dòng)和重新定位各個(gè)塊，實(shí)現(xiàn)讓用戶動(dòng)態(tài)選擇界面的功能。

2.用表格排版的頁面在下載時(shí)必須等整個(gè)表格的內(nèi)容都下載完畢后才會(huì)一次性顯示出來，而利用DIV+CSS排版的頁面在下載時(shí)，各個(gè)子塊可以分別下載顯示，從而提高了頁面的下載速度。

3.復(fù)雜的表格設(shè)計(jì)使得設(shè)計(jì)極為不易，修改更為復(fù)雜，最后生成的網(wǎng)頁代碼除了表格本身的代碼，還有許多沒有任何意義的圖像占位符及其他元素，文件量龐大，最終導(dǎo)致瀏覽器下載及解析速度變慢，網(wǎng)站的維護(hù)和更新困難。

二、DIV和CSS的具體內(nèi)容

DIV元素是用來為HTML文檔內(nèi)大塊的內(nèi)容提供布局的結(jié)構(gòu)和背景。它是HTML中的一個(gè)標(biāo)簽，此標(biāo)簽的作用就是定位網(wǎng)頁內(nèi)容中的圖片、文字、視頻等相關(guān)信息。一般我們也叫為DIV層定位。

CSS（cascading style sheet），層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁分離的一種標(biāo)識(shí)性語言。CSS 是 1996由W3C 審核通過，并且推薦使用的。CSS 的引入就是為了使 HTML語言更好的適應(yīng)頁面的美工設(shè)計(jì)。它以 HTML語言為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網(wǎng)頁設(shè)計(jì)者可以針對(duì)各種可視化瀏覽器（包括顯示器、打印機(jī)、打字機(jī)、投影儀和 PDA 等）來設(shè)置不同的樣式風(fēng)格。CSS的引入引發(fā)了網(wǎng)頁設(shè)計(jì)一個(gè)又一個(gè)的新高潮。使用CSS設(shè)計(jì)的優(yōu)秀頁面層出不窮。

DIV+CSS布局方式使網(wǎng)頁結(jié)構(gòu)和外觀相分離，極大地簡化了代碼，而且使站點(diǎn)加載的速度變得快捷、維護(hù)也更加方便，無疑對(duì)傳統(tǒng)布局的網(wǎng)頁方式造成了極大的沖擊。除此之外，DIV+ CSS布局方式的使用，使傳統(tǒng)的網(wǎng)頁布局的不足得到很好的彌補(bǔ)，當(dāng)前國內(nèi)多數(shù)比較著名的網(wǎng)站都利用此類方式方法進(jìn)布局，給用戶帶來了全新的體驗(yàn)?zāi)Ｊ健?/p>

三、DIV+CSS設(shè)計(jì)計(jì)算機(jī)網(wǎng)頁布局

采取DIV和CSS的網(wǎng)頁布局結(jié)構(gòu)，首先需要用DIV來分塊，定義語義結(jié)構(gòu)；然后用CSS來定位和添加樣式，如浮動(dòng)、位置、對(duì)齊屬性、加入背景等；最后在這個(gè)CSS定義的各個(gè)塊中添加相應(yīng)的樣式，如文字、圖片等。下面通過一個(gè)布局實(shí)例介紹使用DIV+CSS布局網(wǎng)頁的基本方法。

首先，把網(wǎng)頁區(qū)分成不同的三個(gè)區(qū)塊，包括header、content（其中有main主體區(qū)域，并將main主體部分分為兩個(gè)區(qū)域lside和rside）、footer三個(gè)區(qū)域，分別作為網(wǎng)頁的頭部、內(nèi)容和版權(quán)區(qū)域。編寫HTML部分文檔代碼如下：

第三篇：網(wǎng)頁設(shè)計(jì)心得

網(wǎng)頁設(shè)計(jì)心得

一轉(zhuǎn)眼，網(wǎng)頁設(shè)計(jì)課程已經(jīng)結(jié)束。這門課程對(duì)于我們理工科的學(xué)生來說是非常實(shí)用的，只可惜在剛剛學(xué)到一些皮毛就要告別對(duì)它的學(xué)習(xí)。

老師給我們布置的期末作業(yè)是制作一個(gè)小型網(wǎng)站，下面，讓我介紹一下我們小組制作網(wǎng)頁的一些心得。

我們小組選定的制作主題是軍事，相比起其他的一些小組來說，我們制作的網(wǎng)站雖然涉及的方面比較少，但是卻避免了雜亂無章和內(nèi)容顯淺的情況出現(xiàn)。我們不求大不求多不求廣，卻是求精，求專業(yè)。我們希望能夠用我們小小的力量像螞蟻搬家一樣搭建一個(gè)大大的網(wǎng)站。

在制作主頁的時(shí)候，我們費(fèi)了較大的周折。整個(gè)團(tuán)隊(duì)提出了幾個(gè)不同的布局方案：A，按歷史的發(fā)展編排主題。B，按最新的軍事科技進(jìn)行系統(tǒng)介紹。C,按各種海軍，陸軍，空軍的發(fā)展史進(jìn)行制作。每種方法都有各自的優(yōu)缺點(diǎn)，最后，我們選擇了比較折中的C方案。于是，在我們的主頁就可以看到這樣一排主題：海軍，空軍，陸軍，十大元帥，軍事趣文

十大元帥和軍事趣文這兩個(gè)主題是我們?cè)诤笃谥谱髦刑砑舆M(jìn)去的。我們認(rèn)為新中國建國后的十大元帥為中國的軍事發(fā)展做出了不可磨滅的奉獻(xiàn)，在我們的軍事網(wǎng)站中缺少了他們是怎么都說不過去的。牢記歷史，把握今天，這也是我們的初衷。后來我們又感覺單純討論、介紹軍事和兵器知識(shí)實(shí)在過于嚴(yán)肅，所以就特別添加了“軍事趣文“這個(gè)版塊。

在制作過程中，我們通過動(dòng)手實(shí)踐更加加深了對(duì)Front Page 2003的認(rèn)識(shí)，同時(shí)也鍛煉了我們的操作能力。對(duì)于主頁，我們多用表格進(jìn)行排版，因?yàn)橹黜撝饕桥欧艌D片、各版的文字介紹、最新軍事新聞等內(nèi)容。只有使用表格才能使主頁看起來更加整潔規(guī)范。在主頁我們使用的主色調(diào)是黑色和白色。因?yàn)槲覀兇_定的風(fēng)格以嚴(yán)肅、專業(yè)為主，選擇黑色和白色會(huì)看起來會(huì)更加嚴(yán)肅。在選擇圖片的時(shí)候我們也盡量避免選擇過于花哨的圖片，以配合我們的主題和風(fēng)格。

我制作的板塊是軍事圖片和軍事趣文。在安放圖片的時(shí)候我選擇使用“圖片庫”組件，這樣讓可以讓圖片看起來更加整潔美觀，不會(huì)顯得雜亂無章。使用幻燈片的形式播放頁可以增加網(wǎng)頁打開的速度，也能讓瀏覽者感受到我們的用心。在軍事趣味版塊我也花了很多心思去收集考證資料。在網(wǎng)上，隨便就能搜索到很多軍事方面的趣文。但是，為了突出我們的網(wǎng)站的專業(yè)性，我在選擇資料方面還是比較謹(jǐn)慎的。一些有傷領(lǐng)導(dǎo)人形象，無法考證的無稽之談是堅(jiān)決不不要，敗壞人民軍隊(duì)名聲的堅(jiān)決不要。我的目的只有一個(gè)，全力打造我們專業(yè)的軍事網(wǎng)站。雖然短短的幾十個(gè)課時(shí)就這樣結(jié)束，但是我們今后學(xué)習(xí)網(wǎng)頁制作的步伐卻不會(huì)停止。在今后的日子里，我們?nèi)詴?huì)自行學(xué)習(xí)網(wǎng)頁設(shè)計(jì)內(nèi)容，我們的目標(biāo)是力圖全面掌握網(wǎng)站制作知識(shí)，努力完善我們制作的網(wǎng)站，最終讓我們的網(wǎng)站真正上網(wǎng)，打造全中國最專業(yè)的軍事網(wǎng)站！

非常感謝盧老師對(duì)我們指導(dǎo)，謝謝！

第四篇：網(wǎng)頁設(shè)計(jì)心得

一.充分發(fā)揮動(dòng)手能力作為網(wǎng)頁設(shè)計(jì)的初學(xué)者，我對(duì)網(wǎng)頁設(shè)計(jì)非常感興趣，一心想設(shè)計(jì)出一個(gè)美觀、實(shí)用、內(nèi)容豐富的個(gè)人網(wǎng)頁。這次的教改方案由以前我們單純接受知識(shí)變?yōu)橹鲃?dòng)參與教學(xué)活動(dòng)。在這樣的壓力和動(dòng)力下，通過自己動(dòng)手、動(dòng)腦，通過網(wǎng)絡(luò)資源，老師的指導(dǎo)，在不斷發(fā)現(xiàn)問題和解決問題的過程中學(xué)到了很多知識(shí)，也增強(qiáng)了我的創(chuàng)作能力和動(dòng)手能力，在網(wǎng)頁設(shè)計(jì)過程中，從構(gòu)思到設(shè)計(jì)、完善、維護(hù)，整個(gè)過程我都全身心投入，使我真正學(xué)到了網(wǎng)頁設(shè)計(jì)的知識(shí)。

二.在設(shè)計(jì)過程中不斷提高網(wǎng)頁設(shè)計(jì)水平在本次網(wǎng)頁設(shè)計(jì)中，我不僅學(xué)到了很多關(guān)于網(wǎng)頁設(shè)計(jì)方面的知識(shí)，也從中學(xué)會(huì)了關(guān)于網(wǎng)絡(luò)、編程等方面的知識(shí)。我從最初開始運(yùn)用FrontPage設(shè)計(jì)網(wǎng)頁，到后來運(yùn)用Dreamweaver、Flash、Fireworks等網(wǎng)軟件設(shè)計(jì)網(wǎng)頁，完善網(wǎng)頁。在這個(gè)過程中，我通過自學(xué)教材、上網(wǎng)查詢，學(xué)習(xí)了Dreamweaver、Flash、Fireworks等網(wǎng)頁軟件的應(yīng)用，學(xué)會(huì)了管理、維護(hù)自己的站點(diǎn)，以及一些簡單動(dòng)畫、控件的制作等等。在設(shè)計(jì)過程中也出現(xiàn)了很多的問題，但通過看書，上網(wǎng)查詢，請(qǐng)教老師等方式，不斷的學(xué)習(xí)、解決、提高，設(shè)計(jì)出的網(wǎng)頁不論是外觀還是內(nèi)容，都在不斷的進(jìn)步、改善?？梢哉f在自己動(dòng)手，不斷實(shí)踐的過程中，網(wǎng)頁設(shè)計(jì)水平得到了很大的提高。

三.不足之處對(duì)于網(wǎng)頁設(shè)計(jì)軟件的強(qiáng)大功能運(yùn)用得還不夠。在網(wǎng)頁設(shè)計(jì)過程中，由于沒有網(wǎng)頁制作代碼的知識(shí)，所以在設(shè)計(jì)時(shí) 也遇到了很多麻煩，有時(shí)插入一個(gè)特效腳本也是很麻煩。在網(wǎng)頁制作過程中，想提高設(shè)計(jì)水平，想有個(gè)理想的網(wǎng)頁，必須學(xué)會(huì)代碼的運(yùn)用，我將在以后的學(xué)習(xí)過程中不斷加強(qiáng)這方面的學(xué)習(xí)，希望老師能簡單介紹一下代碼，讓我也對(duì)它有個(gè)初步的認(rèn)識(shí)，以后再加強(qiáng)學(xué)習(xí)也才會(huì)有所提高。

總體來說，通過今次的對(duì)網(wǎng)頁設(shè)計(jì)的學(xué)習(xí)，有收獲也有遺憾、不足的地方，但我想，我已經(jīng)邁入了網(wǎng)頁設(shè)計(jì)的大門，只要我再認(rèn)真努力的去學(xué)習(xí)，去提高，憑借我對(duì)網(wǎng)頁設(shè)計(jì)的熱情和執(zhí)著，我將來設(shè)計(jì)出的網(wǎng)頁會(huì)更加專業(yè)，更完善。也希望老師在今后的日子里多指導(dǎo)。

第五篇：網(wǎng)頁設(shè)計(jì)心得

網(wǎng)頁設(shè)計(jì)學(xué)習(xí)心得

姓名：馮宇婷班級(jí)：09藝設(shè)一班學(xué)號(hào)：0908021006指導(dǎo)老師：葛書河

網(wǎng)頁設(shè)計(jì)學(xué)習(xí)心得

隨著社會(huì)的發(fā)展，計(jì)算機(jī)和網(wǎng)絡(luò)已經(jīng)深入到我們的生活。網(wǎng)頁設(shè)計(jì)業(yè)也隨之變成我們當(dāng)代大學(xué)生需要掌握的一項(xiàng)技能。為了符合時(shí)代的發(fā)展，學(xué)校也為我們安排了網(wǎng)頁設(shè)計(jì)的課程。

通過幾周的學(xué)習(xí)，我掌握了制作網(wǎng)頁的一些基本技能。同時(shí)也加深了對(duì)photoshop、fireworks這些輔助網(wǎng)頁制作軟件的了解應(yīng)用。

在整個(gè)學(xué)習(xí)過程中，老師主要是通過將現(xiàn)有的一些優(yōu)秀網(wǎng)頁作為教程模板，對(duì)網(wǎng)頁的制作過程進(jìn)行拆解分析，向我們教授網(wǎng)頁制作的方法和技巧。

在整個(gè)網(wǎng)頁制作過程中，表格的構(gòu)思、圖片的處理、超級(jí)鏈接的建立，表單的設(shè)立等等，每一個(gè)步驟都是需要細(xì)致考量的。

就拿表格來說，在網(wǎng)頁制作中，表格起著至關(guān)重要的作用，是網(wǎng)頁制作的基礎(chǔ)，作為網(wǎng)頁的骨架，決定了網(wǎng)頁的排版。在明確了網(wǎng)頁的主題之后，要考慮的就是表格框架的構(gòu)成。一個(gè)好的框架可以使網(wǎng)頁的制作更加簡潔方便，提高制作網(wǎng)頁的效率。

當(dāng)然，網(wǎng)頁制作并不是像想象中的那么簡單，其中讓我覺得比較意外的是圖片的處理。在網(wǎng)頁制作過程中，圖片的插入是吸引網(wǎng)頁閱覽者注意力的主要方式。但是圖片的處理卻比較特殊，插入網(wǎng)頁中的圖片為了能夠在較短的時(shí)間內(nèi)被閱覽，就要保證圖片的內(nèi)存很小，所以圖片的像素較低，同時(shí)圖片保存的格式也應(yīng)看圖片顏色的實(shí)際情況

而定。所要插入的圖片如果需要進(jìn)行調(diào)整，必須要通過別的軟件進(jìn)行處理，同時(shí)還要對(duì)圖像的大小進(jìn)行估計(jì)。這就需要dreamweaver與photoshop的通力合作了。對(duì)于我來說，圖片的處理還存在一定的難度，一張圖片處理的好，需要的不僅僅是能夠熟練使用軟件，還需要有創(chuàng)意。

在網(wǎng)絡(luò)的世界中，幾乎沒有哪一張網(wǎng)頁是孤獨(dú)存在的。單張的網(wǎng)頁不免顯得單薄，缺少內(nèi)容。為了能夠滿足大眾更多的閱覽需求，將不同網(wǎng)頁中相關(guān)內(nèi)容聯(lián)系在一起變得舉足輕重。此時(shí)，超級(jí)鏈接就開始發(fā)揮其“說客”作用，將圖片與文字進(jìn)行不同的組合，使網(wǎng)頁形式更加豐富的同時(shí)也為閱覽者提供了更大范圍的閱讀量。如果表格和圖片是網(wǎng)頁的血肉，那么超級(jí)鏈接就是網(wǎng)頁的靈魂，主導(dǎo)著網(wǎng)頁的擴(kuò)展方向。

通過網(wǎng)頁設(shè)計(jì)這門課的學(xué)習(xí)，我已經(jīng)掌握了一些基礎(chǔ)的格式設(shè)定，這讓我受益匪淺。但是那是遠(yuǎn)遠(yuǎn)不夠的，在網(wǎng)頁設(shè)計(jì)的過程中，我接觸到的當(dāng)然不是只有這些。其中表單的設(shè)計(jì)、css樣式的設(shè)定、代碼的編寫還有很多的內(nèi)容需要我自己去深入學(xué)習(xí)。更多的內(nèi)容都需要我通過不斷練習(xí)和發(fā)現(xiàn)才能真正熟練應(yīng)用。