基本办公文书转HTML

2018-03-11 本文已影响0人 Autistic_8d3b

（一）

二、课程目标
透过混合学习及体验式学习培养学生以下能力：
<ul>
<li>能够从用户体验框架，描述网页设计与制作主要概念，包括页面结构、网站结构、界面设计、图形设计及图像和视频等</li>
<li>能熟悉产业标准生态，活用HTML5及CSS3的产业技术标准</li>
<li>能描述响应式网页设计的功能、特征及技术实践常用标准作法</li>
<li>能运用设计与制作工具及区分工具使用情境</li>
<li>能认识相关实践社群及学科，习得最佳实践及技巧的更新途径</li>
</ul>
以上课程目标之详细作法按如下分章节详述：
用户体验
关于用户体验知识点，教学要求为学生能理解用户体验的科学基础，包括设计心理学。重难点在于用户体验的交叉学科背景，讲授及实践教学环节将以良莠不同的参考案例做分析比较。
页面结构（Page Structure）
关于页面结构，教学要求为从学生能操作页面结构语法—HTML5 and CSS3—的规范。重难点在于页面结构及语法的原理及实践，讲授及实践教学环节将以不同类型网站下的各种页面结构元素安排做参考案例比较，前者包括内容管理系统、问卷调查网站、等，后者包括导航模块、侧栏等。
网站结构（Site Structure）
关于网站结构知识点，教学要求为从学生能理解并区分网站的各组成分子。重难点在于结合网站结构整体规划及各别实际文檔的整合性操作，讲授及实践教学环节将以不同类型网站下的各种HTML及CSS档案安排为参考案例，反复操演比较各类网站之结构安排重点及工作流程。
界面设计（Interface Design）及图形设计（Graphic Design）
关于接口设计及图形设计知识点，教学要求为从学生能适当就界面及图形观点提出网页设计及用户体验的学理及业界规范。重难点在于结合设计及结构，讲授及实践教学环节将以同上知识点操作之方式，反复操演设计安排及互评互检查设计成果。
响应式网页设计
关于响应式网页设计知识点，教学要求为从学生理解并操作响应式网页科技及原理。重难点在于响应式网页要求如何能落实在页面结构、网站结构、界面设计及图形设计上，以增进用户体验，讲授及实践教学环节将以同上知识点操作之方式，反复操演响应式网页设计功能、特征及技术实践常用标准作法及互评互检查设计成果。

（二）

四、教学进度计划表
说明：教学活动除有额外说明，均为混合学习及体验式学习
<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>
<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>

"标签"的功能类别及描述

标签	功能类别	描述
<p>	基础	定义段落
<strong>	格式	定义语气更为强烈的强调文本
<ul>	列表	定义无序的列表
<li>	列表	定义列表的项目
<table>	表格	定义表格
<tbody>	表格	定义表格中的主体内容
<tr>	表格	定义表格中的行
<td>	表格	定义表格中的单元

其他WORD文书转换结果

<ul>
<li>She warned me not to say anything to upset</li>
<li><a href="http://dictionary.cambridge.org/dictionary/learner-english/michael">Mike</a> got very upset when I told him the <a href="http://dictionary.cambridge.org/dictionary/learner-english/news">news</a><a href="http://dictionary.cambridge.org/dictionary/learner-english/news">.</a></li>
</ul>
� Many young people are ignorant of <a href="http://www.ldoceonline.com/dictionary/recent">recent</a> <a href="http://www.ldoceonline.com/dictionary/history">history</a><a href="http://www.ldoceonline.com/dictionary/history">.</a>
<ul>
<li><a href="http://vocabulary.englishprofile.org/dictionary/search/uk/We">We</a> <a href="http://vocabulary.englishprofile.org/dictionary/search/uk/work">work</a> <a href="http://vocabulary.englishprofile.org/dictionary/search/uk/in">in</a> <a href="http://vocabulary.englishprofile.org/dictionary/search/uk/the">the</a> <a href="http://vocabulary.englishprofile.org/dictionary/search/uk/same">same</a> <a href="http://vocabulary.englishprofile.org/dictionary/search/uk/team">department</a> <a href="http://vocabulary.englishprofile.org/dictionary/search/uk/but">but</a> <a href="http://vocabulary.englishprofile.org/dictionary/search/uk/she">she</a> <a href="http://vocabulary.englishprofile.org/dictionary/search/uk/s">is</a> <a href="http://vocabulary.englishprofile.org/dictionary/search/uk/senior">senior</a> <a href="http://vocabulary.englishprofile.org/dictionary/search/uk/to">to</a> <a href="http://vocabulary.englishprofile.org/dictionary/search/uk/me">me</a><a href="http://vocabulary.englishprofile.org/dictionary/search/uk/me">.</a></li>
<li>I took French when I was a senior.</li>
</ul>
� <a href="http://www.ldoceonline.com/dictionary/wall">Wall</a> <a href="http://www.ldoceonline.com/dictionary/street">Street</a> is the financial <a href="http://www.ldoceonline.com/dictionary/center">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 href="http://www.ldoceonline.com/dictionary/priority">priority</a> to industrial <a href="http://www.ldoceonline.com/dictionary/development">development</a><a href="http://www.ldoceonline.com/dictionary/development">.</a>
<ul>
<li>The main function of the Red Cross is to raise money for charity.</li>
<li>The <a href="http://www.ldoceonline.com/dictionary/alarm">alarm</a> system was not functioning when the <a href="http://www.ldoceonline.com/dictionary/painting">paintings</a> were <a href="http://www.ldoceonline.com/dictionary/steal">stolen</a><a href="http://www.ldoceonline.com/dictionary/steal">.</a></li>
</ul>
� We were stuck in a traffic jam for two hours.�

结果比较

在WORD文书转换出HTML格式后，根据文书的内容异同，所得到代码中可以发现有相同的标签，也有不同的标签；
相同的：例如<ul>对应的是我们在使用WORD时常用的功能（“无序的列表”，“段落”以及“加粗”）
个别的：例如<tbody><table>对应的则是“表格中的主体内容”和“表格”

其他换出HTML格式的方法

1.打开一个WORD文档

0bb3f0a119f9adaf254dd3974c22a36.png

2.点击屏幕左上角的“文件”

11eb4cdbe3f31ce2e59afa014e7e629.png

3.点击“另存为”，选择保存的位置“桌面”

5ef2e63e494edb4b5e5ee3e8c801a80.png

4.将保存类型改选成“网页”

bcc6a7ff959789385ce6bbc79c2876e.png

5.可以发现桌面原先的WORD文档发生改变

f2ddf4fdce447dd38b2e83f31ca3144.png

6.再查看其属性，已经转换成HTML格式

e945fc8f17c1224e95a1dbda9296718.png

实践心得

在完成作业的过程中，通过对专业名词进行解释，我们可以加深我们对术语的印象。
刚开始接触响应式Web设计，通过课堂上和课后的实践，初步了解到响应式Web设计的相关信息。
知道了我们为什么需要响应式Web设计，为什么有的网站又不需要响应式Web设计（举例：腾讯视频，如此出名的网站并没有采用响应式网页设计，是因为它有自己的 APP，以手机平台的形式面向用户。）
从得出的HTML代码中，通过查看相应标签的功能类别和描述，初步了解到部分标签。
还知道了将WORD文书转换成HTML格式的方法。