第一篇：自學(xué)手機(jī)網(wǎng)站開發(fā)教程 手機(jī)網(wǎng)頁設(shè)計(jì)和制作（本站推薦）

網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國(guó)互網(wǎng)】

自學(xué)手機(jī)網(wǎng)站開發(fā)教程 手機(jī)網(wǎng)頁設(shè)計(jì)和制作

本手機(jī)網(wǎng)站開發(fā)教程主要介紹：手機(jī)網(wǎng)頁設(shè)計(jì)和制作的七個(gè)方面的知識(shí)，讓你避免走一些現(xiàn)在的手機(jī)網(wǎng)頁的彎路，學(xué)完本教程后，你就能對(duì)手機(jī)網(wǎng)頁的制作和設(shè)計(jì)有大概的了解，然后有針對(duì)性地學(xué)相應(yīng)知識(shí)。

1.手機(jī)網(wǎng)頁的標(biāo)記語言

WML

因?yàn)閃ML大部分針對(duì)早期和低端的手機(jī)，現(xiàn)在已經(jīng)逐步被其他的技術(shù)取代了，現(xiàn)在學(xué)習(xí)手機(jī)網(wǎng)頁設(shè)計(jì)制作完全可以忽略WML。

XHTML

未來智能手機(jī)的市場(chǎng)份額會(huì)越來越大，考慮到這點(diǎn)，現(xiàn)在進(jìn)行手機(jī)網(wǎng)頁設(shè)計(jì)制作時(shí)，我們會(huì)用到更加熟悉的標(biāo)記語言Xhtml。

現(xiàn)在大部分智能手機(jī)的瀏覽器都能正確處理Xhtml，它會(huì)識(shí)別兩種類型的Html。

① Xhtml：基礎(chǔ)的，和桌面瀏覽器相同的Xhtml

② Xhtml-MP：針對(duì)智能手機(jī)的Xhtml

這兩種類型的不同之處，Xhtml-MP包含比較少的要素和相對(duì)寬松的限制，能適合手機(jī)平臺(tái)的渲染，現(xiàn)在很多手機(jī)網(wǎng)頁設(shè)計(jì)制作直接用Xhtml，也沒什么大問題。

2.手機(jī)類型

網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國(guó)互網(wǎng)】 網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國(guó)互網(wǎng)】

手機(jī)市場(chǎng)上既有非常高端的iPhone手機(jī)和谷歌的Android手機(jī)，也有諾基亞一些單色點(diǎn)陣顯示的低端機(jī)。這些低端機(jī)在瀏覽手機(jī)網(wǎng)頁時(shí)有很多的限制，如屏幕分辨率、渲染Xhtml的性能等，因此如果你的手機(jī)網(wǎng)頁是針對(duì)這部分用戶，最好還是用WML。

另一方面，類似于iPhone和Nexus One這種高端智能機(jī)，擁有可以和桌面瀏覽器相媲美的渲染網(wǎng)頁的性能。對(duì)這部分用戶而言，良好的用戶體驗(yàn)是很重要的，受限于手機(jī)的傳輸速度，如果直接用一般的電腦上瀏覽的網(wǎng)頁來代替手機(jī)網(wǎng)頁，對(duì)手機(jī)網(wǎng)頁的目標(biāo)客戶來說，并非明智之舉。

可以把手機(jī)根據(jù)屏幕尺寸分成幾種常見的類型，如：

x 160 pixels

176 x 220 pixels

240 x 320 pixels

320 x 480 pixels

3.手機(jī)網(wǎng)頁的目標(biāo)群體

任何網(wǎng)站設(shè)計(jì)網(wǎng)頁時(shí)都應(yīng)該明白自己的目標(biāo)群體，以便向他們傳輸最合適的信息。這點(diǎn)在進(jìn)行手機(jī)網(wǎng)頁設(shè)計(jì)制作時(shí)更為重要。因?yàn)槟悴粌H要知道你的目標(biāo)群體，還要知道他們?yōu)g覽手機(jī)網(wǎng)頁時(shí)的情景。瀏覽傳統(tǒng)的網(wǎng)站，訪客會(huì)坐在桌上，有著大分辨率的屏幕。手機(jī)網(wǎng)頁的訪客則有可能是在排隊(duì)、等交車、坐在地鐵等。

手機(jī)網(wǎng)頁的目標(biāo)群體，谷歌的開發(fā)者將看手機(jī)網(wǎng)頁人群分為三大類，這對(duì)我們進(jìn)行手機(jī)網(wǎng)頁的設(shè)計(jì)和制作，很有參考意義。

網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國(guó)互網(wǎng)】 網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國(guó)互網(wǎng)】

4.根據(jù)具體需要提供網(wǎng)站內(nèi)容

一個(gè)很常見的誤區(qū)是很多網(wǎng)頁開發(fā)者認(rèn)為只需要簡(jiǎn)單的設(shè)置，就可以將一個(gè)傳統(tǒng)的網(wǎng)頁變成可以適應(yīng)手機(jī)瀏覽的網(wǎng)頁，他們認(rèn)為只需要在CSS樣式表將media=”screen”變成media=”handheld”就能使網(wǎng)頁神奇般地適用于手機(jī)。

這是錯(cuò)誤的想法。

雖然針對(duì)手機(jī)用戶變更網(wǎng)頁的CSS可以過濾一部分的內(nèi)容，或者一些CMS網(wǎng)頁也提供了相應(yīng)的轉(zhuǎn)換插件。但這些方案并不完善。

W3c定義了“一個(gè)網(wǎng)站”的概念，意思是手機(jī)網(wǎng)頁不一定要提供和傳統(tǒng)網(wǎng)站完全一樣的內(nèi)容和設(shè)計(jì)，而是要根據(jù)手機(jī)的性能、帶寬等方面的不同提供一些差異化服務(wù)。

