CS6-version saapumisen jälkeen Adobe toteutti Photoshopissa erittäin hyödyllisen vaihtoehdon verkkosivujen asetteluun ja kehittämiseen. Operaatio on erittäin helppoa ja ennen kaikkea nopea. Sovelluksen avulla voimme luoda CSS-tyylitaulukoita, joissa viitataan muotoihimme ja tekstitasoihimme. Menettely on yhtä yksinkertaista kuin kehittää mallimme, kopioida elementtimme koodiversio ja liittää se arkillemme.
Se on erittäin hyvä vaihtoehto erityisesti siksi, että sen avulla voimme nähdä suunnittelumme kehityksen visuaalisesti ja reaaliajassa. Tässä on joitain vinkkejä tämän vaihtoehdon käyttämiseen ja suurin suorituskyky:
Yritä olla tarkka
Ammattimaisen tuloksen saavuttamiseksi on suositeltavaa ottaa huomioon sivustosi mitat ja mittasuhteet. Aseta suunnittelemasi mallin leveys ja korkeus ja käytä niitä mallissasi. Kun kopioit CSS-koodin, sijoitamme kukin elementti viitteeksi kunkin elementin ja kankaan reunojen välisen etäisyyden pikseleinä. Ota huomioon myös koot ja hierarkkiset syyt, jotka aiot sisällyttää suunnitteluusi, mukaan lukien kunkin elementin kohdistus ja niiden välinen etäisyys, jotta käyttäjillesi saadaan paras mahdollinen luettavuus.
Oppaiden ja käyttöliittymän sääntöjen käyttö auttaa sinua rakentamaan siistin ja puhtaan mallin, jonka kaikki elementit ovat täysin linjassa.
Määritä kunkin elementin kaikki ominaisuudet
CSS-koodin kopiointivaihtoehto antaa meille mahdollisuuden suunnitella sivustomme erittäin tarkasti lomake- ja tekstikerrosten avulla. Jokaisen kerroksen sisältö kopioidaan leikepöydälle, ja voimme liittää sen nopeasti tyylisivulle. Kaappaa muotokerroksista seuraavien asetusten arvot:
- Koko
- Asema
- Iskun väri
- Täyttöväri (myös kaltevuudet)
- Pudota varjo
Tekstikerroksista voimme kaapata seuraavat arvot:
- Fonttiperhe
- Kirjasinkoko
- Kirjasimen paksuus
- Viivankorkeus
- Alleviivattu
- yliviivattu
- Yläindeksi
- Alaindeksi
- Tekstin tasaus
Pidä tämä mielessä ja aseta jokainen näistä arvoista antamaan etsimäsi tyyli.
Työskentele tasoryhmien kanssa
Tämä toiminto kääntää työmme järjestyksessä kahteen luokkatyyppiin, yksi kullekin ryhmälle, joka kokoaa yhteen muodon tai tekstin kerrokset, ja luokka kutakin näiden tyyppien tasoa varten. Jokainen ryhmäluokka edustaa vanhemman div-elementtiä, joka sisältää lapsen div-elementit, jotka vastaavat kuhunkin ryhmään lisättyjä kerroksia. Tällä tavoin lapsisäiliöiden ylä- ja vasemmanpuoleiset arvot asetetaan viitaten vanhempaan säilöön. Sinun on pidettävä mielessä, että tämä vaihtoehto ei ole käytettävissä älykkäiden objektien kanssa, eikä sitä voi käyttää useampaan kuin yhteen kerrokseen, elleivät ne ole ryhmitelty.
Vaiheet muunnettavaksi
Kun olet tehnyt mallin, olet muokannut jokaista elementtiä ja ryhmitellyt ne ryhmien mukaan, sinun on vain noudatettava näitä vaiheita:
- Siirry tasopaneeliin ja valitse yksi näistä kahdesta vaihtoehdosta:
- Napsauta hiiren kakkospainikkeella muoto- tai tekstikerrosta tai tasoryhmää ja valitse Kopioi CSS pikavalikossa.
- Valitse muoto tai tekstikerros tai tasoryhmä ja valitse sitten vaihtoehto Kopioi CSS Tasot-paneelin valikossa.
-
Liitä koodi tyylitaulukkoasiakirjaasi ja käytä sitä sivuillasi HTML5: n kautta.
