Vlad Merzheviç
Üç sütunlu maye düzeni, bəlkə də mövcud olan ən çevik və fərdiləşdirilə bilən düzəndir. Sütunların enini təyin etmək üçün faizlərin və piksellərin birləşməsi ehtiyaclarınıza uyğun olaraq onları seçərək müxtəlif planlar yaratmağa imkan verir. Şəkildə. 5.17 rahatlıq üçün üç sütunlu planların variantlarını göstərir, onlar nömrələnir;
düyü. 5.17. Üç Sütun Düzeni
Burada faiz simvolu (%) o deməkdir ki, sütun eni düzənliyin eninin faizi kimi göstərilib, px - sütun eni piksellərlə, sonsuzluq işarəsi (∞) isə sütunun yerdə qalan yerini tutur. Müxtəlif layoutların bolluğuna baxmayaraq, onların qurulması prinsipləri eyni qalır və iki əsas üsulu ehtiva edir: yerləşdirmə və üzən elementlər. Eyni hündürlükdə sütunlar yaratmaq üçün cədvəllərdən də istifadə edə bilərsiniz.
Mövqeləşdirmədən istifadəNisbi təbəqələrin mövqeyini idarə etmək üçün ana element təyin etmək üçün valideyn üçün lazımdır mövqe mülkiyyəti nisbi dəyəri ilə və uşaq elementləri sütunları təşkil edən , dəyər mütləqdir. İlk dörd layout üçün kod strukturu eyni olacaq və Nümunə 5.13-də təqdim olunur.
Misal 5.13. Pikseldə iki sütun və ya faizlə üç
Üç sütun Saytın başlığı Sütun 1 Sütun 2 Sütun 3
Burada sütunlar sıra ilə nömrələnir, yəni. 1-ci sütun solda, 2-ci sütun mərkəzdə, 3-cü sütun isə sağdadır.
Mövqeləşdirmə bu metodun istifadəsini məhdudlaşdıran müəyyən bir mənfi cəhətə malikdir - altbilgi əlavə edərkən, sütunların altında gizlənəcəkdir. Bunun səbəbi düzən qatının hündürlüyü olmadığı üçün altbilgi qatını aşağı itələməməsidir. Bir səhifədə altbilgi mütləq tələb olunursa, üzən elementlərə əsaslanan sütun qurma metodundan istifadə etməlisiniz. Bu üsul IE6-da da səhvlərə görə işləmir.
Birinci sütunun eni rezin, qalanları isə sabit olan 1 nömrəli plan üçün üslub aşağıdakı kimi olacaqdır (nümunə 5.14).
Misal 5.14. Layout No 1
Başlıq ( fon: #D5BAE4; ) .layout ( mövqe: nisbi; /* Nisbi yerləşdirmə */ ) .layout DIV ( mövqe: mütləq; /* Mütləq yerləşdirmə */ ) .col1 ( fon: #C7E3E4; /* Fon rəngi * / sol: 0; /* Sol kənar mövqeyi */ sağ: 300px; /* Sağ kənar mövqeyi */ .col2 (fon: #E0D2C7; genişlik: 200px; /* Sütun genişliyi: 100px; /* Sola sürüşdürün sütun eni 3 */ ) .col3 (fon: #ECD5DE; en: 100px; sağ: 0; )
Verilmiş eni olan sütunlar genişlik xassəsinə malikdir və onların sol və ya sağdakı mövqeyi müvafiq olaraq sol və ya sağ xassə ilə müəyyən edilir. Qalan sütunun rezin eni eyni vaxtda sola və sağa əlavə edilərək qurulur, onların dəyərləri sabit sütunların eni ilə eynidir.
2 nömrəli planlar (nümunə 5.15) və 3 nömrəli (nümunə 5.16) eyni prinsip əsasında qurulur.
Misal 5.15. Layout No 2
Başlıq ( fon: #D5BAE4; ) .layout ( mövqe: nisbi; ) .layout DIV ( mövqe: mütləq; ) .col1 ( fon: #C7E3E4; en: 100px; ) .col2 ( fon: #E0D2C7; sol: 100px; sağ: 200px;).col3 (fon: #ECD5DE; en: 200px; sağ: 0; )
Misal 5.16. Layout No 3
Başlıq ( fon: #D5BAE4; ) .layout ( mövqe: nisbi; ) .layout DIV ( mövqe: mütləq; ) .col1 ( fon: #C7E3E4; en: 100px; ) .col2 ( fon: #E0D2C7; en: 200px; sol: 100px; .col3 (fon: #ECD5DE; sol: 300px; sağ: 0; )
Bütün sütunların eninin faizlə təyin olunduğu 4 nömrəli tərtibat bəzi nüanslara malikdir. Bütün sütunların eyni eni tələb olunarsa, o, hissə-hissə təyin edilə bilər (33,33%), lakin Opera brauzeri fraksiya faiz qiymətləri ilə işləyə bilməz, ona görə də sütunlar arasında “deşiklər” görünəcək (şək. 5.18).
düyü. 5.18. Sütun eni fraksiyalı faizlərlə göstərilmişdir
Belə hallarda, misal 5.17-də göstərildiyi kimi qeyri-bərabər paylara keçməlisiniz, məsələn, 33%, 34%, 33%.
Misal 5.17. Layout No 4
Başlıq ( fon: #D5BAE4; ) .layout ( mövqe: nisbi; ) .layout DIV ( mövqe: mütləq; ) .col1 ( fon: #C7E3E4; en: 33%; ) .col2 ( fon: #E0D2C7; sol: 33 %; en: 34% ) .col3 (fon: #ECD5DE; sağ: 0; en: 33%; )
Bəzi brauzerlərdə sütunlar arasında kiçik bir boşluq görünə bilər. Tam faiz dəyərlərindən deyil, fraksiyalardan istifadə etməklə həll edilə bilər, yəni. 33% əvəzinə 33,3%.
Üç sütundan ikisinin rezin olan qalan planları təmsil edir xüsusi qrup, çünki onlar müxtəlif yollarla şərh edilə bilər. Beləliklə, bir sütunun eni piksellərlə, digəri isə düzülmə eninin faizi kimi göstərilir və qalan sütunun eni avtomatik olaraq hesablanır. Şəkildə. Şəkil 5.19-da 5 nömrəli plan nümunəsindən istifadə edərək sütunların eninin hesablanmasına müxtəlif yanaşmalar göstərilir.
düyü. 5.19. İki rezin sütunun eni
Birinci seçimdə, birinci sütunun eni layout eninin faizi olaraq təyin edilir, ikinci sütunun eni avtomatik olaraq hesablanır və üçüncü sütunun piksellərdə sabit eni var. İkinci seçimdə sütunlar öz aralarında dəyişir və birinci sütunun eni avtomatik olaraq hesablanır. Üçüncü variant, rezin sütunların ümumi eninin 100% olaraq qəbul edildiyini və birinci və ikinci sütunların eninin ondan hesablandığını nəzərdə tutur.
Birinci və ikinci seçimlər, pikseldə iki sütunlu koda bənzər şəkildə asanlıqla həyata keçirilə bilər. Yalnız px-də genişlik əvəzinə % göstəririk. Nümunə 5.18 birinci sütunun faizlə təyin olunduğu 5 nömrəli tərtibat üslubunu göstərir.
Misal 5.18. Layout No 5. İkinci sütunun eni hesablanır
Başlıq ( fon: #D5BAE4; ) .layout ( mövqe: nisbi; ) .layout DIV ( mövqe: mütləq; ) .col1 ( fon: #C7E3E4; en: 50%; ) .col2 ( fon: #E0D2C7; sol: 50 % sağ: 200px; .col3 (fon: #ECD5DE; sağ: 0; en: 200px; )
Hesablanmış birinci sütunla 5 nömrəli tərtibat üslubu Nümunə 5.19-da göstərilmişdir.
Misal 5.19. Layout No 5. Birinci sütunun eni hesablanır
Başlıq ( fon: #D5BAE4; ) .layout ( mövqe: nisbi; ) .layout DIV ( mövqe: mütləq; ) .col1 ( fon: #C7E3E4; sol: 0; sağ: 200px; kənar-sağ: 50%; ) . col2 (fon: #E0D2C7; en: 50%; sağ: 200px; ) .col3 (fon: #ECD5DE; en: 200px; sağ: 0; )
Birinci sütun sağ xüsusiyyət vasitəsilə sağa təyin edilə bilməz, çünki dəyər 50%+200px olacaq CSS2 belə hesablanmış dəyərlərə malik deyil; Buna görə də, diqqəti tətbiq edəcəyik - sağdakı birinci təbəqəni sağdan 200px eninə məhdudlaşdıracağıq və margin-right istifadə edərək ikinci sütunun eni 50% ilə sola köçürəcəyik. Qatımız tamamilə yerləşmişdir, buna görə də bu cür manipulyasiyalar heç bir şəkildə genişliyə təsir etməyəcəkdir.
İki rezin sütunlu üçüncü seçim əlavə bir təbəqənin olmasını tələb edir, onu rezin adlandıraq, ona nisbətən sütunların eni təyin olunacaq (nümunə 5.20).
Misal 5.20. Layout #5: İki sütunun faiz eni
Üç sütun .başlıq (fon: #D5BAE4; ) .layout (mövqe: nisbi; ) .layout DIV ( mövqe: mütləq; ) .rubber (sol: 0; sağ: 200px; ) .col1 ( fon: #C7E3E4; eni: 60%; ) .col2 (fon: #E0D2C7; en: 40%; sol: 60%; ) .col3 (fon: #ECD5DE; en: 200px; sağ: 0; ) Saytın başlığı Sütun 1 Sütun 2
6 nömrəli planın tikintisi 5 nömrəli plana bənzəyir, ona görə də bunun üzərində dayanmayacağıq. 7 nömrəli plana gəldikdə, onun üçün çətinlik yarada biləcək bir seçim var. Bu, sol və sağ sütunların enini hesablanmış və bir-birinə bərabər etmək istədiyiniz vəziyyətə aiddir. Bunun üçün birinci və üçüncü sütunların eni 50%-ə bərabər edilməlidir (şək. 5.20).
düyü. 5.20. Bərabər enli sütunlarla 7 nömrəli plan
İkinci sütun üçün yer buraxmaq üçün birinci sütun üçün margin-right, üçüncü üçün isə margin-left xüsusiyyətindən istifadə edəcəyik. Bu xassələrin dəyəri ikinci sütunun eninin yarısı olacaq. Beləliklə, əgər 200px-ə bərabərdirsə, nəticə kənar-sağ olacaq: 100px (misal 5.21).
Misal 5.21. Layout No 7. Kauçuk sütunların eni eynidır
Başlıq ( fon: #D5BAE4; ) .layout ( mövqe: nisbi; ) .layout DIV ( mövqe: mütləq; ) .col1 ( fon: #C7E3E4; sol: 0; sağ: 50%; kənar-sağ: 100px; ) . col2 (fon: #E0D2C7; en: 200px; sol: 50%; kənar-sol: -100px; ) .col3 (fon: #ECD5DE; sol: 50%; sağ: 0; kənar-sol: 100px; )
Genişlik xassəsindən birbaşa istifadə edilə bilməz, çünki kənarın əlavə edilməsi yalnız eni artıracaq və ehtiyac duyduğumuz kimi onu azaltmayacaq. Buna görə də, eni eyni zamanda müəyyən edilir mülkləri qalıb və sağ. İkinci sütunun yerləşdirilməsi ilə, 50%-200px-ə bərabər olacağı üçün sol və ya sağ dəyəri təyin etməkdə çətinliklər yaranır. Beləliklə, biz sol kənar mövqeyini 50%-ə təyin etdik ( sol : 50% ) və sonra margin-left xüsusiyyəti (margin-left : -100px ) vasitəsilə bütün sütunu eninin yarısı qədər sola köçürük.
Bəzi sütunların eni avtomatik hesablandığı üçün BODY seçicisinə min-width xassəsini əlavə etməklə minimum tərtibat enini məhdudlaşdırmaq tövsiyə olunur. Sonra göstərilən həddə çatdıqda sütunların eni azalmayacaq.
BODY (min-en: 800px; /* Minimum layout eni */ )
Minimum genişlik dəyəri səhifənin tərtibatı və məzmunundan asılıdır və adətən təcrübə ilə müəyyən edilir.
Üzən elementlərdən istifadəÜzən elementlər başqa bir elementdir universal üsul müxtəlif üç sütunlu planların qurulması. Yerləşdirmədən fərqli olaraq, bu, zirzəmi problemindən narahat olmamağa imkan verir, çünki zirzəmi həmişə ən yüksək sütunun altındakı yerində yerləşəcəkdir.
Sütunlar kənar və genişlik xassələri ilə birlikdə float xassəsindən istifadə etməklə qurulur. Seçilmiş layoutdan asılı olaraq, koddakı sütunların sırası da dəyişir, hər zaman birinci yerə float əlavə olunur;
Layout No 1. Rezin birinci sütun
İkinci və üçüncü sütunların eni piksellərlə müəyyən edilir və onların mövqeyi dəyər hüququ ilə float xüsusiyyəti vasitəsilə müəyyən edilir. Birinci sütun üçün siz həmçinin qalan sütunların ümumi eninə bərabər olan dəyərlə margin-right xassəsini təyin etməlisiniz (nümunə 5.22).
Misal 5.22. Layout No 1
Layout 1 .header, .footer ( fon: #D5BAE4; ) .layout ( overflow: gizli; /* Açmaq */ ) .col1 (fon: #C7E3E4; /* Fon rəngi */ margin-sağ: 300px; /* Shift 2 və 3-cü sütunların eni ilə sola */ .col2 (fon: #E0D2C7; en: 200px; float: sağa; /* Sola sarın */ ) .col3 ( fon: #ECD5DE; en: 100px; float: sağ; /* Sola sarın */ ) Saytın başlığı Sütun 3 Sütun 2 Sütun 1 Altbilgi
Layout No 2. Rezin orta sütun
Birinci və üçüncü sütunların eni piksellərlə müəyyən edilir və onların mövqeyi birinci sütun üçün sol və üçüncü sütun üçün sağ dəyərlə float xüsusiyyəti vasitəsilə müəyyən edilir. Görünüşünü qoruyub saxlamaq üçün orta sütunda sol və sağ kənarı təyin edən universal xüsusiyyət marjası var (nümunə 5.23).
Misal 5.23. Layout No 2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 2 .header, .footer ( fon: #D5BAE4; ) .layout ( overflow: gizli; ) .col1 (fon: #C7E3E4; float: sol; en: 200px; ) .col2 ( fon: #E0D2C7; kənar: 0 100px 0 200px; /* Sağ və sol doldurma */ .col3 ( fon: #ECD5DE; en: 100px; float: sağ; ) Saytın başlığı Sütun 1 Sütun 3 Sütun 2 Altbilgi
Layout No 3. Rezin üçüncü sütun
Birinci və ikinci sütunların mövqeyi float xüsusiyyəti vasitəsilə sol dəyəri ilə göstərilir, üçüncü sütun üçün sol kənarı (margin-left ) qalan sütunların ümumi eninə təyin etməlisiniz (misal 5.24).
Misal 5.24. Layout No 3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 3 .header, .footer ( fon: #D5BAE4; ) .layout ( overflow: hidden; ) .col1 ( fon: #C7E3E4; float: sol; en: 100px; ) .col2 ( fon: #E0D2C7; float: sol width: 200px ) .col3 ( fon: #ECD5DE; margin-left: 300px; /* Sol kənar 1 və 2 sütunların eninə */ ) Saytın başlığı Sütun 2 Sütun 3 Altbilgi
Layout No 4. Bütün sütunların eni faizlə müəyyən edilir
Bu düzeni qurmaq üçün əvvəlki planlara əsaslanaraq bir çox seçim uyğun gəlir, lakin piksel əvəzinə faizləri göstərməlisiniz. Başqa bir üsul yalnız float və en xassələrindən istifadə edən Nümunə 5.25-də göstərilmişdir.
Misal 5.25. Layout No 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 4 .header, .footer ( fon: #D5BAE4; ) .layout ( overflow: gizli; ) .layout DIV ( float: sol; ) .col1 ( fon: #C7E3E4; en: 20%; ) .col2 ( fon: #E0D2C7; en: 60% ) .col3 (fon: #ECD5DE; en: 20%; ) Saytın başlığı Sütun 2 Sütun 3 Altbilgi
Layout No 5. İki rezin sütunun eniŞəkildə. 5.19 iki rezin sütunlu 5 nömrəli planın müxtəlif yollarla şərh oluna biləcəyi nümayiş etdirildi.
Burada birinci sütunun eni faizlə müəyyən edilir və onun mövqeyi sol dəyəri ilə float xüsusiyyəti vasitəsilə müəyyən edilir, üçüncü sütun üçün eni piksellə, float xüsusiyyətinin dəyəri isə sağa təyin olunur. . Orta sütun üçün yalnız sol və sağ kənarları sütunların eninə təyin etmək qalır (nümunə 5.26).
Misal 5.26. Layout 5.1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 5.1 .header, .footer ( fon: #D5BAE4; ) .layout ( overflow: gizli; ) .col1 ( fon: #C7E3E4; en: 40%; float: sol; ) .col2 ( fon: #E0D2C7; kənar: 0 200px 0 40% ) .col3 ( fon: #ECD5DE; en: 200px; float: sağ; ) Saytın başlığı Sütun 1 Sütun 3 Sütun 2 Altbilgi
Birinci sütunun eni hesablanır
Bu, ən çətin tərtibatdır, çünki birinci sütunun eni birbaşa göstərilmir. Lakin məzmunu məhdudlaşdırmaq üçün margin-right xüsusiyyəti üçün faizləri və pikselləri birləşdirən dəyər təyin etməlisiniz. CSS2-də, artıq qeyd olunduğu kimi, bunu təyin etmək mümkün deyil, ona görə də gəlin col1 qatının içinə wrap adlı başqa bir təbəqə əlavə edək və bu təbəqələrin hər birinə padding əlavə edək. Biri faizlə, digəri piksellə (misal 5.27).
Misal 5.27. Layout 5.2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 5.2 .header, .footer ( fon: #D5BAE4; ) .layout ( overflow: gizli; ) .col1 (sağ kənar: 40%; ) .col1 .wrap (sağ kənar: 200px; fon: #C7E3E4; ) .col2 (fon: #E0D2C7; en: 40%; float: sağ; ) .col3 (fon: #ECD5DE; en: 200px; float: sağ; ) Saytın başlığı Sütun 3 Sütun 2 Sütun 1 Altbilgi
İki sütunun eni faizlə
Bu layoutda rezin sütunların ümumi eni 100% olaraq qəbul edilir, buna görə də daxili sütunların eninin ölçüləcəyi əlavə bir təbəqəyə ehtiyacımız olacaq. Kauçuk adlı bu təbəqə iki sütunlu düzülmə kimi col3 təbəqəsi ilə işləyir və daxili təbəqələr col1 və col2 float xüsusiyyətindən istifadə edərək üfüqi şəkildə düzülür (Nümunə 5.28).
Misal 5.28. Layout 5.3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 5.3 .header, .footer ( fon: #D5BAE4; ) .layout ( overflow: gizli; ) .rubber (sağ kənar: 200px; ) .col1 (fon: #C7E3E4; en: 60%; float: sol; ) .col2 ( fon: #E0D2C7; en: 40%; float: sol; ) .col3 (fon: #ECD5DE; en: 200px; float: sağ; ) Saytın başlığı Sütun 3 Sütun 2 Sütun 1 Altbilgi
6, 7 nömrəli planlar və onların variasiyaları, sol və sağ sütunların eni rezin və bir-birinə bərabər olan 7 nömrəli plan istisna olmaqla, 5 nömrəli planla eyni prinsip əsasında qurulur.
Əvvəlcə bazanı hazırlayırıq və HTML kodunda təbəqələrin sırasını göstəririk.
Sütun 1 Sütun 3 Sütun 2
Col1 ( en: 50%; float: sol; ) .col2 ( en: 200px; float: sol; ) .col3 ( en: 50%; float: sağ; )
Bütün bunlar deyil, təbəqələr hələ heç bir sütun yaratmır və bizim üçün tamamilə uyğun olmayan şəkildə qurulur. İkinci sütunu eninin yarısına qədər sola köçürməlisiniz (margin-left : -100px ) və üçüncü sütunu məcburi şəkildə yerinə yetirməlisiniz. Bunu etmək üçün onun enini artırmalısınız ki, 50%+100px (ikinci sütunun yarısı) bərabər və ya ondan çox olsun. Ən yaxşısı, sol margin xassəsindən mənfi dəyərlə istifadə etməkdir, bundan sonra sütunlar yaradılacaqdır. Bəzi başqa nüanslar da var. Xarici sütunlar bir-birinə birləşdirilir ki, bu da onların hündürlüyü orta sütunun hündürlüyünü aşdıqda aydın görünür (şək. 5.21).
düyü. 5.21. Docked dinamiklər
Bundan əlavə, sol sütunda mətn sağda və içərisindədir sağ sütun soldakı mətn mərkəzi sütunun fonunda gizlənir. Bu sütunun hündürlüyü böyükdürsə, bu nəzərə çarpmayacaq, lakin bu həmişə mümkün deyil. Aradan qaldırmaq üçün göstərilən çatışmazlıqlar, siz xarici sütunların içərisinə daha bir təbəqə qoymalısınız (məsələn, bu, wrap adlanır) və onlar üçün sütun fon rəngini təyin etməlisiniz, tələb olunan Bölmələr və abzaslar. Son kod 5.29-cu misalda verilmişdir.
Misal 5.29. Layout No 7
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 7 .header, .footer ( fon: #D5BAE4; ) .layout ( overflow: gizli; ) .col1 ( en: 50%; float: sol; ) .col1 .wrap ( fon: #C7E3E4; kənar-sağ: 100px ; /* 2-ci sütunun eninin yarısına qədər sola sürüşdürün */ padding: 10px; /* mətnin kənarları */ ) .col2 (fon: #E0D2C7; genişlik: 200px; float: sol; margin-left: -100px; ) .col3 ( eni: 50%; float: sağ; kənar-sol: -100px; ) .col3 .wrap ( fon: #ECD5DE; kənar-sol: 100px; /* 2-ci sütunun eninin yarısı qədər sağa sürüşdürün */ doldurma : 10px; ) Saytın başlığı Sütun 1 Sütun 3 Sütun 2 Altbilgi
Üç sütunlu düzəndə kənarlar və haşiyələrDoldurma xüsusiyyəti verilmiş nümunə tərtibatlarına bilərəkdən əlavə edilməmişdir, çünki kod yalnız tərtibatın əsası kimi xidmət edir və siz xüsusi hallarda sütunlarda kənarlara ehtiyacınız olub olmadığına qərar verməlisiniz. Blok elementinə kənarların və haşiyələrin əlavə edilməsi onun enini artırır, bu da tərtibat zamanı nəzərə alınmalıdır. Bununla belə, eni yalnız təbəqə təyin edildikdə böyüyür genişlik dəyəri. Genişliyin dəyişəcəyi və dəyişməyəcəyi bir neçə nümunəyə baxaq.
Div ( /* doldurma eni təsir edir */ en: 200px; doldurma: 10px; ) div ( /* doldurma enə təsir etmir */ mövqe: mütləq; sol: 20px; sağ: 20px; doldurma: 10px; ) div ( / * padding eni təsir edir */ float: sol; padding: 10px;
Doldurma və ya haşiyənin tələb olunduğu, lakin onların əlavə edilməsi planın "sındırılmasına" səbəb olan sütunlarda, iç içə bir təbəqədən istifadə edə və bunun üçün lazımi xüsusiyyətləri təyin edə bilərsiniz.
Sütun
Bu nümunədə 200 pikselə təyin edilmiş təbəqə eni dəyişməyəcək, lakin kənarlar və haşiyə əlavə olunacaq.
Sütun kimi cədvəlCədvəl sadə və istifadə üçün rahatdır sürətli yaradılması eyni hündürlükdə sütunlar. Bu sürət bir neçə şeylə əldə edilir. Birincisi, hər hansı layout üçün kod strukturu, float vəziyyətində olduğu kimi, koddakı sütunlar eyni qalır, onların sırasını heç vaxt dəyişdirməyin; İkincisi, hüceyrələrin eni onların məzmununa görə avtomatik olaraq hesablanır, ona görə də yalnız eni göstərin tələb olunan dinamiklər, qalanları isə cədvəlin ümumi eninə uyğunlaşacaq. Nümunə 5.30 masa üzərində hazırlanmış 1 nömrəli planı göstərir.
Misal 5.30. Layout No 1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 1 .header, .footer (fon: #D5BAE4; ) .layout (en: 100%; /* Cədvəl eni */ ) .layout TD (doldurma: 5px; /* Hüceyrə kənarları */ şaquli hizalama: yuxarı; / * Üst düzülmə */ .col1 (fon: #C7E3E4; ) .col2 (fon: #E0D2C7; en: 200px; ) .col3 (fon: #ECD5DE; en: 100px; ) Saytın başlığı
| Sütun 1 | Sütun 2 | Sütun 3 |
TD seçicisinə doldurma xassəsinin əlavə edilməsi etiketin hüceyrə doldurma atributunu ləğv edir
 |
Bir ağacın altında dayanıb gözlədi, Bir-iki, bir-iki! Ot yanır, qılınc kəsir, qışqırır, Lewis Carroll, tərcüməsi Dina Orlova, rəsmləri Con Tenniel |
 |
Nümunənin nəticəsi Şəkildə göstərilmişdir. 5.22.
düyü. 5.22. Planın mərkəzində sütun
Müəllifdən: salamlar bloqumun əziz oxucuları! Şübhəsiz ki, bir çoxlarınız əjdahalar, Şaxta baba və öz formasını dəyişdirməyə qadir olan rezin veb dizayn adlı anlaşılmaz bir heyvan haqqında əfsanələri eşitmisiniz. Con Tolkienin əlyazmaları sizə birinci personaj haqqında məlumat verəcək, valideynlər sizə ikinci haqqında danışacaq, amma üçüncü haqqında məlumatı öz üzərimə götürürəm. Nə qədər qəribə səslənsə də, bu yazıda rezin veb dizaynını çeynəməyə və onun üstünlükləri və mənfi cəhətləri haqqında danışmağa çalışacağam.
Veb saytı hazırlayarkən veb ustası, ilk növbədə, layihənin məqsədlərini rəhbər tutmalıdır. Müştəri üçün veb-səhifənin istənilən monitor ekranına uyğunlaşdırıla bilməsi vacibdirsə, burada yardım gələcək rezin (adaptiv) dizayn.
Bu format adını eni piksellərlə deyil, faizlə təyin edildiyi üçün almışdır. Onun köməyi ilə, qətnamədən asılı olmayaraq, səhifə bütün monitor ekranında açılacaqdır.
Veb dizayner kimi karyeranızın sürətlə inkişaf etməsi üçün bu istiqaməti öyrənmək mütləqdir. Artıq yığılmış sadiq müştəri bazası olan bir çox müştərilər bu nöqtədə xüsusilə tələbkardırlar, çünki onlar öz istifadəçilərinə maksimum rahatlıq təmin etmək istəyirlər.
Maye Veb Dizaynının DoğuşuMaraqlı bir müşahidə kimi qeyd edə bilərik ki, ölkəmizdə mütəxəssislər Qərbdəkindən daha tez “rezin” veb-dizaynını müsbət nöqteyi-nəzərdən qəbul etməyə başlayıblar. Fakt budur ki, veb istiqaməti yarananda bu sahəyə gəldi çoxlu sayda dar düşüncəli printerlər.
Xarici ekspertlər qeyri-sabit yaratmağın mümkünlüyünü sadəcə dərk etmədilər qrafik inkişaflar. Ancaq "veb" və "dizayn" anlayışları bizə demək olar ki, eyni dərəcədə gəldi, bunun nəticəsində təsvirin bu cür vizual çevikliyi tərtibatçılar tərəfindən adi yaradıcı azadlıq kimi qəbul edildi.
Maye və həssas veb dizayn eyni şeydirmi?İnsanlar tez-tez bu iki anlayışı qarışdırırlar, lakin onlar bir-biri üçün təmiz sinonim deyillər. Cavab verən veb-dizayn, bütün növ ekran qətnamələrini nəzərə alaraq, bütün növ cihazlarda maksimum istifadə rahatlığı yaratmaq üçün müxtəlif veb-sayt planları ilə işləməyi əhatə edir.
O, cihazdakı displeyin ölçüsündən asılı olaraq ümumi təsviri ekrana “ağlabatan şəkildə” tənzimləyir. Yaxşı, rezin dizaynı, əslində, elementlərdən biridir cavab verən veb dizayn. O, öz növbəsində, yalnız veb səhifənin nisbətlərində dəyişikliklər edir.
Beləliklə, belə bir nəticəyə gələ bilərik ki, cavab verən veb dizayn rezin və digər mütərəqqi təkmilləşdirmələrin birləşməsidir. Rahat təriflərə görə bəzən qarışıqlıq yarana bilər. Bu mövzuda müştəri ilə fikir ayrılıqları baş verdikdə xüsusilə xoşagəlməzdir, buna görə diqqətli olun və saytın rezin dizaynı haqqında danışarkən müştərinin nə demək istədiyini həmişə aydınlaşdırın.
Maye Veb Dizaynının FaydalarıKauçuk css dizaynı ilə siz hər şeyi dolduran bir veb səhifə dizayn etmək imkanına sahibsiniz boş yer ekran ölçüsündən asılı olmayaraq brauzer. İcazə ilə bağlı parametrlərdə hər hansı dəyişiklik olarsa, bütün sayt strukturu yenilənmiş şərtlərə yenidən uyğunlaşacaq. Möcüzələr və sehr, elə deyilmi?
Bu xüsusiyyət şəklin kiçik HTC-də və ya 20-düymlük ekranda göstərilməsindən asılı olmayaraq veb-səhifənin brauzer pəncərəsini tamamilə tutacağını təmin edir. geniş ekranlı monitor. Bu, rezin dizaynın əsas üstünlüyüdür.
Kiçik monitorları olan istifadəçilər problem yaşamırlar üfüqi zolaqlar sürüşdürür, lakin bəzən böyük geniş ekran formatlarının sahiblərini narahat edir. Nəticədə, bu baxımdan, sonuncu şəkildən tam zövq ala biləcək, çünki bütün displey sahəsi səmərəli istifadə ediləcək.
Rezin veb dizaynının hansı saytlar üçün uyğun olduğu sualını nəzərdən keçirsək, hər şey yenidən müştərinin məqsədlərindən asılıdır. Bu vizual çeviklik bir veb-səhifədə yerləşdirmənin prioritet olduğu saytlarda yaxşı görünəcək maksimum miqdar məzmun və estetik standartlar arxa plana keçir.
Məhz bu əsasda rezin veb dizaynının yaradılmasında geniş istifadə olunur xəbər portalları, bloqlar, eləcə də hər cür məlumat saytları. Bu hallarda onun istifadəsi ən uyğundur.
Müasir tendensiyalar və veb inkişafında yanaşmalar
Veb saytın qurulmasında sıfırdan sürətli böyümə alqoritmini öyrənin
Fluid Veb Dizaynının DezavantajlarıBundan başqa müsbət məqamlar, bu cür veb dizaynın bəzi xüsusi çatışmazlıqları da var. Onlardan biri, əslində, müəyyən ekran həlli şərtlərinə "avtomatik tənzimləmə" səhifəsinin son nəticəsinin gözlənilməz olmasıdır. Bəziləri qrafik elementlər Qonşu həmkarları tərəfindən köçürüldükləri üçün saytda qəflətən özlərini başqa yerdə tapa bilərlər.
Belə bir "rezin"in başqa bir çatışmazlığı ondan ibarətdir ki, onunla bir səhifə yükləmə standart müddətlə müqayisədə 2-3 dəfə arta bilər. Bu, bəzi brauzerlərin səhifə tərtibatı ilə bağlı seçici olması səbəbindən baş verir. bu formatda. Onlar dəyişən enli elementləri göstərməklə mübarizə aparırlar ki, bu da vizual xəta riskini artırır.
Maye və cavab verən veb dizayn nümunələriAydınlıq üçün sizə bir neçəsini göstərmək istəyirəm uğurlu nümunələr kauçuk və adaptiv dizaynlar kifayət qədərdir uğurlu tərtibatçılar.
1. http://www.simplebits.com/Əvvəlcə veb-inkişafda eyni vaxtda məşğul olan amerikalı bloggerin rezin saytına baxaq. Tam versiyası vebsayt:
mobil versiya vebsayt:
Gördüyünüz kimi, bu halda şəkil yalnız cihazın ölçüsünə uyğunlaşdırılır və ümumi quruluş sayt dəyişməz olaraq qalır.
2. http://www.fork-cms.com/İndi sizə uyğunlaşan veb saytla tanış olmağı təklif edirəm xüsusi cihaz və ölçüsündən asılı olaraq, öz strukturunu tamamilə yenidən qurur. Saytın tam versiyası:
Saytın mobil versiyası:
Bu belədir. Ümid edirəm ki, bugünkü material maraqlı oldu və vaxtınızı itirmədiniz. Əgər belədirsə, onda bu məsələ ilə bağlı şərhlər yazın və öz fikrinizi bölüşün. Veb dizayn 2.0 ustalarının həm müsbət rəylərini, həm də ekspert rəylərini yüksək qiymətləndirirəm. Daha maraqlı və daha çox qaçırmamaq üçün bloga abunə olun faydalı məlumat.
Hamısı mənim üçündür, tezliklə görüşərik!
Veb inkişafında müasir tendensiyalar və yanaşmalar
Veb saytın qurulmasında sıfırdan sürətli böyümə alqoritmini öyrənin
Sizi bu gün həsr olunacaq növbəti dərsə salamlayıram CSS dili. Və biz sizinlə sayt üçün üç sütunlu rezin planını həyata keçirəcəyik. Gələcəkdə siz sadəcə olaraq bu çərçivəni kopyalayıb vebsayt yaratmağa başlaya bilərsiniz. Dizayn saytın başlığı, sol yan panel, sağ yan panel, məzmun sahəsi və altbilgi kimi bloklardan ibarət olacaq. Mürəkkəb bir şey yoxdur, sadə, kifayət qədər sadə şablon. Yaxşı, onu həyata keçirməyin vaxtı gəldi. Başlamaq üçün yazaq aşağıdakı quruluş html kodu:
Biz strukturu həyata keçirmişik. Üslubları tətbiq etməyin vaxtı gəldi, bunun sayəsində üç sütunlu bir layout həyata keçirəcəyik.
İndi yazı üslublarını bitirdik, gəlin onlara bir az baxaq.
Əsas olaraq, biz bütün digər blokları yerləşdirdiyimiz bloku götürdük və bunun üçün maksimum eni, mərkəzə uyğunluğu, həmçinin yüz faizə bərabər olan eni təyin etdik (bu məcburi deyil, həm də artıq olmayacaqdır. ).
Saytın başlığına cavabdeh olan blokda başlıq yerləşdirildi və blokun özü fon rənginə və mərkəzləşdirilmiş mətn hizasına malik olacaq şəkildə quruldu. Bundan sonra ən vacib hissəyə, rezin dinamiklərimizə keçdik.
Sol yan panel üçün biz arxa plan rəngi və sabit hündürlüyü təyin edirik ki, saytın gələcəkdə necə görünəcəyini təsəvvür edə bilək. Genişliyi iyirmi faizə təyin etdik, həmçinin elementlərin axını sola təyin etdik.
Sağ yan panel ilə vəziyyət oxşardır, yalnız biz göndəririk bu element V sağ tərəf ekran, sağda elementlərin axını təyin etmək. Bu üsuldan sonra məzmun avtomatik olaraq bu iki yan panel arasında ekranda mərkəzləşir.
Amma məzmun üçün biz də fon rəngini, hündürlüyünü, 21 faizə bərabər olan sol və sağ kənarları, müvafiq olaraq, eni isə 58 faiz təyin edirik. Niyə 58 faizlə maraqlanırsınız. Yüz faizə bərabər olan genişliyə əsaslanaraq, soldan doldurmanı çıxarırıq və sağ tərəf, 21 faizə bərabərdir, cəmi 100 - 21 - 21 = 58. bu rəqəm. Hamısı, rezin bloklar hazırdır, yalnız altbilgini həyata keçirmək qalır.
Saytın başlığı prinsipinə uyğun olaraq həyata keçirilir, biz də içərisində başlıq olan bir blok yaradırıq, fon, mətn rəngi və mərkəzləşdirilmiş mətn hizalanmasını təyin edirik.
Nəticəyə baxaraq deyə bilərik ki, hər şey olduqca sadədir və sayt həddi qədər sıxılacaq və bizim təyin etdiyimiz maksimum genişliyə qədər uzanacaq. İstəyirsinizsə, saytınızın kiçiləcəyi minimum genişliyi təyin edə bilərsiniz. Göstərilmiş bu əmlak id konteyneri olan blok üçün, çünki o, digər blokların anasıdır. Beləliklə, siz və mən üç sütunlu rezin veb sayt yaratmaq imkanını nəzərdən keçirdik, bununla mən sizinlə vidalaşacağam. Sizə uğurlar, uğurlar!
Rezin veb sayt tərtibatı. Rezin veb dizayn. Nəyi və harada uzanacağıq?Xüsusiyyətlər, üstünlüklər və çatışmazlıqlar
Veb sayt tərtibatının ən populyar növlərindən biri rezin düzəndir. Əsas xüsusiyyət Fluid layout müxtəlif ekran qətnamələrinə və brauzer pəncərəsi ölçülərinə uyğunlaşma qabiliyyətidir.
Hamısından html növləri Veb sayt tərtibatlarını üç əsas yerə bölmək olar - sabit, maye və adaptiv.
Rezin yerləşdirmənin xüsusiyyətləri
Sabit tərtibatdan fərqli olaraq, maye tərtibatı brauzer pəncərəsinin ölçüsündə dəyişikliklərə imkan verir və müxtəlif ekran qətnamələri üçün nəzərdə tutulub. Fakt budur ki, müasir ilə sürətli inkişaf texnologiyaları və getdikcə daha təkmil texnologiyanın daim ortaya çıxması, veb-saytın tərtibatı ilə bağlı problem yaranır. Adi sabit layout artıq hər kəsə cavab vermir zəruri tələblər və tədricən köhnəlməyə başladı. İndi köhnə üsulların istifadəsi qaydadan daha çox istisnadır və bu tamamilə təbiidir.
Belə sadə bir nümunə təsəvvür edin - bir istifadəçi metro vaqonuna minərək işdən evə qayıdarkən saytınıza mobil telefon, kimin ekran həlli 320x480 piksel, o, ilə evə getdi masa üstü kompüter və saytınıza 1920x1200 piksel təsvir ölçülü 24 düym diaqonal monitorda baxdınız (və bu həddən çox uzaqdır). Sual, smartfonda və eyni nəticələrə nail olmaq üçün sabit tərtibatın necə istifadə edilməsidir böyük monitor(avtomatik miqyaslamağı bir kənara qoysaq). Yəni, telefonda görünməməsi lazımdır üfüqi sürüşmə və eyni zamanda, monitorda sayt ağın ortasında uğursuz dar bir zolaq kimi görünmürdü. boş ekran. Cavab yox.
Və burada tapşırığın öhdəsindən asanlıqla gələn rezin layout köməyimizə gəlir. Böyük bir monitorda saytı bütün ekran boyunca uzatmaq və ya müəyyən bir şablon genişliyi ilə, məsələn, ekran eninin 75% -i ilə məhdudlaşdırmaq günah deyil. Bu iş üçün əla olanlar var CSS xüsusiyyətləri maksimum eni Və min eni, bu, saytın genişliyini müəyyən məhdudiyyətlər daxilində saxlamağa imkan verəcək ki, bu da ən düzgün və estetik həlldir.
Rezin layoutun üstünlükləri və mənfi cəhətləriMaye quruluşunun əsas üstünlüyü, brauzer pəncərəsinin ölçüsünü dəyişdirərkən və fərqli ekran qətnamələri olan monitorlarda çox yönlü olmasıdır, fərqi olduqca çox dəyişə bilər. Yaxşı dizayn edilmiş veb sayt kifayət qədər ekran sahəsi tutan böyük bir monitorda əla görünəcək, lakin bir insanın çox şey qəbul etmədiyini xatırlamaq lazımdır. uzun xətlər mətn yazın və saytın genişliyini ağılla və məqbul hədlər daxilində hesablayın. Yaxşı, çox dar bir veb saytın böyük bir monitorda bədbəxt görünməsi heç kimə sirr deyil və həmişə ondan qaçınılmalıdır.
Kauçuk layoutun bir çox mənfi cəhətləri yoxdur, buna görə də onun populyarlığı və hər yerdə olması. Əsas çatışmazlıq ondan ibarətdir ki, çevik veb sayt yaratmaq sabit veb saytdan daha çətindir. Böyük şəkillər və ya fonlar vəziyyətində, təsvirin adekvatlığını qoruyaraq, şəkillərdə uzana bilən yerləri axtarmaq lazımdır. Düzendəki demək olar ki, bütün ölçülər faizlə göstərilməlidir, əlbəttə ki, ağıllı şəkildə hesablanmalıdır. Orijinal şəkil çox kiçikdirsə, miqyaslandırarkən böyük tərəfçox keyfiyyət itirəcək.
Digər tərəfdən, siz də götürsəniz böyük şəkil ehtiyatla, onda çox ağır olacaq və interneti zəif olan mobil cihazlardan sayta daxil olan istifadəçilər həddən artıq əlavə bayt yükləyəcəklər.
Bir rezin veb saytı hazırlayarkən, nəticəni müxtəlif ekran qətnamələrində yoxlamaq üçün çox vaxt sərf olunur və üstəlik, bunun üçün kifayət qədər layiqli diaqonalı olan bir monitor tələb olunur, əks halda onu necə yoxlamaq olar. Ancaq bütün bu çatışmazlıqlar rezin veb sayt tərtibatının üstünlükləri ilə müqayisədə heç bir şey deyil. HTML tərtibatı əsl sənətdir, hər layout dizayneri bunu başa düşmür. İstənilən layout növü hər yerdə deyil, uyğun olduğu yerdə istifadə edilməlidir.
HTML tərtibatı
Misal - rezinSəhifə 1
Tərkibində difenilquanidin olan təkrar əyilməyə kifayət qədər yüksək müqavimət göstərən rezinlərin nümunələri Cədvəldə verilmişdir. 4.15. Modulun və ya çarpaz əlaqənin hər bir dəyərində DPG kauçukları ən böyük yorğunluq müqavimətini nümayiş etdirdi.
Nümunə olaraq şinlərin yan divarları üçün rezindən istifadə etməklə, nümunələrin azot mühitində parçalanması zamanı DSC və DTG üsullarının NC, SBR, EPDM və halobutil rezin kompozisiyalarının müəyyən edilməsində ən yaxşı nəticələr verdiyi göstərilir.
Oksigen mühitində parçalandıqda əyrilər o qədər də informativ deyil, azot mühitində əldə edilən əyrilərlə uyğun gəlir.
Gəlin kristallaşan kauçuklara əsaslanan kauçuk nümunəsindən istifadə edərək bu effektləri nəzərdən keçirək, burada ən aydın şəkildə özünü göstərir.
K. A. Kərimovun (1965) işində rezin və polivinil nümunəsindən istifadə edərək göstərilmişdir ki, düz xətlərə yaxın dinamik gərginlik-deformasiya əyriləri statiklərdən yuxarı, sıfıra yaxın gərginliklər bölgəsində isə qalıq deformasiyalar yerləşir. dinamik yüklərdən üç qat daha yüksək statik ola bilər.
Ozon krekinqi zamanı rütubətin kimyəvi reaksiyalara təsiri oxşar kimyəvi quruluşa malik kauçuklardan hazırlanmış kauçuklarda eyni dərəcədə özünü göstərməli idi, lakin bu, NK və SKI-dən olan rezinlərin nümunəsində göründüyü kimi müşahidə edilmir.
Adaptiv veb sayt tərtibatı, birinci dərs. Əsas səhifənin tərtibatıP. A. Rebinder və V. V. Marqaritovun doldurucu dənələrin səthinin təbiətinin onun möhkəmləndirici təsirinə təsiri haqqında əldə etdiyi nəticələr böyük fundamental əhəmiyyət kəsb edir. Nümunə olaraq rezindən istifadə edərək, doldurucuların səthlərin molekulyar təbiətinə görə üç qrupa bölündüyünü göstərdilər.
Rezin üçün müxtəlif tələblər var. Nümunə olaraq, qazma və neft-mədən avadanlıqlarında istifadə olunan rezin götürək.
Bununla birlikdə, polimer və həlledicilər arasındakı qarşılıqlı təsirin molekullararası qüvvələrinin fərqli təbiəti, bu mühitlər üçün həlledicilik parametrlərinin oxşar dəyərlərində polimerin tamamilə fərqli şişməsinə səbəb ola bilər. Bu məsələ rezin nümunəsindən istifadə edərək ən ətraflı şəkildə öyrənilmişdir.
Çirklər və doldurucular ümumi çəkinin əhəmiyyətli bir hissəsini təşkil edə bilər və çox vaxt rezin özünün çəkisini üstələyir. Xam kauçuğa əlavə edilən çirklərin nə qədər müxtəlif və mürəkkəb olduğunu rezin nümunəsində görmək olar. avtomobil təkərləri.
Polimerlərin kimyəvi maddələrə qarşı müqavimətini artırmaq aktiv mediaçarpaz keçidlər bu mühitlərə davamlı olmalıdır. Hal-hazırda istifadə edilənlərdən ən davamlıı çarpaz keçidlərdir C-C növü, flüor rezin və xloropren kauçuk nümunəsində göstərildiyi kimi (bax.
Sürüşən rezin aşınma prosesinin vacib bir xüsusiyyəti metal səth ilə yüksək sürətlər, edir kritik temperatur sürtünmə ilə məhv edilir. Şərtlərdə rezin metal səthdə sürüşdükdə yüksək temperatur məruz qalma (200 - 400 C), onun məhv edilməsinin aşağıdakı əsas növləri mümkündür: sürtünmə səthində çatların görünməsi, sürtünmə cütünün hər iki təmas səthində rezin örtük təbəqələrinin əmələ gəlməsi və fəlakətli aşınma prosesinin baş verməsi. Nümunə olaraq nitril-butadien və etilen-propilen rezin əsasında rezin istifadə edərək, bu materialların məhvinə səbəb olan səbəbləri təhlil edəcəyik.
Doldurucuların tətbiqi rezin yumşaldıcı təsirini artırır. Doldurucunun iştirakı ilə yumşaldıcı təsirin daha böyük olduğu qənaəti aydındır və yalnız kauçukların müqayisəsinin rezin fazasının müxtəlif faktiki deformasiyalarında aparılması ilə əlaqələndirilir. şəxsi xarakter. Bu nəticə NC kauçuklarının tədqiqi zamanı toplanmış geniş materiala əsaslanır. Bununla belə, digər kauçuklardan rezin nümunələrindən istifadə etməklə daha ətraflı təhlil başqa bir şeyi göstərir.
Səhifələr: 1
Aktiv Bu an veb saytı özünüz necə etmək həddindən artıq fantaziya deyil və 2000-ci illərin əvvəllərində olduğu kimi mürəkkəb bir şeyi təmsil etmir.
İnternetdə möcüzənizi yaratmaq üçün, əlbəttə ki, hazır və istifadə edə bilərsiniz pulsuz mühərriklər veb saytlar və proqramlar (veb sayt qurucuları) üçün, onların köməyi ilə hətta html və css-də əsas biliklərə malik olmadan, optimallaşdırma və SEO baxımından peşəkar əsaslarla qısa müddətdə sıfırdan veb sayt yarada bilərsiniz.
Yoxsa başqa, daha düzgün yolla gedə bilərsiniz: oxumaq proqram kodu html və üslubu css-də elementlər. Bu istiqamətdə siz istənilən dizaynda vebsayt hazırlaya və ona özünəməxsus görkəm verə biləcəksiniz.
ONLAYN HTML TƏLİMİ
Mən sizə bir az vaxt sərf etməyi və html və css-in əsaslarını öyrənməklə başlamağı şiddətlə tövsiyə edirəm, çünki bunları bilmədən heç vaxt fraqmentlərdən heç birini özünüz istədiyiniz kimi düzəldə bilməyəcəksiniz, daha az yeni bir şey əlavə edə bilməyəcəksiniz. şablon daxilində.
informatika laboratoriyaları, imtahanİnternetdə bu mövzuda çoxlu maarifləndirici materiallar var.
SAYT ÜÇÜN ELEMENTLƏR
Veb sayt yaratmaq üçün necə yerləşdirməyi bilməlisiniz html səhifələri css menyusu, linklər, şəkillər və videolar, saytı düzgün optimallaşdıra və meta teqləri düzgün təyin edə bilərsiniz. İnternetdə veb-saytı harada və necə yerləşdirmək və yeni portal üçün hansı adla gəlmək, veb-saytın necə hazırlanacağını öyrənmək faydalı olacaq. müxtəlif proqramlar və alətlər.
Niyə lazımdır? adaptiv dizayn? Statistika ilə başlayacağam. Aşağıdakı slaydda 2013-cü ilin mart ayı üçün TNS məlumatlarına baxa bilərsiniz.
Gördüyünüz kimi, auditoriyanın təxminən üçdə biri smartfon və planşetlərdən gəlir. Və bu faizin yalnız hər ay artması şərtilə. Anladığınız kimi, burnunuzu küləyə tutmaq daha yaxşıdır!)
Problemi həll etmək üçün yalnız CSS kifayət etmədiyi üçün (təkcə üslubları deyil, həm də blokların strukturunu və məzmununu dəyişdirmək lazımdır), biz jQuery-dən istifadə edəcəyik. Çox vaxt veb sayt bir neçə blokdan ibarətdir: əsas və yan panellər. Saytı uyğunlaşdırsanız mobil cihazlar, onda bu 2 blokdan çox deyil (sol və sağ).
Aşağıda adaptiv layout koduna bir nümunə verilmişdir. Bu, çox əsasları ehtiva edir - qalanını öz mülahizənizlə əlavə edə bilərsiniz. Və qoşulmağı unutmayın jQuery kitabxanası! (bax: jQuery kitabxanasını necə daxil etmək olar?)
JS kodu (jQuery)
$(sənəd).ready(funksiya() (
var w = $(pəncərə).width(); // Pəncərə eni
var h = $(pəncərə).height(); // Pəncərə hündürlüyü. Biz istifadə etmirik. İstinad üçün
əgər (w
