一、使用 簡書將本課課程大綱之選取內(nèi)容拷貝貼上把篓，得出HTML代碼：
<p><strong>二纫溃、課程目標(biāo)</strong></p>
<p>透過混合學(xué)習(xí)及體驗式學(xué)習(xí)培養(yǎng)學(xué)生以下能力：</p>
<ul>
<li>能夠從<strong>用戶體驗</strong>框架，描述網(wǎng)頁設(shè)計與制作主要概念纸俭，包括頁面結(jié)構(gòu)皇耗、網(wǎng)站結(jié)構(gòu)、界面設(shè)計揍很、圖形設(shè)計及圖像和視頻等</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)頁設(shè)計</strong>的功能、特征及技術(shù)實踐常用標(biāo)準(zhǔn)作法</li>
<li>能運用設(shè)計與制作<strong>工具</strong>及區(qū)分工具<strong>使用</strong><strong>情境</strong></li>
<li>能認(rèn)識相關(guān)<strong>實踐社群</strong>及學(xué)科窒悔，習(xí)得最佳實踐及技巧的更新途徑</li>
</ul>
<p>以上課程目標(biāo)之詳細作法按如下分章節(jié)詳述：</p>
<p><strong>用戶體驗</strong></p>
<p>關(guān)于用戶體驗知識點呜袁，教學(xué)要求為學(xué)生能理解用戶體驗的科學(xué)基礎(chǔ)，包括設(shè)計心理學(xué)简珠。重難點在于用戶體驗的交叉學(xué)科背景阶界，講授及實踐教學(xué)環(huán)節(jié)將以良莠不同的參考案例做分析比較虹钮。</p>
<p><strong>頁面結(jié)構(gòu)（Page Structure）</strong></p>
<p>關(guān)于頁面結(jié)構(gòu)，教學(xué)要求為從學(xué)生能操作頁面結(jié)構(gòu)語法—HTML5 and CSS3—的規(guī)范膘融。重難點在于頁面結(jié)構(gòu)及語法的原理及實踐芙粱，講授及實踐教學(xué)環(huán)節(jié)將以不同類型網(wǎng)站下的各種頁面結(jié)構(gòu)元素安排做參考案例比較，前者包括內(nèi)容管理系統(tǒng)氧映、問卷調(diào)查網(wǎng)站春畔、等，后者包括導(dǎo)航模塊岛都、側(cè)欄等律姨。</p>
<p><strong>網(wǎng)站結(jié)構(gòu)（Site Structure）</strong></p>
<p>關(guān)于網(wǎng)站結(jié)構(gòu)知識點，教學(xué)要求為從學(xué)生能理解并區(qū)分網(wǎng)站的各組成分子臼疫。重難點在于結(jié)合網(wǎng)站結(jié)構(gòu)整體規(guī)劃及各別實際文檔的整合性操作择份，講授及實踐教學(xué)環(huán)節(jié)將以不同類型網(wǎng)站下的各種HTML及CSS檔案安排為參考案例，反復(fù)操演比較各類網(wǎng)站之結(jié)構(gòu)安排重點及工作流程烫堤。</p>
<p><strong>界面設(shè)計（Interface Design）及圖形設(shè)計（Graphic Design）</strong></p>
<p>關(guān)于接口設(shè)計及圖形設(shè)計知識點荣赶，教學(xué)要求為從學(xué)生能適當(dāng)就界面及圖形觀點提出網(wǎng)頁設(shè)計及用戶體驗的學(xué)理及業(yè)界規(guī)范。重難點在于結(jié)合設(shè)計及結(jié)構(gòu)鸽斟，講授及實踐教學(xué)環(huán)節(jié)將以同上知識點操作之方式讯壶，反復(fù)操演設(shè)計安排及互評互檢查設(shè)計成果。</p>
<p><strong>響應(yīng)式網(wǎng)頁設(shè)計</strong></p>
<p>關(guān)于響應(yīng)式網(wǎng)頁設(shè)計知識點湾盗，教學(xué)要求為從學(xué)生理解并操作響應(yīng)式網(wǎng)頁科技及原理。重難點在于響應(yīng)式網(wǎng)頁要求如何能落實在頁面結(jié)構(gòu)立轧、網(wǎng)站結(jié)構(gòu)格粪、界面設(shè)計及圖形設(shè)計上，以增進用戶體驗氛改，講授及實踐教學(xué)環(huán)節(jié)將以同上知識點操作之方式帐萎，反復(fù)操演響應(yīng)式網(wǎng)頁設(shè)計功能、特征及技術(shù)實踐常用標(biāo)準(zhǔn)作法及互評互檢查設(shè)計成果胜卤。</p>
<p><strong>四疆导、教學(xué)進度計劃表</strong></p>
<p>說明：<strong>教學(xué)活動</strong>除有額外說明，均為混合學(xué)習(xí)及體驗式學(xué)習(xí)</p>
<table width="583">
<tbody>
<tr>
<td width="59">
<p><strong>周次</strong></p>
</td>
<td width="270">
<p><strong>課程要點</strong></p>
</td>
<td width="95">
<p><strong>教學(xué)活動</strong></p>
</td>
<td width="161">
<p><strong>閱讀資料</strong></p>
</td>
</tr>
<tr>
<td width="59">
<p>1</p>
</td>
<td width="270">
<p>網(wǎng)頁設(shè)計與制作與工具介紹</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>RWD1</p>
</td>
</tr>
<tr>
<td width="59">
<p>2</p>
</td>
<td width="270">
<p>從用戶體驗切入響應(yīng)式設(shè)計實踐</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>RWD2, WSG0</p>
</td>
</tr>
<tr>
<td width="59">
<p>3</p>
</td>
<td width="270">
<p>HTML基本元素：碼云Pages搭建</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>w3school, 碼云Pages</p>
</td>
</tr>
<tr>
<td width="59">
<p>4</p>
</td>
<td width="270">
<p>頁面結(jié)構(gòu)（Page Structure）</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>WSG6</p>
</td>
</tr>
<tr>
<td width="59">
<p>5</p>
</td>
<td width="270">
<p>頁面制作案例一<br /> ☉<strong>期中在線考查</strong> <strong>A</strong></p>
</td>
<td width="95">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="161">
<p>WP2,WSG4,DMMT</p>
</td>
</tr>
<tr>
<td width="59">
<p>6</p>
</td>
<td width="270">
<p>圖像和視頻（Images&Video）</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>WSG11, 12</p>
</td>
</tr>
<tr>
<td width="59">
<p>7</p>
</td>
<td width="270">
<p>彈性布局與響應(yīng)式圖片</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>RWD3</p>
</td>
</tr>
<tr>
<td width="59">
<p>8</p>
</td>
<td width="270">
<p>HTML5與響應(yīng)式</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>RWD4</p>
</td>
</tr>
<tr>
<td width="59">
<p>9</p>
</td>
<td width="270">
<p>CSS3新特性</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>RWD5</p>
</td>
</tr>
<tr>
<td width="59">
<p>10</p>
</td>
<td width="270">
<p><strong>☉</strong><strong>期中考查</strong><strong> B</strong></p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>?</p>
</td>
</tr>
<tr>
<td width="59">
<p>11</p>
</td>
<td width="270">
<p>網(wǎng)站結(jié)構(gòu)（Site Structure）</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>WSG5</p>
</td>
</tr>
<tr>
<td width="59">
<p>12</p>
</td>
<td width="270">
<p>CSS3高級技術(shù)</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>RWD6</p>
</td>
</tr>
<tr>
<td width="59">
<p>13</p>
</td>
<td width="270">
<p>介面設(shè)計（Interface Design）</p>
</td>
<td width="95">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="161">
<p>WSG7</p>
</td>
</tr>
<tr>
<td width="59">
<p>14</p>
</td>
<td width="270">
<p>圖形設(shè)計（Graphic Design）</p>
</td>
<td width="95">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="161">
<p>WSG8</p>
</td>
</tr>
<tr>
<td width="59">
<p>15</p>
</td>
<td width="270">
<p>SVG與響應(yīng)式Web設(shè)計<br /> ☉<strong>期中在線考查</strong><strong> C</strong></p>
</td>
<td width="95">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="161">
<p>RWD7</p>
</td>
</tr>
<tr>
<td width="59">
<p>16</p>
</td>
<td width="270">
<p>CSS3過渡葛躏、變形和動畫</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>WSG9</p>
</td>
</tr>
<tr>
<td width="59">
<p>17</p>
</td>
<td width="270">
<p>☉期末應(yīng)用項目開發(fā)成果展示考查</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>?</p>
</td>
</tr>
<tr>
<td width="59">
<p>18</p>
</td>
<td width="270">
<p>☉期末應(yīng)用項目開發(fā)成果點評總結(jié)</p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>?</p>
</td>
</tr>
<tr>
<td width="59">
<p>19</p>
</td>
<td width="270">
<p><strong>?</strong></p>
</td>
<td width="95">
<p><strong>?</strong></p>
</td>
<td width="161">
<p><strong>?</strong></p>
</td>
</tr>
<tr>
<td width="59">
<p>20</p>
</td>
<td width="270">
<p><strong>?</strong></p>
</td>
<td width="95">
<p>?</p>
</td>
<td width="161">
<p>?</p>
</td>
</tr>
</tbody>
</table>
<p>?</p>
二快骗、將上面的HTML代碼"標(biāo)簽"記錄并列出查找其功能類別及描述
<p> 標(biāo)簽定義段落
<strong> 標(biāo)簽定義文本為語氣更強調(diào)的內(nèi)容
<li> 標(biāo)簽定義列表項目
<ul> 標(biāo)簽定義無序列表
<table> 標(biāo)簽定義 HTML 表格
<tbody> 標(biāo)簽定義表格主體
<tr> 標(biāo)簽定義 HTML 表格中的行
<td> 標(biāo)簽定義 HTML 表格中的標(biāo)準(zhǔn)單元格
三郭毕、其他WORD文書轉(zhuǎn)換或換出HTML格式的方法和結(jié)果比較
1.其他WORD文書轉(zhuǎn)換效果
微信圖片_20180312213001.png
與先前的對比，代碼可謂是十分簡單，幾個標(biāo)簽就搞定了汁掠。應(yīng)該是文檔涉及的形式越多，顯示的代碼就越多都越復(fù)雜
2.通過wps將word保存為html格式卤恳。
步驟如下：
1.打開word文檔萄喳，單擊菜單欄中的“文件”，找到“另存為” 或“另存為網(wǎng)頁”
2.單擊另存為” 或“另存為網(wǎng)頁”，彈出"另存為" 窗口
3.在"另存為" 窗口的“保存類型”鹦聪，下拉菜單中找到“網(wǎng)頁”
4.在“文件名”一欄中可以修改我們想要的文件名
5.點“保存”账阻，就把一篇word文檔保存成網(wǎng)頁格式了
6.然后用谷歌的開發(fā)者工具就能夠檢查到HTML代碼了，或者單擊右鍵泽本，查看網(wǎng)頁源代碼或檢查也可以看到淘太。
1.png
1520814896(1).png
3.word2cleanhtml
貌似用python做的，但是無法轉(zhuǎn)換
簡書
1520811739(1).png
四观挎、實踐心得
實踐出真知琴儿，這是不變的真理。只有自己動手去實踐嘁捷，才能夠熟練掌握和變通造成。通過這一系列的學(xué)習(xí)，更加明白了學(xué)好代碼是一件多么重要的事情雄嚣，21世紀(jì)是編程的時代晒屎。并且能夠熟練地去應(yīng)用各種軟件和開發(fā)，這才是作為一名網(wǎng)新人必備的技能缓升。我逐漸明白了響應(yīng)式網(wǎng)頁設(shè)計的原理和使用目的鼓鲁，也能夠自己動手去查找應(yīng)用案例，體驗不一樣的網(wǎng)頁設(shè)計效果港谊。但是還有很長一段路要走骇吭，繼續(xù)學(xué)習(xí)HTML5和CSS3吧，接下來還會有意想不到的驚喜歧寺！
