第一篇：手機(jī)觸屏網(wǎng)站開發(fā)技巧總結(jié)

手機(jī)網(wǎng)站開發(fā) http://

手機(jī)觸屏網(wǎng)站開發(fā)技巧總結(jié)

偵測iPhone/iPod 開發(fā)特定設(shè)備的移動網(wǎng)站，首先要做的就是設(shè)備偵測了。下面是使用Javascript偵測iPhone/iPod的UA，然后轉(zhuǎn)向到專屬的URL。Code: if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){ if(document.cookie.indexOf(“iphone_redirect=false”)==-1){

window.location = “http://

Code:

阻止旋轉(zhuǎn)屏幕時自動調(diào)整字體大小

-webkit-text-size-adjust是webkit的私有css： Code: html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;} 偵測設(shè)備旋轉(zhuǎn)方向 iPhone可以在橫屏狀態(tài)下瀏覽網(wǎng)頁，有時候你會想知道用戶設(shè)備的手持狀態(tài)來增強(qiáng)可用性和功能。下面一段Javascript可以判斷出設(shè)備向哪個方向旋轉(zhuǎn)，并且替換css： Code: window.onload = function initialLoad(){updateOrientation();}

function updateOrientation(){

var contentType = “show_”;switch(window.orientation){

case 0: contentType += “normal”;break;

case-90: contentType += “right”;break;

case 90: contentType += “l(fā)eft”;

break;

case 180:

手機(jī)網(wǎng)站開發(fā) http://

contentType += “flipped”;break;}

document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);}

iPhone才識別的CSS

如果不想設(shè)備偵測，可以用CSS媒體查詢來專為iPhone/iPod定義樣式。Code: @media screen and(max-device-width: 480px){}

CSS3媒體查詢 對于CSS3的媒體（media）查詢，iPhone和iPad是不同的。通過這個技術(shù)，可以對設(shè)備不同的握持方向應(yīng)用不同的樣式，增強(qiáng)功能和體驗(yàn)。

iPhone是通過屏幕最大寬度來偵測的。是這樣：

Code: 而iPad有點(diǎn)不同，它直接使用了媒體查詢中的orientation屬性。是這樣： Code:

之后只要將不同的樣式分別定義出來就可以了。

縮小圖片

網(wǎng)站的大圖通常寬度都超過480像素，如果用前面的代碼限制了縮放，這些圖片在iPhone版顯示顯然會超過屏幕。好在iPhone機(jī)能還夠，我們可以用CSS讓iPhone自動將大圖片縮小顯示。Code:

@media screen and(max-device-width: 480px){

img{max-width:100%;height:auto;}

}

手機(jī)網(wǎng)站開發(fā) http://

注意如果原圖片非常大，或一個頁面非常多圖，最好還是在服務(wù)器端縮放到480像素寬，iPhone只需要在正常瀏覽時縮略到320像素。這樣不會消耗太多流量和機(jī)能。

默認(rèn)隱藏工具欄

iPhone的瀏覽器工具欄會在頁面最頂端，卷動網(wǎng)頁后才隱藏。這樣在加載網(wǎng)頁完成后顯得很浪費(fèi)空間，特別是橫向屏幕時。我們可以讓它自動卷動上去。Code:

模擬:hover偽類 因?yàn)閕Phone并沒有鼠標(biāo)指針，所以沒有hover事件。那么CSS :hover偽類就沒用了。但是iPhone有Touch事件，onTouchStart 類似 onMouseOver，onTouchEnd 類似 onMouseOut。所以我們可以用它來模擬hover。使用Javascript：

Code:

var myLinks = document.getElementsByTagName(?a?);for(var i = 0;i < myLinks.length;i++){

myLinks[i].addEventListener(?touchstart?, function(){this.className = “hover”;}, false);myLinks[i].addEventListener(?touchend?, function(){this.className = “”;}, false);

}

然后用CSS增加hover效果：

Code:

a:hover, a.hover { /* 你的hover效果 */ }

這樣設(shè)計一個鏈接，感覺可以更像按鈕。并且，這個模擬可以用在任何元素上。

