基本办公文书转HTML工具

HTML cleaner转换

二、课程目标
透过混合学习及体验式学习培养学生以下能力：
<ul>
<li>能够从用户体验框架，描述网页设计与制作主要概念，包括页面结构、网站结构、界面设计、图形设计及图像和视频等</li>
<li>能熟悉产业标准生态，活用HTML5及CSS3的产业技术标准</li>
<li>能描述响应式网页设计的功能、特征及技术实践常用标准作法</li>
<li>能运用设计与制作工具及区分工具使用情境</li>
<li>能认识相关实践社群及学科，习得最佳实践及技巧的更新途径</li>
</ul>

四、教学进度计划表
说明：教学活动除有额外说明，均为混合学习及体验式学习
<table width="583">
<tbody>
<tr>
<td width="59">
周次
</td>
<td width="270">
课程要点
</td>
<td width="95">
教学活动
</td>
<td width="161">
阅读资料
</td>
</tr>
<tr>
<td width="59">
1
</td>
<td width="270">
网页设计与制作与工具介绍
</td>
<td width="95">
 
</td>
<td width="161">
RWD1
</td>
</tr>
<tr>
<td width="59">
2
</td>
<td width="270">
从用户体验切入响应式设计实践
</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">
页面结构（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">
教室外实践或专业分享
</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">
弹性布局与响应式图片
</td>
<td width="95">
 
</td>
<td width="161">
RWD3
</td>
</tr>
<tr>
<td width="59">
8
</td>
<td width="270">
HTML5与响应式
</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">
网站结构（Site Structure）
</td>
<td width="95">
 
</td>
<td width="161">
WSG5
</td>
</tr>
<tr>
<td width="59">
12
</td>
<td width="270">
CSS3高级技术
</td>
<td width="95">
 
</td>
<td width="161">
RWD6
</td>
</tr>
<tr>
<td width="59">
13
</td>
<td width="270">
介面设计（Interface Design）
</td>
<td width="95">
教室外实践或专业分享
</td>
<td width="161">
WSG7
</td>
</tr>
<tr>
<td width="59">
14
</td>
<td width="270">
图形设计（Graphic Design）
</td>
<td width="95">
教室外实践或专业分享
</td>
<td width="161">
WSG8
</td>
</tr>
<tr>
<td width="59">
15
</td>
<td width="270">
SVG与响应式Web设计 ☉期中在线考查 C
</td>
<td width="95">
教室外实践或专业分享
</td>
<td width="161">
RWD7
</td>
</tr>
<tr>
<td width="59">
16
</td>
<td width="270">
CSS3过渡、变形和动画
</td>
<td width="95">
 
</td>
<td width="161">
WSG9
</td>
</tr>
<tr>
<td width="59">
17
</td>
<td width="270">
☉期末应用项目开发成果展示考查
</td>
<td width="95">
 
</td>
<td width="161">
 
</td>
</tr>
<tr>
<td width="59">
18
</td>
<td width="270">
☉期末应用项目开发成果点评总结
</td>
<td width="95">
 
</td>
<td width="161">
 
</td>
</tr>
</tbody>
</table>

上述文件中的标签功能分类及描述：

标签定义段落。
定义语气更为强烈的强调文本。
<ul> 定义无序列表。
<li>定义列表的项目。
<table>定义表格。
<tbody>定义表格中的主体内容。
<tr>定义表格中的行。
<td>定义表格中的单元。

三、课程资料：
（一）教科书
Frain, B. (2017). <a href="http://www.ituring.com.cn/book/1817">响应式Web设计：HTML5和CSS3实战（第2版）</a>. (奇舞团译) 人民邮电出版社。说明：简称RWD，本课程内容为全書1,2,3,4,5,6,7,8,9章
Lynch, P. J., & Horton, S. (2016). <a href="http://webstyleguide.com/wsg4/strategy.html">Web Style Guide : Foundations of User Experience Design</a> (4th ed). New Haven: Yale University Press. 说明：简称WSG，本课程内容为5,6,7,8,11,12章 WSG4 1,2,3,4, 网页版：http://webstyleguide.com/index.html

上面是教学大纲：三、课程资料中的（一）教科书的HTML转换文本
比较两者我们可以明显看出三种文本的部分区别：其中的标签多为相同，而又有着各自新的标签，这说明大多数的标签都是通用的！

实践心得：

通过这一课的系统学习，我初步的了解网页设计的基本原理，同时也学会了简单的实际操作。关于响应式网页设计知识点，身为学生的我积极的去了解并操作响应式网页科技及原理。