根據(jù)這個(gè)定義，一些傳統(tǒng)網(wǎng)頁的內(nèi)容和功能不能在手機(jī)上實(shí)現(xiàn)是很合理的。不同手機(jī)能處理的內(nèi)容和功能也都是不一樣的。所以也可以根據(jù)這些手機(jī)進(jìn)行相應(yīng)的網(wǎng)頁制作。

5.選擇域名

為手機(jī)網(wǎng)頁選擇什么域名取決于你的目標(biāo)群體是如何進(jìn)入網(wǎng)站的。這里有三種域名可供選擇：

A：為手機(jī)網(wǎng)頁使用獨(dú)立域名

B:為手機(jī)網(wǎng)頁使用子域名

網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國(guó)互網(wǎng)】 網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國(guó)互網(wǎng)】

C：為手機(jī)網(wǎng)頁注冊(cè)mobi的頂級(jí)域名

D：判斷客戶端，并自動(dòng)顯示對(duì)應(yīng)內(nèi)容

6.為手機(jī)網(wǎng)頁驗(yàn)證標(biāo)記語言

電腦的網(wǎng)頁瀏覽器對(duì)錯(cuò)誤比較寬容，一些html標(biāo)記的忘記書寫或者沒有正確嵌套在電腦瀏覽器都會(huì)正確顯示，當(dāng)然容錯(cuò)率高意味著消耗更高的cpu和內(nèi)存。

手機(jī)瀏覽器的性能還無法和電腦相提并論，所以手機(jī)瀏覽器對(duì)手機(jī)網(wǎng)頁的錯(cuò)誤要嚴(yán)格一些。所以在設(shè)計(jì)和制作手機(jī)網(wǎng)頁時(shí)，你必須不斷進(jìn)行檢查、驗(yàn)證和糾錯(cuò)。驗(yàn)證手機(jī)網(wǎng)頁和驗(yàn)證一般傳統(tǒng)的網(wǎng)頁沒什么區(qū)別，如果你使用Xhtml編寫，可以使用相同的工具。W3C驗(yàn)證器可以驗(yàn)證一些簡(jiǎn)單的錯(cuò)誤，當(dāng)然這里有一個(gè)更適合驗(yàn)證手機(jī)網(wǎng)頁的版本。

7.為手機(jī)網(wǎng)頁不斷測(cè)試

當(dāng)通過了手機(jī)網(wǎng)頁的驗(yàn)證之后，就要針對(duì)幾種不同的手機(jī)進(jìn)行各種測(cè)試了。用電腦的瀏覽器雖然可以進(jìn)行模擬測(cè)試，但是并不完善。這種方式通過的手機(jī)網(wǎng)頁不能適用于某些手機(jī)。

有些手機(jī)文件尺寸的限制可能會(huì)很小，所以你制作的手機(jī)網(wǎng)頁在這些設(shè)備上甚至無法顯示。另外瀏覽器支持的文件類型也會(huì)不同，支持的圖像格式也會(huì)不同。測(cè)試時(shí)候手機(jī)網(wǎng)頁當(dāng)然不可能擁有所有手機(jī)，所以制作網(wǎng)頁時(shí)可以使用一些替代手段。

網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國(guó)互網(wǎng)】

第二篇：手機(jī)網(wǎng)站開發(fā)必修課2009總結(jié)

手機(jī)網(wǎng)站開發(fā)必修課[2009年總結(jié)] 前言：

手機(jī)網(wǎng)站開發(fā)，有著許多不為人知的困難：

一是可參考的資料太少，大部分手機(jī)網(wǎng)站都處于起步階段，很多的時(shí)候都是摸著石頭過河，而鑒于手機(jī)網(wǎng)站的特殊性，也使得我們?cè)趨⒖汲晒Π咐啵龈嗟乃伎迹?二是兼容性工作異常艱辛，難度一點(diǎn)也不比web網(wǎng)站的兼容性工作來的低。對(duì)于手機(jī)網(wǎng)站來說，相信現(xiàn)在僅僅只是個(gè)開始，隨著各種新機(jī)型的相繼面世，這塊領(lǐng)域必將成為兵家必爭(zhēng)的新高地。

一、手機(jī)用戶設(shè)備統(tǒng)計(jì)分析：

擁有全面的用戶數(shù)據(jù)，無疑能幫助我們做出更符合用戶需求的產(chǎn)品。內(nèi)部數(shù)據(jù)能幫我們精確了解我們的目標(biāo)用戶群的特征；而外部數(shù)據(jù)能告訴我們大環(huán)境下的手機(jī)用戶狀況，并且能在內(nèi)部數(shù)據(jù)不夠充分的時(shí)候給予我們一些非常有用的信息。

從外部數(shù)據(jù)來看，09年10月到11月期間

國(guó)內(nèi)瀏覽器品牌市場(chǎng)占有率前三甲為：

Nokia(78%)

Opera(OEM)(10%)

iPhone(Safari)(3%)

國(guó)內(nèi)的手機(jī)操作系統(tǒng)前三甲為：

Nokia SymbianOS(80%)

iPhoneOS(6%)

SonyEricsson(5%)

當(dāng)然，作為中國(guó)的手機(jī)網(wǎng)站開發(fā)者，不能忽視強(qiáng)大的山寨機(jī)市場(chǎng)（或者應(yīng)該叫作做國(guó)貨精品手機(jī)市場(chǎng)？）。順便提一下，這類手機(jī)通常使用的是MTK操作系統(tǒng)。（以上數(shù)據(jù)均來自statcounter.com）

二、手機(jī)瀏覽器兼容性測(cè)試結(jié)果概要：

注意：以下所說的“大多數(shù)”是指在測(cè)試過的機(jī)型中，發(fā)生此類狀況的手機(jī)占比達(dá)50%及以上，“部分”為20%到50%；“少數(shù)”為20%及以下。而這個(gè)概率也僅僅只限于我們所測(cè)試過的機(jī)型，雖然我們采集的樣本盡量覆蓋各種特征的手機(jī)，但并不代表所有手機(jī)的情況。

XHTML部分：

大多數(shù)手機(jī)不支持的：

表單元素的“disable”屬性