手機(jī)網(wǎng)站開發(fā) http://

iphone fixed positioning

Code: 關(guān)于漂浮定位，測試后發(fā)現(xiàn) { position: fixed;} 不能為其用，可以改為 { position:absolute;} 來實(shí)現(xiàn)，可以使用iphone看下DEMO：iphone-fixed-positioning Touch Events iPhone 是使用觸屏的方式，所以就需要有手觸屏和離開的時候的事件機(jī)制，幸好，iPhone做好了這方面的工作，提供了四個處理touch的事 件：touchstart，touchend，touchmove，touchcancel(when the system cancels the touch)。

Gestures 即是指兩只手指接觸屏幕的時候縮放或者旋轉(zhuǎn)的效果，對于偵聽gestures，iPhone也有三個事件：gesturestart，gestureend，gesturechange。

同時事件參數(shù)event有兩個屬性：scale，rotate。Scale的中間值是1，大于1表示放大，小于1表示縮小。

手機(jī)網(wǎng)站開發(fā) http://

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

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

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

一是可參考的資料太少，大部分手機(jī)網(wǎng)站都處于起步階段，很多的時候都是摸著石頭過河，而鑒于手機(jī)網(wǎng)站的特殊性，也使得我們在參考成功案例之余，要做更多的思考； 二是兼容性工作異常艱辛，難度一點(diǎn)也不比web網(wǎng)站的兼容性工作來的低。對于手機(jī)網(wǎng)站來說，相信現(xiàn)在僅僅只是個開始，隨著各種新機(jī)型的相繼面世，這塊領(lǐng)域必將成為兵家必爭的新高地。

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

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

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

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

Nokia(78%)

Opera(OEM)(10%)

iPhone(Safari)(3%)

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

Nokia SymbianOS(80%)

iPhoneOS(6%)

SonyEricsson(5%)

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

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

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

XHTML部分：

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

表單元素的“disable”屬性

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

“button”標(biāo)簽

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

“iframe”標(biāo)簽。

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

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

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

CSS部分

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

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

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

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

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

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

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

“position”屬性；

“overflow”屬性；

“display”屬性；

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

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

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

“pading”屬性

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

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

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

JavaScript部分

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

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

其他

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

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

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

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

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

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

遵循XHTML Mobile Profile規(guī)范（WAP-277-XHTMLMP-20011029-a.pdf），簡稱為XHTML MP，也就是通常說的WAP2.0規(guī)范。XHTMLMP是為不支持XHTML的全部特性且資源有限的客戶端所設(shè)計的。它以XHTML Basic為基礎(chǔ)，加入了一些來自XHTML 1.0的元素和屬性。這些內(nèi)容包括一些其他元素和對內(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ī)對html支持的不好。

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

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

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

使用WCSS還是CSS？

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

避免空值屬性

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

網(wǎng)頁大小限制

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

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

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

四、推薦參考資料：

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

（漢化版）

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

手機(jī)型號查詢

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

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

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

五、總結(jié)

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

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

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

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

第三篇：網(wǎng)站開發(fā)中期總結(jié)

網(wǎng)站開發(fā)技術(shù)中期總結(jié)

網(wǎng)站開發(fā)是一門技術(shù)精深的學(xué)科，在這里學(xué)習(xí)了網(wǎng)站開發(fā)與網(wǎng)頁編寫的區(qū)別，學(xué)習(xí)了網(wǎng)頁編寫的基本語言HTML，學(xué)習(xí)了JSP技術(shù)，學(xué)習(xí)了利用Spring、Hibernate等框架優(yōu)化網(wǎng)頁編寫，通過這些學(xué)習(xí)，真正的了解了網(wǎng)站開發(fā)，也學(xué)會了一些簡單的開發(fā)技術(shù)。

