網頁設計與制作授課教案學年第學期學院（部）專業(yè)（學部）課程名稱電子商務網頁設計與制作任課教師課內形式理論教學□課內實踐□理實一體習題復習□考核評價□其他活動□學習量安排課內：課外形式調查分析小組研討□實踐任務理論探究□考核評價□匯報展示□其他活動課外：序號2授課日期月日月日月日月日授課班級課內教學內容：第2章網頁文字和圖片課外學習任務：（1）課前：以小組為單位，討論網頁中出現(xiàn)的文本和圖片內容并以PPT的形式記錄下來。（2）課后：在網頁中可以輕松展示文本和圖片。教學目標：知識目標掌握文字在網頁中的使用；掌握圖片在網頁中的使用；能力目標能夠了解文字在網頁中的各種排版方式；能夠掌握在網頁中添加圖片；能夠實現(xiàn)對圖片樣式的設置。素質目標較強的專業(yè)知識和技術能力；豐富知識結構，提升專業(yè)知識；能高效的掌握網頁中文本和圖片如何使用的相關內容。重點難點及解決方法：（1）重點：掌握通過HTML對文本樣式的的設置解決方法：通過課堂練習+啟發(fā)式教學的方法，教師通過講解HTML對文本樣式的設置，引導學生積極思考，掌握各種文本相關的標簽和屬性使用規(guī)則；同時通過配套示例，使學生深入掌握HTML中與文本相關的各種標簽和屬性的使用；培養(yǎng)學生的思維能力和分析問題解決問題的能力。（2）難點：掌握通過HTML設置圖片的各種樣式解決方法：通過案例解析+啟發(fā)式教學講解的方式，細致講解使用網頁中設置圖片的相關內容。幫助學生加深掌握圖片相關標簽和屬性的相關知識。從實用的角度幫助學生提高專業(yè)知識。課內教學授課地點：教學媒體：微課、PPT課件、網頁圖片、相關教學視頻等。設備及材料：多媒體計算機、多媒體教學廣播軟件、網頁素材圖片、教學載體源文件等。其它資源：與本次課相關的專業(yè)技術論文電子版。學習效果評價方式：對理論知識學習效果評價：采用課堂提問、課后習題和查閱技術論文研讀筆記的方式；對技能的評價：教師對學生上交網頁作品按制作要求進行綜合性評價；對職業(yè)素養(yǎng)的評價：采用學生自評、小組內評價和教師評價相結合的方式。課后小結：填表說明：1.序號，指該課程授課的順序號，應與授課計劃一致；2.授課形式在相應的選項打“√”。課內教學內容及過程時間分配方法及手段1.文字格式（教學重點）【文字大小】在HTML中，<font>標簽可以通過屬性設置文字的樣式，包括文字的大小、顏色、字體等。其中，設置文字大小的屬性為size。其語法格式如下。<fontsize="n">文字</font>其中，n的有效范圍是1~7。【字體】1．設置網頁字體設置網頁文字字體可使用<font>標簽的face屬性，其語法格式如下。<fontface="字體名稱">文字</font>其中，face屬性值為字體的名稱。要想知道自己計算機中安裝了什么字體，可以在操作系統(tǒng)所在磁盤的Windows\Fonts目錄下看到，如圖2.2所示，在“預覽、刪除或者顯示和隱藏計算機上安裝的字體”欄下的都是可用的字體。圖2.2計算機上安裝的字體2．設置瀏覽器默認字體需要注意的是，在示例2-2中顯示的字體在設計者的計算機上可以正常瀏覽，但是換成在其他計算機上就不一定可以正常瀏覽了。例如，在該文件中指定了“華文行楷”字體，如果讀者的計算機中沒有安裝這種字體，瀏覽器就會用默認的字體來顯示這種字體。不同的瀏覽器中都可以設置指定的字體為網頁默認字體。【字體顏色】如果沒有設置網頁文字字體的顏色，那么這個網頁中的文字就是黑白的。使用<font>標簽的color屬性可以為文字設置不同的顏色，其語法格式如下。<fontcolor="顏色">文字</font>顏色可以有兩種表示方法：顏色名稱與RGB顏色數值。顏色名稱就是類似red、blue等顏色的英文名。RGB顏色是由紅色、綠色、藍色的組合來指定的一種顏色，任何一種顏色都可以用0~255的一個數值表示，但必須使用十六進制的數字來表示這些組合。例如，一種顏色的RGB代碼為“#FFC0CB”，就代表它是用強度為FF（也就是255）的紅色、強度為C0的綠色與強度為CB的藍色混合成的顏色，也就是粉紅色。注意：使用RGB顏色，必須在十六進制組合前加上“#”字符。絕大多數瀏覽器都能識別以下16種預定義的顏色：red（紅色）、yellow（黃色）、blue（藍色）、navy（深藍色）、green（綠色）、lime（淺綠色）、aqua（碧綠色）、olive（橄欖綠）、black（黑色）、gray（灰色）、silver（銀色）、maroon（栗色）、purple（紫色）、fuchsia（紫紅色）、teal（深青色）和white（白色）。【加粗與斜體】通常在處理文字時，都會對比較重要的內容使用加粗、斜體來引起讀者的注意。在網頁上同樣可以使用加粗與斜體來達到相同的效果。在HTML中，可以用<b>標簽來加粗文字，用<i>標簽來使文字傾斜。除了<b>標簽與<i>標簽之外，還可以用<strong>標簽來加粗文字，用<em>標簽來使文字傾斜。設置加粗與斜體的語法格式如下。<b>加粗的文字</b><i>傾斜的文字</i><strong>加粗的文字</strong><em>傾斜的文字</em>【插入線與刪除線】在文字展示過程中，我們有時需要強調一些新插入的內容和被刪除的內容，此時就需要使用到插入線（在文本下方添加一條橫線）和刪除線（在文本上覆蓋一條橫線）來標明插入的文字和刪除的文字。在HTML中可以使用<ins>標簽實現(xiàn)向指定文字添加插入線的效果，并使用<del>標簽實現(xiàn)向指定文字添加刪除線的效果。插入線與刪除線標簽的語法格式如下。<ins>插入的文本內容</ins><del>刪除的文本內容</del>【上標與下標】在描述一些復雜的表達式，特別是一些數學公式時，經常會用到上標和下標，如3的平方（32）。在HTML頁面中，上標使用<sup>標簽實現(xiàn)，下標使用<sub>標簽實現(xiàn)。上標和下標標簽的語法格式如下。^{作為上標的文字}_{作為下標的文字}2.文字排版【文本縮進】在HTML中，文本縮進使用<blockquote>標簽實現(xiàn)。該標簽主要用于設置文本的縮進效果，從而使頁面的文字布局更加錯落有致。文本縮進標簽的語法格式如下。<blockquote>需要進行縮排的文字</blockquote>需要注意的是，<blockquote>標簽可以嵌套使用，每使用一次，文本就縮進一次。【段落】在HTML中，使用<p>標簽可以區(qū)分一個段落與另一個段落，在<p>與</p>標簽之間的文字是一個段落。其語法格式如下。<p>一段文字</p>【預定義格式】通過前面的學習可以知道，在HTML源代碼中，即使文字已經換行，但是只要沒有使用<br/>標簽，在瀏覽器里顯示出來的文字也不會換行。如果想在瀏覽器中顯示源代碼中保留所有文本內容的排版格式，包括文字之間的空白（如空格、制表符等），可以使用<pre>標簽。使用<pre>標簽相當于設置了一個“塊”，這個塊中可以保留源代碼中的所有文本格式，讓文本的格式（除HTML標簽外）在瀏覽器中按原樣顯示出來。其語法格式如下。<pre>設置了格式的文字</pre>例如，源代碼中的文本內容之間有10個空格，在瀏覽器也會顯示這10個空格；源代碼中有一個換行，在瀏覽器中也會顯示一個換行，不再需要使用<br/>標簽來強制換行。【水平分隔線】當頁面內容比較煩瑣時，可以在段與段之間插入一條水平分隔線來使頁面層次分明、便于閱讀。在HTML中可以使用<hr/>標簽來創(chuàng)建一條水平分隔線，其語法格式如下。<hralign="對齊方式"width="寬度"size="高度"color="顏色"noshade/><hr/>標簽中的屬性說明如下。align屬性的值可以為left（左對齊）、center（居中）和right（右對齊）3種。width屬性代表寬度。其值可以有兩種表示法：一種是百分數，代表水平分隔線占瀏覽器窗口寬度的百分比；另一種是像素，代表水平分隔線寬度占多少像素。size屬性代表水平分隔線的高度，其值為數字。color屬性代表水平分隔線的顏色，默認為黑色。noshade屬性代表水平分隔線不顯示陰影，默認情況下水平分隔線是顯示陰影的。3.在網頁中插入圖片（教學難點）在網頁中可以插入Logo（網站標志）、Banner（橫幅廣告）、照片等各種圖片。合理應用圖片，可以讓網頁看起來更美觀、重點更突出、形式更活潑，也可以使瀏覽更方便。在HTML中可以通過<img>標簽插入圖片，其語法格式如下。<imgsrc="url"alt="替代文本"name="名字"width="寬度"height="高度"border="邊框"align="對齊方式"id="編號"><img>標簽的屬性很多，上面的語法格式中只包含了常用的8個屬性。這8個屬性的具體說明如下。src：用于指定圖片所在位置，可以是相對路徑或絕對路徑。alt：用于指定替代圖片的文本。當圖片不能正常顯示出來時，可以使用該文本替代圖片。name：用于設置圖片的名稱，很多時候可以被省略。width：用于指定圖片的寬度。height：用于指定圖片的高度。border：用于指定圖片的邊框大小。該屬性的值越大，邊框的線條就越粗。align：用于設置圖片的對齊方式。該屬性有5個值：left、right、top、middle和bottom，分別表示左對齊、右對齊、頂部對齊、居中對齊和底部對齊方式。id：用于設置圖片的編號，也可以被省略。在同一個HTML文件中不允許出現(xiàn)相同的id，但可以出現(xiàn)相同的name。4.HTML5文檔結構標簽HTML5標準中提供了很多個關于文檔結構方面的標簽，這些標簽可以更加準確地表達網頁的結構和語義。HTML5新增的文檔結構標簽可以更好地輔助搜索引擎對網頁的結構和內容進行識別，讓搜索引擎更容易實現(xiàn)對網頁內容的抓取和收錄，但是這些標簽不能為網頁內容添加樣式。HTML5的文檔結構標簽如下所示。<article>：用于定義內容，內容本身必須是有意義的且必須是獨立于文件的其余部分，如一篇文章、一個帖子、博客的博文、一段評論等。<header>：用于定義文件或者文件的一部分區(qū)域的頁眉，如一段介紹內容。<nav>：用于定義頁面中的導航部分，導航包括頂部導航、側邊欄導航、頁內導航等。<section>：用于定義文件的指定區(qū)域，如章節(jié)、文件頭部、文件底部或者文件的其他區(qū)域。<aside>：用于定義頁面正文之外的內容。該標簽定義的內容要與附近的內容相關，如附屬信息、引用、相關推薦、廣告等。<footer>：用于定義頁腳部分，如該標簽會包含文件創(chuàng)作者的姓名、文件的版權信息、使用條款的鏈接、聯(lián)系信息等。5.教學評價【組織階段考核與學生自評互評、展示考核結果】本次課的考核注重過程評價：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評價表》，組織學生自評、互評。6.上機指導使用<font>標簽設置網頁中文字的大小、顏色和字體樣式。使用與文字排版相關的標簽來設置段落文字的樣式。7.板書設計文字格式文字排版在網頁中插入圖片HTML5文檔結構標簽上機指導課外學習任務及學習指導課前：【教師布置調研任務】調研主題：《了解文字和圖片相關標簽和屬性的使用規(guī)則》要求：以小組為單位，通過網絡查找的方式了解文字和圖片相關標簽和屬性的使用規(guī)則。制作匯報PPT，提交到“微信群”。【學生調研，教師線上指導】學生采用線上調研的方式，開展調研。教師使用“微信群”對學