部分手機(jī)不支持的：

“button”標(biāo)簽

“input[type=file]“標(biāo)簽

“iframe”標(biāo)簽。

雖然只有部分手機(jī)不支持這幾個(gè)標(biāo)簽，但因?yàn)檫@些標(biāo)簽在頁面中往往具有非常重要的功能，所以屬于高危標(biāo)簽，要謹(jǐn)慎使用。

少數(shù)手機(jī)不支持的：

“select”標(biāo)簽：該標(biāo)簽如果被賦予比較復(fù)雜的CSS屬性，可能會(huì)導(dǎo)致顯示不正常，比如”vertical-align:middle”。

CSS部分

大部分手機(jī)不支持的：

“font-family”屬性：因?yàn)槭謾C(jī)基本上只安裝了宋體這一種中文字體；

“font-family:bold;”：對(duì)中文字符無效，但一般對(duì)英文字符是有效的；

“font-style: italic;”：同上；

“font-size”屬性：比如12px的中文和14px的中文看起來一樣大，當(dāng)字符大小為18px的時(shí)候你也許能看出來一些區(qū)別；

“white-space/word-wrap”屬性：無法設(shè)置強(qiáng)制換行，所以當(dāng)你網(wǎng)頁有很多中文的時(shí)候，需要特別關(guān)注不要讓過多連寫的英文字符撐開頁面；

“background-position”屬性：但背景圖片的其他屬性設(shè)定是支持的；

“position”屬性；

“overflow”屬性；

“display”屬性；

“min-height”和”min-weidth”屬性；

部分手機(jī)不支持的：

“height”屬性：對(duì)”height”的支持不太好，奇怪的是在我們的測(cè)試當(dāng)中，僅僅只有很少部分手機(jī)不支持”width”屬性；

“pading”屬性

“margin”屬性：更高比例的手機(jī)不支持”margin”的負(fù)值。

少數(shù)手機(jī)不支持的：

少數(shù)手機(jī)對(duì)CSS完全不支持；

JavaScript部分

這部分測(cè)試相對(duì)不那么讓人抓狂，要么干脆不支持，如果支持的話，對(duì)基本的dom操作、事件等支持度都還不錯(cuò)。但我們沒有測(cè)試過很復(fù)雜的腳本。

在我們測(cè)試過的手機(jī)當(dāng)中，支持（包括不完全支持）JavaScript的手機(jī)比例大約在一半左右，當(dāng)然，對(duì)于我們來說，最重要的不是這個(gè)比例，而是要如何做好JavaScript的優(yōu)雅降級(jí)。

其他

部分手機(jī)不支持png8和png24，所以盡量使用jpg和gif的圖片

另外對(duì)于平滑的漸變等精細(xì)的圖片細(xì)節(jié)，部分手機(jī)的色彩支持度并不能達(dá)到要求，所以慎用有平滑漸變的bar設(shè)計(jì)

部分手機(jī)對(duì)于超大圖片，既不進(jìn)行縮放，也不顯示橫下滾動(dòng)條

少數(shù)手機(jī)在打開超過20k的測(cè)試頁面時(shí)，會(huì)顯示內(nèi)存不足

三、手機(jī)網(wǎng)站開發(fā)中需要注意的常見問題：

手機(jī)網(wǎng)頁編碼需要遵循什么規(guī)范？

遵循XHTML Mobile Profile規(guī)范（WAP-277-XHTMLMP-20011029-a.pdf），簡(jiǎn)稱為XHTML MP，也就是通常說的WAP2.0規(guī)范。XHTMLMP是為不支持XHTML的全部特性且資源有限的客戶端所設(shè)計(jì)的。它以XHTML Basic為基礎(chǔ)，加入了一些來自XHTML 1.0的元素和屬性。這些內(nèi)容包括一些其他元素和對(duì)內(nèi)部樣式表的支持。和XHTML Basic相同，XHTML MP是嚴(yán)格的XHTML 1.0子集。

網(wǎng)頁文檔推薦使用什么擴(kuò)展名？

推薦命名為xhtml，按WAP2.0的規(guī)范標(biāo)準(zhǔn)寫成html/htm等也是可以的。但少數(shù)手機(jī)對(duì)html支持的不好。

為什么現(xiàn)今大多數(shù)的網(wǎng)站一行字?jǐn)?shù)上限為14個(gè)中文字符？

由于手持設(shè)備的特殊性，其頁面中實(shí)際文字大小未必是我們?cè)贑SS中設(shè)定的文字大小，尤其是在第三方瀏覽器中。例如Nokia5310，其內(nèi)置瀏覽器 頁面內(nèi)文字大小與CSS設(shè)定相符，但是第三方瀏覽器OperaMini與UCWEB頁面內(nèi)文字大小卻大于CSS設(shè)定。經(jīng)測(cè)試，其文本大

概在16px左右。假如屏幕分辨率寬度為240px，去除外邊距，那么其一行顯示14個(gè)字以內(nèi)，是比較保險(xiǎn)（避免文本換行）的做法。

使用WCSS還是CSS？

WCSS(WAP Cascading Style Sheet 或稱 WAP CSS)是移動(dòng)版本的CSS樣式表。它是CSS2的一個(gè)子集，去掉了一些不適于移動(dòng)互聯(lián)網(wǎng)特性的屬性，并加入一些具有WAP特性的擴(kuò)展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。需要留意的是，這些特殊的屬性擴(kuò)展并不是很實(shí)用，所以在實(shí)際的項(xiàng)目開發(fā)當(dāng)中，不推薦使用WCSS特有的屬性。

避免空值屬性

如果屬性值為空，在web頁面中是完全沒有問題的，但是在大部分手機(jī)網(wǎng)頁上會(huì)報(bào)錯(cuò)。

網(wǎng)頁大小限制

建議低版本頁面不超過15k，高版本頁面不超過60k。

用手機(jī)模擬器和第三方手機(jī)瀏覽器的在線模擬器來測(cè)試頁面是不是靠譜？

