HTML5與CSS3從入門到精通(第3版)

HTML5與CSS3從入門到精通(第3版) pdf epub mobi txt 電子書 下載 2025

[美] Terry,Felke-Morris 著
圖書標籤:
  • HTML5
  • CSS3
  • 前端開發
  • Web開發
  • 網頁設計
  • 入門教程
  • 技術
  • 編程
  • 計算機
  • 精通
想要找書就要到 新城書站
立刻按 ctrl+D收藏本頁
你會得到大驚喜!!
齣版社: 清華大學齣版社
ISBN:9787302473268
版次:3
商品編碼:12127863
包裝:平裝
開本:16開
齣版時間:2017-06-01
用紙:膠版紙
頁數:434
字數:610000
正文語種:中文

具體描述

産品特色

編輯推薦

  通俗易懂,結構清晰,由淺入深闡述網頁設計師必知必會的基本技能和概念:

   互聯網與萬維網基礎

   用HTML5創建網頁

   用CSS配置顔色和文本

   用CSS配置頁麵布局

   配置圖像和多媒體

   探究CSS3新增屬性

   運用網頁設計*佳實踐

   網頁的無障礙訪問和使用性設計

   為搜索引擎優化而設計

   選擇域名

   上綫,發布到網上

  本書第1版和第2版深受師生喜愛,第3版根據學習需要提前在第2章介紹瞭HTML5結構化元素,並在第5章重點介紹瞭網頁顔色的搭配。此外,第3版還增加瞭以下特色:

   更多動手實作練習

   案例學習有新增和修訂

   進一步深入介紹網頁布局設計

   進一步深入介紹移動網頁設計

   進一步深入介紹響應式網頁設計技術

   新增對CSS媒體查詢的介紹


內容簡介

  本書針對HTML5和CSS3的*新標準進行及時的更新和修訂,包含的主題有:Internet和Web概念;創建HTML5網頁;用CSS配置顔色和文本;用CSS配置頁麵布局;配置圖像和多媒體;探索新增的CSS3特性;應用網頁設計*佳實踐;設計可訪問和可用的網頁;搜索引擎優化設計;選擇域名;發布網站。

  本書適閤所有對網頁設計感興趣的讀者閱讀,是一本理想的入門參考。


作者簡介

  美國哈珀學院榮休教授。她熟悉各種平颱和軟件開發語言,有二十多年的信息技術教學經驗,講授的課程有網頁開發、計算機信息係統、教學技術和數學,以及信息管理和數據庫研究生課程。

  莫裏斯博士富有創新精神,先後榮獲2002—2003年度 Glenn A. Reich紀念奬(嘉奬她在教育技術方麵做齣的努力)和2006年度 Blackboard Greenhouse遠程教學模範奬(嘉奬她在課堂教學中率先使用互聯網),還作為2008年度遠程教育優秀教師入選美國教育技術委員會。

  莫裏斯博士的《 HTML5網頁設計入門經典》已經齣版發行到第8版,另一本以動手實作和案例學習著稱的入門經典《HTML5與CSS3網頁設計基礎》係列版本也備受廣大師生青睞。

  她一直保持旺盛的學習力,擁有教育學博士學位、信息係統碩士學位和遠程教學碩士學位,以及很多從業資格證書:CIW電子商務設計師、CIW設計師、CIW認證講師,WOW網絡管理員和Adobe認證Dreamweaver 8開發人員。


目錄