HTML語言是網(wǎng)頁開發(fā)中最簡單也是最基本的標(biāo)簽語言，是學(xué)習(xí)網(wǎng)站開發(fā)最先學(xué)習(xí)的一門網(wǎng)頁編寫技術(shù)。HTML是一門語言，也可以說是一門標(biāo)簽，它能夠?qū)⒕W(wǎng)頁的各個組成部分利用簡單的標(biāo)簽進(jìn)行標(biāo)記，以使這些文字、圖片等內(nèi)容能夠滿足我們的需要，使其轉(zhuǎn)化成網(wǎng)頁的形式。一個網(wǎng)頁對應(yīng)于一個HTML文件，HTML文件以.htm或.html為擴(kuò)展名。可以使用任何能夠生成TXT類型源文件的文本編輯來產(chǎn)生HTML文件。標(biāo)準(zhǔn)的HTML文件都具有一個基本的整體結(jié)構(gòu)，即HTML文件的開頭與結(jié)尾標(biāo)志和HTML的頭部與實(shí)體2大部分。有3個雙標(biāo)記符用于頁面整體結(jié)構(gòu)的確認(rèn)。標(biāo)記符說明該文件是用HTML來描述的。它是文件的開頭，而則表示該文件的結(jié)尾，它們是HTML文件的始標(biāo)記和尾標(biāo)記。掌握HTML可以說是要進(jìn)入網(wǎng)站開發(fā)的最基本要素，也是大體了解網(wǎng)頁編寫的最直接最快途徑。XML是用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語言，可以用來標(biāo)記數(shù)據(jù)、定義數(shù)據(jù)類型，是一種允許用戶對自己的標(biāo)記語言進(jìn)行定義的源語言。XML是標(biāo)準(zhǔn)通用標(biāo)記語言(SGML)的子集，非常適合 Web 傳輸。XML 提供統(tǒng)一的方法來描述和交換獨(dú)立于應(yīng)用程序或供應(yīng)商的結(jié)構(gòu)化數(shù)據(jù)。XML與HTML的設(shè)計區(qū)別是：XML是用來存儲數(shù)據(jù)的，重在數(shù)據(jù)本

身；而HTML是用來定義數(shù)據(jù)的，重在數(shù)據(jù)的顯示模式。在學(xué)習(xí)中要分清楚他們的區(qū)別。JSP技術(shù)是在原有的靜態(tài)網(wǎng)頁設(shè)計中利用JAVA語言而進(jìn)行動態(tài)網(wǎng)頁設(shè)計的技術(shù)，JSP是由Sun Microsystems公司倡導(dǎo)、許多公司參與一起建立的一種動態(tài)網(wǎng)頁技術(shù)標(biāo)準(zhǔn)。JSP技術(shù)有點(diǎn)類似ASP技術(shù)，它是在傳統(tǒng)的網(wǎng)頁HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP標(biāo)記(tag)，從而形成JSP文件(*.jsp)。用JSP開發(fā)的Web應(yīng)用是跨平臺的，既能在Linux下運(yùn)行，也能在其他操作系統(tǒng)上運(yùn)行。JSP技術(shù)使用Java編程語言編寫類XML的tags和scriptlets，來封裝產(chǎn)生動態(tài)網(wǎng)頁的處理邏輯。網(wǎng)頁還能通過tags和scriptlets訪問存在于服務(wù)端的資源的應(yīng)用邏輯。JSP將網(wǎng)頁邏輯與網(wǎng)頁設(shè)計和顯示分離，支持可重用的基于組件的設(shè)計，使基于Web的應(yīng)用程序的開發(fā)變得迅速和容易。

Sping是一個開源框架，是為了解決企業(yè)應(yīng)用程序開發(fā)復(fù)雜性而創(chuàng)建的?？蚣艿闹饕獌?yōu)勢之一就是其分層架構(gòu)，分層架構(gòu)允許您選擇使用哪一個組件，同時為 J2EE 應(yīng)用程序開發(fā)提供集成的框架。Sping框架將原有的各種框架進(jìn)行了縫合，使得原有的網(wǎng)站開發(fā)中各種框架能夠更加的簡單明了的表達(dá)所需要的功能。Spring不重新開發(fā)已有的東西。因此，在Spring中你將發(fā)現(xiàn)沒有日志記錄的包,沒有連接池,沒有分布事務(wù)調(diào)度。這些均有開源項目提供(例如Commons Logging 用來做所有的日志輸出，或Commons DBCP用來作數(shù)據(jù)連接池),或由你的應(yīng)用程序服務(wù)器提供。Spring框架的使用更加的簡化了網(wǎng)站開