有條件的話，我們當(dāng)然建議在手機(jī)實(shí)體上進(jìn)行測(cè)試，因?yàn)槟繕?biāo)客戶群的手機(jī)設(shè)備總是在不斷變化的，這些手機(jī)模擬器通常不能完全正確的模擬頁面在手機(jī)上的顯示情況，比如圖片色彩，頁面大小限制等就很難再模擬器上測(cè)試出來。當(dāng)然，一些第三方手機(jī)瀏覽器的在線模擬器還是可以進(jìn)行測(cè)試的，第三方瀏覽器相對(duì)來說受手機(jī)設(shè)備的影響較小。

四、推薦參考資料：

開發(fā)權(quán)威網(wǎng)站

（漢化版）

經(jīng)典開發(fā)文章

手機(jī)型號(hào)查詢

機(jī)型很全，偏國(guó)外機(jī)型，參數(shù)較多

機(jī)型較全，偏門機(jī)型可能無內(nèi)容

試手機(jī)網(wǎng)：手機(jī)查詢+模擬.html 機(jī)型稍少，可以模擬手機(jī)操作

五、總結(jié)

目前來說，手機(jī)網(wǎng)站開發(fā)是個(gè)典型的設(shè)備驅(qū)動(dòng)開發(fā)的過程，頁面被設(shè)計(jì)成什么樣，能做到怎么樣，幾乎全取決于目標(biāo)客戶的手機(jī)設(shè)備情況。

所以，對(duì)手機(jī)設(shè)備的了解，對(duì)于設(shè)計(jì)開發(fā)過程有著直觀重要的作用，對(duì)于前端來說，就需要有計(jì)劃的進(jìn)行長(zhǎng)期的手機(jī)瀏覽器兼容性測(cè)試，什么樣的設(shè)計(jì)能被實(shí)現(xiàn)，什么樣的標(biāo)簽可以使用，這些都需要有數(shù)據(jù)的支持。

我們必須有這樣的認(rèn)知，開發(fā)的手機(jī)網(wǎng)頁總是會(huì)在或多或少的手機(jī)設(shè)備上出現(xiàn)問題，因?yàn)槲覀冇肋h(yuǎn)無法知道所有用戶的手機(jī)設(shè)備情況，所以我們更要盡量的遵循標(biāo)準(zhǔn)進(jìn)行開發(fā)，這樣才能將滿足用戶的比例做到最好。

任何一個(gè)領(lǐng)域都有值得你進(jìn)行深入了解的地方，即使現(xiàn)在看起來，手機(jī)網(wǎng)站的開發(fā)還有點(diǎn)不入主流，但我相信，隨著手機(jī)設(shè)備的更新?lián)Q代，總有一天它也會(huì)成為我們占領(lǐng)客戶的一個(gè)重要戰(zhàn)場(chǎng)，iphone這類有符合web標(biāo)準(zhǔn)的瀏覽器的手機(jī)發(fā)布，也給了我們更多的信心。總之，革命尚未成功，同志仍需努力！

第三篇：簡(jiǎn)單的網(wǎng)頁制作教程-設(shè)計(jì)一個(gè)個(gè)人網(wǎng)站

題目：設(shè)計(jì)一個(gè)個(gè)人網(wǎng)站

一、要求：

1．使用Dreamweave網(wǎng)頁工具制作一個(gè)個(gè)人網(wǎng)站；

2．包含至少四個(gè)網(wǎng)頁: 包括首頁、個(gè)人簡(jiǎn)介、個(gè)人相冊(cè)等（可隨意設(shè)計(jì)），網(wǎng)頁之間用超鏈接相連。

3．網(wǎng)頁中要有圖片和文字內(nèi)容，用表格進(jìn)行頁面布局； 4．添加至少兩種行為，并為首頁添加背景音樂。

5.在網(wǎng)站中設(shè)計(jì)一個(gè)表單頁面。

6.首頁必須包含頁面標(biāo)題，動(dòng)態(tài)按鈕導(dǎo)航欄。

首先新建一個(gè)文件夾，文件夾的名字不能為漢字，做網(wǎng)站所有的路徑都必須用字母或者數(shù)字，不能用漢字，我們就用名字吧，譬如說名字張三，那文件夾名字就是zs，如圖打開Dreamweaver軟件，得到圖

做網(wǎng)頁要新建站點(diǎn)，關(guān)于站點(diǎn)配置服務(wù)器什么的，這里不講了，只講建立站點(diǎn)。

選擇站點(diǎn)——新建站點(diǎn)。

我們建的文件夾就是站點(diǎn)根文件夾。新建站點(diǎn)后得到這樣一個(gè)界面

點(diǎn)選高級(jí)，得到界面

站點(diǎn)名稱與我們建文件夾得名字相同，zs填進(jìn)去就可以了 本地根文件夾就是我們新建的那個(gè)文件夾zs，http地址為http://localhost/zs

接下來選擇左側(cè)欄里遠(yuǎn)程信息

點(diǎn)擊無后面的那個(gè)三角，選擇本地網(wǎng)絡(luò)，遠(yuǎn)端文件夾同樣選擇我們新建的那個(gè)文件夾

接下來點(diǎn)選左面菜單里的測(cè)試服務(wù)器，點(diǎn)選訪問后面那個(gè)三角，選擇本地網(wǎng)絡(luò)，測(cè)試服務(wù)器文件夾也為我們建好的文件夾zs，在url前綴后面加上zs

然后點(diǎn)擊確定就可以了得到這樣一個(gè)界面。

下面看老師的第一條要求，是要至少四個(gè)網(wǎng)頁，那我們就做四個(gè)

單擊新建，然后單擊

接下來，選擇

