Yntroduksje ta HTML en CSS foar ûntwerpers

In yntroduksje ta HTML en CSS foar ûntwerpers.

As grafysk ûntwerper binne jo wierskynlik bewust fan 'e hieltyd ûntwikkeljende relaasje tusken ûntwerp en technology. Dit is benammen wier foar dyjingen dy't belutsen binne by webûntwerp. Yn dizze yndustry moatte wy in basisbegryp hawwe fan hoe't ús soarchfâldich makke yndielings libbene websiden wurde. As wy de basis fan dit proses (en syn beheiningen) begripe, kinne wy sekuer kommunisearje mei ûntwikkelders en meitsje websiden mei perfekt piksel.

Dit betsjut net dat jo moatte witte hoe't jo in webside fan boppen nei ûnderen kodearje (hoewol dat geweldich soe wêze!), It betsjut gewoan dat jo de basis moatte begripe. Yn dizze post sille wy begjinne mei in heul basale ynlieding foar HTML. Jo sille leare hoe't jo webûntwerpen yn Photoshop kinne snije en HTML opmaak mei CSS. Yntroduksje ta HTML en CSS foar ûntwerpers

Wat is HTML?

Hast alles wat jo sjogge as jo op it web blêdzje is in hypertext markup language (HTML) dokumint. Hypertekst is tekst dy't ferwiist en ferwiist nei oare tekst op jo skerm, sadat jo tagong krije ta de ynhâld mei in ienfâldige klik. Markup taal is in set fan tags omsletten yn fjouwerkante heakjes <>. Dizze HTML-tags komme normaal yn pearen:

<begjin tag> : Ek bekend as de iepeningstag.
: ek wol de slutingstag neamd en omfettet in foarút slash /

As jo ynhâld ynslute tusken dizze twa tags, wurdt it hiele ding neamd elemint :

Dit is in paragraaf

As dizze taal oerset wurdt op it ynternet, sjogge sjoggers de tags net - se sille allinich de ynhâld tusken har sjen.

HTML 5, de hjoeddeistige ferzje fan HTML, befettet sa'n 100 tags mei attributen dy't har funksje of uterlik feroarje. Jo moatte allinich 30-40 fan dizze tags witte om HTML te begripen en te meitsjen. Sjoch ris nei harren en fernimme hoe't se wurde groepearre troch funksje. Litte wy dit yn aksje sjen.

Snijde ôfbyldings yn Photoshop.

Yntroduksje ta HTML en CSS foar ûntwerpers

Foar it kodearjen moatte wy beslute hokker seksjes fan 'e webside ôfbyldings moatte befetsje en hokker kinne wurde kodearre. Lit ús profitearje helpmiddel photoshop Slice (ferburgen ûnder submenu Crop ark ) en markearje gebieten lykas in foto fan in burrito en taco joan .

No moatte wy ús snippets eksportearje - kies Triem> Bewarje foar web (Alt + Shift + Ctrl + S). As in spesifyk snippet selektearre is, kinne jo de eksportopsjes oan 'e rjochterkant fan it finster ynstelle (JPG, PNG, ensfh.). As jo op in spesifyk fragmint dûbelklikke, sille jo in pop-upfinster sjen " Fragmint parameters" - Hjirmei kinne jo spesifike fragmintbestannen neame.

Standert wurde alle ôfbyldings pleatst yn: /images/ submap. As jo allinich de snippets dy't jo meitsje wolle eksportearje, selektearje dan " Alle oanpaste fragminten" yn it finster "Bewarje". Yntroduksje ta HTML en CSS foar ûntwerpers

It meitsjen fan in Basic HTML dokumint

Wy hawwe ús slicers, litte wy in basis HTML-dokumint meitsje. Yntroduksje ta HTML en CSS foar ûntwerpers

Line 1 : Ferklearret dat it HTML 5-dialekt de taal fan it dokumint is.

Line 2 : elemint stiet foar de root fan in HTML-dokumint. Dit is in ferplichte kontener dy't de grinzen fan ús dokumint oanjout.

3 : haadstik befettet ûnsichtbere side-eleminten lykas meta-ynformaasje, titel, ensfh.

Line 4 : Dit is de dokumintkodearjende ferklearring - utf-8 - feilige kar - jo kinne mear lêze oer HTML-karakterkodearrings hjir .

