代碼轉(zhuǎn)換
二:課程目標(biāo) 5點(diǎn) (含標(biāo)題)
<p><strong>二、課程目標(biāo)</strong></p>
<p>透過混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)培養(yǎng)學(xué)生以下能力:</p>
<ul>
<li>能夠從<strong><strong>用戶體驗(yàn)</strong></strong>框架,描述網(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),活用<strong><strong>HTML5</strong></strong>及<strong><strong>CSS3</strong></strong>的產(chǎn)業(yè)技術(shù)標(biāo)準(zhǔn)</li>
<li>能描述<strong><strong>響應(yīng)式網(wǎng)頁設(shè)計(jì)</strong></strong>的功能、特征及技術(shù)實(shí)踐常用標(biāo)準(zhǔn)作法</li>
<li>能運(yùn)用設(shè)計(jì)與制作<strong><strong>工具</strong></strong>及區(qū)分工具<strong><strong>使用</strong></strong><strong><strong>情境</strong></strong></li>
<li>能認(rèn)識相關(guān)<strong><strong>實(shí)踐社群</strong></strong>及學(xué)科,習(xí)得最佳實(shí)踐及技巧的更新途徑</li>
</ul>
<p>以上課程目標(biāo)之詳細(xì)作法按如下分章節(jié)詳述:</p>
<p><strong><strong>用戶體驗(yàn)</strong></strong></p>
<p>關(guān)于用戶體驗(yàn)知識點(diǎn),教學(xué)要求為學(xué)生能理解用戶體驗(yàn)的科學(xué)基礎(chǔ),包括設(shè)計(jì)心理學(xué)。重難點(diǎn)在于用戶體驗(yàn)的交叉學(xué)科背景,講授及實(shí)踐教學(xué)環(huán)節(jié)將以良莠不同的參考案例做分析比較。</p>
<p><strong><strong>頁面結(jié)構(gòu)(</strong></strong><strong><strong>Page Structure</strong></strong><strong><strong>)</strong></strong></p>
<p>關(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è)欄等。</p>
<p><strong><strong>網(wǎng)站結(jié)構(gòu)(</strong></strong><strong><strong>Site Structure</strong></strong><strong><strong>)</strong></strong></p>
<p>關(guān)于網(wǎng)站結(jié)構(gòu)知識點(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)及工作流程。</p>
<p><strong><strong>界面設(shè)計(jì)(</strong></strong><strong><strong>Interface Design</strong></strong><strong><strong>)及圖形設(shè)計(jì)(</strong></strong><strong><strong>Graphic Design</strong></strong><strong><strong>)</strong></strong></p>
<p>關(guān)于接口設(shè)計(jì)及圖形設(shè)計(jì)知識點(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é)將以同上知識點(diǎn)操作之方式,反復(fù)操演設(shè)計(jì)安排及互評互檢查設(shè)計(jì)成果。</p>
<p><strong><strong>響應(yīng)式網(wǎng)頁設(shè)計(jì)</strong></strong></p>
<p>關(guān)于響應(yīng)式網(wǎng)頁設(shè)計(jì)知識點(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é)將以同上知識點(diǎn)操作之方式,反復(fù)操演響應(yīng)式網(wǎng)頁設(shè)計(jì)功能、特征及技術(shù)實(shí)踐常用標(biāo)準(zhǔn)作法及互評互檢查設(shè)計(jì)成果。</p>四:教學(xué)進(jìn)度計(jì)劃表
<p><strong>四、教學(xué)進(jìn)度計(jì)劃表</strong></p>
<p>說明:<strong><strong>教學(xué)活動(dòng)</strong></strong>除有額外說明,均為混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)</p>
<table>
<tbody>
<tr>
<td width="58">
<p><strong><strong>周次</strong></strong></p>
</td>
<td width="269">
<p><strong><strong>課程要點(diǎn)</strong></strong></p>
</td>
<td width="94">
<p><strong><strong>教學(xué)活動(dòng)</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è)計(jì)與制作與工具介紹</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àn)切入響應(yīng)式設(shè)計(jì)實(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>教室外實(shí)踐或?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è)計(jì)(Interface Design)</p>
</td>
<td width="94">
<p>教室外實(shí)踐或?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è)計(jì)(Graphic Design)</p>
</td>
<td width="94">
<p>教室外實(shí)踐或?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è)計(jì)<br />☉<strong><strong>期中在線考查 </strong></strong><strong><strong>C</strong></strong></p>
</td>
<td width="94">
<p>教室外實(shí)踐或?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過渡、變形和動(dòng)畫</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)用項(xià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)用項(xiàng)目開發(fā)成果點(diǎn)評總結(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>
功能描述
| 標(biāo)簽 | 功能 |
|---|---|
| <p> | 定義段落。 |
| <li> | 定義列表的項(xiàng)目。 |
| <td> | 標(biāo)簽定義 HTML 表格中的標(biāo)準(zhǔn)單元格。 |
| <tr> | 標(biāo)簽定義 HTML 表格中的行。 |
| <table> | 標(biāo)簽定義 HTML 表格。 |
| <li> | 標(biāo)簽定義列表項(xiàng)目,標(biāo)簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。 |
其他WORD文書轉(zhuǎn)換或換出HTML格式的方法和結(jié)果比較
- 可以通過word選擇“另存為”,然后文件類型選擇網(wǎng)頁便可直接轉(zhuǎn)換成HTML格式,而且是一個(gè)可以直接打開的網(wǎng)頁,但是之前的格式會缺失掉,最重要的是,這個(gè)方式無法轉(zhuǎn)換成HTML的代碼,而是直接展示出結(jié)果,不利于代碼的檢查和學(xué)習(xí)。
- 通過html-clearner.com 轉(zhuǎn)換只需將文檔直接復(fù)制粘貼即可。此方法不會直接顯示效果,但是卻會展示代碼,對于我們的學(xué)習(xí)有很大的幫助,而且支持每一行的對比,讓我們知道哪一句對應(yīng)什么,是非常實(shí)用的。
實(shí)踐心得
HTML具有簡易性、可擴(kuò)展性、平臺無關(guān)性、通用性這四大特性。
正式因?yàn)槠渚哂羞@四大特性,在此次的實(shí)踐當(dāng)中才為初次接觸的我們帶來如此驚艷的效果。HTML語言的種種特性都極大的減少了網(wǎng)頁設(shè)計(jì)與制作者的工作量,極大的提高了制作的效率和質(zhì)量,但是更讓人激動(dòng)的是,HTML的更新速度非常快,在短短的十幾年里已經(jīng)發(fā)展到了HTML5,這也預(yù)示著該語言的未來是可觀的。同時(shí),越來越多的公司不斷的加入到其中,使用著HTML語言,享受著HTML為他們帶來的便捷和高效。
當(dāng)然,HTML也存在一定的缺點(diǎn)。編譯HTML需要特定的編譯器,而且當(dāng)我們想要將word文檔轉(zhuǎn)換成HTML語言時(shí),是一個(gè)費(fèi)時(shí)費(fèi)力的過程,這個(gè)過程對新手是不怎么友好的。還有就是,盡管我們有HTML 參考手冊可以查找關(guān)于HTML的眾多知識,可是熟悉這種語言想必也是需要付出不少時(shí)間的,新手上路還是難免要花很多的時(shí)間去熟悉才可以運(yùn)用并且理解。
總的來說,HTML是一門值得推廣使用的語言,這將提高我們許多行業(yè)的發(fā)展,尤其是廣告業(yè)的發(fā)展,對于網(wǎng)頁編輯的高效和便捷,使廣告商可以更為快捷的達(dá)到宣傳的目的,也因此減少了工作量,對于企業(yè)自身的網(wǎng)站建設(shè)也省去了不少的麻煩,畢竟最新的HTML5中關(guān)于響應(yīng)式網(wǎng)頁設(shè)計(jì),為企業(yè)開發(fā)網(wǎng)頁省去了不少麻煩。
那么,我想說,HTML是一個(gè)可以活在未來的產(chǎn)物。