原文
二、課程目標(biāo)
透過混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)培養(yǎng)學(xué)生以下能力：
(1)能夠從用戶體驗(yàn)框架，描述網(wǎng)頁設(shè)計(jì)與制作主要概念，包括頁面結(jié)構(gòu)、網(wǎng)站結(jié)構(gòu)、界面設(shè)計(jì)、圖形設(shè)計(jì)及圖像和視頻等
(2)能熟悉產(chǎn)業(yè)標(biāo)準(zhǔn)生態(tài)，活用HTML5及CSS3的產(chǎn)業(yè)技術(shù)標(biāo)準(zhǔn)
(3)能描述響應(yīng)式網(wǎng)頁設(shè)計(jì)的功能、特征及技術(shù)實(shí)踐常用標(biāo)準(zhǔn)作法
(4)能運(yùn)用設(shè)計(jì)與制作工具及區(qū)分工具使用情境
(5)能認(rèn)識(shí)相關(guān)實(shí)踐社群及學(xué)科，習(xí)得最佳實(shí)踐及技巧的更新途徑
以上課程目標(biāo)之詳細(xì)作法按如下分章節(jié)詳述：
四、教學(xué)進(jìn)度計(jì)劃表
說明：教學(xué)活動(dòng)除有額外說明，均為混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)
周次 課程要點(diǎn) 教學(xué)活動(dòng) 閱讀資料
1 網(wǎng)頁設(shè)計(jì)與制作與工具介紹 RWD1
2 從用戶體驗(yàn)切入響應(yīng)式設(shè)計(jì)實(shí)踐 RWD2, WSG0
3 HTML基本元素：碼云Pages搭建 w3school, 碼云Pages
4 頁面結(jié)構(gòu)（Page Structure） WSG6
5 頁面制作案例一
☉期中在線考查 A 教室外實(shí)踐或?qū)I(yè)分享 WP2,WSG4,DMMT
6 圖像和視頻（Images&Video） WSG11, 12
7 彈性布局與響應(yīng)式圖片 RWD3
8 HTML5與響應(yīng)式 RWD4
9 CSS3新特性 RWD5
10 ☉期中考查 B
11 網(wǎng)站結(jié)構(gòu)（Site Structure） WSG5
12 CSS3高級(jí)技術(shù) RWD6
13 介面設(shè)計(jì)（Interface Design） 教室外實(shí)踐或?qū)I(yè)分享 WSG7
14 圖形設(shè)計(jì)（Graphic Design） 教室外實(shí)踐或?qū)I(yè)分享 WSG8
15 SVG與響應(yīng)式Web設(shè)計(jì)
☉期中在線考查 C 教室外實(shí)踐或?qū)I(yè)分享 RWD7
16 CSS3過渡、變形和動(dòng)畫 WSG9
17 ☉期末應(yīng)用項(xiàng)目開發(fā)成果展示考查
18 ☉期末應(yīng)用項(xiàng)目開發(fā)成果點(diǎn)評(píng)總結(jié)
19
20
HTML版本
<p><strong>二、課程目標(biāo)</strong></p>
<p>透過混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)培養(yǎng)學(xué)生以下能力：</p>
<ul>
<li>能夠從<strong><strong>用戶體驗(yàn)</strong></strong>框架，描述網(wǎng)頁設(shè)計(jì)與制作主要概念，包括頁面結(jié)構(gòu)、網(wǎng)站結(jié)構(gòu)、界面設(shè)計(jì)、圖形設(shè)計(jì)及圖像和視頻等</li>
<li>能熟悉產(chǎn)業(yè)標(biāo)準(zhǔn)生態(tài)，活用<strong><strong>HTML5</strong></strong>及<strong><strong>CSS3</strong></strong>的產(chǎn)業(yè)技術(shù)標(biāo)準(zhǔn)</li>
<li>能描述<strong><strong>響應(yīng)式網(wǎng)頁設(shè)計(jì)</strong></strong>的功能、特征及技術(shù)實(shí)踐常用標(biāo)準(zhǔn)作法</li>
<li>能運(yùn)用設(shè)計(jì)與制作<strong><strong>工具</strong></strong>及區(qū)分工具<strong><strong>使用</strong></strong><strong><strong>情境</strong></strong></li>
<li>能認(rèn)識(shí)相關(guān)<strong><strong>實(shí)踐社群</strong></strong>及學(xué)科，習(xí)得最佳實(shí)踐及技巧的更新途徑</li>
</ul>
<p>以上課程目標(biāo)之詳細(xì)作法按如下分章節(jié)詳述：</p>
<p>?</p>
<p>?</p>
<p><strong>四、教學(xué)進(jìn)度計(jì)劃表</strong></p>
<p>說明：<strong><strong>教學(xué)活動(dòng)</strong></strong>除有額外說明，均為混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)</p>
<table>
<tbody>
<tr>
<td width="58">
<p><strong><strong>周次</strong></strong></p>
</td>
<td width="269">
<p><strong><strong>課程要點(diǎn)</strong></strong></p>
</td>
<td width="94">
<p><strong><strong>教學(xué)活動(dòng)</strong></strong></p>
</td>
<td width="160">
<p><strong><strong>閱讀資料</strong></strong></p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong></p>
</td>
<td width="269">
<p>網(wǎng)頁設(shè)計(jì)與制作與工具介紹</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>RWD1</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>2</strong></strong></p>
</td>
<td width="269">
<p>從用戶體驗(yàn)切入響應(yīng)式設(shè)計(jì)實(shí)踐</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>RWD2, WSG0</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>3</strong></strong></p>
</td>
<td width="269">
<p>HTML基本元素：碼云Pages搭建?</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>w3school, 碼云Pages</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>4</strong></strong></p>
</td>
<td width="269">
<p>頁面結(jié)構(gòu)（Page Structure）</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>WSG6</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>5</strong></strong></p>
</td>
<td width="269">
<p>頁面制作案例一<br />☉<strong><strong>期中在線考查</strong></strong><strong><strong>?</strong></strong><strong><strong>A</strong></strong></p>
</td>
<td width="94">
<p>教室外實(shí)踐或?qū)I(yè)分享</p>
</td>
<td width="160">
<p>WP2,WSG4,DMMT</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>6</strong></strong></p>
</td>
<td width="269">
<p>圖像和視頻（Images&Video）</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>WSG11, 12</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>7</strong></strong></p>
</td>
<td width="269">
<p>彈性布局與響應(yīng)式圖片</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>RWD3</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>8</strong></strong></p>
</td>
<td width="269">
<p>HTML5與響應(yīng)式</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>RWD4</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>9</strong></strong></p>
</td>
<td width="269">
<p>CSS3新特性</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>RWD5</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>10</strong></strong></p>
</td>
<td width="269">
<p><strong><strong>☉</strong></strong><strong><strong>期中考查</strong></strong><strong><strong>?</strong></strong><strong><strong>B</strong></strong></p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>?</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong><strong><strong>1</strong></strong></p>
</td>
<td width="269">
<p>網(wǎng)站結(jié)構(gòu)（Site Structure）</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>WSG5</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong><strong><strong>2</strong></strong></p>
</td>
<td width="269">
<p>CSS3高級(jí)技術(shù)</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>RWD6</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong><strong><strong>3</strong></strong></p>
</td>
<td width="269">
<p>介面設(shè)計(jì)（Interface Design）</p>
</td>
<td width="94">
<p>教室外實(shí)踐或?qū)I(yè)分享</p>
</td>
<td width="160">
<p>WSG7</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>14</strong></strong></p>
</td>
<td width="269">
<p>圖形設(shè)計(jì)（Graphic Design）</p>
</td>
<td width="94">
<p>教室外實(shí)踐或?qū)I(yè)分享</p>
</td>
<td width="160">
<p>WSG8</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong><strong><strong>5</strong></strong></p>
</td>
<td width="269">
<p>SVG與響應(yīng)式Web設(shè)計(jì)<br />☉<strong><strong>期中在線考查 </strong></strong><strong><strong>C</strong></strong></p>
</td>
<td width="94">
<p>教室外實(shí)踐或?qū)I(yè)分享</p>
</td>
<td width="160">
<p>RWD7</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>16</strong></strong></p>
</td>
<td width="269">
<p>CSS3過渡、變形和動(dòng)畫</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>WSG9</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong><strong><strong>7</strong></strong></p>
</td>
<td width="269">
<p>☉期末應(yīng)用項(xiàng)目開發(fā)成果展示考查</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>?</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>18</strong></strong></p>
</td>
<td width="269">
<p>☉期末應(yīng)用項(xiàng)目開發(fā)成果點(diǎn)評(píng)總結(jié)</p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">
<p>?</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>19</strong></strong></p>
</td>
<td width="269">
<p><strong><strong>?</strong></strong></p>
</td>
<td width="94">
<p><strong><strong>?</strong></strong></p>
</td>
<td width="160">
<p><strong><strong>?</strong></strong></p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>20</strong></strong></p>
</td>
<td width="269">
<p><strong><strong>?</strong></strong></p>
</td>
<td width="94">
<p>?</p>
</td>
<td width="160">?</td>
</tr>
</tbody>
</table>
其他WORD文書轉(zhuǎn)換或換出HTML格式的方法和結(jié)果比較
標(biāo)簽
<p>: 定義段落
<table>: 定義表格
<tbody>: 定義表格中的主體內(nèi)容
<tr>:定義表格中的行
<Li>:定義列表項(xiàng)目
<ul>:定義無序列表
其他WORD文書轉(zhuǎn)換或換出HTML格式的方法和結(jié)果比較
原文
病假申請(qǐng)
姓名
學(xué)號(hào)
年級(jí)
專業(yè)
請(qǐng)假原因
是否通知家長(zhǎng)
家長(zhǎng)聯(lián)系方式 學(xué)生聯(lián)系方式
學(xué)生代表簽名
請(qǐng)假人簽名
輔導(dǎo)員簽名
銷假證明人
HTML格式
<p>病假申請(qǐng)</p>
<p>?</p>
<p>姓名<br />學(xué)號(hào)<br />年級(jí)<br />專業(yè)</p>
<p>?</p>
<p>請(qǐng)假原因</p>
<p>是否通知家長(zhǎng)</p>
<p>家長(zhǎng)聯(lián)系方式 ????學(xué)生聯(lián)系方式</p>
<p>?</p>
<p>學(xué)生代表簽名</p>
<p>請(qǐng)假人簽名</p>
<p>輔導(dǎo)員簽名</p>
<p>?</p>
<p>銷假證明人</p>
結(jié)果比較
word文檔的格式相對(duì)于簡(jiǎn)單易懂，更加淺顯的反應(yīng)出了我們所要表達(dá)的主要內(nèi)容，而相比較的HTML格式能更清楚的看出內(nèi)容每一段的主體大意，每一段在文章中的位置和所起的作用，是針對(duì)兩個(gè)完全不同的方面。但它們里面也是具有共通之處的，當(dāng)word文檔中的內(nèi)容或格式越繁瑣的時(shí)候，HTML則會(huì)出現(xiàn)更多的標(biāo)簽，它會(huì)跟據(jù)每一段的所給出的內(nèi)容和格式做出相應(yīng)的標(biāo)簽。
實(shí)踐心得
對(duì)于剛開始接觸響應(yīng)式web設(shè)計(jì)的我，HTML代碼的轉(zhuǎn)換對(duì)于我來說是非常的新奇的，當(dāng)然一開始接觸HTML代碼也會(huì)對(duì)里面的標(biāo)簽十分的不熟悉，不能完全熟悉每個(gè)標(biāo)簽所代表的意思內(nèi)涵，雖然在實(shí)踐中我能檢查到了HTML代碼，但其實(shí)我對(duì)于里面的內(nèi)涵還是并不太清楚，我會(huì)隨著以后的學(xué)習(xí)不斷的深入去理解實(shí)踐得出我對(duì)響應(yīng)式web設(shè)計(jì)的理解，并嘗試著去做得更好，剛剛?cè)腴T的我對(duì)于這堂課程充滿的好奇也同時(shí)充滿的恐懼，但在今后的學(xué)習(xí)過程中會(huì)不斷地努力學(xué)習(xí)，不斷探索響應(yīng)式web設(shè)計(jì)。
