課程名稱：網頁設計與制作主備人：審核人：第13頁網頁設計與制作教案（第9周）專業(yè)課程學習任務項目6：創(chuàng)建本地站點和基本文本網頁任務1了解Dreamweaver的工作環(huán)境任務2掌握創(chuàng)建與管理站點任務3掌握網頁中插入文本任務4掌握插入其他文本元素綜合實戰(zhàn)—創(chuàng)建基本文本網頁課時6教學對象授課時間設計者一、學習任務分析1．掌對創(chuàng)建站點及基本文本網頁的制作。2．教材中的知識與案例均是從實際工作中精選而來，具有很強的應用性和示范作用。同時教材結構清晰、內容翔實、語言淺顯易懂，并配以精美的素材圖片。二、學情分析對于剛剛接觸網頁設計的學生，思想活躍，有探索新知識的強烈心理，專業(yè)課的學習，除需要一定專業(yè)基礎外，還需要學生具有很強的技能操作能力，所以在本次課的講授中，采用演示、引導、任務練習的方法，讓學生了解所學的內容。三、學習目標知識目標：掌握Dreamweaver軟件的環(huán)境及各個功能掌握在創(chuàng)建站點方面的方法。掌握在管理站點方面的方法。掌握在軟件中插入文本的方法。掌握在軟件中插入其他文本元素的方法。能力目標：學會創(chuàng)建和管理站點。學會插入文本。學會插入其他文本元素。素質目標：不忘初心，牢記使命，了解萬丈高樓平地起，做事要一步一步的來的原則。四、教學策略重點難點：重點：創(chuàng)建本地站點；難點：學會插入其他文本元素。教學方法：演示案例教學法。教學模式：分組討論，集中點評，共同提高。五、教學環(huán)境及資源準備教學環(huán)境：多媒體實訓室課前準備：1.對應本節(jié)課制作了相應的備課。2.認真設計教案、課件和教學過程。六、教學過程教學環(huán)節(jié)教學內容教師活動學生活動設計意圖情景描述上課，同學們好?。ㄏ嗷柡茫。?S管理組織教學。課前3分鐘：你的視野的高度和廣度，決定了你內心世界遼闊的程度。做學習的主人，積極主動的參與閱讀思考演練中，收獲的是快樂；被動的學習，學習效率自然低下，學習的快樂也會消失殆盡。復習提問：一、上節(jié)課對圖像的切割和優(yōu)化哪里不太明白？7S管理組織教學、統(tǒng)計出勤；課前3分鐘教育；進行復習提問，讓學生進入思考狀態(tài)。以小組為團體回答，并加分。使學生注意力集中積極思考，積極回答問題。7S管理形成習慣，鞏固知識，增強團隊意識。引導問題網頁設計中關于圖像的部分學習完成后，如何創(chuàng)建一個屬于自己的站點，并創(chuàng)建一個真正的網頁呢，這時單純的學習Photoshop已經不能完成此項工作了，此時的小艾非?？鄲?！她非常迫切想要知道那個軟件在創(chuàng)建網頁方面既簡單又方便。她的同事凱程知道他的苦惱后，告訴她，Dreamweaver就是一個及設計和代碼共存的一個軟件，對于初次接觸網頁設計的人，使用Dreamweaver是非常便捷的，用戶無論使用設計視圖還是代碼視圖都可以方便地創(chuàng)建網頁。本項目主要講述Dreamweaver界面，如何創(chuàng)建本地站點并管理站點，如何在網頁中輸入文本以及插入其他網頁文本元素。接下來，大家就跟隨小艾一同走進Dreamweaver吧，和小艾一起進行相關內容的學習，在網頁設計的道路上展現(xiàn)自己的才華，好了，下面我們就一起打開Dreamweaver來進行學習吧！。引出本節(jié)重點內容，注意培養(yǎng)學生的觀察力和注意力。學生跟隨老師的講解和啟發(fā)進入內容，積極思考。通過導入問題,讓學生分小組思考。相關知識介紹任務1了解Dreamweaver的工作環(huán)境Dreamweaver2021是集網頁制作和網站管理于一身的“所見即所得”的網頁編輯軟件，它以強大的功能和友好的操作界面?zhèn)涫軓V大網頁設計者的歡迎，已經成為網頁制作的首選軟件，如圖所示為Dreamweaver2021的工作界面。任務2掌握創(chuàng)建與管理站點建立本地站點就是在本地計算機硬盤上建立一個文件夾并用這個文件夾作為站點的根目錄，然后將網頁及其他相關的文件，如圖片、視頻、Html文件存放在該文件夾中。當準備發(fā)布站點時，將文件夾中的文件上傳到Web服務器即可?；顒?掌握創(chuàng)建本地站點在制作網頁之前首先要在本地計算機中創(chuàng)建一個本地站點，以方便將來的上傳和管理。啟動Dreamweaver軟件，執(zhí)行菜單欄中的“站點/新建站點”命令，彈出“站點設置對象未命名站點2”對話框，在對話框中“站點”選項卡的“站點名稱”文本框中輸入名稱，如圖6-5所示。單擊“本地站點文件夾”文本框右邊的文件夾按鈕，彈出“選擇根文件夾”對話框，在對話框中選擇相應的位置，如圖所示。單擊“選擇文件夾”按鈕后，“本地站點文件夾”的位置會被選取，如圖所示。單擊“保存”按鈕，在“文件”面板中可以看到創(chuàng)建的站點，如圖所示。在Dreamweaver中，可以對本地站點進行管理，如打開、編輯、刪除和復制站點等。當運行Dreamweaver后，系統(tǒng)會自動打開上次退出Dreamweaver時編輯的站點。如果想打開另外一個站點，在“文件”面板的文件下拉列表框中將會顯示已定義的所有站點，如圖所示。在下拉列表框中選擇需要打開的站點，即可打開已定義的站點。創(chuàng)建站點后，可以對站點進行編輯，執(zhí)行菜單欄中的“站點/管理站點”命令，彈出“管理站點”對話框，在對話框中單擊“編輯當前選定的站點”按鈕，如圖所示。單擊“編輯當前選定的站點”按鈕,即可彈出“站點設置對象”對話框，在“高級設置”選項卡中選擇“本地信息”，在右側編輯站點的相關信息，單擊“默認圖像文件夾”文本框右邊的文件夾按鈕，在彈出的“選擇圖像文件夾”對話框中，設置圖像文件夾為images，如圖所示。編輯完畢后，單擊“保存”按鈕，返回到“管理站點”對話框，單擊“完成”按鈕，即可完成站點的編輯。如果不再需要站點，可以將其從站點列表中刪除，執(zhí)行菜單欄中的“站點/管理站點”命令，彈出“管理站點”對話框，在對話框中選中要刪除的站點，單擊“刪除當前選定的站點”按鈕，如圖所示。彈出Dreamweaver提示對話框，詢問用戶是否要刪除本地站點，如圖所示。單擊“是”按鈕，即可將本地站點刪除。執(zhí)行菜單欄中的“站點/管理站點”命令，彈出“管理站點”對話框，在對話框中選中要復制的站點，單擊“復制當前選定的站點”按鈕，如圖所示，即可將該站點復制，新復制出的站點名稱會出現(xiàn)在“管理站點”對話框的站點列表中，如圖所示。單擊“完成”按鈕，完成對站點的復制。任務3掌握網頁中插入文本在Dreamweaver中可以通過直接輸入、復制和粘貼的方法將文本插入到文檔中?；顒?掌握插入普通文本文本是基本的信息載體，是網頁中的基本元素，瀏覽網頁時，獲取信息最直接、最直觀的方式就是通過文本。在Dreamweaver中添加文本的方法非常簡單，打開一個網頁文檔，如圖所示。將光標置于要輸入文本的位置，輸入文本，如圖所示。保存文檔后，按F12鍵在瀏覽器中預覽，效果如圖所示。活動2掌握設置文本屬性如果網頁中的文本樣式太單調，會大大降低網頁的外觀效果，通過對文本格式的設置可使文本變得美觀，讓網頁更具魅力。選中需設置格式的文本，然后在“屬性”面板中可以設置文本的具體屬性。選中文字，執(zhí)行菜單欄中的“窗口/屬性”命令，打開“屬性”面板，單擊“大小”文本框右邊的按鈕，在彈出的菜單中選擇字體“大小”為12像素，如圖所示。在“屬性”面板中的“字體”下拉列表中選擇“管理字體”選項，如圖所示。在彈出的對話框中選擇“自定義字體堆?！边x項卡，在“可用字體：”選項中選擇要添加的字體，單擊按鈕添加到左側的“選擇的字體：”列表框中，在“字體列表：”框中也會顯示新添加的字體，如圖所示。重復以上操作即可添加多種字體，若要取消已添加的字體，可以選中該字體單擊按鈕。完成一個字體樣式的編輯后，單擊按鈕可進行下一個樣式的編輯。若要刪除某個已經編輯的字體樣式，可選中該樣式單擊按鈕。完成字體樣式的編輯后，單擊“完成”按鈕關閉該對話框。單擊Color顏色按鈕，在彈出的顏色框中設置文本顏色為“#000000”，如圖所示。選擇最后面的兩個文字，單擊Color顏色按鈕，在彈出的顏色框中設置文本顏色為“#BF2ABE”，效果如圖所示。任務4掌握插入其他文本元素可以在文本的字符與行之間插入額外的空格，還可以插入字符和水平線等。活動1掌握插入版權字符制作網頁時，有時要輸入一些鍵盤上沒有的特殊字符，如日元符號、注冊商標等，這就需要使用Dreamweaver的字符功能。打開網頁文檔，將光標置于要插入字符的位置，如圖所示。執(zhí)行菜單欄中的“插入/HTML/字符/版權”命令，執(zhí)行此命令后，就可以插入版權字符了，如圖所示?；顒?掌握插入水平線很多網頁在其下方會顯示一條水平線，以分割網頁主題內容和底端的版權聲明等，根據(jù)設計需要，也可以在網頁任意位置添加水平線，達到區(qū)分網頁中不同內容的目的。打開網頁后，將光標置于要插入水平線的位置，如圖所示。執(zhí)行菜單欄中的“插入/HTML/水平線”命令，執(zhí)行此命令后系統(tǒng)會自動添加一條水平線，如圖所示。選中插入的水平線，在“屬性”面板中，可以設置水平線的屬性。課件設疑，引起注意，牢牢抓住和吸引學生探究新知識的心理。講練結合，突出實操能力培養(yǎng)。跟隨老師進入思考分析狀態(tài)。認真完成操作任務。通過課件引出問題，演示法和指導法，使學生掌握知識點。提高學生操作能力。分組討論組織學生分小組討論引導問題，保證人人有任務，人人有活干。評分項目評分指標標準分評分儀態(tài)舉止是否得體0.5準備準備是否充分0.5語言聲音是否洪亮、表達是否準確0.5小組配合組分工是否明確，配合是否默契0.5小計2分配小組長任務。通過引導問題，學生進行分析、思考。各個小組分配任務進行討論問題。達到培養(yǎng)學生分工合作和查找資料能力。小組展示各小組派代表上黑板前展示自己小組引導問，由全班同學找出問題并由小組代表進行解答。展示并解答問題。學生展示討論成果，回答問題。鍛煉學生表達能力和儀表。鍛煉學生表達能力和儀表。全班查找問題。課堂總結找最優(yōu)秀小組講解設計中的注意事項，并由教師點評總結設計注意事項，并分組點評各組優(yōu)缺點?？偨Y點評設計情況，并歸納知識點。學生總結所學知識，積極回答問題。學生掌握知識。布置作業(yè)一、創(chuàng)建站點插入文本布置作業(yè)，并講解具體要求。記錄并在課下思考問題，主動學習。培養(yǎng)學生學習能力。便于下次課進行。七、教學評價設計通過小組自我評價、小組評價、教師評價完成對小組進行評價，教師和組長對成員進行評價，回答問題加1分；演示操作加2分，第一名小組的成員每人加1分。記入平面成績，期末進行成績綜合評定。評價項目評價指標標準分自我評價小組評價教師評價學習態(tài)度學習主動，規(guī)范操作，紀律好2任務完成知識點掌握，實操完成效果好2小組討論表達清晰，任務方案科學合理2創(chuàng)新精神運用多種方法創(chuàng)意設計17S管理現(xiàn)場整理，保持工作環(huán)境整潔1團結協(xié)作小組成員是否團結協(xié)作2小計總評小組學習活動綜合評價表八、教學反思網頁設計與制作教案（第10周）專業(yè)課程學習任務項目7：使用表格排版布局網頁任務1掌握插入表格和表格元素任務2掌握選擇表格元素任務3掌握表格的基本操作任務4掌握排序及整理表格內容課時6教學對象授課時間設計者一、學習任務分析1．了解表格排版布局網頁。2．教材中的知識與案例均是從實際工作中精選而來，具有很強的應用性和示范作用。同時教材結構清晰、內容翔實、語言淺顯易懂，并配以精美的素材圖片。二、學情分析對于剛剛接觸網頁設計的學生，思想活躍，有探索新知識的強烈心理，專業(yè)課的學習，除需要一定專業(yè)基礎外，還需要學生具有很強的技能操作能力，所以在本次課的講授中，采用演示、引導、任務練習的方法，讓學生了解所學的內容。三、學習目標知識目標：掌握插入表格和表格元素的方法掌握選擇表格元素的方法。掌握對表格基本操作的方法。掌握排序及整理表格內容的方法。能力目標：學會插入表格。學會選擇表格元素。學會對表格的基本操作。學會對標內容進行整理。素質目標：打牢基礎、建萬丈高樓，每一磚、每一個螺絲都是整個主體的關鍵。要想真正的掌握所學知識，就要了解實踐操作的重要性。四、教學策略重點難點：重點：插入表格及編輯表格；難點：通過表格布局網頁。教學方法：演示案例教學法。教學模式：分組討論，集中點評，共同提高。五、教學環(huán)境及資源準備教學環(huán)境：多媒體實訓室課前準備：1.對應本節(jié)課制作了相應的備課。2.認真設計教案、課件和教學過程。六、教學過程教學環(huán)節(jié)教學內容教師活動學生活動設計意圖情景描述上課，同學們好?。ㄏ嗷柡茫。?S管理組織教學。課前3分鐘：如果找不出自己學習上二至三處優(yōu)點，請你站起來自我反省。成功的學習，永遠屬于自信快樂的人。復習提問：創(chuàng)建本地站點創(chuàng)建基本文本網頁有哪些不懂的？7S管理組織教學、統(tǒng)計出勤；課前3分鐘教育；進行復習提問，讓學生進入思考狀態(tài)。以小組為團體回答，并加分。使學生注意力集中積極思考，積極回答問題。7S管理形成習慣，鞏固知識，增強團隊意識。引導問題網站站點創(chuàng)建完成后，就該對表格有一個進一步的了解了，此項學習對小艾來說非常的陌生，她非?？是笥幸粋€人能夠幫助她對表格進行相關知識的了解，從她身邊路過的同事凱程看到后，經過詢問，凱程告訴她表格是網頁排版設計的常用工具，表格在網頁中不僅可以用來排列數(shù)據(jù)，而且可以對頁面中的圖像、文本等元素進行準確的定位，使得頁面在形式上既豐富多彩又有條理，從而使頁面顯得更加整齊有序。本項目主要講述表格的創(chuàng)建、表格屬性的設置、表格的基本操作、表格的排序和導入表格式數(shù)據(jù)等。接下來，大家就跟隨小艾一同走進Dreamweaver中的表格世界吧，和小艾一起進行相關內容的學習，在網頁設計的道路上展現(xiàn)自己的才華，好了，下面我們就一起來進行學習和進步吧！。引出本節(jié)重點內容，注意培養(yǎng)學生的觀察力和注意力。學生跟隨老師的講解和啟發(fā)進入內容，積極思考。通過導入問題,讓學生分小組思考。相關知識介紹任務1掌握插入表格和表格元素在AdobeDreamweaver中，表格可以用于安排網頁文檔的整體布局，起著非常重要的作用?；顒?掌握插入表格在Dreamweaver中，表格可以用于制作簡單的圖表，還可以用于安排網頁文檔的整體布局，起著非常重要的作用。在網頁中插入表格的方法非常簡單，新建一個網頁文檔，將其進行儲存后，執(zhí)行菜單欄中的“插入/Table”命令，打開“Table”對話框，在對話框中將“行數(shù)”設置為2、“列”設置為1、“表格寬度”設置為“1024像素”、“邊框粗細”為0、“單元格邊距”為0、“單元格間距”為0，如圖所示。設置完畢單擊“確定”按鈕，插入表格，如圖所示?；顒?掌握設置表格屬性創(chuàng)建完表格后可以根據(jù)實際需要對表格的屬性進行設置，如寬度、邊框、對齊等，也可只對某些單元格進行設置。設置表格屬性之前首先要選中表格，在“屬性”面板中將顯示表格的屬性，并進行相應的設置。再不選取表格的情況下，單擊“屬性”面板中的“頁面屬性”按鈕，打開“頁面屬性”對話框，設置“上邊距”為0，“頁面字體”為“宋體”、“大小”為14px、“文本顏色”為“黑色”，如圖所示。之后選擇創(chuàng)建的表格，在“屬性”面板中設置各項參數(shù)，如圖所示?；顒?掌握添加內容到單元格表格建立以后，就可以向表格中添加各種元素了，如文本、圖像、表格等。在表格中添加文本就像在文檔中操作一樣，除了直接輸入文本，還可以先利用其他文本編輯器編輯文本，然后將文本拷貝到表格里，這也是在文檔中添加文本的一種簡潔而快速的方法。將光標置于單元格中，執(zhí)行菜單欄中的“插入/Image”命令，選擇一個素材圖像將其插入到第一行中，設置第二行的“高度”為100、“垂直”為“頂端”，如圖所示。將光標放置到第二行中執(zhí)行菜單欄中的“插入/Table”命令，插入一個“寬度”為80%的3行2列表格，將其居中后設置每個單元格的高度都為30，，在每個單元格中分別輸入相應的文字，如圖所示。將光標放置到單元格內，設置“水平”為“居中對齊”，如圖所示。任務2掌握選擇表格元素處理表格時經常要選擇表格中的一個或多個單元格，或者選擇整行、整列單元格，這時可以根據(jù)具體情況使用不同的方法選擇單元格?；顒?掌握選擇表格要想對表格進行編輯，那么首先選擇它，主要通過以下4種方法選取整個表格。將光標置于表格的左上角，按住鼠標的左鍵不放，拖曳鼠標指針到表格的右下角，將整個表格中的單元格選中，單擊鼠標的右鍵，在彈出的菜單中選擇“表格/選擇表格”命令，如圖所示。單擊表格邊框線的任意位置，即可選中表格，如圖所示。將光標置于表格內任意位置，執(zhí)行菜單欄中的“編輯/表格/選擇表格”命令，如圖所示。將光標置于表格內任意位置，單擊文檔窗口左下角的<table>標簽，如圖所示?；顒?掌握選擇行或列選擇表格的行與列也有兩種方法。鼠標位于要選擇的行首或列頂，鼠標指針形狀變?yōu)楹诩^時，單擊鼠標左鍵即可選中行或列，如圖所示。按住鼠標左鍵不放從左至右或者從上至下拖曳，即可選中行或者列，如圖所示活動3掌握選擇單元格選擇表格中的單元格有兩種方式，一種是選擇單個單元格，另一種是選擇多個單元格。有如下多種方法。按住“Ctrl”鍵，然后單擊要選中的單元格即可。將光標移到要選中的單元格中并單擊釋放，按住“Ctrl＋A”組合鍵，即可選中該單元格。將光標置于要選中的單元格中，執(zhí)行菜單欄中的“編輯/全選”命令，即可選中該單元格。將光標置于要選擇的單元格內，單擊文檔窗口左下角的<td>標簽可以將單元格選中。按住“Shift”鍵不放并單擊選擇多個單元格中的第一個和最后一個，可以選擇多個相鄰的單元格，如圖所示。按住“Ctrl”鍵不放單擊并選擇多個單元格，可以選擇多個相鄰或不相鄰的單元格，如圖所示。任務3掌握表格的基本操作創(chuàng)建了表格后，用戶要根據(jù)網頁設置對表格進行處理，例如選擇表格和單元格、調整表格單元格的大小、添加或刪除行或列、拆分單元格、剪切/復制和粘貼單元格等，熟練掌握表格的基本操作，可以提高制作網頁的速度?；顒?掌握調整表格高度和寬度在文檔中插入表格后，若想改變表格的高度和寬度可先選中該表格，在出現(xiàn)3個控制點后將鼠標移動到控制點上，當鼠標指針變成如圖所示的形狀時，按鼠標左鍵并拖動即可改變表格的高度和寬度，此時的高度與寬度的數(shù)值不是精確的。 活動2掌握添加或刪除行或列可以執(zhí)行菜單欄中的“編輯/表格”命令中的子菜單命令，增加或減少行與列。增加行與列有以下方法。將光標置于相應的單元格中，執(zhí)行菜單欄中的“編輯/表格/插入行”命令，即可插入一行。將光標置于相應的位置，執(zhí)行菜單欄中的“編輯/表格/插入列”命令，即可在相應的位置插入一列。將光標置于相應的位置，執(zhí)行“編輯/表格/插入行或列”命令，彈出“插入行或列”對話框，在對話框中進行相應的設置，如圖所示。單擊“確定”按鈕，即可在應的位置插入行或列，如圖所示?；顒?掌握合并單元格合并單元格就是將選中表格單元格的內容合并到一個單元格。要合并單元格，首先將要合并的單元格選中，然后執(zhí)行菜單欄中的“編輯/表格/合并單元格”命令，將多個單元格合并成一個單元格如圖所示?；蜻x中單元格后單擊鼠標右鍵，在彈出的菜單中選擇“表格/合并單元格”選項，將多個單元格合并成一個單元格?；顒?掌握清除表格的寬度/高度可用來清除單元格中多余的空白，讓行寬與列高和單元格的內容剛好吻合，例如插入的圖片或鍵入的文字比單元格稍微小一點，此時就需要對表格進行清除寬度和高度的操作。選擇整個表格，在屬性欄中單擊“清除列寬”按鈕，此時會發(fā)現(xiàn)表格寬度會自動與圖像相吻合，如圖所示。選擇整個表格，在屬性欄中單擊“清除行高”按鈕，此時會發(fā)現(xiàn)表格寬度會自動與圖像相吻合，如圖7-28所示。、活動5掌握調整邊距/間距/邊框邊距、間距及邊框等距離是屬于表格的整體設置，因此設置前要先選取整個表格。之后在“屬性”面板中設置“CellPad”為0、“CellSpace”為6、“Border”為6，效果如圖所示。任務4掌握排序及整理表格內容為了更加快速而有效地處理網頁中的表格和內容，Dreamweaver提供了多種自動處理功能，包括導入表格數(shù)據(jù)和排序表格等?；顒?掌握導入成績單Dreamweaver中導入表格式數(shù)據(jù)功能夠根據(jù)素材來源的結構，為網頁自動建立相應的表格，并自動生成表格數(shù)據(jù)。因此，當遇到大篇幅的表格內容編排，而手頭又擁有相關表格式素材時，便可使網頁編排工作輕松得多。在文本文件中的數(shù)據(jù)，我們可以將其快速的導入到網頁文檔中，下面通過實例講述如何導入表格數(shù)據(jù)。打開需要導入成績單的網頁文檔，如圖所示。將文檔中的表格進行居中對齊，效果如圖所示。將鼠標指針放置到第2行第2列中，在“屬性”面板中設置“垂直”為“頂端”，按“Enter”鍵進行換行，效果如圖所示。執(zhí)行菜單欄中的“文件/“導入/表格式數(shù)據(jù)”命令，彈出“導入表格式數(shù)據(jù)”對話框，如圖所示。在對話框中單擊“數(shù)據(jù)文件”文本框右邊的“瀏覽”按鈕，彈出“打開”對話框，在對話框中選擇數(shù)據(jù)文件，如圖所示。單擊“打開”按鈕，添加到文本框中，在對話框中的“定界符”下拉列表中選擇“Tab”選項，“表格寬度”選中“匹配內容”單選按鈕，如圖所示。單擊“確定”按鈕，導入表格式數(shù)據(jù)，導入后將表格居中，效果如圖所示。保存文檔，按F12鍵在瀏覽器中預覽，效果如圖所示?；顒?