Сайт беттеудің кең қолданылатын түрі-блоктар арқылы беттеу.

11 Тамыз 2014

Қазіргі уақытта сайт беттеудің екінші түрі-блок арқылы беттеу кестелер арқылы беттеуге қарағанда кең қолданылады.Бірақ кестелермен беттеу қерек жерінде пайдаланылып, әлі де қажеттілігін көрсетіп келеді.

Әлбетте блокпен беттеу үшін "div" тегі (ия болмаса див не контейнер деп те атайды)  пайдаланылады.Осы тақырыпты бастамас бұрын біз HTML туралы (HTML тегтері деген не, тармақ және блок тегтері, кестелер жайында) және CSS ережелерімен (селекторлар туралы, height-width-overflow,  padding-margin-border, float-clear ережелері) таныстық. Әрине бұл тегтер мен ережелердің барлығы емес, бірақ осы мағлұматтар әзірше блоктап беттеуді  және сол арқылы сайт парақшаларын жасауды үйренуге негіз болады.

Және осы сабақты ұғыну үшін барлық файлдарды тек локальдық сайт- Денверге арналған папкада, нақтылап айтқанда c:servers\home\localhost\www\newasus папкасында ашамыз.Ол папканы мен осы Денвер пакетін қондырғанда ашқанмын, ал сіз ол жаңа папканы басқаша атаған болуыңыз мүмкін.Егер естеріңізге түсіргіңіз келсе Денвер туралы жазылған мақаламды тағы да қарап шығыңыз.|

Осылай кез келген браузердің адрес теретін жолына  localhost/newasus деп жазып ENTER ді басқанда сайтымыз браузер бетіне шыға келеді.Ол үшін төмендегі айтылғандай негізгі index файл сол папкада болуы тиіс.

Cонымен, осы блоктық беттеуді талдау үшін екі файл ашайық, біреуіне HTML кодын жазып атын index.html не болмаса index.php деп, ал екіншісіне CSS ережелерін жазып атын style.css деп, екеуін де жоғарыда айтылған жаңа папкаға салып қояйық.

Неге нақты index деген атауды таңдағанымды алдыңғы Денвер - локальдық серверіне арналған мақаламда айтып өткенмін, бұл жерде тағы айтып өтейін.  

Себебі, сіз браузердің адресті теру тармағына өзіңізге керек сайттың атын жазғанда, ол браузер серверге осы сайт бойынша сұрау салады, ал сервер өзінде үнсіздік (по умолчанию) бойынша белгіленген тәртіппен сол аталған сайттың негізгі папкасынан әрқашан index.html немесе index.php-ні іздейді, яғни сайт index атаумен байланыста ашылады.

Осы жерде айта кететін маңызды мәселе мынада, мұны ұмытпау керек:

1. Егер сервер сайттың ең негізгі папкасынан index.html-ді тапса, онда ол браузерге жөнелтіледі және сол браузер өз интерпретаторы арқылы парақшаның HTML кодын web-парақшаға айналдырып сізге өзі көрсете салады.

2. Ал егер сервер  index.php-ны тапса, онда ол PHP скрипт коды серверде орындалып, шыққан HTML коды браузерге жөнелтіледі.Сосын оны браузер web-парақшасына айналдырып сізге көрсетеді.

Сонымен, кіріспе сөз осымен бітті, енді іске көшейік. 

Екі бағаналы сайттың үлгісін құрастыру.

Өздеріңіз байқап жүргендей, сайттардың құрылымы бір үлгімен жасалады, яғни оның басы, сосын екі немесе үш бағанасы және табаны болып келеді.Бүгін алдымен осы екі бағаналыны қарастырайық.Төменде соның пішінін немесе үлгісін құрастырдым.


Парақшаның басына әдетте сайттың аты және менікіндей меню топтамасы т.т., ал сол жақ бағанаға не болмаса оң жақ бағанаға меню,реклама т.т., ортадағы бөлікке сайттың үнемі өзгеріп тұратын бөлігі - оның мазмұны орналасады.Ал ең астына парақшаның табаны жайғасады.

Енді осы суретте көрініп тұрған бөліктер бойынша сайт парақшасының HTML кодын жазайық.