發(fā)的難度，在極其方便快捷中就能夠編寫出與用JSP相同功能的程序代碼，是網(wǎng)站開發(fā)的一大進(jìn)步。

Hibernate是一個開放源代碼的對象關(guān)系映射框架，它對JDBC進(jìn)行了非常輕量級的對象封裝，使得Java程序員可以隨心所欲的使用對象編程思維來操縱數(shù)據(jù)庫。Hibernate可以應(yīng)用在任何使用JDBC的場合，既可以在Java的客戶端程序使用，也可以在Servlet/JSP的Web應(yīng)用中使用，最具革命意義的是，Hibernate可以在應(yīng)用EJB的J2EE架構(gòu)中取代CMP，完成數(shù)據(jù)持久化的重任。在Spring框架加上Hibernate框架中開發(fā)網(wǎng)站，能夠最大限度的優(yōu)化動態(tài)網(wǎng)頁的編寫，擁有最大量的數(shù)據(jù)量。

網(wǎng)站開發(fā)從最開始的僅僅利用文字、圖片的靜態(tài)網(wǎng)頁到現(xiàn)在包含有大量數(shù)據(jù)的動態(tài)網(wǎng)頁，從只使用HTML標(biāo)簽語言到現(xiàn)在的JSP、ASP、HPH等大量技術(shù)，已經(jīng)從單一到豐富，從一個計算機(jī)附屬到獨(dú)立學(xué)科。

第四篇：網(wǎng)站開發(fā)實(shí)習(xí)總結(jié)

網(wǎng)站開發(fā)實(shí)習(xí)

個人實(shí)習(xí)總結(jié)

實(shí)習(xí)類型 實(shí)踐教學(xué) 實(shí)習(xí)單位 ````學(xué)院 指導(dǎo)教師 ````` 所在院（系）信息技術(shù)系 班 級 ````班 姓 名 ```` 學(xué) 號 ``````````

一、實(shí)習(xí)時間和地點(diǎn)

日期：```````````````````` 時間：`````````````````````` 地點(diǎn)：````````````````````````

二、實(shí)習(xí)的內(nèi)容

1、小組題目：```````網(wǎng)站制作

2、我的任務(wù)：網(wǎng)站二級頁面制作

3、每天具體實(shí)習(xí)內(nèi)容

（一）小組商議制作網(wǎng)頁內(nèi)容，分工制作內(nèi)容。

（二熟悉網(wǎng)頁制作工具，尋找素材，設(shè)計大概模版。

