صفحه 1:
آموزتن ظز احی: وت ستاثت
3 هشتم - طراحی یک تمپلیت
تدریس طراحی وب
برای اطلاعات بیشتر تماس بگیرید
تاو
شماره تماس: 09125773990
09371410986
بيست الکترونیک
TargetLearning@gmail.com
صفحه 2:
Web Design Training
Template Designing
Part 08
Author :Babak Tavatav
صفحه 3:
CSS float Property
The 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 Values
ValueDescription
left : The image or text moves to the left in the parent element
right : The image or text moves to the right in the parent element
None : (Default) The image or the text will be displayed just where it
occurs in the text
صفحه 4:
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
صفحه 5:
<body>
<p>lIn 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>
صفحه 6:
‘nthe paragraph below, we have added an mage wits stile floatright The resus that the
‘mage wl ob to she neh nthe paragraph
‘Toisis seme test This ie some test. This is some text This some text This
fs some tel, Tus is some eat Ths is some leat. Ts i some ted, Tas ق 29 7
some tet.‘ some tet This ome tas This 8 some txt. Phi 8
some tex This is some texe This some text This is ome rot This is |
sovue fest. This is sonar tet This some text: Tiss some text. This is
some tet Thi 8 some test This 8 somo txt This sone tt Thi some tat Thi
ote text This is some text This is sone tee This is some toe Thi is some tt
صفحه 7:
thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
صفحه 8:
<img class="thumbnail" src="klematis_small.jpg" width="107"
height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107"
height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116"
height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120"
height="90">
<img class="thumbnail" src="klematis_small.jpg" width="107"
height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107"
height="80">
humbnail" src="klematis3_small.jpg" width="116"
‘90">
<img class="thumbnail" src="klematis4_small.jpg" width="120"
height="90">
صفحه 9:
صفحه 10:
CSS Clear Property
Image and text elements that appear in another element
are called
floating elements.
The clear property sets the sides of an element where other
floating
elements 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
صفحه 11:
۲۲۲۱
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet"
type="text/css" />
</head>
صفحه 12:
<body>
<div>
<div id="wrapper">
<div id="header">
<div id="Header-Menu">
خوش آمدید ! > hrefa"#Y >a - ورود به سایت
au</a>
YS ae 23 p | ها weSi |S V+
Jse | Ub siSa | تماس با ما
<br />
</div>
<div i Header-Logo"></div>
<%-- <div id="Header-Welcome" >2455 ! > ۳۲۳۵۲2۲۲ ورود<
pl ul. a</a></div>--%>
</div>
صفحه 13:
<div id="main">
<div id="navi">
<div id="navi-left"></div>
<div id="navi-center"><div
id="navi-right"></div></div>
</div>
<div id="slideshow">
</div>
<div id="mainmenu">
<div i menu-header"></div>
<div id="menu-content"></div>
</div>
صفحه 14:
<div id="row0a">
<div id="row04-left" >
tL" ></div>
t2"></div>
1B"></div>
right">
dv01"> </div>
\dv02"> </div>
\dv03"> </div>
صفحه 15:
<div id="clearer"></div>
</div>
> 0۱۷ 102۳۲00167۲ تمامی‌حقوق‌لین‌سایتبه سبد کال<
Cul Lge </div>
</div>
</div>
</body>
</html>
صفحه 16:
-CSS
body
{
margin-right: 3%;
margin-left: 3%;
صفحه 17:
#wrapper {
width:900px;
margin:0 auto;
}
صفحه 18:
#Header-Logo
{
width: 275px;
float: right;
padding: 10px;
background-image: url(
Images/Logo.jpg );
height: 70px;
background-repeat: no-repeat;
صفحه 19:
1
margin:0;
padding:0;
border:0;
}
صفحه 20:
#header
{
background-color: #eee;
background-image:
url(image/bg_menu.jpg);
height: 80px;
padding-bottom: 10px;
padding-left: 10px;
background-repeat: no-repeat;
صفحه 21:
#Header-Menu
width: 580px;
float: left;
padding: Opx Opx Opx Opx;
font-family:tahoma; font-size:11px;
صفحه 22:
#main
{
background-repeat: repeat-y;
background-color: #FFFFFF;
width: 887px;
صفحه 23:
#navi-left
{
width: 194px;
float: left;
color: #fff;
background- image: url(
‘Images/bar_sabad.jpg' );
background-repeat: no-repeat;
height: 60px;
صفحه 24:
#navi-center
{
margin-left: 194px;
margin-right:572px;
background-image: url(
‘Images/bar_supprt.jpg' );
background-repeat: no-repeat;
width: 698px;
height: 60px;
صفحه 25:
#navi-right
width: 580px;
height: 60px;
float: right;
background-image: url(
‘Images/bar_bg.jpg' )
۷
صفحه 26:
clear: both;
padding-top: 10px;
width: 887px;
صفحه 27:
#slideshow
width:670px;
float: left;
background-image: url(
‘Images/Store_Slice_19.jpg' );
color: #fff;
height: 271px;
}
صفحه 28:
#mainmenu
{
width: 200px;
margin-left:670px;
صفحه 29:
#menu-header
{
background-image: url(
‘Images/menu_top.jpg' );
background-repeat: no-repeat;
width: 215px;
height: 37px;
صفحه 30:
#menu-content
{
background-image:
'Images/menu_bg.jpg' ); )اانا
height: 234px;
width: 215px;
صفحه 31:
#row04"
{
clear: both;
width: 847px;}
#row04-left
{ width:240px;
float: left;
}
صفحه 32:
#1
{
background-image: url(
‘Images/tabliql.jpg' );
width: 240px;
height: 152px;
background-repeat: no-repeat;
صفحه 33:
#t2
{
background-image: url(
‘Images/tabliq2.jpg' );
width: 240px;
height: 153px;
background-repeat: no-repeat;
صفحه 34:
#t3
{
background-image: url(
‘Images/tabliq3.jpg' );
width: 240px;
height: 201px;
background-repeat: no-repeat;
1
#row04-right
{
width: 660px;
margin-left:240px; }
صفحه 35:
background-image: url(_'Images/Store_Slice_38.jpg' );
width: 650px;
height: 194px;
background-image: url(_'Images/Store_Slice_38.jpg' );
width: 650px;
height: 194px;
background-image: url(_'Images/Store_Slice_38.jpg' );
width: 650px;
height: 194px;
#adv0l
#adv03
صفحه 36:
# clearer
clear:both;
}
#footer
{
padding: 10px;
font-size: 11px;
text-align: center;
صفحه 37:
The End