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

آموزش طراحی وب سایتجلسه هشتم – طراحی یک تمپلیت تدریس طراحی وببرای اطلاعات بیشتر تماس بگیرید تاوشماره تماس: 0912577399009371410986پست الکترونیک : TargetLearning@gmail.com

Web Design TrainingTemplate Designing Part 08 Author :Babak Tavatav

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

<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; }

<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"> <img class="thumbnail" src="klematis3_small.jpg" width="116" height="90"> <img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">

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

.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> درباره سبد کالا | آگهی ها | سوالات متداول | همکاری با ما | تماس با ما <br /> </div> <div id="Header-Logo"></div> <%-- <div id="Header-Welcome" >خوش آمدید ! <a href="#">ورود به سایت - ثبت نام</a></div>--%> </div>

<div id="main"> <div id="navi"> <div id="navi-left"></div> <div id="navi-center"><div id="navi-right"></div></div> </div> <div id="row03"> <div id="slideshow"> </div> <div id="mainmenu"> <div id="menu-header"></div> <div id="menu-content"></div> </div>

<div id="row04"> <div id="row04-left" > <div id="t1"></div> <div id="t2"></div> <div id="t3"></div> </div> <div id="row04-right"> <div id="adv01"></div> <div id="adv02"></div> <div id="adv03"></div> </div> </div> </div> </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 0px0px0px; 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 { background-image: url( 'Images/Store_Slice_38.jpg' ); width: 650px; height: 194px; } #adv03 { background-image: url( 'Images/Store_Slice_38.jpg' ); width: 650px; height: 194px; }

# clearer { clear:both; } #footer { padding: 10px; font-size: 11px; text-align: center; }

The End

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

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

Presentation Transcript