Home
HTML 5新世代網頁建置－新手也可以快速設計出專業網站

Product Info Description Review

HTML 5新世代網頁建置－新手也可以快速設計出專業網站

Author Name: MattWest

USUAL: RM68.60

NOW: RM 68.60 (-0%)

MEMBER: RM 68.60 (-0%)

Quantity

Out Of Print/Sold Out

Rate this product

Product Info

ISBN/Ean:

9789572241776

Published Date:

2013/07/10

No. Of Pages:

384

Paper Size:

Publisher:

果禾

Date Added:

2015/03/09

Edition:

初版

Country Of Publication:

台灣

Language :

中文/繁體

Binding Type:

平裝

Printing Color:

彩色

Category:

All Departments > Chinese Books > 科学/电脑/摄影 > 科技电脑

Wrong Category?

View All

PRODUCT INFORMATION
TABLE OF CONTENT
PREFACE/READING GUIDANCE

Description

Font Size

Description

這不是一本在討論HTML5有哪些新功能的概念書！本書顧及到初學者與有心自學的讀者，利用完整案例，從網頁語法的基礎開始，讓您可以跟著逐步建立網頁，循序漸進的學習與增強HTML5的技巧。若您已有HTML基礎，也可以直接跳到所需章節進行學習。看完本書，讀者就可以打造出功能及完整度高的速食網站。或是您也可以發揮創意，改造成具個人風格的網站。除了基本的HTML5基礎知識之外，您還可以學到： ‧建立頁面模板與網頁 ‧建立良好的網站架構 ‧嵌入音訊與視訊 ‧善用microdata ‧透過HTML5與JavaScript強化網站 ‧資料存儲 ‧利用CSS維持樣式的一致性 ‧使用geolocation進行定位  完整範例導引，新手也能快速上手  14章徹底學會網頁建置，增強設計技巧！  可搭配網站影片，進行延伸學習

View All

PRODUCT INFORMATION

AUTHOR INFORMATION :

Matt West 身兼程式設計師與創業家，熱衷於探索科技能怎麼讓人們的生活更便利。在閒暇時間參與多項開放原始碼的專案後，便投入到網路開發的領域。目前居住於英國北安普頓。 Matt先前曾經營Developer City，一間小型網頁開發商。專門替全球顧客建立創新的網路應用程式。個人部落格為Coding Skyscrapers（http://cofingskyscrapers.com），你也能在推特上與他互動（Twitter帳號 @MattAntWest）。

TABLE OF CONTENT

PART 1 利用HTML5 產生網頁內容 CHAPTER 1 開始什麼是HTML 設定你的工具打造你的第一個HTML5 網頁建構網頁元件驗證你的網頁瀏覽器並不是一視同仁的總結 CHAPTER 2 建構網頁產出版面範本頁面用元資料（metadata）延伸元件內容利用CSS 加入版面設計總結 CHAPTER 3 產出範本頁面加入公司商標加入導引連結加入頁面內容全域屬性總結 CHAPTER 4 產出網頁在首頁中加入內容在「關於本店」頁面裡加入內容產生「分店位置」頁面產生「網站地圖」頁面產生「本店菜單」頁面產生「本店消息」頁面後記 PART 2 資料處理 CHAPTER 5 使用表單在「網路訂位」頁面加入

元件在「網路訂位」頁面裡加入和元件作為表單欄位利用

元件加入訊息輸入框 
在「網路訂位」頁面裡加入『資料送出』按鈕
在「網路訂位」頁面裡加入下拉式選單
處理檔案 
利用<fieldset> 和<legend> 將網路預約頁面的輸入欄位群組化
更新網站鍊結以及網站地圖 
總結

CHAPTER 6 利用HTML5 加強網路表單 
在「網路訂位」頁面裡加入HTML5 
HTML5 輸入格式
HTML5 輸入屬性 
資料列表（Datalists） 
總結

