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

（一）

二仲闽、課程目標(biāo)
透過混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)培養(yǎng)學(xué)生以下能力：
<ul>
<li>能夠從用戶體驗(yàn)框架贱鼻，描述網(wǎng)頁設(shè)計(jì)與制作主要概念，包括頁面結(jié)構(gòu)汉买、網(wǎng)站結(jié)構(gòu)衔峰、界面設(shè)計(jì)、圖形設(shè)計(jì)及圖像和視頻等</li>
<li>能熟悉產(chǎn)業(yè)標(biāo)準(zhǔn)生態(tài)蛙粘，活用HTML5及CSS3的產(chǎn)業(yè)技術(shù)標(biāo)準(zhǔn)</li>
<li>能描述響應(yīng)式網(wǎng)頁設(shè)計(jì)的功能垫卤、特征及技術(shù)實(shí)踐常用標(biāo)準(zhǔn)作法</li>
<li>能運(yùn)用設(shè)計(jì)與制作工具及區(qū)分工具使用情境</li>
<li>能認(rèn)識(shí)相關(guān)實(shí)踐社群及學(xué)科，習(xí)得最佳實(shí)踐及技巧的更新途徑</li>
</ul>
以上課程目標(biāo)之詳細(xì)作法按如下分章節(jié)詳述：
用戶體驗(yàn)
關(guān)于用戶體驗(yàn)知識(shí)點(diǎn)出牧，教學(xué)要求為學(xué)生能理解用戶體驗(yàn)的科學(xué)基礎(chǔ)穴肘，包括設(shè)計(jì)心理學(xué)。重難點(diǎn)在于用戶體驗(yàn)的交叉學(xué)科背景舔痕，講授及實(shí)踐教學(xué)環(huán)節(jié)將以良莠不同的參考案例做分析比較评抚。
頁面結(jié)構(gòu)（Page Structure）
關(guān)于頁面結(jié)構(gòu)，教學(xué)要求為從學(xué)生能操作頁面結(jié)構(gòu)語法—HTML5 and CSS3—的規(guī)范伯复。重難點(diǎn)在于頁面結(jié)構(gòu)及語法的原理及實(shí)踐慨代，講授及實(shí)踐教學(xué)環(huán)節(jié)將以不同類型網(wǎng)站下的各種頁面結(jié)構(gòu)元素安排做參考案例比較，前者包括內(nèi)容管理系統(tǒng)啸如、問卷調(diào)查網(wǎng)站侍匙、等，后者包括導(dǎo)航模塊叮雳、側(cè)欄等想暗。
網(wǎng)站結(jié)構(gòu)（Site Structure）
關(guān)于網(wǎng)站結(jié)構(gòu)知識(shí)點(diǎn)，教學(xué)要求為從學(xué)生能理解并區(qū)分網(wǎng)站的各組成分子帘不。重難點(diǎn)在于結(jié)合網(wǎng)站結(jié)構(gòu)整體規(guī)劃及各別實(shí)際文檔的整合性操作江滨，講授及實(shí)踐教學(xué)環(huán)節(jié)將以不同類型網(wǎng)站下的各種HTML及CSS檔案安排為參考案例，反復(fù)操演比較各類網(wǎng)站之結(jié)構(gòu)安排重點(diǎn)及工作流程厌均。
界面設(shè)計(jì)（Interface Design）及圖形設(shè)計(jì)（Graphic Design）
關(guān)于接口設(shè)計(jì)及圖形設(shè)計(jì)知識(shí)點(diǎn)唬滑，教學(xué)要求為從學(xué)生能適當(dāng)就界面及圖形觀點(diǎn)提出網(wǎng)頁設(shè)計(jì)及用戶體驗(yàn)的學(xué)理及業(yè)界規(guī)范。重難點(diǎn)在于結(jié)合設(shè)計(jì)及結(jié)構(gòu)，講授及實(shí)踐教學(xué)環(huán)節(jié)將以同上知識(shí)點(diǎn)操作之方式晶密，反復(fù)操演設(shè)計(jì)安排及互評(píng)互檢查設(shè)計(jì)成果擒悬。
響應(yīng)式網(wǎng)頁設(shè)計(jì)
關(guān)于響應(yīng)式網(wǎng)頁設(shè)計(jì)知識(shí)點(diǎn)，教學(xué)要求為從學(xué)生理解并操作響應(yīng)式網(wǎng)頁科技及原理稻艰。重難點(diǎn)在于響應(yīng)式網(wǎng)頁要求如何能落實(shí)在頁面結(jié)構(gòu)懂牧、網(wǎng)站結(jié)構(gòu)、界面設(shè)計(jì)及圖形設(shè)計(jì)上尊勿，以增進(jìn)用戶體驗(yàn)僧凤，講授及實(shí)踐教學(xué)環(huán)節(jié)將以同上知識(shí)點(diǎn)操作之方式，反復(fù)操演響應(yīng)式網(wǎng)頁設(shè)計(jì)功能元扔、特征及技術(shù)實(shí)踐常用標(biāo)準(zhǔn)作法及互評(píng)互檢查設(shè)計(jì)成果躯保。