第1章 互聯網和萬維網基礎 1
1.1 互聯網和萬維網 2
互聯網 2
互聯網的誕生 2
互聯網的發展 2
萬維網的誕生 2
第一個圖形化瀏覽器 3
各種技術的聚閤 3
1.2 網頁標準和無障礙訪問 4
W3C推薦標準 4
網頁標準和無障礙訪問 4
無障礙訪問和法律 4
網頁通用設計 5
1.3 瀏覽器和服務器 6
網絡概述 6
客戶端/服務器模型 6
1.4 Internet協議 8
電子郵件協議 8
超文本傳輸協議 8
文件傳輸協議 8
傳輸控製協議/Internet協議 8
IP地址 9
1.5 統一資源標識符(URI)和域名 10
URI和URL 10
域名 10
頂級域名 11
通用頂級域名 11
國傢代碼頂級域名 12
域名係統DNS 13
1.6 網上的信息 14
網上的信息可靠嗎? 14
網上的信息是最新的嗎? 15
有沒有指嚮其他資源的外部鏈接? 15
1.7 HTML概述 16
什麼是HTML? 16
什麼是XML? 17
什麼是XHTML? 17
HTML的最新版本HTML5 17
1.8 網頁幕後揭秘 18
文檔類型定義(DTD) 18
網頁模闆 18
html元素 18
頁頭區域 19
主體區域 19
1.9 第一個網頁 20
動手實作1.1 20
新建文件夾 20
保存文件 21
測試網頁 22
復習和練習 23
復習題 23
動手練習 23
網上調研 24
聚焦網頁設計 24
第2章 HTML基礎 25
2.1 標題元素 26
動手實作2.1 26
無障礙訪問和標題 27
HTML5更多的標題選項 27
2.2 段落元素 28
動手實作2.2 28
對齊 29
2.3 換行和水平標尺 30
換行元素 30
動手實作2.3 30
水平標尺元素 31
動手實作2.4 31
2.4 塊引用元素 32
動手實作2.5 33
2.5 短語元素 34
2.6 有序列錶 36
type屬性,start屬性和
reversed屬性 36
動手實作2.6 37
2.7 無序列錶 38
動手實作2.7 39
2.8 描述列錶 40
動手實作2.8 41
2.9 特殊字符 42
動手實作2.9 42
2.10 HTML語法校驗 44
動手實作2.10 44
2.11 結構元素 46
div元素 46
header元素 46
nav元素 46
main元素 46
footer元素 46
動手實作2.11 47
2.12 練習使用結構元素 48
動手實作2.12 48
2.13 錨元素 50
動手實作2.13 50
鏈接目標 51
絕對鏈接 51
相對鏈接 51
block anchor 51
2.14 練習使用鏈接 52
站點地圖 52
動手實作2.14 52
2.15 電子郵件鏈接 56
動手實作2.15 57
復習和練習 58
復習題 58
動手練習 59
聚焦網頁設計 59
案例分析 59
Pacific Trails Resort案例分析 60
JavaJam Coffee House案例分析 62
第3章 網頁設計基礎 67
3.1 為目標受眾設計 68
瀏覽器 69
屏幕分辨率 69
3.2 網 站 組 織 70
分級式組織 70
綫性組織 71
隨機組織 71
3.3 視覺設計原則 72
重復:在整個設計中重復視覺元素 72
對比:添加視覺刺激和吸引注意力 73
近似:分組相關項目 73
對齊:對齊元素實現視覺上的統一 73
3.4 提供無障礙訪問 74
通用設計和增強無障礙訪問的
受益者 74
無障礙設計有助於提高在搜索
引擎中的排名 74
法律規定 75
無障礙設計的熱潮 75
3.5 文本的使用 76
文本設計的注意事項 76
3.6 調色闆 78
十六進製顔色值 78
網頁安全色 78
無障礙設計和顔色 79
3.7 針對目標受眾進行設計 80
麵嚮兒童 80
麵嚮年輕人 80
麵嚮所有人 81
麵嚮老年人 81
3.8 選擇顔色方案 83
以一張圖片為基礎的方案 83
色輪 84
變深、變淺和變灰 84
單色 85
相似色 85
互補色 86
分散互補色 86
三色 86
四色 87
實現顔色方案 87
3.9 使用圖片和多媒體 88
文件大小和圖片尺寸 88
抗鋸齒/鋸齒化文本的問題 88
隻使用必要的多媒體 89
提供替代文本 89
3.10 更多設計考慮 90
感覺到的加載時間 91
第一屏 91
適當留白 91
水平滾動 91
3.11 導航設計 92
網站要易於導航 92
導航欄 92
圖片導航 93
動態導航 93
站點地圖 93
站點搜索功能 94
3.12 綫框和頁麵布局 95
3.13 固定和流動布局 98
固定布局 98
流動布局 99
3.14 為移動網絡設計 100
三種方式 100
移動設備設計考慮 100
桌麵和移動網站的例子 101
移動設計小結 101
3.15 靈活響應的網頁設計 102
3.16 網頁設計最佳實踐 104
復習和練習 106
復習題 106
動手練習 107
聚焦網頁設計 107
網頁項目案例分析 108
項目裏程碑 108
第4章 CSS基礎 111
4.1 CSS概述 112
層疊樣式錶的優點 112
配置CSS的方法 113
層疊樣式錶的“層疊” 113
4.2 CSS選擇符和聲明 114
CSS語法基礎 114
background-color屬性 114
color屬性 114
配置背景色和文本色 115
4.3 CSS顔色值語法 116
4.4 配置內聯CSS 118
style屬性 118
動手實作4.1 118
4.5 配置嵌入CSS 120
style元素 120
動手實作4.2 121
4.6 配置外部CSS 123
link元素 123
動手實作4.3 123
4.7 CSS的class、ID和後代選擇符 125
class選擇符 125
id選擇符 125
後代選擇符 125
動手實作4.4 125
4.8 span元素 127
span元素 127
動手實作4.5 127
4.9 練習使用CSS 129
動手實作4.6 129
將嵌入CSS轉換為外部CSS 129
將網頁與外部CSS文件關聯 129
4.10 層疊 132
4.11 練習使用層疊 134
動手實作4.7 134
4.12 CSS語法校驗 136
動手實作4.8 136
復習和練習 138
復習題 138
動手練習 139
聚焦網頁設計 139
Pacific Trails Resort案例分析 140
JavaJam Coffee House案例分析 143
第5章 圖形和文本樣式基礎 147
5.1 圖片 148
GIF圖片 148
JPEG圖片 148
PNG圖片 149
新的WebP圖像格式 149
5.2 img元素 150
動手實作5.1 150
5.3 圖片鏈接 152
動手實作5.2 152

