Сүүлийн хоёр жилийн хугацаанд үйлчлүүлэгч (үүд)-ээс миний сонссон зүйл бол тэр одоо байгаа сайтынхаа дизайны байршлыг блок ашиглан гаргахыг хүсч байгаа явдал юм. Тэдгээр. Түүнд DIV болон CSS дээр бүтээгдсэн блок зохион байгуулалт хэрэгтэй. Гэхдээ энэ код үнэхээр тийм сайн уу?Би энэ талаар нэлээд удаан бодож байна. Би өөр өөр сайтуудыг үүсгэх шаардлагатай болсон бөгөөд тэдгээрийн ихэнх нь хүснэгт, блок эсвэл ашиглан байрлуулсан байв гурав дахь сонголтблок, хүснэгт.

Миний бодлоор, блокийн байршлын давуу тал нь хүснэгтийн зохион байгуулалтаас илэрхий бөгөөд эдгээр нь:

• жижиг HTML хэмжээхүснэгттэй харьцуулахад код
• блокуудын үндсэн параметрүүд болон шинж чанарууд нь тусдаа CSS файлд хадгалагддаг бөгөөд энэ нь хөтчөөр төгс хадгалагддаг бөгөөд байнга ачаалах шаардлагагүй байдаг.
• үндсэн агуулгыг хуудасны хамгийн дээд хэсэгт (код дотор) байрлуулах чадвар, гэхдээ үүнийг аль ч цэг дээр, бүр доод хэсэгт нь харуулах боломжтой. зүгээр л блокт тохирох параметрүүдийг тохируулах замаар.

Гэхдээ эдгээр мэт санагдах давуу талуудын зэрэгцээ блокуудыг байрлуулах үйл явц, түүнийг дэлгэц дээр харуулахтай холбоотой хэд хэдэн асуудал, сул талууд байдаг. өөр өөр хөтөч(Ялангуяа асуудал үүсдэг Internet Explorer 6).

Гол сул талуудҮүнд та бас анхаарах ёстой:

• Бүх хөтчүүдэд зөв ажилладаг код бичих, хуудсыг дараа нь зөв харуулахын тулд хүснэгтийн байршлыг ашиглахаас хамаагүй их цаг зарцуулдаг.
• Заримдаа бичсэн код нь бодож байснаас хамаагүй том болж хувирдаг бөгөөд энэ нь янз бүрийн тохируулга, тохируулга, хакердах эсвэл тусдаа хөтчүүдэд зориулж нэмэлт бичсэн хэв маягийн үр дүнд тохиолддог.
• Ихэнхдээ та JavaScript эсвэл jQuery гэх мэт санг ашиглах хэрэгтэй болдог бөгөөд энэ нь бас нөлөөлдөг хамгийн сайн аргаарсайтын хувьд бүхэлд нь. Хэрэв хэрэглэгчийн хөтөч JS-ийн ажиллагааг дэмждэггүй эсвэл энэ функц идэвхгүй бол хуудас зөв харагдахгүй байж магадгүй.
• Дахин хэлэхэд IE6 гэх мэт асуудалтай хөтчийн талаар. Блокийн зохион байгуулалтад хөвөх байршлын параметрийг (зүүн эсвэл баруун) ихэвчлэн ашигладаг бөгөөд хуудасны (хөтчийн цонх) хэмжээг өөрчлөх үед блокууд үсэрч, бие биенийхээ доор мөлхөж эхэлдэг. IE Tester (6) дээр бүх зүйл хэвийн ажиллаж байх үед IE6-д тасралтгүй алдаа гарч байсныг анзаарсан.
• Арын дэвсгэрийг будах эсвэл тохируулахын тулд нэмэлт зураг ашиглах нь ердийн зүйл биш юм. Жишээлбэл, навигацийн блокыг хуудасны бүх өндрөөр хөл хэсэг хүртэл сунгах боломжгүй үед хуурамч багана зурах аргыг ашигладаг - Хуурамч багана
• Түүнчлэн, ийм ажлын өртөг нь хүснэгтийн төлөвлөлтийн зардлаас их байдаг.

