課程目標(biāo)
<p><strong>課程目標(biāo)</strong></p>
<p>透過混合學(xué)習(xí)及體驗(yàn)式學(xué)習(xí)培養(yǎng)學(xué)生以下能力：</p>
<ul>
<li>能夠從<strong>用戶體驗(yàn)</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ù)實(shí)踐常用標(biāo)準(zhǔn)作法</li>
<li>能運(yùn)用設(shè)計與制作<strong>工具</strong>及區(qū)分工具<strong>使用</strong><strong>情境</strong></li>
<li>能認(rèn)識相關(guān)<strong>實(shí)踐社群</strong>及學(xué)科，習(xí)得最佳實(shí)踐及技巧的更新途徑</li>
</ul>
教學(xué)進(jìn)度計劃表
<h3 class="sectionname">教學(xué)進(jìn)度計劃表</h3>
<div class="section_availability">?</div>
<div class="summary">
<div class="no-overflow">
<p data-source-line="46">?</p>
<p data-source-line="1">周次? ? ? ? ? ? ? ? ? ? ? ? ?課程要點(diǎn)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?閱讀資料<br />1? ? ? ? ?網(wǎng)頁設(shè)計與制作與工具介紹? ? ? ? ? ? ? ? ? ? ? ? RWD1?<br />2? ? ? ? ?從用戶體驗(yàn)切入響應(yīng)式設(shè)計實(shí)踐? ? ? ? ? ? ? ? ?RWD2, WSG0?<br />3? ? ? ? ?HTML基本元素：碼云Pages搭建? ? ? ? ? ? ? ?w3school, 碼云Pages<br />4? ? ? ? ?頁面結(jié)構(gòu)（Page Structure）? ? ? ? ? ? ? ? ? ? ? WSG6<br />5? ? ? ? ?頁面制作案例一 ☉期中在線考查 A? ? ? ? ? ? ? WP2,WSG4,DMMT?<br />6? ? ? ? ?圖像和視頻（Images&Video）? ? ? ? ? ? ? ? ? ?WSG11, 12<br />7? ? ? ? ?彈性布局與響應(yīng)式圖片? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? RWD3?<br />8? ? ? ? ?HTML5與響應(yīng)式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?RWD4<br />9? ? ? ? ?CSS3新特性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?RWD5<br />10? ? ? ?☉期中考查 B<br />11? ? ? ?網(wǎng)站結(jié)構(gòu)（Site Structure）? ? ? ? ? ? ? ? ? ? ? ? WSG5?<br />12? ? ? ?CSS3高級技術(shù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?RWD6<br />13? ? ? ?介面設(shè)計（Interface Design）? ? ? ? ? ? ? ? ? ?WSG7<br />14? ? ? ?圖形設(shè)計（Graphic Design）? ? ? ? ? ? ? ? ? ? WSG8<br />15? ? ? SVG與響應(yīng)式Web設(shè)計 ☉期中在線考查 C? RWD7?<br />16? ? ? CSS3過渡、變形和動畫? ? ? ? ? ? ? ? ? ? ? ? ? ? ?WSG9<br />17? ? ? ☉期末應(yīng)用項(xiàng)目開發(fā)成果展示考查<br />18? ? ? ☉期末應(yīng)用項(xiàng)目開發(fā)成果點(diǎn)評總結(jié)</p>
</div>
</div>
標(biāo)簽
<p>：定義段落。
<strong>：定義語氣更為強(qiáng)烈的強(qiáng)調(diào)文本。
<ul>：定義無序列表。
<li>：定義列表的項(xiàng)目。
<h3>：<h1> - <h6> 標(biāo)簽可定義標(biāo)題。<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。
<div>：可定義文檔中的分區(qū)或節(jié)
<br >：可插入一個簡單的換行符。
頁面結(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)知識點(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)及工作流程。
以上文字的HTML格式：
<p><strong>頁面結(jié)構(gòu)（Page Structure）</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>網(wǎng)站結(jié)構(gòu)（Site Structure）</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>
心得：
文章分段時 換作HTML格式 每段開頭都是<p>，每段的結(jié)尾則是</p>
該類標(biāo)簽相當(dāng)于是幫整個頁面布局規(guī)劃好，打個比方是，你有一間自己的房間，標(biāo)簽就像你把自己的房間如何規(guī)劃。在布局中熟練的掌握標(biāo)簽的特性是非常重要的，比如行塊標(biāo)簽，什么是行標(biāo)簽，什么是塊標(biāo)簽，如果把行塊標(biāo)簽弄混了，那么想要弄出一個特別漂亮的界面感覺不是很容易，所以呢，一定要知道，行塊標(biāo)簽有哪些，以及行塊標(biāo)簽的特性。