CHAPTER 7 利用HTML5 驗證表單資料 
在「網路訂位」頁面裡加入驗證流程
要求使用者輸入資料 
限制長度
限制範圍 
符合樣版格式 
基本正規表達式
總結

CHAPTER 8 使用微資料 
有關 Schema.org
使用微資料（microdata）
常用基模
總結

CHAPTER 9 確保無障礙
無障礙介面為何重要？
螢幕閱讀器 
讓網頁表單無障礙化
讓表格無障礙
讓圖像也變得無障礙化
讓鍊結無障礙化
測試無障礙程度
總結

PART 3 利用HTML5 & JavaScript來強化網頁內容
CHAPTER 10 JavaScript 介紹  
什麼是JavaScript? 
<script> 元件
基礎JavaScript
文件物件模型（DOM）
JavaScript 函式庫
總結

CHAPTER 11 加入影音資料 
轉換影音檔案
使用<video> 元件新增影片檔案到「關於本店」頁面
透過JavaScript 產生客製化的控制介面
讓影片無閱讀障礙
總結

CHAPTER 12 儲存資料 
為何要使用伺服端儲存？
LocalStorage
從「預約用餐」頁面上取得客戶資料
SessionStorage
在使用用戶端儲存時的額外考量
總結

PART 4 進階HTML5 技術
CHAPTE 13 使用GeoLocation  
取得使用者位置
計算兩組GPS 座標間的距離
找出最近的餐廳
總結

CHAPTER 14 使用Canvas 產生線上廣告
設定Canvas 功能
產生背景 
添加文字 
畫線 
繪製圓形
產生漸層
加上陰影
增加特價訊息 
儲存和回復狀態
加入影像 
總結

APPENDIX A 文字的其他HTML 標記語言
APPENDIX B HTML 元件索引
APPENDIX C 讀完本書之後
								</p>
							</div>							
						</div>
																		<div id="reading-guidence">						
							<div class="tab-title">
								<h3>PREFACE/READING GUIDANCE</h3>
							</div>
							<div class="tab-content">
								<p style="text-align:left;white-space: pre-line;">﹝往事只能追憶﹞現在大家早就習慣利用電腦進行資料搜尋，輸入幾個簡單的字彙就可以很快找到我們想要的資訊，在智慧型手機上也可以辦到這件事；說要再回想還沒有網際網路的年代，真的很難！

網際網路從早先的學術研究實驗室發跡已經很長一段時間，現在成為世界眾所皆知的資訊寶庫。也就是因為如此，它蘊育了全球數不清的億萬富翁以及許多了不起的革新創舉，同時也讓教育和科學有了潛移默化的改變。英國聯邦政府甚至還曾經提議要將上網權立法成為基本人權。

HTML5 在網際網路歷史上是卓越的下一步，也是未來趨勢。透過HTML5 可以讓開發者比以前更聰明、更快速而且建構安全性更高的網站，更棒的是它是個開放式平臺架構，任何人都可以架設自己的網站；同時也讓人驚訝的是整體網路產業的學習曲線降低了許多，呈現出來的效果也很棒！

我私心地認為網際網路產業的環境是世界上最好的，當然這是個人偏見；但我真的相信！我不知道其他產業裡會不會有跟網際網路一樣的氛圍，大家會相互幫助推動整個產業往創新的方向前進。我每天醒來時，都會覺得自己身處這個產業很有優越感。現在就是你加入我們的最佳時機！

誰應該讀這本書？
這本書適合任何想學習如何建構網站，以及想要了解HTML5 這個全新網路科技的人。這本書並不要求讀者需具有任何程式語言基礎，HTML、CSS、JavaScript 等任何方面的新手都適合閱讀本書。不過如果你會這些技術的話，那會是項優勢。總之，你可以學會如何使用HTML5 來架設想要的網站。

這不是一本讓你憑藉著以往HTML舊有標準學習的書，所有的內容都是得從根
本紮起，好確保你可以學到最新的技術。坊間有很多是針對有經驗的開發者的書籍，裡頭有深入解說HTML5技術是為何發展至此的。本書跟它們稍有不同，有些部份會需要解釋，但通常我不會把那些煩人的細節提出來浪費大家時間。