Эцсийн үр дүн, түүнд зарцуулсан цаг хугацаа нь ихэвчлэн зөвтгөгддөггүй. Тиймээс, хэрхэн бичихээ сайтар бодож үзэх нь зүйтэй гэж би бодож байна. ямар арга хэрэглэх вэ?

Сайн байцгаана уу эрхэм уншигчид, энэ дугаарт бид зохион байгуулалтын төрлүүдийн талаар ярих болно. Та бүгд сонссон байх блокийн зохион байгуулалт ба хүснэгт, өнөөдөр би вэбсайтын зохион байгуулалтад эдгээр хоёр өөр хандлагын талаар ярихыг хүсч байна. Өмнөх нийтлэлд би электрон төхөөрөмжийг хэрхэн хамгаалах талаар тайлбарласан бөгөөд бага зэрэг өмнө бид орчин үеийн virtuemart бүрэлдэхүүн хэсэг дээр байрлах дэлгүүрийн тодорхой жишээг авч үзсэн. үнэгүй CMS joomla.

Энэ нийтлэл нь "сайт бүтээгчид" -ийн хүнд хэцүү замд дөнгөж орж байгаа шинэхэн вэб хөгжүүлэгчдэд хэрэгтэй болно. өөрийн вэбсайтаа хийх. Туршлагатай вэб хөгжүүлэгчид өөрсдөө ямар нэг зүйлийг сурах боломжтой болно, тухайлбал нийтлэлийг харьцуулсан болно хүснэгт болон блок хэлбэрийн давуу болон сул талууд.
Магадгүй бид вэбсайтын зохион байгуулалт гэж юу вэ гэдгээс эхлэх хэрэгтэй болов уу? Зохион бүтээгч нь ирээдүйн сайтын зураг төслийг дизайнераас авдаг бөгөөд дүрмээр бол зохион байгуулалтыг дараахь байдлаар өгдөг. photoshop формат. Байрлал нь үндсэндээ зураг бөгөөд зөвхөн илүү нарийвчилсан бөгөөд тус тусын элементүүдийг (цэс, сайтын толгой хэсэг ...) давхаргад хуваасан байдаг бөгөөд энэ нь дизайнер зураг зурах үед аяндаа тохиолддог бөгөөд үүнээс гадна энэ нь маш тохиромжтой, та үүнийг хялбархан хийж чадна. хэрэгтэй давхаргаас зураг хуулах, үсгийн сонголтуудыг харах гэх мэт. Тиймээс энэ нь зохион байгуулалтыг хувиргахдаа зохион байгуулалтын мөн чанар юм html баримт бичигмөн CSS дүрмийн багцыг эмхэтгэх.

Зохион байгуулалт нь мэдээжийн хэрэг Photoshop дээр зураг зурахтай адилгүй бүтээлч үйл явц гэдгийг тэмдэглэх нь зүйтэй, гэхдээ үүнд бүтээлч хувь нэмэр оруулдаг, ялангуяа эхний шатанд, дараа нь туршлага, зохион байгуулалтын үйл явц нэмэгдэхийн хэрээр. механикжуулж болно. Байршлын чанарыг сайтын зохион байгуулалт нь зохион байгуулалтаас хэр их ялгаатай байгаагаар үнэлдэг.

Байршлын төрлүүд

Гарчиг дээр дурдсанчлан зохион байгуулалт нь блок эсвэл хүснэгт хэлбэртэй байж болно. Блокийн зохион байгуулалтад сайтын элементүүдийг блок ( div ) ашиглан бүтэцтэй, хүснэгтийн зохион байгуулалтад хүснэгтүүдийг ашигладаг ( хүснэгт ).

Хүснэгтийн зохион байгуулалт

