网页制作实战项目四:使用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/myzuopin/tenwp/webP2/

要求:

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

(6)
江山如画的头像江山如画管理团队
上一篇 2018年5月2日 下午8:41
下一篇 2018年5月3日 下午9:19

99%的人还看了以下文章

  • 网页设计的任务及网页设计的实现

    网页设计的任务,是指设计者要表现的主题和要实现的功能。站点的性质不同,设计的任务也不同。从形式上,可以将站点分为三类。
    网页设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制。第二部分为网页的制作。

    2020年2月4日
    2.9K0
  • 网站上FLV、MP4格式视频无法播放的原因及解决方法(图)

    今天更新网站,把视频文件放到服务器上,用浏览器打开,无法播放视频文件。 服务器:windows2003+IIS 问题原因: 在IIS服务器上,默认是不支持网站插入并且播放视频功能的。 我们需要去配置IIS服务器,以支持相应的视频格式,如:FLV、MP4 在IIS服务器中配置视频格式的方法和步骤 win2003服务器IIS的配置方法 打开IIS管理器,在左侧“…

    2018年5月9日 网页设计
    3.9K0
  • 毛笔字生成器,毛笔字在线生成网站

    125网页设计今天给大家推荐几个毛笔字生成器,毛笔字在线生成网站: http://www.51poca.com/ http://www.epinv.com/online/ http://www.akuziti.com/mb/ 毛笔字改造使用方法 将下载下来的字体图片AI转路径,编辑文字。 首先使用在线生成器输入选择好你需要的文字字形,将文字图片拖至AI中。 …

    2019年1月5日 网页设计
    8.8K0
  • 制作网页,你需要掌握以下知识

    推荐:如何制作网页,网站制作流程 HTML(超文本标记语言):HTML是用于构建网页结构的标记语言。你需要学习HTML标签、属性和元素的使用,了解如何创建网页的基本结构、标题、段落、链接、图像等。推荐学习:Html入门教程(零基础)、跟永哥学HTML5 CSS(层叠样式表):CSS用于为网页添加样式和布局。你需要学习CSS选择器、属性和值的使用,了解如何设置…

    2023年10月4日
    8890
  • 企业做网站选择定制开发,还是网上在线模板建站好?

    不少企业老板,要做网站,总爱先问做网站多少钱? 在《做个企业网站多少钱?》一文中,我们讲解了做网站,先要明白,价格和价值的关系,只看价格不比质量,不看实际给企业能带来多大价值的网站都是没有什么用处的,看似便宜,实际多花了钱,后期还要重做,总起来花的钱比原来还要多。想花一千的价格,还要求网站页面漂亮,功能完善,用户体验及排名都要好,这是不现实的。 企业做网站选…

    2018年12月17日
    2.0K0
  • 网页设计色彩搭配:红色

    标准红色的RGB值分别是255、0、0。红色在网络上出现的频率可以说是比较高的,无论是传达吉庆的信息还是商业上的应用,是一种极具有表现力的色彩。 红色容易让人联想到太阳、热血、婚姻、喜庆,给人的感觉当然富有吉祥、吉祥、活力、激动、火暴等寓意。 如图所示: 图 红色基调 红色的波长最长,穿透力最强,感知度也最高。 它经常用来表现太阳、火焰、热血、花卉等,具有积…

    2021年2月4日 网页设计
    5.8K0

发表回复

登录后才能评论