【導(dǎo)讀】網(wǎng)頁進(jìn)行排版.1,層的概念.2,嵌套層的概念.

　　

【正文】 布局網(wǎng)頁，掌握層的插入，設(shè)置層的各項(xiàng)屬性。 步驟 （ 1） 在你的站點(diǎn)中新建一個(gè)網(wǎng)頁文檔“ ” ，注意，所有的圖片必須放在你的站點(diǎn)下的 images 文件夾下。 （ 2）繪制一個(gè)較大的層 Layer1，然后在層 Layer1 中再繪制 5 個(gè)子層Layer Layer Layer Layer5。 （ 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。 （ 4） 分別 在 層 Layer Layer Layer Layer5 中輸入文字 “第 2個(gè)層”、“第 3 個(gè)層”、“第 4 個(gè)層”、“第 5 個(gè)層” 。 （ 5）在 Layer3 中插入一張圖片。 實(shí)訓(xùn)要點(diǎn)提示： （ 1）如果要移動(dòng)層，必須選擇層；如果需要在層中插入圖像或輸入文字，則必須激活該層，層選擇狀態(tài)和激活狀態(tài)外觀上有一定的區(qū)別。 （ 2）層 中 既可設(shè)置背景圖像，也可以在層中插入圖像。 思考 （ 1） 在 頁面中有多個(gè)層，如何將它們對(duì)齊？ （ 2） 對(duì)于網(wǎng)頁中多個(gè)嵌套的層，如何更改層的疊放順序？ 針對(duì)學(xué)生的操作和某些共性問題進(jìn)行點(diǎn)評(píng)。 三 、 任務(wù) 3： 實(shí)訓(xùn)： 用層布局網(wǎng)頁制作文本和圖片混排的網(wǎng)頁 在你的站點(diǎn)中新建一個(gè)網(wǎng)頁文檔“ ” ，注意，所有的圖片必須放在你的站點(diǎn)下的 images 文件夾下。 設(shè)置網(wǎng)頁標(biāo)題為你的班級(jí)+學(xué)號(hào) +姓名。網(wǎng)頁 布局如圖 1 所示 ，要求用層布局 ，內(nèi)容自擬，可以參考圖 2。 20 分鐘 15 分鐘 30 分鐘 圖 1 圖 2 教學(xué)小結(jié) 本講主要學(xué)習(xí)了層的網(wǎng)頁布局方法，運(yùn)用層技術(shù)來對(duì)網(wǎng)頁進(jìn)行排版，可以很方便地制作出精美的網(wǎng)頁。 作 業(yè) 上交本次課的網(wǎng)頁作品 第 8次課 使用框架布局網(wǎng)頁 本次課標(biāo)題： 使用框架布局網(wǎng)頁 授課班級(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)頁中創(chuàng)建框架； 為框架命名并導(dǎo)入框架源文件； 保存框架集文件和各個(gè)框架操作文件； 設(shè)置框架集屬性和框架屬性； 編輯框架內(nèi)容； 設(shè)置超級(jí)鏈接。 能力訓(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)容。 知識(shí)技能目標(biāo)說明： 介紹本次課要掌握的知識(shí)能力目標(biāo)。 任務(wù) 1： 如何 用 框架布局網(wǎng)頁 框架布局應(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)頁， 演示中 重點(diǎn)強(qiáng)調(diào) 框架集與框架的保存 、 屬性設(shè)置 ，難點(diǎn)是 框架集、框架與框架中顯示內(nèi)容的關(guān)系 。 （ 1） 顯示框架邊框和框架面板 顯示框架邊框：菜單【查看】→【可視化助理】→【框架 邊框】，使框架邊框在文檔窗口中可見。 顯示框架面板：菜單【窗口】→【框架】，顯示框架面板。 （ 2）創(chuàng)建框架 （ 3）選擇框架集和框架 ① 選擇框架集 方法 1：打開框架面板，然后在框架面板中單擊框架的外層邊框即可選中框架集。 方法 2：在包含框架的文檔窗口，將鼠標(biāo)指針指向框架最外的邊框線，指針變成雙箭頭形狀時(shí)，單擊鼠標(biāo)左鍵即可選中框架集。 ② 選擇框架 5 分鐘 10 分鐘 20 分鐘 方法 1：打開框架面板，然后在框架面板中單擊要選擇的框架即可選中單個(gè)框架。 方法 2：按住“ Alt”鍵，在框架內(nèi)部單擊某個(gè)框架，即可選中單個(gè)框架。 （ 4）分割框架和調(diào)整框架的大小 顯示框架邊框，顯示框架面板，分割框架，調(diào)整框架的大小，刪除框架 （ 5）保存框架集和框架 預(yù)覽或者關(guān)閉包含有框架的網(wǎng)頁文檔時(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ù)需要通過拖動(dòng)相鄰框架之間的邊框線調(diào)整各個(gè)框架域的大小，使頁面整體效果協(xié)調(diào)、美觀。 （ 9） 設(shè)置超級(jí)鏈接 任務(wù) 2：制作 “上方固定”的 框架網(wǎng)頁 布置任務(wù)，說明制作要求。 制作如圖所示的框架網(wǎng)頁，要求 ：框架行為 100 像素，上下兩個(gè)網(wǎng)頁中分別輸入“ 1”和“ 2”， 保存的框架集文件名總體為 ，其他分別為 、 。 根據(jù)學(xué)生實(shí)訓(xùn)情況點(diǎn)評(píng)講解。 任務(wù) 3：制作“上方 固定，左側(cè)嵌套”的框架網(wǎng)頁 新建一個(gè)站點(diǎn)，注意網(wǎng)頁文件和圖片文件的存放位置，所有網(wǎng)頁文件存放在你站點(diǎn)的根目錄下，所有圖片存放到你站點(diǎn)的 images 文件夾 25 分鐘 對(duì)于包括 3 個(gè)框架的網(wǎng)頁，保存時(shí)共有 4個(gè)文件， 1個(gè)是框架集文件， 另外 3 個(gè)是框架文件。 下。按下列要求完成一個(gè)框架網(wǎng)頁。 （ 1）制作 1個(gè) 網(wǎng)頁，內(nèi)容為“歡迎來到 XX網(wǎng)站”的字樣 ，保存為 。 （ 2）制作 1 個(gè) 網(wǎng)頁，在該網(wǎng)頁 中插入一個(gè) 7 行 1 列的表格，每個(gè)單元格 分別 輸入“ 烈士公園 ” 、“岳麓山”、“橘洲公園”、“開福寺”、“天心閣”、“南郊公園”、“動(dòng)物園”，保存為 。 （ 3） 制作 7 個(gè)網(wǎng)頁，內(nèi)容分別為烈士公園、岳麓山、橘洲公園 、開福寺、天心閣、南郊公園、動(dòng)物園 7 個(gè)景點(diǎn)的文字介紹，分別保存為、 、 、 、 、 、 （即拼音的第一個(gè)字母）。 （ 4）制作一個(gè)“上方固定，左邊嵌套”的框架網(wǎng)頁”，上方框架的源文件為 ，左邊框架的源文件為 ，右邊框架的初始源文件為 。 （ 5） 將框架 的邊框都設(shè)置為 為 0， 各個(gè)框架的源文件網(wǎng)頁必須設(shè)置居中對(duì)齊，以保證整個(gè)框架在瀏覽時(shí)是居中對(duì)齊。 （ 6）給左邊框架的每個(gè)單元格中的文字制 作超級(jí)鏈接點(diǎn)擊后右邊框架顯示相應(yīng)的文字介紹網(wǎng)頁。 最終效果如圖所示。 思考 （ 1） 問題 1：顯示在框架中的文檔是否為框架的一部分？ （ 2） 問題 2：如果一個(gè)站點(diǎn)在瀏覽器中顯示為包含三個(gè)框架的單個(gè)頁面，該框架應(yīng)該包括多少個(gè)獨(dú)立的 HTML 文檔。 30 分鐘 教學(xué)小結(jié) 本次課首先 介紹 了框架的概念與特點(diǎn)，再詳細(xì)講解了框架的創(chuàng)建、保 存、屬性的設(shè)置等基本操作。通過學(xué)習(xí)要能夠使用框架對(duì)網(wǎng)頁中的文本、圖像等對(duì)象進(jìn)行合理的布局 ， 還要能夠 調(diào)用已有的頁面，豐富新的頁面。 作 業(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ù) 1：網(wǎng)站測(cè)試 練任務(wù) 及案例 任務(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)頁設(shè)計(jì)三合一教程與上機(jī)實(shí)訓(xùn)》 網(wǎng)上素材 教學(xué)過程 課程導(dǎo)入 新課引入，明確本次課的任務(wù) 制作網(wǎng)頁之前要先創(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)頁腳本是否正確，文字、圖像顯示是否正常等。測(cè)試網(wǎng)站一般經(jīng)過四個(gè)過程：測(cè)試網(wǎng)頁、測(cè)試本地站點(diǎn)、用戶測(cè)試、負(fù)載測(cè)試。 知識(shí)技能目標(biāo)說明： 介紹本次課要掌握的知識(shí)能力目標(biāo)。 任務(wù) 1： 測(cè)試網(wǎng)站 講解知識(shí)點(diǎn)： 測(cè)試網(wǎng)頁 測(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)域名（ （ 任務(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é)瀏覽。 15 分鐘 25 分鐘 15 分鐘 10 分鐘 20 分鐘 教學(xué)小結(jié) 一個(gè)網(wǎng)站開發(fā)完成后必須經(jīng)過認(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)頁