【導讀】授課班級電廣系網(wǎng)絡新聞0601/2/3/4/5/6電廣系技術05-1(五年制)上課時間2課時上課地點實驗樓503. 設計網(wǎng)頁并不是一個十分復雜的過程，但是想要設計出合理而精美的網(wǎng)頁作品，需要經(jīng)過嚴謹?shù)睦硇苑治?、敏銳的觀察，以及感性的審美與創(chuàng)意技巧。信息是網(wǎng)站核心，是網(wǎng)站設計的依據(jù)，分析和理解信息內容是設計的起點也是終點。色彩是網(wǎng)頁設計的靈魂之一，是最先也是最持久地印記在瀏覽者腦海中的網(wǎng)站印象。成網(wǎng)站風格設計、網(wǎng)站氣氛等感覺性設計的作用非常大。合理的網(wǎng)站布局結構給瀏覽者賞心。悅目的感覺，增強網(wǎng)站的吸引力。

　　

【正文】 在你的站點中新建一個網(wǎng)頁文檔“ ” ，注意，所有的圖片必須放在你的站點下的 images 文件夾下。 設置網(wǎng) 頁標題為你的班級+學號 +姓名。網(wǎng)頁 布局如圖 1 所示 ，要求用層布局 ，內容自擬，可以參考圖 2。 圖 1 圖 2 15 分鐘 30 分鐘 教學小結 本講主要學習了層的網(wǎng)頁布局方法，運用層技術來對網(wǎng)頁進行排版，可以很方便地制作出精美的網(wǎng)頁。 作 業(yè) 上交本次課的網(wǎng)頁作品 第 8次課 使用框架布局網(wǎng)頁 本次課標題： 使用框架布局網(wǎng)頁 授課班級 電廣系網(wǎng)絡新聞 0601/2/3/4/5/6 電廣系技術 051(五年制 ) 上課時間 2 課時 上課地點 實驗樓 503 教 學 目 標 能力 (技能 )目標 知識目標 能夠 設置框架屬性 ； 能夠 設置框架集屬性 ； 能夠 編輯框架內容 。 在網(wǎng)頁中創(chuàng)建框架； 為框架命名并導入框架源文件； 保存框架集文件和各個框架操作文件； 設置框架集屬性和框架屬性； 編輯框架內容； 設置超級鏈接。 能力訓 練任務 及案例 任務 1： 如何 用框架布局網(wǎng)頁 任務 2：制作“上方固定”的框架網(wǎng)頁 任務 3：制作“上方固定，左側嵌套”的 框架網(wǎng)頁 教學方法 采用任務分解和邊講邊練的方法 參考資料 《網(wǎng)頁設計三合一教程與上機實訓》 網(wǎng)上素材 教學過程 課程導入 復習提問 前面學習過的網(wǎng)頁布局常見有哪些類型？ 新課引入，明確本次課的任務 如何把導航內容固定在頁面的頂部、左邊或右邊呢？ 引入本次課要學習的內容。 知識技能目標說明： 介紹本次課要掌握的知識能力目標。 任務 1： 如何 用 框架布局網(wǎng)頁 框架布局應用 展示 打開 展示 一個框架布局的網(wǎng)站，讓學生有個初步認識。 講解知識點 （ 1） 框架結構的組成 ： 框架 ， 框架集 （ 2） 框架 、 框架集的概念 （ 2）框架的特點 ： 使網(wǎng)站的風格能夠保持統(tǒng)一。 （ 3）框架結構的組成 ： 框架 ， 框 架集 實例 演示： 制作一個框架布局網(wǎng)頁， 演示中 重點強調 框架集與框架的保存 、 屬性設置 ，難點是 框架集、框架與框架中顯示內容的關系 。 （ 1） 顯示框架邊框和框架面板 顯示框架邊框：菜單【查看】→【可視化助理】→【框架邊框】，使框架邊框在文檔窗口中可見。 顯示框架面板：菜單【窗口】→【框架】，顯示框架面板。 （ 2）創(chuàng)建框架 5 分鐘 10 分鐘 20 分鐘 （ 3）選擇框架集和框架 ① 選擇框架集 方法 1：打開框架面板，然后在框架面板中單擊框架的外層邊框即可選中框架集。 方法 2：在包含框架的文檔窗口，將鼠標指針指向框架最外的邊框線，指針變成雙箭頭形狀時 ，單擊鼠標左鍵即可選中框架集。 ② 選擇框架 方法 1：打開框架面板，然后在框架面板中單擊要選擇的框架即可選中單個框架。 方法 2：按住“ Alt”鍵，在框架內部單擊某個框架，即可選中單個框架。 （ 4）分割框架和調整框架的大小 顯示框架邊框，顯示框架面板，分割框架，調整框架的大小，刪除框架 （ 5）保存框架集和框架 預覽或者關閉包含有框架的網(wǎng)頁文檔時，必須先對框架集文件和框架文件進行保存。創(chuàng)建框架時，默認的框架集文件名稱是UntitleFrameset UntitleFrameset ??，默認的框架文件名稱是 UntitleFrame UntitleFrame??。 （ 6） 設置框架集和框架的屬性 （ 7） 導入框架源文件 ①選中上方的框架，則在框架屬性面板中的“源文件”文本框中顯示的是框架文件的源文件地址。 ② 單擊“源文件”文本框右邊打開按鈕 (8)調整各框架區(qū)域的大小 根據(jù)需要通過拖動相鄰框架之間的邊框線調整各個框架域的大小，使頁面整體效果協(xié)調、美觀。 （ 9） 設置超級鏈接 任務 2：制作 “上方固定”的 框架網(wǎng)頁 布置任務，說明制作要求。 制作如圖所示的框架網(wǎng)頁，要求 ：框架行為 100 像素，上下兩個網(wǎng)頁中分別輸入“ 1”和“ 2”， 保存的框架集文件名總體為 ，其他分別為 、 。 25 分鐘 對于包括 3 個框架的網(wǎng)頁，保存時共有 4個文件， 1個是框架集文件，另外 3 個是框架文件。 根據(jù)學生實訓情況點評講解。 任務 3：制作“上方固定，左側嵌套”的框架網(wǎng)頁 新建一個站點，注意網(wǎng)頁文件和圖片文件的存放位置，所有網(wǎng)頁文件存放在你站點的根目錄下，所有圖片存放到你站點的 images 文件夾下。按下列要求完成一個框架網(wǎng)頁。 （ 1）制作 1個 網(wǎng)頁，內容為“歡迎來到 XX網(wǎng)站”的字樣 ，保存為 。 （ 2）制作 1 個 網(wǎng)頁，在該網(wǎng)頁 中插入 一個 7 行 1 列的表格，每個單元格 分別 輸入“ 烈士公園 ” 、“岳麓山”、“橘洲公園”、“開福寺”、“天心閣”、“南郊公園”、“動物園”，保存為 。 （ 3） 制作 7 個網(wǎng)頁，內容分別為烈士公園、岳麓山、橘洲公園、開福寺、天心閣、南郊公園、動物園 7 個景點的文字介紹，分別保存為、 、 、 、 、 、 （即拼音的第一個字母）。 （ 4）制作一個“上方固定，左邊嵌套”的框架網(wǎng)頁”，上方框架的源文件為 ，左邊框架的源 文件為 ，右邊框架的初始源文件為 。 （ 5） 將框架 的邊框都設置為 為 0， 各個框架的源文件網(wǎng)頁必須設置居中對齊，以保證整個框架在瀏覽時是居中對齊。 （ 6）給左邊框架的每個單元格中的文字制作超級鏈接點擊后右邊框架顯示相應的文字介紹網(wǎng)頁。 最終效果如圖所示。 30 分鐘 思考 （ 1） 問題 1：顯示在框架中的文檔是否為框架的一部分？ （ 2） 問題 2：如果一個站點在瀏覽器中顯示為包含三個框架的單個頁面，該框架應該包括多少個獨立的 HTML 文檔。 教學小結 本次課首先 介紹 了框架的概念與特點，再詳細講解了框架的創(chuàng)建、保存、屬性的設置等基本操作。通過學習要能夠使用框架對網(wǎng)頁中的文本、圖像等對象進行合理的布局 ， 還要能夠 調用已有的頁面，豐富新的頁面。 作 業(yè) 上交你本次課的作品 第 9次課 網(wǎng)站測試、發(fā)布與維護 本次課標題： 網(wǎng)站測試、發(fā)布 與 維護 授課班級 電廣系網(wǎng)絡新聞 0601/2/3/4/5/6 電廣系技術 051(五年制 ) 上課時間 2 課時 上課地點 實驗樓 503 教 學 目 標 能力 (技能 )目標 知識目標 能夠進行 網(wǎng)站測試 能夠進行 網(wǎng)站的維護與更新 網(wǎng)站測試的方法； 域名的設計與申請方法； 網(wǎng)站發(fā)布的方法 網(wǎng)站的維護與更新 能力訓 練任務 及案例 任務 1：網(wǎng)站測試 任務 2：申請域名與空間 案例 1：在虎翼網(wǎng)申請免費空間 案例 2：在 mycool 申請免費域名 任務 3：發(fā)布網(wǎng)站 任務 4：網(wǎng)站宣傳與推廣 案例：讓百度收錄網(wǎng)站 教學方法 采用任務分解和邊講 邊練的方法 參考資料 《網(wǎng)頁設計三合一教程與上機實訓》 網(wǎng)上素材 教學過程 課程導入 新課引入，明確本次課的任務 制作網(wǎng)頁之前要先創(chuàng)建站點，這樣做有什么優(yōu)點？ 一個網(wǎng)站制作完成后，在網(wǎng)站發(fā)布之前應進行嚴格的測試，以檢查各個超級鏈接是否正確，網(wǎng)頁腳本是否正確，文字、圖像顯示是否正常等。測試網(wǎng)站一般經(jīng)過四個過程：測試網(wǎng)頁、測試本地站點、用戶測試、負載測試。 知識技能目標說明： 介紹本次課要掌握的知識能力目標。 任務 1： 測試網(wǎng)站 講解知識點： 測試網(wǎng)頁 測試本地 站點 用戶測試 負載測試 創(chuàng)建網(wǎng)站報告 任務 2： 申請免費域名和空間 申請域名和空間目的： 在 Inter 安家的基礎。目前， Inter提供了許多用于存放網(wǎng)站的空間及域名服務。有收費形式的，也有免費形式的。 演示申請免費域名（ 15 分鐘 25 分鐘 15 分鐘 （ 任務 3： 發(fā)布網(wǎng)站 演示在 Dreamweaver 下 配置遠程站點 ，再次深化站點的概念。 演示 利用 LeapFTP 等軟件 上 傳網(wǎng)站 。 任務 4： 網(wǎng)站宣傳推廣 網(wǎng)站的維護 、 更新 宣傳推廣方法，以登錄百度搜索引擎為例演示。 實訓：將你的網(wǎng)站發(fā)布到互聯(lián)網(wǎng)上 根據(jù)所學知識，在 申請一個免費域名，在虎翼網(wǎng)申請免費空間，然后將你的網(wǎng)站發(fā)布上去，請其他同學瀏覽。 10 分鐘 20 分鐘 教學小結 一個網(wǎng)站開發(fā)完成后必須經(jīng)過認真的測試才能發(fā)布，以免瀏覽網(wǎng)站出現(xiàn)一些錯誤。一個網(wǎng)站要發(fā)布在服務器上去，才能被他人瀏覽。主要介紹了網(wǎng)站的測試、申請域名和空間、網(wǎng)站的發(fā)布 、網(wǎng)站的宣傳與推廣、網(wǎng)站的維護與更新。 作 業(yè) 第 10次課 使用 CSS 美化網(wǎng)頁 本次課標題： 使用 CSS 美化網(wǎng)頁 授課班級 電廣系網(wǎng)絡新聞 0601/2/3/4/5/6 電廣系技術 051(五年制 ) 上課時間 2 課時 上課地點 實驗樓 503 教 學 目 標 能力 (技能 )目標 知識目標 能夠 利用 CSS 來美化頁面 CSS 樣式表的基本語法和定義位置 標簽樣式、高級樣式、類樣式的定義方法 樣式的編輯方法 能力訓 練任務 及案例 任務：學習 CSS 的使用 實訓：使用 CSS 美化網(wǎng)頁 教學方法 采用任務分解和邊講邊練的方法 參考資料 《網(wǎng)頁設計三合一教程與上機實訓》 網(wǎng)上素材 教學過程 課程導入 新課引入，明確本次課的任務 怎樣能讓網(wǎng)頁在各種平臺上都能夠正常顯示？這就要使用 CSS 樣式。 知識技能目標說明： 介紹本次課要掌握的知識能力目標。 任務： 學習 CSS 的使用 項目展示 ： 展示使用 CSS 樣式的網(wǎng)頁 講解知識點 CSS 樣式表的基本語法 （ 1） CSS 樣式表的定義位置 CSS 樣 式定義在 HEAD 內 CSS 樣式嵌入 BODY 內部 在獨立的外部文件中定義 （ 1） CSS 樣式表的定義形式 ： 定義標簽樣式、定義高級樣式、定義類樣式 演示并講解 使用 CSS 美化頁面 建立標簽樣式 建立用于表格標題文本的類樣式 建立實現(xiàn)圖文混排效果的樣式 建立實現(xiàn)特殊表格邊框效果的樣式 建立高級樣式 思考： 使用 CSS 樣式的 好處是什么？ 實訓 ： 使用 CSS 美化網(wǎng)頁 布置實訓任務要求 創(chuàng)建一個網(wǎng)頁， 創(chuàng)建一個 CSS 樣式文件，命名為“ ”，該樣式包含了控制表格中的文字、圖像格式的代碼， 然后 對網(wǎng)頁中的對象應用樣式。 最終 瀏覽效果如圖所示。 10 分鐘 15 分鐘 20 分鐘