ບົດທີ່ 5 ການສ້າງ layout ດ້ວຍ div tag

ໂດຍ: ອຈ ໃຈລາສ ຍພນໄຊ Web Design and Development Computer Science Department

ບດທ 5 ການສາງ Layout ດວຍ CSS(Cascading Style Sheet)

ເມ ອກອນການທຈະຈດຕາແໜງຮບພາບ, ຈດຕາແໜງຕວອກສອນ ຫ ຈດວາງອງປະກອບຕາງໆທໃຊໃນການສາງໜາ Webpage ແມນຈະໃຊຕາຕະລາງແຕເມ ອເທກນກ ແລະ ເທກໂນໂລຍສາລບສາງ Webpage ໄດມການພດທະນາ, ສະນ ນການໃຊຕາຕະລາງພຽງຢາງດຽວໃນການຈດອງປະກອບຕາງໆຂອງໜາ Webpage ແມນບພຽງພ. ດວຍເຫດນຈ ງໄດມການນາໃຊເທກນກຂອງການການດຮບແບບທເອນວາ CSS(Cascading Style Sheet)ເຂາມາຊວຍ, ແຕກ ບໄດໝາຍຄວາມວາ ຕາຕະລາງຈະໃຊການບໄດມນຍງໃຊໄດດໃນກລະນທເໝາະສມເຊນ: ການສະແດງຜນຂອງຂມນຈາກຖານຂມນ, ການອອກແບບໜາ Form ໂດຍໃຊໂຄງສາງຂອງຕາຕະລາງ ເປນຕ ນ.

5.1. ຄວາມແຕກຕາງລະຫວາງ CSS ແລະ ຕາຕະລາງໃນການຈດອງປະກອບ

ຕໄປນຈະຍກຕວຢາງບາງອນທຈະສະແດງໃຫເຫນວາ CSS ສາມາດນາມາໃຊແກໄຂບນດາຂຈາກດຕາງຕາງຂອງຕາຕະລາງໄດ

1. ເມ ອ Webpage ສະແດງຜນບກງກບທອອກແບບເຊນ: ເມ ອສາງຕາງຕະລາງທມຂະໜາດ 500 pixels ແລວມການເອາຮບທມຂະໜາດ 1000 pixels ເຂາມາໃສໃນຕາຕະລາງກຈະເຮດໃຫຕາຕະລາງມການປຽນແປງຂະໜາດໃຫຍໄປຕາມຮບໂດຍອດຕະໂນມດດ ງຮບ 5.1

ຮບ 5.1 ການປຽນແປງຂອງຕາຕະລາງເມ ອເອາຮບທມຂະໜາດໃຫຍກວາຕາຕະລາງມາໃສ

2. ການສະແດງຜນຂອງ Webpage ໃນແຕລະ Browser ບຄກນເຊນ: ເປດ Webpage ດຽວກນໃນ Internet Explorer ກບ Firefox ຈະແຕກຕາງກນ

ບນຫາຕາງໆ ທກາວມາຂາງເທງຈະຖກແກໄຂໄດດວຍການໃຊ CSS. 5.2 ສາງຄວາມເຂາໃຈກຽວກບ Layout

ເມ ອເວາເຖງ Layout ໃຫຈນຕະນາການເຖງກະດານຂາວຫກະດານສາລບຕດເຈຍ Note

ທມເຈຍຕດໄວຢຫາຍໆແຜນທງແຜນນອຍແຜນໃຫຍ ແລະມສສນແຕກຕາງກນດ ງຮບ 5.1

ຕາຕະລາງທມຄວາມກວາງ 500

51


ຮບ 5.1 ກະດານທເຕມໄດເຈຍ Noteທພບເຫນຕວຈງ ເມ ອປຽບທຽບແລວກະດານຂະໜາດໃຫຍກຄໜາ Webpage ທວາງເປາທຕອງການໃຫມ

