《html10使用模板統一頁面風格.ppt》由會員分享，可在線閱讀，更多相關《html10使用模板統一頁面風格.ppt(26頁珍藏版)》請在裝配圖網上搜索。

1、第十章使用模板統一頁面風格,回顧,請簡述網站開發的基本步驟？框架布局的優缺點？表格布局的適用場合？DIV布局的優點以及適用場合？,本章任務,制作網站的模板頁用模板頁重新制作“裝備”的商品展示頁用模板頁制作“裝備”商品的詳細介紹頁用模板頁制作商品“購買頁面”制作樣式表文件并和其他頁面綁定,會用Dreamweaver制作模板頁并應用到其他頁面會用Dreamweaver制作樣式文件并綁定到各頁面會使用網站開發流程制作并發布網站,本章目標,為什么需要模板,大家想想這幾個頁面有相同的地方嗎？,為什么需要模板,上一張ppt中三個頁面的頭部和尾部完全相同，那我們做網頁的時候要是每次得重新制作頁面的頭部和尾部。

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

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

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

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。