二、課程目標(biāo)
透過(guò)混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)培養(yǎng)學(xué)生以下能力：
能夠從用戶體驗(yàn)框架，描述網(wǎng)頁(yè)設(shè)計(jì)與制作主要概念，包括頁(yè)面結(jié)構(gòu)、網(wǎng)站結(jié)構(gòu)、界面設(shè)計(jì)、圖形設(shè)計(jì)及圖像和視頻等
能熟悉產(chǎn)業(yè)標(biāo)準(zhǔn)生態(tài)，活用HTML5及CSS3的產(chǎn)業(yè)技術(shù)標(biāo)準(zhǔn)
能描述響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的功能、特征及技術(shù)實(shí)踐常用標(biāo)準(zhǔn)作法
能運(yùn)用設(shè)計(jì)與制作工具及區(qū)分工具使用情境
能認(rèn)識(shí)相關(guān)實(shí)踐社群及學(xué)科，習(xí)得最佳實(shí)踐及技巧的更新途徑

<p><strong>二、課程目標(biāo)</strong></p>
<p>透過(guò)混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)培養(yǎng)學(xué)生以下能力：</p>
<ul>
<li>能夠從<strong><strong>用戶體驗(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>

教學(xué)進(jìn)度計(jì)劃表格
<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>從用戶體驗(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>期中在線考查</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>期中在線考查 </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>

基礎(chǔ)
<p>標(biāo)簽定義段落。
<title> 元素可定義文檔的標(biāo)題。

瀏覽器會(huì)以特殊的方式來(lái)使用標(biāo)題，并且通常把它放置在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上。同樣，當(dāng)把文檔加入用戶的鏈接列表或者收藏夾或書(shū)簽列表時(shí)，標(biāo)題將成為該文檔鏈接的默認(rèn)名稱。

格式
<strong>
把文本定義為語(yǔ)氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容。

列表
<ul>標(biāo)簽定義無(wú)序列表。
<li>標(biāo)簽定義列表項(xiàng)目。

表格：
<tr> 標(biāo)簽定義 HTML 表格中的行。
<td> 標(biāo)簽定義 HTML 表格中的標(biāo)準(zhǔn)單元格。
<table> 標(biāo)簽定義 HTML 表格。
<tbody> 標(biāo)簽表格主體（正文）。該標(biāo)簽用于組合 HTML 表格的主體內(nèi)容。

tbody 元素應(yīng)該與 thead和 tfoot元素結(jié)合起來(lái)使用。
thead 元素用于對(duì) HTML 表格中的表頭內(nèi)容進(jìn)行分組，而 tfoot 元素用于對(duì) HTML 表格的表注（頁(yè)腳）內(nèi)容進(jìn)行分組。
注釋：如果使用 thead、tfoot 以及 tbody 元素，您就必須使用全部的元素。它們的出現(xiàn)次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁(yè)腳了。您必須在 table 元素內(nèi)部使用這些標(biāo)簽。

HTML <td> 標(biāo)簽的 width 屬性:width 屬性規(guī)定表格單元格的寬度。

通常，單元格占用的空間就是它顯示內(nèi)容需要的空間。width 屬性用于為單元格設(shè)置預(yù)定義的寬度

用word文檔把文章保存為html格式，再用網(wǎng)頁(yè)打開(kāi)查看代碼是是這個(gè)樣子。

無(wú)標(biāo)題7.png

感覺(jué)這個(gè)很細(xì)致，但對(duì)初學(xué)者而言，可能看不明白。

心得
看著本來(lái)簡(jiǎn)介明了的表格被轉(zhuǎn)化成的代碼那么長(zhǎng)，而且HTML 參考手冊(cè)里的代碼這么多，還是挺慌張的。不過(guò)又隱隱覺(jué)得這是有規(guī)律的，只要用心學(xué)好網(wǎng)頁(yè)設(shè)計(jì)，弄明白里面的規(guī)律，就多少能夠運(yùn)用。因?yàn)椴欢乓W(xué)。希望能有所收獲，做出好的網(wǎng)頁(yè)。
還有：HTML 參考手冊(cè)是個(gè)好東西。