ເນອໃນມາຕດໃສ, ຖາເປນ HTML ກະດານກຈະເປນ Body ແທກ, ສວນເຈຍ Note ທນາມາຕດໃສກະດານປຽບໄດກບສວນຕາງໆຂອງ Webpage ຄ: ເນອໃນ, ພາບປະກອບ, Hyperlink ນ ນເອງ. ເວາໄດວາຂມນທຕອງການໃຫສະແດງຜນທງໝດຈະຢໃນເຈຍທນາມາຕດຖາປຽບທຽບໃສ HTML ເຈຍກແມນ Tag ຕາງໆ ຂອງ HTML ເຊນ: <div>, <h>,

<ul>…

ຮບ 5.2 ປຽບທຽບ Layout ໃນ HTML

<body> <div>

</div>

</div> </div>

<div> <div>

ເນອໃນ / ຮບພາບ / Hyperlink ເມນ

</body>

ໂລໂກ ຫ Banner

52


5.3. ການສາງໂຄງສາງຂອງໜາຂອງ Webpage (Layout) ດວຍ CSS

5.3.1. ອອກແບບ Mockup ໃຫສາເລດກອນສາງໂຄງສາງ ປກກະຕແລວກອນຈະສາງ Layout ຂອງ Webpage ຕອງສາງ Mockup ໃຫ

ສາເລດເສຍກອນເພອຈະເຮດໃຫການສາງໜາ Webpage ຖກສາງຂນຢາງມແບບແຜນທແນນອນ. ດວຍເຫດນ, ຈງຂຍກ Layout ຂອງ Webpage ດ ງຮບ 5.3 ເພອເປນຕວຢາງໃນການສາງ ແລະ ເພອໃຫເຂາໃຈຂ ນຕອນຂອງການສາງ Layout ໄດງາຍຂນ.

ຮບ 5.3 Mockup ທໃຊໃນການສາງ Layout

ຈາກຮບເຫນວາມການແບງສວນຕາງໆຂອງໜາ Webpage ອອກເປນ 6 ສວນຄ:

1. ສວນໂລໂກ ຫ Banner ຂອງເວບໄຊ 2. ສວນເມນສາລບ Link ໄປຫາໜາອ ນດານເທງ 3. ສວນເມນສາລບ Link ໄປຫາໜາອ ນດານຂາງ 4. ສວນເນອໃນຂອງເວບໄຊ 5. ສວນຂອງໂຄງສະນາ 6. ສວນ Footer ສວນໃຫຍແມນມລະບຊ ເຈາຂອງ Web ແລະ ຂມນການຕດຕ

53


ໝາຍເຫດ: ການອອກແບບໂຄງສາງຫກຂອງ Webpage ມຄວາມຈາເປນຫາຍເພາະການອອກແບບຕາແໜງການຈດວາງອງປະກອບຕາງໆຂອງ Webpage ໄວກອນຈະເຮດໃຫການໃຊພນທໃນໜາ Webpage ມປະສດທພາບສງ

5.3.2. ລງມສາງ Layout ດວຍ CSS

ຫງຈາກທສາງ Mockup ເປນທຮຽນຮອຍແລວຕໄປແມນການລງມສາງ Layout ໃນ Dreamweaver ໂດຍມຂ ນຕອນດ ງຕໄປນ:

1. ສາງໜາ Webpage ໃໝຂນມາຈາກນ ນທ Insert Palette ໃຫເລອກ Layout ແລວເລອກ Insert Div Tag ດ ງຮບ 5.4

ຮບ 5.3 ເລອກເຄ ອງມ Insert Div Tag

2. ຈະປະກດໜາ Insert Div Tag ດ ງຮບ 5.4 > ທຫອງ Insert ໃຫເລອກເປນ At insert point ເປນການສາງ Div tag ທຈດເລມຕ ນຂອງຕວກະພບທວາງໄວ.

ສວນ Class ແລະ ID ເປນການການດຊ ໃຫກບ CSS ທຈະໃຊໃນການຄວບຄມແຕສ ງທຕາງກນຄ: ສາມາດເອນໃຊໄດພຽງຄ ງດຽວໃນ 1 ໜາ Webpage ສວນ Class ສາມາດເອນໃຊໄດຫາຍຄ ງ ແລະອກຢາງໜງຖາສວນໃດທເປນ tag ສາຄນຂອງໜາ Webpage ຄວນໃຊ ID ຈງຈະບເຮດໃຫສບສນໃນການສາງ.

