在开始学习之前，请加入网页设计交流群：208047327 ，并注册本站用户，在项目制作过程中有任何问题，可以在群内讨论，或进入本站问答社区互动。
【时间要求】 2 学时（ 45 分钟× 2=90 分钟）
【上机内容】 个人站点制作
【上机目的】
1 、了解网页的组成
2 、掌握网站的目录结构
3 、掌握表格布局方法和技巧
4 、掌握HTML及CSS的基础知识
5、培养团队意识和协作精神
【上机重点】
1 、网站的目录结构
2 、表格布局
3 、HTML及CSS的使用
【上机难点】
1、表格布局
2、HTML及CSS的使用
【上机教学方法】
1 、采用分组教学 , 每个小组模拟一个开发团队
2 、充分发挥小组内各成员的积极性、主动性和创造性
【上机内容】
请在规定时间内制作出以下网页：
项目演示：http://www.125jz.com/myzuopin/tenwp/webP1/index.html
要求：
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
微信扫一扫 
支付宝扫一扫
评论列表（3条）
演示项目都是table布局，哪年的代码呀
@小心哈：入门，还是要学习表格的，表格布局会了，转div+css,很快的。
网页制作实战项目一出现问题：
问题1：只交了页面，相关文件夹和文件都没上传
问题2：目录结构，图片放到了images\images下，图片使用绝对路径
问题3：文件名出现中文
问题4：css文件引入有同学使用了导入@import url(“css/common.css”);，CSS文件放到了根目录，没有放到CSS文件夹
问题5：使用了内容样式表，样式定义没有放入CSS文件
优点：
大部分同学能够使用表格进行布局，个别同学代码规范并书写了注释（如杜丽……）