版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
PAGEPAGE0廣東省×××職業技術學校學科教案本TeachingPlan20年———20年學年度學期The(1st/2na)SemesteroftheAcademicYearfrom20to20____________________________________________網頁制作項目實訓教程網頁制作項目實訓教程學科（Subject）_______________________________________________________________________________________________________________重慶大學出版社制
《網頁制作項目實訓教程》目錄注意：①按住Ctrl鍵后單擊每個任務即可跳轉到對應的教案②單擊注意：①按住Ctrl鍵后單擊每個任務即可跳轉到對應的教案②單擊按鈕可返回目錄③頁面設置參數為：紙張：B5頁邊距左：1.5頁邊距右：1.5任務1HYPERLINK活動2制作第一個網頁文檔任務2HYPERLINK活動1制作樹形菜單HYPERLINK活動2制作在線考試試卷
教學課題任務1活動1創建與修改站點課題類型理論+實作課時安排2上課時間教學目標1.了解DreamweaverCS6的工作界面2.掌握站點的創建與編輯操作教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.你上網瀏覽過網頁嗎？2.你覺得網頁由哪些元素構成？3.你知道的網頁制作工具有哪些？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求1、創建一個名稱為“項目1”的本地站點，站點文件夾為D盤。2、修改“項目1”站點文件夾為桌面上的“Task1-1”文件夾。二、師生討論學習新知識1、啟動DreamweaverCS6軟件雙擊桌面上的DreamweaverCS6圖標，啟動軟件，如下圖所示。2、DreamweaverCS6工作界面介紹在“歡迎界面”中單擊“新建”欄下的“HTML”按鈕，新建一個HTML網頁文件，進入新的窗口界面。三、教師演示活動實施過程并讓學生完成活動任務1、新建站點（1）依次單擊“站點”->“新建站點”菜單命令，打開“站點設置對象”對話框。（2）在打開的“站點設置對象”對話框中設置站點名稱為“項目1”，點擊“本地站點文件夾”文本框后面的“瀏覽文件夾”按鈕，在打開的對話框中選擇D盤，如下圖所示。（3）單擊“保存”按鈕，完成站點的創建操作。2、管理站點（1）依次單擊“站點”->“管理站點”菜單命令，打開“管理站點”對話框。（2）在“管理站點”對話框中選擇“項目1”站點，單擊“編輯”按鈕，打開“站點設置對象項目1”對話框，點擊“本地站點文件夾”文本框后面的“瀏覽文件夾”按鈕，在打開的對話框中選擇桌面上的“Task1-1”文件夾。（3）單擊“保存”按鈕，完成站點的編輯操作。布置任務：讓學生明確本次課的內容提問或討論：DW的工作界面與PS有何異同網絡搜索：站點有什么作用演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記
教學課題任務1活動2制作第一個網頁文檔課題類型理論+實作課時安排2上課時間教學目標1.了解網頁的基本結構2.掌握如何新建與保存網頁3.掌握如何在瀏覽器中瀏覽網頁教學重點1、2教學難點3輔助資源課件、多媒體、網絡復習引入1.如何創建站點？2.如何編輯站點？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求新建一個網頁文件，輸入兩行文字，并將網頁文件以“task1-1-2.html”為文件名保存到“項目1”站點根目錄下。如下圖所示。二、師生討論學習新知識1、DreamweaverCS6的三種編輯模式，分別是：代碼、拆分、設計。2、網頁的基本結構由三部分組成：聲明、頭部、主體。（1）網頁文檔類型聲明使用<!doctypehtml>來聲明網頁的文檔類型，用來告訴瀏覽器使用什么樣的HTML或XHTML規范來解析網頁，它存在于頁面的第一行，不區分大小寫。（2）網頁的頭部<head></head>：定義文檔的頭部。標簽內包含<meta>、<title>等標簽。<meta/>：提供有關頁面的元信息（針對搜索引擎和更新頻度的描述和關鍵詞等），寫在<head></head>標簽內。①<metacharset="UTF-8"/>：設置頁面的編碼格式UTF-8。②<metaname="Author"content=""/>：告訴搜索引擎站點制作的作者。③<metaname="Keywords"content=""/>：告訴搜索引擎網站的關鍵字。④<metaname="Description"content=""/>：告訴搜索引擎網站的內容。<title></title>：該標簽用于定義文檔的標題。寫在<head></head>標簽內。<title>HTML筆記</title>：網頁標題為“HTML筆記”，在瀏覽器標題欄上顯示。（3）網頁的主體<body></body>：定義網頁文檔的主體。三、教師演示活動實施過程并讓學生完成活動任務1、依次單擊“文件”->“新建”命令，打開“新建文檔”對話框，在打開的“新建文檔”對話框中選擇“空白頁”選項卡，在“頁面類型”中選擇“HTML”，然后單擊“創建”按鈕，新建一個HTML網頁文件。2、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“我的第一個網頁”。3、在“文檔工具欄”中單擊“設計”按鈕，切換到設計視圖模式，在文檔窗口中輸入“Hello，World！”，然后按回車鍵，再輸入“歡迎光臨，這是我的第一個網頁！”。4、依次單擊“文件”->“保存”命令，打開“另存為”對話框，在“文件名”文本框中輸入“task1-1-2”，單擊“保存”按鈕保存網頁文件，最后點擊“task1-1-2.html”文檔標簽中的關閉按鈕關閉網頁文件。5、在DreamweaverCS6軟件的“歡迎界面”中單擊“打開”按鈕，打開“打開”對話框，選擇“task1-1-2.html”文件，單擊“打開”按鈕打開該網頁文件。（在“文件”面板中展開“站點–項目1”，雙擊“task1-1-2.html”文件名也可以打開該文件。）6、在“文檔工具欄”中單擊“在瀏覽器中預覽/調試”工具按鈕，在彈出的快捷菜單中單擊“編輯瀏覽器列表”命令，打開“首選參數”對話框。7、在“在瀏覽器中預覽”選項卡中單擊“瀏覽器”文字后面的“+”號按鈕，打開“添加瀏覽器”對話框，在“名稱”文本框中輸入“GoogleChrome”，單擊“應用程序”文本框后面的“瀏覽”按鈕，在打開的“選擇瀏覽器”對話框中按谷歌瀏覽器的實際安裝路徑查找并選擇，勾選“主瀏覽器”復選框。單擊“確定”按鈕完成谷歌瀏覽器的添加操作。8、在“文檔工具欄”中單擊“在瀏覽器中預覽/調試”工具按鈕，在彈出的快捷菜單中單擊“預覽在GoogleChrome”命令（或按F12鍵），即可啟動谷歌瀏覽器瀏覽網頁。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：DW的三種編輯模式；網頁的基本結構演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記
教學課題任務2活動1制作詩詞賞析頁面課題類型理論+實作課時安排2上課時間教學目標1.掌握標題標簽的使用2.掌握段落與換行標簽的使用教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.網頁的新建與保存。2.如何添加設置默認瀏覽器？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，完成詩詞賞析頁面的制作，完成后以“task1-2.html”為文件名保存。二、師生討論學習新知識1、標題標簽標題標簽表示一段文字的標題，共劃分六級標題<h1>…<h6>，從1級到6級，逐級字體減小。在DreamweaverCS6中，單擊“格式”“段落格式”菜單命令，在打開的子菜單中選擇“標題1”～“標題6”中的一個，或者在“屬性”面板的“格式”下拉列表框中選擇“標題1”～“標題6”中的一個，都可在網頁中插入相對應的標題標簽。2、段落與換行標簽（1）段落標簽在設計模式下，按回車鍵即可自動添加段落標簽<p></p>。（2）換行標簽在設計模式下，按Shift+回車鍵，即可添加換行標簽<br/>。三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6軟件并新建一個HTML文檔，將新建的HTML文檔切換至“設計”視圖模式，并以“task1-2.html”為文件名保存。2、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“詩詞賞析”。3、單擊“格式”->“段落格式”->“標題1”菜單命令，在文檔窗口中插入“標題1”標簽，輸入詩詞標題文字。4、輸入完標題文字后按回車鍵另起一行，輸入詩詞作者，輸入完后再按回車鍵另起一行。5、單擊“格式”->“段落格式”->“標題3”菜單命令，輸入完第1行詩詞后，按Shift+回車鍵插入換行符，輸入第2行詩詞。6、按回車鍵另起一行，輸入“譯文及注釋”文字，選擇輸入的“譯文及注釋”文字，在“屬性”面板“格式”下拉列表框中選擇“標題2”。7、按回車鍵另起一行，輸入“譯文”，再按回車鍵另起一行，輸入譯文正文部分；重復上述操作，完成注釋部分的輸入操作。（注意：在“涼州詞”注釋文字的最后按Shift+回車鍵，插入換行符后再輸入“夜光杯”注釋文字部分。）8、保存網頁文件并在瀏覽器中瀏覽網頁效果。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：標題標簽；段落與換行標簽演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記
教學課題任務2活動2對詩詞賞析頁面進行簡單排版課題類型理論+實作課時安排2上課時間教學目標1.掌握粗體標簽與斜體標簽的使用2.掌握特殊符號的使用教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.標題標簽。2.段落標簽與換行標簽。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開“task1-2.html”文件，對詩詞賞析頁面進行簡單排版操作。二、師生討論學習新知識1、粗體標簽<strong></strong>粗體標簽主要用于文字加粗，可以通過以下兩種方法給網頁文字添加粗體標簽：在“代碼”視圖模式中，在需要設置加粗效果的文字兩端添加<strong>…</strong>標簽。在“設計”視圖模式中，選擇要設置加粗效果的文字，在“屬性”面板中單擊“粗體”按鈕（快捷鍵為：Ctrl+B）。2、斜體標簽<em></em>斜體標簽主要用于文字傾斜顯示，可以通過以下兩種方法給網頁文字添加斜體標簽：在“代碼”視圖模式中，在需要設置傾斜效果的文字兩端添加<em>…</em>標簽。在“設計”視圖模式中，選擇要設置傾斜效果的文字，在“屬性”面板中單擊“斜體”按鈕（快捷鍵為：Ctrl+I）。3、特殊符號4、水平線標簽<hr/>三、教師演示活動實施過程并讓學生完成活動任務1、使用DreamweaverCS6打開“task1-2.html”并切換到“設計”視圖模式。2、選擇詩詞作者，在“屬性”面板中單擊“斜體”按鈕，設置傾斜效果。3、選擇“譯文”兩個字，在“屬性”面板中單擊“粗體”按鈕，設置加粗效果。使用同樣的方法設置其他需要加粗的文字。4、在需要設置縮進的文字前單擊鼠標，然后依次單擊“插入”->“HTML”->“特殊字符”->“不換行空格”菜單命令（快捷鍵為：Ctrl+Shift+空格），添加不換行空格使文字縮進，縮進量不夠可多添加幾個不換行空格，具體效果以瀏覽器瀏覽的效果為準。5、在文檔末尾添加文字“版權所有2018”，然后將光標定位到“2018”的前面，依次單擊“插入”->“HTML”->“特殊字符”->“版權”菜單命令，插入版權符號。6、在詩詞正文的后面單擊鼠標，然后依次單擊“插入”->“HTML”->“水平線”菜單命令，插入水平線。使用同樣的方法在文檔末尾版權信息前插入水平線。7、保存網頁文件并在瀏覽器中瀏覽網頁效果。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：粗體標簽；斜體標簽；特殊符號與水平線標簽演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記
教學課題任務3活動1制作樹形菜單課題類型理論+實作課時安排2上課時間教學目標1.掌握如何設置項目列表2.掌握項目列表的類型有哪些教學重點1、2教學難點1輔助資源課件、多媒體、網絡復習引入1.粗體與斜體標簽。2.如何在網頁中添加不換行空格？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，完成樹形菜單的制作，完成后以“task1-3-1.html”為文件名保存。二、師生討論學習新知識1、項目列表：也稱無序列表，列表項之間無順序之分，每個列表項前均有一個項目符號。2、項目列表的設置：項目列表可以通過“屬性”面板進行設置。3、項目列表的類型：項目列表的類型可以通過type屬性設置列表顯示符號的類型。disc：實心圓點square：實心方框circle：空心圓點三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6軟件并新建一個HTML文檔，將新建的HTML文檔切換至“設計”視圖模式，并以“task1-3-1.html”為文件名保存。2、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“ul-li多層嵌套制作樹形菜單”。3、在文檔窗口中依次輸入相應的文字。選擇所輸入的文字，單擊“屬性”面板上的“項目列表”按鈕，給輸入的文字添加項目列表。4、在任意一個列表項中單擊鼠標，然后依次單擊“格式”->表”->“項目列表”菜單命令，打開的“列表屬性”對話框，在“樣式”下拉列表框中選擇“正方形”，然后單擊“確定”按鈕。5、選擇“本地磁盤(C:)”～“本地磁盤(D:)”文字，單擊“屬性”面板上的“縮進”按鈕，制作第2級列表項。6、選擇“我的文檔”與“我的收藏”文字，單擊“屬性”面板上的“縮進”按鈕，制作第3級列表項。在“我的文檔”文字中單擊鼠標，再單擊“屬性”面板上的“列表項目…”按鈕，打開“列表屬性”對話框，在“樣式”下拉列表框中選擇“項目符號”，然后單擊“確定”按鈕。7、選擇“我的游戲”～“我的電影”文字，單擊“屬性”面板上的“縮進”按鈕兩次，在“我的游戲”文字中單擊鼠標，再單擊“屬性”面板上的“列表項目…”按鈕，打開“列表屬性”對話框，在“樣式”下拉列表框中選擇“項目符號”，然后單擊“確定”按鈕。8、保存網頁文件并在瀏覽器中瀏覽網頁效果。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：項目列表及項目列表的設置；項目列表的類型演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記
教學課題任務3活動2制作在線考試試卷課題類型理論+實作課時安排2上課時間教學目標1.掌握如何設置編號列表2.掌握編號列表的類型有哪些教學重點1、2教學難點1輔助資源課件、多媒體、網絡復習引入1.設置項目列表。2.如何更改項目列表的類型？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，完成在線
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
評論
0/150
提交評論