精彩書摘

  第2章HTML基礎

  第1章使用HTML5創建瞭第一個網頁,並在瀏覽器中進行瞭測試。用DTD指定瞭要使用的HTML版本,並使用瞭,,,<meta/>和<body>標記。本章繼續學習HTML,要用HTML元素(包括新的HTML5header,nav和footer元素)配置網頁結構和文本格式。要學習超鏈接的知識,它使萬維網成為信息互聯網絡。要配置錨元素,通過超鏈接使不同的網頁鏈接到一起。閱讀本章時,一定要把每個例子過一遍。網頁編碼是一種技術活兒,而每種技術都需要練習。</body>

  學習內容:

  使用標題、段落、div、列錶和塊引用來配置網頁主體

  配置特殊實體字符、換行符和水平標尺

  使用短語元素來配置文本

  校驗網頁語法

  使用新的HTML5header,nav和footer元素配置網頁

  使用錨元素鏈接網頁

  配置絕對鏈接、相對鏈接和電子郵件鏈接

  2.1標題元素

  標題(heading)元素從h1到h6共六級。標題元素包含的文本被瀏覽器渲染為“塊”(block)。標題上下自動添加空白(whitespace)。

的字號最大,

最小。取決於所用字體(第6章將進一步講解字號),

標記中的文本看起來可能比默認字號小一點。標題文本全都加粗。

  為什麼不將標題放到頁頭區域?

  經常有學生試圖將標題(heading)元素或者說h元素放到文檔的頁頭(head)而不是主體(body)區域,造成瀏覽器顯示的網頁看起來不理想。雖然head和heading聽起來差不多,但heading一定要放到body中。

  圖2.1顯示瞭6級標題的效果。

  圖2.1示例heading.html

  動手實作2.1

  為瞭創建如圖2.1所示的網頁,啓動記事本或其他文本編輯器。打開學生文件chapter1/template.html。修改title元素並在body區域添加標題。如以下加粗的代碼所示。

  

  

  

  HeadingExample

  

  

  

  

HeadingLevel1

  

HeadingLevel2

  

HeadingLevel3

  

HeadingLevel4

  

HeadingLevel5

  

