<p><strong>二、課程目標</strong></p>
<p>透過混合學習及體驗式學習培養(yǎng)學生以下能力：</p>
<ul>
<li>能夠從<strong><strong>用戶體驗</strong></strong>框架，描述網(wǎng)頁設計與制作主要概念，包括頁面結(jié)構(gòu)、網(wǎng)站結(jié)構(gòu)、界面設計、圖形設計及圖像和視頻等</li>
<li>能熟悉產(chǎn)業(yè)標準生態(tài)，活用<strong><strong>HTML5</strong></strong>及<strong><strong>CSS3</strong></strong>的產(chǎn)業(yè)技術標準</li>
<li>能描述<strong><strong>響應式網(wǎng)頁設計</strong></strong>的功能、特征及技術實踐常用標準作法</li>
<li>能運用設計與制作<strong><strong>工具</strong></strong>及區(qū)分工具<strong><strong>使用</strong></strong><strong><strong>情境</strong></strong></li>
<li>能認識相關<strong><strong>實踐社群</strong></strong>及學科，習得最佳實踐及技巧的更新途徑</li>
</ul>
<p>以上課程目標之詳細作法按如下分章節(jié)詳述：</p>
<p><strong><strong>用戶體驗</strong></strong></p>
<p>關于用戶體驗知識點，教學要求為學生能理解用戶體驗的科學基礎，包括設計心理學。重難點在于用戶體驗的交叉學科背景，講授及實踐教學環(huán)節(jié)將以良莠不同的參考案例做分析比較。</p>
<p><strong><strong>頁面結(jié)構(gòu)（</strong></strong><strong><strong>Page Structure</strong></strong><strong><strong>）</strong></strong></p>
<p>關于頁面結(jié)構(gòu)，教學要求為從學生能操作頁面結(jié)構(gòu)語法—HTML5 and CSS3—的規(guī)范。重難點在于頁面結(jié)構(gòu)及語法的原理及實踐，講授及實踐教學環(huán)節(jié)將以不同類型網(wǎng)站下的各種頁面結(jié)構(gòu)元素安排做參考案例比較，前者包括內(nèi)容管理系統(tǒng)、問卷調(diào)查網(wǎng)站、等，后者包括導航模塊、側(cè)欄等。</p>
<p><strong><strong>網(wǎng)站結(jié)構(gòu)（</strong></strong><strong><strong>Site Structure</strong></strong><strong><strong>）</strong></strong></p>
<p>關于網(wǎng)站結(jié)構(gòu)知識點，教學要求為從學生能理解并區(qū)分網(wǎng)站的各組成分子。重難點在于結(jié)合網(wǎng)站結(jié)構(gòu)整體規(guī)劃及各別實際文檔的整合性操作，講授及實踐教學環(huán)節(jié)將以不同類型網(wǎng)站下的各種HTML及CSS檔案安排為參考案例，反復操演比較各類網(wǎng)站之結(jié)構(gòu)安排重點及工作流程。</p>
<p><strong><strong>界面設計（</strong></strong><strong><strong>Interface Design</strong></strong><strong><strong>）及圖形設計（</strong></strong><strong><strong>Graphic Design</strong></strong><strong><strong>）</strong></strong></p>
<p>關于接口設計及圖形設計知識點，教學要求為從學生能適當就界面及圖形觀點提出網(wǎng)頁設計及用戶體驗的學理及業(yè)界規(guī)范。重難點在于結(jié)合設計及結(jié)構(gòu)，講授及實踐教學環(huán)節(jié)將以同上知識點操作之方式，反復操演設計安排及互評互檢查設計成果。</p>
<p>關于響應式網(wǎng)頁設計知識點，教學要求為從學生理解并操作響應式網(wǎng)頁科技及原理。重難點在于響應式網(wǎng)頁要求如何能落實在頁面結(jié)構(gòu)、網(wǎng)站結(jié)構(gòu)、界面設計及圖形設計上，以增進用戶體驗，講授及實踐教學環(huán)節(jié)將以同上知識點操作之方式，反復操演響應式網(wǎng)頁設計功能、特征及技術實踐常用標準作法及互評互檢查設計成果。</p>
<p>說明：<strong><strong>教學活動</strong></strong>除有額外說明，均為混合學習及體驗式學習</p>
<table>
<tbody>
<tr>
<td width="87">
<p><strong><strong>周次</strong></strong></p>
</td>
<td width="404">
<p><strong><strong>課程要點</strong></strong></p>
</td>
<td width="141">
<p><strong><strong>教學活動</strong></strong></p>
</td>
<td width="241">
<p><strong><strong>閱讀資料</strong></strong></p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>1</strong></strong></p>
</td>
<td width="404">
<p>網(wǎng)頁設計與制作與工具介紹</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>RWD1</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>2</strong></strong></p>
</td>
<td width="404">
<p>從用戶體驗切入響應式設計實踐</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>RWD2, WSG0</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>3</strong></strong></p>
</td>
<td width="404">
<p>HTML基本元素：碼云Pages搭建?</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>w3school, 碼云Pages</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>4</strong></strong></p>
</td>
<td width="404">
<p>頁面結(jié)構(gòu)（Page Structure）</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>WSG6</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>5</strong></strong></p>
</td>
<td width="404">
<p>頁面制作案例一<br />☉<strong><strong>期中在線考查</strong></strong><strong><strong>?</strong></strong><strong><strong>A</strong></strong></p>
</td>
<td width="141">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="241">
<p>WP2,WSG4,DMMT</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>6</strong></strong></p>
</td>
<td width="404">
<p>圖像和視頻（Images&Video）</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>WSG11, 12</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>7</strong></strong></p>
</td>
<td width="404">
<p>彈性布局與響應式圖片</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>RWD3</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>8</strong></strong></p>
</td>
<td width="404">
<p>HTML5與響應式</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>RWD4</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>9</strong></strong></p>
</td>
<td width="404">
<p>CSS3新特性</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>RWD5</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>10</strong></strong></p>
</td>
<td width="404">
<p><strong><strong>☉</strong></strong><strong><strong>期中考查</strong></strong><strong><strong>?</strong></strong><strong><strong>B</strong></strong></p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>?</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>1</strong></strong><strong><strong>1</strong></strong></p>
</td>
<td width="404">
<p>網(wǎng)站結(jié)構(gòu)（Site Structure）</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>WSG5</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>1</strong></strong><strong><strong>2</strong></strong></p>
</td>
<td width="404">
<p>CSS3高級技術</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>RWD6</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>1</strong></strong><strong><strong>3</strong></strong></p>
</td>
<td width="404">
<p>介面設計（Interface Design）</p>
</td>
<td width="141">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="241">
<p>WSG7</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>14</strong></strong></p>
</td>
<td width="404">
<p>圖形設計（Graphic Design）</p>
</td>
<td width="141">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="241">
<p>WSG8</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>1</strong></strong><strong><strong>5</strong></strong></p>
</td>
<td width="404">
<p>SVG與響應式Web設計<br />☉<strong><strong>期中在線考查 </strong></strong><strong><strong>C</strong></strong></p>
</td>
<td width="141">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="241">
<p>RWD7</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>16</strong></strong></p>
</td>
<td width="404">
<p>CSS3過渡、變形和動畫</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>WSG9</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>1</strong></strong><strong><strong>7</strong></strong></p>
</td>
<td width="404">
<p>☉期末應用項目開發(fā)成果展示考查</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>?</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>18</strong></strong></p>
</td>
<td width="404">
<p>☉期末應用項目開發(fā)成果點評總結(jié)</p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">
<p>?</p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>19</strong></strong></p>
</td>
<td width="404">
<p><strong><strong>?</strong></strong></p>
</td>
<td width="141">
<p><strong><strong>?</strong></strong></p>
</td>
<td width="241">
<p><strong><strong>?</strong></strong></p>
</td>
</tr>
<tr>
<td width="87">
<p><strong><strong>20</strong></strong></p>
</td>
<td width="404">
<p><strong><strong>?</strong></strong></p>
</td>
<td width="141">
<p>?</p>
</td>
<td width="241">?</td>
</tr>
</tbody>
</table>
<li>定義列表的項目
<p>定義段落
<p></p> 創(chuàng)建一個段落
<ul>定義無序列表
<strong>定義強調(diào)文本
<strong></strong> 加重文本（通常是斜體加黑體）
<table>定義表格
<tbody>定義表格的主體
<td>定義表格單元
<tr>定義表格行
學習體會
原本對這些代碼、語法等一竅不通，聽完老師的課后以及完成作業(yè)的過程中了解了皮毛，不至于還是門外漢的程度，在實操的過程中增強了一點點操作能力，但也只是體會到了冰山一角。萬事開頭難，或許現(xiàn)在還沒能體會到代碼的美，接下來的課程也要跟緊步驟，希望能早日掌握基礎的東西。
值得反復閱覽的入門干貨集錦
