Videonäyttö 2025, Syyskuu
Kommenttien suunnittelu saattaa näyttää hyvin yksinkertaiselta. Ja se on! Mutta mielestäni yksinkertainen on tehokas tässä tapauksessa. Kommentit ovat niin tärkeä osa CSS-temppuja "
Alamme kaivaa Photoshopia täällä ja suunnitella kommenttialue. Aloitamme ylhäältä eli yksittäiset kommentit itse (toisin kuin "
Aloitamme tarkastelemalla joitain murheellisia töitä, joita tein kulissien takana, tarkentamalla joitain asioita, jotka oli tehtävä. Kuten lisäämällä muuhun "
Olemme melko lähellä sitä, että sivuston Snippets-alueen kotisivun rakentaminen on valmis. Heti alamme säätää asioita ja saada enemmän juttuja "
Katkelmien alueen suunnittelu "valmis" - voimme nyt siirtyä interaktiivisuuteen (lue: JavaScript). Lisätään erittäin ontuva siirto linkeille "
Meillä on nyt Photoshop-suunnittelu, josta voimme työskennellä Snippets-alueen kotisivulle. Se on paljon selattavampi kuin ennen, mutta pitää sateenkaaren "
Aika sukeltaa Snippets-alueelle! Eli sen todellinen sisältöalue. Otsikko on jo paikallaan. Katkelmien alue on melko suosittu. "
Tässä kuvaruudussa kääritään Almanac-osio. Almanakissa on melko selkeä hierarkia. Se menee: Etusivu> Almanachin etusivu> Omaisuus tai valitsin> "
Hyppäämme eteenpäin vain teini-ikäisenä täällä. Tämä on melko kattava kuvaruutusarja, mutta se on vain noin 40 tuntia ja tietysti tämä varsinainen projekti "
Olemme jo työskennelleet paikallisesti verkkotunnuksessa (v10.whatup). Nyt on aika aloittaa siirtyminen WordPressiin. Työskentelemme edelleen paikallisesti "
Meillä on kaikki tarvitsemamme sisältö tällä sivulähdöllä ja otsikko on paikallaan. Nyt voimme aloittaa CSS: n sisällön suunnittelussa, johon olemme menossa "
Kun aloitamme työskentelyn WordPressissä, on parasta, jos otamme tarkan kopion live-tietokannasta toimimaan paikallisesti. Joillakin verkkosivustoilla on esimerkiksi "
Nyt kun olemme taistelleet saadaksemme oikean sisällön Almanacin kotisivulle, voimme kaivaa todellista muotoilua CSS: llä. Päätimme mennä "
Tässä kuvaruudussa käsittelemme suurelta osin oranssia "Photostar", joka hallitsee alatunnistetta. Teemme tähden erillisessä tiedostossa Photoshopissa, jotta voimme tehdä "
Alamancin otsikko on tullut sisään, tällä kertaa Giovanni Difeterici. Käytämme monia tekniikoita, jotka olemme jo perustaneet aloittaaksesi "
Videot-osion mukautettu otsikkokuvitus on tullut, tällä kertaa Alyssa Nassner. Vietämme vähän aikaa Photoshop-tiedoston ja "
Tässä alatunnisteen rakentamisen viimeisessä kuvaruudussa työskentelemme alatunnisteessa, jossa ovat CodePen- ja ShopTalk-alueet. Meidän on vaihdettava HTML a "
Tässä kuvaruudussa keskitymme alaviitteen yläosan linkkien alla oleviin viivoihin. Olemme kompastumassa sen selvittämiseksi, mitä asioita pitäisi "
Katkelmien pää on tullut sisään, tällä kertaa Reagan Ray. Vietämme vähän aikaa Photoshopissa tällä kertaa sekoittamalla asioita hieman varmistaaksemme, että "
Kun alatunnisteen HTML-rakenne on paikallaan, meillä on mitä tarvitsemme muotoilun aloittamiseksi ja sen saamiseksi, että alatunniste näyttää siltä kuin suunnittelemme Photoshopissa. "
Tämä on viimeinen Photoshop-työ, jonka teemme nimenomaan alatunnisteesta, ennen kuin ryhdymme rakentamaan sitä. Tässä näytössä "
Työskentelemme alatunnisteen suunnittelun luomista Photoshopissa. Pika muistutus: Työskentelen Photoshopissa, koska tunnen olevani siellä luovempi ennen kuin hyppään yli "
Aloitamme vielä jonkin verran Photoshoppin-liiketoimintaa tässä kuvaruudussa, ja siinä on alin alatunniste, jossa on linkit kahteen muuhun suurimpaan projektiin, CodePeniin "
Lähdemme suurelle matkalle, joka on alatunniste! CSS-Tricksillä on aina ollut iso hieno alatunniste, eikä tämä muotoilu ole poikkeus. Se ei ole puhtaasti "
Kun alatunnisteen suunnittelu on valmis menemään Photoshopiin, voimme aloittaa sen rakentamisen staattiseen HTML- ja CSS-mallineeseemme. Ensimmäinen askel on antaa "
Meillä on toinen BSA-alue integroitua sivustoon. Tämän pitäisi olla hieman helpompaa, koska meillä on jo JavaScript käytössä ja se on vain "
Meillä on mallisto siitä, miten haluamme BuySellAds-alueidemme näyttävän, joten aloitetaan sen rakentaminen aidosti. BuySellAds-verkkosivusto tarjoaa tarvitsemamme koodin "
Ainoa asia, joka puuttuu nyt tullifoorumien otsikosta, on osa, joka todella sanoo "Foorumit"! Nick havainnollisti kättä, jolla oli merkki, jota tarkoitettiin "
Nyt kun tiedämme tarkalleen, minkä alueiden kanssa työskentelemme, palataan Photoshopiin ja pilkataan, miten haluamme näiden mainosvyöhykkeiden näyttävän. Meillä on ennakkotapaus "
Kuten tiedätte, jotkut CSS-Tricks-mainoksista ovat tavallaan "itse hallinnoituja", kuten Treehouse-pääsponsori. Otin sen, koska se on vain yksi "