（三）；制作網(wǎng)站二級頁面。利用工具DREAMWEAVER制作。具體內(nèi)容如下。用DREAMWEAVER創(chuàng)建站點(diǎn)是很容易的。首先，我們來看一下創(chuàng)建一個只包含一個網(wǎng)頁的站點(diǎn)。選擇“文件”菜單的“新建”選項，單擊“站點(diǎn)”命令，這時新建站點(diǎn)對話框就彈出來了，在“指定新站點(diǎn)位置”文本框中輸入新站點(diǎn)的位置，單擊“只有一個網(wǎng)頁的站點(diǎn)” 圖標(biāo)，單擊“確定”按鈕。這就建立好站點(diǎn)了，我們現(xiàn)在來看一下新的站點(diǎn)里有什么，單擊“視圖”工具條的“文件夾”按鈕。在文件夾列表里有一個網(wǎng)頁文件，名字叫做“index.htm”。我們知道，每一個站點(diǎn)都要有一個主頁，這個主頁也是一個網(wǎng)頁文件。瀏覽者訪問站點(diǎn)時首先進(jìn)入的就是站點(diǎn)的主頁。主頁的名字在一般情況下就叫做“index.htm”。就是說我們新建只包含一個網(wǎng)頁的站點(diǎn)時，DREAMWEAVER就自動為我們創(chuàng)建了站點(diǎn)的主頁了。這個新建的站點(diǎn)主頁時空的，我們可以向里面添加內(nèi)容.在文件列表里除了主頁之外，還有文件夾。新建站點(diǎn)時，DREAMWEAVER都會在站點(diǎn)所在位置下新建兩個文件夾，一個是“images”另一個是“_private”。我們在編輯站點(diǎn)時可以在“image”文件夾里放置站點(diǎn)用到的圖片。“private”文件夾比較特殊，其中的文件對瀏覽者來說是隱含的，我們可以把一些不想讓瀏覽者看到的網(wǎng)頁文件放在這個文件夾里，比如：我們可以在這個文件夾里存放注冊用戶的個人信息。盡管每一個站點(diǎn)都要有一個主頁，不過創(chuàng)建站點(diǎn)時我們?nèi)匀豢梢詮囊粋€空站點(diǎn)開始：選擇“文件”菜單的“新建”命令，單擊“站點(diǎn)”選項，在“新建站點(diǎn)”對話框里，我們可以選擇“空站點(diǎn)”圖標(biāo)來創(chuàng)建一個空站點(diǎn)。“新建站點(diǎn)”對話框中還有許多其他圖標(biāo)，這是DREAMWEAVER提供的用來創(chuàng)建站點(diǎn)模板或向?qū)?。我們?chuàng)建只有一個網(wǎng)頁的站點(diǎn)或者創(chuàng)建空站點(diǎn)，都是從頭開始來創(chuàng)建一個站點(diǎn)，這就好像蓋房子一樣，首先畫圖紙。然而，有許多的房子都具有相似的結(jié)構(gòu)和用途，所以我們可以用一張圖紙蓋很多相似的房子，這樣就節(jié)省了許多工作。同樣的，盡管站點(diǎn)的風(fēng)格千差萬別但是有許多站點(diǎn)的功能和結(jié)構(gòu)都是一樣的，如果我們從頭開始建立站點(diǎn)的話，就要做許多重復(fù)勞動，這時，我們就可以使用模板或向?qū)斫⒄军c(diǎn)。模板和向?qū)У淖饔镁秃孟裆w房子的圖紙一樣，我們不必每次建立站點(diǎn)時都從頭開始。我們單擊“個人站點(diǎn)”圖標(biāo)，用它可以迅速創(chuàng)建一個個人站點(diǎn)，輸入站點(diǎn)所在的位置，單擊“確定”按鈕，這樣我們剛就創(chuàng)建了個人站點(diǎn)。個人站點(diǎn)模板已經(jīng)為我們規(guī)劃好了站點(diǎn)的目錄和建立了相關(guān)的頁面?，F(xiàn)在我們點(diǎn)擊一下“文件夾”按鈕，雙擊index.htm圖標(biāo)，我們安裝軟件時，一步步的用對話框提示我們完成安裝過程的程序就是一個向?qū)?。?/p>