ສະນ ນໃຫຕ ງຊ ທຫອງ ID ເປນ container > ແລວກດ New CSS Rule

ຮບ 5.4 ໜາຕາງ Insert Div Tag

54


3. ເມ ອປະກດໜາຕາງຂອງ New CSS Rule ດ ງຮບ 5.5 ແລວກດ OK

ຮບ 5.5 ໜາຕາງ New CSS Rule

4. ເມ ອຄລກ OK ແລວກພບກບໜາຕາງ CSS Rule definition for

#container ດ ງຮບ 5.6

ຮບ 5.6 ໜາຕາງ Box ຂອງ CSS Rule definition for #container

ໃນໜາຕາງນທ Category ໃຫເລອກ Box ສວນດານຂວາມແມນໃຫເອາເຄ ອງ

ໝາຍ ຢທ Margin ອອກ, ຈາກນ ນທຫອງ Right ແລະ Left ໃຫການດເປນ auto

55


5. ຈາກນ ນໃນໜາຕາງນທ Category ໃຫເລອກ Border ທ Top ໃຫເລອກ Solid ແລະ ການດຄາເປນ 0 ໃຫກບຄາຄວາມກວາງຂອງເສນ(Width) > ກດ OK

ຮບ 5.7 ໜາຕາງ Border ຂອງ CSS Rule definition for #container

ຈະພບກບໜາຕາງ Insert Div Tag ຄກບກບຮບ 5.4 ອກຄ ງ, ໃຫກດ OK ແລວຈະກບມາໜາຕາງ Design view ຂອງ Dreamweaver ອກຄ ງແຕຈະເຫນ Div tag ປະກດຂນໂດຍມຊ ຂອງ Container ແລະລະບບອກວາ CSS ນຖກການດຊ

ເປນແບບ ID ດ ງຮບ 5.8

ຮບ 5.8 ໜາ Webpage ເມ ອມການເພມ Div tag ທມ id ຊ container

ມາຮອດນຖາກດເບ ງ Code View ກຈະເຫນ CSS ທຖກສາງຂນດ ງຮບ 5.9

ໂດຍທສງເກດເຫນບນດາ CSS ຕາງໆທໄດການດໄວບວາຈະເປນ Magin ແລະ Border, ເມ ອສງເກດທ <body> ກຈະເຫນ <div id="container"> Content for id

"container" Goes Here</div> ເປນການສາງ <div> ທໃຊຄນລກສະນະຂອງ id ຊ

Container

56


ຮບ 5.9 ເມ ອເປດເບ ງ Code view ຈະເຫນ CSS ທຖກສາງຂນ

6. ກບໄປທໜາ Design view ແລວລບຄາວາ Content for id "container"

Goes Here ຢໃນ div tag ອອກໃຫເຫອພຽງຕວກະພບດ ງຮບ 5.10 ເພອທຈະເພມ Div tag ຕວໃໝເຂາໄປ

ຮບ 5.10 ຫງຈາກລບຂຄວາມອອກ

7. ໃຫວາງຕວກະພບ(Cursor) ໄວໃນ Div tag ທຫາກສາງຂນແລວເລອກ

Insert Div Tag ຈາກ Layout Palette ຄກນກບ ຮບ 5.3 ແລວຈະປະກດໜາຕາງ Insert Div Tag ຂນມາດ ງຮບ 5.11, ໃນຂ ນຕອນນທ Insert ໃຫເລອກ After start

tag ແລະເລອກ <div id=”Container”> ແລວທຫອງ ID ພມ Header ໃສເພອທຈະສາງ CSS ໃໝສາລບ tag div ໃນສວນຂອງ Header > ຈາກນ ນກກດ New CSS

Rule

57


ຮບ 5.11 ໜາຕາງ Insert Div Tag ສາລບສວນ Header

ຫງຈາກຄລກທປມ New CSS Rule ແລວກຈະປະກດໜາຕາງ New CSS

Rule ດ ງຮບ 5.12 ແລວຄລກ OK

ຮບ 5.12 ໜາຕາງ New CSS Rule ສາລບ #Header

