【正文】 布局表格 B、 C， B 和 C 布局表格上下排列。 （ 4）保存文件，預(yù)覽文件效果，最終效果如圖。 二、 思考 （ 1） 布局表格中的列可以設(shè)置為自動伸展或固定寬度兩種方式，“自動伸展”列有何特點(diǎn)？網(wǎng)頁實(shí)際布局時(shí)如何應(yīng)用自動伸展的列？ （ 2） 布局表格中的間隔圖像有什么作用？ 20 分鐘 20 分鐘 20 分鐘 5 分鐘 教學(xué)小結(jié) 本次課主要學(xué)習(xí)了布局表格和布局單元格的使用方法，可以像使用層一樣在頁面上直接畫一個(gè)或多個(gè)布局表格或布局單元格，并且可以任意拖動單元格。 嵌套層 的概念 。此方法只能移動層的右邊框和下邊框。 （ 5）層的嵌套 ，和創(chuàng)建層類似，可以用菜單，也可以用 “層”面板 來創(chuàng)建，關(guān)鍵在于要先創(chuàng)建父層 。 （ 2）層 中 既可設(shè)置背景圖像，也可以在層中插入圖像。 能力訓(xùn) 練任務(wù) 及案例 任務(wù) 1： 如何 用框架布局網(wǎng)頁 任務(wù) 2：制作“上方固定”的框架網(wǎng)頁 任務(wù) 3：制作“上方固定，左側(cè)嵌套”的 框架網(wǎng)頁 教學(xué)方法 采用任務(wù)分解和邊講邊練的方法 參考資料 《網(wǎng)頁設(shè)計(jì)三合一教程與上機(jī)實(shí)訓(xùn)》 網(wǎng)上素材 教學(xué)過程 課程導(dǎo)入 復(fù)習(xí)提問 前面學(xué)習(xí)過的網(wǎng)頁布局常見有哪些類型？ 新課引入，明確本次課的任務(wù) 如何把導(dǎo)航內(nèi)容固定在頁面的頂部、左邊或右邊呢？ 引入本次課要學(xué)習(xí)的內(nèi)容。 方法 2：在包含框架的文檔窗口，將鼠標(biāo)指針指向框架最外的邊框線，指針變成雙箭頭形狀時(shí) ，單擊鼠標(biāo)左鍵即可選中框架集。 制作如圖所示的框架網(wǎng)頁，要求 ：框架行為 100 像素，上下兩個(gè)網(wǎng)頁中分別輸入“ 1”和“ 2”， 保存的框架集文件名總體為 ，其他分別為 、 。 （ 4）制作一個(gè)“上方固定，左邊嵌套”的框架網(wǎng)頁”，上方框架的源文件為 ，左邊框架的源 文件為 ，右邊框架的初始源文件為 。測試網(wǎng)站一般經(jīng)過四個(gè)過程：測試網(wǎng)頁、測試本地站點(diǎn)、用戶測試、負(fù)載測試。目前， Inter提供了許多用于存放網(wǎng)站的空間及域名服務(wù)。主要介紹了網(wǎng)站的測試、申請域名和空間、網(wǎng)站的發(fā)布 、網(wǎng)站的宣傳與推廣、網(wǎng)站的維護(hù)與更新。 建立高級樣式 思考： 使用 CSS 樣式的 好處是什么？ 實(shí)訓(xùn) ： 使用 CSS 美化網(wǎng)頁 布置實(shí)訓(xùn)任務(wù)要求 創(chuàng)建一個(gè)網(wǎng)頁， 創(chuàng)建一個(gè) CSS 樣式文件，命名為“ ”，該樣式包含了控制表格中的文字、圖像格式的代碼， 然后 對網(wǎng)頁中的對象應(yīng)用樣式。 建立標(biāo)簽樣式 任務(wù) 4： 網(wǎng)站宣傳推廣 網(wǎng)站的維護(hù) 、 更新 宣傳推廣方法，以登錄百度搜索引擎為例演示。 測試本地 站點(diǎn) 30 分鐘 思考 （ 1） 問題 1：顯示在框架中的文檔是否為框架的一部分？ （ 2） 問題 2：如果一個(gè)站點(diǎn)在瀏覽器中顯示為包含三個(gè)框架的單個(gè)頁面，該框架應(yīng)該包括多少個(gè)獨(dú)立的 HTML 文檔。按下列要求完成一個(gè)框架網(wǎng)頁。創(chuàng)建框架時(shí)，默認(rèn)的框架集文件名稱是UntitleFrameset UntitleFrameset ??，默認(rèn)的框架文件名稱是 UntitleFrame UntitleFrame??。 （ 3）框架結(jié)構(gòu)的組成 ： 框架 ， 框 架集 實(shí)例 演示： 制作一個(gè)框架布局網(wǎng)頁， 演示中 重點(diǎn)強(qiáng)調(diào) 框架集與框架的保存 、 屬性設(shè)置 ，難點(diǎn)是 框架集、框架與框架中顯示內(nèi)容的關(guān)系 。網(wǎng)頁 布局如圖 1 所示 ，要求用層布局 ，內(nèi)容自擬，可以參考圖 2。 （ 3） 根據(jù) 要求調(diào)整層的大小和位置 Layer1 的屬性設(shè)置：寬 480px，高 270px， 左 20px，上 19px； Layer2 的屬性設(shè)置：寬 156px，高 93px， 左 33px，上 28px； Layer3 的屬性設(shè)置：寬 250px，高 240px， 左 215px，上 41px； Layer4 的屬性設(shè)置：寬 162px，高 255px， 左 526px，上 28px； Layer5 的屬性設(shè)置：寬 502px，高 93px， 左 158x，上 308px。 方 法 2：將鼠標(biāo)指針移動到層的邊框位置，當(dāng)鼠標(biāo)指針形狀變?yōu)樗南蚣^時(shí)，按住鼠標(biāo)左鍵并拖動，也可以移動層。 一、任務(wù)： 層的基本操作 知識點(diǎn)講解 （ 1）層的概念：是 Dreamweaver 中最有價(jià)值的對象之一，層可以包含文本、圖像、表單、插件，層內(nèi)還可以包含其它層。 能夠創(chuàng)建 嵌套層。 （ 3）在“降價(jià)排行”下面插入一張表格，該表格用于存儲數(shù)據(jù)。 在站點(diǎn)中 新建一個(gè)網(wǎng)頁文檔“ ”，切換至布局模式下，使用布局表格和繪制布局單元格來創(chuàng)建表格 。使用布局表格，頁面布局將變得輕松自如。 思考 ： （ 1） 如何折分和合并單元格？ （ 2） 如何設(shè)置表格的背景？ 5 分鐘 45 分鐘 教學(xué)小結(jié) 本次課主要學(xué)習(xí)了表格的創(chuàng)建方法，表格及單元格的基本操作，設(shè)置表格及單元格的屬性，格式化表格的方法；要學(xué)會應(yīng)用表格技術(shù)對網(wǎng)頁中的各個(gè)對象進(jìn)行定位，并通過表格在網(wǎng)頁上更直觀、更有條理地顯示各類信息。 實(shí)訓(xùn)內(nèi)容：插入表格，并選擇表格和單元格；設(shè)置單元格屬性； 調(diào)整表格結(jié)構(gòu)、大?。桓袷交砀?；表格中插入文本，表格中插入圖像。 二、任務(wù) 2： 表格的基本操作 基本操作演示 （ 1）插入表格 （ 2）選擇表格和表格元素 （ 3）設(shè)置表格及單元格的屬性 （ 4）調(diào)整表格的結(jié)構(gòu) （ 5）在表格中輸入文本和插入圖像 （ 6）重新設(shè)置表格的邊框，保存網(wǎng)頁，且在瀏覽器中預(yù)覽效果 學(xué)生實(shí)訓(xùn) 在你的站點(diǎn)新建一個(gè)網(wǎng)頁，練習(xí)以下操作： 5 分鐘 10 分鐘 10 分鐘 15 分鐘 （ 1）插入表格。 添加表格 、設(shè)置表格屬性； 設(shè)置表格中行和列屬性的方法 ； 拆分單元格，合并單元格的方法 ； 在表格中輸入文字并定位的方法 ； 在表格中插入圖像并定位的方法 。 對學(xué)生實(shí)訓(xùn)完成情況進(jìn)行點(diǎn)評、講解，說明共性問題的解決方法。九真觀西有白云先生（司馬承禎）藥巖?，F(xiàn)在寺的四周古木蒼翠，寺內(nèi)香煙繚繞，木魚鐘磬之聲，不絕于耳，佛圖佛像滿目，有興趣者，還可入內(nèi)與法師交談，品嘗一下南岳著名的素餐齋席。大廟坐北朝南，四周圍以紅墻，角樓高聳。清人魏源《衡岳吟》中說：“恒山如行，岱山如坐，華山如立，嵩山如臥，惟有南岳獨(dú)如飛。 （ 4）設(shè)置文本格式： 將網(wǎng)頁 中標(biāo)題“南岳衡山”格式設(shè)置為“標(biāo)題 1” ，字體設(shè)置為“隸書”，大小設(shè)置為“ 36” ，文字顏色設(shè)置為“ aqua” ，水平居中。 一、任務(wù) 1：在網(wǎng)頁中輸入、編輯文本 網(wǎng)頁上的信息大多都是通過文字來表達(dá)的，文字是網(wǎng)頁的主體和構(gòu)成網(wǎng)頁最基本的元素，它具有準(zhǔn)確快捷地傳遞信息、存儲空間小、易 復(fù)制、易保存、易打印等優(yōu)點(diǎn)，其優(yōu)勢很難被其他元素所取代，制作網(wǎng)頁時(shí)，文本的輸入與編輯占了制作工作的很大部分。這些操作都是最基本的操作，熟練掌握將會有助于以后網(wǎng)頁的制作。 （ 5） 添加背景音樂：為整個(gè)頁面添加一個(gè)背景音樂。 “ 標(biāo)題 /編碼”屬性的設(shè)置要求：網(wǎng)頁的標(biāo)題設(shè)置為“湘江谷”；文檔類型設(shè)置為“ HTML Transitional”，編碼設(shè)置為“簡體中文(GB2312)”。 （ 4）在文件夾“ 00 創(chuàng)建站點(diǎn)”中創(chuàng)建一個(gè)命名為“ ”的網(wǎng)頁文檔。無論是網(wǎng)頁制作的新手，還是專業(yè)的網(wǎng)頁設(shè)計(jì)師，都要從構(gòu)建站點(diǎn)開始，理清網(wǎng)站結(jié)構(gòu)。 第 3次課 安裝與使用 Dreamweaver 8，構(gòu)建和管理網(wǎng)站站點(diǎn) 本次課標(biāo)題： 安裝與使用 Dreamweaver 8，構(gòu)建和管理網(wǎng)站站點(diǎn) 授課班級 電廣系網(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) 知識目標(biāo) 能夠利用 Dreamweaver 8 創(chuàng)建、管理站點(diǎn)； 能夠 創(chuàng)建頁面，在頁 面中輸入文字； 能夠設(shè)置網(wǎng)頁頁面屬性。 二、任務(wù) 2：網(wǎng)頁基礎(chǔ)知識綜合實(shí)訓(xùn) 打開 IE 瀏覽器，然后 ： （ 1）輸入 163 網(wǎng)站的主頁。 10 分鐘 35 分鐘 思考：什么是分辨率？ Fireworks 是由 MacroMedia 公司出品的首選 WEB 圖形圖像處理軟件。矢量圖也叫向量圖形，是由線條和節(jié)點(diǎn)組成的圖像。導(dǎo)航是引人注目的，瀏覽者進(jìn)行網(wǎng)站，首先尋找導(dǎo)航條。 網(wǎng)頁：用 HTML 語言所編寫的頁面，網(wǎng)頁中可以包含文本、圖像、動畫、 音頻、視頻等信息。合理的網(wǎng)站布局結(jié)構(gòu)給瀏覽者賞心悅目的感覺，增強(qiáng)網(wǎng)站的吸引力。湖 南 大 眾 傳 媒 職 業(yè) 技 術(shù) 學(xué) 院 網(wǎng)頁設(shè)計(jì) 課 程 教 案 授課班級 電廣系網(wǎng)絡(luò)新聞 0601/2/3/4/5/6 電廣系 技術(shù) 051 授課教師 歐陽煒昊 授課時(shí)間 2020 年 下 學(xué)期 目錄 第 1 次課 網(wǎng)頁設(shè)計(jì)入門 ....................................................................................................3 第 2 次課 網(wǎng)頁圖片處理基礎(chǔ)與網(wǎng)頁動畫原理 ....................................................................5 第 3 次課 安裝與使用 Dreamweaver 8，構(gòu)建和管理網(wǎng)站站點(diǎn) .............................................7 第 4 次課 文本和圖像操作 .............................................................................................. 11 第 5 次課 使用表格布局網(wǎng)頁 ........................................................................................... 15 第 6 次課 使用布局表格布局網(wǎng)頁 .................................................................................... 17 第 7 次課 使用層布局網(wǎng)頁 .............................................................................................. 19 第 8 次課 使用框架布局網(wǎng)頁 ........................................................................................... 22 第 9 次課 網(wǎng)站測試、發(fā)布與維護(hù) .................................................................................... 26 第 10 次課 使用 CSS 美化網(wǎng)頁 ........................................................................................... 28 第 11 次課 使用模板和庫制作網(wǎng)頁 .................................................................................... 30 第 12 次課 用 HTML 制作網(wǎng)頁 .........