本書緊密圍繞網(wǎng)頁設(shè)計(jì)師在制作網(wǎng)頁過程中實(shí)際需要掌握的技術(shù), 全面介紹了使用HTML、CSS進(jìn)行網(wǎng)頁設(shè)計(jì)和制作的各方面內(nèi)容和技巧。本書不是單純講解語法, 而是通過一個(gè)個(gè)鮮活、典型的實(shí)戰(zhàn)來達(dá)到學(xué)以致用的目的。每個(gè)語法都有相應(yīng)的實(shí)例, 每章后面又配有綜合小實(shí)例, 各章均配有習(xí)題, 力求達(dá)到理論知識(shí)與實(shí)踐操作完美結(jié)合的效果。
本書主要特色
(1) 知識(shí)全面系統(tǒng)。
本書內(nèi)容完全從網(wǎng)頁創(chuàng)建的實(shí)際角度出發(fā),將所有HTML、CSS+DIV元素進(jìn)行歸類,每個(gè)標(biāo)簽的語法、屬性和參數(shù)都有完整、詳細(xì)的說明,信息量大,知識(shí)結(jié)構(gòu)完善。
(2) 典型實(shí)例講解。
本書的每章都配有大量實(shí)用案例,將本章的基礎(chǔ)知識(shí)綜合貫穿起來,力求達(dá)到理論知識(shí)與實(shí)際操作完美結(jié)合的效果。
(3) 配合Dreamweaver進(jìn)行講解。
本書以淺顯的語言和詳細(xì)的步驟介紹了在可視化網(wǎng)頁設(shè)計(jì)軟件Dreamweaver中如何運(yùn)用HTML、CSS來創(chuàng)建網(wǎng)頁,使網(wǎng)頁制作更加得心應(yīng)手。在最后一章向讀者展示了完全不用編寫代碼,在Dreamweaver中創(chuàng)建完整網(wǎng)頁的過程。
(4)配圖豐富,效果直觀。
對(duì)于每一段實(shí)例代碼,本書都配有相應(yīng)的效果圖,讀者無須自己進(jìn)行編碼,也可以看到相應(yīng)的運(yùn)行結(jié)果或者顯示效果。在不便上機(jī)操作的情況下,讀者也可以根據(jù)書中的實(shí)例和效果圖進(jìn)行分析和比較。
(5) 習(xí)題強(qiáng)化。
每章后都附有針對(duì)性的練習(xí)題,通過實(shí)訓(xùn)鞏固每章所學(xué)的知識(shí)。
(6) 配套光盤。
需要從清華大學(xué)出版社官網(wǎng)上下載使用。
近年來,隨著網(wǎng)絡(luò)信息技術(shù)的廣泛應(yīng)用,越來越多的個(gè)人、企業(yè)紛紛建立自己的網(wǎng)站,利用網(wǎng)站來宣傳和推廣自己。網(wǎng)頁技術(shù)已經(jīng)成為當(dāng)代青年學(xué)生必備的知識(shí)技能。目前大部分制作網(wǎng)頁的方式都是運(yùn)用可視化的網(wǎng)頁編輯軟件,這些軟件的功能相當(dāng)強(qiáng)大,使用也非常方便。但是對(duì)于高級(jí)的網(wǎng)頁制作人員來講,仍需了解HTML、CSS+DIV等網(wǎng)頁設(shè)計(jì)語言和技術(shù)的使用,這樣才能充分發(fā)揮豐富的想象力,更加隨心所欲地設(shè)計(jì)出符合標(biāo)準(zhǔn)的網(wǎng)頁,以實(shí)現(xiàn)網(wǎng)頁設(shè)計(jì)軟件不能完成的許多重要功能。
本書主要內(nèi)容
隨著Web 2.0的盛行,一切都開始基于Web標(biāo)準(zhǔn),許多網(wǎng)站設(shè)計(jì)師開始學(xué)習(xí)并應(yīng)用Web標(biāo)準(zhǔn),CSS的應(yīng)用也越來越廣泛。本書正是在這種流行趨勢下應(yīng)運(yùn)而生的介紹使用HTML和CSS進(jìn)行網(wǎng)頁標(biāo)準(zhǔn)化布局的書。本書不僅僅將筆墨局限于語法講解上,并通過一個(gè)個(gè)鮮活、典型的實(shí)戰(zhàn)來達(dá)到學(xué)以致用的目的。每個(gè)語法都有相應(yīng)的實(shí)例,每章后面又配有綜合小實(shí)例。
本書共21章,主要內(nèi)容包括HTML入門,HTML基本標(biāo)簽,用HTML設(shè)置文字,段落與列表,列表的建立和使用,用HTML創(chuàng)建精彩的圖像和多媒體頁面,用HTML創(chuàng)建超鏈接,用HTML創(chuàng)建表格,用表單創(chuàng)建交互式網(wǎng)頁,HTML 5的結(jié)構(gòu),CSS基礎(chǔ)知識(shí),用CSS設(shè)計(jì)豐富的文字效果,用CSS設(shè)計(jì)圖像和背景,用CSS設(shè)計(jì)表格和表單樣式、用CSS制作鏈接與網(wǎng)站導(dǎo)航,CSS+DIV布局定位基礎(chǔ),CSS盒子模型,盒子的浮動(dòng)與定位,CSS+DIV布局方法,CSS 3入門基礎(chǔ),設(shè)計(jì)和制作適合手機(jī)瀏覽的網(wǎng)頁,公司宣傳網(wǎng)站的布局。
本書主要特色
(1) 知識(shí)全面系統(tǒng)。
本書內(nèi)容完全從網(wǎng)頁創(chuàng)建的實(shí)際角度出發(fā),將所有HTML、CSS+DIV元素進(jìn)行歸類,每個(gè)標(biāo)簽的語法、屬性和參數(shù)都有完整、詳細(xì)的說明,信息量大,知識(shí)結(jié)構(gòu)完善。
(2) 典型實(shí)例講解。
本書的每章都配有大量實(shí)用案例,將本章的基礎(chǔ)知識(shí)綜合貫穿起來,力求達(dá)到理論知識(shí)與實(shí)際操作完美結(jié)合的效果。
(3) 配合Dreamweaver進(jìn)行講解。
本書以淺顯的語言和詳細(xì)的步驟介紹了在可視化網(wǎng)頁設(shè)計(jì)軟件Dreamweaver中如何運(yùn)用HTML、CSS來創(chuàng)建網(wǎng)頁,使網(wǎng)頁制作更加得心應(yīng)手。在最后一章向讀者展示了完全不用編寫代碼,在Dreamweaver中創(chuàng)建完整網(wǎng)頁的過程。
(4)配圖豐富,效果直觀。
對(duì)于每一段實(shí)例代碼,本書都配有相應(yīng)的效果圖,讀者無須自己進(jìn)行編碼,也可以看到相應(yīng)的運(yùn)行結(jié)果或者顯示效果。在不便上機(jī)操作的情況下,讀者也可以根據(jù)書中的實(shí)例和效果圖進(jìn)行分析和比較。
(5) 習(xí)題強(qiáng)化。
每章后都附有針對(duì)性的練習(xí)題,通過實(shí)訓(xùn)鞏固每章所學(xué)的知識(shí)。
(6) 配套光盤。
需要從清華大學(xué)出版社官網(wǎng)上下載使用。
本書讀者對(duì)象
網(wǎng)頁設(shè)計(jì)與制作人員;
網(wǎng)站建設(shè)與開發(fā)人員;
大中專院校相關(guān)專業(yè)師生;
網(wǎng)頁制作培訓(xùn)班學(xué)員;
個(gè)人網(wǎng)站愛好者與自學(xué)讀者。
本書是集體智慧的結(jié)晶,參加本書編寫的人員均為從事網(wǎng)頁教學(xué)工作的資深教師和具備大型商業(yè)網(wǎng)站建設(shè)經(jīng)驗(yàn)的資深網(wǎng)頁設(shè)計(jì)師,他們有著豐富的教學(xué)經(jīng)驗(yàn)和網(wǎng)頁設(shè)計(jì)經(jīng)驗(yàn)。參加本書編寫的人員包括徐洪峰、何琛、鄧靜靜、李銀修、孫魯杰、何海霞、何秀明、孫素華、呂志彬等。由于時(shí)間所限,書中疏漏之處在所難免,懇請廣大讀者朋友批評(píng)指正。
編 者
第1章 HTML入門 1
1.1 什么是HTML 1
1.1.1 HTML的特點(diǎn) 1
1.1.2 HTML的歷史 2
1.2 HTML文件的基本結(jié)構(gòu) 2
1.2.1 HTML文件結(jié)構(gòu) 2
1.2.2 編寫HTML文件的注意事項(xiàng) 4
1.3 HTML文件的編寫方法 4
1.3.1 使用記事本編寫HTML頁面 4
1.3.2 使用Dreamweaver CC
編寫HTML頁面 6
1.4 網(wǎng)頁設(shè)計(jì)與開發(fā)的過程 7
1.4.1 明確網(wǎng)站定位 7
1.4.2 收集信息和素材 7
1.4.3 規(guī)劃欄目結(jié)構(gòu) 8
1.4.4 設(shè)計(jì)網(wǎng)頁圖像 9
1.4.5 制作頁面 9
1.4.6 實(shí)現(xiàn)后臺(tái)功能 10
1.4.7 網(wǎng)站的測試與發(fā)布 12
本章小結(jié) 12
練習(xí)題 13
第2章 HTML基本標(biāo)簽 14
2.1 HTML頁面主體標(biāo)簽 14
2.1.1 定義網(wǎng)頁背景色:bgcolor 14
2.1.2 設(shè)置背景圖片:background 15
2.1.3 設(shè)置文字顏色:text 16
2.1.4 設(shè)置鏈接文字屬性 17
2.1.5 設(shè)置頁面邊距 20
2.2 head部分標(biāo)簽 21
2.2.1 標(biāo)題標(biāo)簽:
第3章 用HTML設(shè)置文字、段落與列表
【學(xué)習(xí)目標(biāo)】
文字不僅是網(wǎng)頁信息傳達(dá)的一種常用方式,也是視覺傳達(dá)最直接的方式,運(yùn)用經(jīng)過精心處理的文字材料完全可以制作出效果很好的版面。輸入完文本內(nèi)容后就可以對(duì)其格式進(jìn)行調(diào)整,而設(shè)置文本樣式是實(shí)現(xiàn)快速編輯文檔的有效操作,讓文字看上去編排有序、整齊美觀。通過對(duì)本章的學(xué)習(xí),讀者可以掌握如何在網(wǎng)頁中合理地使用文字,如何根據(jù)需要選擇不同的文字效果。
本章主要內(nèi)容包括:
(1) 輸入文字;
(2) 設(shè)置文字的格式;
(3) 設(shè)置段落的格式;
(4) 水平線的標(biāo)簽;
(5) 創(chuàng)建列表;
(6) 使用marquee設(shè)置滾動(dòng)效果。
3.1 標(biāo) 題 字
標(biāo)題(heading)是通過
~
等標(biāo)簽進(jìn)行定義的。
定義最大的標(biāo)題,
定義最小的標(biāo)題。
3.1.1 標(biāo)題字標(biāo)簽:
在遵循網(wǎng)頁標(biāo)準(zhǔn)制作網(wǎng)頁的時(shí)候,為了使設(shè)計(jì)更具有語義化,我們經(jīng)常會(huì)在頁面中用到
~
的標(biāo)題標(biāo)簽。標(biāo)題標(biāo)簽是指HTML網(wǎng)頁中對(duì)文本標(biāo)題所進(jìn)行的著重強(qiáng)調(diào)的標(biāo)簽,標(biāo)簽
~
字號(hào)依次遞減顯示出重要性的遞減。
基本語法:
…
…
…
…
…
…
語法說明:
~
標(biāo)簽可定義標(biāo)題,
定義最大的標(biāo)題,
定義最小的標(biāo)題。
實(shí)例代碼:
1級(jí)標(biāo)題
2級(jí)標(biāo)題
3級(jí)標(biāo)題
4級(jí)標(biāo)題
5級(jí)標(biāo)題
6級(jí)標(biāo)題
加粗部分的代碼用于設(shè)置6種不同級(jí)別的標(biāo)題,在瀏覽器中瀏覽效果如圖3-1所示。
圖3-1 設(shè)置標(biāo)題大小
3.1.2 標(biāo)題字對(duì)齊屬性:align
默認(rèn)情況下,表格的標(biāo)題水平居中,我們可以通過align屬性設(shè)定標(biāo)題文字的水平對(duì)齊方式。
基本語法:
text-align:center
text-align:left
text-align:right
語法說明:
left為左對(duì)齊,center為居中,right為右對(duì)齊。
實(shí)例代碼:
……