基本辦公文書轉(zhuǎn)HTML工具

課程目標(biāo)

  • 透過混合學(xué)習(xí)及體驗式學(xué)習(xí)培養(yǎng)學(xué)生以下能力：
  • (1)能夠從用戶體驗框架，描述網(wǎng)頁設(shè)計與制作主要概念，包括頁面結(jié)構(gòu)、網(wǎng)站結(jié)構(gòu)、界面設(shè)計、圖形設(shè)計及圖像和視頻等
  • (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è)計的功能、特征及技術(shù)實踐常用標(biāo)準(zhǔn)作法
  • (4)能運用設(shè)計與制作工具及區(qū)分工具使用情境
  • (5)能認(rèn)識相關(guān)實踐社群及學(xué)科，習(xí)得最佳實踐及技巧的更新途徑

代碼：

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

教學(xué)進度計劃表的HTML

<p><strong>教學(xué)進度計劃表</strong></p>
<p>說明：<strong><strong>教學(xué)活動</strong></strong>除有額外說明，均為混合學(xué)習(xí)及體驗式學(xué)習(xí)</p>
<table>
<tbody>
<tr>
<td width="58">
<p><strong><strong>周次</strong></strong></p>
</td>
<td width="269">
<p><strong><strong>課程要點</strong></strong></p>
</td>
<td width="94">
<p><strong><strong>教學(xué)活動</strong></strong></p>
</td>
<td width="160">
<p><strong><strong>閱讀資料</strong></strong></p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong></p>
</td>
<td width="269">
<p>網(wǎng)頁設(shè)計與制作與工具介紹</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p>RWD1</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>2</strong></strong></p>
</td>
<td width="269">
<p>從用戶體驗切入響應(yīng)式設(shè)計實踐</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p>RWD2, WSG0</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>3</strong></strong></p>
</td>
<td width="269">
<p>HTML基本元素：碼云Pages搭建 </p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p>w3school, 碼云Pages</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>4</strong></strong></p>
</td>
<td width="269">
<p>頁面結(jié)構(gòu)（Page Structure）</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p>WSG6</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>5</strong></strong></p>
</td>
<td width="269">
<p>頁面制作案例一<br />☉<strong><strong>期中在線考查</strong></strong><strong><strong> </strong></strong><strong><strong>A</strong></strong></p>
</td>
<td width="94">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="160">
<p>WP2,WSG4,DMMT</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>6</strong></strong></p>
</td>
<td width="269">
<p>圖像和視頻（Images&Video）</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p>WSG11, 12</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>7</strong></strong></p>
</td>
<td width="269">
<p>彈性布局與響應(yīng)式圖片</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p>RWD3</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>8</strong></strong></p>
</td>
<td width="269">
<p>HTML5與響應(yīng)式</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p>RWD4</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>9</strong></strong></p>
</td>
<td width="269">
<p>CSS3新特性</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p>RWD5</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>10</strong></strong></p>
</td>
<td width="269">
<p><strong><strong>☉</strong></strong><strong><strong>期中考查</strong></strong><strong><strong> </strong></strong><strong><strong>B</strong></strong></p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p> </p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong><strong><strong>1</strong></strong></p>
</td>
<td width="269">
<p>網(wǎng)站結(jié)構(gòu)（Site Structure）</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p>WSG5</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong><strong><strong>2</strong></strong></p>
</td>
<td width="269">
<p>CSS3高級技術(shù)</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p>RWD6</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong><strong><strong>3</strong></strong></p>
</td>
<td width="269">
<p>介面設(shè)計（Interface Design）</p>
</td>
<td width="94">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="160">
<p>WSG7</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>14</strong></strong></p>
</td>
<td width="269">
<p>圖形設(shè)計（Graphic Design）</p>
</td>
<td width="94">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="160">
<p>WSG8</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong><strong><strong>5</strong></strong></p>
</td>
<td width="269">
<p>SVG與響應(yīng)式Web設(shè)計<br />☉<strong><strong>期中在線考查 </strong></strong><strong><strong>C</strong></strong></p>
</td>
<td width="94">
<p>教室外實踐或?qū)I(yè)分享</p>
</td>
<td width="160">
<p>RWD7</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>16</strong></strong></p>
</td>
<td width="269">
<p>CSS3過渡、變形和動畫</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p>WSG9</p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>1</strong></strong><strong><strong>7</strong></strong></p>
</td>
<td width="269">
<p>☉期末應(yīng)用項目開發(fā)成果展示考查</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p> </p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>18</strong></strong></p>
</td>
<td width="269">
<p>☉期末應(yīng)用項目開發(fā)成果點評總結(jié)</p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160">
<p> </p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>19</strong></strong></p>
</td>
<td width="269">
<p><strong><strong> </strong></strong></p>
</td>
<td width="94">
<p><strong><strong> </strong></strong></p>
</td>
<td width="160">
<p><strong><strong> </strong></strong></p>
</td>
</tr>
<tr>
<td width="58">
<p><strong><strong>20</strong></strong></p>
</td>
<td width="269">
<p><strong><strong> </strong></strong></p>
</td>
<td width="94">
<p> </p>
</td>
<td width="160"> </td>
</tr>
</tbody>
</table>