Хүснэгтийн зохион байгуулалтЭнэ нь вэб сайт бүтээх эхний үед ашиглагдаж байсан бөгөөд шинэхэн вэб хөгжүүлэгчдийн дунд алдартай байсан. Олон вэбмастерууд одоо ч гэсэн зохион байгуулалтын хүснэгтийг нэлээд үр дүнтэй удирдаж байгааг тэмдэглэх нь зүйтэй - мастер нь ажлаас айдаг. Би хувьдаа хүснэгтийн байршлаас илүү блок зохион байгуулалтыг илүүд үздэг, гэхдээ бид одоо амтны тухай ярихгүй байна. Энэ санаа нь сайтыг хүснэгт хэлбэрээр үзүүлэхэд үндэслэсэн болно. Та бүхний мэдэж байгаагаар сайтуудын дийлэнх нь тодорхой даалгаварт зориулж нарийвчилсан бүтэцтэй байдаг. Жишээлбэл, сайтын ердийн хувилбарыг авч үзье

Энэ нь толгой, агуулгын хэсэг, баруун талын хэсэг болон хөл хэсгийг агуулсан бөгөөд энэ нь миний блогын төвөгтэй бүтэц биш юм. Бид хэрэгжүүлдэг энэ бүтэцширээ

малгай
агуулга	хажуугийн самбар
хөл хэсэг

Хэрэв бүдүүвч нь тогтмол өргөнтэй бол хүснэгтийг тодорхой тогтмол өргөнтэй байх ёстой, хэрэв бүтэц нь шингэн байвал 100% байх ёстой бөгөөд энэ тохиолдолд дэлгэцийн нягтралаас хамааран хүснэгт нь дэлгэцийн өргөнд таарч сунах болно.

Хүснэгтийн байршлын давуу болон сул талууд:

• Ойлгоход хялбар, HTML болон CSS-ийн гүнзгий мэдлэг шаардлагагүй (+ )
• Барилгад хялбар, хамгийн бага CSS дүрэм (+ )
• Илүү төвөгтэй сайтын бүтэцтэй HTML кодыг ойлгоход хэцүү байдаг (- )
• Хүснэгтийг бүхэлд нь ачаалах хүртэл дэлгэц дээр харагдахгүй (-)
• Давхардсан элементүүдтэй нарийн төвөгтэй дизайн хийх боломжгүй (- )
• Олон тооны илүүдэл код (-)

4-р цэгийг нарийвчлан авч үзье. Бодит байдал ийм л байна HTML хүснэгтүүдХүснэгтийн сүүлчийн зургийг ачаалах хүртэл хөтөч нь хүснэгтийг агуулгын хамт хэрхэн зурахаа урьдчилан мэдэж чадахгүй байхаар зохион бүтээгдсэн. зочин хэсэг хугацаанд дэлгэцэн дээр юу ч харагдахгүй байгаа тул хэрэглэгчид хуудсыг харуулахыг хүлээхгүйгээр сайтаас гарахад хүргэдэг. Сайт удааширч байгаа бололтой, үнэндээ хөтөч нь хүснэгтийн бүх элементүүдийг ачаалах хүртэл хүлээж байна.

блокийн зохион байгуулалт

Блокийн зохион байгуулалт нь тухайн блок дээр суурилдаг HTML элементүүд, дүрмээр бол HTML кодонд гарч ирэх дарааллаар дээрээс доошоо босоо байрлалд байрладаг. Үүнээс гадна, блокуудын хөвөх чадварыг тохируулж болно ( хөвөх:зүүн | зөв | байхгүй | өвлөн авах). Хэрэв та блокийн хувьд float:left шинж чанарыг зааж өгвөл энэ нь зүүн тийш зэрэгцэх бөгөөд бусад бүх блокууд үүнийг үл тоомсорлох болно, текстээс бусад нь энэ блок байхгүй юм шиг, ижил өмчийн багцтай бусад блокуудыг боож өгнө. түүний эргэн тойронд баруун тийш, хэр их хэмжээгээр зөвшөөрөгдсөн дэлгэцийн өргөн эсвэл тэдгээрийн дотор байгаа элемент. Display:block шинж чанарыг тохируулснаар аль ч элементийг блок болгож болно гэдгийг тэмдэглэх нь зүйтэй бөгөөд анхдагч байдлаар зөвхөн div элементүүдийг блок элемент гэж үздэг бөгөөд блок бус элементүүдийн хувьд (span, p ) float шинж чанарыг үл тоомсорлодог ба ийм элементүүд ердийнх шиг дээрээс доош дараалан байрлуулсан байна. Хөвөгч шинж чанарыг үл тоомсорлохгүйн тулд та элементүүдийн display:block шинж чанарыг тохируулах ёстой.

