css_网页设计报告
《C S S+D I V网页设计》
目录
1．前言................................................................ .... . (1)
2．设计要求...................................................... .... .... . (1)
3．开发工具的选用及介绍 (1)
4．个人博客设计 (2)
4.1 css+div布局 (2)
4.2 首页布局................................. .. (9)
4.3 日志布局 (12)
4.4 博友布局 (13)
4.5 相册布局 (15)
4.6 留言布局 (16)
4.7 收藏及好友布局 (16)
5．总结 (17)
1：前言
博客是目前网上很流行的日志形式，很多网友都拥有自己的博客，甚至不止一个。对于自己的博客，用户往往都希望能制作出美观又合适自己风格的页面，很多博客网站也都提供自定义排版的功能，其实就是加载用户自定义的css 文件。
个人博客是一个自我展现的平台，可以让大家更好的进行交流。此次，我们的期末要求就是，自己完成一个个人博客的设计。
博客是一种需要每位用户精心维护，整理日志的网络，各种各样的色调都有。我所制作的个人博客主要表现出一种青春，岁月的记录，因此采用灰白色作为主色调，而页面背景采用绿色，二者配合表现出明朗，清爽与洁净的感觉。
2：设计要求
要求：1除个人首页外，要求至少包含：自我介绍，图片收藏，网页布局技术，我的爱好，给我留言等栏目，亦可自行增加其他栏目。
2整个网站至少包含10个html页（网站素材自行搜集整理，内容积极向上）。
3个人首页中设定的每个超级链接，必须能够链接到相应页面。
4其中“给我留言”栏目只要采用表单实验html页面部分即可，不需实现对留言内容的后台数据库保存。
5要求综合应用CSS+DIV技术，对个人博客系统进行整体布局以及内容样式控制。
最后效果：1）界面美观、布局设计独到；
2）版面简洁，文本，图案整齐美观；
3）整体色彩和谐，符合美感，贴近主题；
4）网页内各个元素搭配合理；
5）人机交互方便，结构清晰。
3：开发工具的选用及介绍
本次个人博客的设计主要是在Macromedia Dreamweaver的环境下完成的。Dreamweaver这款专业的网页设计软件在代码模式下对HTML,CSS,和JavaScript 等代码有着非常好的语法着色以及语法提示功能，并且自带很多实例，对CSS 的学习很有帮助。
4：个人博客设计
4.1 css+div布局
Style层叠样式表:
body
{
background:url(images/bg.jpg) no-repeat center top #000000;
padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
margin:0px auto auto auto;
color:#696767;
}
p{
padding:0px 0 20px 0;
text-align:justify;
margin:0px;
line-height:17px;
}
p.tips{
padding:0px 0 7px 0;
text-align:justify;
margin:0px;
line-height:17px;
border-bottom:1px #cebf91 dashed; }
h1{
color:#7e5025;
padding:5px 0 10px 0;
margin:0px;
font-size:19px;
font-weight:normal;
}
h2{
color:#2d7513;
padding:0px 0 5px 0;
margin:0px;
font-size:12px;
font-weight:bold;
}
a.read_more{
display:block;
color:#855f35;
float:right;
font-style:italic;
margin:5px 0 0 0;
text-decoration:none;
font-size:12px;
}
a:hover.read_more{
text-decoration:underline;
}
img.left_icon{
float:left;
padding:0px 15px 0px 0px;
}
img.right_icon{
float:right;
padding:0px 0px 0px 15px;
}
.clear{
clear:both;
}
a{
text-decoration:underline;
}
#main_container{
width:960px;
height:auto;
margin:auto;
padding:0px;
position:relative;
}
.top_leafs{
position:absolute;
top:2px;
left:3px;
z-index:200;
}
#header{
width:960px;
height:196px;
margin:0px;
padding:0px;
background:url(images/header_bg.jpg) no-repeat top center; }
.logo{
width:290px;
text-align:center;
font-size:28px;
color:#7e5025;
float:left;
padding:110px 0 0 112px;
}
.logo a{
color:#7e5025;
text-decoration:none;
}
/*---------------- menu tab----------------------*/ .menu{
width:470px;
float:left;
padding:145px 0 0 40px;
}
.menu ul{
list-style:none;
padding:0px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li a{
float:left;
border:none;
margin:0 10px 0 10px;
_margin:0 7px 0 7px;
text-decoration:none;
color:#754928;
font-size:14px;
font-weight:bold;
}
.menu ul li a:hover{
color:#754928;
border-bottom:3px #bc8d46 solid;
}
.menu ul li.selected a{
float:left;
border:none;
margin:0 10px 0 10px;
text-decoration:none;
color:#754928;
font-size:14px;
font-weight:bold;
border-bottom:3px #bc8d46 solid;
}
/*-------------center_content-------------*/
#center_content{
width:819px;
margin:auto auto 20px auto;
height:auto;
background-color:#fef8e6;
}
.left_content{
width:410px;
float:left;
padding:15px 10px 10px 60px;
}
.right_content{
width:290px;
float:left;
padding:0 10px 10px 20px;
}
.bottom_content{
width:819px;
height:369px;
clear:both;
margin:auto;
background:url(images/bottom_bg.jpg) no-repeat top center; }
.photos_block{
padding:10px 0 10px 0;
}
.photo_box{
width:114px;
height:111px;
float:left;
display:block;
text-align:center;
margin:0 18px 0 0;
position:relative;
background:url(images/photo_bg.gif) no-repeat center;
}
img.photo{
padding:6px 0 0 0;
}
a.view{
float:right;
padding:4px 6px 0 0;
text-decoration:none;
color:#706443;
}
.tip_box{
clear:both;
float:left;
width:290px;
padding:0 0 15px 0;
}
.news_box{
clear:both;
float:left;
width:290px;
padding:5px 0 5px 0;
}
.date_box{
width:47px;
height:49px;
float:left;
text-align:center;
line-height:25px;
font-weight:bold;
background:url(images/date_bg.gif) no-repeat center; }
span.day{
color:#855f35;
}
span.month{
color:#fef8e5;
}
.news_content{
width:230px;
float:left;
padding:0 0 0 10px;
}
.about_text{
width:300px;
padding:195px 0 0 30px;
float:left;
}
.friends_list{
width:180px;
float:left;
padding:195px 0 0 30px;
}
/*----------------------list-------------------------*/
ul.list{
list-style:none;padding:0px;margin:0px;
}
ul.list li{
list-style:none;width: auto;height: auto;padding:0 0 8px 0; margin:0px; }
ul.list li a{
width: auto; padding:0 0 0 15px; margin:0;color:#696767;text-align:left; display:block;
text-decoration:none;background:url(images/footer_bullet.gif)
no-repeat left;
}
ul.list li a:hover{
text-decoration:underline;
}
.bottom_right{
width:240px;
float:left;
text-align:center;
padding:195px 0 0 15px;
}
.bottom_right a{
padding:10px 0 10px 0;
display:block;
}
.footer{
clear:both;
width:770px;
margin:auto;
text-align:center;
padding:5px 0 0 0;
font-size:11px;
border-top:1px #cebf91 dashed;
}
4.2 首页布局
欢迎欢迎，热烈欢迎~
height="80" class="left_icon" title="" />嘿嘿，欢迎大家来到我的博客，
各位请自便哈，多多留言给力哈！！
个性签名
width="100" height="100" class="right_icon" title="" />
︶ㄣ回忆里甜蜜的笑容、
筑成了我心中的梦、
Photos
href="woxingwoxiu.html">
height="79" border="0" class="photo" title="" />
评论
美文欣赏
博客心情
01
1月
元旦一日
与以往不同，这次的新年是在学校过的，这是第一
次。晚上还去打工了、俺在期待三倍工资，哈哈！
09
1月
最后一次
就这么结束了、告别了打工之旅。虽为期不长，但
是那些点滴还是被铭记了。。
8
4.3 日志布局
减肥四件小事 版权归常熟理工所有 4.4 博友布局 | ||||
无敌小丸子 | 想要擁冇﹃個【尛冭陽】． 兲兲圍繞在臫巳旳身邊溫暖著臫巳旳xin | |||
花落莫相离 | 华灯初上， 灯火斑斓，街头上的霓虹灯肆意摇摆。 原来这城市的夜景也可以这么暧昧， 这么魅惑人心。 | |||
4.7 收藏布局
5：总结 通过此次个人博客的设计后，在网站设计、页面排版架构以及各个模块都有了更深一步的了解和认识。动手后才知道，想要做一个漂亮的网页其实并不容易。而在通过自己一步一步慢慢摸索得来的成果，当它慢慢接近完成时，所带来的成就感也是空前之大的。 在不断设计中，使用CSS+DIY技术，使制作过程更简便易行，让编写和排版结构更加清晰。DIV的灵活性也比较大，产生的垃圾代码也较之比较少，这样更利于我们编写者的清晰、直观的添加处理代码。 有了此次的实践，我相信以后在处理类似问题的时候，也会比较从容的对待。 web网页设计报告web网页设计专业物流工程学院 班级物流1301 姓名李维源 学号 2016年5月4日 第一部分:实训目的 21世纪是一个信息时代，Internet已经进入人们生活与工作的各方面，而网页作为Internet信息传递的重要载体，其重要也日趋突出。所以实训的目的就是要我们更好的掌握好这一学期的网页知识和提高自己的动手能力，并且上传到网上去，让更多人认识我，更好的宣传自己。 第二部分:实训准备 通过一个学期的web网页设计课程的学习，我终于明白我们浏览的每个漂亮的网页是怎么做出来的，我也想自己亲手来做自己的个人网站。在做个人网站之前，我做以下准备：理清自己的思绪，想清楚自己的网站设计，做模板，找素材，进行站点的规划和素材、资料的收集，要按照制作网站的步骤一步一步来完成。 第三部分:实训要求 1、主题鲜明、内容充实；颜色清新、舒适、结构合理； 2、导航清楚、栏目合理、层次分明、使用方便 3、设计8至15个页面。内含：用户注册，登录系统，留言系统、统计在线人数，设为首页、加为收藏等动态网页内容。 第四部分：个人网站的总体规划和步骤 1．设计的思路 我的个人网站主要是以绿为主，以淡色为辅。主要是希望所有的朋友看到这个空间能一种和谐、安宁、充满生机的感觉。得到心灵的慰藉！ 2．绿色网站的意义 我设计的这个网站主要是给人轻松舒爽、赏心悦目的感觉，让人们置身于一种美丽大自然的意境中，明快而错落的绿，让人仿佛来到青山翠谷。 网站的总体风格 网站的总体风格主要是以绿色为主，以淡色为辅，充满活力，生机。具有个性色彩。 网站的布局其实很简单，主要是做好一个模版，模版做好框架了，那网站就初步形成了，虽然主要框架做好了，但是也不要高兴得太早哦，但是你也要想清楚怎样把整个界面搭配得更具有个性化。首先，在框架的最top要插入一个能体现你个人网站的主图。然后在主图的下面插入按钮导航条，之后下面就插入自己想要的风格，虽然用模版做出来的风 《HTML5+CSS3网站设计基础教程》_教学大纲《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。 二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5 第二章HTML5页面元素及属性 第四章CSS3选择器 e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用 网页分析报告高 校 艺 术 网 页 设 计 分 析 姓名 班级 学号： 学院：国际教育学院 一、网站设计 1.1、网站设计的意义 网页设计与制作综合实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求，在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。 因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。 1.2、网站设计的目的 1通过综合实训进一步巩固，深化和加强学生的理论知识与专业技能 （1）、进一步熟悉和掌握网站建设的基本流程和技术规范； （2）、巩固运用Dreamweaver网页制作软件制作静态网页的知识； （3）、巩固综合运用Dreamweaver独立设计一个内容完整、图文并茂、技术运用得当的网站； （4）、具备独立撰写实训报告的基本能力； （5）、在网页设计的实践中培养分析问题、解决问题的能力，培养创新能力和团队意识； （6）、培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心； （7）、为今后从事网站开发、维护和管理奠定基础。 1.3、网站设计的任务 1、站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。 2、进行主页设计。构思主页布局，进行主页标题图片的设计（要求原创），进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。 3、动画设计。主页动画设计和其余页面动画设计，充分运用所掌握技术，效果好。 《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用 使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式 htmljavascriptcss技术综合网页设计报告通信信息网 课 程 结 业 报 告 一.实验原理 tidy4 用来装饰 修炼空间.html 网页制作css格式模板部分一CSS文字属性： color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ 网站设计分析报告网站设计分析报告 导读：本文网站设计分析报告，仅供参考，如果觉得很不错，欢迎点评和分享。 网站设计分析报告 一、网站的设计目标：《Hi购网》是用于实现为有需求商家聚集足够消费者，并使消费者得以更低折扣购买商品的平台。 二、网站的主题：《Hi购网》是设计一个网上团体购平台，并进行商品展示和销售管理。 三、网站的CI设计: 1. 《Hi购网》取“Hi”和“High”的同音，所以LOGO设计成一个跃起的简易的人物形象。 2.《Hi购网》是以“团购”为题材的网站，所以网站的整体形象以热情的橙色为主调，以白色为底并用暗红色最为点缀色。 3.整个网站主题采用宋体字。 4. 《Hi购网》的口号是：“上Hi购，放心high！” 四、网站的风格：《Hi购网》的设计风格是给人一种热情红火的感觉。 五、网站的功能需求:前台包含的模块有： 注册，登录，修改会员信息，查看订单，取消订单，确认收货，申请退货；后台包含的模块有:订单管理，会员管理。每个功能模块的具体描述:注册,添加新用户将用户信息添加到数据库；登录，登录到相应会员的主页面；修改会员信息，对会员注册的信息进行修改并 将修改后的结果添加到数据库；查看订单:查看订单信息和处理情况；取消订单，在订单发货前可以对订单进行取消操作；确认收货，会员确认收货后订单情况显示“已完成”；申请退货，会员确认收货30天内可以进行退货申请；订单管理，管理员可以对订单进行删除修改等操作；会员管理，管理员可以对会员进行删除等操作。 六、网站的运行环境和开发环境：运行环境windows，开发环境：VS。 七、网站的其他设计要求需求分析: 1. 《Hi购网》界面要求主要遵循简洁清晰又不失美观并易于用户操作的宗旨。 2.安全要求主要包括：用户可以浏览，选购商品但没有对商品进行修改和删除的权限；管理员登陆后台系统后才能对商品，会员，订单等信息实现管理。 3.用户注册登陆后才能进行商品的购买，管理员要对用户的身份进行验证。 八、网站的目录结构 九、网站的设计进度及时间安排 感谢阅读，希望能帮助您！ CSS页面布局及样式设计实验报告实验项目名称： CSS页面布局及样式设计 （所属课程：web系统与技术） 学院：计算机学院专业班级：11级计科信息姓名：学号： 实验日期：实验地点：A06-404 合作者：指导教师：李 本实验项目成绩：教师签字：日期： 一、实验目的 （1）掌握CSS中的定位属性使用方法。 （2）掌握DIV+CSS的页面布局方式。 （3）掌握CSS中的常用属性的使用方法。 （4）理解CSS的样式构造。 二、实验条件 安装Web开发环境的微机。 三、实验内容 （1）重新对聊天室的注册页面、登陆页面和聊天页面进行页面布局。 （1）对聊天室的注册页面、登陆页面和聊天页面进行样式设计。 四、实验步骤 （1）注册页面使用CSS将注册表单居中显示，表单内嵌入表格将文本与输入域格式化显示，表单内使用label标签。 （2）登录页面中添加div层用于显示在线用户数。 （3）登录页面使用div将登录表单，在线用户数，logo图片，超链接等页面元素重新定位布局。 （4）聊天页面改用div标签并使用CSS的position定位属性进行布局，框架内的独立页面使用float属性进行布局。 （5）使用CSS设置三个页面的背景颜色或背景图片。 （6）注册页面使用CSS设计所有输入框和提交按钮的样式。 （7）登录页面使用CSS设置的超链接的字体和下划线、登录表单使用圆顶角、在线用户数使用图片数字，使用CSS设计登录按钮的显示样式。 （8）聊天页面中使用CSS设计信息发送表单和发送按钮的样式，设计用户信息列表和聊天信息段落的的显示样式。 五、实验结果 注册界面效果图及代码： //添加图片代码 //用户注册信息代码 相关主题
相关文档
最新文档
|