如果你已經有一些網頁設計的知識，但畢竟HTML5發生了很多變化，你還是可以找到對你有助益的內容。在前面的幾章裡解釋地會比較繁鎖，若你認為不需要，可以任意地跳過那些已經瞭解的章節。

你會學到什麼？
HTML5 其實包含了非常多的新技術，超出一本書可以囊括的內容，所以我會挑出讓人最感興趣的技術提供給大家作學習。

本書的第一篇利用HTML5 產生網頁內容，會帶你了解產生網頁的基礎功夫，從從介紹工具列開始，引導你利用HTML5 產出第一份網頁內容；你會學到HTML的基礎以及如何建構網頁，同樣地也會學到如何串聯眾多網頁來產生一個網站。這一章裡你也會學到網路標準的重要性、如何審閱程式碼，以及在不同瀏覽器下測試網站內容的方法。

在第二篇資料處理中，你一下子就可以了解如何使用網頁表格來蒐集拜訪網站的訪客資料，也可以學習如何利用各種不同輸入格式來撰寫網頁表格內容，同時間你也會學會在訪客輸入過程中加入驗證流程，確保所蒐集來的資料是有效的。接下來你會知道微資料（microdata）的應用性，並且知道如何網頁內容中進行微資料的標示，這個動作可以讓搜尋引擎或者其它程式可以更容易地找到網頁內容中重要的訊息。

易用性是在撰寫網頁時重要的一環。但不幸的是，並非每一位網頁訪客都可以在拜訪網站時都會給你正面評價。在本章你也可以學習到如何在架構網頁時可以讓使用者覺得方便閱讀，以及如何產出供視覺或其他障礙的人方便閱讀的網頁內容。

第三篇，利用HTML5 & JavaScript 來強化網頁內容。終於有一些讓人真正感到興奮的技術要介紹給大家。在這章裡可以知道JavaScript 將影音視頻如何嵌入網頁內容中並且產出客製化的控制介面。同時間你也會了解到 LocalStorage以及 SessionStorage這兩個API 的使用方式，並且透過這兩個API 將資料儲存到你的電腦上。

第四篇， 進階HTML5 技術， 搭配GeoLocation 以及Canvas 這兩個API，會帶領你到更進階的技術領域裡。前者是目前最讓人興奮的網頁科技， 透過GeoLocation API 的使用會讓你的網站產生更智慧化的使用經驗。

Canvas API 則可以讓在瀏覽器上繪製物件；你可以學習如何繪出各式形狀的圖
形以及路徑，並且知道該如何在你未來的專案裡使用這個元件。

書裡內容涵蓋很多技術；一旦讀完本書，你將可以輕易地利用這些新學的知識架構出一個真的可以上線使用的速食點餐網站。這會是個完全使用HTML5 建構而成的網站，網站上會播放促銷影片、還提供線上點餐，更有可以提供給訪客查詢到哪間分店離他們最近的介面！（是利用GeoLocation API 做出的成果）。

怎麼閱讀這本書？
並沒有規定大家該用什麼樣的順序來讀這本書，就我自己來講就很少是把電腦書是按頁次從頭翻到尾的，所以我不會建議你這麼作。針對自己感興趣的章節跳著閱讀會更有趣一些！你可以隨時翻閱之前的章節，來加強自己先前沒有完全了解透徹的部份。

就像先前說的，如果你完全沒有網頁設計的經驗，我會建議你先把第一章看熟，這章節裡有著往後開發技術的基礎，準備好了再繼續往下研讀。這本書架構非常清楚，你可以輕易地就找到你想要深入研讀的章節，在將來架設網站需要時可以隨時回頭參考。

