web实训报告Word文档格式.docx
- 文档编号:21449444
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:14
- 大小:179.53KB
web实训报告Word文档格式.docx
《web实训报告Word文档格式.docx》由会员分享,可在线阅读,更多相关《web实训报告Word文档格式.docx(14页珍藏版)》请在冰豆网上搜索。
定位属性…………………………………………………………………6
浮动………………………………………………………………………6
5常见DIV+CSS布局……………………………………………………7
单列居中布局………………………………………………..…………..7
两列居中布局……………………………………………………………7
固定宽度,高度的块中内容溢出处置…………………………………8
6横,纵向导航条设计…………………………………………………...9
7实训所制作的网页....…………………………………………………..10
8总结………………………………………………………………………….11
9参考文献……………………………………………………………….......12
第2页
正文
1样式表布局概述
传统布局利用Table来实现。
Table元素具有无边框特性,在布局是能够利用单元格方便地构建网页格局,而且利用单元格的cellspacing,cellpadding,align和valign等属性操纵内容的位置,整个进程直观且上手简单。
采纳Table布局尽管上手简单,可是假设要更改页面的显示成效,或对布局进行简单的升级改造却很繁杂。
2盒模型
2.1盒模型的概念
在CSS中,页面中的所有文档元素都能够明白得为盒模型。
这些文档元素能够视为一个矩形框。
那个矩形框要紧包括以下几个组成部份:
边界(margin),边框(border),填充(padding)和内容(content)。
关于那个矩形框,也能够称其为盒子。
在CSS中应写为:
div{
width:
500px;
height:
200px;
color:
#09F;
background-color:
#FCF;
text-align:
center;
font-size:
16px;
}
#box1{
border:
dashed6px#66F;
padding-top:
20px;
margin-bottom:
45px;
}
.box2{
border-top:
#FC96pxdotted;
border-left:
#FC910pxdouble;
border-right:
10px;
#CF0;
第3页
在XHTML中应写为:
<
divid="
box1"
>
盒1<
/div>
divclass="
box2"
盒2<
2.2填充属性
在CSS中,填充用以操纵盒子中边框和内容之间的距离。
可用长度值,百分比值表示。
1)4个方向取值相同
#box1{padding:
2)左右方向和上下方向取值各自相同
#box2{padding:
10px20px;
3)4个方向取值不完全相同
#box{padding:
10px20px30px;
2.3边框属性
盒模型中的边框属性包括边框样式属性(borderstyle),边框宽度属性(border-width)和边框颜色属性(border-color)。
none
:
默认值。
无边框。
不受任何指定border-width的值影响
hidden
隐藏边框。
IE不支持
dotted
在MAC平台上IE4+与WINDOWS和UNIX平台上+为点线。
否则为实线
dashed
在MAC平台上IE4+与WINDOWS和UNIX平台上+为虚线。
solid
实线边框
double
双线边框。
两条单线与其间隔的和等于指定的boeder-width值
groove
根据border-color的值画3D凹槽
ridge
根据border-color的值画3D凸槽
inset
根据的值画3D凹边
outset
根据border-color的值画3D凸边
2.4
第4页
边界属性
在CSS中,边界属性用来操纵盒子之间的距离,它概念的是每一个盒子边框之外的区域。
与填充属性相同,边界也可按上右下左4个方向分开表示,这4个属性别离为margin-top,margin-right,margin-bottom,margin-left。
margin的取值可为auto,长度值或百分比值。
body{margin:
36pt24pt36pt;
}body{margin:
%;
10%10%10%10%;
3块元素和内嵌元素
关于块元素的特点,能够归纳为:
1)块元素默许老是在新行左侧开始。
2)块元素的默许宽度是容器width属性值的100%。
3)块元素的宽,高,margin和padding等内容可控,即能够任意设定。
在一课堂练习中:
div1"
div2"
imgid="
image"
src="
"
width="
357"
height="
255"
/>
div3"
王静03<
在CSS中为:
#div1{
357px;
255px;
z-index:
-1;
#FFFdashed10px;
#div2{z-index:
第5页
#div3{
margin-top:
-22px;
right;
#FFF;
1;
4元素的定位方式
4.1定位属性
利用定位属性(position)实现元素定位要紧包括三种方式:
绝对定位,相对定位和固定定位。
必需注意的是,在利用定位属性进行定位时,还需结合边偏移属性和z-index属性来实现。
其中定位属性用来确信采纳哪一种定位方式,边偏移属性用来确信元素的位置,而z-index属性用来确信元素的层叠顺序。
Position的取值有:
static
无特殊定位,对象遵循HTML定位规则
absolute
将对象从文档流中拖出,使用,,,等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。
如果不存在这样的父对象,则依据body对象。
而其层叠通过属性定义
fixed
未支持。
对象定位遵从绝对(absolute)方式。
但是要遵守一些规范
relative
对象不可层叠,但将依据,,,等属性在正常文档流中偏移位置
在z-index属性中,较大number值的对象会覆盖在较小number值的对象之上。
如两个绝对定位对象的此属性具有一样的number值,那么将依据它们在HTML文档中声明的顺序层叠。
关于未指定此属性的绝对定位对象,此属性的number值为正数的对象会在其之上,而number值为负数的对象在其之下。
设置参数为null能够移除此属性。
4.2浮动
第6页
浮动(float)是最经常使用的一种定位方式。
与利用定位属性的方式相浮动更方便,直观。
它能改变元素的默许显示方式,可是本来换行显示的块元素转为同行显示,由此来实现对块元素的定位。
在茶叶网站的例子中:
#left{
420px;
300px;
float:
left;
padding-left:
25px;
#middle{
height:
#right{
padding-right:
5常见DIV+CSS布局
单列居中布局
单列居中布局经常使用margin:
0auto;
两列居中布局
在中国杭州的网站制作中,CSS中的两列居中布局为:
body{
22px;
margin:
#CFF;
780px;
#wrapper{/*居中法二:
概念包装块的宽度,并使其居中*/
/*上下为0,左右自动*/
#head{
第7页
#FF9;
750px;
#main{
#C68DF8;
580px;
#footer{
#84FFC1;
clear:
both;
在HTML中的代码为:
head"
head<
<
left"
left<
main"
main<
footer"
footer<
固定宽度,高度的块中内容溢出处置
在布局进程中,由于布局需要将某些块的宽度和高度值设为固定像素值,而非百分比值或auto值。
随后添加内容时会发觉某一块中由于内容过量,块中的内容显现了溢出的情形。
Overflow的取值有:
第8页
1)visible
不剪切内容也不添加滚动条。
假如显式声明此默认值,对象将以包含对象的window或frame的尺寸裁切。
并且属性设置将失效
2)auto
在必需时对象内容才会被裁切或显示滚动条
3)hidden
不显示超过对象尺寸的内容
4)scroll
总是显示滚动条
5横,纵向导航条设计
通过无序列表将导航条设计为:
nav"
ul>
li>
ahref="
#"
首页<
/a>
/li>
新闻<
通知<
公告<
下载<
查询<
专栏<
/ul>
#nav{
700px;
35px;
#navul{
0px;
padding:
#navli{
list-style-type:
none;
100px;
line-height:
#nava{
text-decoration:
12px;
#333;
}
#nava:
hover{
underline;
第9页
#F69;
7实训所制作的网页
第10页
第11页
8总结
临近期末,我班来到了淮安软件园来进行为期两周的WEB开发技术的实训。
在那个地址,咱们有良好的学习环境和学习气氛。
在这门课的开始之初,咱们回忆了本学期学习的WEB开发基础这门课的知识,还进行了实际的网页制作。
通过完成XX,中国杭州,个人主页等几个网页的设计和制作,充分的加深了咱们对WEB的印象,提高了咱们的制作速度和准确度,对咱们接下来的学习有着不小的阻碍。
这次实训让咱们把职业能力训练与职业素养的训导有机结合起来,这对我接下来学习专业技术和专业知识会起到很有效的帮忙作用,在以后的学习中我会以一名学习者的身份严格要求自己,让自己能够在专业课方面取得更大的进步。
同时让我提早了解了社会对这项工作的要求,为我尔后走上工作职位打下了必然的基础,也积存了体会。
通过这次实训,我了解到现今社会关于网站制作的重要性,让咱们明白Dreanweaver的有效性。
这次实训加深了咱们对WEB的明白得,让咱们学会了各类WEB的特殊成效的显示,如:
横,纵向导航条设计固定宽度,高度的块中内容溢出处置,两列居中布局,元素的定位等知识。
在这段时刻里,咱们在教师的率领下完成了好几个网页,这关于咱们来讲是一次能力的提高,在学校咱们很少有时刻,机遇去做网页,这使咱们理论知识把握的不错,但得不到实际的应用练习。
但实训弥补了这方面的不足,锻炼了咱们的实际操作能力,让咱们更好的把握理论知识。
在实训中,我也碰到了一些问题,但教师和同窗们都踊跃帮忙我解决问题,让我的动手能力取得锻炼。
在实训即将终止之际,我要感激教师的指导。
在网页制作中,有些问题尽管看似简单,但事实上实现起来很困难,问题百出。
也有些问题看是困难,其实一试探就很简单,这很有趣,也让我明白遇事要平复试探。
通过这次的实训,我的WEB开发技术取得了大幅度的提升,让我明白只熟悉书本知识是不够的,而要求咱们学以致用,去发挥它的实际用途,在操作中巩固知识。
一天六小时对着电脑的日子并非好于,但这也是为了让咱们提早适应,咱们不能因此而畏缩,舍弃,应去发觉自身的问题,尽力适应。
在编写完一个网站的代码后,能够静下心来回忆一下,总结得失,这才是学习进程中最重要的。
实训让我成长了很多,收成了很多乐趣,让我慢慢爱上了网站的设计制作。
培育学生的学习能力和精神。
我也深刻熟悉到:
在学习进程中紧密联系生活和工程实际,激发学习的求知欲,培育咱们的科学精神和创新精神;
培育学习对待工作和学习要耐心、细心和一丝不苟、精益求精的职业适应等精神和素养是十分重要的。
实训终止了,很感激田晓敏和杨正翔两位教师一个月来对我的悉心指导,感激小组同窗的相互鼓舞与支持,也感激班级其他同窗对我的帮忙。
若是没有每一个人的辛苦尽力与付出,我不可能完成自己的任务,也不可能取得如此好的成绩,在此,我对所有付出过尽力的教师、同窗道一声真挚的谢意:
谢谢你们!
天高任鸟飞,海阔凭鱼跃。
人一辈子的道路上还有很多考验等待着咱们,我们要勇敢的向前大步迈进。
加油吧,为咱们的理想而奋斗!
9参考文献
1.《》
2.《》
3.《Web开发基础》
第12页
第13页
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web 报告