Aféierung an HTML an CSS fir Designer

Eng Aféierung an HTML an CSS fir Designer.

Als Grafiker sidd Dir Iech wahrscheinlech bewosst iwwer déi ëmmer evoluéierend Relatioun tëscht Design an Technologie. Dëst ass besonnesch wouer fir déi, déi am Webdesign involvéiert sinn. An dëser Industrie musse mir e Basisverständnis hunn wéi eis suergfälteg erstallt Layouten lieweg Websäite ginn. Wa mir d'Basis vun dësem Prozess verstoen (a seng Aschränkungen), kënne mir präzis mat Entwéckler kommunizéieren an erstellen Websäite mat perfekt Pixel.

Dëst bedeit net datt Dir wësse musst wéi Dir eng Websäit vun uewe bis ënnen codéiert (och wann dat super wier!), Et heescht just datt Dir d'Grondlage muss verstoen. An dësem Post fänke mir mat enger ganz Basis Aféierung an HTML un. Dir léiert wéi Dir Webdesignen am Photoshop opschneiden an HTML mat CSS formatéieren. Aféierung an HTML an CSS fir Designer

Wat ass HTML?

Bal alles wat Dir gesitt wann Dir um Internet surft ass en Hypertext Markup Language (HTML) Dokument. Hypertext ass Text, deen aneren Text op Ärem Écran verweist a verweist, wat Iech erlaabt Zougang zum Inhalt mat engem einfachen Klick. Markup Sprooch ass eng Rei vun Tags, déi a véiereckege Klammeren zougemaach sinn <>. Dës HTML Tags kommen normalerweis a Pairen:

<start tag> : Och bekannt als Ouverture Tag.
: och den Ofschlosstag genannt an enthält e Forward Slash /

Wann Dir Inhalter tëscht dësen zwee Tags aschléisst, gëtt dat Ganzt genannt element :

Dëst ass e Paragraph

Wann dës Sprooch op den Internet iwwersat gëtt, gesinn d'Zuschauer d'Tags net - si gesinn nëmmen den Inhalt tëscht hinnen.

HTML 5, déi aktuell Versioun vun HTML, enthält ongeféier 100 Tags mat Attributer déi hir Funktioun oder Erscheinung änneren. Dir musst nëmmen 30-40 vun dësen Tags wëssen fir HTML ze verstoen an ze kreéieren. Huelt e Bléck op hinnen a bemierkt wéi se no Funktioun gruppéiert sinn. Loosst eis dëst an Aktioun gesinn.

Ausschneiden Biller am Photoshop.

Aféierung an HTML an CSS fir Designer

Virun Kodéierung musse mir entscheeden wéi eng Sektiounen vun der Websäit Biller solle enthalen a wéi eng kodéiert kënne ginn. Loosst eis profitéieren Tool Photoshop Slice (verstoppt ënner Ënnermenü Crop Tool ) an Highlight Beräicher wéi eng Foto vun engem Burrito an taco joan .

Elo musse mir eis Snippets exportéieren - wielt Datei> Späicheren fir Web (Alt + Shift + Ctrl + S). Wann e spezifesche Snippet ausgewielt gëtt, kënnt Dir seng Exportoptiounen op der rietser Säit vun der Fënster setzen (JPG, PNG, etc.). Wann Dir op e spezifescht Fragment duebel klickt, gesitt Dir eng Pop-up Fënster " Fragmentparameter" - Dëst erlaabt Iech spezifesch Fragmentdateien ze nennen.

Par défaut ginn all Biller an: /images/ Ënnerverzeechnes gesat. Wann Dir nëmmen d'Snippets exportéiere wëllt, wielt " All personaliséiert Fragmenter" an der "Späicheren" Fënster. Aféierung an HTML an CSS fir Designer

E Basis HTML Dokument erstellen

Mir hunn eis Slicers, loosst eis e Basis HTML Dokument erstellen. Aféierung an HTML an CSS fir Designer

Linn 1 : Erklärt datt den HTML 5 Dialekt d'Sprooch vum Dokument ass.

Linn 2 : Element representéiert d'Wuerzel vun engem HTML Dokument. Dëst ass en obligatoresche Container deen d'Grenze vun eisem Dokument bezeechent.

3 : Kapitel enthält onsichtbar Säit Elementer wéi Meta Informatioun, Titel, etc.

Linn 4 : Dëst ass d'Dokumentkodéierungserklärung - ausf-8 - sécher Wiel - Dir kënnt méi iwwer HTML Charakter Kodéierungen liesen hei .

