課程目標(biāo)
原文
(1)能夠從用戶體驗(yàn)框架，描述網(wǎng)頁(yè)設(shè)計(jì)與制作主要概念，包括頁(yè)面結(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)頁(yè)設(shè)計(jì)的功能、特征及技術(shù)實(shí)踐常用標(biāo)準(zhǔn)作法
(4)能運(yùn)用設(shè)計(jì)與制作工具及區(qū)分工具使用情境
(5)能認(rèn)識(shí)相關(guān)實(shí)踐社群及學(xué)科，習(xí)得最佳實(shí)踐及技巧的更新途徑
HTML格式
<ul>
<li>能夠從<strong>用戶體驗(yàn)</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>HTML5</strong>及<strong>CSS3</strong>的產(chǎn)業(yè)技術(shù)標(biāo)準(zhǔn)</li>
<li>能描述<strong>響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)</strong>的功能、特征及技術(shù)實(shí)踐常用標(biāo)準(zhǔn)作法</li>
<li>能運(yùn)用設(shè)計(jì)與制作<strong>工具</strong>及區(qū)分工具<strong>使用</strong><strong>情境</strong></li>
</ul>
<p>能認(rèn)識(shí)相關(guān)<strong><strong>實(shí)踐社群</strong></strong>及學(xué)科，習(xí)得最佳實(shí)踐及技巧的更新途徑</p>
教學(xué)進(jìn)度計(jì)劃表
原文
周次 課程要點(diǎn)
1 網(wǎng)頁(yè)設(shè)計(jì)與制作與工具介紹
2 從用戶體驗(yàn)切入響應(yīng)式設(shè)計(jì)實(shí)踐
3 HTML基本元素：碼云Pages搭建
4 頁(yè)面結(jié)構(gòu)（Page Structure）
5 頁(yè)面制作案例一
☉期中在線考查 A
6 圖像和視頻（Images&Video）
7 彈性布局與響應(yīng)式圖片
8 HTML5與響應(yīng)式
9 CSS3新特性
10 ☉期中考查 B
11 網(wǎng)站結(jié)構(gòu)（Site Structure）
12 CSS3高級(jí)技術(shù)
13 介面設(shè)計(jì)（Interface Design）
14 圖形設(shè)計(jì)（Graphic Design）
15 SVG與響應(yīng)式Web設(shè)計(jì)
☉期中在線考查 C
16 CSS3過渡、變形和動(dòng)畫
17 ☉期末應(yīng)用項(xiàng)目開發(fā)成果展示考查
18 ☉期末應(yīng)用項(xiàng)目開發(fā)成果點(diǎn)評(píng)總結(jié)
HTML格式
<table>
<tbody>
<tr>
<td width="73">
<p><strong>周次</strong></p>
</td>
<td width="337">
<p><strong>課程要點(diǎn)</strong></p>
</td>
<td width="118">
<p><strong>教學(xué)活動(dòng)</strong></p>
</td>
<td width="200">
<p><strong>閱讀資料</strong></p>
</td>
</tr>
<tr>
<td width="73">
<p><strong>1</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>2</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>3</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>4</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>5</strong></p>
</td>
<td width="337">
<p>頁(yè)面制作案例一<br />☉<strong>期中在線考查</strong><strong> </strong><strong>A</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>6</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>7</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>8</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>9</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>10</strong></p>
</td>
<td width="337">
<p><strong>☉</strong><strong>期中考查</strong><strong> </strong><strong>B</strong></p>
</td>
<td width="118">
<p> </p>
</td>
<td width="200">
<p> </p>
</td>
</tr>
<tr>
<td width="73">
<p><strong>1</strong><strong>1</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>1</strong><strong>2</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>1</strong><strong>3</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>14</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>1</strong><strong>5</strong></p>
</td>
<td width="337">
<p>SVG與響應(yīng)式Web設(shè)計(jì)<br />☉<strong>期中在線考查 </strong><strong>C</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>16</strong></p>
</td>
<td width="337">
<p>CSS3過渡、變形和動(dòng)畫</p>
</td>
<td width="118">
<p> </p>
</td>
<td width="200">
<p>WSG9</p>
</td>
</tr>
<tr>
<td width="73">
<p><strong>1</strong><strong>7</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>18</strong></p>
<td width="337">
<p>☉期末應(yīng)用項(xiàng)目開發(fā)成果點(diǎn)評(píng)總結(jié)</p>
</td>
</td>
<td width="118">
<p> </p>
</td>
<td width="200">
<p> </p>
</td>
</tr>
<tr>
<td width="73">
<p><strong>19</strong></p>
</td>
<td width="337">
<p><strong> </strong></p>
</td>
<td width="118">
<p><strong> </strong></p>
</td>
<td width="200">
<p><strong> </strong></p>
</td>
</tr>
<tr>
<td width="73">
<p><strong>20</strong></p>
</td>
<td width="337">
<p><strong> </strong></p>
</td>
<td width="118">
<p> </p>
</td>
<td width="200"> </td>
</tr>
</tbody>
</table>
標(biāo)簽功能類別
<tr>：定義表格中的行
<ul>：定義無序列表。
<i> ：標(biāo)簽顯示斜體文本效果。
<td>： 標(biāo)簽定義 HTML 表格中的標(biāo)準(zhǔn)單元格。
<li>： 標(biāo)簽定義列表項(xiàng)目。
<strong>：把文本定義為語氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容。
<p> ：標(biāo)簽定義段落。
實(shí)踐心得
通過制作簡(jiǎn)書，我上網(wǎng)搜索了許多資料，漸漸地了解了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是何物，了解了它的優(yōu)缺點(diǎn)及其操作的精髓，也明白了原來每個(gè)代碼都有不同的含義，制作簡(jiǎn)書的過程也是學(xué)習(xí)的過程，我享受其中。