HeadingLevel6

  

  

  將文件另存為heading2.html。打開網頁瀏覽器(如InternetExplorer或Firefox)測試網頁。它看起來應該和圖2.1顯示的頁麵相似。可將自己的文檔與學生文件chapter2/heading.html進行比較。

  無障礙訪問和標題

  標題使網頁更容易訪問和使用。一個好的編碼規範是使用標題創建網頁內容大綱。利用h1,h2和h3等元素來建立內容的層次結構。同時,將網頁內容包含在段落和列錶等塊顯示元素中。在圖2.2中,

標記在網頁頂部顯示網站名稱,

標記顯示網頁名稱,其他標題元素則用於標識更小的主題。

  有視力障礙的用戶可配置自己的屏幕朗讀器顯示網頁上的標題。製作網頁時利用標題對網頁進行組織將使所有用戶獲益,其中包括那些有視力障礙的。

  圖2.2利用標題創建網頁大綱

  HTML5更多的標題選項

  你或許聽說過HTML5新增的header元素。header提供瞭更多的標題配置選項,而且通常包含一個h1元素。本章稍後會討論header元素。

  2.2段落元素

  段落元素組織句子或文本。

之間的文本將顯示成段落,上下各顯示空行。圖2.3在第一個標題之後顯示瞭一個段落。

  圖2.3使用標題和段落的網頁

  動手實作2.2

  為瞭創建圖2.3的網頁,啓動記事本或其他文本編輯器,打開學生文件chapter2/heading.html。修改網頁標題(title),在

之間添加一個段落。

  

  

  

  ParagraphExample

  

  

  

  

HeadingLevel1

  

Thisisasampleparagraph.Headingtagscanhelptomakeyourpagesmoreaccessibleandusable.Itisgoodcodingpracticetouseheadingtagstooutlinethestructureofyourwebpagecontent.

  

  

HeadingLevel2

  

HeadingLevel3

  

HeadingLevel4

  

HeadingLevel5

  

HeadingLevel6

  

  

  將文檔另存為paragraph2.html。啓動瀏覽器測試網頁。它看起來應該和圖2.3相似。可將自己的文檔與學生文件chapter2/paragraph.html進行比較。注意瀏覽器窗口大小改變時段落文本將自動換行。

  對齊

  測試網頁時,會注意到標題和文本都是從左邊開始顯示的,這稱為左對齊,是網頁的默認對齊方式。在以前版本的HTML中,想讓段落或標題居中或右對齊可以使用align屬性。但這個屬性已在HTML5中廢棄。換言之,已經從W3CHTML5草案規範中刪除瞭。將在第6章、第7章和第8章學習如何使用CSS配置對齊。

  發布Web內容時避免使用長段落。人們喜歡快速掃視網頁,而非逐字閱讀。使用標題概括網頁內容,並使用短的段落(三五句話即可)和列錶(本章稍後學習)。

  2.3換行和水平標尺

  換行元素

  換行元素造成瀏覽器跳到下一行顯示下一個元素或文本。換行標記單獨使用——不成對使用,沒有開始和結束標記。我們說它是一種獨立或自包容標記。它在HTML5中稱為void元素,編碼成
。圖2.4的網頁在段落的第一句話之後使用瞭換行。

  圖2.4注意,第一句話之後發生瞭換行

  動手實作2.3

  為瞭創建圖2.4的網頁,請啓動文本編輯器並打開學生文件chapter2/paragraph.html。將標題修改成“LineBreakExample”。將光標移至段落第一句話“Thisisasampleparagraph.”之後。按Enter鍵,保存網頁並在瀏覽器中查看。注意,雖然源代碼中的“Thisisasampleparagraph.”是單獨占一行,但瀏覽器並不那樣顯示。要看到和源代碼一樣的換行效果,必須添加換行標記。編輯文件,在第一句話之後添加
標記,如下所示:

  

  

HeadingLevel1

  

Thisisasampleparagraph.
Headingtagscanhelptomakeyourpagesmoreaccessibleandusable.Itisgoodcodingpracticetouseheadingtagstooutlinethestructureofyourwebpagecontent.

  

  

HeadingLevel2

  

HeadingLevel3

  

HeadingLevel4

  

HeadingLevel5

  

