Kirja-arvostelu: Photoshopista HTML: ään
Jos olet uusi sivustojen luominen Photoshopilla, oppiminen muuttamaan nämä .PSD-tiedostot semanttisiin, standardien mukaisiin CSS- ja HTML-tiedostoihin voi olla hieman pelottava.
Loppujen lopuksi siellä on paljon hyviä palveluita siellä, jotka voivat viipaloida ja koodata tiedostoja sinulle. Mutta on olemassa tapauksia, joissa saatat haluta muokata niitä itse.
Siinä missä Photoshopista HTML-muotoon: Kuinka muokata kuvioita kuin ammattilainen Jeffrey Way, toimittaja Nettuts +, tulee.
Tässä 145-sivuisessa kirjassa koko prosessin muuntaminen .PSD-tiedostoksi toimivaksi sivuston suunnitteluksi käsitellään yksityiskohtaisesti koodin esimerkkien avulla.
Mallisivustoa käytetään kävijöiden lukemiseen läpi koko prosessin, vaiheittain, yhdellä ainoalla esimerkillä. Kaikki peruskoodausmuodosta, mikä tekee malleista cross-browser-yhteensopivan, katetaan.
Päivittäin - jos kuuntelet tarkasti - huudot voidaan kuulla ympäri maailmaa siitä, että kooderit yrittävät pakottaa suunnittelun paikalleen. Kyse ei ole vain kielten oppimisesta; muistiinpano on helppo tehtävä. Huudahduksen aiheuttavat kohdat näkyvät, kun tarkastelet sivustosi kymmenessä eri selaimessa, jotka kaikki tekevät sivustostasi eri tasoisia.
Kirja olettaa, että sinulla on perustiedot CSS: stä ja HTML: stä sekä Photoshopissa jo luotu malli. Kirjassa käytetty malli on yksinkertainen, mutta suunnittelun luomiseen käytetyt käsitteet voidaan helposti soveltaa monimutkaisempaan malliin.
Kirja alkaa osastolla siitä, miten tarkastellaan mallia ennen sukellusta HTML-koodin luomiseen.
Vaikka saattaisi tuntua luonnolliselta aloittaa välittömästi verkkosivustemme ulkoasun, tämä ei todellisuudessa voi olla pidemmälle kuin totuus. Sen sijaan meidän on ensin rakennettava tukipohjamme tai korotus, ja vasta kun se on valmis, voimme siirtyä visuaalisiin.
Poistamalla kolme perusosaa, joihin useimmat verkkosivustot sisältävät: otsikko, pääosa-ala ja alatunniste, ja sitten kirja hyppää suoraan perus-HTML-tiedoston luomiseen. Jälleen, kenenkään, jolla on HTML-perustiedot, ei ole ongelmia tämän osan kanssa.
Kun perus HTML-koodi on valmis, Photoshopista HTML: iin voit selata .PSD-tiedostojasi.
Ota hetki tarkastelemaan muotoilua Photoshopissa. Yritä tarkistaa kaikki tarvittavat kuvat. Muista, että ominaisuudet voidaan luoda uudelleen CSS: llä; joten ole luova.
Vaikka molemmat menetelmät tiedostojen viipymiseen mainitaan, kirjassa käytetään rajausta, leikkaamista ja liittämistä yhdistelemällä tarvitsemasi kuvat sen sijaan, että käytät viipalointityökalua.
Molemmat menetelmät ovat täysin päteviä. Suosittelen, että yrität molempia, ja valitse mikä on osoittautunut nopeimmaksi ... sinulle.
Pikanäppäimet tämän prosessin nopeuttamiseksi käsitellään perusteellisesti. Näiden kuvien tallentaminen verkkoon, mukaan lukien kaikki asetukset, joita sinun pitäisi käyttää ja minkä kuvatiedoston tyyppiä käytetään minkä tyyppisiin kuviin, käsitellään laajasti, samoin kuin CSS-spritsejä. Viimeisenä mutta ei vähäisimpänä tässä jaksossa on muutamia muistiinpanoja, jotka on tehtävä HTML-tiedostoon käyttäen taustatietoja.
Kun HTML ja kuvat ovat valmiita, on aika sukeltaa sivustosi CSS-sivustoon. Selaimen uudelleenasetukset korostuvat ja syvälliset, sekä standardoidun, oletusarvoisen CSS-tiedoston uudelleenrakentaminen.
Jokainen selaimesi käyttää hiukan "oletusarvoista CSS: tä", joka automaattisesti muotoilee merkinnän. Ensi silmäyksellä saatat ajatella, että tämä on erittäin hyödyllistä ... Jos jokainen selaimesi toteutti ne identtisesti, tämä ei olisi ongelma. Valitettavasti näin ei ole.
On olemassa useita CSS-periaatteita, mukaan lukien suhteellinen vs. absoluuttinen paikannus ja CSS-muodot, jotka on käsitelty käytännöllisellä ja käytännöllisellä tavalla. Niille, jotka eivät ole CSS: n asiantuntijoita, nämä osastot ovat erityisen informatiivisia, kun taas ne, jotka haluavat ohittaa näiden osien. Toinen suuri CSS-koodin piiri on, miten luoda tarttuvia alatunnisteita, mikä voi olla turhauttavaa uusille CSS-suunnittelijoille.
Kotisivun ylimääräisten sivujen koodaus on katettu, mukaan lukien pienet muutokset ulkoasuun ja sisältöön sekä mitä sinun on lisättävä CSS-tiedostoihisi. Kun olet tehnyt tämän osion, sinulla on kaikki sivupohjat, jotka ovat välttämättömiä täysin toimivan salkun verkkosivustolle.
Kirjan viimeinen sännöllinen luku kertoo, miten muotoilisi selaimesi yhteensopiva erityisesti vanhemmissa selaimissa, kuten Internet Explorer 6 ja 7: ssä. Yksi suurimmista kattavista ongelmista on avoimuuden käsittely kuvissa IE6: ssa , ja erilaisia ratkaisuja sen voittamiseksi.
Web-sivuston katselu Internet Explorer 7: ssä ja ensimmäisellä kerralla saa sinut karistumaan. Saatat saada onnekas, mutta suurimman osan ajasta löytyy lukuisia asioita, jotka on korjattava.
Loppuraportti kertoo, kuinka voit luoda jQuery-siirtymäefektejä, jotka sisällytetään sivuston suunnitteluun. Jokainen uusi JavaScript ja jQuery, se on mielenkiintoinen projekti, joka opettaa joitain perusmenetelmiä.
Kaiken kaikkiaan, jos olet ulkoistanut .PSD-tiedostojen muuntamisen HTML-muotoon tai jos olet yrittänyt suunnitella verkkosivustoja Photoshopissa, tämä kirja on ehdottomasti syytä lukea.
Täydellisiä, vaiheittaisia ohjeita, joita voidaan helposti soveltaa moniin projekteihin ja esimerkkikoodeihin, Photoshopista HTML: ään on varma, että aloitat omien mallien muuntamisen. Käytännöllisin käsittein käsitteitä voitaisiin käyttää käytännöllisesti katsoen mikä tahansa muotoilu!
Kirjassa on myös luomasi sivuston lähdetiedostot, joita voit käyttää omissa projekteissasi.
Kirjoitettu yksinomaan WDD: lle Cameron Chapman .
Mitä mieltä olet tästä kirjasta? Kerro meille kommenttialueelle ...