ເມ ອຄລກ OK ແລວຈະພບກບໜາ CSS Rule definition for #Header

ດ ງຮບ 5.13 ໃນໜາຕາງນທ Category ໃຫເລອກ Box ແລວການດຄາຄວາມກວາງ (Width) ເທາກບ 800 px ສວນຄວາມສງ (Height)ໃກການດຕາມຄາຄວາມສງຂອງ Banner ທອອກແບບໄວໂດຍການດຄາເທາກບ 150 px, ສວນດານຂວາມແມນໃຫເອາເຄ ອງໝາຍ ຢທ Margin ອອກຈາກນ ນທຫອງ Right ແລະ Left ໃຫການດເປນ auto

58


ຮບ 5.13 ໜາຕາງ Box ຂອງ CSS Rule definition for #Header

8. ຈາກນ ນປະຕບດຄກບຂ ນຕອນທ 5 ອກຄ ງ, ຈະພບກບໜາຕາງ Insert

Div Tag ຄາຍຄກບກບຮບ 5.4, ໃຫກດ OK ແລວຈະກບມາໜາຕາງ Design view

ທປະກດມ Div tag Header ເກດຂນດ ງຮບ 5.14

ຮບ 5.14 ພາຍຫງເພອ Div tag ທໃຊ CSS ທມ ID ຊ Header ເຂາໄປ

9. ຕໄປໃຫຄລກທ Layout Palette ແລວເລອກ Insert Div Tag ຄກນກບ ຮບ 5.3 ແລວຈະປະກດໜາຕາງ Insert Div Tag ຂນມາດ ງຮບ 5.12, ທ Insert

ໃຫເລອກ After tag ແລະເລອກ <div id=”Header”> ແລວທຫອງ ID ພມ Navbar

ໃສເພອທຈະສາງ CSS ໃໝສາລບ tag div ໃນສວນຂອງ Navigation Bar > ຈາກນ ນກກດ New CSS Rule

59


ຮບ 5.16 ໜາຕາງ Insert Div Tag ສາລບສວນ Navbar

10. ຫງຈາກຄລກທປມ New CSS Rule ແລວກຈະປະກດໜາຕາງ New

CSS Rule ຄາຍຄກນກບດ ງຮບ 5.12, ຕາງກນກພຽງແຕທຫອງ Choose or enter

a name for your selector. ທຕອງການດເປນ #Navbar ເທານ ນ > ແລວຄລກ OK

11. ເມ ອຄລກ OK ແລວຈະພບກບໜາ CSS Rule definition for #Navbar ດ ງຮບ 5.17 ໃນໜາຕາງນທ Category ໃຫເລອກ Box ແລວການດຄາຄວາມກວາງ (Width) ເທາກບ 800 px ສວນຄວາມສງ (Height) ຄາເທາກບ 35 px, ສວນດານຂວາມແມນໃຫເອາເຄ ອງໝາຍ ຢທ Margin ອອກຈາກນ ນທຫອງ Right ແລະ Left ໃຫການດເປນ auto.

ຮບ 5.17 ໜາຕາງ Box ຂອງ CSS Rule definition for #Navbar

60




ທປະກດມ Div tag Navbar ເກດຂນດ ງຮບ 5.18

ຮບ 5.18 ພາຍຫງເພອ Div tag ທໃຊ CSS ທມ ID ຊ Navbar ເຂາໄປ

13. ຕໄປໃຫຄລກທ Layout Palette ແລວເລອກ Insert Div Tag ຄກນກບ

ຮບ 5.3 ຈະປະກດໜາຕາງ Insert Div Tag ຂນມາດ ງຮບ 5.12, ທ Insert ໃຫເລອກ After tag ແລະເລອກ <div id=”Navbar”> ທຫອງ ID ພມ MainContent

ໃສເພອທຈະສາງ CSS ໃໝສາລບ tag div ໃນສວນຂອງເນອໃນຫກ(Main

content)ຂອງໜາ Webpage ດ ງຮບ 5.19 > ຈາກນ ນກກດ New CSS Rule

ຮບ 5.19 ໜາຕາງ Insert Div Tag ສາລບສວນ MainContent



