آموزش طراحی وب سایت (طراحی یک تمپلیت)
اسلاید 1: آموزش طراحی وب سایت جلسه هشتم – طراحی یک تمپلیتتدریس طراحی وب برای اطلاعات بیشتر تماس بگیریدتاو شماره تماس: 09125773990 09371410986 پست الکترونیک : TargetLearning@gmail.com
اسلاید 2: Web Design Training Template DesigningPart 08Author :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 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
اسلاید 4: <html><head><style type=text/css>img {float:right;}</style></head>
اسلاید 5: <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>
اسلاید 6:
اسلاید 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><img class=thumbnail src=klematis3_small.jpg width=116 height=90><img class=thumbnail src=klematis4_small.jpg width=120 height=90>
اسلاید 9:
اسلاید 10: 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.ValueDescriptionLeft : No floating elements allowed on the left sideRight: No floating elements allowed on the right sideBoth: No floating elements allowed on either the left or the right sideNone : Default. Allows floating elements on both sides
اسلاید 11: .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>
اسلاید 12: <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>
اسلاید 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=row03> <div id=slideshow> </div> <div id=mainmenu> <div id=menu-header></div> <div id=menu-content></div> </div>
اسلاید 14: <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>
اسلاید 15: <div id=clearer></div> </div> <div id=footer>تمامی حقوق این سایت به سبد کالا مربوط است </div></div> </div></body></html>
اسلاید 16: .cssbody{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: * { 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: 0px 0px 0px 0px;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: /*----------Menu & Slideshow --------------*/ #row03{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: url( Images/menu_bg.jpg );height: 234px;width: 215px;}
اسلاید 31: /*----------Row 04 --------------*/ #row04{clear: both;width: 847px;}#row04-left{width:240px; float: left;}
اسلاید 32: #t1{background-image: url( Images/tabliq1.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;}#row04-right{width: 660px;margin-left:240px;}
اسلاید 35: #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;}
اسلاید 36: # clearer { clear:both;}#footer{padding: 10px;font-size: 11px;text-align: center;}
اسلاید 37: The End
نقد و بررسی ها
هیچ نظری برای این پاورپوینت نوشته نشده است.