float:right нь блокыг баруун тийш зэрэгцүүлэх ба бусад бүх блокууд үүнийг үл тоомсорлох, эсвэл ижил шинж чанарыг тохируулсан бол эргэн тойрон эргэлдэж, хэрэв кодонд заасан шинж чанартай хоёр буюу түүнээс дээш блок дараалсан байвал дараа нь Эхлээд ирсэн блок нь кодын баруун талд эхнийх нь байх болно, үлдсэн хэсэг нь зүүн тийш нь орооно.

float:none шинж чанар нь блокийн хөвөгч эффектийг цуцалдаг боловч энэ нь блокыг ердийнхөөрөө дээрээс доош байрлуулна гэсэн үг биш, хэрэв дээр хөвөгч эффекттэй блок байрладаг бол доод блок нь дээд хэсгийг үл тоомсорлодог. нэг ба түүний доор зогсохын тулд энэ блокыг тодорхой болгох шаардлагагүй: аль аль нь шинж чанар. Хөөх, хэцүү байна тийм үү? Энэ нь зөвхөн анхны харцаар харагддаг, үнэндээ бүх зүйл логик бөгөөд энгийн, та зүгээр л дадлага хийх хэрэгтэй.

float: inherit - эх блоктой адил хөвөх шинж чанарыг тохируулна (энэхүү хүүхдийн блок үүрлэсэн блок).

Бидэнд тодорхой жишээ хэрэгтэй байна, надад үнэмшилгүй санагдаж байна. Энгийн жишээг бий болгоцгооё, эхлэгчдэд суурь, 400 пикселийн өргөнтэй улаан хайрцаг. 350 пиксел өндөр. мөн дэлгэцийн дунд зэрэгцүүлнэ.

Одоо та энэ блок дээр 100 пикселийн өндөр, өргөнтэй ногоон, саарал өнгийн хэд хэдэн блок нэмэх хэрэгтэй, саарал блок нь 120 пикселийн өндөртэй.

Эндээс харахад блокууд нь ерөнхий урсгалаар доороос дээш, кодонд орсон дарааллаар, эхлээд ногоон, дараа нь саарал, төгсгөлд нь цэнхэр өнгөтэй байна. Саарал, цэнхэр блок үүнийг үл тоомсорлохын тулд ногоон блокт float:left шинж чанарыг өгцгөөе.

Таны харж байгаагаар саарал блок ногоон блокыг үл тоомсорлож, доор нь зогсож байсан бөгөөд ногоон блок нь өөрөө саарал өнгийн блокны ард эгнэж байв. Бүх блокуудыг тойруулан боож өгье.

Блокууд кодонд орсон дарааллаар нь дараалан эгнэж байгаа нь харагдаж байна. Хоёр блокыг бие биенийхээ хажууд байрлуулахыг хичээцгээе, гурав дахь нь ердийнхөөрөө доор байна. Үүнийг хийхийн тулд та гурав дахь блокоос float:left шинж чанарыг арилгах хэрэгтэй, гэхдээ энэ нь бидний өмнө харсан шиг эхний хоёр блокийн доор мөлхөх тул энэ нь хангалтгүй юм. Үүнээс урьдчилан сэргийлэхийн тулд та өмчийг тодорхой болгох хэрэгтэй:хоёулаа гурав дахь блок руу;