然后單擊創(chuàng)建，接下單擊文件——保存，保存這個(gè)文件，保存在我們一開始建好的文件夾里面，保存名字不能是漢字，只能是字母或者數(shù)字，因?yàn)槲覀冎蛔膫€(gè)網(wǎng)頁，可以簡(jiǎn)單一點(diǎn)，把這四個(gè)網(wǎng)頁命名為a、b、c、d，或者1、2、3、4，當(dāng)然一個(gè)網(wǎng)站默認(rèn)的索引首頁名為index，這里也用index，單擊保存，這樣得到第一個(gè)頁面，以同樣的方式建剩下的三個(gè)頁面，這里我的首頁默認(rèn)為index.html，其他三個(gè)網(wǎng)頁的名字分別為a.html、b.html、c.html，我們這四個(gè)網(wǎng)頁文件已經(jīng)保存在我們建的文件夾里。

站點(diǎn)中已經(jīng)有了四個(gè)文件。

接下來，我們開始編輯index.html。

單擊index.html，顯示為當(dāng)前頁面。

單擊拆分，然后我們看這個(gè)個(gè)網(wǎng)頁就叫張三之家了，同樣的方法給其他三個(gè)網(wǎng)頁改名字。A網(wǎng)頁標(biāo)題，這個(gè)就是網(wǎng)頁名字，我們以張三為例，這，這樣老師的第六條我們就完成一半

B網(wǎng)頁標(biāo)題

C網(wǎng)頁標(biāo)題

改好名字之后，一一保存，這個(gè)不多說了，接下來操作index.html。

顯示首頁為當(dāng)前編輯頁面。

首先為index.html頁面添加背景音樂。

大家在代碼視圖里找到，這個(gè)是什么意思就不解釋了，我也不知道，就是這個(gè)了，在后面輸入代碼，然看見這張圖片上，我光標(biāo)指在哪里了吧，單擊空格鍵，這個(gè)時(shí)候注意輸入法要為美式鍵盤字母格式，只要不是漢字就行，得到一個(gè)菜單，單擊src選中，然后單擊enter建，這個(gè)時(shí)候緊跟著src會(huì)出現(xiàn)一個(gè)瀏覽，單擊瀏覽，然后出現(xiàn)對(duì)話框，選擇一首音樂，然后單擊確定，會(huì)繼續(xù)彈出一個(gè)對(duì)話框點(diǎn)擊是，保存到自己建好的文件夾里面，注意這里不能用漢字做音樂名字，必須改成字母或者數(shù)字

我是以beyond的歌為例，名字改為by，點(diǎn)擊保存背景音樂就添加好了。大家可以看一下，在站點(diǎn)目錄下，已經(jīng)有了這首歌曲。

接下來開始設(shè)計(jì)頁面布局 這里用表格布局，這個(gè)欄叫設(shè)計(jì)欄，由于大家都不會(huì)代碼，所以我們主要在這個(gè)欄里操作，下面大家點(diǎn)擊常用里面的表格，就是下面這張圖片

中的這個(gè)圖標(biāo)

得到對(duì)話框如圖所示數(shù)據(jù)： 單擊確定，得到如下界面

這個(gè)插入的表格式可以自動(dòng)調(diào)整大小的，大家可以自己試一下，接下來用這些表格布局，給大家看兩個(gè)圖標(biāo)，這個(gè)圖標(biāo)就像是excel中那個(gè)合并和拆分單元格是一個(gè)意思，左邊那個(gè)代表合并單元格，右面那個(gè)代表拆分單元格，excel大家都會(huì)把，就和那個(gè)布局差不錯(cuò)，我做一個(gè)簡(jiǎn)單的布局，為了方便，我把這個(gè)表格縮小，這個(gè)布局很簡(jiǎn)單，第二行全部合并，第三行第二三列合并，大家可以根據(jù)自己的需要進(jìn)行拆分合并，還可以在表格里面再次插入表格。

寬度和高度的設(shè)置時(shí)在代碼里找到

height=””>，其中align表示表格位置，height表示表格高度，大家可以根據(jù)自己的需要來填數(shù)字，默認(rèn)是以像素為單位的。

接下來制作導(dǎo)航，這是老師第六條中的第二個(gè)要求，注意我在這里給了兩種方法，大家可以先看一下，再?zèng)Q定選擇哪種

我沒看懂什么叫動(dòng)態(tài)按鈕導(dǎo)航條，不知道是讓這個(gè)字動(dòng)呢，還是讓這個(gè)字動(dòng)呢？如果大家嫌麻煩，就直接輸入漢字，結(jié)果就是下面這樣的

如果要文字居中顯示可以將這四個(gè)框同時(shí)選中，然后居中

在水平欄里面選擇

以后所有的文字格式都可以在這里面選，但是首先要選中自己所要操作的文字。

創(chuàng)建鏈接，選中首頁兩個(gè)字，然后單擊右鍵——?jiǎng)?chuàng)建鏈接，選擇index.html，然后以同樣的方法，給其他三個(gè)欄里的文字做鏈接，創(chuàng)建鏈接的文字會(huì)有下劃線，同時(shí)改變顏色

如果大家不嫌麻煩，教大家用flash做一個(gè)動(dòng)態(tài)的按鈕導(dǎo)航，把光標(biāo)放在第一行第一個(gè)欄里，然后

這個(gè)常用欄里的flash按鈕，單擊后面那個(gè)小三角，選擇flash按鈕。得到對(duì)話框

我們可以看到這個(gè)按鈕的樣式是可以自己選擇的，大家隨意選擇一款自己喜歡的按鈕，然后在按鈕文本欄里，填入首頁兩個(gè)字，字體設(shè)置隨意，然后鏈接

這個(gè)欄里填入index.html，注意這里的鏈接就是超級(jí)鏈接，當(dāng)你點(diǎn)擊這個(gè)按鈕的時(shí)候，它就會(huì)顯示主頁，我們?cè)O(shè)置后面三個(gè)按鈕的時(shí)候，一定要記得，當(dāng)你文本欄里填入個(gè)人簡(jiǎn)介字的時(shí)候，那你的鏈接就要指向簡(jiǎn)介那個(gè)頁面，我們這里就是a.html。其他像什么背景色之類的隨意，然后單擊確定。這樣第一個(gè)按鈕就做好了，接下來我們自己做剩下的三個(gè)按鈕，注意鏈接問題，大家做好后，可以看到自己站點(diǎn)內(nèi)多了四個(gè)swf格式的文件，這四個(gè)就是按鈕，保存的時(shí)候，有一個(gè)文件問是否要保存，一定要點(diǎn)擊是，不然flash不運(yùn)行了。

