近年來隨著網(wǎng)絡(luò)信息技術(shù)的廣泛應(yīng)用,越來越多的個人、企業(yè)都紛紛建立自己的網(wǎng)站,利用網(wǎng)站來宣傳、推廣自己的產(chǎn)品和服務(wù),網(wǎng)頁技術(shù)已經(jīng)成為當(dāng)代青年學(xué)生的知識技能。目前大部分制作網(wǎng)頁的方式都是運用可視化的網(wǎng)頁編輯軟件進(jìn)行操作,這些軟件的功能強(qiáng)大,使用方便,但是對于高級網(wǎng)頁制作人員來講,仍需要了解HTML、CSS等網(wǎng)頁設(shè)計語言和技術(shù)的使用方法,這樣才能充分發(fā)揮自己的想象力,更加自由地設(shè)計符合要求的網(wǎng)頁,以實現(xiàn)網(wǎng)頁設(shè)計軟件不能實現(xiàn)的許多重要功能。
本書主要內(nèi)容
本書圍繞網(wǎng)頁設(shè)計師在網(wǎng)頁制作過程中的實際需要和應(yīng)該掌握的技術(shù),全面介紹了使用HTML、CSS進(jìn)行網(wǎng)頁設(shè)計和制作的內(nèi)容和技巧。本書不僅注重語法講解,還通過一個個鮮活、典型的案例來幫助讀者達(dá)到學(xué)以致用的目的。每個語法都有相應(yīng)的實例,大多數(shù)章的后面還配有綜合實例。
本書共16章,主要內(nèi)容包括HTML 5入門、用HTML設(shè)置文字與段落格式、用HTML創(chuàng)建精彩的圖像和多媒體頁面、用HTML創(chuàng)建超鏈接、使用HTML創(chuàng)建表格、創(chuàng)建交互式表單、用HTML 5繪制Canvas和SVG、CSS基礎(chǔ)知識、用CSS控制網(wǎng)頁文本和段落樣式、用CSS設(shè)計圖片和背景、用CSS制作實用的菜單和網(wǎng)站導(dǎo)航、CSS 3移動網(wǎng)頁開發(fā)、CSS盒子模型與定位、CSS Div布局方法、JavaScript基礎(chǔ)知識、設(shè)計制作企業(yè)網(wǎng)站等。
本書主要特色 知識系統(tǒng)、全面本書內(nèi)容完全從網(wǎng)頁創(chuàng)建的實際應(yīng)用出發(fā),將HTML、CSS、JavaScript元素進(jìn)行歸類,每個標(biāo)記的語法、屬性和參數(shù)都有完整詳細(xì)的說明,信息量大,知識結(jié)構(gòu)完善。
典型實例講解 本書配有大量案例,將基礎(chǔ)知識綜合貫穿全書,力求達(dá)到理論知識與實際操作完美結(jié)合的效果。
配合Dreamweaver進(jìn)行講解 本書以淺顯的語言和詳細(xì)的步驟講解,介紹了在可視化網(wǎng)頁軟件Dreamweaver中,如何運用HTML、CSS代碼來創(chuàng)建網(wǎng)頁,使網(wǎng)頁制作變得更加得心應(yīng)手。
? 代碼支持
本書提供案例的源代碼,便于讀者在實戰(zhàn)中掌握網(wǎng)頁設(shè)計與制作的每一項技能。
? 配圖豐富,效果直觀
對于每一個實例代碼,本書都配有相應(yīng)的效果圖,讀者無須自行編碼,也可以看到相應(yīng)的
運行結(jié)果或者顯示效果。在不便上機(jī)操作的情況下,可根據(jù)書中的實例和效果圖進(jìn)行分析和比較。
本書讀者對象
? 網(wǎng)頁設(shè)計與制作人員
? 網(wǎng)站建設(shè)與開發(fā)人員
? 大中專院校相關(guān)專業(yè)師生
? 網(wǎng)頁制作培訓(xùn)班學(xué)員
? 個人網(wǎng)站建設(shè)愛好者與自學(xué)人員
本書作者
本書主創(chuàng)人員為黔南民族師范學(xué)院副教授羅剛和原晉鵬,均為從事計算機(jī)教學(xué)工作的資深
教師,有著豐富的教學(xué)經(jīng)驗和網(wǎng)絡(luò)開發(fā)經(jīng)驗。由于時間所限,書中疏漏之處在所難免,懇請廣大讀者朋友批評指正。
配套素材及技術(shù)支持
本書的配套素材請用微信掃描下面的二維碼進(jìn)行下載,如果在下載過程中碰到問題,請聯(lián)
系陳老師,聯(lián)系郵箱:chenlch@tup.tsinghua.edu.cn。
如果有技術(shù)性問題,請掃描下面的二維碼,聯(lián)系相關(guān)技術(shù)人員進(jìn)行解決。
本書為2020 年貴州省教改項目雙創(chuàng)背景下地方高校Java 開發(fā)技術(shù)課程體系建設(shè)(項目號:2020230)、2018 年黔南民族師范學(xué)院教育質(zhì)量提升工程項目軟件開發(fā)技術(shù)核心課程教學(xué)團(tuán)隊(項目號:2018xjg0301)研究成果。
作者
2021.6
第1 章 HTML 5 入門 001
1.1 認(rèn)識HTML 5 001
1.2 HTML 5 的新特性 003
1.3 HTML 5 與HTML 4 的區(qū)別 004
1.3.1 HTML 5 的語法變化 … 004
1.3.2 HTML 5 中的標(biāo)記方法 005
1.3.3 HTML 5 語法中的3 個要點 005
1.4 新增的主體結(jié)構(gòu)元素 … 006
1.4.1 article 元素 … 006
1.4.2 section 元素 008
1.4.3 nav 元素 009
1.4.4 aside 元素 … 011
1.5 新增的非主體結(jié)構(gòu)元素 012
1.5.1 header 元素 012
1.5.2 hgroup 元素 013
1.5.3 footer 元素 … 014
1.5.4 address 元素 015
1.6 本章小結(jié) 016
第2 章 用HTML 設(shè)置文字與段落格式 … 017
2.1 HTML 頁面主體常用設(shè)置 … 017
2.1.1 定義網(wǎng)頁背景色:bgcolor 017
2.1.2 設(shè)置背景圖片:background 018
2.1.3 設(shè)置文字顏色:text … 019
2.1.4 設(shè)置鏈接文字屬性 … 020
2.1.5 設(shè)置頁面邊距 … 022
2.2 頁面頭部元素
和 … 023
2.3 頁面標(biāo)題元素
… 024
2.4 插入其他標(biāo)記 024
2.4.1 輸入空格符號 … 025
2.4.2 輸入特殊符號 … 025
2.5 設(shè)置文字的格式 … 026
2.5.1 字體:face … 026
2.5.2 字號:size … 027
2.5.3 文字顏色:color 028
2.5.4 粗體、斜體、下畫線:b、strong、i、em、cite、u … 029
2.5.5 上標(biāo)與下標(biāo):sup、sub 030
2.5.6 多種標(biāo)題樣式: ~ … 031
2.6 設(shè)置段落的排版與換行 032
2.6.1 為文字分段:p … 032
2.6.2 段落的對齊屬性:align … 033
2.6.3 不換行標(biāo)記:nobr 034
2.6.4 換行標(biāo)記:br 035
2.7 水平線標(biāo)記 … 035
2.7.1 插入水平線:hr … 036
2.7.2 水平線的寬度與高度:width、size 036
2.7.3 水平線的顏色:color 037
2.7.4 水平線的對齊方式:align 038
2.7.5 去掉水平線陰影:noshade 039
2.8 綜合實例設(shè)置頁面文本及段落 040
2.9 本章小結(jié) 042
第3 章 用HTML 創(chuàng)建精彩的圖像和多媒體頁面 … 043
3.1 網(wǎng)頁中常見的圖像格式 043
3.2 插入圖像并設(shè)置圖像屬性 … 044
3.2.1 圖像標(biāo)記:img … 044
3.2.2 圖像高度:height 045
3.2.3 圖像寬度:width 046
3.2.4 圖像的邊框:border … 046
3.2.5 圖像水平間距:hspace 047
3.2.6 圖像垂直間距:vspace 048
3.2.7 圖像相對于文字的對齊方式:
align … 049
3.2.8 圖像的替代文字:alt 050
3.3 音頻和視頻 … 051
3.3.1 使用embed 051
3.3.2 使用video … 052
3.4 綜合實例創(chuàng)建多媒體網(wǎng)頁 … 054
3.5 本章小結(jié) 055
第4 章 用HTML 創(chuàng)建超鏈接 … 056
4.1 超鏈接和路徑 056
4.1.1 超鏈接的概念 … 056
4.1.2 路徑URL … 056
4.1.3 HTTP 路徑 … 057
4.1.4 FTP 路徑 … 058
4.1.5 郵件路徑 … 059
4.2 鏈接元素 060
4.2.1 指定路徑屬性href 060
4.2.2 顯示鏈接目標(biāo)屬性target … 061
4.2.3 鏈接的熱鍵屬性accesskey 062
4.3 創(chuàng)建圖像的超鏈接 064
4.3.1 創(chuàng)建鏈接區(qū)域元素
第5 章 使用HTML 創(chuàng)建表格… 073
5.1 創(chuàng)建并設(shè)置表格屬性 … 073
5.1.1 表格的基本標(biāo)記:table、tr、td … 073
5.1.2 表格寬度和高度:width、height … 074
5.1.3 表格的標(biāo)題:caption 075
5.1.4 表格的表頭:th … 077
5.1.5 表格對齊方式:align 078
5.1.6 表格的邊框?qū)挾龋篵order … 080
5.1.7 表格的邊框顏色:bordercolor … 081
5.1.8 單元格間距:cellspacing … 082
5.1.9 單元格邊距:cellpadding … 083
5.1.10 表格的背景色:bgcolor … 084
5.1.11 表格的背景圖像:
background 085
5.2 表格的結(jié)構(gòu)標(biāo)記 … 086
5.2.1 設(shè)計表頭樣式:thead 086
5.2.2 設(shè)計表主體樣式:tbody … 088
5.2.3 設(shè)計表尾樣式:tfoot… 089
5.3 綜合實例使用表格排版網(wǎng)頁 091
5.4 本章小結(jié) 095
第6 章 創(chuàng)建交互式表單 096
6.1 表單元素