Linn 5 : Beispill Säit Dëst ass de Säittitel deen an der Titelbar vum Browser erschéngt.

6 : Zou de Tag Vun der Linn 3.

Linn 7 : Dëst Kierper Element wäert all siichtbar Inhalt vun der Säit enthalen.

Linn 8 : mécht den Tag zou vun der Linn 2. Dëst Element markéiert d'Enn vum Dokument. Aféierung an HTML an CSS fir Designer

Et ginn aner méiglech Weeër fir dee selwechten Design ze codéieren. Mir benotzen HTML 5 semantesch Tags (Header, Nav, Artikel, Fousszeilen) fir d'Basisstruktur vum Dokument ze kreéieren:

Dëst ass de Layout an HTML iwwersat:

E puer Notizen:

Linnen 11 an 12 : Elementer sinn d'Essenz vum Internet wéi se benotzt gi fir ze kreéieren hyperlinks . Si sinn un den HREF Attribut gebonnen a mussen d'Zil binden URL .

Linnen 18-20 : Dëst sinn e puer Textformatéierungstags: bezeechent eng éischt-Niveau Rubrik; bezeechent e Paragraph; heescht Linn Paus.

Formatéierung mat Cascading Style Sheets (CSS).

Aféierung an HTML an CSS fir Designer

Wann Dir just d'HTML Datei an engem Webbrowser opmaacht, gesitt Dir datt et net formatéiert ass wéi eise fréiere Design. Dëst ass well HTML Code net genuch ass - mir mussen et formatéieren Cascading Style Sheets (CSS) . CSS ass eng Stilblattsprooch déi benotzt gëtt fir HTML Elementer ze formatéieren.

Awer firwat genau musse mir HTML mat CCS kombinéieren? Virun enger Zäit gouf d'Formatéierung erreecht andeems Attributer un HTML Tags bäigefüügt ginn. Wéi och ëmmer, dëst huet zu onliesbaren an onhaltbaren Code gefouert. D'Léisung war den Dokumentinhalt (HTML) vun der Dokumentformatéierung (CSS) ze trennen.

Loosst eis einfach zerbriechen CSS Regel : .

Wieler : Dëst ass den HTML-Element deen Dir wëllt styléieren. Zum Beispill: <Artikel>

Annonce Ad : Eng CSS Regel kann eng oder méi Deklaratioune hunn. All Deklaratioun besteet aus engem Eegentum an engem Wäert a gëtt vun engem Semikolon getrennt. Dir setzt Deklaratiounen a gekrauselt Klammern {}. Aféierung an HTML an CSS fir Designer

Immobilie : dëst Stil charakteristesch, déi Dir wëllt änneren. Zum Beispill: Hannergrondfaarf, Gréisst Schrëft etc.

Wäert : All Propriétéit huet e Wäert verbonne mat. Zum Beispill: #ffcc11 (fir Hannergrondfaarf), 16px (fir Schrëftgréisst), etc.

Et gëtt vill CSS Eegeschaften, déi fir all HTML Element gesat ka ginn, awer et ass net néideg se all selwer ze schreiwen. Dir kënnt op d'Standardastellunge vun Ärem Browser vertrauen, oder e Basisstilblatt benotzen, deen Äre Browser op raisonnabel Astellungen zrécksetzt. Tatsächlech, fir schreiwen selectors et selwer maachen verlaangt vill Wëssen an Erfahrung.

Loosst eis e puer CSS Reegele kucken fir eisen einfachen Design ze formatéieren.

CSS Positionéierungseigenschaften : existéiert 4 verschidde Methoden (statesch, fix, relativ an absolut) déi eis erlaben verschidden Elementer an eisem Design ze positionéieren. Nodeems Dir eng vun dëse Methoden gesat hutt, kënnt Dir Elementer positionéieren andeems Dir déi iewescht, riets, ënnen a lénks Eegeschafte benotzt - se funktionnéieren anescht jee wéi eng vun de 4 Methoden Dir benotzt. An dësem Fall wëlle mir positionéieren plate_image, benotzen absolut positionéieren.

CSS Box Modell : dësem Modell ass e Frame deen all HTML Elementer ëmfaasst, dorënner Margen, Grenzen, Padding an Inhalt. De Rand ass dat onsichtbar Gebitt ronderëm d'Grenz an d'Padding tëscht der Grenz an dem Inhalt.

Wann Dir wirklech méi iwwer Kodéierung léiere wëllt, kuck emol op dëse coolen Site: Codecademy .