Блокуудын өргөнийг тохируулахдаа хүрээ нь 1 пиксел байх ёстойг харгалзан үзсэний үндсэн дээр бүтэц нь ийм болсон. блокийн хэмжээг ихэсгэдэг тул толгойн хэмжээг 398 пиксел болгож тохируулсан. 400 пиксел биш.

Блокийн байршлын давуу болон сул талууд:

• Код бага тул хуудасны жин бага байна (+ )
• Давхардсан блок бүхий нарийн төвөгтэй дизайныг хэрэгжүүлэх (+ )
• Мэргэшүүлэхэд хэцүү, хүснэгтийн зохион байгуулалт нь илүү хялбар (- )
• Ихэнх тохиолдолд хөтчүүд хоорондын нийцтэй байдлын асуудлыг шийдвэрлэх шаардлагатай байдаг. дэлгэцийн нягтрал, масштабыг өөрчлөх үед блокууд давхцаж болно (- )

Би хувьдаа хүснэгтийн схемээр эхэлсэн, одоо би блок зохион байгуулалтыг ашиглаж байна, би үүнийг нэлээд эртнээс эзэмшсэн, энэ нь хялбар байсан, гэхдээ энэ нь хэд хэдэн сул талуудтай ч, блок зохион байгуулалтыг ашиглах нь надад илүү танил, хялбар болсон.

Эрхэм уншигчид минь, ойр ойрхон ирж байгаарай.

Байршлын дизайнеруудын дунд сонголттой холбоотой маргаан ихэвчлэн гардаг зохион байгуулалтын арга. Зарим нь илүүд үздэг блокийн зохион байгуулалт, бусад вэбмастерууд хандлагатай байдаг хүснэгтийн арга. Энэ асуудал нэлээд маргаантай бөгөөд хоёр мастер хоёулаа өөр өөрийнхөөрөө зөв байдаг. Үүнийг ашиглах нь зүйтэй зарим нөхцөл байдал байдаг блокийн зохион байгуулалт, үе үе бас байдаг хамгийн сайн сонголташиглах болно хүснэгтийн зохион байгуулалт. Гэхдээ ямар ч тохиолдолд, аргыг сонгохдоо хүснэгт болон хүснэгтийн аль алинд нь хамаарах зарим онцлог шинж чанарууд дээр тулгуурлах шаардлагатай. блокийн зохион байгуулалт. Гол онцлогЭдгээр аргуудаас давуу болон сул талууд байдаг бөгөөд тэдгээрийг доор авч үзэх болно.

Байршуулах хүснэгтийн давуу талууд:

• Байршлын хүснэгтүүд нь блокуудаас хамаагүй хялбар байдаг;
• Бага нарийвчлалтай үед хүснэгтүүд давхцдаггүй
• Хөтөч хоорондын сайт үүсгэхэд хялбар.

Хүснэгтийн бүдүүвчийн сул талууд:

• Олон тооныкод;
• Бүх загвар нь бичгийн ширээ байж болохгүй.

Блокийн байршлын давуу талууд:

• Сайтын жинг мэдэгдэхүйц бууруулдаг бага хэмжээний код;
• Хүснэгттэй харьцуулахад өндөр ачаалах хурд;
• Та ямар ч нарийн төвөгтэй дизайн хийх боломжтой.

Блок зохион байгуулалтын сул талууд:

• Нарийвчлал буурах тусам блокууд унах эсвэл бие биен рүүгээ урсдаг;
• Хөтөч хоорондын нийцтэй байдалд асуудал гардаг;
• Бичлэг бичих нь хүснэгтээс илүү хэцүү байдаг.

