آموزش طراحی وب سایت جلسه هشتم – طراحی یک تمپلیت

آموزش طراحی وب سایتجلسه هشتم – طراحی یک تمپلیت

تدریس طراحی وببرای اطالعات بیشتر تماس بگیرید

تاو09125773990شماره تماس:

09371410986 : پست الکترونیک

[email protected]

Web Design TrainingTemplate Designing

Part 08Author :Babak Tavatav

CSS float PropertyThe float property sets where an image or a text will appear in another element.Note: If there is too little space on a line for the floating element, it will jump

down on the next line, and continue until a line has enough space.Note: Content, background, and borders of inline elements should go in front of

the float. Background and borders of a block element should go behind the float, but the content of the block element should go in front of the float.

Possible ValuesValueDescriptionleft : The image or text moves to the left in the parent elementright : The image or text moves to the right in the parent elementNone : (Default) The image or the text will be displayed just where it occurs in the

text

<html><head><style type="text/css">img {float:right;}</style></head>

<body><p>In the paragraph below, we have added an image

with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>

<p><img src="logocss.gif" width="95" height="84" />This is some text. This is some text. This is some text.This is some text. This is some text. This is some text...</p></body></html>

.thumbnail {float:left;width:110px;height:90px;margin:5px;}

CSS Clear PropertyImage and text elements that appear in another element are calledfloating elements.The clear property sets the sides of an element where other floatingelements are not allowed.

ValueDescription• Left : No floating elements allowed on the left side• Right: No floating elements allowed on the right side• Both: No floating elements allowed on either the left or the right

side• None : Default. Allows floating elements on both sides

.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div> <div id="wrapper"> <div id="header"> <div id="Header-Menu">آمدید ثبت - <"#"=a href> ! خوش سایت به ورود;a> &nbsp/>نامکاال سبد ها ;nbsp; |&nbsp&درباره سواالت ;nbsp; |&nbsp&آگهیما ;nbsp; |&nbsp&متداول با ما ;nbsp; |&nbsp&همکاری با تماس

<br /> </div> <div id="Header-Logo"></div> <%-- <div id="Header-Welcome" > آمدید ثبت - <"#"=a href> ! خوش سایت به ورود<%--<a></div/>نام

</div>

<div id="clearer"></div> </div> <div id="footer"> سبد به سایت این حقوق تمامی

است مربوط <div/> کاال</div> </div></body></html>

.css

body{

margin-right: 3%;margin-left: 3%;

}

#wrapper {

width:900px; margin:0 auto;}

#Header-Logo{

width: 275px;

float: right;padding: 10px;background-image: url( Images/Logo.jpg );height: 70px;background-repeat: no-repeat;

}

* { margin:0; padding:0; border:0;}

#header{

background-color: #eee;background-image: url(image/bg_menu.jpg);height: 80px;padding-bottom: 10px;padding-left: 10px;background-repeat: no-repeat;

}

#Header-Menu{

width: 580px;float: left;padding: 0px 0px 0px 0px;font-family:tahoma; font-size:11px;

}

#main{

background-repeat: repeat-y;background-color: #FFFFFF;width: 887px;

}

#navi-left{

width: 194px;float: left;

color: #fff;background-image: url( 'Images/bar_sabad.jpg' );background-repeat: no-repeat;height: 60px;

}

#navi-center{

margin-left: 194px;margin-right:572px;

background-image: url( 'Images/bar_supprt.jpg' );background-repeat: no-repeat;width: 698px;height: 60px;

}

#navi-right{

width: 580px;height: 60px;float: right;background-image: url( 'Images/bar_bg.jpg' )

}

/*----------Menu & Slideshow --------------*/ #row03{

clear: both;padding-top: 10px;width: 887px;

}

#slideshow{

width:670px; float: left;background-image: url( 'Images/Store_Slice_19.jpg' );

color:#fff; height: 271px; }

#mainmenu{

width: 200px;margin-left:670px;

}

#menu-header{

background-image: url( 'Images/menu_top.jpg' );

background-repeat: no-repeat;width: 215px;height: 37px;

}

#menu-content{

background-image: url( 'Images/menu_bg.jpg' );

height: 234px;width: 215px;

}

/*----------Row 04 --------------*/ #row04"{

clear: both;width: 847px;}

#row04-left{ width:240px; float: left;

}

#t1{

background-image: url( 'Images/tabliq1.jpg' );

width: 240px;height: 152px;background-repeat: no-repeat;

}

#t2{

background-image: url( 'Images/tabliq2.jpg' );

width: 240px;height: 153px;background-repeat: no-repeat;

}

#t3{

background-image: url( 'Images/tabliq3.jpg' );width: 240px;height: 201px;background-repeat: no-repeat;

}#row04-right{

width: 660px;margin-left:240px;}

#adv01{

background-image: url( 'Images/Store_Slice_38.jpg' );width: 650px;height: 194px;

}#adv02{


}

#adv03{


}

# clearer { clear:both;}

#footer{

padding: 10px;font-size: 11px;text-align: center;

}

The End

آموزش طراحی وب سایت جلسه هشتم – طراحی یک تمپلیت

Documents