亿贝html5,亿贝CALL

此次我们组参赛的主题是一个手机通讯软件的官方网站,因当前所学课程为DIV+CSS分层布局实现静态页面的布局,为了体现这一点,故参赛作品全部采用DIV+CSS的布局方式,整个作品按所学的W3C规范,实现结构与样式分离的web规范,所有页面均有独离的样式表文件,以便后期的更改与整合工作!

网页设计前的准备工作

1. 为了整个项目在完成时能够顺利整合在一起,各组员按规定的格式存取代码源文件(如图),这个工作在任务分配时写成文档发给各组员,这样做可以让文件统一,有条不紊,便于查找!

cab2a160b71fcdd49c07a59d6f1eeda2.png

2. 同时,为了保持网站整体风格统一,我们组采用模板页的方式实现顶部与底部复用,中间内容部分采用高度自适应的方式,以适应各组员的页面完成后能顺利的放到模板中去(如图:模板页)

9a99c3d37567d0b63c9eca50e5881945.png

模板页(mod.dwt)

任务分配及完成情况

1. 本次作品共6个导航页面,小组成员4人,徐军与吴镜平两位在职人员每人分配1个页面,其余4个页面由我与曾丰胜每人2页面

2. 本项目从制作到整合完成,用了一周左右的时间

13568fa6aa53625f614405ecf32eb7c6.png

项目完成效果图展示

a2eea894a5e12074dcfaa98087fea86d.png

首页(index.html)

15d16035fbfb7b18171d58e720aa9be7.png

亿贝CALL(yibeicall.html)

e41bb29bde3cc13548dab54e0af749b6.png

留言板(liuyan.html)

最后在所有项目完成之余,我在模板页中添加了一个小模块,将参与本次项目制作的成员展现出来,这个小模块在每个页面的最左边,鼠标悬浮时展开,同时扩展了一个页面展示利用表格规整数据的布局,显示小组项目制作人员

信息。每个成员的名字都加入了锚链接,链接至详细的扩展页面,如下图:

386f5d15192fa23038198277ffdf1009.png

小组项目制作人员(center.html)

项目完成主要用到的知识点

1. Div+css全局布局(项目)

2. Position之absolute , relative , fixed 定位的使用

3. Float浮动定位

4. Background-position背景偏移技术的使用

5. Div+ul+li无序列表布局

6. Div+dl+dt+dd图文布局

7. Table-tr-td表格布局

8. Form表单的使用

9. a链接,锚链接的使用

10. hover , target , focus等伪类样式的使用

11. table之caption , thead , tbody , tfoot 规整数据显示

项目完成的心得与收获

通过此次小组项目的制作,使我对分层布局的掌握更加深入,通过项目实践,能让自己发现自己在学习中的不足,在学习上须要提升与改进的地方!同时在项目实践中,能真正的发现问题,而自己在解决时,自然而然也就有了更多的收获!整个项目上从制作到完成,不仅是对我们在这一时段知识的掌握程度的考验,也是在锻炼我们解决问题的能力,更加深了我们对代码使用的熟练成度!

项目能够顺利的完成,与小组每位成员的努力是分不开的!这也更加体现了团队协作的重要性!如同以后参加工作一样,我们须要同团队一起共同完成同一个项目!而小组就是我们学时的团队!互相配合,互相学习,最终能事半功倍!

感谢小组的每位成员付出的努力,同时也感谢我们的老师对我们的指点,课后提供的资料使我在学习之余扩展了知识面!也希望在日后的学习中,大家能继续互相学习,互相勉励,学到扎实的技能!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值