Эдгээр аргуудын гол давуу болон сул талууд энд байна хуудасны зохион байгуулалт, гэхдээ практик дээр ихэнх тохиолдолд хоёр аргыг ашиглах шаардлагатай байдаг. Хэрэглээ блокийн зохион байгуулалт, хүснэгтээс хамаагүй дээр, гэхдээ зөвхөн хүрэх боломжтой байх нөхцөлд л зөв дэлгэцхуудсуудыг бүх хөтчүүд болон мониторын ямар ч нягтралд ашиглах боломжтой. Зохион бүтээгч нь тийм ч их туршлагагүй тохиолдолд зохион байгуулалтын хүснэгтийг ашиглах нь зүйтэй бөгөөд ур чадвар нэмэгдэхийн хэрээр үүнийг өөрчлөх боломжтой болно. блокийн зохион байгуулалт.

Одоо бид ярих болно хүснэгт болон блок зохион байгуулалтын сайтуудын хооронд ямар ялгаа байдаг вэ. Загвар зохион бүтээгч сайтыг бодсоны дараа тодорхой хэрэгцээнд нийцүүлэн байрлуулж, тохируулах шаардлагатай. Байршлын доор html+css эсвэл html ашиглахыг ойлгоорой. Хамгийн түгээмэл нь эхний сонголт юм. Илүү төвөгтэй байршлын бусад сонголтууд байдаг боловч бүх хөтөч үүнийг дэмждэггүй. HTML зохион байгуулалт нь хүснэгт (хүснэгт) ба блок (div) хэлбэртэй. Мөн сонголт бүр өөрийн гэсэн давуу болон сул талуудтай.

Хүснэгтийн зохион байгуулалт

Хүснэгтийн бүдүүвчийг үүрлэсэн хүснэгтүүдийг ашиглан бүтээдэг. Бараг бүх хөтөч энэ төрлийн байршлыг зөв уншдаг, учир нь энэ нь блокоос хамаагүй эрт бүтээгдсэн юм. Хэрэв танд олон багана дизайн хэрэгтэй бол хүснэгтийн зохион байгуулалт нь үүнд тохиромжтой. Хүснэгтийг ашиглан зохион байгуулалтын дутагдлын талаар хэлэх шаардлагатай. Маш их хэмжээний үүрлэсэн хүснэгтүүд нь хэтэрхий төвөгтэй код үүсгэдэг бөгөөд үүнийг засахад хэцүү байдаг. Хүснэгтийн байршлыг ашиглан үүсгэсэн сайтууд хангалттай сайн индексжүүлээгүй байна Хайлтын системүүд. Тиймээс контентоороо сайн сайтууд хайлтын үр дүнд тэр бүр нэгдүгээр байр эзэлдэггүй.

Блокны зохион байгуулалт

Блокийн зохион байгуулалтаар хийгдсэн сайтууд нь илүү авсаархан код ашигладаг тул жин багатайгаараа ялгагдана. Блокны зохион байгуулалт нь ашиглахад маш тохиромжтой, давхаргууд эсвэл блокууд нь хоорондоо давхцаж болно. Optimizers нь HTML кодын доод хэсгийг дээд талд байрлуулж болох давуу талыг ашигладаг. Блокны зохион байгуулалтын сөрөг тал нь түүний хэрэглээний зарим нарийн төвөгтэй байдал юм. Та CSS 1 ба 2-р хувилбарыг ойлгох хэрэгтэй бөгөөд гурав дахь нь бэлтгэгдэж байгаа бөгөөд энэ нь бүр илүү олон функцтэй байх болно. "Шингэн" зохион байгуулалттай сайтуудыг бий болгоход тодорхой бэрхшээл тулгардаг боловч дэлхий даяарх вэб сайтаас үүнийг хэрхэн блокоор хялбархан хийх талаар хангалттай зааврыг олох боломжтой. Блок зохион бүтээхэд маш олон нарийн ширийн зүйлийг мэдэх шаардлагатай байдаг тул үүнийг илүү туршлагатай, мэдлэгтэй layout дизайнерууд, вэб дизайнерууд ашигладаг. Тиймээс, байршлын блок бүхий сайтуудыг үүсгэдэг вэб студийн үйлчилгээ нь илүү үнэтэй байдаг, ялангуяа хуучин хувилбарыг ашигладаг хүмүүс байсаар байна.