HTML代碼便簽：

  • <p>：定義段落
  • <li>：定義列表的項目
  • <tr>：定義表格中的行
  • <strong>:定義語氣更為強烈的強調(diào)文本
  • <ul>：定義無序列表
  • <table>：定義表格<strong>
  • <tbody>：定義表格中的主體內(nèi)容
  • <td>：定義表格中的單元
  • <b>:定義粗體字.
其他WORD文書轉(zhuǎn)換或換出HTML格式的方法和結(jié)果比較

方法：

來自網(wǎng)絡(luò)圖片

來自網(wǎng)絡(luò)圖片

來自網(wǎng)絡(luò)圖片

來自網(wǎng)絡(luò)圖片

來自網(wǎng)絡(luò)圖片

結(jié)果：

微信圖片_20180309222537.png

微信圖片_20180309222542.png
對比效果：
  • 通過對比發(fā)現(xiàn)，一些必要的元素會在每一中word轉(zhuǎn)換成代碼中出現(xiàn)，比如<p>、<li>、 <tr>、 <strong>
    <ul>、 <table>、<tbody>，但是內(nèi)容不一樣，會出現(xiàn)不一樣的標(biāo)簽，比如：<tr class="">、<img>、
    、<rt>

實踐心得：

第一次接觸HTML是在上學(xué)期，第一次是完全看不懂的狀態(tài)，自己在相關(guān)的網(wǎng)站學(xué)習(xí)了一些關(guān)于HTML代碼的一些標(biāo)簽，比如：<!DOCTYPE> 標(biāo)簽、<a>： 標(biāo)簽定義超鏈接，用于從一張頁面鏈接到另一張頁面、<abbr> 標(biāo)簽指示簡稱或縮寫，比如 "WWW" 或 "NATO"等等，覺得這是一個神奇的世界，也漸漸有更多的好奇心想要去了解。HTML可以說是HTML1、HTML2、HTML5的源頭，HTML上有挺多的標(biāo)簽或者是語法被更新，特別是在響應(yīng)式網(wǎng)頁設(shè)計的出現(xiàn)。通過HTML，我還了解了CSS3、媒體查詢等其他與之有關(guān)的知識。這學(xué)期才開開始，而我覺得HTML會給帶來美妙的體驗的。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本課課程大綱內(nèi)容與其HTML代碼（注明HTML代碼來自 https://html-cleaner.com ） 原文...
    我不是吳綺雯閱讀 354評論 0贊 2
  • 二、課程目標(biāo) 透過混合學(xué)習(xí)及體驗式學(xué)習(xí)培養(yǎng)學(xué)生以下能力： 能夠從 用戶體驗 框架，描述網(wǎng)頁設(shè)計與制作主要概...
    voyzze閱讀 391評論 0贊 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,204評論 1贊 92
  • 不知道因為什么原因，空下來的時候，總是一陣又一陣的心慌，不知所措。害怕的感覺從里到外貫穿，我不知道我到底可以做成些...
    婻姵閱讀 290評論 0贊 0
  • 周末陽光正好，適合在家洗洗曬曬，不經(jīng)意間看到自己下載了但是一直沒使用的app-簡書，記得是自己當(dāng)時想著找個軟件記日...
    淡泊寧靜89閱讀 215評論 0贊 0

友情鏈接更多精彩內(nèi)容