對網站程式編寫有一定了解的讀者，會在前面的章節有關舊語法說明裡，發現許多HTML5 的新語法。所以請隨時保持清醒，你不會想要錯過任何一部份的。有些章節包涵了不少程式原始碼供你參考；如果不想要只是傻傻地把程式碼敲進電腦的話（ 就像菜鳥設計師）， 你可以到網站下載程式碼。把下載的壓縮檔解壓縮後，在相應子目錄裡你就會看到所有的程式範例都依章節擺放，方便你可以在閱讀過程中作練習使用。

讀完本書後， 你可以架構一個給速食店業者使用的線上網站，我們先稱它作
Joe's Pizza Co. 好了；當然你也可以利用學到的這些技術來讓這個網站具備更多功能。如果決定要跳過某章節不閱讀，還是可以到網站上下載那章節的範例程
式，直接對這個程式碼作修改即可。

準備好了嗎? 讓我們開始往下看吧！
</p>
							</div>							
						</div>
																	  
												<span class="anchor" id="mobreview"></span>									
						<div id="review">
							<div class="tab-title">
								<h3>REVIEW</h3>
							</div>
																						<div class="tab-content">
									
<div class="box-collateral box-reviews" id="customer-reviews">
            
    <p class="no-rating"><a href="#review-form" onclick="showreview()">Be the first to review this product</a></p>
    									<div class="form-add" id="review-show" style="display:none;">
    <h2>Write Your Own Review</h2>
        <form action="https://newstagmag.popular.com.my/default/review/product/post/id/57782/" method="post" id="review-form">
        <input name="form_key" type="hidden" value="ajiFlSzivZZsX3il" />
                <h3>You're reviewing:            <span>HTML 5新世代網頁建置－新手也可以快速設計出專業網站</span>
        </h3>

<div class="fieldset">
                            <h4>How do you rate this product? <em class="required">*</em></h4>
                <span id="input-message-box"></span>
                <table class="data-table review-summary-table ratings" id="product-review-table">
                    <col width="1" />
                    <col />
                    <col />
                    <col />
                    <col />
                    <col />
                    <thead>
                        <tr>
                            <th> </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">1</span>
                                    <span class="rating nobr" style="width:20%;">1 star</span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">2</span>
                                    <span class="rating nobr" style="width:40%;">2 star</span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">3</span>
                                    <span class="rating nobr" style="width:60%;">3 star</span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">4</span>
                                    <span class="rating nobr" style="width:80%;">4 star</span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">5</span>
                                    <span class="rating nobr" style="width:100%;">5 star</span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                                            <tr>
                            <th>Rating</th>
                                                    <td class="value"><label for="Rating_1"><input type="radio" name="ratings[1]" id="Rating_1" value="1" class="radio" /></label></td>
                                                    <td class="value"><label for="Rating_2"><input type="radio" name="ratings[1]" id="Rating_2" value="2" class="radio" /></label></td>
                                                    <td class="value"><label for="Rating_3"><input type="radio" name="ratings[1]" id="Rating_3" value="3" class="radio" /></label></td>
                                                    <td class="value"><label for="Rating_4"><input type="radio" name="ratings[1]" id="Rating_4" value="4" class="radio" /></label></td>
                                                    <td class="value"><label for="Rating_5"><input type="radio" name="ratings[1]" id="Rating_5" value="5" class="radio" /></label></td>
                                                </tr>
                                        </tbody>
                </table>
                <input type="hidden" name="validate_rating" class="validate-rating" value="" />
                <script type="text/javascript">decorateTable('product-review-table')</script>
            				 <ul class="form-list">
				 <li class="inline-label">
                        <label for="summary_field" class="required"><em>*</em>Summary of Your Review</label>
                        <div class="input-box">
                            <input type="text" name="title" id="summary_field" class="input-text required-entry" value="" />
                        </div>
                 </li>
                   
                 <li>
                        <label for="review_field" class="required"><em>*</em>Let us know your thoughts</label>
                        <div class="input-box">
                            <textarea name="detail" id="review_field" cols="5" rows="3" class="required-entry">

*What's your nickname?