HeadingLevel6

  

  將文件另存為linebreak2.html。啓動瀏覽器進行測試,結果如圖2.4所示。可將自己的作品與學生文件Chapter2/linebreak.html進行比較。

  水平標尺元素

  網頁設計師經常使用綫和邊框等視覺元素分隔或定義網頁的不同區域。水平標尺元素


在在網頁上配置一條水平綫。由於水平標尺元素不包含任何文本,所以編碼成void元素,不成對使用。水平標尺元素在HTML5中有新的語義——代錶內容主題分隔或變化。圖2.5展示瞭段落後添加水平標尺的一個網頁(學生文件chapter2/hr.html)。第6章將學習如何使用層疊樣式錶(CSS)為網頁元素配置綫和邊框。

  至於要不要在網頁上使用水平標尺,請三思而行,一般留空就足以分隔內容瞭。

  動手實作2.4

  為瞭創建圖2.5的網頁,請啓動文本編輯器並打開學生文件chapter2/linebreak.html。將標題修改成“HorizontalRuleExample”。將光標移至

標記後並按Enter鍵另起一行。在新行上輸入
,如下所示:

  

  

HeadingLevel1

  

Thisisasampleparagraph.
Headingtagscanhelptomakeyourpagesmoreaccessibleandusable.Itisgoodcodingpracticetouseheadingtagstooutlinethestructureofyourwebpagecontent.

  

  


  

HeadingLevel2

  

HeadingLevel3

  

HeadingLevel4

  

HeadingLevel5

  

HeadingLevel6

  

  將文件另存為hr2.html。啓動瀏覽器進行測試,結果如圖2.5所示。可將自己的作品與學生文件Chapter2/hr.html進行比較。

  2.4塊引用元素

  除瞭用段落和標題組織文本,有時還需要為網頁添加引文。

標記以特殊方式顯示引文塊——左右兩邊都縮進。引文塊包含在
標記之間。

  圖2.6展示瞭包含標題、段落和塊引用的示例網頁。

  圖2.6塊引用元素中的文本被縮進瞭

  使用

標記可以方便地縮進文本塊。你或許會産生疑問,
是適閤任意文本,還是僅適閤長引文。
標記在語義上正確的用法是縮進網頁中的大段引文塊。為什麼要強調語義?這是為將來的“語義網”準備的。《科學美國人》(ScientificAmerican)將“語義網”描述成“對計算機有意義的一種新形式的網頁內容,具有廣闊發展前景。”以符閤語義的、結構性的方式使用HTML是邁嚮“語義網”的第一步。所以如果僅僅是縮進文本,就不要使用
。本書以後會講解如何配置元素的邊距和填充。