a name for your selector. ທຕອງການດເປນ #MainContent ເທານ ນ > ແລວ ຄລກ OK

15. ເມ ອຄລກ OK ແລວຈະພບກບໜາ CSS Rule definition for #MainContent ດ ງຮບ 5.20 ໃນໜາຕາງນທ Category ໃຫເລອກ Box ແລວ

61


ການດຄາຄວາມກວາງ (Width) ເທາກບ 800 px ສວນຄວາມສງ (Height) ຕ ງຄາເປນ auto, ສວນດານຂວາມແມນໃຫເອາເຄ ອງໝາຍ ຢທ Margin ອອກຈາກນ ນທຫອງ Right ແລະ Left ໃຫການດເປນ auto.

ຮບ 5.20 ໜາຕາງ Box ຂອງ CSS Rule definition for #MainContent



ທປະກດມ Div tag MainContent ເກດຂນດ ງຮບ 5.21

ຮບ 5.21 ພາຍຫງເພອ Div tag ທໃຊ CSS ທມ ID ຊ MainContent ເຂາໄປ

17. ຕໄປໃຫຄລກທ Layout Palette ແລວເລອກ Insert Div Tag ຄກນກບ ຮບ 5.3 ຈະປະກດໜາຕາງ Insert Div Tag ຂນມາດ ງຮບ 5.12, ທ Insert ໃຫເລອກ After tag ແລະເລອກ <div id=” MainContent”> ທຫອງ ID ພມ Footer

ໃສເພອທຈະສາງ CSS ໃໝສາລບ tag div ໃນສວນຂອງສວນທາຍ(Footer)ຂອງໜາ Webpage ດ ງຮບ 5.22 > ຈາກນ ນກກດ New CSS Rule

62


ຮບ 5.22 ໜາຕາງ Insert Div Tag ສາລບສວນ Footer



a name for your selector. ທຕອງການດເປນ #Footer ເທານ ນ > ແລວ ຄລກ OK

19. ເມ ອຄລກ OK ແລວຈະພບກບໜາ CSS Rule definition for #Footer ດ ງຮບ 5.20 ໃນໜາຕາງນທ Category ໃຫເລອກ Box ແລວການດຄາຄວາມກວາງ (Width) ເທາກບ 800 px ສວນຄວາມສງ (Height) ຕ ງຄາເປນ 120, ສວນດານຂວາມແມນໃຫເອາເຄ ອງໝາຍ ຢທ Margin ອອກຈາກນ ນທຫອງ Right ແລະ Left ໃຫການດເປນ auto.

ຮບ 5.23 ໜາຕາງ Box ຂອງ CSS Rule definition for #Footer



ທປະກດມ Div tag Footer ເກດຂນດ ງຮບ 5.24

63


ຮບ 5.24 ພາຍຫງເພອ Div tag ທໃຊ CSS ທມ ID ຊ Footer ເຂາໄປ

21. ເພອທຈະແຊກ Menu ເຂາໃສດານຂາງຂອງໜາເວບຕໄປໃຫຄລກທ Layout Palette ແລວເລອກ Insert Div Tag ຄກນກບ ຮບ 5.3 ຈະປະກດໜາຕາງ Insert Div Tag ຂນມາດ ງຮບ 5.12, ທ Insert ໃຫເລອກ After start of tag ແລະເລອກ <div id=” MainContent”> ທຫອງ ID ພມ SideMenu ໃສເພອທຈະສາງ CSS ໃໝສາລບ tag div ໃນສວນຂອງລາຍການທາງດານຂາງ(Side Menu)ຂອງໜາ Webpage ດ ງຮບ 5.25 > ຈາກນ ນກກດ New CSS Rule

ຮບ 5.25 ໜາຕາງ Insert Div Tag ສາລບສວນ SideMenu



a name for your selector. ທຕອງການດເປນ #SideMenuເທານ ນ > ແລວ ຄລກ

OK

23. ເມ ອຄລກ OK ແລວຈະພບກບໜາ CSS Rule definition for #SideMenu ດ ງຮບ 5.20 ໃນໜາຕາງນທ Category ໃຫເລອກ Box ແລວການດຄາຄວາມກວາງ (Width) ເທາກບ 200 px ສວນຄວາມສງ (Height) ຕ ງ

