第一章 網(wǎng)頁自適應(yīng)
1.1自適應(yīng)的概念基于PHP技術(shù)的多客戶端自適應(yīng)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)
十幾年前，著名的外國Ethan Marcotte教授提出了自己對網(wǎng)頁方面的一個論點(diǎn)就是“自適應(yīng)網(wǎng)頁設(shè)計(jì)”（Responsive Web Design）這個專有名詞，可以在設(shè)計(jì)網(wǎng)頁的時(shí)候讓網(wǎng)頁在設(shè)備顯示的時(shí)候，自動識別屏幕的寬度、而且做出調(diào)整相應(yīng)網(wǎng)頁的設(shè)計(jì)。 他本人做出了一個非常有意思實(shí)驗(yàn)，就是把幾張主人公的頭像都進(jìn)而制作設(shè)計(jì)成網(wǎng)頁中，當(dāng)這些頭像圖片并排在一行時(shí)，說明屏幕的寬度大于1300像素。當(dāng)這些頭像圖片分成兩行時(shí)，說明屏幕的寬度在600像素到1300像素之間。當(dāng)導(dǎo)航欄有些偏移到網(wǎng)頁的頂部時(shí)，說明屏幕寬度在400像素到600像素之間。當(dāng)這些頭像圖片分成三行，說明屏幕的寬度在400像素以下。
1.2自適應(yīng)的發(fā)展方向與應(yīng)用
現(xiàn)在為什么需要自適應(yīng)網(wǎng)頁設(shè)計(jì)？因?yàn)?ldquo;科技時(shí)代已經(jīng)來臨，一步一步的向前發(fā)展，不斷的有各種各樣的新型設(shè)備（手機(jī)/平板電腦/手環(huán)）、平臺和瀏覽器都需要各種網(wǎng)站的網(wǎng)頁能夠兼容顯示。自適應(yīng)網(wǎng)頁設(shè)計(jì)決定了一種必然的設(shè)計(jì)趨勢，在現(xiàn)如今年所有的網(wǎng)站都將采用自適應(yīng)網(wǎng)頁設(shè)計(jì)。那么是誰在使用自適應(yīng)網(wǎng)頁設(shè)計(jì)呢？其實(shí)不管是用在演示、還是流行設(shè)計(jì)和頁面美化中。而今大量的網(wǎng)站已經(jīng)采用了自適應(yīng)網(wǎng)頁設(shè)計(jì)。何時(shí)需要采用自適應(yīng)網(wǎng)頁設(shè)計(jì)？當(dāng)你需要考慮以下事情時(shí)：在時(shí)間上，金錢上，不同瀏覽器的支持，性能，內(nèi)容的呈現(xiàn)，網(wǎng)站等等去跟移動應(yīng)用相對比時(shí)，自然而然就需要采用自適應(yīng)網(wǎng)頁的設(shè)計(jì)。
現(xiàn)在的互聯(lián)網(wǎng)已經(jīng)發(fā)展到了移動網(wǎng)絡(luò)5G的時(shí)代，我們接觸互聯(lián)網(wǎng)的方式已經(jīng)開始呈現(xiàn)出多元化方向發(fā)展，屏幕大小的展示有很大的不確定因素，假設(shè)現(xiàn)在的個人和企業(yè)等方面的網(wǎng)站要求每個顯示屏幕都去制作設(shè)計(jì)一個網(wǎng)站，很明顯就會會加大設(shè)計(jì)和管理網(wǎng)站的成本，同時(shí)還會涉及到未來的運(yùn)營方面的不便和耗費(fèi)大量的人力財(cái)力的成本來支撐其運(yùn)營。自適應(yīng)網(wǎng)站的設(shè)計(jì)的出現(xiàn)使的設(shè)計(jì)師在設(shè)計(jì)一個網(wǎng)站的時(shí)候，可以方便快捷的市網(wǎng)頁適應(yīng)不同的終端系統(tǒng)，應(yīng)用到不同的網(wǎng)絡(luò)載體上去，它具有非常好的的便捷性，同時(shí)也有利于減少企業(yè)設(shè)計(jì)開發(fā)網(wǎng)站的成本等。
老式的網(wǎng)站是固定的死網(wǎng)頁的寬度或者高度，在不同的客戶端所展現(xiàn)的頁面效果都是一樣的。所謂自適應(yīng)網(wǎng)站設(shè)計(jì)是指在網(wǎng)頁前端展示的內(nèi)容是活的，即筆記本電腦、臺式電腦、移動設(shè)備等不同的設(shè)備所看到的內(nèi)容是不一樣的，有了這種技術(shù)，網(wǎng)頁就可以適應(yīng)任何終端，在任何終端都能展示出最好的效果。對目前的自適應(yīng)網(wǎng)頁設(shè)計(jì)的發(fā)展趨勢來講，無論是放在市場的角度，還是建設(shè)網(wǎng)站的角度，自適應(yīng)網(wǎng)頁將會取代傳統(tǒng)建設(shè)網(wǎng)站的地位?；ヂ?lián)網(wǎng)日新月異，隨著更多的互聯(lián)網(wǎng)技術(shù)的誕生，會有更強(qiáng)大的技術(shù)出現(xiàn)。
1.3自適應(yīng)與響應(yīng)式區(qū)別
在我學(xué)習(xí)并設(shè)計(jì)制作自適應(yīng)網(wǎng)頁的同時(shí)，響應(yīng)式這個名詞會時(shí)不時(shí)出現(xiàn)在我的視線中那么自適應(yīng)與響應(yīng)式是不是一回事呢？沒有做過前端開發(fā)的人自然對這兩個名詞的概念是不清楚不明白的，隨著現(xiàn)在網(wǎng)站設(shè)計(jì)扁平化的潮流，越來越多的客戶想要把原有的網(wǎng)站做成自適應(yīng)或者響應(yīng)式呈現(xiàn)。但很多人又不清楚這兩者的區(qū)別，甚至很多人會認(rèn)為這兩者就是一個概念。其實(shí)響應(yīng)式布局大概的意思就是一個網(wǎng)頁放在不同適配分辨率下的呈現(xiàn)，這一概念在2010年5月由Ethan Marcotte提出的，簡單來說就是建立一個網(wǎng)頁，通過CSSMedia Queries，Content－Based Breakpoint（基于內(nèi)容的斷點(diǎn)）等技術(shù)來改變網(wǎng)頁的大小以適應(yīng)不同分辨率的屏幕。而自適應(yīng)布局大概的意思就是依據(jù)不同適配分辨率而選擇不同的頁面，為不同類別的設(shè)備建立不同的網(wǎng)頁，檢測到設(shè)備分辨率大小后調(diào)用相應(yīng)的網(wǎng)頁。目前AWD網(wǎng)頁主要針對以下幾種分辨率（320，480，760，960，1200，1600）。制作和設(shè)計(jì)網(wǎng)站的時(shí)候，我們需要根據(jù)需求來判斷什么樣的網(wǎng)站適合使用自適應(yīng)布局（固定斷點(diǎn)），什么樣的網(wǎng)站適合響應(yīng)式布局（流體網(wǎng)格）。
理論上來說，響應(yīng)式布局在任何情況下都比自適應(yīng)布局好一些，但在某些情況下自適應(yīng)布局更切合實(shí)際。自適應(yīng)網(wǎng)頁設(shè)計(jì)的優(yōu)勢就是適合固定斷點(diǎn)的網(wǎng)站。在網(wǎng)頁的實(shí)施上面代價(jià)成本更低，測試也比較容易。自適應(yīng)布局可以讓設(shè)計(jì)更加容易操作控制，因?yàn)樗恍枰紤]幾種狀態(tài)就行了。相反另一種對于響應(yīng)式網(wǎng)頁設(shè)計(jì)優(yōu)勢就是流體網(wǎng)格的網(wǎng)站。在網(wǎng)頁上表現(xiàn)出靈活性強(qiáng)，可適應(yīng)不同分辨率的設(shè)備，方便快捷的解決多設(shè)備顯示適應(yīng)的問題。下面客觀的來說自適應(yīng)和響應(yīng)式的區(qū)別：首先前者和后者解決的問題是不一樣的。自適應(yīng)本身是去解決怎樣才能在不同大小的移動設(shè)備或者其他設(shè)備上表現(xiàn)出相同的網(wǎng)頁，寬度一般在600像素以下和在1000像素以上的時(shí)候，前者說明是手機(jī)小屏幕后者則是pc端。相同的內(nèi)容，在大小不一的屏幕上，都表現(xiàn)出理想滿意的效果，不是一件易事。各式各樣的設(shè)計(jì)方式都能體現(xiàn)出自己的優(yōu)缺勢，所以每位設(shè)計(jì)師都會去選擇最適合自己的制作方式。
第二章 Bootstrap全局CSS樣式
2.1概覽
為了網(wǎng)頁自適應(yīng)的開發(fā)變得更好、更快、更強(qiáng)壯的體驗(yàn)，學(xué)習(xí)了Bootstrap后深入了解其中的底層結(jié)構(gòu)關(guān)鍵部分，在Bootstrap中用到的一些 HTML 元素與CSS 屬性都會是 HTML5 文檔類型。在編寫時(shí)可以參照以下代碼進(jìn)一步設(shè)置。第1行<!DOCTYPE html>，第2行<html>，第3行…，第4行</html>。
在原來Bootstrap 2所屬的框架中，它的重要組織部分對移動設(shè)備友好的樣式增加了一些。在現(xiàn)在的Bootstrap 3 版本又中重新設(shè)計(jì)編寫了整個框架，那是因?yàn)榘岩苿釉O(shè)備的優(yōu)先級提升了。這個版本在編寫時(shí)能直接進(jìn)入框架的中心，在操作上而且方便快捷的增加了對移動設(shè)備的樣式多樣性。在框架的每個角落中包括了設(shè)備的樣式，它不僅僅是增加額外的文件。設(shè)計(jì)者在移動設(shè)備上進(jìn)行繪制和觸屏縮放時(shí)，需要在<head>之中間加入viewport元數(shù)據(jù)標(biāo)簽，編寫代碼如下：<meta name=”viewport“ content=”width=device-width, initial-scale=1“>。瀏覽器在設(shè)備上使用時(shí)，使用視口（viewport）去設(shè)置 meta 屬性 user-scalable=no，用來對其禁止縮放，禁止縮放后，使用者只可以滾動屏幕。以上方法不適合全部的網(wǎng)站應(yīng)用，還是需要看設(shè)計(jì)者的情況而定！此代碼：<meta name=”viewport“ content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no“>可以參考。
Bootstrap鏈接樣式、排版設(shè)置了基本的全局樣式。前者是為所有的鏈接設(shè)置了基本顏色 @link-color ，正是當(dāng)鏈接處于：hover狀態(tài)時(shí)才可以添加下劃線。后者是為body元素設(shè)置background-color: #fff;設(shè)計(jì)師會用@line-height-base、@font-size-base和@font-family-base當(dāng)變量作為排版的基本要求參數(shù)。Bootstrap 會為每一個頁面的內(nèi)容和柵格系統(tǒng)包裹。container 容器。。container 是用于固定寬度和支持響應(yīng)式布局的容器。代碼如下：第1行<div>，第2行…，第3行</div>。其中。container-fluid 類用在100%寬度，占所有視口的容器。
2.2柵格系統(tǒng)
Bootstrap 是已響應(yīng)式和供移動設(shè)備的流式柵格系統(tǒng)，它共有12列不超過12列，它會跟隨視口或屏幕大小而增加。這里包含了方便使用的預(yù)定義類和強(qiáng)大的mixin來編寫更具語義的布局。柵格系統(tǒng)的原理是通過一系列的行（row）與列（column）的相結(jié)合去搭建頁面的布局，本身的設(shè)計(jì)內(nèi)容就可以放入這些搭建好的布局中。Bootstrap 柵格系統(tǒng)中的”row“一定被 .container或 .container-fluid包含，簡單方便的賦予合適的排列和內(nèi)補(bǔ)。在以”行（row）“在水平方向組建一組”列（column）“。”列“作為”行“的直接子元素時(shí)，搭建設(shè)計(jì)的內(nèi)容需要放在”列“的里面。在 .row 和 .col-xs-4 這種預(yù)定義的類，也能用來創(chuàng)建柵格布局。Bootstrap 源代碼中定義的 mixin 也能用來創(chuàng)建布局，在使用”列“去設(shè)置 padding 屬性，從而搭建列與列之間的間隔。通過 .row 元素定為負(fù)值 margin 用來抵消掉 .container 元素設(shè)置的 padding，它的功能就是側(cè)面的把”行“所包含的”列“消除掉了padding。柵格系統(tǒng)大多用在等于分界點(diǎn)大小或者大于屏幕所在寬度的設(shè)備上，對小屏幕設(shè)備覆蓋柵格類。在任何元素上的所有 .col-md-* 柵格類都用在與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備上，對小屏幕設(shè)備覆蓋柵格類。在元素上所有的。col-lg-*不存在的應(yīng)用都會影響大尺寸屏幕的移動設(shè)備或這其他設(shè)備。
2.3排版
在HTML文檔中有六個級別的標(biāo)題，分別是<h1>到<h6>元素來定義。其中<h1>表示最高級別的標(biāo)題，然后依次類減，<h6>級別最低。<h1>是一級標(biāo)題，表示的是最大的字號，<h6>是6級標(biāo)題，表示的是最小的字號。在html文檔中的標(biāo)題里可以包含 <small> 標(biāo)簽，可賦予 .small 類的元素，可用來標(biāo)記副標(biāo)題。<h1>h1. Bootstrap heading <small> Secondary text</small></h1>。整個文檔頁面的主體中Bootstrap 把全局 font-size 設(shè)置為14px，line-height 設(shè)置為 1.4左右。以上屬性可直接賦予 <body> 元素和全部段落元素。其次<p>（段落）元素設(shè)置了等于 1/2 行高（即 10px）的底部外邊距。中心內(nèi)容可以通過 .lead 類的添加讓段落能明顯突出，要刪除的文本使用 <del> 標(biāo)簽。沒用的文本使用 <s> 標(biāo)簽。另外插入的文本使用 <ins> 標(biāo)簽。帶下劃線的文本使用 <u> 標(biāo)簽。
通過使用對齊類文本，可以將文字重新對齊，非常的簡單方便。
<p>Left aligned text.</p>
<p>Center aligned text.</p>
<p>Right aligned text.</p>
<p>Justified text.</p>
<p>No wrap text.</p>
可以改變文本的大小寫的代碼如下：
<p>Lowercased text.</p>
<p>Uppercased text.</p>
<p>Capitalized text.</p>
通過最接近日常使用的格式呈現(xiàn)讓聯(lián)系信息如下。在每行結(jié)尾添加 <br> 可以保留需要的樣式。
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title=”Phone“>P:</abbr> （123） 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href=”mailto:#“>first.last@example.com</a>
</address>
排列順序無關(guān)緊要的一列元素
<ul>
<li>…</li>
</ul>
順序至關(guān)重要的一組元素
<ol>
<li>…</li>
</ol>
2.4響應(yīng)式工具
為了方便更高性能的開展在移動設(shè)備網(wǎng)頁頁面開發(fā)工作上，可以用媒體查詢功能，讓這些工具類的功能準(zhǔn)確無誤的針對不同設(shè)備去隱藏或者展示網(wǎng)頁頁面的內(nèi)容。為了充分考慮，其中包含對打印機(jī)顯示或隱藏內(nèi)容的工具類。擁有了這些針對性的使用這類工具類，可以避免因?yàn)橥粋€網(wǎng)站創(chuàng)建完全不同的版本。反之，通過使用這些工具類可以在不同設(shè)備上提供不同的展現(xiàn)形式。
可用的類可以通過單獨(dú)或聯(lián)合使用以下列出的類，可以針對不同屏幕尺寸隱藏或顯示頁面內(nèi)容。
打印類和常規(guī)的響應(yīng)式類一樣，使用下面的類可以針對打印機(jī)隱藏或顯示某些內(nèi)容。
測試用例可以在移動設(shè)備或者其他設(shè)備中調(diào)試瀏覽器的大小，當(dāng)打開頁面，在大屏幕，中等屏幕和大屏幕，小屏幕和大屏幕，超小屏幕和大屏幕上瀏覽器視口（viewport）中是可見的。在大屏幕上，medium和large，小屏幕和大屏幕，超小屏幕和大屏幕瀏覽器視口（viewport）中是隱藏的，如圖2-2所示。
第三章 PHP和HTML5
3.1 PHP基本概念
HypertextPreprocessor縮寫為PHP，php是一中內(nèi)嵌在HTML的腳本語言。PHP本身不一樣的語法包含了c,java和perl及PHP式的最新語法。它的用處就是讓網(wǎng)頁設(shè)計(jì)開發(fā)程序員能比現(xiàn)在更加快的寫出網(wǎng)頁。模式pattern，是用來解決某一種或者某一類問題的方法?？蚣躥ramework，它是某些應(yīng)用的半成品，也可以說是一組組件，讓設(shè)計(jì)師自主的去選擇自己想完成的系統(tǒng)。指的是使用別人搭好的舞臺進(jìn)行表演?？蚣芑径际浅尚偷?，它在不斷的升級。PHP模板來自Perl的Template，模板這種東西能體現(xiàn)出非常方便快捷的把網(wǎng)站的結(jié)構(gòu)改善，能很快的改變使用者的整個站點(diǎn)的外形；抽象程序的設(shè)計(jì)，無垃圾HTML代碼； 設(shè)計(jì)編寫人員不用關(guān)心全部的”模糊“代碼；，它運(yùn)行的速度非常的快。
有一種保存到外部的一個引用資源，它是通過專門的函數(shù)用來建立的一種特殊變量。類是包含類本身的方法、名稱、屬性與事件，同樣也是包含有關(guān)對象動作方式的信息和某個對象的定義，其實(shí)它的本身不是對象，因?yàn)樗淮嬖趦?nèi)存中。如果設(shè)計(jì)師引用類的代碼運(yùn)行的時(shí)候，類的一個新的例子，就是對象，在內(nèi)存中創(chuàng)建了，只有一個類，但能從類在內(nèi)存中知道創(chuàng)建的多少，得知有多少個相同類型的對象。函數(shù)作為一種潮流程序，它為設(shè)計(jì)人員提供了便捷，在進(jìn)行一個復(fù)雜的程序設(shè)計(jì)時(shí)，它可以根據(jù)網(wǎng)頁制作所需要完成的功能，把程序分為某些相對獨(dú)立的部分，每一個部分編寫一個函數(shù)，從而使各部分充分獨(dú)立，任務(wù)簡單，程序明了，能讀懂還方便維護(hù)。有一種對象方法，它是把面向?qū)ο蟮乃枷霊?yīng)用于軟件開發(fā)的過程的一種對象方法。指導(dǎo)開發(fā)活動系統(tǒng)的方法是搭建在”對象“概念基礎(chǔ)上的方法學(xué)。
3.2 HTML5基本概念
Hyper Text Markup Language是HTML的英文名字全稱，作為一種網(wǎng)頁超文本標(biāo)記語言，html是不能直接顯示在瀏覽器中。標(biāo)記語言通過瀏覽器的解釋和編譯，就可以正確地反映出HTML標(biāo)記語言的內(nèi)容。它在廣域網(wǎng)上的領(lǐng)域是空前的，它就是網(wǎng)頁內(nèi)容和外觀的標(biāo)準(zhǔn)語言。HTML是網(wǎng)頁內(nèi)容的一個載體，它用在網(wǎng)頁和手機(jī)端的編程語言上較多。
<head>表示內(nèi)容的最開始信息，一般包括標(biāo)題和主題信息。head標(biāo)簽用在定義文檔內(nèi)容的頂部，它是所有頂部元素的容器。頂部元素有<title>、<script>、<style>、<link>、<meta>等標(biāo)簽，在head部分的內(nèi)容是不能直接在網(wǎng)頁中顯示出來的。<title>作為網(wǎng)頁標(biāo)題內(nèi)容，每個網(wǎng)頁都是會有一個獨(dú)一無二的title，<meta>是定義頁面信息的說明或者關(guān)鍵字等。<meta>標(biāo)簽沒有結(jié)束標(biāo)記，因?yàn)樵诩饫ㄌ杻?nèi)就是meta內(nèi)容。在html頁面中有很多meta元素。meta元素的屬性中有name和http-equiv兩者，其中name用于描述網(wǎng)頁多一些，它便于搜索引擎查找、分類。在<meta name=”keywords“ content=”輸入具體的關(guān)鍵字“>這段代碼中，name為屬性名稱，keywords是屬性，也是設(shè)置網(wǎng)頁的關(guān)鍵字屬性，在content中則定義具體的關(guān)鍵字。在<meta name=”description“ content=”設(shè)置頁面說明“>這段代碼中，name為屬性名稱，description是屬性，它將元信息屬性設(shè)置為頁面說明，在content中定義具體的描述語言。定義編輯工具：<meta name=”generator“ content=”編輯設(shè)計(jì)的名稱“>。設(shè)置作者信息：<meta name=”author“ content=”設(shè)計(jì)者的姓名“>。設(shè)置網(wǎng)頁的語言和文字：<meta http-equiv=”content-type“ content=”text/html“; charset=”字符集類型“>。http-equiv用于傳送http通信協(xié)議的標(biāo)頭，而在content中才是具體的屬性值。charset用于設(shè)置網(wǎng)頁的內(nèi)碼語系，也就是字符集的類型。
<body>表示文檔的主體區(qū)域，網(wǎng)頁的主體部分包括要在瀏覽器顯示處理的所有信息和在網(wǎng)頁的主體標(biāo)記中有很多的屬性設(shè)置，還有網(wǎng)頁的背景設(shè)置、文字屬性設(shè)置和鏈接設(shè)置等。在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽。設(shè)置網(wǎng)頁背景色：<body blue=”背景顏色“> 。設(shè)置網(wǎng)頁背景圖片：<body background=”圖片的地址“> 。background屬性可以將圖片設(shè)置為背景，還可以設(shè)置背景圖片的平鋪方式、顯示方式等。圖片的地址可以是相對地址，也可以是絕對地址。設(shè)置文字的顏色：<body text=”文字的顏色“>。在沒有對文字的顏色進(jìn)行單獨(dú)定義時(shí)，這一屬性可以對頁面中所有的文字起作用。text值可以是一個已命名的顏色，也可以是一個十六進(jìn)制的顏色值，如”blue“或者”#FF99FF“。設(shè)置修改鏈接文字的顏色：<body link=”顏色“>。在默認(rèn)情況下，瀏覽器以藍(lán)色作為超鏈接文字的顏色。link屬性的設(shè)置與前面幾個設(shè)置顏色的參數(shù)類似，都是與body標(biāo)簽放置在一起，表明它對網(wǎng)頁中所有未單獨(dú)設(shè)置的元素起作用。<body link=”顏色“ alink=”顏色“>使用alink可以設(shè)置正在訪問的文字顏色，單擊鏈接的文字時(shí)，文字已經(jīng)改變了顏色。<body link=”顏色“ alink=”顏色“ vlink=”顏色“>使用vlink可以設(shè)置訪問后的鏈接文字的顏色，單擊鏈接的文字后，文字變成vlink設(shè)置的顏色值。設(shè)置邊距值：<body topmargin=”100“ leftmargin=”100“>。margin用于設(shè)置邊距值，默認(rèn)情況下，邊距的值以像素為單位。topmargin和leftmargin分別設(shè)置上邊距和左邊距。
3.3 PHP和HTML5區(qū)別
PHP以服務(wù)端開發(fā)為主，H5是前端開發(fā)。服務(wù)端主要與服務(wù)器（CPU、內(nèi)存、磁盤、網(wǎng)絡(luò)）和數(shù)據(jù)庫打交道，性能是重點(diǎn)。服務(wù)端一般不直接與用戶打交道，而是與更接近用戶的應(yīng)用及前端交換數(shù)據(jù)。前端主要與人打交道，重點(diǎn)是開發(fā)出用戶體驗(yàn)良好的應(yīng)用和網(wǎng)站。打個比方，如果說服務(wù)端開發(fā)像農(nóng)業(yè)和重工業(yè)，那前端就是服務(wù)業(yè)和輕工業(yè)。再比如服務(wù)端是農(nóng)民種糧食蔬菜，關(guān)注的是水肥、陽光、溫度，最終是追求每季產(chǎn)量高低。前端是廚師、面點(diǎn)師，關(guān)注的是味道、色彩、外觀，最終是追求好吃又好看。服務(wù)端隱藏在背后不為人知，前端應(yīng)用直接服務(wù)于人，人人皆知。服務(wù)端與前端有重疊，服務(wù)端開發(fā)不只是PHP一家，JavaWeb、。NET、Node.js等也占有一定比例。服務(wù)端開發(fā)比前端開發(fā)更有技術(shù)水平，最終的薪資水平也遠(yuǎn)遠(yuǎn)高于前端開發(fā)。
這里，順便要科普一下，行內(nèi)所說的H5不只是HTML、CSS，而是以JS為主的前端和Web App開發(fā)最新技術(shù)的統(tǒng)稱。一個很鮮活的例子，以qq空間為例（大家都很熟悉），大家想要發(fā)表篇日志，首先要在后臺頁面上進(jìn)行圖文編輯，而PHP就是這份日志的收納箱，它里邊有很多編寫好的代碼（這就是PHP開發(fā)師做的工作），而當(dāng)我們點(diǎn)擊發(fā)布時(shí)，這份代碼就在拼命運(yùn)行，最終剛寫好的日志就呈現(xiàn)在首頁里了，也就是H5編輯好的頁面上。H5只會做好qq空間的頁面框架，比如日志、圖片、動態(tài)等固定的大框架，而PHP則負(fù)責(zé)你需要更改的數(shù)據(jù)，如上傳圖片，更新日志、動態(tài)等這些動作
第四章 網(wǎng)頁自適應(yīng)布局與實(shí)現(xiàn)
4.1 自適應(yīng)輪番圖的原理和實(shí)現(xiàn)
當(dāng)屏幕寬度大于等于768px時(shí)，圖片使用大圖，輪播圖里的div高度固定，寬度為窗口的寬度（隨窗口寬度的變化而變化），當(dāng)屏幕寬度小于768px（手機(jī)）時(shí)，將圖片換為小圖，并在div里生成img標(biāo)簽，img的寬高隨窗口變化而變化，包裹img的div也隨之變化，html代碼如下：
<section id=”main_ad“ class=”carousel slide“ data-ride=”carousel“>
<!-- 活動指示器 -->
<ol>
<li data-target=”#main_ad“ data-slide-to=”0“></li>
<li data-target=”#main_ad“ data-slide-to=”1“></li>
<li data-target=”#main_ad“ data-slide-to=”2“></li>
<li data-target=”#main_ad“ data-slide-to=”3“></li>
</ol>
<!-- 輪播項(xiàng) -->
<div role=”listbox“>
<div class=”item active“ data-image-lg=”img/slide_01_2000x410.jpg“ data-image-xs=”img/slide_01_640x340.jpg“></div>
<div data-image-lg=”img/slide_02_2000x410.jpg“ data-image-xs=”img/slide_02_640x340.jpg“></div>
<div data-image-lg=”img/slide_03_2000x410.jpg“ data-image-xs=”img/slide_03_640x340.jpg“></div>
<div data-image-lg=”img/slide_04_2000x410.jpg“ data-image-xs=”img/slide_04_640x340.jpg“></div>
</div>
<!-- 控制按鈕 -->
<a class=”left carousel-control“ href=”#main_ad“ role=”button“ data-slide=”prev“>
<span class=”glyphicon glyphicon-chevron-left“ aria-hidden=”true“></span>
<span>Previous</span>
</a>
<a class=”right carousel-control“ href=”#main_ad“ role=”button“ data-slide=”next“>
<span class=”glyphicon glyphicon-chevron-right“ aria-hidden=”true“></span>
<span>Next</span>
</a>
</section> CSS代碼如下：
#main_ad .carousel-inner .item{
background-size: cover; /*讓圖片全部顯示出來div*/
background-position: center,center; /*讓圖片在div里水平垂直居中*/
background-repeat: no-repeat;
height: 410px;
}
@media （max-width:768px） {
#main_ad .carousel-inner .item {
height: auto;
}
#main_ad .carousel-inner .item img{
width: 100%;
}}
js代碼如下：
$（function（） {
/**
* 根據(jù)屏幕寬度的變化決定輪播圖片應(yīng)該展示什么 5 */
function resize（） {
// 獲取屏幕寬度
var windowWidth = $（window）。width（）；
// 判斷屏幕是大還是小
var isSmallScreen = windowWidth < 768;
// 根據(jù)大小為界面上的每一張輪播圖設(shè)置背景
$（‘#main_ad > .carousel-inner > .item’）。each（function（i, item） {
var $item = $（item）；
// var imgSrc = $item.data（isSmallScreen ? 'image-xs' : 'image-lg‘）；
var imgSrc =
isSmallScreen ? $item.data（'image-xs’） : $item.data（‘image-lg’）；
// 設(shè)置背景圖片
$item.css（‘backgroundImage', 'url（”' + imgSrc + ’“）‘）；
//
// 因?yàn)槲覀冃枰D時(shí) 尺寸等比例變化，所以小圖時(shí)我們使用img方式
if （isSmallScreen） {
$item.html（'<img src=”' + imgSrc + ’“ alt=”“ />‘）；
} else {
$item.empty（）；
}
}）；
}
// // 讓window對象立即觸發(fā)一下resize，初始化div的背景圖
// $（window）。trigger（'resize’）；
$（window）。on（‘resize', resize）。trigger（'resize’）；
}）；
4.2 柵格式布局實(shí)現(xiàn)
Container：顧名思義container是柵格系統(tǒng)最外層的class，直接被container包裹的只能是row這個class。需要注意的是container自帶左右各15px padding值，這樣container與瀏覽器窗口之間就存在一定距離，也可以給一個div設(shè)置兩個col- class，用來適應(yīng)不同的屏幕。值得一提的是，row的前后是負(fù)的15px margin值，用處是row的 div 被約束在 container內(nèi)邊界區(qū)域重疊不超過它。一定不能在container外用row，因?yàn)檫@樣是無效的。col在不同屏幕下行為不同，列（col）現(xiàn)在有15px的padding了，如下圖中黃顏色部分。Container的正padding值造成了15px的留空，row用負(fù)margin值反的延伸回去，所以現(xiàn)在col的padding值與container的padding重疊，永遠(yuǎn)不要在row外使用col,在row外使用col是無效的。row：row指container的一行，每行理想狀態(tài)包含12個col，這些col在不同屏幕大小時(shí)行為不同。
4.3 移動端響應(yīng)式布局
REM的定義：rem是相對于根元素<html>來設(shè)置字體大小的，簡單來說就是只需要在根元素確定一個值，這個值作為參考，然后在根元素中設(shè)置什么大小的字體，這完全可以根據(jù)使用者的需求。像素PX是一種單位，但不容易編寫響應(yīng)式布局，EM：以父節(jié)點(diǎn)font-size大小為參考點(diǎn)，標(biāo)準(zhǔn)不統(tǒng)一。在使用REM中html里默認(rèn)的 font-size:16px; 也就是 1rem = 16px，以設(shè)計(jì)寬度為750px為例，那么定義 font-size:50px; 那么 1rem = 50px，比例為：750/50=15。屏幕寬度為750px，則html設(shè)置的font-size為：750/15 = 50，設(shè)計(jì)稿中dom（20px）的尺寸為：20px/50=0.4rem，1rem = 50px，屏幕寬度為320px，則html設(shè)置的font-size為：320/15 = 21.33，設(shè)計(jì)稿中dom（20px）的尺寸依然為：20px/50=0.4rem，1rem = 320/750*50px。CSS固定樣式：以下代碼包含了移動端設(shè)備絕大多數(shù)屏幕尺寸。
html{font-size:50px;}
body{font-size:24px;}
@media screen and （min-width:320px）{
html{font-size:21.333333333333332px;}
body{font-size:12px;}
}
@media screen and （min-width:360px）{
html{font-size:24px;}
body{font-size:12px;}
}
@media screen and （min-width:375px）{
html{font-size:25px;}
body{font-size:12px;}
}
@media screen and （min-width:384px）{
html{font-size:25.6px;}
body{font-size:14px;}
}
@media screen and （min-width:400px）{
html{font-size:26.666666666666668px;}
body{font-size:14px;}
}
@media screen and （min-width:414px）{
html{font-size:27.6px;}
body{font-size:14px;}
}
@media screen and （min-width:424px）{
html{font-size:28.266666666666667px;}
body{font-size:14px;}
}
@media screen and （min-width:480px）{
html{font-size:32px;}
body{font-size:15.36px;}
}
@media screen and （min-width:540px）{
html{font-size:36px;}
body{font-size:17.28px;}
}
@media screen and （min-width:720px）{
html{font-size:48px;}
body{font-size:23.04px;}
}
@media screen and （min-width:750px）{
html{font-size:50px;}
body{font-size:24px;}
}
第五章 研究方向和展望
5.1 移動互聯(lián)APP開發(fā)
PHP不適合開發(fā)客戶端，因?yàn)镻HP是服務(wù)端腳本語言，負(fù)責(zé) B/S或C/S 架構(gòu)的S部分，即：Server端的開發(fā)。API（Application Programming Interface，應(yīng)用程序接口）架構(gòu)，已經(jīng)成為目前互聯(lián)網(wǎng)產(chǎn)品開發(fā)中常見的軟件架構(gòu)模式，并且誕生很多專門API服務(wù)的公司，如：聚合數(shù)據(jù)。一般的PHP框架都可以用來做app后臺服務(wù)器。因?yàn)樵砩峡蛻舳藦哪氵@邊拿的都是字符串?dāng)?shù)據(jù)，所以就算你不用框架也沒有問題，不過會引發(fā)后續(xù)的問題。PHP提供API給客戶端就好了，API描述方式有很多種：REST、SOAP等等均可。因?yàn)镻HP是腳本語言，主要用于服務(wù)端的開發(fā)，是負(fù)責(zé)完成 B/S架構(gòu) 或 C/S架構(gòu) 的S部分，但是PHP可不僅僅只能在互聯(lián)網(wǎng)站上發(fā)展，一個PHP for Android（PFA）站點(diǎn)表示他們將可以發(fā)布編程模型、工具盒文檔讓PHP在Android上實(shí)現(xiàn)應(yīng)用。利用PHP框架語言開發(fā)手機(jī)APP和WEB開發(fā)一樣，首先需要一些相關(guān)的參數(shù)，這些參數(shù)，都會由客戶端傳過來，也許是 GET 也許是 POST，這個需要開發(fā)團(tuán)隊(duì)相互之間約定好，或者制定統(tǒng)一規(guī)范。其次有了參數(shù)，根據(jù)應(yīng)用需求，完成數(shù)據(jù)處理，例如：任務(wù)進(jìn)度更新、APP內(nèi)購、一局游戲結(jié)束數(shù)據(jù)提交等等。再次數(shù)據(jù)邏輯處理完之后，返回客戶端所需要用到的相關(guān)數(shù)據(jù)，例如：任務(wù)狀態(tài)、內(nèi)購結(jié)果、玩家信息等等。例如數(shù)據(jù)怎么返給客戶端？直接輸出的形式，如：JSON、XML、TEXT 等等。然后客戶端獲取到你返回的數(shù)據(jù)后，在客戶端本地和用戶進(jìn)行交互。
php不能編寫 app應(yīng)用程序，主要用于B/S結(jié)構(gòu)（Browser/Server，瀏覽器/服務(wù)器模式）開發(fā)使用。但是php可以作為服務(wù)器與app應(yīng)用交換數(shù)據(jù)服務(wù)端API.
學(xué)習(xí)APP現(xiàn)在流行的有三種手機(jī)平臺，android、IOS，windows。他們都各有各自的編程語言，具體可以在百度搜索下各自平臺制作學(xué)習(xí)。移動后臺都是 PHP、Python，Java都重，更別說C++了。用協(xié)議http ,tcp/ip。nodejs 可以把路由，form表單驗(yàn)證 寫成c++的模塊， 主要是提供接口給移動端APP調(diào)用，可以從成本、服務(wù)器資源的占用、開發(fā)效率、運(yùn)行效率，后臺復(fù)雜邏輯處理的能力等。利用PHP框架開發(fā)手機(jī)APP需要考慮兩種可能：一個是如果需要即時(shí)通訊，也就是需要手機(jī)客戶端與服務(wù)端保持TCP長連接，服務(wù)端需要向客戶端推送數(shù)據(jù)的時(shí)候可以隨時(shí)通過這個長連接發(fā)送數(shù)據(jù)給客戶端，這樣便能做到客戶端與服務(wù)端及時(shí)通訊甚至客戶端與客戶端及時(shí)通訊。做到這需要PHP能維持很多客戶端連接，并且需要多進(jìn)程支持，支持自己的通訊協(xié)議。這樣的應(yīng)用傳統(tǒng)的nginx+php-fpm + 傳統(tǒng)的php框架是做不到的。如果是長連接即時(shí)通訊類的服務(wù)器框架推薦一看下workerman，它是就是一個php的socket服務(wù)器框架，非常適合做手機(jī)后臺服務(wù)器框架。另一個是如果不需要即時(shí)通訊的話，可以考慮直接走h(yuǎn)ttp協(xié)議，用nginx+php-fpm搭建一個webserver就好了，php框架可以采用thinkphp、yii等等，客戶端需要與服務(wù)器通訊的時(shí)候向服務(wù)端get/post一個請求就好。如果是比較簡單的手機(jī)APP，例如新聞客戶端這樣的不會涉及到長連接的服務(wù)，那么可以考慮直接使用http協(xié)議。因?yàn)樵搮f(xié)議幾乎被所有可以上網(wǎng)的設(shè)備支持，手機(jī)客戶端那邊也有大量相關(guān)的庫可以調(diào)用，省掉不少麻煩，其實(shí)確定了這三個：協(xié)議（HTTP）、數(shù)據(jù)表示方法（JSON）、請求數(shù)據(jù)的方法（REST）之后，基本上就可以開發(fā)一個簡單地服務(wù)端接口了（業(yè)務(wù)邏輯得自己琢磨），再加上手機(jī)客戶端那邊配套的設(shè)置搭起來，那么就可以了。
5.2目前Wex5、phonegap的應(yīng)用對APP開發(fā)的沖擊
目前面臨著技術(shù)方案選型，框架選擇wex5還是phoneGap哪個更好，兩者區(qū)別是wex5：源于國內(nèi)自主研發(fā)起步公司的軟件，主要進(jìn)行app，微信端的開發(fā)，目前而言針對android和ios的比較多，是基于HTML5、CSS3的開發(fā)，是通過圖形化界面調(diào)用組件設(shè)計(jì)UI，后臺用requireJS來進(jìn)行代碼編寫，適用范圍中等水平，是一款快速開發(fā)工具。而phoneGap:源于國外Adobe公司，主要進(jìn)行移動端開發(fā)，目前針對蘋果的iOS，谷歌的Android，RIM的Blackberry，惠普的WebOS，微軟的Windows Phone，塞班公司的Symbian以及三星的bada等，基于HTML5，CSS3和JavaScript的開發(fā)，適用范圍較廣，是一款快速開發(fā)平臺。前者wex5：知名度不高，主要因?yàn)槭菄俗约貉邪l(fā)的，很多東西不太到位，bug相對較多，書籍幾乎沒有，除了官網(wǎng)的視頻及Pdf文檔外，幾乎沒有其他書籍。而phoneGap:有書，有視頻，通過搜索即可找到相關(guān)資料。但在開發(fā)過程中有限制，如果是為BlackBerry、webOS、Windows Phone 7、Symbian或Bada設(shè)備做開發(fā)，則有些功能就不支持（例如，在Windows Phone 7上，就不支持?jǐn)z像頭、羅盤或存儲功能。老版的BlackBerry型號支持地理定位、通知以及網(wǎng)絡(luò)的可達(dá)性）。后者相對比較實(shí)用，適合用戶量大的。
5.3跨平臺網(wǎng)站、系統(tǒng)應(yīng)用
跨平臺泛指程序語言、軟件或硬件設(shè)備可以在多種作業(yè)系統(tǒng)或不同硬件架構(gòu)的電腦上運(yùn)作。廣義而言，一般的計(jì)算語言都可做到跨平臺，開發(fā)商只需要提供各種平臺下的Runtime/中間件環(huán)境即可。嚴(yán)格而言是指用某種計(jì)算機(jī)語言編制的程序只需要做小量的修改，編譯之后即可在另外一種平臺下運(yùn)行，此時(shí)并不提供Runtime/中間件環(huán)境。例如Java是一種提供Runtime環(huán)境的跨平臺解決方案，而C是一種標(biāo)準(zhǔn)且嚴(yán)格的跨平臺語言。
php開發(fā)的程序可以不經(jīng)修改運(yùn)行在，windows.linux,unix等多個操作系統(tǒng)上，
補(bǔ)充：舉例說windows系統(tǒng)的軟件不可以在linux上運(yùn)行，linux系統(tǒng)的軟件不可以在windows上運(yùn)行。但是php的解釋器有多個操作系統(tǒng)的多個版本，多的偶都叫不出來名字，凡是有解釋器的操作系統(tǒng)你寫的php程序就可以運(yùn)行，不論你是在windows還是linux下寫的。目前市面上主流的跨平臺應(yīng)用程序和UI開發(fā)框架：QT是諾基亞的開源跨平臺開發(fā)工具。主要用于嵌入式開發(fā)，MeeGo平板和MeeGo手機(jī)開發(fā)。MicroGUI是國人自行研發(fā)的跨WinCE、Windows Mobile、MTK、QT、Symbian、iPhone、Android、Brew MP等多款平臺的UI開發(fā)框架。該產(chǎn)品正在產(chǎn)品研發(fā)階段。預(yù)計(jì)年底前會上市。MiniGUI也是一款國產(chǎn)的GUI系統(tǒng)，主要用于低端嵌入式領(lǐng)域開發(fā)。移動領(lǐng)域的開發(fā)，目前面臨不同操作系統(tǒng)需不同開發(fā)語言，同一操作系統(tǒng)存在不同版本，同一版本存在不同機(jī)型等難題，給移動開發(fā)增加了很大難度。
在移動開發(fā)領(lǐng)域，跨平臺開發(fā)技術(shù)成為很多企業(yè)和開發(fā)者的首選，可以有效解決不同操作系統(tǒng)不同機(jī)型終端的開發(fā)難題，為企業(yè)節(jié)省時(shí)間成本和人員成本。目前國內(nèi)外知名的跨平臺開發(fā)技術(shù)有：PhoneGap（美國）、Titanium（美國）、SenCha（美國）、AppCan（中國）。AppCan是國內(nèi)首個基于HTML5技術(shù)的跨平臺移動應(yīng)用開發(fā)平臺，實(shí)現(xiàn)一次開發(fā)、多平臺適配，支持iOS、Android、Symbian、Windows Phone四大智能平臺，可以有效降低開發(fā)門檻，減少開發(fā)周期。愛碼哥作為第三代移動中間件采用（xml和JavaScript）的開發(fā)方式并內(nèi)置了開發(fā)框架，可以實(shí)現(xiàn)用Javascript、Java、。Net、php或htlm5當(dāng)中的任何一套開發(fā)語言寫一套代碼就可以生成Android和iOS的兩個系統(tǒng)的原生app可以有效降低開發(fā)門檻，減少開發(fā)周期。
皖公網(wǎng)安備 34010202600669