大家可以回到自己的文件夾里，打開首頁，測(cè)試一下，是不是單擊這四個(gè)按鈕會(huì)指向自己所設(shè)置的網(wǎng)頁，然后我們給第二行設(shè)置背景顏色，以有彈出顏色選框，大家隨意選擇自己喜歡的顏色

單擊背景顏色后面那個(gè)方框，可

接下來，完成老師的第五個(gè)要求，制作表單，這個(gè)把光標(biāo)指向第三行第一個(gè)欄

選在表單選項(xiàng)中的。也就是第一個(gè)按鈕，這時(shí)得到界面

我們把光標(biāo)指向紅線里面，輸入“用戶名：”然后點(diǎn)擊表單選項(xiàng)中的第二個(gè)按鈕彈出對(duì)話框，選擇確定，得到界面

同樣方法換行輸入密碼

再次換行，單擊表單選項(xiàng)中的按鈕項(xiàng)輸入兩個(gè)按鈕，然后選中第一個(gè)按鈕，得到以下屬性

將值后面欄里的文字改為登錄，同樣方法，把第二個(gè)按鈕的值改為注冊(cè)。

接下來插入文字和圖片，在現(xiàn)在的第二行第二列里操作

把光標(biāo)指向第三行第二列，選擇常用欄

選擇這個(gè)欄里的圖像按鈕，彈出對(duì)話框，這時(shí)大家選擇自己電腦里的一張圖片，單擊確定后彈出對(duì)話框，問是否保存在站點(diǎn)根目錄下，單擊確定，這時(shí)候需要注意的是，圖片名字不能有漢字，圖像標(biāo)簽和輔助屬性那一欄不用管，單擊確定即可。

接下來就是輸入漢字了，我們?cè)趫D片的后面先輸入漢字，可以看到這樣的顯示，上面還空了很大一塊地方，似乎不太好，不符合圖文混排的規(guī)矩，大家單擊圖片選中，在屬性欄里找到找到到對(duì)齊那一欄，在后面點(diǎn)選左對(duì)齊，得到最終圖文效果是這樣的。

第四行還有四個(gè)欄，大家可以在里面表明作者時(shí)間、以及自己的郵箱、QQ等內(nèi)容，這里我就不寫了。

實(shí)際上做到這里，我們幾乎完成了老師的所有要求了就差添加兩種行為了后面還有三個(gè)網(wǎng)頁沒做呢，怎么辦啊，后面三個(gè)網(wǎng)頁大家還沒做，教大家一個(gè)簡(jiǎn)單的方法，大家把鼠標(biāo)指向了。

這個(gè)欄的左邊，在表格和邊框之間，我們可以發(fā)現(xiàn)，鼠標(biāo)斜向右首先單擊鼠標(biāo)左鍵，選中這個(gè)表格然后不要移動(dòng)鼠標(biāo)，同時(shí)單擊右鍵，單擊拷貝，然后這個(gè)表格就拷貝好了，打開其他三個(gè)頁面，分別粘貼過去，圖像屬性描述不用管，取消，這樣做的好處是它的好處非常多。

大家打開a.html，這個(gè)是個(gè)人簡(jiǎn)介，就是一個(gè)圖文混排了，圖文混排我們已經(jīng)講過了，更何況我們這個(gè)頁面里已經(jīng)有了圖文混排了，大家可以換一張圖片，換一些文字，做一些自我介紹什么的，都可以。，但是我們最好把那個(gè)表單刪掉，哪個(gè)是表單就不用我說了吧，就是這個(gè)了。刪掉之后，選中第三行三個(gè)欄，合并就好了，第二個(gè)頁面就做好了，接下來我們看第三個(gè)頁面，b.html，這個(gè)頁面是個(gè)人相冊(cè)

這里我同樣分兩種方法給大家講，第一種方法很簡(jiǎn)單。就是插入幾張圖片，現(xiàn)在第三行剩下三個(gè)空欄，每個(gè)欄里插入一張圖片，景色也好，其他也罷，然后加上圖片說明，一切搞定，這個(gè)我就不寫了，第二種方法還是用flash做相冊(cè)，首先大家合并第三行三個(gè)欄。

并將光標(biāo)指向第三行，然后單擊這個(gè)圖片中的插入記錄——媒體——圖像查看器，之后得到這樣的界面

注意這個(gè)是可以調(diào)節(jié)大小的，看你想要多大的相冊(cè)了。單擊選中，我們會(huì)發(fā)現(xiàn)右面多出這樣一個(gè)界面flash元素

在其中找到

然后單擊后面的img1那里，會(huì)發(fā)現(xiàn)后面多出一支筆，單擊那個(gè)筆，彈出對(duì)話框

單擊減號(hào)，將img1三個(gè)刪掉，然后再單擊加號(hào)，會(huì)多出一個(gè)文件夾標(biāo)志，單擊文件夾標(biāo)志，然后彈出對(duì)話框

在自己電腦里選擇一張圖片，將圖片保存到站點(diǎn)根文件夾下，還是那個(gè)問題，名字中不能有漢字，添加好第一張圖片之后界面如圖

大家可以多添加幾張圖片，這樣一個(gè)相冊(cè)就做好了，單擊確定。接下來就剩下第四頁了，就是寫幾行文字的事情了，把表單和圖文混排都刪除，然后合并三個(gè)欄，然后添加一些文字，搞定了。這四個(gè)頁面都做好了，我們還有一項(xiàng)任務(wù)沒有完成，那就是給頁面添加兩個(gè)行為

下面我們講添加行為，打開首頁，單擊圖像選中，然后找到一下命令，看到行為面板下那個(gè)醒目的加號(hào)了嗎 單擊加號(hào)——交換圖像，彈出對(duì)話框

