下载文档原格式
学号：1407010222 姓名：叶亮班级：14计算机2班实验二用DIV+CSS实现网页布局及网站设计一、实验目的与要求1. 掌握HTML基本标签的应用2. 掌握CSS基本知识。
3. 掌握用DIV+CSS实现网页布局及网站设计。
二、实验内容1. 插入CSS样式表2. 建立DIV标签3. 构建网站主要内容三、源程序<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>我的推荐</title><style type="text/css">.h {font-family: 黑体;font-size: 18px;font-style:normal ;}</style><style>p {text-indent: 20px;text-align: center;line-height: 150px;word-spacing: 10px;letter-spacing: 10px;text-decoration: underline;font-family:楷体;font-style: italic;font-size: 60px;color:darkgoldenrod;font-weight: bold;}p1 {font-family: 仿宋;font-size: 30px;color:blue;font-weight: bold;}#container {width :810px;margin :auto ;background-color:aquamarine;}#header {height:150px;background-image:url(/images/1.jpg);background-repeat:round;}#main {background-color:darkorange;height :400px;margin-bottom:5px;}#lside {background-color:darkkhaki;width :403px;float :left;height :395px;margin-right:5px;margin-top:5px;background-image:url(/images/b1.jpg);background-repeat:round;}#rside {background-color:darkseagreen;width :402px;float :right;height :395px;margin-top:5px;background-image:url(/images/b2.jpg);background-repeat:round;}#footer {height :390px;background-image:url(/images/b3.jpg);background-repeat:round;}</style></head><body background="images/b.jpg"><div id="container"><div id="header"><p>经典小说推荐</p></div><div id="main"><div id="lside"><p1>历史类</p1><table width="395"height="360"border="1"><tr><td><span class="h">《大秦帝国》 华夏历史上最强大帝国的崛起与没落。
DIV+CSS 综合练习任务目的：1、能够描述链接的四中状态，并与4种伪类对应。
了解块状元素和内联元素的区别,理解类的继承。
2、能够使用DIV+CSS对完整页面进行布局，完成导航条的状态的设置。
3、通过小组学习培养学生团结协作能力，通过对导航条的制作培养学生在导航制作方面的创新能力。
任务重点：熟练的使用CSS完成标签<a>,以及伪类的样式定义，掌握操作步骤。
任务难点：使用CSS制作导航条步骤较多，易使学生思维混乱，理清操作步骤，掌握操作要领，有助于培养学生的创新能力，这是本节课的难点。
实施方法：小组实训、思路引导、演示实验、实施过程：一、提问复习（2分钟）在使用DIV+CSS定义连接样式的时候我们遇到了几个选择器名称，他们分别是什么含义？a:link ——未访问的链接a:visited ——已访问的链接a:hover ——当有鼠标经过悬停在链接上a:active ——被选择的链接（按下鼠标）二、展示效果、分解任务（3分钟）结合上节课已经完成的任务分析。
出示幻灯片分析。
三、分组制作。
（4分钟）1.解压素材包：将获取的本节课素材加压缩到D:\LX7下面。
2.建立好站点，站点名称LX7，站点的主文件夹为D:\LX7，站点的图片文件夹为D:\LX7\images\3.打开lx7.html文件，插入布局对象：在#menu的标签之前插入ID为#top的DIV布局对象。
#top的样式为：宽:770 px；高:90 px；左右margin：auto；背景图片images\top.png。
4.插入布局对象：在#main的标签之后插入ID为#foot的DIV布局对象。
#foot的样式为：宽:770 px；高:60 px；左右margin：auto；背景颜色：浅灰；文字居中对齐；插入版权信息文字。
四、分析任务二（2分钟）出示幻灯片，分析导航的结构。
结合PPT讲解导航的结构。
分析导航的制作过程。
四、讲解步骤（4分钟）1.光标停在导航的链接与链接之间，加入回车换行。
实训4 div+css综合运用一、背景介绍在Web开发领域，div和css是两个基础、重要的概念。
div是HTML中的一个标签，用来划分网页的结构和布局；而css是一种样式表语言，用于描述HTML文档的呈现方式。
实训4中涉及到了div 和css的综合运用，旨在帮助学习者掌握这两个技术，并且能够灵活运用于实际项目中。
二、整体评估在实训4中，学习者需要通过实际操作，完成一个包含头部、导航、内容区域和底部的网页布局。
这样的任务要求对div和css的综合运用提出了很高的要求，需要考虑到页面的整体结构、样式和布局。
在评估过程中，我发现学习者需要注意以下几点：1. 结构清晰：div标签应该按照页面的结构和布局来合理地进行划分和嵌套，以确保页面结构清晰、层次分明。
2. 样式统一：css样式应该对整个页面起到统一、协调的作用，保证整体的美观和一致性。
3. 响应式布局：在综合运用中，需要考虑到不同设备上的显示效果，保证页面能够适配不同的屏幕尺寸。
4. 创新设计：除了基本的布局要求，学习者还可以通过css的特效和动画等进行创新设计，提升页面的互动性和吸引力。
三、文章撰写在本次实训4中，我们深入学习了div和css的综合运用，从理论到实践，都有了全面的了解和掌握。
通过对div的合理划分和css的样式设置，我们可以轻松实现一个精美、完善的网页布局。
在整个过程中，我对div和css的重要性有了更深的理解。
div作为网页设计中最基础的组件，它的合理划分和嵌套对于页面的结构和布局起着至关重要的作用。
通过div的灵活运用，我们可以将页面分割成不同的模块，从而更好地呈现页面内容，提高用户的浏览体验。
css则是页面样式的设计师，通过设置各种样式属性，我们可以实现页面的美化和个性化定制。
通过css的盒子模型、浮动布局、弹性布局等特性，我们可以完美定制各种不同风格的网页布局。
在综合运用的过程中，我深刻体会到了对div和css的熟练掌握意味着更自由地实现网页设计的愿景。
webcss实验报告WebCSS实验报告引言：WebCSS是一种用于网页设计的样式表语言，它可以控制网页的外观和布局。
本篇实验报告将介绍我在学习WebCSS过程中的实验内容和心得体会。
实验一：基础CSS样式的应用在这个实验中，我学习了如何使用CSS来设置网页的基本样式，比如字体、颜色、背景等。
通过实验，我发现CSS可以让网页更加美观和易读。
我尝试了不同的字体和颜色组合，发现不同的选择会给人不同的感觉。
比如，使用Serif字体的标题给人一种正式和专业的感觉，而使用Sans-serif字体则更加现代和简洁。
实验二：盒模型的应用在这个实验中，我学习了CSS的盒模型，它用于定义网页元素的尺寸和边距。
通过实验，我发现盒模型可以让网页的布局更加灵活和自由。
我尝试了设置不同的边距和内边距，发现可以通过微调来改变网页元素之间的间距和整体布局。
同时，我也学习了如何使用CSS的浮动属性来实现网页元素的排列和定位。
实验三：响应式设计的实现在这个实验中，我学习了如何使用CSS的媒体查询来实现响应式设计。
通过实验，我发现响应式设计可以让网页在不同设备上都能够良好地显示和适应。
我尝试了设置不同的媒体查询条件，比如屏幕宽度、设备类型等，发现可以通过CSS来针对不同的情况做出不同的样式调整。
这样，无论是在电脑上还是在手机上浏览网页，用户都能够获得良好的体验。
实验四：CSS动画的应用在这个实验中，我学习了如何使用CSS的动画效果来为网页添加一些互动和生动的元素。
通过实验，我发现CSS动画可以让网页更加吸引人和有趣。
我尝试了设置不同的动画效果，比如淡入淡出、旋转等，发现可以通过CSS来控制动画的速度、持续时间和循环次数。
这样，用户在浏览网页时可以感受到一些视觉上的变化和活力。
实验五：CSS预处理器的应用在这个实验中，我学习了如何使用CSS预处理器来简化和优化CSS代码的编写。
通过实验，我发现CSS预处理器可以提高代码的可维护性和重用性。
网页制作实验报告4篇网页制作实验报告4篇在生活中，我们使用报告的情况越来越多，我们在写报告的时候要避免篇幅过长。
我敢肯定，大部分人都对写报告很是头疼的，下面是小编收集整理的网页制作实验报告，欢迎大家分享。
网页制作实验报告1一、实验目的及要求：本实例的目的是通过设置css样式创建表格的虚线边框。
二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境，支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;4、安装acdsee、photoshop等图形处理与制作软件;5、其他一些动画与图形处理或制作软件。
三、实验原理通过设置css样式创建表格的虚线边框。
四、实验方法与步骤1) 在网页中创建一个表格。
2) 在“css样式”面板中单击“”按钮，在弹出的对话框中进行设置，完成后单击“确定”按钮。
3) 在弹出的对话框中进行设置，完成后单击“确定”按钮。
五、实验结果六、讨论与结论对话框中各项指标和属性的设置存在一定的难度，如果没熟练掌握就容易出错使实验失败。
对“ccs”样式所要使用的各种按扭不够熟悉在使用的时候觉得很生硬。
这个实验成功的关键在于对软件的掌握程度以及对各种属性的认识程度，只要充分地掌握了软件的各种操作，对各属性所代表的含义有充分的认识就能很好地完成这个实验。
网页制作实验报告2一、实验目的及要求：本实例的目的是创建锚点链接。
二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境，支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;4、安装acdsee、photoshop等图形处理与制作软件;5、其他一些动画与图形处理或制作软件。
课程实验报告
专业年级2012级网络工程课程名称网页设计与制作
指导教师
学生姓名
学号20122205051013 实验日期2014年11月19日实验地点笃行楼A栋306 实验成绩
教务处制
2014 年11 月19 日
2 利用css改变fruit.html的外观
使用内部样式表，运用css修改fruit.html的外观，达到如图所示的效果，
步骤4，使用div标记作为容器
将与香蕉有关的html元素，用一个div标记包含起来，并将id设置为banana，以此类推，将与西红柿有关的html元素，用一个div标记包含起来，并将id设置为tomato。
步骤5，使用id选择符，为步骤5添加的各个div设置不同的背景色以及边框。
步骤6，修改链接文字的样式
2.提供步骤1完成页面的html源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
10.提供步骤6添加的css样式规则源代码（注意只需要css的代码）a:link { font-weight: bold;。
最简单的divcss网页设计报告及其代码实验六CSS布局【实验目的】掌握用CSS的布局。
【实验内容】1、熟悉Dreamweaver软件的环境；2、会使用CSS进行布局。
【实验步骤】1. 打开Dreamweaver，新建HTML文件。
在代码中body中插入一个DIV标签。
然后选择标签，新建CSS规则，在新建的CSS规则中，对新建的规则进行设置。
2. 对背景项设置，可以设置背景色；对方框项设置，可以设置标签的宽，高，和浮动（左对齐，右对齐，居中，无），以及方框位置的Padding和Margin进行设置；对边框设置，设置它的类型、宽度和颜色。
这是一栏布局。
3. 二栏布局是在一栏布局的基础上再新建一个DIV标签。
对新建的标签进行同样的设置，在设置方框的浮动时，选择不同的浮动，会出现不同的效果，如一个DIV标签设置为左对齐，另一个设为右对齐。
这种效果还可以通过所建规则中的定位进行设置。
4. 嵌套布局。
将第三个div嵌套在另一个div中。
【实验结果】【实验心得和体会】通过本次的实验，我熟练掌握了div布局技巧。
能够完成简单的css+div布局。
如上图。
现在网页设计过程中基本都是使用css+div 的格式进行布局。
学会css+div对于网页设计来说有很重要的意义。
DIV+CSS网页设计实例教程目录：第一步：规划网站，本教程将以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；第十步：解决IE浏览器的显示BUG；第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。
其基本布局见下图：主要由五个部分构成：1.Main Navigation 导航条，具有按钮特效。
河南城建学院计算机学院《网页编程》实验报告班级姓名：学号：实验日期： 2014 年 11 月 03 日软件环境： Windows 、ie一、实验目的1、掌握web标准和网站重构；2、掌握css选择器分类；3、掌握css应用；4、掌握div元素的定位。
二、实验内容1、结合web标准实现网页设计；2、应用内部样式表和外部样式表到网页；3、结合div和css实现页面美化。
三、运行结果截图及代码清单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><link href="Untitled-5.css" rel="stylesheet" type="text/css"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title><style type="text/css">body {background-image: url(t010dd639f9b629de6f.jpg);background-repeat: no-repeat;font-size: 14px;font-family: "宋体";}.才 {font-weight: bold;}如果有来生我要做一棵树，站成永恒，没有悲欢的姿势。
“银家是奥崽俚”主页的设计一、系统功能说明系统包含主要版块有：1.个人中心这里是对用户资料的一个说明，主要运用到了一些基本的html知识。
2.日记该板块主要是给别人写一些日志的，在这里我们要设置一些按钮及文本域等知识，让用户写的一些东西能保存下来，还能及时的的在网页上面显示。
3.相册该处主要是展示一些相片，和上传一些相片4.留言板该处，主要是展示一些别人给用户的留言二、界面设计三、编码1.页面Div布局<div id=container><div id=logo> </div><div id=navigator> </div><div id=info> </div><div id=main><div id=blog> </div><div id=music> </div><div id=pic> </div><div id=message> </div></div><div id=footer> </div><div>2.页面布局CSS设计（<style>body{text-align:center;}#container{width:980px;magin:0 auto;}#logo{width:100%;height:90px;background-color:blue;}#navigator{padding:5px 0;width:100%;height:30px;background-color:black;}#navigator ul li{float:left;}#navigator ul li a{width:160px;font-size:20px;display:block;color:white}a:hover{background-color:blue;color:white;} #main{width:100%;}#info{float:left;width:20%;height:300px;background-color:white;}#mid{float:left;}#blog{float:left;width:50%;height:150px;background-color:yellow;}#pic{float:left;width:50%;height:150px;background-color:red;}#music{ float:left;width:40%;height:150px;background-color:red;}#message{ float:left;width:40%;height:150px;background-color:white;}#footer{width:100%;height:100px;background-color:black;color:white;}3.导航条设计导航功能简单说明：导航条里面主要包含五个部分，首页，个人中心，日记，相册，留言板他们主要是让页面更人性化，更具层次感！使用用户更快的找到自己想找到的东西，相当于一个导向灯！而且为了使用户使用时有更好的体验，我们将其设置成等大小的块块，手标放上去会发生颜色的变化！具体代码：<div id=navigator><ul><li><a href=# id=n1>首页</a><li><a href=# id=n2>个人中心</a><li><a href=# id=n3>日记</a><li><a href=# id=n4>相册</a><li><a href=# id=n5>留言板</a></ul></div>4.其他内容添加<div id=main><div id=info> <img src=11.jpg><p> 姓名：忽忽<p> 性别：偏男<p> 年龄：你猜<p> </div><div id=mid><div id=blog><p><font size=5 color=green>日记</font></p><li><a href=d.html;>今天天气真好啊！</a><li><a href=e.html;> 我们去钓鱼吧</a></div><div id=pic><p><font size=5 color=red>相册</font></p><img src=111.jpg></div></div><div id=right><div id=music><p><font size=5 color=blue>音乐</font></p><embed src=我好想你.mp3 width=390 height=80 loop=true></div><div id=message><p><font size=5 color=yellow>留言板</font></p>今天天气真不错！</div></div></div><div id=footer><p> </p><p>©版权所有，请勿抄袭!</p></div></div>四、页面效果截图五、总结本学期的网业设计课程，开展了动态思维训练教学活动，对于我们学生来说，可以激发学习兴趣。
学生实验报告学期：2015-2016学年第二学期班级：2015级计算机科学与技术学号：
姓名：
课程编号：
课程名称：网页设计与制作
填写说明
1、填写实验报告须字迹工整,使用黑色钢笔或签字笔填写。
2、课程编号和课程名称必须和教务系统中保持一致，实验项目名称填写须完整规范，不能省略或使用简称。
3、每个实验项目应填写一份实验报告。
如同一个实验项目分多次进行，可在实验报告中写明。
4、如果实验报告页面不够，可分成两个实验报告填写。
实验目录及成绩登记
说明：实验项目顺序和名称由学生填写，必须前后保持一致；实验成绩以百分制计，由实验指导教师填写并签名，一般不能涂改，确有涂改的，应在备注栏说明原因；实验报告部分最终成绩为所有实验项目成绩的平均值。
实验报告
实验日期：年月日星期。
