網(wǎng)頁(yè)模板就是已經(jīng)做好的網(wǎng)頁(yè)框架，使用網(wǎng)頁(yè)編輯軟件輸入自己需要的內(nèi)容，再發(fā)布到自己的網(wǎng)站。每個(gè)網(wǎng)頁(yè)模板壓縮包內(nèi)包含：PSD圖片文件(可用Photoshop、ImageReady或Fireworks修改)，按鈕圖片PSD文件、Flash源文件和字體文件，推薦使用Dreamweaver軟件向網(wǎng)頁(yè)模板添加內(nèi)容。1）模板的概念：作為創(chuàng)建其它文檔的樣板的文檔。創(chuàng)建模板時(shí)，可以說(shuō)明哪些網(wǎng)頁(yè)元素不可編輯，哪些元素可以編輯。其擴(kuò)展名為.dwt。2）模板的作用：有利于保持網(wǎng)頁(yè)風(fēng)格的一致；提高工作效率。1．創(chuàng)建模板1）創(chuàng)建一個(gè)全新的模板：在模板面板中，使用快捷菜單按鈕或單擊面板上的新建按鈕模板面板的打開(kāi)：Window菜單--Templates2）創(chuàng)建基于文檔的模板：File菜單-Save As Template2．設(shè)置模板頁(yè)面屬性1）用模板創(chuàng)建的文檔繼承模板的頁(yè)面屬性，頁(yè)標(biāo)題除外。2）設(shè)置：Modify菜單-Page Properties3．定義模板的可編輯區(qū)1）定義模板的可編輯區(qū)在模板文檔中選定對(duì)象、Modify菜單、Templates、New Editable Region2）取消可編輯區(qū)標(biāo)記Modify菜單-Templates-Remove Editable Region

第一步，先講解一下主題模板的構(gòu)成。模板均分為三大部分，①網(wǎng)頁(yè)的html文件②CSS文件③圖片文件。一般情況修改模板只需修改這三部分。第二步，你可以讓模板可視化再修改。幾乎所有默認(rèn)的源碼網(wǎng)頁(yè)模板的路徑都是系統(tǒng)自帶的標(biāo)簽。這樣把講HTML文件放入Dreamweaver里時(shí)會(huì)是一堆的代碼。如何將程序模板轉(zhuǎn)換為可視化界面呢。其實(shí)只需要修改CSS和圖片路徑就可以了。如下面這段代碼：<link rel="stylesheet" rev="stylesheet" href="<#ZC_BLOG_HOST#>themes/<#ZC_BLOG_THEME#>/style/<#ZC_BLOG_CSS#>.css" type="text/css" media="screen" />部分就是系統(tǒng)標(biāo)簽，這時(shí)你可以修改成你本機(jī)的虛擬路徑。其他的程序標(biāo)簽都有說(shuō)明，請(qǐng)查看相關(guān)系統(tǒng)標(biāo)簽。如：<link href="../style/css/LuSongSong-Index.css" rel="stylesheet" type="text/css" />修改好之后你就可以在Dreamweaver里面直觀的看到網(wǎng)頁(yè)界面了，并且修改起來(lái)也非常方便。（記得模板修改之后別忘記把CSS路徑改回去哦！）

自己可以做的，運(yùn)用建站寶盒，下載一個(gè)免費(fèi)的模板，修改一下里邊的內(nèi)容就可以了。