單擊瀏覽，在自己電腦中找出一張圖片，單擊確定，存放到站點(diǎn)根目錄下，這樣第一個(gè)行為就完成了，當(dāng)我們鼠標(biāo)滑過這張圖片的時(shí)候，就會(huì)變?yōu)榱硪粡垐D片。下面添加第二個(gè)行為，我們將光標(biāo)指向第二行藍(lán)色背景哪一行，然后單擊行為面板下的加號(hào)——彈出信息，得到對(duì)話框

寫上你好，單擊確定。這樣在我們單擊藍(lán)色地帶的時(shí)候，就會(huì)彈出你好信息框。

第四篇：手機(jī)網(wǎng)站建設(shè)

【手機(jī)網(wǎng)站助力中小企業(yè)搶占商機(jī)】

①讓你的名片多一個(gè)手機(jī)網(wǎng)站:將3G手機(jī)網(wǎng)站二維碼印在你的名片上，在給客戶遞名片的時(shí)候，把你的手機(jī)網(wǎng)站介紹給他。如果方便的話，你可以當(dāng)場(chǎng)用手機(jī)網(wǎng)站向他介紹你的公司和產(chǎn)品。

②在你的公司宣傳冊(cè)封底再加一個(gè)手機(jī)網(wǎng)站：以前在公司宣傳畫冊(cè)上留的都是公司地址、電話和www網(wǎng)址，現(xiàn)面可以再加一個(gè)手機(jī)網(wǎng)站網(wǎng)址，讓看到畫冊(cè)的人馬上能夠登陸手機(jī)網(wǎng)站，查看更多“鮮活”的信息。

③把手機(jī)網(wǎng)站印在產(chǎn)品目錄上：一般公司的產(chǎn)品目錄相對(duì)要滯后，有些新產(chǎn)品來不及印在產(chǎn)品總目錄上，也不方便及時(shí)傳達(dá)給消費(fèi)者。有了手機(jī)網(wǎng)站，把手機(jī)網(wǎng)站二維碼印在產(chǎn)品目錄上，就可以第一時(shí)間將新產(chǎn)品信息傳遞給客戶。

④讓你的戶外廣告更有價(jià)值：讓看到你公司戶外廣告的人馬上拿出筆記本電腦訪問你的www網(wǎng)站？不可能。有了手機(jī)網(wǎng)站，就可以把手機(jī)網(wǎng)站二維碼印在顯眼位置，看到的人可以馬上拿出手機(jī)訪問，瞬間增加印象。

⑤讓公交車椅背廣告更有效：如果你做了公交車椅背廣告，那更應(yīng)該建設(shè)手機(jī)版網(wǎng)站并把它印在顯著位置，并提醒看到的人如果馬上訪問手機(jī)網(wǎng)站即可獲得優(yōu)惠折扣，他們一定馬上拿出手機(jī)訪問，并且持續(xù)到下車為止。

⑥讓你的手機(jī)短信廣告不再白發(fā)：你應(yīng)該意識(shí)到，你發(fā)出去的手機(jī)短信廣告大部分會(huì)被視而不見或直接刪除的。等你有了手機(jī)網(wǎng)站，下次把訪問地址加入其中，看到短信的人只要點(diǎn)擊鏈接，便可以馬上訪問你的網(wǎng)站。

⑦給你的報(bào)刊廣告鋪設(shè)延長(zhǎng)線：如果你做了報(bào)刊平面廣告，你應(yīng)該意識(shí)到，你留在上面的www網(wǎng)站是不會(huì)被訪問的。因?yàn)榭吹剿娜艘话愣疾辉陔娔X旁邊，但手機(jī)網(wǎng)站就不同了，可以馬上訪問，了解你公司的更多信息。

⑧讓你的電視廣告馬上見效：看電視的人一般沒有上網(wǎng)，如果在你的電視廣告中宣傳你的手機(jī)網(wǎng)站，可能會(huì)有立竿見影的效果。你可以告訴觀眾，馬上登陸手機(jī)網(wǎng)站，可能獲得更多驚喜。⑨讓想了解你公司的人隨時(shí)隨地獲取信息：可以把你公司的地址、聯(lián)系方式、行車路線等在手機(jī)網(wǎng)站上列出，想來你公司的人即使沒有提前在電腦上查詢，也可以用手機(jī)上網(wǎng)查詢，體現(xiàn)公司對(duì)大眾的貼心關(guān)懷。

⑩隨時(shí)隨地收集客戶意見和投訴：手機(jī)上網(wǎng)的便利性為收集客戶意見提供了良好的條件。有些客戶因于種種原因，不方便或不愿意通過電話、電腦等向公司提意見或投訴，手機(jī)網(wǎng)站可以提供一條非常便捷的途徑。

第五篇：手機(jī)網(wǎng)站策劃書

霸天虎手機(jī)網(wǎng)站推廣策劃書

一、網(wǎng)站名稱

霸天虎手機(jī)網(wǎng)

二、網(wǎng)站風(fēng)格和建站目的網(wǎng)站以簡(jiǎn)約風(fēng)格為主，最終目標(biāo)是為客戶提供一個(gè)真正他們所需要的短媒體平臺(tái)。

三、推廣的目的科技越來越發(fā)達(dá)，通訊日益進(jìn)步，手機(jī)是目前最流行的通訊工具，手機(jī)行業(yè)競(jìng)爭(zhēng)日益激烈，我們要把自己的品牌打出去，要占有市場(chǎng)，提高市場(chǎng)占有率,塑造自己的品牌，讓更多的人知道我們的產(chǎn)品，讓更多的人了解我們的產(chǎn)品，從而達(dá)成成交贏得更大的利潤(rùn)。

四、網(wǎng)站流量來源分析

1.網(wǎng)站流量最大的來源，目前就是搜素引擎。

