web basic 9

1,694 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,694
On SlideShare
0
From Embeds
0
Number of Embeds
548
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

web basic 9

  1. 1. LOGO ВЭБИЙН ҮНДЭС Багш: Г.Өсөхжаргал
  2. 2. Div тагийн тухай Анх html хэл дээр вебсайт бүтээхэд Frame болон Table ашиглах хоѐрхон л сонголт байсан. Div таг нь 3 дахь боломжийг бий болгож чадсан бөгөөд дотроо html хэлний бараг бүх төрлийн шинж чанаруудыг өөртөө агуулж ажиллаж чаддаг. Div тагийг ихэвчлэн CSS-тэй хослуулан ашиглах нь тохиромжтой байдаг. Вэб хуудасны байршлын загварыг HTML Table элементээр хийж болох ч CSS ашиглан үүнийг шийдэх нь илүү хялбар, бас вэб хөтөч хурдтай зурдаг давуу талтай
  3. 3. Div тагийн шинж чанарууд  Class  Css код доторх .(цэг) тэмдгээр эхэлсэн шинжийг заана.  Өөр өөр элэментүүдэд ашиглагдаж болох ба CSS-тэй хамт хэрэглэгдэнэ.  Id  Css код доторх # тэмдгээр эхэлсэн шинжийг заана  элементүүдийн атрибутын утга давхардах ѐсгүй  Style  Элэментийн CSS загварыг бичиж болно.  Title  Гарчиг буюу, хулганы заагчаар очиход гарч ирэх текстийг бичнэ.  align  Байршил заахад хэрэглэх боломжтой
  4. 4. CSS дэх div тагийн шинж чанаруудыг ажиллуулахIdselector- id- г зөвхөн ганц элемент л ашиглах боломжтой байдаг. Хуудасны header, footer, үндсэн цэс зэрэг нь ганц байхад л хангалттай байдаг учир эдгээрийн харагдах байдлыг тодорхойлохдоо id ашиглах нь тохиромжтой.Бичигдэх хэлбэр: #нэр{property:value} id– зарлахдаа # тэмдгээр эхлүүлнэ. Жишээ нь:#header{color:yellow;}HTML-д ашиглах <div id=“header”>Энэ бол header хэсэг</div>
  5. 5. Хуваалт хийхдээ анхаарах зүйлсВэб хуудасны төсөөллийн (conceptual) байршлын загварыг цаасан дээр зурж нэрлэнэ.Байршлын загварыг боловсруулахад эхлээд хуудасны ерөнхий хуваалтыг зурна, дараа нь хуваалт бүрт нэр оноож  харьцангуй (relative) болон  тогтмол (absolute) хэмжээг хуваалт бүрт зааж өгнө.
  6. 6. Хуудасны бүтцийг зурсан жишээ
  7. 7. Жишээ 1 – Дараах кодыг хуудасны body дотроо бичнэ<html><head><title>CSS ашигласан жишээ</title><link rel="stylesheet" type="text/css" href="css.css" /></head> <body><div id="container"> <div id="topbar">Хуудасны Толгой, Гарчигийн хэсэг</div> <div id="navbar"> <a href=“main.html">Цэснүүд</a> <a href=“about.html">Цэснүүд</a> <a href=“contact.html">Цэснүүд</a> </div> <div id="main"> <div id="column_left"> <h1>Гарчиг</h1>
  8. 8. <h2>12 арванхоёрдугаар сар 2011</h2><p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p><p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p><p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p><p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p><p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p> </div> <div id="column_right"> <h3>Сайтын Ангилал</h3> Энд хуудасны холбоосуудыг хийж өгөхөд тохиромжтой </div> <div id="column_right_adsense"> <h3>Сурталчилгаа, зарлал</h3> Зарлал хийхэд тохиромжтой байрлал </div> <div class="spacer"></div></div> <div id="footer">© 2010 Улаанбаатар Дээд Сургууль</div></div> </body> </html>
  9. 9. Вэб байршлын загварын CSS шинжүүдийг дараах жагсаалтаар харуулав./* ------ Хуудасны хуваалт ------ */#container{width:780px; margin:0 auto;}#topbar{width:auto; display:block; height:60px;}#navbar{width:auto; display:block; height:28px;}#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;}#main{width:auto; display:block; padding:10px 0;}#column_left{width:460px; margin-right:20px; float:left;}#column_right{width:160px; margin-right:20px; float:left;}#column_right_adsense{width:120px; float:left;}.spacer{clear:both; height:10px; display:block;} //класс зарласан байна#footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}
  10. 10. Жишээ 1 Хуудасны үр дүн
  11. 11. <div> таг дотор байршил зааж өгч болно <div align="left">Текст</div> <div align="center">Текст</div> <div align="right">Текст</div>
  12. 12. Дотоод css ашиглан хуудас хууваасан байдал Жишээ 2<html> <head><title>CSS ашиглан хуваалт хийсэн #header { text-align: center ; жишээ</title> <style> height:100px; border: 1px solid gray; }body { font-family:tahoma; </style></head> font-size:0.8cm; } <body id=“container”>#container { width: 800px ; <div id="layout">margin-left: auto ; margin-right: <div id="header">Top auto; } Header</div>#content { margin-left:200px; <div id="navbar"> Navigation</div> height:300px; padding: 4px ; <div id="content"> Content border: 1px solid gray; } here</div>#navbar { float: left; width: 198px; <div id="footer"> Bottom Footer</div>height:308px; border: 1px solid </div> gray; } </body></html>#footer { clear: both ; border: 1px solid gray; }
  13. 13. Жишээ 2 - Үр дүн
  14. 14. Жишээ 3 – Хуудсыг 4 хэсэгт хуваах<html> <head> <title>4 хуваалт</title><style type="text/css" >body {width: 100%;height: 100%;padding: 0px;margin: 0px;}html {width: 100%;height: 100%;padding: 0px;margin: 0px;}#col1 {float: left;width: 50%;height: 100%;padding: 0px;margin: 0px;}#col2 {float: right;width: 50%;height: 100%;padding: 0px;margin: 0px;}#rect1 {background-color: #666666;width: 100%;height: 50%; padding: 0px;margin: 0px;}#rect2 {background-color: #999999;width: 100%;height: 50%; padding: 0px;margin: 0px;}#rect3 {background-color: #999999;width: 100%;height: 50%; padding: 0px;margin: 0px;}#rect4 {background-color: #666666;width: 100%;height: 50%; padding: 0px;margin: 0px;}</style> </head>
  15. 15. <body> <div id="col1"> <div id="rect1">rect1</div> <div id="rect3">rect3</div></div> <div id="col2"> <div id="rect2">rect2</div> <div id="rect4">rect4</div></div></body> </html>
  16. 16. Үр Дүн
  17. 17. Жишээ 4*{margin: 0; padding: 0;}body {padding-top: 50px;}#container {margin: 0 auto; background-color: #cecece;}#container h1 {background-color: #aaa; color: #000; text-align: center;}#left {float: left; width: 20%; padding: 5px 5px 5px 5px; background- color: #cccccc;}#center {float: left; width: 55%; padding: 5px 5px 5px 5px; background-color: #eeeeee; }#right {float: left; width: 20%; padding: 5px 5px 5px 5px; background-color: #cccccc;}.clear {clear: both; text-align: center; font-size: 12px; color: #000000;}
  18. 18. <html><head><title>Жишээ 4</title><link href="ex5.css" rel="stylesheet" type="text/css" /></head> <body><div id="container"><h1>Веб хуудасны гарчиг</h1><div id="left"> <p>Зүүн тал</p> </div><div id="center" align="center"><p>Голын хэсэг</p> <p>Голын хэсэг</p> <p>Голын хэсэг</p><p>Голын хэсэг</p> <p>Голын хэсэг</p> <p>Голын хэсэг</p> </div> <div id="right"> <p>Баруун тал</p> </div> <p class="clear">хуудасны доод тал</p></div></body></html>
  19. 19. Div – тагийн CSS дотор бичигдэхбайрлалын зарим шинжүүд #div {position:static}-хэвийн байдлаар харагдана #div {position:relative}-хэмжээг нь өгч дээш доош, баруун зүүн тийш байрлуулах #div {position:absolute}-дурын байрлалд байрлуулна #div {float:left}-баруун зүүн голд байрлуулна #div {clear:both}-шинэ мөрөнд гаргана

×