1. 中国网页设计首页
  2. 教程
  3. 网页设计

网页制作实战项目四:使用DIV+CSS制作网页

【时间要求】 2 学时( 45 分钟× 2=90 分钟)

【上机内容】 使用DIV+CSS制作网页——个人站点制作

【上机目的】

1、 掌握CSS盒模型

2、掌握网页元素的定位

3、掌握DIV+CSS布局的方法和技巧

【上机重点】

1 、网页元素的定位

2、DIV+CSS布局的方法和技巧

【上机难点】从表格布局向DIV+CSS布局的转变

【上机教学方法】

1 、采用分组教学 , 每个小组模拟一个开发团队

2 、充分发挥小组内各成员的积极性、主动性和创造性

【上机内容】

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

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

项目演示:http://www.125jz.com/demo/20200507P4/

要求:

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

点击下载:网页制作实战项目一:素材

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

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

4、使用DIV布局制作网页,主视觉宽度为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、页面中下图DIV周边颜色为#f6f6f6。

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

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

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

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

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

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

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

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