（二）

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

HTML代碼"標(biāo)簽"

<ul>
<li>
<table>
<tbody>
<tr>
<td>

"標(biāo)簽"的功能類別及描述

標(biāo)簽	功能類別	描述
<p>	基礎(chǔ)	定義段落
<strong>	格式	定義語氣更為強(qiáng)烈的強(qiáng)調(diào)文本
<ul>	列表	定義無序的列表
<li>	列表	定義列表的項(xiàng)目
<table>	表格	定義表格
<tbody>	表格	定義表格中的主體內(nèi)容
<tr>	表格	定義表格中的行
<td>	表格	定義表格中的單元

其他WORD文書轉(zhuǎn)換結(jié)果

<ul>
<li>She warned me not to say anything to upset</li>
<li><a >Mike</a> got very upset when I told him the <a >news</a><a >.</a></li>
</ul>
? ??? Many young people are ignorant of <a >recent</a> <a >history</a><a >.</a>
<ul>
<li><a >We</a> <a >work</a> <a >in</a> <a >the</a> <a >same</a> <a >department</a> <a >but</a> <a >she</a> <a >is</a> <a >senior</a> <a >to</a> <a >me</a><a >.</a></li>
<li>I took French when I was a senior.</li>
</ul>
? ??? <a >Wall</a> <a >Street</a> is the financial <a >center</a> of the US.
? ??? How can I accumulate enough cash to get out of debt?
? ??? My ancestors originally came from Ireland.?
? ??? I like romantic movies, nothing too intellectual.
? ??? Smoking affects your health = Smoking has an effect on your health.
? ??? The government is giving high <a >priority</a> to industrial <a >development</a><a >.</a>
<ul>
<li>The main function of the Red Cross is to raise money for charity.</li>
<li>The <a >alarm</a> system was not functioning when the <a >paintings</a> were <a >stolen</a><a >.</a></li>
</ul>
? ??? We were stuck in a traffic jam for two hours.?

結(jié)果比較

在WORD文書轉(zhuǎn)換出HTML格式后，根據(jù)文書的內(nèi)容異同擅羞，所得到代碼中可以發(fā)現(xiàn)有相同的標(biāo)簽尸变，也有不同的標(biāo)簽；
相同的：例如<ul>對(duì)應(yīng)的是我們?cè)谑褂肳ORD時(shí)常用的功能（“無序的列表”减俏，“段落”以及“加粗”）
個(gè)別的：例如<tbody><table>對(duì)應(yīng)的則是“表格中的主體內(nèi)容”和“表格”

其他換出HTML格式的方法

1.打開一個(gè)WORD文檔

0bb3f0a119f9adaf254dd3974c22a36.png

2.點(diǎn)擊屏幕左上角的“文件”

11eb4cdbe3f31ce2e59afa014e7e629.png

3.點(diǎn)擊“另存為”召烂，選擇保存的位置“桌面”

5ef2e63e494edb4b5e5ee3e8c801a80.png

4.將保存類型改選成“網(wǎng)頁”

bcc6a7ff959789385ce6bbc79c2876e.png

5.可以發(fā)現(xiàn)桌面原先的WORD文檔發(fā)生改變