Line 5 : Foarbyld side Dit is de sidetitel dy't ferskynt yn 'e titelbalke fan 'e browser.

6 : slút de tag fan lyn 3.

Line 7 : Dit lichemelemint sil alle sichtbere ynhâld fan 'e side befetsje.

Line 8 : slút de tag út rigel 2. Dit elemint markearret de ein fan it dokumint. Yntroduksje ta HTML en CSS foar ûntwerpers

D'r binne oare mooglike manieren om itselde ûntwerp te kodearjen. Wy sille HTML 5 semantyske tags (koptekst, nav, artikel, fuottekst) brûke om de basisstruktuer fan it dokumint te meitsjen:

Dit is de yndieling oerset yn HTML:

In pear notysjes:

Rigels 11 en 12 : Eleminten binne de essinsje fan it ynternet sa't se wurde brûkt om te meitsjen hyperkeppelings . Se binne bûn oan it HREF-attribút en moatte it doel bine URL .

Rigels 18-20 : Dit binne wat tags foar tekstopmaak: jout in koptekst op it earste nivo oan; jout in paragraaf oan; betsjut line break.

Opmaak mei Cascading Style Sheets (CSS).

Yntroduksje ta HTML en CSS foar ûntwerpers

As jo gewoan it HTML-bestân iepenje yn in webblêder, sille jo sjen dat it net is opmakke lykas ús foarige ûntwerp. Dit is om't HTML-koade net genôch is - wy moatte it opmeitsje mei Cascading Style Sheets (CSS) . CSS is in stylblêdtaal dy't brûkt wurdt om HTML-eleminten op te meitsjen.

Mar wêrom krekt moatte wy HTML kombinearje mei CCS? In skoft lyn waard opmaak berikt troch attributen ta te foegjen oan HTML-tags. Dit resultearre lykwols yn ûnlêsbere en net te ûnderhâlden koade. De oplossing wie om de dokumintynhâld (HTML) te skieden fan 'e dokumintopmaak (CSS).

Lit ús ferdieling ienfâldich CSS regel : .

Selektor : Dit is it HTML-elemint dat jo stylearje wolle. Bygelyks: <artikel>

Ad : In CSS-regel kin ien of mear deklaraasjes hawwe. Elke deklaraasje bestiet út in eigendom en in wearde en wurdt skieden troch in puntkomma. Jo pleatse deklaraasjes yn krullende beugels {}. Yntroduksje ta HTML en CSS foar ûntwerpers

Besit : dit is styl karakteristyk, dy't jo feroarje wolle. Bygelyks: eftergrûnkleur, grutte lettertype ensfh.

wearde : Elts eigendom hat in wearde ferbûn mei it. Bygelyks: #ffcc11 (foar eftergrûnkleur), 16px (foar lettertypegrutte), ensfh.

Dêr is in protte CSS-eigenskippen, dat kin wurde ynsteld foar eltse HTML elemint, mar it is net nedich om te skriuwen se allegearre sels. Jo kinne fertrouwe op de standertynstellingen fan jo blêder, of brûk in basisstylblêd dat jo blêder weromset nei ridlike ynstellings. Yn feite, oan skriuwe selectors sels dwaan freget in soad kennis en ûnderfining.

Litte wy nei wat CSS-regels sjen dy't nedich binne om ús ienfâldige ûntwerp te formatteren.

CSS Positioning Eigenskippen : bestiet 4 ferskillende metoaden (statysk, fêst, relatyf en absolút) wêrtroch't wy bepaalde eleminten yn ús ûntwerp kinne pleatse. Nei't jo ien fan dizze metoaden ynsteld hawwe, kinne jo eleminten pleatse mei de eigenskippen fan boppe, rjochts, ûnder en lofts - se sille oars wurkje ôfhinklik fan hokker fan 'e 4 metoaden jo brûke. Yn dit gefal wolle wy graach posysje plate_image, mei help fan absolút posysjonearring.

CSS Box Model : dit model is in frame dat alle HTML-eleminten omfettet, ynklusyf marzjes, rânen, padding en ynhâld. De marzje is it ûnsichtbere gebiet om de grins hinne en de padding tusken de grins en de ynhâld.

As jo ECHT mear wolle leare oer kodearring, Sjoch mar ris nei dizze coole side: Codecademy .