网页制作实战项目一：个人站点制作

江山如画 • 2018年4月7日下午8:24 • 网页设计 • 阅读 19353

在开始学习之前，请加入网页设计交流群：208047327 ，并注册本站用户，在项目制作过程中有任何问题，可以在群内讨论，或进入本站问答社区互动。

【时间要求】 2 学时（ 45 分钟× 2=90 分钟）

【上机内容】个人站点制作

【上机目的】
1 、了解网页的组成
2 、掌握网站的目录结构
3 、掌握表格布局方法和技巧
4 、掌握HTML及CSS的基础知识
5、培养团队意识和协作精神

【上机重点】
1 、网站的目录结构
2 、表格布局
3 、HTML及CSS的使用

【上机难点】
1、表格布局
2、HTML及CSS的使用

【上机教学方法】
1 、采用分组教学 , 每个小组模拟一个开发团队
2 、充分发挥小组内各成员的积极性、主动性和创造性

【上机内容】

请在规定时间内制作出以下网页：

要求：

1、建立网站根目录和相应的文件夹，所有文件、文件夹命名及目录结构符合网站建设规范。

2、制作index.html网页，效果如上图所示，网页的标题为：你的姓名+的个人网站。如：张三的index.html网页的标题应该为：张三的个人网站。

3、设置网页中默认字体大小为12px，行高为200%。

4、使用表格布局制作网页，主视觉宽度为1000px。

5、导航栏菜单做成空链接（链接到#），导航菜单超级链接的状态（a:link和a:visited）：字体大小为16px 加粗，没有下划线，当鼠标移动到上面时的状态（a:hover）：颜色变为#F00 ，没有下划线。

6、网页设计交流群：208047327 超链接到

http://shang.qq.com/wpa/qunwpa?idkey=d2ee29b967b9b954c52d7970f6bbe0030169047009d99fb42e9ee09d38775856

其超链接状态a:link和a:visited：没有下划线，颜色为 #F00，字体大小为14px。

7、站长介绍、站长相册字体大小为16px，粗体。 Introduce、Photo 字体颜色为 #900，字体大小为16px。

8、页面中下图表格周边颜色为#f6f6f6。

该表格边框为1px,实线，颜色为#CCC，给表格使用如下类样式即可

.tableBorder{ border: #CCC solid 1px;}

9、底部版权区域表格上边框线为1px,实线，颜色为#CCC，背景颜色为#e8e8e8。

.footer{ margin-top:1px; border-top:#CCC solid 1px; background:#e8e8e8;}

10、提交时要把所有页面和图片一起上交。（把网站根目录压缩，以“点名册序号+学号+姓名-1”命名）。

有问题或有好的建议可以在下方评论区发表评论。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1621.html

登录后才能评论