f2ddf4fdce447dd38b2e83f31ca3144.png

6.再查看其屬性，已經(jīng)轉(zhuǎn)換成HTML格式

e945fc8f17c1224e95a1dbda9296718.png

實(shí)踐心得

在完成作業(yè)的過程中娃承，通過對(duì)專業(yè)名詞進(jìn)行解釋奏夫，我們可以加深我們對(duì)術(shù)語的印象。
剛開始接觸響應(yīng)式Web設(shè)計(jì)草慧，通過課堂上和課后的實(shí)踐桶蛔，初步了解到響應(yīng)式Web設(shè)計(jì)的相關(guān)信息。
知道了我們?yōu)槭裁葱枰憫?yīng)式Web設(shè)計(jì)漫谷，為什么有的網(wǎng)站又不需要響應(yīng)式Web設(shè)計(jì)（舉例：騰訊視頻仔雷，如此出名的網(wǎng)站并沒有采用響應(yīng)式網(wǎng)頁設(shè)計(jì)，是因?yàn)樗凶约旱?APP舔示，以手機(jī)平臺(tái)的形式面向用戶碟婆。）
從得出的HTML代碼中，通過查看相應(yīng)標(biāo)簽的功能類別和描述惕稻，初步了解到部分標(biāo)簽竖共。
還知道了將WORD文書轉(zhuǎn)換成HTML格式的方法。

最后編輯于：2018.03.12 21:23:47

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末俺祠，一起剝皮案震驚了整個(gè)濱河市公给，隨后出現(xiàn)的幾起案子借帘，更是在濱河造成了極大的恐慌，老刑警劉巖淌铐，帶你破解...
沈念sama閱讀 216,470評(píng)論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件肺然，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡腿准，警方通過查閱死者的電腦和手機(jī)际起，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,393評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來吐葱，“玉大人街望，你說我怎么就攤上這事〉芘埽” “怎么了灾前？”我有些...
開封第一講書人閱讀 162,577評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)窖认。經(jīng)常有香客問我豫柬，道長(zhǎng)告希，這世上最難降的妖魔是什么扑浸？我笑而不...
開封第一講書人閱讀 58,176評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮燕偶，結(jié)果婚禮上喝噪，老公的妹妹穿的比我還像新娘。我一直安慰自己指么，他們只是感情好酝惧，可當(dāng)我...
茶點(diǎn)故事閱讀 67,189評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著伯诬，像睡著了一般晚唇。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上盗似，一...
開封第一講書人閱讀 51,155評(píng)論 1贊 299
城市分裂傳說
那天哩陕，我揣著相機(jī)與錄音，去河邊找鬼赫舒。笑死悍及，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的接癌。我是一名探鬼主播心赶，決...
沈念sama閱讀 40,041評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼缺猛！你這毒婦竟也來了缨叫？” 一聲冷哼從身側(cè)響起椭符，我...
開封第一講書人閱讀 38,903評(píng)論 0贊 274
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎耻姥，沒想到半個(gè)月后艰山，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,319評(píng)論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡咏闪，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,539評(píng)論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年曙搬，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鸽嫂。...
茶點(diǎn)故事閱讀 39,703評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡纵装，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出据某，到底是詐尸還是另有隱情橡娄，我是刑警寧澤，帶...
沈念sama閱讀 35,417評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布癣籽，位于F島的核電站挽唉，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏筷狼。R本人自食惡果不足惜瓶籽，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,013評(píng)論 3贊 325
男人毒藥：我在死后第九天來索命
文/蒙蒙一赡鲜、第九天我趴在偏房一處隱蔽的房頂上張望告抄。院中可真熱鬧，春花似錦畅哑、人聲如沸俏险。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,664評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽竖独。三九已至裤唠，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間莹痢，已是汗流浹背种蘸。一陣腳步聲響...
開封第一講書人閱讀 32,818評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留格二，地道東北人劈彪。一個(gè)月前我還...
沈念sama閱讀 47,711評(píng)論 2贊 368
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像顶猜，于是被迫代替她去往敵國和親沧奴。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,601評(píng)論 2贊 353