前言/序言

  《HTML5與CSS3從入門到精通》適用於網頁設計或開發初級課程。每個主題都隻用兩頁篇幅進行講解,在指齣關鍵點的同時,一般還包含動手實作。全書覆蓋網頁設計師需要掌握的所有基礎知識,包括以下主題:

  互聯網和萬維網的概念

  用HTML5創建網頁

  用層疊樣式錶(CSS)配置文本、顔色和網頁布局

  對網頁上的圖片和多媒體進行配置

  探索新的CSS3屬性

  網頁設計最佳實踐

  對無障礙訪問、可用性和搜索引擎優化的考量

  取得域名和主機

  發布到網上

  本書中文版的學生文件可以從配套網站http://pan.baidu.com/s/1yd43W下載,其中包括動手實作的原始文件和解決方案,以及案例分析的原始文件。

  在本書第2版取得極大成功之後,第3版新增瞭以下特性:

  更豐富的動手實作

  全麵更新瞭範例代碼、案例分析和網絡資源

  根據HTML5元素和HTML5API進行瞭更新

  對響應性網頁設計技術和CSS媒體查詢進行瞭更全麵的介紹

  更新瞭HTML5和CSS參考資源

  本書特色

  立足當下,展望未來。本書采用獨特的教學方式,使學生在學習適閤當下的網頁設計技能的同時,掌握新的HTML5編碼技術,迎接未來的挑戰。

  精心挑選主題。本書既傳授“硬”技能,比如HTML5和層疊樣式錶(第1章和第2章,第4章~第11章),也傳授“軟”技能,比如網頁設計(第3章)和發布到網上(第12章)。打下良好基礎之後,學生作為網頁設計師追尋自己的職業夢想時,會更加得心應手。使用本書的學生和老師會發現,我們這個課程變得更有趣瞭。學生在創建網頁和網站時,可以一起討論、綜閤和運用軟硬技能。每個主題都用兩頁的篇幅來講解,除瞭快速提供需要掌握的知識點,還通過動手實作來立即鞏固所學到的知識。

  每個主題兩頁篇幅。每個主題都用簡潔的、兩頁篇幅的一個小節進行講述。許多小節還包含馬上就可以開始的動手實作,旨在幫助鞏固新學的技能或概念。這種精心設計對學業沉重的學生尤其有用,因為他們需要立即搞清楚關鍵的概念。

  動手實作。網頁開發是一門技能,隻有通過動手實作纔能更好地掌握。本書十分強調實際動手能力的培養,體現在每章的動手實作練習題、章末練習題以及通過真實的案例分析來完成網站的開發。

  網站案例分析。從第2章開始,案例分析將貫穿全書。它的作用是鞏固每章所學的技能。教師資源中心提供瞭案例的示例解決方案,網址是http://www.pearsonhighered.com/irc。

  聚焦網頁設計。大多數章都提供額外的活動來探索與本章有關的網頁設計主題。這些活動可以用於鞏固、擴展和增強課程主題。

  在我的網頁開發課堂中,學生經常會問到一些同樣的問題。書中列齣瞭這些問題,並用FAQ標誌注明。

  開發無障礙網頁的重要性日益增強,所以無障礙網頁設計技術將貫穿全書。這個特殊標記可以讓您更方便地找到這些信息。

  本書使用特殊的道德規範標記注明與網頁開發有關的道德規範話題。

  提供有用的背景資料,或者幫助提高生産力。

  這個特殊標記代錶可供深入探索的網絡資源,方便學生對當前主題進行深入學習。

  參考資料。附錄提供瞭豐富的參考資料,包括XHTML參考、HTML5參考、CSS參考、WCAG2.0快速參考以及對ARIALandmarkRoles的概述。

  視頻講解(VideoNote)旨在講解關鍵編程概念和技術,演示從設計到編碼來解決問題的過程。視頻講解使學生可以方便地自學自己感興趣的主題,支持選擇、播放、倒退、快進和暫停。每當看到視頻講解:……,都錶明當前主題有對應的視頻講解。視頻列錶可以從本書中文版配套網站獲取,網址是http://pan.baidu.com/s/1yd43W。注意,由於是英文視頻,所以為瞭方便索引,書中保留瞭這些視頻的英文名稱。

  補充材料

  學生資源。本書中文版讀者請訪問http://pan.baidu.com/s/1yd43W獲取動手實作的原始文件和解決方案以及案例分析的原始文件。

  教師資源。以下補充資源隻供符閤條件的教師使用,請發送郵件到coo@netease.com瞭解更多信息。

  章末練習題答案

  案例分析作業答案

  試題

  PPT演示文稿

  示範教學大綱

  作者網站。除瞭齣版社為本書提供的配套網站,作者另外建瞭一個網站,網址為http://www.webdevbasics.net。該網站擁有許多額外的資源,包括調色闆、Flash學習/復習遊戲、AdobeFlash教程、AdobeFireworks教程和AdobePhotoshop教程。還為每一章都單獨建一個網頁,提供這一章的示例、鏈接和更新信息。該網站由作者個人維護,不是齣版商贊助的。

  緻謝

  特彆感謝Addison-Wesley的同仁,包括MattGoldstein,KelseyLoanes,CaroleSnyder和CamilleTrentacoste。

  感謝我的傢人,尤其是我的“另一半”,感謝他的耐心、關愛、支持和鼓勵。最後還要特彆紀念我的父親,我們永遠想念他。



用戶評價

評分

評分

評分

評分

評分

評分

評分

評分

評分

相關圖書

本站所有內容均為互聯網搜尋引擎提供的公開搜索信息,本站不存儲任何數據與內容,任何內容與數據均與本站無關,如有需要請聯繫相關搜索引擎包括但不限於百度google,bing,sogou

© 2025 book.cndgn.com All Rights Reserved. 新城书站 版權所有