基本辦公文書轉HTML工具

word文檔

二、課程目標

透過混合學習及體驗式學習培養學生以下能力：
(1)能夠從用戶體驗框架，描述網頁設計與制作主要概念，包括頁面結構、網站結構、界面設計、圖形設計及圖像和視頻等
(2)能熟悉產業標準生態，活用HTML5及CSS3的產業技術標準
(3)能描述響應式網頁設計的功能、特征及技術實踐常用標準作法
(4)能運用設計與制作工具及區分工具使用情境
(5)能認識相關實踐社群及學科，習得最佳實踐及技巧的更新途徑

以上課程目標之詳細作法按如下分章節詳述：

用戶體驗

關于用戶體驗知識點，教學要求為學生能理解用戶體驗的科學基礎，包括設計心理學。重難點在于用戶體驗的交叉學科背景，講授及實踐教學環節將以良莠不同的參考案例做分析比較。

頁面結構（Page Structure）

關于頁面結構，教學要求為從學生能操作頁面結構語法—HTML5 and CSS3—的規范。重難點在于頁面結構及語法的原理及實踐，講授及實踐教學環節將以不同類型網站下的各種頁面結構元素安排做參考案例比較，前者包括內容管理系統、問卷調查網站、等，后者包括導航模塊、側欄等。

網站結構（Site Structure）

關于網站結構知識點，教學要求為從學生能理解并區分網站的各組成分子。重難點在于結合網站結構整體規劃及各別實際文檔的整合性操作，講授及實踐教學環節將以不同類型網站下的各種HTML及CSS檔案安排為參考案例，反復操演比較各類網站之結構安排重點及工作流程。

界面設計（Interface Design）及圖形設計（Graphic Design）

關于接口設計及圖形設計知識點，教學要求為從學生能適當就界面及圖形觀點提出網頁設計及用戶體驗的學理及業界規范。重難點在于結合設計及結構，講授及實踐教學環節將以同上知識點操作之方式，反復操演設計安排及互評互檢查設計成果。

響應式網頁設計

關于響應式網頁設計知識點，教學要求為從學生理解并操作響應式網頁科技及原理。重難點在于響應式網頁要求如何能落實在頁面結構、網站結構、界面設計及圖形設計上，以增進用戶體驗，講授及實踐教學環節將以同上知識點操作之方式，反復操演響應式網頁設計功能、特征及技術實踐常用標準作法及互評互檢查設計成果。

四、教學進度計劃表

說明：教學活動除有額外說明，均為混合學習及體驗式學習

周次 課程要點 教學活動 閱讀資料
1 網頁設計與制作與工具介紹 RWD1
2 從用戶體驗切入響應式設計實踐 RWD2, WSG0
3 HTML基本元素：碼云Pages搭建 w3school, 碼云Pages
4 頁面結構（Page Structure） WSG6
5 頁面制作案例一
☉期中在線考查 A 教室外實踐或專業分享 WP2,WSG4,DMMT
6 圖像和視頻（Images&Video） WSG11, 12
7 彈性布局與響應式圖片 RWD3
8 HTML5與響應式 RWD4
9 CSS3新特性 RWD5
10 ☉期中考查 B
11 網站結構（Site Structure） WSG5
12 CSS3高級技術 RWD6
13 介面設計（Interface Design） 教室外實踐或專業分享 WSG7
14 圖形設計（Graphic Design） 教室外實踐或專業分享 WSG8
15 SVG與響應式Web設計
☉期中在線考查 C 教室外實踐或專業分享 RWD7
16 CSS3過渡、變形和動畫 WSG9
17 ☉期末應用項目開發成果展示考查
18 ☉期末應用項目開發成果點評總結
19
20

HTML語法

