Astăzi, voi continua seria de articole despre construirea unui site web.
Deci, după instalarea script-am ales (pentru lecții vor fi folosind DLE), avem nevoie pentru a crea un nou design pentru site-ul nostru nu a fost ca sute de alte site-uri din rețea.
Trebuie să spun că nu știe elementele de bază .html și .css nu poate impune proiectare.
Pentru a începe, vom avea nevoie pentru a trage un design. În primul rând, aș dori să atrag lecția, dar va dura mult timp, așa că, de exemplu, am luat un șablon pentru aspect gata, astfel încât să nu pierdeți timpul pe ea desen. Găsiți lecții de desen, aveți posibilitatea să proiectați pe mai multe resurse de pe rețea. Te sfătuiesc, dacă puțină imaginație, să ia cu fiecare lecție orice părți, și să le picteze în felul lor. Complet redesenare are nici un sens, pentru că mulți au făcut înainte.
Deci, să ne ia un astfel de design.
Descărcați șablonul în format .psd (pentru Photoshop), puteți aici.
După ce ați descărcat șablonul, trebuie să-l taie și coase în cod. Ce face? De ce nu se poate pe deplin „plug in“ imaginea de ansamblu? Totul este destul de simplu, în cazul în care designul va fi o imagine, pe care nu poți schimba nimic și de a scrie ceva.
Prin urmare, imaginea ar trebui să fie tăiate, astfel încât o parte a imaginii poate fi cusute în codul, și atunci când adăugați știri sau orice înregistrări, se întind în mod automat, fără a ne îndepărta de dimensiunile imaginii. Din nou, ar trebui să fie tăiate în funcție de aspectul pe care doriți să îl utilizați. Acum în vogă aspect folosind divs, dar eu nu am recunoscut, ca are multe limitări, și să plătească tribut la moda nu am de gând. Prin urmare, lecția va fi folosind tabele de aspect. Te sfătuiesc să combine cele două aspect. În acest fel veți obține un rezultat mai bun.
Deci, mai întâi trebuie să taie modelul.
Rulați Photoshop și încărcați o imagine în ea.
Imaginea trebuie să fie în format .png sau .gif. De ce este necesar? Este simplu. Aceste formate acceptă canalele alfa și transparență. Acest lucru înseamnă că întregul fundal va fi transparent. Dacă-l taie în .jpg, rămâne un fundal alb, sau ceea ce el este acolo pentru tine. Prin urmare, site-ul va trebui să facă fundal de aceeași culoare cu fundalul nu este oroare. Mulți folosesc .gif, dar l-am refuzat, deoarece IE nu înțelege cu adevărat transparență în acest format, și trebuie să scrie o grămadă de cod, care va crește greutatea paginii. De asemenea, acest format are o calitate destul de slabă și de display-uri nu foarte bune umbre. Cu toate acestea, imaginile în format .png, cântărește destul de mult, și poate copleși foarte mult sat. Pentru a evita acest lucru, există plus față de Photoshop, care vă permite să salvați imagini în format SuperPNG. Acesta este același .png, numai cu capacitatea de a elimina meta tag-uri, informațiile pe imagine, reducând astfel greutatea imaginii este chiar mai mică decât .gif.
Deci, să continuăm. Prin descărcarea imaginii, trebuie să-l taie. Dar cum? Să ne uităm la imaginea în sine.
Deci, avem nevoie de o etichetă sau logo-ul în sine. Acesta poate fi obținut în două moduri - de a păstra doar o singură inscripție sau taie o parte din fundal. Te sfătuiesc să salvați numai inscripția, dar puteți face la discreția sa.
„Linie“, puteți utiliza instrumentul pentru a determina dimensiunea exactă în pixeli.
In partea de sus am stabilit grosimea dorită a obiectului strangeti prea tare pentru noi dorit o margine și de ambele părți a pus un ghid. Dacă cineva știe o opțiune mai convenabil pentru a măsura - voi fi recunoscător. Dar, atâta timp cât l-am folosit. Să instalați ghiduri de pe capacul nostru.
Pentru a face mai clar, să clasifice o parte a design-ului nostru.
După cum puteți vedea, site-ul este împărțită într-o pălărie, bara laterală, conținut și pivniță. Bazat pe acest lucru și va construi design și aspectul nostru.
După cum puteți vedea, avem o mulțime de detalii mici, mulți ar putea spune, „Dar era imposibil să taie complet bloc?“. Nu, nu poți. În acest caz, aspectul va fi aleatorie, și nu se va schimba în funcție de informațiile conținute în ea. Prin urmare, trebuie să taie toate micile detalii. Vei înțelege de ce acest lucru este necesar, pe măsură ce trece la scrierea de cod.
Așa că am marcat tot ceea ce avem nevoie să taie, iar acum este timpul pentru a face cele mai tăiere. Ghidul ne va ajuta să nu ne ducă dincolo de sectorul dorit. Alegeți instrumentul „cadru“. și selectați partea dorită pentru tăiere. Acum, dublu klatsat al mouse-ului în loc de separare, iar imaginea este decupată.
În același mod vom face cu toate părțile șablonul nostru.
Acum avem o mulțime de felii de piese șablon care după ce a scris codul, va fi design-ul nostru. Rețineți că secțiunile de etichete, referințe etc. tăiat inutile deoarece Aceste informații text, care va depinde de setările motorului nostru și avem nevoie de funcții.
Pentru mai multe instrucțiuni detaliate cu privire la modul de a lucra în Photoshop, se referă la setul de instrucțiuni al rețelei.
Doar posta tutoriale pentru lucrul cu HTML si CSS, care sunt necesare pentru următorul nostru articol.
HTML pentru cei care sunt în rezervor
- Dacă nu aveți timp să-și petreacă toată ziua pe piață, aveți posibilitatea de a vinde o masina completarea unui chestionar. Și cumpărătorii pentru a găsi masina ta te.
- Acum este foarte profitabil să cumpere imobiliare. Prețurile de proprietate au scăzut, și este în avantajul nostru. Nu pierdeți momentul.
Stimați cititori! Dacă ați găsit o greșeală în text, nu fi leneș, evidențiați cuvântul și apăsați CTRL + Enter. Să facem curat limba!
Știri legate de: dezvoltarea site-ul. șablon de tăiere
Din nou, actualizarea blog-ul design-ul
Lupta veșnică sau DIV VS TABLE
Acesta a fost mult timp o luptă între aderenții DIV'ami gramaticale și de aspect tabele. Fiecare dintre ei au argumentele lor. Inițial am fost de a impune masa, deoarece la acel moment nu a fost încă divuri. Apoi, el a început să se observe că mulți oameni folosesc divuri, și să îndemne pe alții să facă acest lucru. Se pare că argumentele
Traducere script-scandinav și un șablon pentru ea
Într-unul dintre posturile am scris despre scenariul de licitație penny. Acest script nu am folosit, deoarece nu există nici un scop de a crea o licitație penny. Tocmai l-am testat pe un server de test, și asigurându-vă că funcționează - a postat un script de blog. Spre surprinderea mea, scenariul are o destul
Releu - Blog Design - Vedere din lateral
Deci, am ridica ștafeta de observator - blog-ul de design - o vedere din lateral. În plus, am schimba încă o dată designul blogului. Am schimbat designul blog-ul de cinci ori (o dată la două luni), și tot pentru că nu-mi place design - începe cu un singur - completarea celuilalt. Deci, de data aceasta am decis să idei