在國(guó)內(nèi)主要是GG百度雅虎和SOSO.搜索引擎來的流量長(zhǎng)期固定。一般在網(wǎng)站運(yùn)營(yíng)初期，占據(jù)主導(dǎo)地位。

2.商業(yè)網(wǎng)站的廣告投放。現(xiàn)在廣告形式多樣。電視媒體，車載雜志，報(bào)紙，電子雜志，網(wǎng)站廣告等形形色色的廣告，也能帶來大量的流量。但是，一般來自廣告的流量具有時(shí)限性，廣告投入一旦停止，流量就會(huì)劇減且成本比較大，所以我們前期不采用廣告的形式來推廣我們網(wǎng)站。

3.網(wǎng)站友情鏈接：在一些大型網(wǎng)站，尤其是同行業(yè)網(wǎng)站中交換友情鏈接，也能帶來一定的流量。包括如hao123類的方格子目錄來的流量。

4.QQ群、論壇、貼吧、留言板、郵件、文摘推薦。如果方法得當(dāng)，也能帶來部分流量。

5.口碑宣傳：這個(gè)是最好的流量。凡是該來源的流量，大部分是潛在客戶。但是口碑需要慢慢積累。前期比較難。

6.營(yíng)銷人員的推廣。商業(yè)網(wǎng)站擁有龐大的營(yíng)銷隊(duì)伍。電話營(yíng)銷，電子郵件跟蹤等方式，是很不多的推廣模式。既能帶來流量，又能擴(kuò)大知名度。對(duì)培養(yǎng)口碑宣傳，起到一定的作用。

7.展會(huì)等大型聚會(huì)時(shí)候，提供文件袋等小禮品，或者發(fā)放名片傳單。效果和上一條同。（短酷網(wǎng)貌似不適合這么作。）

8.網(wǎng)站主辦者開展活動(dòng)。此舉能帶來流量的同時(shí)，也能擴(kuò)大知名度。

9.與同行業(yè)網(wǎng)站合作。實(shí)現(xiàn)資源共享。

10.客戶直接輸入網(wǎng)站地址。這部分來源，前期一般比較少。而且需要借助于其他如6等方法的宣傳。

11.其他流量來源。諸如（百度知道，博客等）。

12.自己朋友的推廣。

13.短信群發(fā)。我自己也能經(jīng)常收到很多商業(yè)化信息。如房子開盤啊，什么折扣啊等。

四、推廣方式具體驟及費(fèi)用預(yù)算

1.搜索引擎的優(yōu)化首先是關(guān)鍵詞的優(yōu)化，關(guān)鍵詞的選擇是重中之重，它決定著網(wǎng)站被搜索的次數(shù)，決定了在搜索引擎里的影響力。網(wǎng)站的前期，大部分流量來自百度，Google，雅虎等搜索引擎。所以，選擇合適的關(guān)鍵詞，也是能左右網(wǎng)站流量來源的。

2.盡可能多的友情連接。友情連接最好能連接一些流量比自己高的，有知名度的網(wǎng)站。再次

是和自己內(nèi)容互補(bǔ)的網(wǎng)站，然后再是同類網(wǎng)站。

3.提供免費(fèi)功能，起到推廣目的。中國(guó)人都喜歡貪圖小便宜。來自互聯(lián)網(wǎng)的東西，大多喜歡是免費(fèi)的。現(xiàn)在很多手機(jī)類網(wǎng)站，手機(jī)鈴聲都是收費(fèi)的。短酷網(wǎng)提供和他們一樣甚至更好的服務(wù)，而不收費(fèi)。自然而然就會(huì)有人免費(fèi)代為宣傳。

4.百度貼吧。百度知道。這個(gè)地方，宣傳效果非常好。這個(gè)已經(jīng)是大眾的使用方法，我就不過累贅了。

5.QQ群推廣加入各大手機(jī)類QQ群，進(jìn)行變相推廣。并非用來發(fā)廣告，發(fā)廣告效果極差，QQ群是用來變相宣傳的。手機(jī)這個(gè)東西，有很多發(fā)燒友，他們熱衷于刷機(jī)，打補(bǔ)丁（本人也是如此，在本人手中手機(jī)已經(jīng)N個(gè)是被刷壞的。）QQ群的目的是為這些發(fā)燒友提供這方面信息。

6.加入同行網(wǎng)站聯(lián)盟。如手機(jī)之家，追魚等，還有很多其他網(wǎng)站。即網(wǎng)站合作。

7.撰寫有影響力的文章，或者技術(shù)性文章，此類文章較容易被推廣。隨之，網(wǎng)站亦被推廣。

8.去各大論壇發(fā)帖宣傳，是值得這么作的。尤其是手機(jī)類網(wǎng)站。當(dāng)然，發(fā)布的帖子，必須是變相廣告。

9.導(dǎo)航網(wǎng)站登陸對(duì)于網(wǎng)站初期來說,導(dǎo)航網(wǎng)站能帶來的流量遠(yuǎn)遠(yuǎn)超過搜索引擎以及其他方法.10.用戶互動(dòng)的門檻前期要盡量放低，待社區(qū)趨向形成后可逐漸規(guī)范。

11.推廣費(fèi)用：根據(jù)以上步驟實(shí)施大概的花1萬至2萬之間

五、要達(dá)到的效果是

通過多種推廣方式，將自己的品牌形象打造出去，讓更多的用戶通過推廣渠道找到我們。手機(jī)網(wǎng)站在發(fā)布1年以后實(shí)現(xiàn)獨(dú)立訪問用戶數(shù)量，與同類競(jìng)爭(zhēng)者相比排名主要在搜索引擎的表現(xiàn)、網(wǎng)站被鏈接的數(shù)量、注冊(cè)用戶數(shù)量等。

下載自學(xué)手機(jī)網(wǎng)站開發(fā)教程 手機(jī)網(wǎng)頁設(shè)計(jì)和制作（本站推薦）.doc

將本文檔下載到自己電腦，方便修改和收藏，請(qǐng)勿使用迅雷等下載。

點(diǎn)此處下載文檔

文檔為doc格式