<p><strong>二、課程目標</strong></p>
<p>透過混合學習及體驗式學習培養學生以下能力：</p>
<ol>
<li>能夠從<strong><strong>用戶體驗</strong></strong>框架，描述網頁設計與制作主要概念，包括頁面結構、網站結構、界面設計、圖形設計及圖像和視頻等</li>
<li>能熟悉產業標準生態，活用<strong><strong>HTML5</strong></strong>及<strong><strong>CSS3</strong></strong>的產業技術標準</li>
<li>能描述<strong><strong>響應式網頁設計</strong></strong>的功能、特征及技術實踐常用標準作法</li>
<li>能運用設計與制作<strong><strong>工具</strong></strong>及區分工具<strong><strong>使用</strong></strong><strong><strong>情境</strong></strong></li>
<li>能認識相關<strong><strong>實踐社群</strong></strong>及學科，習得最佳實踐及技巧的更新途徑<strong><strong>用戶體驗</strong></strong><strong><strong>頁面結構（</strong></strong><strong><strong>Page Structure</strong></strong><strong><strong>）</strong></strong><strong><strong>網站結構（</strong></strong><strong><strong>Site Structure</strong></strong><strong><strong>）</strong></strong><strong><strong>界面設計（</strong></strong><strong><strong>Interface Design</strong></strong><strong><strong>）及圖形設計（</strong></strong><strong><strong>Graphic Design</strong></strong><strong><strong>）</strong></strong><strong><strong>響應式網頁設計</strong></strong></li>
<li>關于響應式網頁設計知識點，教學要求為從學生理解并操作響應式網頁科技及原理。重難點在于響應式網頁要求如何能落實在頁面結構、網站結構、界面設計及圖形設計上，以增進用戶體驗，講授及實踐教學環節將以同上知識點操作之方式，反復操演響應式網頁設計功能、特征及技術實踐常用標準作法及互評互檢查設計成果。</li>
<li>關于接口設計及圖形設計知識點，教學要求為從學生能適當就界面及圖形觀點提出網頁設計及用戶體驗的學理及業界規范。重難點在于結合設計及結構，講授及實踐教學環節將以同上知識點操作之方式，反復操演設計安排及互評互檢查設計成果。</li>
<li>關于網站結構知識點，教學要求為從學生能理解并區分網站的各組成分子。重難點在于結合網站結構整體規劃及各別實際文檔的整合性操作，講授及實踐教學環節將以不同類型網站下的各種HTML及CSS檔案安排為參考案例，反復操演比較各類網站之結構安排重點及工作流程。</li>
<li>關于頁面結構，教學要求為從學生能操作頁面結構語法—HTML5 and CSS3—的規范。重難點在于頁面結構及語法的原理及實踐，講授及實踐教學環節將以不同類型網站下的各種頁面結構元素安排做參考案例比較，前者包括內容管理系統、問卷調查網站、等，后者包括導航模塊、側欄等。</li>
<li>關于用戶體驗知識點，教學要求為學生能理解用戶體驗的科學基礎，包括設計心理學。重難點在于用戶體驗的交叉學科背景，講授及實踐教學環節將以良莠不同的參考案例做分析比較。</li>
<li>以上課程目標之詳細作法按如下分章節詳述：</li>
</ol>

<p><strong>四、教學進度計劃表</strong></p>
<p>說明：<strong><strong>教學活動</strong></strong>除有額外說明，均為混合學習及體驗式學習</p>
<table>
<tbody>
<tr>
<td width="73">
<p><strong><strong>周次</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>1</strong></strong></p>
</td>
<td width="337">
<p>網頁設計與制作與工具介紹</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>從用戶體驗切入響應式設計實踐</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>頁面結構（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>教室外實踐或專業分享</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>彈性布局與響應式圖片</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與響應式</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>網站結構（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高級技術</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>介面設計（Interface Design）</p>
</td>
<td width="118">
<p>教室外實踐或專業分享</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>圖形設計（Graphic Design）</p>
</td>
<td width="118">
<p>教室外實踐或專業分享</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與響應式Web設計 ☉<strong><strong>期中在線考查 </strong></strong><strong><strong>C</strong></strong></p>
</td>
<td width="118">
<p>教室外實踐或專業分享</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>☉期末應用項目開發成果展示考查</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>☉期末應用項目開發成果點評總結</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">
<p>?</p>
</td>
</tr>
</tbody>
</table>
<p>?</p>

word與HTML轉換的常見便簽

基礎

<!DOCTYPE> ：定義文檔類型。
<html>：定義 HTML 文檔。
<title>：定義文檔的標題。
<body> ：定義文檔的主體。
<h1> to <h6>：定義 HTML 標題。
<p>：定義段落。
<b> ：定義簡單的折行。
<!>：定義注釋。

格式

<strong>：定義語氣更為強烈的強調文本。

鏈接

<link>：定義文檔與外部資源的關系。

列表

<ul>：定義無序列表。
<ol>：定義有序列表。
<li>：定義列表的項目。

表格

<table>：定義表格
<caption>：定義表格標題。
<th>：定義表格中的表頭單元格。
<tr>：定義表格中的行。
<td>：定義表格中的單元。
<thead>：定義表格中的表頭內容。
<tbody>：定義表格中的主體內容。
<tfoot>：定義表格中的表注內容（腳注）。
<col>：定義表格中一個或多個列的屬性值。
<colgroup>：定義表格中供格式化的列組。

元信息

<head>：定義關于文檔的信息。
<meta>：定義關于 HTML 文檔的元信息。
<base>：定義頁面中所有鏈接的默認地址或默認目標。

編程

<script>：定義客戶端腳本。

實踐心得

word文檔轉換成HTML可以更直觀地看出各個文字的位置，尤其是表格。不同的顏色也讓我們看出重要性和主次之分。但是與word相比，它的看法比較復雜，必須是非常熟悉的人才能運用。在網頁中，HTML語法能夠使網頁上的文字表格更加清晰，呈現出跟word文檔一樣的直觀效果。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,316評論 6贊 531
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,481評論 3贊 415
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,241評論 0贊 374
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,939評論 1贊 309
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,697評論 6贊 409
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,182評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,247評論 3贊 441
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,406評論 0贊 288
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,933評論 1贊 334
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,772評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,973評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,516評論 5贊 359
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,209評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,638評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,866評論 1贊 285
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,644評論 3贊 391
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,953評論 2贊 373

推薦閱讀更多精彩內容