DREAMWEAVER里，向?qū)б彩且环N模板，不過它是一種特殊的模板，它會以對話框的形式輔助你完成站點(diǎn)的創(chuàng)建過程。現(xiàn)在我們選擇“文件”菜單的“新建”選項，單擊“站點(diǎn)”命令，你看，DREAMWEAVER提供了兩個向?qū)В汗菊故鞠驅(qū)А⒂懻撜军c(diǎn)向?qū)?，使用起來都很方便，你有興趣也可以利用向?qū)Ы⒁粋€站點(diǎn)。創(chuàng)建頁面最簡單的方法就是單擊DREAMWEAVER“常用”工具欄的“新建”按鈕。它的右方有一個向下的小箭頭，它是用來選擇要新建什么，可以用“新建”按鈕新建網(wǎng)頁、站點(diǎn)、文件夾和任務(wù)。默認(rèn)狀態(tài)下是新建網(wǎng)頁。如果要新建網(wǎng)頁，可以不用向下箭頭鍵選擇，而直接單擊“新建”按鈕。不過使用文件菜單的“新建”命令來新建網(wǎng)頁能夠有更大的選擇。單擊文件菜單的“新建”命令，選擇“新建網(wǎng)頁”，在“新建”對話框里，可以看到DREAMWEAVER提供的許多網(wǎng)頁模板，我們可以用這些模板來建立相應(yīng)的網(wǎng)頁。在右下角的預(yù)覽框里可以看到選中模板的外觀。選擇“兩欄正文”網(wǎng)頁，這樣就創(chuàng)建了一個新的分為兩欄的網(wǎng)頁了。然后點(diǎn)確定。使用模板可以不用總是從空白網(wǎng)頁開始編輯，這樣就省力很多。網(wǎng)上幾乎所以的網(wǎng)頁都使用圖片加以點(diǎn)綴，在網(wǎng)頁中插入適當(dāng)?shù)膱D片，能夠產(chǎn)生圖文并茂的效果。來看一下用文字來建立鏈接首先創(chuàng)建一個指向站點(diǎn)內(nèi)其他網(wǎng)頁的超鏈接。選擇“插入”菜單的“超鏈接”命令，在文件列表框內(nèi)選擇“頁面1.htm”文件，注意在URL文本框中顯示了該文件的地址。單擊“確定”按鈕.超鏈接就制作成功了。我們切換到預(yù)覽模式（單擊預(yù)覽按鈕），當(dāng)我們把鼠標(biāo)指向“主頁”兩字時鼠標(biāo)變成手形，單擊它，我們就切換到主頁了。這樣我們就差不多完成了網(wǎng)頁的制作步驟，最后可將它發(fā)布到Web服務(wù)器上。站點(diǎn)發(fā)布前還要對它進(jìn)行檢查工作，包括超鏈接，頁面等。

三、心得體會

1.成績與收獲

熟悉了HTML的基本語法, 初步掌握使用HTML編寫網(wǎng)頁，較熟悉網(wǎng)頁制作工具DREAMWEAVER。學(xué)會了網(wǎng)頁的制作，學(xué)會了網(wǎng)頁特效，怎樣的特效才能凸現(xiàn)網(wǎng)頁主題。在幾節(jié)課的網(wǎng)頁制作中了解到了合作的重要性，制作是雖然是每人負(fù)責(zé)一個網(wǎng)頁，但也要互相交流，互轉(zhuǎn)自相幫助，不能只顧自己，要吸取他人的優(yōu)點(diǎn)，如：網(wǎng)頁的排版，網(wǎng)頁的特效等等，都值得我去學(xué)習(xí)。還要聽取他人的意見和建議，不能只顧自己，這分?jǐn)?shù)是集體的，不是個人的。如果有什么好的方法和效果要和大家一起分享。這樣才能使網(wǎng)頁更完整，更優(yōu)秀。

2.問題與不足

DW中對空格輸入的限制。

在asp中把文件上傳到服務(wù)器、保存到數(shù)據(jù)庫中、然后再讀出來。還有批量上傳、從表單中把上傳的文件與其它項分離等問題。

批量更新，批量刪除，數(shù)據(jù)庫里面的東西。

如何動態(tài)調(diào)用數(shù)據(jù)庫的資料，并與asp程序進(jìn)行交互。

css里面有屬性 text-algin 設(shè)計文本水平對齊方式，在IE8 以下版本，都能正常使用，為什么在IE8里面卻不管用，跟本沒有效果，但把網(wǎng)頁里面的dtd聲明去掉之后，這個屬性就管用了。

在asp中，如何在后臺使用javascript連接數(shù)據(jù)庫，還有 前臺javascript

能否跟后臺vbscritp交互，如果不能說明理由，如果后臺程序是javasctipt 前臺javascript能否跟后臺javascript進(jìn)行數(shù)據(jù)交互。

3.對策與建議

DW中對空格輸入的限制是針對“半角”文字狀態(tài)而言的，因此通過將輸入法調(diào)整到全角模式就可以避免了，方法是：打開中文輸入法（以人工智能ABC為例），按Shift+Space切換到全角狀態(tài)，現(xiàn)在應(yīng)該沒問題了。

關(guān)于如何控制表單和表單處理的問題，先用html做個表單，一定要有