二、課程目標(biāo)5點(diǎn)（含標(biāo)題）原文

二、課程目標(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)識相關(guān)實(shí)踐社群及學(xué)科，習(xí)得最佳實(shí)踐及技巧的更新途徑

課程目標(biāo)5點(diǎn)（含標(biāo)題）HTML版

<p><strong>二、課程目標(biāo)</strong></p>
<p>透過混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)培養(yǎng)學(xué)生以下能力：</p>
<ol>
<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)識相關(guān)<strong><strong>實(shí)踐社群</strong></strong>及學(xué)科，習(xí)得最佳實(shí)踐及技巧的更新途徑</li>
</ol>

四、教學(xué)進(jìn)度計(jì)劃表（原文）

四、教學(xué)進(jìn)度計(jì)劃表
說明：教學(xué)活動除有額外說明，均為混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)
周次 課程要點(diǎn) 教學(xué)活動 閱讀資料
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高級技術(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過渡、變形和動畫 WSG9
17 ☉期末應(yīng)用項(xiàng)目開發(fā)成果展示考查
18 ☉期末應(yīng)用項(xiàng)目開發(fā)成果點(diǎn)評總結(jié)
19
20

四、教學(xué)進(jìn)度進(jìn)化表（HTML版）

<p><strong>四、教學(xué)進(jìn)度計(jì)劃表</strong></p>
<p>說明：<strong><strong>教學(xué)活動</strong></strong>除有額外說明，均為混合學(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é)活動</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)頁設(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>從用戶體驗(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>頁面結(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>頁面制作案例一 ☉<strong><strong>期中在線考查</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高級技術(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ì) ☉<strong><strong>期中在線考查 </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過渡、變形和動畫</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)目開發(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)目開發(fā)成果點(diǎn)評總結(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>

就這兩部份內(nèi)容轉(zhuǎn)換出的HTML代碼"標(biāo)簽"

<p>定義段落。
<ol> 定義有序列表。
<li> 定義列表的項(xiàng)目。
<table> 定義表格。
<tbody> 定義表格中的主體內(nèi)容。
<tv>定義表格中的行。
<td>定義表格中的單元。
<strong> 定義語氣更為強(qiáng)烈的強(qiáng)調(diào)文本。

其他WORD文書轉(zhuǎn)換或換出HTML格式的方法和結(jié)果比較

原文

調(diào)課申請

姓名
學(xué)號
課程名稱
年級
教學(xué)班班級

原因
原本上課時(shí)間
調(diào)課后的時(shí)間
調(diào)課期限（具體調(diào)課時(shí)間，某天，或是一個(gè)學(xué)期）
老師簽名
Ps:1、一個(gè)學(xué)期的調(diào)課，要找辦公室的教學(xué)助理（何蓉老師）進(jìn)行申請或是直接與任課老師進(jìn)行協(xié)商。
2、一個(gè)學(xué)期只能調(diào)課3次。

HTML版

<p><strong>調(diào)課申請</strong></p>
<p>?</p>
<p>姓名</p>
<p>學(xué)號</p>
<p>課程名稱</p>
<p>年級</p>
<p>教學(xué)班班級</p>
<p>?</p>
<p>?</p>
<p>原因</p>
<p>原本上課時(shí)間</p>
<p>調(diào)課后的時(shí)間</p>
<p>調(diào)課期限（具體調(diào)課時(shí)間，某天，或是一個(gè)學(xué)期）</p>
<p>老師簽名</p>
<p>Ps:1、一個(gè)學(xué)期的調(diào)課，要找辦公室的教學(xué)助理（何蓉老師）進(jìn)行申請或是直接與任課老師進(jìn)行協(xié)商。</p>
<p>2、一個(gè)學(xué)期只能調(diào)課3次。</p>

結(jié)果比較

與“課程大綱相比”，“調(diào)課申請”沒有在word文檔中設(shè)置更為精致的表格，而是以空格替代表格的形式，因此轉(zhuǎn)換為HTML版本后的符號語言要比“課程大綱”中的簡單，基本以<p>為主。而設(shè)置了表格的“課程大綱”擁有更多的符號語言，說明書寫word文檔時(shí)越復(fù)雜，HTML語言也會相應(yīng)來說更繁瑣。

實(shí)踐心得

本次的作業(yè)雖然任務(wù)較多，但所接觸到的有關(guān)“響應(yīng)式web設(shè)計(jì)”的知識是我以前沒有想象過的。雖然一開始面對復(fù)雜的作業(yè)要求，我跟舍友們都是一頭霧水，但在經(jīng)過看書和網(wǎng)上搜索名詞過后，我們逐漸找到了方向，并最終完成了作業(yè)。雖然可能完成得并不完美，但我在這探索的過程中還是得到了十分大的收獲。我們在看到word上文字的同時(shí)，也應(yīng)該想到其相對應(yīng)的HTML語言；在瀏覽網(wǎng)站時(shí)，要知道不同設(shè)備上因屏幕尺寸不同所產(chǎn)生的差異，并想出如何做出調(diào)整；在編寫程序時(shí)，要知道如何使用不同的工具和文本編輯器。誰能想到，看似簡單的一段文字和網(wǎng)站，背后卻蘊(yùn)含著如此多的技巧。學(xué)習(xí)網(wǎng)站、了解網(wǎng)絡(luò)并不簡單，而這是一段奇妙的旅程，需要我們新一代的媒體人不斷地進(jìn)行探索。