课程目标
<p><strong>课程目标</strong></p>
<p>透过混合学习及体验式学习培养学生以下能力：</p>
<ul>
<li>能够从<strong>用户体验</strong>框架，描述网页设计与制作主要概念，包括页面结构、网站结构、界面设计、图形设计及图像和视频等</li>
<li>能熟悉产业标准生态，活用<strong>HTML5</strong>及<strong>CSS3</strong>的产业技术标准</li>
<li>能描述<strong>响应式网页设计</strong>的功能、特征及技术实践常用标准作法</li>
<li>能运用设计与制作<strong>工具</strong>及区分工具<strong>使用</strong><strong>情境</strong></li>
<li>能认识相关<strong>实践社群</strong>及学科，习得最佳实践及技巧的更新途径</li>
</ul>
教学进度计划表
<h3 class="sectionname">教学进度计划表</h3>
<div class="section_availability"> </div>
<div class="summary">
<div class="no-overflow">
<p data-source-line="46"> </p>
<p data-source-line="1">周次 课程要点 阅读资料<br />1 网页设计与制作与工具介绍 RWD1 <br />2 从用户体验切入响应式设计实践 RWD2, WSG0 <br />3 HTML基本元素：码云Pages搭建 w3school, 码云Pages<br />4 页面结构（Page Structure） WSG6<br />5 页面制作案例一 ☉期中在线考查 A WP2,WSG4,DMMT <br />6 图像和视频（Images&Video） WSG11, 12<br />7 弹性布局与响应式图片 RWD3 <br />8 HTML5与响应式 RWD4<br />9 CSS3新特性 RWD5<br />10 ☉期中考查 B<br />11 网站结构（Site Structure） WSG5 <br />12 CSS3高级技术 RWD6<br />13 介面设计（Interface Design） WSG7<br />14 图形设计（Graphic Design） WSG8<br />15 SVG与响应式Web设计 ☉期中在线考查 C RWD7 <br />16 CSS3过渡、变形和动画 WSG9<br />17 ☉期末应用项目开发成果展示考查<br />18 ☉期末应用项目开发成果点评总结</p>
</div>
</div>
标签
<p>：定义段落。
<strong>：定义语气更为强烈的强调文本。
<ul>：定义无序列表。
<li>：定义列表的项目。
<h3>：<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
<div>：可定义文档中的分区或节
<br >：可插入一个简单的换行符。
页面结构（Page Structure）
关于页面结构，教学要求为从学生能操作页面结构语法—HTML5 and CSS3—的规范。重难点在于页面结构及语法的原理及实践，讲授及实践教学环节将以不同类型网站下的各种页面结构元素安排做参考案例比较，前者包括内容管理系统、问卷调查网站、等，后者包括导航模块、侧栏等。
网站结构（Site Structure）
关于网站结构知识点，教学要求为从学生能理解并区分网站的各组成分子。重难点在于结合网站结构整体规划及各别实际文檔的整合性操作，讲授及实践教学环节将以不同类型网站下的各种HTML及CSS档案安排为参考案例，反复操演比较各类网站之结构安排重点及工作流程。
以上文字的HTML格式：
<p><strong>页面结构（Page Structure）</strong></p>
<p>关于页面结构，教学要求为从学生能操作页面结构语法—HTML5 and CSS3—的规范。重难点在于页面结构及语法的原理及实践，讲授及实践教学环节将以不同类型网站下的各种页面结构元素安排做参考案例比较，前者包括内容管理系统、问卷调查网站、等，后者包括导航模块、侧栏等。</p>
<p><strong>网站结构（Site Structure）</strong></p>
<p>关于网站结构知识点，教学要求为从学生能理解并区分网站的各组成分子。重难点在于结合网站结构整体规划及各别实际文檔的整合性操作，讲授及实践教学环节将以不同类型网站下的各种HTML及CSS档案安排为参考案例，反复操演比较各类网站之结构安排重点及工作流程。</p>
心得：
文章分段时 换作HTML格式 每段开头都是<p>，每段的结尾则是</p>
该类标签相当于是帮整个页面布局规划好，打个比方是，你有一间自己的房间，标签就像你把自己的房间如何规划。在布局中熟练的掌握标签的特性是非常重要的，比如行块标签，什么是行标签，什么是块标签，如果把行块标签弄混了，那么想要弄出一个特别漂亮的界面感觉不是很容易，所以呢，一定要知道，行块标签有哪些，以及行块标签的特性。