選擇模板先百度搜索兔展，進(jìn)入網(wǎng)站后注冊(cè)賬號(hào)并登錄后，即可進(jìn)入制作界面。在界面上可以看很多可供使用的模板，根據(jù)自己的需要，點(diǎn)擊相應(yīng)的模板。進(jìn)入制作平臺(tái)選擇完模板后，會(huì)自動(dòng)進(jìn)入制作平臺(tái)。在制作平臺(tái)上，主要分三大區(qū)域：左側(cè)的作品結(jié)構(gòu)顯示區(qū)域，中間的是作品制作區(qū)域，右側(cè)的是組件屬性修改區(qū)域。文字1、功能定義：用于展示文字內(nèi)容，通過(guò)修改文字的顯示屬性，可以生成各式各樣的顯示效果。2、操作方法：點(diǎn)擊右側(cè)的文字選項(xiàng)，編輯面板的右上角會(huì)出現(xiàn)文字輸入框，雙擊輸入框可以修改文字內(nèi)容；修改右側(cè)的屬性選項(xiàng)，可以改變文字的顯示樣式。3、屬性說(shuō)明：1）字體：改變文字的字體，提供的是兔展數(shù)據(jù)庫(kù)的字體，非電腦本地字體。2）字號(hào)：修改文字的顯示大小。3）行距：修改兩行文字間的間距。4）調(diào)色板：修改文字顏色。5）寬度：修改文字輸入框的寬度，單位像素。6）高度：修改文字輸入框的高度，單位像素。7）透明度：修改文字的透明度，100%為不透明，0%為全透明。8）旋轉(zhuǎn)：調(diào)整文字與水平線的夾角，正數(shù)為順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn)。圖片1、功能解釋：用于顯示圖片，通過(guò)修改圖片的顯示屬性，可以改變圖片的大小、透明度、角度等。2、操作方法：1）激活功能：點(diǎn)擊右側(cè)的圖片選項(xiàng)，編輯面板的右上角會(huì)出現(xiàn)兔展的logo圖片。2）上傳新圖片：點(diǎn)擊屬性欄中的上傳按鈕，上傳本地電腦中的圖片進(jìn)入替換。3）圖片庫(kù)中的圖片：如果之前已經(jīng)上傳過(guò)圖片，可以從圖片庫(kù)中選擇需要顯示的圖片。4）截圖：按住鼠標(biāo)左鍵拖動(dòng)選擇圖片區(qū)域，然后點(diǎn)擊截圖按鈕或者雙擊選中的圖片區(qū)域，便可以裁剪出選中的圖片區(qū)域。3、屬性說(shuō)明：1）寬度：修改圖片的寬度。2）高度：修改圖片的高度。3）原比例：此選項(xiàng)打上勾好，圖片的寬度和高度將按照?qǐng)D片原來(lái)的比例顯示，修改其中的一個(gè)數(shù)值，另外一個(gè)數(shù)值會(huì)除之改變。4）透明度：修改圖片的透明度，100%為不透明，0%為全透明。5）旋轉(zhuǎn)：調(diào)整圖片與水平線的夾角，正數(shù)為順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn)。按鈕1、功能解釋：用于添加鏈接按鈕，可以添加一切頁(yè)面的鏈接，如:微博鏈接、微信公眾號(hào)關(guān)注鏈接、官網(wǎng)鏈接、淘寶鏈接等等。2、操作方法：點(diǎn)擊右側(cè)的按鈕選項(xiàng)，編輯面板的右上角會(huì)出現(xiàn)文字輸入框；修改右側(cè)的屬性選項(xiàng)，可以改變按鈕的參數(shù)和樣式。3、屬性說(shuō)明：1）文字：修改按鈕上顯示的文字。2）鏈接：需要按鈕鏈接到的頁(yè)面，注意鏈接開(kāi)頭要包含“ http:// ”。3）填充色：按鈕上的背景顏色。4）邊框色：按鈕的邊框顏色。5）形狀-邊框：修改邊框的寬度，“0”代表按鍵無(wú)邊框。6）邊框-圓角：修改邊框邊角的圓潤(rùn)程度，數(shù)值越大，按鈕邊角越圓潤(rùn)。7）寬度：修改按鈕的寬度。8）高度：修改按鈕的高度。9）透明度：修改按鈕的透明度，100%為不透明，0%為全透明。10）旋轉(zhuǎn)：調(diào)整按鈕與水平線的夾角，正數(shù)為順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn)。表單1、功能解釋：是允許用戶在表單中輸入并提交文本信息的功能組件，用戶提交的信息可以在帳戶欄目下的表單數(shù)據(jù)中顯示。表單中，可以自定義每個(gè)選項(xiàng)的名稱和項(xiàng)目的數(shù)量。2、操作方法：點(diǎn)擊右側(cè)的表單選項(xiàng)，彈出新建表單窗口，對(duì)表單內(nèi)容進(jìn)入添加。3、屬性說(shuō)明：1）表單標(biāo)題：添加表單的標(biāo)題。2）行標(biāo)題：添加表單的行標(biāo)題。3）按鈕內(nèi)容：添加按鈕的顯示文字。

你在瀏覽器里面選擇 ： 工具>>>> IE選項(xiàng)>>>>> 刪除文件 （在哪個(gè)脫機(jī)文件前面選中）>>>確定 ~！ 完成后就好了 ~！ 如果不行的話那也學(xué)就是網(wǎng)站或是你電腦的問(wèn)題了 ~！

