Aspect div care - Crearea unui blocuri de aspect două coloane în HTML, determina dimensiunea lor și a stabilit poziționarea în CSS
Bună ziua, dragă blog cititori KtoNaNovenkogo.ru. În primul articol pe structura blocului. Am încercat să înceapă să vorbească despre principiile sale, dar, din păcate, a trebuit mult pentru a distrage atenția pentru o explicație a conceptelor de bază vebmasteringa.
Într-adevăr nu am vrut să trec cu vederea aceste lucruri de bază, și îmi pare foarte rău pentru cei care știau deja toate acestea, și a vrut să audă că vorbesc despre aspectul site-ului și nu au auzit.
In acest articol voi încerca să recupereze și să îmbunătățească. Sper că nu va trebui să se abată de mult de la tema principală. Ei bine, scuze și pocăință, presupunem că peste, și este timpul pentru a merge în cele din urmă în mod direct la cauza.
Creați un aspect site-ul în coloana 2 aspect bazată pe DIV
Deci, într-un articol anterior, am creat pe dvs. de găzduire (deși pentru aceste scopuri este bine și serverul Denver local, apoi a se vedea o prezentare generală a capacităților sale.) Dosar test în care ați pus două fișierul principal de aspect noastre viitoare: Index.html și style.css. De fapt, ele vor fi versiunea noastră mai simplă a cadrului.
Din nou, probabil, au puține de a distrage atenția de la impunerea imediată, deoarece Nu oricine poate fi clar modul de a crea un dosar de test în directorul rădăcină, care este situat pe o gazdă reală. Precum și ce este - rădăcina site-ului și unde să caute să-l accesibil prin FTP. Dar, de fapt, problema nu este trivial pentru utilizator, prima dată se confruntă cu hosting.
Deci, va trebui să se conecteze mai întâi prin FTP. Date pentru a se conecta prin FTP a trebuit să-ți spun un furnizor de găzduire (citit aici despre faptul că este pentru găzduirea, în general, dar aici cu privire la achiziția acestuia).
După ce conectați prin FTP (am folosi în acest scop, programul FileZilla - aici despre el tot adevărul scris, și că exemplul său va spune totul), dreptul ferestrei programului, veți vedea conținutul unui director, care este alocat Hoster dumneavoastră site-uri, script-uri și lucruri de genul asta.
Cu toate acestea, acest director nu va fi directorul rădăcină. La rădăcină trebuie să fie în fișierul index.php, precum și toate celelalte fișiere și foldere ați folosit motor.
În acest scop, un director separat, cu toate acestea, numele, în funcție de gazda particulară, pot fi diferite. Structura folderului intern în directorul home (apare când vă conectați la site-ul FTP) pot fi, de asemenea, diferite, dar esența rămâne aceeași.
De exemplu, puteți vedea următoarea imagine:
fișierele de motor trebuie să copiați nu este în cea mai de sus director, disponibil pentru tine prin FTP, și așa-numitul dosar rădăcină. De unde știi care dintre directoarele prezent, există o rădăcină?
Ei bine, în cazuri extreme, puteți cere proprietarului de găzduire. Și asta, ei sunt obligați să vă ajute în astfel de chestiuni. Dar, de fapt, de multe ori va fi numit sau public_html sau htdocs.
Dacă sunteți un astfel de director nu este găsit, atunci ai nevoie pentru a solicita proprietarului de găzduire și, dacă este disponibil așa ceva, atunci aceasta este rădăcina proverbiala și acest lucru este în cazul în care va trebui să creați dosarul nostru suferința TEST, pentru care am scris și tu Sper că după ce a citit aceste câteva paragrafe.
Cum de a crea un director cu programul FileZilla? Da, foarte simplu. Veți avea nevoie doar pentru a deschide partea dreaptă a Konev director al programului, și faceți clic pe un spațiu gol, faceți clic dreapta și selectați „directorul Create“ din meniul pop-up.
Uf, am creat dosar test în site-ul director rujeola. Și mulțumesc pentru asta. În general, a fost posibil să-l și nu deranjez. Cum așa? Și asta e. director test ar putea fi configurat în orice folder internă pe site-ul Web, dar este mai ușor să fie încă de la rădăcină.
Pentru server local Denver va trebui să creați directorul TEST în următorul director:
La naiba, dacă totul este în considerare atât de detaliat, veți obține o carte mică pe structura de bloc, și, cea mai mare parte va fi dedicată elementele de bază ale vebmasteringa, dar pe de altă parte, nu se poate scrie, folosit pentru a analiza toate nuanțele pe rafturi. Nu te aștepta la nimic suficient de mari webmasteri, cunoscători, care toate acestea sunt departe de a fi o noutate.
Continuăm să vorbim despre aspectul. Fișierul index.html, ne vom întreba DIV-containere, care va construi cadrul nostru, și în fișierul style.css - descrie poziția și aspectul DIV-container. Acest lucru într-o coajă de nucă, și va, de fapt, veți vedea un pic mai târziu.
Faptul este că, în cea mai mare parte reală hosting server care rulează UNIX cum ar fi sistemul de operare, în care literele majuscule și minuscule sunt diferite (în contrast, decât Windows, lucru cu care suntem obișnuiți).
Începem să impună aspectul site-ului în 2 coloane pe divah
Așa cum am menționat la început, vom încerca să creăm un aspect cu două coloane, care poate fi reprezentată schematic după cum urmează:
Toate elementele se potrivesc într-o mare Div-recipient, astfel încât să puteți schimba dimensiunea și alinierea întregului aspect prin proprietățile containerului. În interiorul principalelor containere Div va fi responsabil pentru formarea de blocuri separate (capace, coloana din stânga, zona de subsol de conținut).
Noi le cerem să configureze dimensiunea și poziționarea cu pagina CSS. Să începem.
De ce în același folder? Pentru că, dacă nu trebuie să scrie nici o cale către fișierul (specificați doar numele), browser-ul va căuta ea în același director în cazul în care este acum executabil (în cazul nostru este index.html). Ie nici un fel este echivalent ca și cum aș fi setat calea spre style.css ca:
În acest sens, vreau să rețineți că nici măcar nu se poate deranja cu hosting sau server local. Pur și simplu creați pe computer în orice dosar și puneți-l în index.html și style.css noastre. Prescrierea în prima dintre ele drumul spre style.css dosar sub forma:
Asta e tot. Acum puteți deschide index.html (dublu-click pe el) în browser-ul, desemnat implicit pentru deschiderea fișierelor cu HTML pe computer, iar acest lucru va prelua automat style.css.
Această metodă este utilă în faza de învățare, dar totuși, tot ce ți-am spus despre lucrul pe serverul real hosting sau local, de asemenea, asigurați-vă că pentru a veni la îndemână mai târziu. Și acum lucrarea dintr-un dosar de pe computer poate fi chiar mai convenabil decât pe hosting. Deși, ca oricine.
Prevede setul dorit de blocuri din index.html
Acum vom avea nevoie pentru a crea patru containere DIV pentru toate părțile aspectul nostru 2 coloane (antet, coloana din stânga, câmpul pentru conținutul, subsol) și le-a pus într-o mare Div.
Div porțiuni din interiorul containerelor pentru aspect pot fi încheiate, pentru claritate, numele acestor blocuri. Toate acestea vom scrie între deschidere și închidere Corpul mesajului HTML Tag. Obțineți un cod ca acest lucru în index.html:
Ie imediat după corpul etichetei de deschidere, am înregistrat eticheta de deschidere principal de container aspect Div:
Care ID-ul predeterminat (în acest caz, id = "maket"). Mai târziu, pentru că ID-ul (citeste mai multe despre tag-ul selectori CSS, o clasa (clasa), Id-ul și selectorul universal), într-un stiluri de fișier style.css în cascadă, vom adăuga proprietăți CSS pentru a vă ajuta să determinați mărimea și alinierea principalelor Div.
După deschiderea principal Div am înregistrat patru containere de cod, care va fi elementele de aspect.
Toate aceste patru Div le-am numit ID-ul lor individuale, care apoi style.css le prescrie proprietati CSS care ajuta la configurarea dimensiunii și poziția relativă (poziționarea) a acestor containere. Pentru claritate, în care am comandat destinația lor. Oh, și înainte de a organismului de închidere am pus eticheta de închidere a Div principal pentru un întreg aspect:
Acum, dacă am creat deschis index.html în browser-ul dvs., vom vedea doar o listă de nume într-o coloană de 2 piese de aspect coloană. Dacă deschideți index.html în browser-ul FireFox plugin instalat cu Web Developer și selectați din opțiunile de meniu ale acestui plug-in „Contururile“ - „contur elemente de nivel bloc“, veți vedea ceva de genul imaginea de mai jos:
Ie totul sa dovedit exact cum ne-am dorit să - patru Div închise într-un container principal. Dar de ce, atunci, nu pare așa, așa cum am subliniat în structura diagramă bloc bazat pe structura blocului? Noi pur și simplu nu am scris nimic în style.css nostru, care va magic (folosind proprietăți CSS) pune totul în locul divelor sale.
Prevede proprietățile CSS pentru blocuri
Probabil ați auzit sau văzut că există aspecte lățime fixă (de exemplu, 800px), și poate fi, sau sunt, din cauciuc - lățimea se adaptează la rezoluția ecranului vizitatorului.
A doua opțiune (cauciuc) este adesea folosit pe forumuri, și un aspect cu lățime fixă este cel mai des folosit pentru site-uri web. Acest lucru este valabil mai ales acum, odată cu apariția de monitoare cu ecran lat cu rezoluție de ecran mare (cauciuc, se va uita la acest monitor nu este foarte bun).
De aceea, ne prescrie pentru principalul nostru număr Div de proprietăți CSS în style.css, ceea ce va crea un aspect cu lățime fixă (de exemplu, 800px) și aliniați-l central în raport cu marginile ecranului (în index.html pentru containerul principal, am înregistrat ID-ul numit maket):
Deci, să rupă acest record. Probabil ai știut deja că #MAKET (aceasta se numește un selector), a declarat că înregistrarea în fișierul CSS se va aplica numai Div, care este înregistrat ID-ul = „maket“. Parantezele sunt înregistrate proprietăți CSS cu valorile lor. Sintaxa generală în structura de înregistrare de fișier CSS este după cum urmează:
Remarcabil, cod CSS va funcționa la fel de bine, indiferent de cauza caracterului, adăugând sau nu adăugarea de elemente între liniile sale de migrație cod, spațiu sau tab - scrie într-un mod general, va fi mai convenabil.
Dar asta e ceea ce am de gând să spun în detaliu într-o serie de articole dedicate lucrării cu stiluri pentru webmasteri noi. Să ne uităm la fiecare proprietate separat.
Primele două coloane proprietate de aspect CSS:
Acesta vă permite să aliniați principal mijloc Div de la marginile din stânga și din dreapta a ecranului. Marja de proprietate în sine este proiectat pentru a cresta containerul de la frontiera externă a elementelor învecinate ale paginii.
În cazul nostru principal Div (bloc) este elementul exterior al nostru aspect două coloane, astfel încât Marja va stabili liniuță la frontierele sale la frontierele ecran browser-ul utilizatorului.
Prima valoare prescrisă în Marja, este zero - aceasta înseamnă că principalul Div (de fapt, structura în sine) va fi presată în contact cu marginea superioară și inferioară a ecranului (marginile de sus și de jos egale cu zero).
A doua valoare în Marja este înregistrată ca Auto - acest lucru înseamnă că adâncitura de la frontierele din stânga și din dreapta ale recipientului principal este distribuit uniform, astfel încât el (și, de fapt, aspectul în sine) va fi centrată în raport cu stânga și la dreapta marginile ecranului. Acestea sunt plăcinte.
Două linii de cod CSS, și cum să scrie textul pentru o explicație detaliată a semnificației lor (cosmar).
Lista datele de proprietate în style.css dvs.
Salvați modificările și a deschide index.html în browser. Vei vedea că este acum lățimea aspectul două coloane a încetat să fie egală cu lățimea ecranului și a redus la 800px. În același timp, el este, de asemenea, nivelat la centru:
Aliniați aspectul două coloane în mijloc
El nu înțelege acest lucru, așa că pentru el personal (Internet Explorer 5) va trebui să adăugați un organism pentru următoarea proprietate CSS:
Prin urmare, vom adăuga o nouă proprietate pentru principalul nostru Div, care va stabili alinierea textului în jurul valorii de structura de pe partea stângă (aceasta este valoarea implicită, ci pentru că sunt prescrise în caz contrar, trebuie să specificați-stânga aliniat în mod explicit):
Aceasta este urechile fentă, dreptul de a se adapta la browsere mai vechi. Cheia în style.css nostru va arăta astfel:
Blocuri de hașurat claritate
acum propun să facă blocuri de aspect interne. Pentru o mai mare claritate, vă sugerăm să nuanță Div culori diferite atunci când setați culoarea de fundal pentru ei, cu ajutorul special concepute pentru acest scop (proprietățile CSS - culoare de fundal.
Deci, prescriem pentru toate numele de ID-ul intern Div proprietatea noastră culoare de fundal cu diferite valori ale culorii de fundal, de exemplu:
Ca rezultat al nostru aspect două coloane bazat pe structura blocului va arăta aproximativ așa:
Acum, pentru a vedea limitele de containere individuale, nu vom trebui să recurgă la Developer plugin-ul Web (loc cit.).
Bloc antet, conform schemei bloc prezentată anterior în acest articol, trebuie să ne ia întreaga lățime a layout-ul, dar blocul de pe stânga ar trebui să aibă o lățime limitată. Pentru a seta acest lucru, puteți utiliza proprietățile CSS deja familiare lățime, de exemplu:
Ca rezultat al nostru aspect devine:
Definirea fluxului în jurul unității difuzorului din stânga prin alte unități Float
Ei bine, asta e deja mult mai aproape de diagramă bloc aspectul două coloane a site-ului, dar nu este încă destul de bine. De asemenea, este necesar să blocheze conținutul nu se află mai jos și spre dreapta blocului stânga.
Pentru a realiza acest lucru nu este complicat, există avantajul de proprietate CSS numit flotor. permițând să apăsați orice element de nivel de bloc în partea dreaptă a ecranului și setați-l să-și încheie de altă parte, situat în spatele lui (în HTML) elemente.
Bit nu este clar? Nu contează, acum ia în considerare exemplul tuturor. Adăugați o proprietate la blocul din stânga, permițând să-l apăsați la marginea din stânga a învelitorii, și așezați-l pe containerele dreapta situate mai jos în codul. Se va arăta în felul următor:
Ie Acesta a adăugat doar o singură proprietate unică Float cu o valoare stânga destinată pentru blocul stânga. Toate cod în style.css, creat de noi în acest moment, va fi:
Și aspectul nostru de aspectul Div va arata astfel:
Clasa! Aproape ceea ce vrei, dar apoi din nou, există o zgudui mică. Subsol (subsol) bloc nu ar trebui să se înfășoare în jurul coloana din stânga la dreapta, acesta trebuie să fie localizat în partea de jos a aspectului și ocupă întreaga sa lățime.
Mult noroc! Ne vedem în curând pe paginile de blog KtoNaNovenkogo.ru
Este nuanțele și subtilitățile SEO site-ul de optimizare.
La etapa de dezvoltare este modul în care înțeleg nevoia.
La fel ca pe site-ul dvs. este de a utiliza, nu știu.
Site-ul ca un blog în acest plan este potrivit.
O mulțime de text. Puteți lipi relegarea la orice loc.
Principalul lucru pe care ar avea sens, sau cuvântul în articol ca suprapunerea cu scris deja mai devreme. Prin urmare, densitatea redusă.
Dar este o necesitate.
aproximativ o lățime fixă. și apoi ca textele? 200 pixeli lățime și cuvântul va fi mai mult (cuvânt dimensiunea fontului lung, etc) începe model de decalaj ca nu? se merge în conformitate cu rezoluția 1024 (faerfoks) și multe (foarte multe) bloguri și site-uri dedicate aspectul minunat și CSS, se obține o astfel de confuzie si ezitarilor, nu este clar modul în care oamenii pot învăța aspectul cross-browser.