Ол үшін өзіміз білетін Notepad редакторын қолданамыз және ол файлдың атын алдында келіскеніміздей index.html деп сақтап, сайт жасауға арналған папкаға саламыз.


Бұл көрсетілген код жоғарыдағы үлгіге қарап жасалынды:

1. 9-ші жолда жазылған div id="yulgi" деп ішкі 4 блокты(бөлікті) ең сыртынан қоршап тұрған контейнерді белгіледім, ол үлгіде оның шекарасы оливканың түсімен бейнеленген.

Ал id туралы жоғарыда сілтеме арқылы көрсетілген селекторлар сабағында жазғанбын, ол идентификатор деп аталады.Бұл егер жалпылап айтқанда, әр div контейнерінің оның өзіне ғана тиесілі адресі деп те түсінуге болады, яғни әр үйдің адресі сияқты, қайталанбайтын.

2. 10-шы жолда көгілдір түспен белгіленген үлгінің "Басы-Header" контейнері өзінің селекторымен id="header" орналасты.

3. 11-ші жолда күлгін түсті "Сол жақ бағана-Left" контейнері өз селекторымен id="left" орналасқан.

4. 12-ші жолда қызғылт түске оранған "Парақша мазмұны-Content" контейнері және оның селекторы id="content" .

5. 13-ші жолда жасылмен боялған парақшаның "Табаны-Footer" бөлігі және оның селекторы id="footer".

Аңғарған болсаңыздар, жоғарыдағы браузерде көрінбейтін парақшаның <head></head> бөлігінде гиперсілтеме link арқылы CSS ережелері жазылған стильдік кестелер файлы "style.css" көрсетілген.Бұл ол файл парақшамен бірге жүктеледі дегенді білдіреді.

Бірақ ол файл әлі бос, оны толтыруды кейінге қалдырдық.

Сосын әр div контейнерінің ішіне блоктың өз аттарын"Басы-Header" сияқты жазып қойдым. 

Енді осы жазған кодымызды Денверде ашып көрейік, ол үшін "Start Denwer" деп оның ярлыгын түртіп оны іске қосамыз.Сосын 2 DOSокнолары жүгіріп өткен соң, кез келген браузерде localhost/newasus деп жоғарыда көрсетілген  HTML кодында жазылған парақшамызды шақырамыз.Сіз newasus -тың орнына index.html орналасқан өз папкаңыздың атын жазыңыз. Нәтижесі төмендегідей болды:


Бұл жерде көріп отырғаныңыздай, "div" контейнерлері блоктық тег екендіктерін көрсетіп,әрқайсысы браузердің бір қатарын түгелдей алып, бірінен кейін бірі орналасты.

Біздің ендігі мақсатымыз алдыңғы сабақтардан алған білімдерімізді қолданып, үлгіде көрсетілгендей етіп парақша жасау.Яғни, сол жақ бағана-сол жақта, ал парақша мазмұны оң жақта болуы керек.

Ол үшін стильдік кестелерге арналған style.css файлын жазайық.Олай істеу үшін әлбетте Notepad редакторында жаңа бет ашып, ішіне мен төменде көрсеткендей қылып CSS ережелерін жазамыз.

Яғни парақшамыздың үлгісінде көрсетілген әр "div" контейнерінің идентификаторын сипаттап шығамыз:


Енді осы көрсетілген стильдік кестелер яғни CSS ережелеріне талдау жасайық: 

Бұл стильдік файлда әр "div" контейнерімен көрсетілген блоктың немесе бөліктің фонының түсін олардың кодтары арқылы белгіледім және тек екі #yulgi мен #left идентификаторларымен белгіленген div контейнерлерінің ендерін пикселмен(px) көрсеттім.

1. Бірінші жолда парақшамыздың браузерде көсетілетін бөлігі, яғни body тегінің шекарасының браузер экранының шекараларынан ара қашықтығы "margin: 0px" деп беріліп тұр.Ол "margin" туралы селекторларға арналған сабағымда айтылған болатын.Бұл біздің парақшамыз браузердің шеттеріне тиіп тұрады дегенді білдіреді.Ал "padding:0px" деген body тегі мен оның ішкі құрамдары бір-біріне тақалып тиіп тұрады дегенді білдіреді.