64


ຄາເປນ 400 ເພອໃຫເຫນເປນສວນທແຕກຕາງ(ປກກະຕແລວຂະໜາດລວງສງຂອງ Menu ຈະການດເປນ auto), ສວນດານຂວາມການດໃຫ Float ເປນ Left

ແລະ ໃຫເອາເຄ ອງໝາຍ ຢທ Margin ອອກຈາກນ ນທຫອງ Right ແລະ Left ໃຫການດເປນ auto.

ຮບ 5.26 ໜາຕາງ Box ຂອງ CSS Rule definition for #SideMenu




ຮບ 5.27 ພາຍຫງເພອ Div tag ທໃຊ CSS ທມ ID ຊ SideMenu ເຂາໄປ

25. ເພອທຈະແຊກຫອງສາລບໂຄສະນາໄວດານຂວາມຂອງໜາເວບຕໄປໃຫຄລກທ Layout Palette ແລວເລອກ Insert Div Tag ຄກນກບ ຮບ 5.3 ຈະ

65


ປະກດໜາຕາງ Insert Div Tag ຂນມາດ ງຮບ 5.12, ທ Insert ໃຫເລອກ After

tag ແລະເລອກ <div id=” SideMenu”> ທຫອງ ID ພມ Advertise ໃສເພອທຈະສາງ CSS ໃໝສາລບ tag div ໃນສວນຂອງໂຄສະນາຂອງໜາ Webpage ດ ງຮບ 5.28 > ຈາກນ ນກກດ New CSS Rule

ຮບ 5.28 ໜາຕາງ Insert Div Tag ສາລບສວນ Adertise

26. ເມ ອຄລກ OK ແລວຈະພບກບໜາ CSS Rule definition for #SideMenu ດ ງຮບ 5.20 ໃນໜາຕາງນທ Category ໃຫເລອກ Box ແລວການດຄາຄວາມກວາງ (Width) ເທາກບ 200 px ສວນຄວາມສງ (Height) ຕ ງຄາເປນ 400 ເພອໃຫເຫນເປນສວນທແຕກຕາງ(ປກກະຕແລວຂະໜາດລວງສງຂອງ Menu ຈະການດເປນ auto), ສວນດານຂວາມການດໃຫ Float ເປນ Right ແລະ ໃຫເອາເຄ ອງໝາຍ ຢທ Margin ອອກຈາກນ ນທຫອງ Right ແລະ Left ໃຫການດເປນ auto.ດ ງຮບ 5.29

ຮບ 5.29 ໜາຕາງ Box ຂອງ CSS Rule definition for #Advertise

66





ຮບ 5.30 ພາຍຫງເພອ Div tag ທໃຊ CSS ທມ ID ຊ Advertise ເຂາໄປ

28. ຈາກຮບຍງເຫນຫວາ ໂຄງສາງຂອງໜາ Webpage ຍງບເປນໄປຕາທອອກແບບໄວ, ມາຮອດຂ ນຕອນນຈະສງເກດເຫນວາບນດາ CSS Rule ທໄດສາງຂນໄດໄປປະກດຢດານຂວາມຂອງໜາຈຢທ CSS Style ດ ງຮບ 5.31 ໃຫ Double ຄລກໃສ #Footer ເພອກບເຂາໄປແກໄຂ

ຮບ 5.31 ສະແດງໃຫເຫນບນດາ CSS Rule ທຖກສາງຂນ

67


29. ແລວຈະພບກບໜາ CSS Rule definition for #Footer ດ ງຮບ 5.32 ແລວເຂາໄປປບຄາ Clear ໃຫເປນ both ແລວຄລກ OK

ຮບ 5.32 ໜາຕາງ CSS Rule definition for #Footer ຖກເອນຂນມາແກໄຂ

30. ສດທາຍກຈະໄດຜນລບດ ງຮບ 5.33 ຕາມທໄດອອກແບບໄວ

ຮບ 5.33 ໜາ Layout ຂອງ Webpage ຕາມທໄດອອກແບບໄວ

68