<p><strong>二、課程目標(biāo)</strong></p>
<p>透過(guò)混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)培養(yǎng)學(xué)生以下能力：</p>
<ul>
<li>能夠從<strong><strong>用戶(hù)體驗(yàn)</strong></strong>框架，描述網(wǎng)頁(yè)設(shè)計(jì)與制作主要概念，包括頁(yè)面結(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)頁(yè)設(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><strong><strong>用戶(hù)體驗(yàn)</strong></strong></p>
<p>關(guān)于用戶(hù)體驗(yàn)知識(shí)點(diǎn)，教學(xué)要求為學(xué)生能理解用戶(hù)體驗(yàn)的科學(xué)基礎(chǔ)，包括設(shè)計(jì)心理學(xué)。重難點(diǎn)在于用戶(hù)體驗(yàn)的交叉學(xué)科背景，講授及實(shí)踐教學(xué)環(huán)節(jié)將以良莠不同的參考案例做分析比較。</p>
<p><strong><strong>頁(yè)面結(jié)構(gòu)（</strong></strong><strong><strong>Page Structure</strong></strong><strong><strong>）</strong></strong></p>
<p>關(guān)于頁(yè)面結(jié)構(gòu)，教學(xué)要求為從學(xué)生能操作頁(yè)面結(jié)構(gòu)語(yǔ)法—HTML5 and CSS3—的規(guī)范。重難點(diǎn)在于頁(yè)面結(jié)構(gòu)及語(yǔ)法的原理及實(shí)踐，講授及實(shí)踐教學(xué)環(huán)節(jié)將以不同類(lèi)型網(wǎng)站下的各種頁(yè)面結(jié)構(gòu)元素安排做參考案例比較，前者包括內(nèi)容管理系統(tǒng)、問(wèn)卷調(diào)查網(wǎng)站、等，后者包括導(dǎo)航模塊、側(cè)欄等。</p>
<p><strong><strong>網(wǎng)站結(jié)構(gòu)（</strong></strong><strong><strong>Site Structure</strong></strong><strong><strong>）</strong></strong></p>
<p>關(guān)于網(wǎng)站結(jié)構(gòu)知識(shí)點(diǎn)，教學(xué)要求為從學(xué)生能理解并區(qū)分網(wǎng)站的各組成分子。重難點(diǎn)在于結(jié)合網(wǎng)站結(jié)構(gòu)整體規(guī)劃及各別實(shí)際文檔的整合性操作，講授及實(shí)踐教學(xué)環(huán)節(jié)將以不同類(lèi)型網(wǎng)站下的各種HTML及CSS檔案安排為參考案例，反復(fù)操演比較各類(lèi)網(wǎng)站之結(jié)構(gòu)安排重點(diǎn)及工作流程。</p>
<p><strong><strong>界面設(shè)計(jì)（</strong></strong><strong><strong>Interface Design</strong></strong><strong><strong>）及圖形設(shè)計(jì)（</strong></strong><strong><strong>Graphic Design</strong></strong><strong><strong>）</strong></strong></p>
<p>關(guān)于接口設(shè)計(jì)及圖形設(shè)計(jì)知識(shí)點(diǎn)，教學(xué)要求為從學(xué)生能適當(dāng)就界面及圖形觀(guān)點(diǎn)提出網(wǎng)頁(yè)設(shè)計(jì)及用戶(hù)體驗(yàn)的學(xué)理及業(yè)界規(guī)范。重難點(diǎn)在于結(jié)合設(shè)計(jì)及結(jié)構(gòu)，講授及實(shí)踐教學(xué)環(huán)節(jié)將以同上知識(shí)點(diǎn)操作之方式，反復(fù)操演設(shè)計(jì)安排及互評(píng)互檢查設(shè)計(jì)成果。</p>
<p><strong><strong>響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)</strong></strong></p>
<p>關(guān)于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)知識(shí)點(diǎn)，教學(xué)要求為從學(xué)生理解并操作響應(yīng)式網(wǎng)頁(yè)科技及原理。重難點(diǎn)在于響應(yīng)式網(wǎng)頁(yè)要求如何能落實(shí)在頁(yè)面結(jié)構(gòu)、網(wǎng)站結(jié)構(gòu)、界面設(shè)計(jì)及圖形設(shè)計(jì)上，以增進(jìn)用戶(hù)體驗(yàn)，講授及實(shí)踐教學(xué)環(huán)節(jié)將以同上知識(shí)點(diǎn)操作之方式，反復(fù)操演響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)功能、特征及技術(shù)實(shí)踐常用標(biāo)準(zhǔn)作法及互評(píng)互檢查設(shè)計(jì)成果。</p>
<p><strong>四、教學(xué)進(jìn)度計(jì)劃表</strong></p>
<p>說(shuō)明：<strong><strong>教學(xué)活動(dòng)</strong></strong>除有額外說(shuō)明，均為混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)</p>
<table>
<tbody>
<tr>
<td width="73">
<p><strong><strong>周次</strong></strong></p>
</td>
<td width="337">
<p><strong><strong>課程要點(diǎn)</strong></strong></p>
</td>
<td width="118">
<p><strong><strong>教學(xué)活動(dòng)</strong></strong></p>
</td>
<td width="200">
<p><strong><strong>閱讀資料</strong></strong></p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>1</strong></strong></p>
</td>
<td width="337">
<p>網(wǎng)頁(yè)設(shè)計(jì)與制作與工具介紹</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>RWD1</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>2</strong></strong></p>
</td>
<td width="337">
<p>從用戶(hù)體驗(yàn)切入響應(yīng)式設(shè)計(jì)實(shí)踐</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>RWD2, WSG0</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>3</strong></strong></p>
</td>
<td width="337">
<p>HTML基本元素：碼云Pages搭建?</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>w3school, 碼云Pages</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>4</strong></strong></p>
</td>
<td width="337">
<p>頁(yè)面結(jié)構(gòu)（Page Structure）</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>WSG6</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>5</strong></strong></p>
</td>
<td width="337">
<p>頁(yè)面制作案例一<br />☉<strong><strong>期中在線(xiàn)考查</strong></strong><strong><strong>?</strong></strong><strong><strong>A</strong></strong></p>
</td>
<td width="118">
<p>教室外實(shí)踐或?qū)I(yè)分享</p>
</td>
<td width="200">
<p>WP2,WSG4,DMMT</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>6</strong></strong></p>
</td>
<td width="337">
<p>圖像和視頻（Images&Video）</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>WSG11, 12</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>7</strong></strong></p>
</td>
<td width="337">
<p>彈性布局與響應(yīng)式圖片</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>RWD3</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>8</strong></strong></p>
</td>
<td width="337">
<p>HTML5與響應(yīng)式</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>RWD4</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>9</strong></strong></p>
</td>
<td width="337">
<p>CSS3新特性</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>RWD5</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>10</strong></strong></p>
</td>
<td width="337">
<p><strong><strong>☉</strong></strong><strong><strong>期中考查</strong></strong><strong><strong>?</strong></strong><strong><strong>B</strong></strong></p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>?</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>1</strong></strong><strong><strong>1</strong></strong></p>
</td>
<td width="337">
<p>網(wǎng)站結(jié)構(gòu)（Site Structure）</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>WSG5</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>1</strong></strong><strong><strong>2</strong></strong></p>
</td>
<td width="337">
<p>CSS3高級(jí)技術(shù)</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>RWD6</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>1</strong></strong><strong><strong>3</strong></strong></p>
</td>
<td width="337">
<p>介面設(shè)計(jì)（Interface Design）</p>
</td>
<td width="118">
<p>教室外實(shí)踐或?qū)I(yè)分享</p>
</td>
<td width="200">
<p>WSG7</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>14</strong></strong></p>
</td>
<td width="337">
<p>圖形設(shè)計(jì)（Graphic Design）</p>
</td>
<td width="118">
<p>教室外實(shí)踐或?qū)I(yè)分享</p>
</td>
<td width="200">
<p>WSG8</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>1</strong></strong><strong><strong>5</strong></strong></p>
</td>
<td width="337">
<p>SVG與響應(yīng)式Web設(shè)計(jì)<br />☉<strong><strong>期中在線(xiàn)考查 </strong></strong><strong><strong>C</strong></strong></p>
</td>
<td width="118">
<p>教室外實(shí)踐或?qū)I(yè)分享</p>
</td>
<td width="200">
<p>RWD7</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>16</strong></strong></p>
</td>
<td width="337">
<p>CSS3過(guò)渡、變形和動(dòng)畫(huà)</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>WSG9</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>1</strong></strong><strong><strong>7</strong></strong></p>
</td>
<td width="337">
<p>☉期末應(yīng)用項(xiàng)目開(kāi)發(fā)成果展示考查</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>?</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>18</strong></strong></p>
</td>
<td width="337">
<p>☉期末應(yīng)用項(xiàng)目開(kāi)發(fā)成果點(diǎn)評(píng)總結(jié)</p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">
<p>?</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>19</strong></strong></p>
</td>
<td width="337">
<p><strong><strong>?</strong></strong></p>
</td>
<td width="118">
<p><strong><strong>?</strong></strong></p>
</td>
<td width="200">
<p><strong><strong>?</strong></strong></p>
</td>
</tr>
<tr>
<td width="73">
<p><strong><strong>20</strong></strong></p>
</td>
<td width="337">
<p><strong><strong>?</strong></strong></p>
</td>
<td width="118">
<p>?</p>
</td>
<td width="200">?</td>
</tr>
</tbody>
</table>
標(biāo)簽、功能類(lèi)別及描述
- <p>：定義段落
- <ul>：定義無(wú)序列表
- <li>：定義列表的項(xiàng)目
- <strong>：定義語(yǔ)氣更為強(qiáng)烈的強(qiáng)調(diào)文本
- <table>：定義表格
- <tbody>：定義表格中的主體內(nèi)容
- <tr>：定義表格中的行
- <td>：定義表格中的單元
WORD文書(shū)轉(zhuǎn)換或換出HTML格式的方法和結(jié)果比較
另一種WORD文書(shū)轉(zhuǎn)換方法是：
打開(kāi)word文檔，單擊菜單欄中的“文件”，找到“另存為” 或“另存為網(wǎng)頁(yè)”。單擊另存為” 或“另存為網(wǎng)頁(yè)”，彈出"另存為" 窗口。在"另存為" 窗口的“保存類(lèi)型”，下拉菜單中找到“網(wǎng)頁(yè)”。在“文件名”一欄中可以修改我們想要的文件名。點(diǎn)“保存”，就把一篇word文檔保存成網(wǎng)頁(yè)格式了。這時(shí)候在桌面就可以找到保存的網(wǎng)頁(yè)，然后用瀏覽器會(huì)打開(kāi)并顯示網(wǎng)頁(yè)的內(nèi)容。
比較
與使用 https://html-cleaner.com 得出HTML代碼可以看出，該種轉(zhuǎn)換方法步驟比較多，沒(méi)有直接用 https://html-cleaner.com 得出HTML代碼的方法簡(jiǎn)便。
實(shí)踐心得：
使用 https://html-cleaner.com 得出HTML代碼的方法很簡(jiǎn)便，可以讓我們更快的得出HTML代碼。這可以節(jié)省很多時(shí)間，也可以提高我們的工作效率。