網(wǎng)上下的網(wǎng)頁(yè)模板是靜態(tài)的html或者shtml頁(yè)面，要用在真實(shí)項(xiàng)目中需要把它們改寫(xiě)成動(dòng)態(tài)網(wǎng)頁(yè)jsp文件來(lái)在服務(wù)器端執(zhí)行。修改方法如下：1、點(diǎn)擊html文件，右鍵->重命名，修改成.jsp文件。2、把.jsp文件導(dǎo)入工程中發(fā)布到web容器。3、運(yùn)行工程，用http://localhost:8080/test.jsp來(lái)訪問(wèn)。JSP全稱是JavaServer Pages，它和servle技術(shù)一樣，都是SUN公司定義的一種用于開(kāi)發(fā)動(dòng)態(tài)web資源的技術(shù)。JSP這門(mén)技術(shù)的最大的特點(diǎn)在于，寫(xiě)jsp就像在寫(xiě)html，但：它相比html而言，html只能為用戶提供靜態(tài)數(shù)據(jù)，而Jsp技術(shù)允許在頁(yè)面中嵌套java代碼，為用戶提供動(dòng)態(tài)數(shù)據(jù)。相比servlet而言，servlet很難對(duì)數(shù)據(jù)進(jìn)行排版，而jsp除了可以用java代碼產(chǎn)生動(dòng)態(tài)數(shù)據(jù)的同時(shí)，也很容易對(duì)數(shù)據(jù)進(jìn)行排版。不管是JSP還是Servlet，雖然都可以用于開(kāi)發(fā)動(dòng)態(tài)web資源。但由于這2門(mén)技術(shù)各自的特點(diǎn)，在長(zhǎng)期的軟件實(shí)踐中，人們逐漸把servlet作為web應(yīng)用中的控制器組件來(lái)使用，而把JSP技術(shù)作為數(shù)據(jù)顯示模板來(lái)使用。

首頁(yè)代碼文件所在文件為：themes文件夾下default文件夾里面，如截圖所示：首頁(yè)模版文件為dwt格式，dwt 文件是網(wǎng)頁(yè)模板文件(Dreamweaver Template)。

初學(xué)者應(yīng)該做一個(gè)一個(gè)模塊，實(shí)現(xiàn)各種新功能，把這些做好了再想網(wǎng)頁(yè)的布局吧。不可急功近利。 嗯，你說(shuō)的那個(gè)已經(jīng)看網(wǎng)上的視頻學(xué)習(xí)一遍了，現(xiàn)在想具體實(shí)踐一下，你有什么好的建議嗎 自己寫(xiě)個(gè)小游戲，比如連連看，坦克大戰(zhàn)等練練，這比你寫(xiě)幾十個(gè)網(wǎng)頁(yè)更有提高

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            body{                height:500px;                background: linear-gradient(#A6CADE,#F8C6F8) no-repeat;            }            ul,li,div {                padding:0;margin:0;            }            .container{                width: 500px;                margin:0 auto;            }            #tab-con div{                display: none;                width:500px;                height:282px;            }            #tab-con div img{                width: 100%;                height:100%;            }            #tab-con div.active{                display: block;            }            #tab-list ul li{                float:left;                list-style: none;                          }            #tab-list ul li a{                display: block;                width:70px;                text-align: center;                text-decoration: none;                color:#000;                background: #D6D6D1;            }            #tab-list ul li.active a{                color:#fff;                background:#f96302;            }        </style>    </head>    <body>        <div class="container">            <div id="tab-con">                <div class="active"><img src="img/test1.jpg"></div>                <div><img src="img/test2.jpg"></div>                <div><img src="img/test3.jpg"></div>                <div>圖片4</div>                <div>圖片5</div>                <div>圖片6</div>                <div>圖片7</div>            </div>            <div id="tab-list">                <ul>                    <li><a href="javascript:;">首頁(yè)</a></li>                    <li><a href="javascript:;">美食</a></li>                    <li><a href="javascript:;">交通</a></li>                    <li><a href="javascript:;">圖片4</a></li>                    <li><a href="javascript:;">圖片5</a></li>                    <li><a href="javascript:;">圖片6</a></li>                    <li><a href="javascript:;">圖片7</a></li>                </ul>            </div>        </div>        <script>            var tablist = document.getElementById('tab-list').getElementsByTagName('li');            var tabcon = document.getElementById('tab-con').getElementsByTagName('div');                         for(var i = 0; i<tablist.length; i++){                tablist[i].onclick = function(){                    starttab(this);                };            };                         function starttab(obj){                for(var i = 0; i<tablist.length; i++){                    if(tablist[i] == obj){                        tablist[i].className = "active";                        tabcon[i].className = "active";                    }else{                        tablist[i].className = "";                        tabcon[i].className = "";                    };                };            };        </script>    </body></html>