《html10使用模板統(tǒng)一頁(yè)面風(fēng)格.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《html10使用模板統(tǒng)一頁(yè)面風(fēng)格.ppt(26頁(yè)珍藏版)》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、第十章使用模板統(tǒng)一頁(yè)面風(fēng)格,回顧,請(qǐng)簡(jiǎn)述網(wǎng)站開(kāi)發(fā)的基本步驟？框架布局的優(yōu)缺點(diǎn)？表格布局的適用場(chǎng)合？DIV布局的優(yōu)點(diǎn)以及適用場(chǎng)合？,本章任務(wù),制作網(wǎng)站的模板頁(yè)用模板頁(yè)重新制作“裝備”的商品展示頁(yè)用模板頁(yè)制作“裝備”商品的詳細(xì)介紹頁(yè)用模板頁(yè)制作商品“購(gòu)買頁(yè)面”制作樣式表文件并和其他頁(yè)面綁定,會(huì)用Dreamweaver制作模板頁(yè)并應(yīng)用到其他頁(yè)面會(huì)用Dreamweaver制作樣式文件并綁定到各頁(yè)面會(huì)使用網(wǎng)站開(kāi)發(fā)流程制作并發(fā)布網(wǎng)站,本章目標(biāo),為什么需要模板,大家想想這幾個(gè)頁(yè)面有相同的地方嗎？,為什么需要模板,上一張ppt中三個(gè)頁(yè)面的頭部和尾部完全相同，那我們做網(wǎng)頁(yè)的時(shí)候要是每次得重新制作頁(yè)面的頭部和尾部。

2、，那多耗時(shí)耗力啊！該怎么辦？,如果這些相同的頁(yè)面的頭部和尾部能用一個(gè)文件來(lái)代替該多好啊！每次只用制作頁(yè)面中不同的部分，相同的部分不用管。,這些相同的部分可以制作成一個(gè)文件，它就是模板,演示示例1：將現(xiàn)有文檔保存為模板的步驟,制作模板,制作模板頁(yè)有兩種方式，下面分別加以介紹：將現(xiàn)有文檔保存為模板1、打開(kāi)HTML文檔2、選擇“文件”“另存為模板”3、設(shè)置相關(guān)屬性，然后“保存”,模板保存的位置,給模板起的名字,制作模板,新建空白模板1、選擇“窗口”“資源”2、在“資源”面板上新建模板3、設(shè)置相關(guān)屬性，然后“保存”,按F11健也行,1、單擊“模板”圖標(biāo),2、單擊“新建模板”圖標(biāo),演示示例2：新建空白模。

3、板的步驟,創(chuàng)建模板后，默認(rèn)情況下，應(yīng)用模板的文檔都處于非編輯狀態(tài)，那怎么辦？,為模板定義可編輯區(qū)域,制作模板,定義可編輯區(qū)域添加基本可編輯區(qū)域1、在模板文檔中選擇要設(shè)置為可編輯的區(qū)域2、“插入”“模板對(duì)象”“可編輯區(qū)域”刪除可編輯區(qū)域1、選擇要編輯的區(qū)域2、“修改”“模板”“刪除模板標(biāo)記”,演示示例3：添加和刪除可編輯區(qū)域,已添加的“可編輯區(qū)域3”，可刪除,不可編輯區(qū)域,不可編輯區(qū)域,應(yīng)用模板,將模板應(yīng)用于頁(yè)面的步驟如下：1、新建要應(yīng)用模板的空白文檔2、在“資源”面板找到要應(yīng)用的模板3、將模板拖到空白“文檔”中4、在可編輯區(qū)域添加或編輯數(shù)據(jù),演示示例4：應(yīng)用模板素材應(yīng)用模板答案,應(yīng)用了模板的頁(yè)。

4、面,此區(qū)域可編輯,其他區(qū)域不可編輯,應(yīng)用模板,演示示例5：應(yīng)用模板素材應(yīng)用模板答案,用模板頁(yè)重新制作“裝備”的商品展示頁(yè),用模板頁(yè)重新制作“裝備”的商品展示頁(yè)的步驟1、新建空白文檔2、應(yīng)用模板3、在可編輯區(qū)域添加未應(yīng)用模板的商品展示頁(yè)內(nèi)容,第一步：新建空白文檔,第二步：應(yīng)用模板,第三步：在可編輯區(qū)域添加內(nèi)容,應(yīng)用模板,演示示例6：應(yīng)用模板素材應(yīng)用模板答案,用模板頁(yè)制作“裝備”商品的詳細(xì)介紹頁(yè),用模板頁(yè)重新制作“裝備”的詳細(xì)介紹頁(yè)的步驟1、新建空白文檔2、應(yīng)用模板3、在可編輯區(qū)域添加未應(yīng)用模板的商品的詳細(xì)介紹頁(yè)內(nèi)容,用了模板的商品詳細(xì)介紹頁(yè),應(yīng)用模板,演示示例7：應(yīng)用模板素材應(yīng)用模板答案,用模板。

5、頁(yè)制作“購(gòu)買頁(yè)面”,用模板頁(yè)制作“購(gòu)買頁(yè)面”的步驟1、新建空白文檔2、應(yīng)用模板3、在可編輯區(qū)域添加未應(yīng)用模板的“購(gòu)買頁(yè)面”,用了模板的“購(gòu)買頁(yè)面”,小結(jié)1,用模板頁(yè)制作登錄、注冊(cè)頁(yè)面,練習(xí)答案1,練習(xí)素材1,練習(xí)素材2,練習(xí)答案2,用了模板的“登錄頁(yè)面”,用了模板的“注冊(cè)頁(yè)面”,制作樣式表,大家發(fā)現(xiàn)前面應(yīng)用模板的頁(yè)面中存在的問(wèn)題嗎？是不是字體過(guò)大、顏色搭配不合理、超鏈接樣式極其難看、文本不規(guī)整等？那如何解決這些問(wèn)題？,使用制作好的樣式表文件，并和相關(guān)頁(yè)面綁定,創(chuàng)建樣式文件教員演示創(chuàng)建樣式文件的步驟：1、選擇“文件”“新建”2、選擇“基本頁(yè)”“CSS”3、單擊“創(chuàng)建”,制作樣式表,演示示例8：演。

