网页设计与制作15-项目4 页面布局的设计——DIV CSS布局(变幻的CSS之个人博客)-简约务风
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
变幻的CSS之个人博客
南京高等职业技术学校 蔡薇
学习目标
1.理解DIV+CSS布局的优点，掌握网页重构的概念。 2.学会运用DIV+CSS布局来设计网页。 3.能够借助教材或网络进行学习，培养自主学习能力
变幻的CSS之个人博客
任务：分析页面，并利用DIV+CSS进行布局：
变幻的CSS之个人博客
• 思考：1、上Байду номын сангаас查看网页，自行分析如何用DIV+CSS布局。 • 作业：复习本次课内容 • 预习：项目四任务2变幻的CSS之个人博客（中国风）。
是否帮助别人（10%）
有没有与众不同的想法并实现（10%）
得分（各项 70%为基准）
总结与作业
• 总结：Div和表格各有长处，通常情况下它们可以互换使用。最好的搭配：Div 用于布局，表格用于显示数据。使用Div等布局元素来制作页面的布局设计， 定位，色块，图片等。使用表格，UL等这样的元素来显示页面中需要展示的 数据。DIV+CSS是符合W3C标准的网页布局方法，里面涉及CSS相关代码， 需要反复练习体会，才能理解并掌握。
任务：分析页面，并利用DIV+CSS进行布局：
变幻的CSS之个人博客
任务：分析页面，并利用DIV+CSS进行布局：
变幻的CSS之个人博客
任务：分析页面，各DIV对应的CSS：
评价与总结
项目
header（10）
完成项目情况（60%）
menu（10） pagebody（30）
bottom（10）
自主学习能力（20%）
南京高等职业技术学校 蔡薇
学习目标
1.理解DIV+CSS布局的优点，掌握网页重构的概念。 2.学会运用DIV+CSS布局来设计网页。 3.能够借助教材或网络进行学习，培养自主学习能力
变幻的CSS之个人博客
任务：分析页面，并利用DIV+CSS进行布局：
变幻的CSS之个人博客
• 思考：1、上Байду номын сангаас查看网页，自行分析如何用DIV+CSS布局。 • 作业：复习本次课内容 • 预习：项目四任务2变幻的CSS之个人博客（中国风）。
是否帮助别人（10%）
有没有与众不同的想法并实现（10%）
得分（各项 70%为基准）
总结与作业
• 总结：Div和表格各有长处，通常情况下它们可以互换使用。最好的搭配：Div 用于布局，表格用于显示数据。使用Div等布局元素来制作页面的布局设计， 定位，色块，图片等。使用表格，UL等这样的元素来显示页面中需要展示的 数据。DIV+CSS是符合W3C标准的网页布局方法，里面涉及CSS相关代码， 需要反复练习体会，才能理解并掌握。
任务：分析页面，并利用DIV+CSS进行布局：
变幻的CSS之个人博客
任务：分析页面，并利用DIV+CSS进行布局：
变幻的CSS之个人博客
任务：分析页面，各DIV对应的CSS：
评价与总结
项目
header（10）
完成项目情况（60%）
menu（10） pagebody（30）
bottom（10）
自主学习能力（20%）