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

　　

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