一，课程大纲html
<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>
<p><strong>四、教学进度计划表</strong></p>
<p>说明：<strong>教学活动</strong>除有额外说明，均为混合学习及体验式学习</p>
<table width="583">
<tbody>
<tr>
<td width="59">
<p><strong>周次</strong></p>
</td>
<td width="270">
<p><strong>课程要点</strong></p>
</td>
<td width="95">
<p><strong>教学活动</strong></p>
</td>
<td width="161">
<p><strong>阅读资料</strong></p>
</td>
</tr>
<tr>
<td width="59">
<p>1</p>
</td>
<td width="270">
<p>网页设计与制作与工具介绍</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD1</p>
</td>
</tr>
<tr>
<td width="59">
<p>2</p>
</td>
<td width="270">
<p>从用户体验切入响应式设计实践</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD2, WSG0</p>
</td>
</tr>
<tr>
<td width="59">
<p>3</p>
</td>
<td width="270">
<p>HTML基本元素：码云Pages搭建</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>w3school, 码云Pages</p>
</td>
</tr>
<tr>
<td width="59">
<p>4</p>
</td>
<td width="270">
<p>页面结构（Page Structure）</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>WSG6</p>
</td>
</tr>
<tr>
<td width="59">
<p>5</p>
</td>
<td width="270">
<p>页面制作案例一 ☉<strong>期中在线考查</strong> <strong>A</strong></p>
</td>
<td width="95">
<p>教室外实践或专业分享</p>
</td>
<td width="161">
<p>WP2,WSG4,DMMT</p>
</td>
</tr>
<tr>
<td width="59">
<p>6</p>
</td>
<td width="270">
<p>图像和视频（Images&Video）</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>WSG11, 12</p>
</td>
</tr>
<tr>
<td width="59">
<p>7</p>
</td>
<td width="270">
<p>弹性布局与响应式图片</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD3</p>
</td>
</tr>
<tr>
<td width="59">
<p>8</p>
</td>
<td width="270">
<p>HTML5与响应式</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD4</p>
</td>
</tr>
<tr>
<td width="59">
<p>9</p>
</td>
<td width="270">
<p>CSS3新特性</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD5</p>
</td>
</tr>
<tr>
<td width="59">
<p>10</p>
</td>
<td width="270">
<p><strong>☉</strong><strong>期中考查</strong><strong> B</strong></p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p> </p>
</td>
</tr>
<tr>
<td width="59">
<p>11</p>
</td>
<td width="270">
<p>网站结构（Site Structure）</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>WSG5</p>
</td>
</tr>
<tr>
<td width="59">
<p>12</p>
</td>
<td width="270">
<p>CSS3高级技术</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD6</p>
</td>
</tr>
<tr>
<td width="59">
<p>13</p>
</td>
<td width="270">
<p>介面设计（Interface Design）</p>
</td>
<td width="95">
<p>教室外实践或专业分享</p>
</td>
<td width="161">
<p>WSG7</p>
</td>
</tr>
<tr>
<td width="59">
<p>14</p>
</td>
<td width="270">
<p>图形设计（Graphic Design）</p>
</td>
<td width="95">
<p>教室外实践或专业分享</p>
</td>
<td width="161">
<p>WSG8</p>
</td>
</tr>
<tr>
<td width="59">
<p>15</p>
</td>
<td width="270">
<p>SVG与响应式Web设计 ☉<strong>期中在线考查</strong><strong> C</strong></p>
</td>
<td width="95">
<p>教室外实践或专业分享</p>
</td>
<td width="161">
<p>RWD7</p>
</td>
</tr>
<tr>
<td width="59">
<p>16</p>
</td>
<td width="270">
<p>CSS3过渡、变形和动画</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>WSG9</p>
</td>
</tr>
<tr>
<td width="59">
<p>17</p>
</td>
<td width="270">
<p>☉期末应用项目开发成果展示考查</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p> </p>
</td>
</tr>
<tr>
<td width="59">
<p>18</p>
</td>
<td width="270">
<p>☉期末应用项目开发成果点评总结</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p> </p>
</td>
</tr>
<tr>
<td width="59">
<p>19</p>
</td>
<td width="270">
<p><strong> </strong></p>
</td>
<td width="95">
<p><strong> </strong></p>
</td>
<td width="161">
<p><strong> </strong></p>
</td>
</tr>
<tr>
<td width="59">
<p>20</p>
</td>
<td width="270">
<p><strong> </strong></p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p> </p>
</td>
</tr>
</tbody>
</table>
<p> </p>
二，出现的标签
1.<p>标签定义和用法
<p> 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
2.<strong>定义和用法
<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。
浏览器通常会以不同于 <em> 标签的方式来显示 <strong> 标签中的内容，通常是用加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个标签区分开来了。
如果常识告诉我们应该较少使用 <em> 标签的话，那么 <strong> 标签出现的次数应该更少。如果说用 <em> 标签修饰的文本好像是在大声呼喊，那么用 <strong> 标签修饰的文本就无异于尖叫了。沉默寡言的人说出的话总是一诺千金，与此相同，限制 <strong> 的使用可以令应该更加引人注意，而且更加有效。
举一个例子，经常访问 W3school 的用户可以注意到了，许多教程页面的第一句摘要都是以粗体显示的，而实际上，我们对这一句摘要使用了 <strong> 标签。使用这个标签的理由是，我们认为教程摘要不仅概括了其所在页面的内容，而且位于页面的最重要的位置，其内容自然是非常重要的且值得强调的。
3.<ul>定义和用法
<ul> 标签定义无序列表。
4.<li>定义和用法
<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
5.<td>定义和用法
<td> 标签定义 HTML 表格中的标准单元格。
HTML 表格有两类单元格：
表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）
td 元素中的文本一般显示为正常字体且左对齐。
6.<tbody>定义和用法
<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。
7.<table>定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
8.<tr>## 定义和用法
<tr> 标签定义 HTML 表格中的行。
三，新媒体关键词html
<p><strong>新媒体关键词</strong></p>
<p><strong>1.</strong><strong>众包：众包指的是一个公司或机构把过去由员工执行的工作任务，以自由自愿的形式外包给非特定的（而且通常是大型的）大众网络的做法。</strong></p>
<p><strong> </strong></p>
<p><strong>2.</strong><strong>外包：外包是指企业动态地配置自身和其他企业的功能和服务，并利用企业外部的资源为企业内部的生产和经营服务。</strong></p>
<p><strong> </strong></p>
<p><strong>3.</strong><strong>众筹：由发起人、跟投人、平台构成。具有低门槛、多样性、依靠大众力量、注重创意的特征，是指一种向群众募资，以支持发起的个人或组织的行为。一般而言是透过网络上的平台连结起赞助者与提案者。</strong></p>
<p><strong> </strong></p>
<p><strong>4.UGC:</strong> <strong>即用户将自己原创的内容通过互联网平台进行展示或者提供给其他用户。用户兼为消费者和内容生产者。</strong></p>
<p><strong> </strong></p>
<p><strong>5.</strong><strong>新媒体下的盈利模式：</strong></p>
<ol>
<li><strong>信息出售</strong></li>
<li><strong>IP</strong><strong>，社群经济，粉丝经济</strong></li>
<li><strong>电子商务</strong></li>
<li><strong>增值服务</strong></li>
<li><strong>知识经济</strong></li>
<li><strong>广告</strong></li>
</ol>
<p><strong> </strong></p>
<ol start="6">
<li><strong>避风港原则是指在发生著作权侵权案件时，当网络服务提供商只提供空间服务，并不制作网页内容时，如果网络服务提供商被告知侵权，则有删除的义务，否则就被视为侵权。</strong></li>
</ol>
<p><strong> </strong><strong>如果侵权内容既不在网络服务提供商的服务器上存储，又没有被告知哪些内容应该删除，则网络服务提供商不承担侵权责任。</strong></p>
<p><strong> </strong></p>
<ol start="7">
<li><strong>红旗原则是避风港原则的例外适用。“红旗”原则是指如果侵犯信息网络传播权的事实是显而易见的，就像红旗飘扬一样明显，网络服务提供商就不能装作看不见，或以不知道侵权的理由来推脱责任。</strong></li>
</ol>
<p><strong>如果在这样的情况下不移除链接的话，就算权利人没有发出过通知，也应该认定设链者知道第三方是侵权的。</strong></p>
<p><strong> </strong></p>
<p><strong>8.</strong><strong>智媒：</strong></p>
<p><strong>“智媒”也可以称为“智能化媒体”，是人工智能与媒体的结合与变革，其主要特征是：</strong></p>
<p><strong> </strong></p>
<p><strong>万物皆媒：过去的媒体是以人为主导的媒体，而未来，机器及各种智能物体都有媒体化可能。</strong></p>
<p><strong> </strong></p>
<p><strong>人机合一：智能化机器、智能物体将与人的智能融合，共同作用，构建新的媒体业务模式。</strong></p>
<p><strong> </strong></p>
<p><strong>自我进化：人机合一的媒介具有自我进化的能力，机器洞察人心的能力、人对机器的驾驭能力互为推进</strong></p>
<p><strong> </strong></p>
<p><strong>9.</strong><strong>网络媒介素养：</strong></p>
<p><strong>或称“网络素养”，它的“新”，不仅指接触、理解、参与、使用、批判和创造的对象是全新质态的媒介，而且指针对这些新媒介技术的掌控和运用的能力，对内容的生产与消费能力，对海量信息的理解与判断能力，对现实与虚拟空间的传播与应对能力，对人与人、人与社会的交往与参与能力等，这是在人与新媒体关系中体现出来的素养。</strong></p>
<p><strong> </strong></p>
<p><strong>10.</strong><strong>网民素养：</strong></p>
<p><strong>“网民素养”是指上网者在接收、发送、传播信息时综合呈现的能力与素质，包括价值观、态度或心境等的修习涵养。</strong></p>
<p><strong>生产，包括负责地发布信息和言论的素养，负责地进行信息再传播的素养。</strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong>11.UGC</strong><strong>新闻模式：</strong></p>
<p><strong>媒介组织挖掘或利用社会性媒体用户所生产的信息内容为自身服务，降低采编成本的新闻生产模式。</strong></p>
<p><strong> </strong></p>
<p><strong>12.</strong><strong>众包新闻</strong><strong>模式：</strong></p>
<p><strong> </strong></p>
<p><strong> </strong><strong>众包新闻</strong><strong>是指媒体通过自身网站和社交媒体平台将新闻生产的任务分配给公众，鼓励公众发挥自身智慧、知识和创造力帮助记者完成新闻的报道。</strong></p>
<p><strong> </strong></p>
<p><strong>13.</strong><strong>媒介融合：</strong></p>
<p><strong>狭义的概念是指将不同的媒介形态“融合”在一起，产生“质变”，形成一种新的媒介形态，如电子杂志、博客新闻、融合新闻等等；</strong></p>
<p><strong>广义的“媒介融合”则范围广阔，包括一切媒介及其有关要素的结合、汇聚甚至融合，不仅包括媒介形态的融合，还包括媒介功能、传播手段、所有权、组织结构等要素的融合。</strong></p>
<p><strong>14.</strong><strong>舆论：</strong></p>
<p><strong>舆论是公众关于现实社会以及社会中的各种现象、问题所表达的信念、态度、意见和情绪表现的总和，具有相对的一致性（有一定数量规模）、强烈程度和持续性，对社会发展及有关事态的进程产生影响，其中混杂着理智和非理智的成分。</strong></p>
<p><strong>15.</strong><strong>知识鸿沟：</strong></p>
<p><strong>社会经济条件好的人比差的人以更快的速度获取信息，因此两类人之间的知识沟扩大了，而不是缩小了；</strong></p>
<p><strong>一段时间内媒介大量宣传某话题，文程度高的人比低的人更快吸取该话题的知识；</strong></p>
<p><strong>在人人感兴趣的领域，知识沟特别容易出现；而在某些基于兴趣的特定领域，知识沟出现的可能就较小。</strong></p>
<p><strong> </strong></p>
<p><strong>16.</strong><strong>网络舆论分析:</strong></p>
<p><strong>是指整合互联网信息采集技术及信息智能处理技术，通过对互联网海量信息自动抓取、自动分类聚类、主题检测、专题聚焦，实现用户的网络舆情监测和新闻专题追踪等信息需求，形成简报、报告、图表等分析结果，为客户全面掌握群众思想动态，做出正确舆论引导，提供分析依据。</strong></p>
<p><strong> </strong></p>
<p><strong>17.</strong><strong>新闻客户端未来发展趋势：</strong></p>
<p><strong>1.</strong><strong>领先者高筑门槛</strong></p>
<p><strong>2.</strong><strong>用户体验将成主战场</strong></p>
<p><strong>3.</strong><strong>争夺自</strong><strong>媒体资源</strong></p>
<p><strong>4.</strong><strong>增加原创内容比例</strong></p>
<p><strong>5.</strong><strong>“新闻客户端+”将成新趋势</strong></p>
<p><strong>6.</strong><strong>盈利模式多样化</strong></p>
<p><strong> </strong></p>
<p><strong>18.</strong><strong>自媒体：</strong></p>
<p><strong> </strong><strong>自媒体(外文名：We Media)又称“公民媒体”或“个人媒体”，是指私人化、平民化、普泛化、自主化的传播者，以现代化、电子化的手段，向不特定的大多数或者特定的单个人传递规范性及非规范性信息的新媒体的总称。自媒体平台包括：博客、微博、微信、百度官方贴吧、论坛/BBS等网络社区。</strong></p>
<p><strong> </strong></p>
<p><strong>19.</strong><strong>马太效应：</strong></p>
<p><strong>马太效应（Matthew Effect），指强者愈强、弱者愈弱的现象，广泛应用于社会心理学、教育、金融以及科学领域。马太效应，是社会学家和经济学家们常用的术语，反映的社会现象是两极分化，富的更富，穷的更穷。</strong></p>
<p><strong> </strong></p>
<p><strong>20.</strong><strong>数字鸿沟：</strong></p>
<p><strong> </strong><strong>数字鸿沟又称为"信息鸿沟"，即“信息富有者和信息贫困者之间的鸿沟”。</strong></p>
<p><strong> </strong></p>
具体方法
image.png
打开你所需要的文本
image.png
将你要的文本存为htm格式
image.png
打开改文本并查看
image.png
四，实践对比及心得体会
课程大纲的文本内容更加丰富，因此它的HTML格式也比新媒体关键词要复杂。通过这次的作业，我学习到了很多HTML标签的具体作用以及RWD的三项基本科技和基本理念，对于响应式网页设计也有了更深入的认识。希望在接下来的网页设计课程中能够学习到更多有用的知识。
网友评论