2. #yulgi - идентификаторымен белгіленген div контейнері - бұл біздің негізге үлгі парақшамыз, оның ені 900 px- мен беріліп тұр.Ал "margin:0 auto" былай талқыланады :"0" деген контейнердің жоғарғы және астыңғы шеті браузер экраны шеттерімен тақалып тиіп тұр, ал "auto" деген бұл контейнер, яғни негізгі парақшаны сипаттайтын барлық бөліктерді өз ішіне алып тұрған осы үлкен div контейнеріміз браузер экранының екі жақ шетінен бірдей қашықтықта орналасады дегенді білдіреді. 

3. Байқасаңыз, #left - идентификаторымен белгіленген div контейнерінде  "float:left" жазылған.Естеріңізде болса, мен ол туралы өткен сабағымда жазғанмын:ол арқылы біз блоктарды қалауымызша парақ бетінде солға не болмаса оңға орналастыра аламыз.

Бұл жерде ол арқылы біз осы аталған контейнерді сол жаққа орналастырып тұрмыз.

Енді осы келтірілген CSS ережелерінің парақшамызға қандай өзгеріс әкелгенін көру үшін тағы да браузерде localhost/newasus деп шақырамын.Ал сіз newasus-тың орнына өз папкаңыздың атын жазасыз.Нәтиже мынадай болды:


Бірақ нәтиже біз ойлағандай болмай шықты, табаны оң жаққа шығып кетті.

Мұны болдырмас үшін, осы "float" туралы болған сабақта "clear" ережесі жайында да айтылған.Естеріңізге сала кетсем, ол ереже жазылған тег айналасын бос ұстауға тырысады, яғни егер "clear:left" жазылса ол тегтің сол жағы бос болуы керек.Ал "clear:right" үшін керісінше оң жағы босауы талап етіледі, ал  "clear:both" екі жағының да бос болуын қамтамасыз етеді.

Қазіргі біздің жағдайымызда парақшаның табанын ең астына түсіру үшін, оның тегіне "clear:both" деп жазуымыз керек.Сонда "footer" идентификаторымен белгіленген "div" контейнері өзінің жанындағы басқа тегтерді байқап, өз орнын табатын болады.Яғни екі жағын да босатып төменге түседі.

Сонымен, жоғарыдағы айтылған бойынша "style.css" файлындағы #footer -ге өзгеріс енгіземіз:

 

Енді парақшамызды localhost/newasus деп ашып көрейік, сіз әлбетте өз папкаңызды ашасыз:


Әзірше дұрыс бағытта келе жатқан сықылдымыз.Енді "Парақша мазмұны-Соntent" жазылған оң жақтағы бөлікке көбірек сөздер жазып көрейік.

Ол үшін әрине жоғарыда көрсетілген "index.html" файлға Notepad редакторында өзгеріс енгіземіз:


Нәтижесін көру үшін бұрынғыдай Денверде localhost/newasus деп щақырамыз:


Көріп тұрғаныңыздай, сол жақ баған ішіндегі сөздер аз болғандықтан, оң жақтағы баған сол жақ бағанның төменгі жағына жалғасып барып орналасты.

Мұндай "бассыздықты" болдырмас үшін, стильдік файлға, яғни "style.css" файлының ішіндегі CSS ережелеріне өзгеріс енгіземіз.Бірақ, мұндай өзгерісті тек оң жақта орналасқан "Парақша мазмұны-Content" бөлігі контейнерінің "id="content" идентификаторына ғана жасаймыз.

Сонымен бұл проблеманы шешудің екі жолы бар.

1. Оған "float:right" деген ережені және осы оң жақтағы контейнердің енін нақты көрсетіп жазамыз.Оның енін табу үшін үлгіміздің толық енін еске түсірейік, ол #yulgi идентификаторында көрсетілген, яғни 900px.Ал сол жақтағы бағананың ені 300px, олай болса оң жақтағы "Парақша мазмұны-Content" контейнерінің еніне 600px- ге дейінгі мәндерді бере аламыз.Сонымен оны 596px деп белгілейік, сонда #content идентификаторы мынадай өзгеріске ұшырайды:   


