《DIV+CSS个人主页课程设计.docx》由会员分享，可在线阅读，更多相关《DIV+CSS个人主页课程设计.docx（7页珍藏版）》请在三一办公上搜索。
1、DIV+CSS个人主页课程设计一、 引言 1. 设计题目的目的、意义 DIV+CSS是网站标准中常用术语之一，通常为了说明与HTML网页设计语言中的表格定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。“DIV+CSS”是一种错误的说法。DIV只是HTML中的一个标签，而CSS是一种语言，这两者也根本不能成为对等。并且，“DIV+CSS”的话法也容易引起歧义。让大家认为WEB标准就一定要用到DIV，以导致了DIV标签的滥用。并且“DIV+CSS”也不能成为“WEB标准”的代名词，因为WEB标准不是单指两个语言，而是由XHTML、CSS
2、、DOM组合而成的一种技术规范，他所实现的是数据、结构、样式、行为的分离，方便了管理与维护。所以这里请大家记住“DIV+CSS”是一种错误的说法。 XHTM是目前国际上倡导的网站标准设计语言，因为XHTML网站设计语言具有的基本特点，这种CSSDIV模式的网站设计具有一定的优势，不过目前在网站建设应用中CSSDIV模式也存在一些问题。本文综合网站技术和设计人员的体会，并从网页布局方面介绍DIV+CSS的一些用法。 2. 设计题目主要任务 网页主题：本网页是个人主页,介绍个人信息、周边社交、日志文章、相册照片等。 设计风格：基于校园书香气息，因此的设计偏重稳重严肃的颜色。这个主页是简单的国字型的
3、。整个网页背景为深灰色的。top最顶部即logo是校园一景，营造气息。 Logo 下面是深褐色的menu,给人以稳重的感觉。 配色方案：颜色搭配：网页是深灰色为底，深灰的底色配上校园图片以及咖啡色的底纹，让人感觉主页的主人是一个稳重、严肃和庄重并存。 3设计题目要求 用DIV+CSS网页布局来设计一个展现本人信息的个人主页。注意：网站的菜单选择用CSS来完成。 1 二、 正文 首先，在我们要用CSS布局制作个人主页时，要明确我们要用什么样的布局来制作，一个好的布局能让自己的主页更直观的表现其中的内容。下面是我自己制作的主页的布局结构图，以及制作好的主页。 头部 导航 正文1 正文2 JS效果
4、制作信息 2 1主页上半部分 个人主页 | 校园新闻| 兼职信息| 资料下载| 校园风光| 校园论坛 2.主页下半部分 3 3.主页页尾JS效果 4 JS部分代码 校园 课堂 人文 成长 课堂 人文 成长 5 校园 人文 成长 校园 课堂 成长 校园 课堂 自立 剩余代码相同，相片路径不同 6 3.二级页面及动态效果 7 三、 结论 网页自然是要有观众流览，因此div+css也为不少网页设计师带来了令人头痛的问题，那就是浏览器兼容的问题，现在主流的浏览器有IE5.5 IE6 IE7 火狐浏览器等，对于兼容性问题，目前已经出现了一些兼容性插件，以及各种浏览器也开始向互相兼容发展，相信不久后的将来
5、，网页兼容性问题将会彻底被解决，从而减轻网页设计师的工作量。 光阴似箭，岁月如梭，转眼间一个月课程设计的时光就要结束，在学校里虽不是学有所成但是也学到了很多，不管是做人方面的，或是做事方面的。很感谢刘淑艳老师对我课程设计论文的指导，以及众多好友的帮助，让我完成了此论文。再次感谢刘淑艳老师对我的帮助。 四、 参考文献 1 王俭敏 编著.CSS+DIV网页样式与布局.电子工业出版社 2 李 烨 编著.别具光芒CSS属性、浏览器兼容与网页布局.人民邮电出版社 3 麦克法兰著，俞黎敏 译.CSS实战手册.电子工业出版社 4 锡德霍姆著，常可 译.Web 标准实战.人民邮电出版社 5 黄斯伟 等编著，CSS完全使用详解.人民邮电出版社 五、 指导教师评语 签名： 年 月 日 课程设计成绩 8