6、示創(chuàng)建樣式文件,1、選擇“基本頁(yè)”,2、選擇“CSS”,3、選擇“創(chuàng)建”,制作樣式表,查看樣式源代碼,定義樣式規(guī)則教員演示定義樣式規(guī)則的步驟：1、選擇“窗口”“CSS樣式”2、在“CSS樣式”面板中，右擊新建3、分別新建標(biāo)簽body、a等的樣式4、分別新建ID樣式#head、ID樣式#search_form等5、分別新建類樣式.fontcolor_white、類樣式.tableBorder等,制作樣式表,應(yīng)用樣式文件教員演示兩種方式應(yīng)用樣式文件：1、打開(kāi)要應(yīng)用樣式的網(wǎng)頁(yè)2、在屬性面板中單擊“樣式”下拉框3、選擇附加樣式4、選擇要引入的樣式文件,1、選擇附加樣式表,2、選擇樣式文件,3、選擇附加。

7、方式,4、單擊確定,對(duì)此頁(yè)面應(yīng)用樣式,應(yīng)用樣式文件,對(duì)未應(yīng)用樣式的商品的詳細(xì)介紹頁(yè)綁定樣式文件,應(yīng)用了樣式的詳細(xì)商品介紹頁(yè),比未應(yīng)用樣式前美觀多啦!,演示示例9：樣式演示素材樣式演示答案,設(shè)置頁(yè)面間的鏈接,主頁(yè)、登錄頁(yè)面、注冊(cè)頁(yè)面、商品展示頁(yè)、商品詳細(xì)介紹頁(yè)、購(gòu)買頁(yè)等頁(yè)面都做好了并且應(yīng)用了模板和樣式，如何將這些頁(yè)面之間相互關(guān)聯(lián)起來(lái)？,使用超鏈接,設(shè)置頁(yè)面間的鏈接,演示示例10：教員設(shè)置不同頁(yè)面之間的超鏈接,教員演示如下操作：1、將”首頁(yè)”和”登錄頁(yè)”、”注冊(cè)”頁(yè)鏈接2、將寶貝分類欄目中的“裝備”和”商品”展示頁(yè)鏈接3、將”商品展示”頁(yè)和“快樂(lè)幻想去神愿石”商品詳細(xì)介紹頁(yè)鏈接4、將“快樂(lè)幻想去神。

8、愿石”商品詳細(xì)介紹頁(yè)中的”立刻購(gòu)買”和“購(gòu)買頁(yè)”鏈接,發(fā)布站點(diǎn),演示示例12：教員演示IIS安裝過(guò)程,安裝過(guò)程中，提示“插入磁盤”，就插入WindowsServer2003EnterpriseEdition光盤,安裝IIS1、打開(kāi)“控制面板”2、雙擊“添加或刪除程序”圖標(biāo)3、單擊”添加刪除Windows組件”按鈕4、選中“應(yīng)用程序服務(wù)”并單擊”詳細(xì)信息”按鈕5、選中“Internet信息服務(wù)(IIS)”，然后單擊”確定”6、單擊”下一步”進(jìn)行安裝，最后單擊“完成”,測(cè)試并發(fā)布網(wǎng)站,測(cè)試內(nèi)容頁(yè)面效果是否美觀鏈接是否完好測(cè)試不同瀏覽器的兼容性,1、檢查單個(gè)頁(yè)面鏈接2、檢查整個(gè)站點(diǎn)的鏈接,1、設(shè)置希。

9、望檢查的瀏覽器及其版本2、檢查單個(gè)頁(yè)面或整站的兼容性,演示示例11：檢查鏈接是否完好和測(cè)試兼容性,演示示例13：教員演示上傳網(wǎng)站的過(guò)程,發(fā)布站點(diǎn),上傳網(wǎng)站,1、選擇“管理站點(diǎn)”,2、選中一個(gè)已創(chuàng)建好的站點(diǎn)，然后單擊“編輯”,3、選擇“遠(yuǎn)程信息”,4、選擇“本地/網(wǎng)絡(luò)”,5、指定網(wǎng)站發(fā)布的目錄為“C:Inetpubwwwroot”下,6、單擊“確定”,7、單擊“上傳文件”圖標(biāo)，就可以把taobaoweb站點(diǎn)上傳到“C:Inetpubwwwroot”目錄下,網(wǎng)站上傳到指定的服務(wù)器上之后，該如何訪問(wèn)呢？,發(fā)布站點(diǎn),訪問(wèn)網(wǎng)站由于我們的網(wǎng)站是上傳到本地服務(wù)器上，所以有兩種訪問(wèn)方式：http:/127.0.0.1/index.htmlhttp:/本地服務(wù)器IP地址/index.html,演示示例14：訪問(wèn)上傳到服務(wù)器上的網(wǎng)站,總結(jié),模板有什么好處？如何應(yīng)用模板？如何引入樣式表文件？在本地IIS服務(wù)器上，如何發(fā)布一個(gè)站點(diǎn)。

總結(jié)

以上是生活随笔為你收集整理的ppt式 html模板,html10使用模板统一页面风格.ppt的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。