Енді тағы да парақшамызды браузердің адрес теретін жолында сайт шақырғандай болып, Денверде localhost/newasus деп шақырайық.Әрине сіз newasus тың орнына өзіңіздің index.html файлы сақталып жатқан папкаңызды жазасыз.

  

Нәтиже ойлағанымыздай болып шықты.

2. Екінші жолы былай шешіледі:

Мен жоғарыда сілтеме бойынша көрсеткен "margin" туралы айтылған сабағымда, ол ереже арқылы HTML тегінің шекарасынан келесі тегтің шекарасына дейінгі бос кеңістікті белгілейді деп жазғанмын.

Осы анықтаманы қазіргі жағдайға қолдансақ болады, яғни бұл жерде біз оң жақтағы div контейнерінен сыртқы div id="#yulgi" контейнерінің сол жақ шекарасына дейінгі аралық "margin-left" -ті пайдаланайық.

Ол үшін оның өлшемін анықтаймыз.Яғни оң жақтағы div контейнеріміздің #content идентификаторына, өлшемі сол жақ бағананың ені "300px"-ден артық болатындай, "margin-left:304px" деген ережені қосып, стильдік кестелер файлына төменде көрсетілгендей етіп жазамыз:


Енді үлгіміздің қалай болып шыққанын көру үшін оны Денверде жоғарыда көрсеткендей шақырайық:


Бұл жолы да ойлағанымыздай болып шықты, яғни сіздер болашақта өз сайт парақшаларыңызды жасағанда осы екі үрдістің біреуін қолдануыңызға әбден болады. 

Егер сізге меню болмаса рекламаларға арналған сол жақ блоктың оң жақта болғаны ұнайтын болса, онда оның түк қиындығы жоқ.Тек бар болғаны CSS ережелері жазылған "style.css" файлындағы жоғарыда көрсетілген мәндерінің орнына төменде көрсеткендей өзгерістер жасаңыз:

1. Бірінші үрдіс бойынша:

  а. Сол жақ контейнердің идентификаторы "#left" те "float:left"-тың орнына "float:right" деп жазыңыз.

  б. Оң жақта орналасқан блок тың "#content"-идентификаторындағы  "float:right"-ты "float:left"-ке өзгертіңіз.


2. Екінші үрдіс бойынша:  

  а. Оң жақтағы "Парақша мазмұны-Content" бөлігінің  "#content" - идентификаторындағы "width:596px;float:right" -   тың орнына "margin-right:304px" деп жазыңыз.


Не болғанын көру үшін тағы да Денверде localhost/newasus (сіз өз папкаңызды жазасыз) деп парақшамызды шақырып, екі үрдіс бойынша да нәтиже бірдей болғанын байқаймыз:


Енді жоғарыда жазып кеткенімдей 3-бағаналы парақша бетін қалай құрастыруға болатынын көрейік:

Парақшаның үш бағаналы үлгісін беттеу.

Сайт парақшаларының үлгісінің үш бағаналысын жасау екі бағаналы үлгіге ұқсас, ол үшін алдыңғы жасаған үлгімізге бірнеше өзгерістер енгіземіз:

1. "undex.html" кодына төменде сары нұсқағышпен көрсеткендей тағы бір "div" контейнерін қосамыз.Оны id="#right" идентификаторымен белгілейміз.Бұл біздің оң жақ бағанамыз болады.

2. сол жақ контейнерімізді "меню" және оң жақ контейнерімізді "жарнама" деген сөздермен толтырамыз.


Енді CSS ережелер файлы "style.css"-ке де келесідей өзгерістер жасаймыз:

1. Сол жақ бағананың стиліне "width:200px" деп жаңа мән береміз. 

2. Оң жақ блоктың да енін "width:200px" деп және "float:right" арқылы оны оң жаққа орналастырамыз.

3. Енді екеуіне де симаған сөздерді келесі қатарға ауыстыратындай тағы бір CSS ережесі "word-wrap:break-word" қосып жазамыз.

 

Енді Денвер арқылы үш бағаналы үлгімізді тамашалау үшін тағы да localhost/newasus (сіз өз папкаңызды жазыңыз) шақырамыз:


Егер мақала көңіліңізден шықса, онда онымен төмендегі түйме арқылы достарыңызбен бөлісіңіз

Пікірлер