hzuapps/html5-2020

高级网页设计课程库

html5-2020's Issues

实验5：

实验6：

实验3：CSS3样式设计

实验目标

1. 掌握CSS的用法及基础语法；
2. 掌握WeUI等第三方CSS库的使用。

实验内容

1. 练习并掌握CSS中ID、类（class）及规则的基础用法；
2. 基于WeUI编写个人简历，方便在移动端和微信端浏览。

实验步骤

自行根据实际实验步骤撰写。

注：上面这一句话原封不动抄过来的当次实验不及格。

实验要求

1. 编写的网页（如：resume-weui.html）保存在自己的目录下；
2. 使用WeUI的CSS库设计支持手机浏览的移动版H5页面；
3. 根据自己的实验过程与结果编写实验报告（重点检查）；
4. 按照『教学助理』小程序要求将实验报告发送到老师的邮箱。

注意：做新实验时别忘记了前面实验学到的东西。

实验参考

1. https://weui.io
2. https://github.com/Tencent/weui
3. 实验一别忘记了 #1
4. 实验二别忘记了 #2

实验7：

实验1：Web服务器与调试工具

实验内容

1. 在本机上安装 Apache服务器（或同类工具），启动服务器，浏览器上访问：
   http://localhost
2. 在本机上打开Chrome浏览器（未安装要安装），打开Web开发工具，查看网页代码；

选项菜单 - 更多工具 - 开发者工具 （或者 F12）

4. 练习并使用GitHub提交实验代码到实验库，具体步骤参见：
   https://github.com/hzuapps/html5-2020/blob/master/GitHub-Lab.md

实验步骤

自行在实验在报告中撰写。

实验结果与要求

1. 所有操作结果，截图之后粘贴到实验报告中；
2. 发邮件到作业邮箱，提交实验报告（微信通知）。

提示

1. Apache服务器的下载与安装 https://blog.csdn.net/zhangnana200/article/details/77116030
2. 独立安装Apahce服务器 https://blog.csdn.net/lyb123453/article/details/72892305

已完成作业参考

实验8：

实验2：HTML5语义标签

实验目标

1. 练习并掌握HTML5网页开发；
2. 掌握网页与网站服务器的部署方法。

实验内容

制作一个HTML5个人简历网页，具体要求如下：

1. 使用HTML5语法
2. 使用<table>设计布局
3. 使用<img>添加个人照片
4. 使用<form>制作一个留言表单
5. 使用<a>指向自己的GitHub主页  

注意：可以隐去自己的真实姓名与联系信息。

实验步骤

根据自己的实验步骤撰写。

实验要求

1. 在 students 中创建学号目录；
2. 将编写的网页（如：resume.html）保存在自己的目录下；
3. 将代码提交到实验库（add, commit, push），然后发送Pull Request；
4. 根据自己的实验过程与结果编写实验报告（重点检查）；
5. 按照『教学助理』小程序要求将实验报告发送到老师的邮箱。

最后一步

Pull request发送之后，一定要自己查看自己修改过的文件，看看有没有改错文件（Files changed）。

参考作业

实验4：JavaScript编程

实验目标

1. 练习JavaScript基础语法；
2. 掌握JavaScript操作DOM的方法；
3. 掌握JavaScript事件处理及回调函数用法；
4. 了解jQuery前端JavaScript库。

实验内容

1. 练习：11.4.1 改变网页背景颜色（P309页）；
2. 实验：使用JavaScript检测简历网页留言表单内容。

• 点击留言按钮时，如果留言内容为空，则弹出提示窗；不为空时正常发送留言。
• 可以用JavaScript实现，也可以用 jQuery 库实现。

实验步骤

自行根据实际实验步骤撰写。

注：上面这一句话原封不动抄过来的当次实验不及格。

实验要求

1. 将代码保存在自己的学号目录下；
2. 将代码提交到实验库（add, commit, push），然后发送Pull Request；
3. 根据自己的实验过程与结果编写实验报告（重点检查）；
4. 按照『教学助理』小程序要求将实验报告发送到老师的邮箱。

实验参考

1. https://www.cnblogs.com/XYQ-208910/p/5826942.html