教学大纲HTML代码
课程目标
透过混合学习及体验式学习培养学生以下能力：
(1) 能够从用户体验框架，描述网页设计与制作主要概念，包括页面结构、网站结构、界面设计、图形设计及图像和视频等
(2) 能熟悉产业标准生态，活用HTML5及CSS3的产业技术标准
(3) 能描述响应式网页设计的功能、特征及技术实践常用标准作法
(4) 能运用设计与制作工具及区分工具使用****情境
(5) 能认识相关实践社群及学科，习得最佳实践及技巧的更新途径
以上课程目标之详细作法按如下分章节详述：
用户体验
关于用户体验知识点，教学要求为学生能理解用户体验的科学基础，包括设计心理学。重难点在于用户体验的交叉学科背景，讲授及实践教学环节将以良莠不同的参考案例做分析比较。
页面结构（Page Structure）
关于页面结构，教学要求为从学生能操作页面结构语法—HTML5 and CSS3—的规范。重难点在于页面结构及语法的原理及实践，讲授及实践教学环节将以不同类型网站下的各种页面结构元素安排做参考案例比较，前者包括内容管理系统、问卷调查网站、等，后者包括导航模块、侧栏等。
网站结构（Site Structure）
关于网站结构知识点，教学要求为从学生能理解并区分网站的各组成分子。重难点在于结合网站结构整体规划及各别实际文檔的整合性操作，讲授及实践教学环节将以不同类型网站下的各种HTML及CSS档案安排为参考案例，反复操演比较各类网站之结构安排重点及工作流程。
界面设计（Interface Design）及图形设计（Graphic Design）
关于接口设计及图形设计知识点，教学要求为从学生能适当就界面及图形观点提出网页设计及用户体验的学理及业界规范。重难点在于结合设计及结构，讲授及实践教学环节将以同上知识点操作之方式，反复操演设计安排及互评互检查设计成果。
响应式网页设计
关于响应式网页设计知识点，教学要求为从学生理解并操作响应式网页科技及原理。重难点在于响应式网页要求如何能落实在页面结构、网站结构、界面设计及图形设计上，以增进用户体验，讲授及实践教学环节将以同上知识点操作之方式，反复操演响应式网页设计功能、特征及技术实践常用标准作法及互评互检查设计成果。
图片.png
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>以上课程目标之详细作法按如下分章节详述：</p>
<p><strong>用户体验</strong></p>
<p>关于用户体验知识点，教学要求为学生能理解用户体验的科学基础，包括设计心理学。重难点在于用户体验的交叉学科背景，讲授及实践教学环节将以良莠不同的参考案例做分析比较。</p>
<p><strong>页面结构（Page Structure）</strong></p>
<p>关于页面结构，教学要求为从学生能操作页面结构语法—HTML5 and CSS3—的规范。重难点在于页面结构及语法的原理及实践，讲授及实践教学环节将以不同类型网站下的各种页面结构元素安排做参考案例比较，前者包括内容管理系统、问卷调查网站、等，后者包括导航模块、侧栏等。</p>
<p><strong>网站结构（Site Structure）</strong></p>
<p>关于网站结构知识点，教学要求为从学生能理解并区分网站的各组成分子。重难点在于结合网站结构整体规划及各别实际文檔的整合性操作，讲授及实践教学环节将以不同类型网站下的各种HTML及CSS档案安排为参考案例，反复操演比较各类网站之结构安排重点及工作流程。</p>
<p><strong>界面设计（Interface Design）及图形设计（Graphic Design）</strong></p>
<p>关于接口设计及图形设计知识点，教学要求为从学生能适当就界面及图形观点提出网页设计及用户体验的学理及业界规范。重难点在于结合设计及结构，讲授及实践教学环节将以同上知识点操作之方式，反复操演设计安排及互评互检查设计成果。</p>
<p><strong>响应式网页设计</strong></p>
<p>关于响应式网页设计知识点，教学要求为从学生理解并操作响应式网页科技及原理。重难点在于响应式网页要求如何能落实在页面结构、网站结构、界面设计及图形设计上，以增进用户体验，讲授及实践教学环节将以同上知识点操作之方式，反复操演响应式网页设计功能、特征及技术实践常用标准作法及互评互检查设计成果。</p>
教学进度表
QQ截图20180313134604.png
HTML代码“标签”
| 标签 | |
|---|---|
| <p> | 创建一个段落 |
| <strong> | 加重文本（通常是斜体加黑体） |
| <ul> | 创建一个无序的列表，默认前面标有圆点，也可以自己设置为none或者其他形状，如空心圆、方块等 |
| <li> | 放在每个列表项之前，若在<ol></ol>；之间则每个列表项加上一个数字，若在<ul></ul>；之间则每个列表项加上一个圆点 |
| <tbody> | 文档体，文档的可见部分 |
| <tr> | 标记表示一行 |
| <td> | 标记表示一列 |
| <th> | 定义表头，一般可以不用 |
| <table> | 定义整个表格，即表格的内容要放在<Table>和</Table>标记中 |
不同转换方式对比
QQ截图20180313134010.png
使用word文档转换
QQ截图20180313174648.png
QQ截图20180313175042.png
结果比较
使用https://html-cleaner.com转换的方式更为直接更加方便而且有word格式和HTML格式的比较，同时还支持显示HTML语法，功能较全面，展示更丰富
而使用word文档直接转换的方式无法看到HTML语法只能看到简单的网页转换，这种方式展现的东西较少较简单
实践心得
这次作业让我更加了解响应式网页设计这门课程所需要的东西，更加了解HTML语言的使用，同时更加了解RWD的技术组成以及他给我们带来的好处。本次实践是一次让我们深入了解RWD的一次实践，也是一次很有意义的自我学习的一次实践
网友评论