Cyflwyniad i HTML a CSS i Ddylunwyr

Cyflwyniad i HTML a CSS ar gyfer dylunwyr.

Fel dylunydd graffig, mae'n debyg eich bod yn ymwybodol o'r berthynas sy'n datblygu'n barhaus rhwng dylunio a thechnoleg. Mae hyn yn arbennig o wir ar gyfer y rhai sy'n ymwneud â dylunio gwe. Yn y diwydiant hwn, mae angen i ni gael dealltwriaeth sylfaenol o sut mae ein cynlluniau wedi'u crefftio'n ofalus yn dod yn dudalennau gwe byw. Pan fyddwn yn deall hanfodion y broses hon (a'i chyfyngiadau), gallwn gyfathrebu'n gywir â datblygwyr a chreu gwefannau gyda perffaith picsel.

Nid yw hyn yn golygu bod angen i chi wybod sut i godio gwefan o'r top i'r gwaelod (er y byddai hynny'n wych!), Mae'n golygu bod angen i chi ddeall y pethau sylfaenol. Yn y swydd hon, byddwn yn dechrau gyda chyflwyniad sylfaenol iawn i HTML. Byddwch yn dysgu sut i dorri dyluniadau gwe yn Photoshop a fformatio HTML gan ddefnyddio CSS. Cyflwyniad i HTML a CSS i Ddylunwyr

Beth yw HTML?

Mae bron popeth a welwch wrth bori'r we yn ddogfen iaith marcio hyperdestun (HTML). Hyperdestun yn destun sy'n cyfeirio ac yn cyfeirio at destun arall ar eich sgrin, sy'n eich galluogi i gyrchu'r cynnwys gyda chlic syml. Iaith marcio yn set o dagiau wedi'u hamgáu mewn cromfachau sgwâr <>. Mae'r tagiau HTML hyn fel arfer yn dod mewn parau:

<tag cychwyn> : Adwaenir hefyd fel y tag agoriadol.
: a elwir hefyd yn y tag cau ac yn cynnwys blaen slaes /

Pan fyddwch chi'n amgáu cynnwys rhwng y ddau dag hyn, gelwir yr holl beth elfen :

Paragraff yw hwn

Pan gaiff yr iaith hon ei chyfieithu i'r Rhyngrwyd, ni fydd gwylwyr yn gweld y tagiau - dim ond y cynnwys rhyngddynt y byddant yn ei weld.

Mae HTML 5, y fersiwn gyfredol o HTML, yn cynnwys tua 100 o dagiau gyda phriodoleddau sy'n newid eu swyddogaeth neu olwg. Dim ond 30-40 o'r tagiau hyn sydd angen i chi eu gwybod i ddechrau deall a chreu HTML. Cymerwch olwg arnyn nhw a sylwch sut y cânt eu grwpio yn ôl swyddogaeth. Gadewch i ni weld hyn ar waith.

Torri delweddau yn Photoshop.

Cyflwyniad i HTML a CSS i Ddylunwyr

Cyn codio, mae angen i ni benderfynu pa adrannau o'r wefan ddylai gynnwys delweddau a pha rai y gellir eu codio. Gadewch i ni gymryd mantais offeryn Photoshop Tafell (cudd o dan submenu Offeryn cnwd ) ac amlygu meysydd fel ffotograff o burrito a taco joan .

Nawr mae angen i ni allforio ein pytiau - dewiswch File > Save for Web (Alt + Shift + Ctrl + S). Pan ddewisir pyt penodol, gallwch osod ei opsiynau allforio ar ochr dde'r ffenestr (JPG, PNG, ac ati). Os byddwch yn clicio ddwywaith ar ddarn penodol, fe welwch ffenestr naid " Paramedrau darn" - Mae hyn yn caniatáu ichi enwi ffeiliau darn penodol.

Yn ddiofyn, gosodir pob delwedd yn: /images/ subdirectory. Os ydych am allforio'r pytiau rydych yn eu creu yn unig, dewiswch " Pob darn personol" yn y ffenestr "Cadw". Cyflwyniad i HTML a CSS i Ddylunwyr

Creu Dogfen HTML Sylfaenol

Mae gennym ein sleiswyr, gadewch i ni greu dogfen HTML sylfaenol. Cyflwyniad i HTML a CSS i Ddylunwyr

Llinell 1 : Yn datgan mai tafodiaith HTML 5 yw iaith y ddogfen.

Llinell 2 : elfen cynrychioli gwraidd dogfen HTML. Mae hwn yn gynhwysydd gorfodol sy'n dynodi ffiniau ein dogfen.

3 : pennod yn cynnwys elfennau tudalen anweledig megis gwybodaeth meta, teitl, ac ati.

Llinell 4 : Dyma ddatganiad amgodio'r ddogfen − utf-8 - dewis diogel - gallwch ddarllen mwy am amgodiad nodau HTML yma .

Llinell 5 : Tudalen sampl Dyma deitl y dudalen sy'n ymddangos ym mar teitl y porwr.

6 : yn cau'r tag o linell 3.

Llinell 7 : Bydd yr elfen gorff hon yn cynnwys holl gynnwys gweladwy'r dudalen.

Llinell 8 : yn cau'r tag o linell 2. Mae'r elfen hon yn nodi diwedd y ddogfen. Cyflwyniad i HTML a CSS i Ddylunwyr

Mae yna ffyrdd posibl eraill o godio'r un dyluniad. Byddwn yn defnyddio tagiau semantig HTML 5 (pennawd, nav, erthygl, troedyn) i greu strwythur sylfaenol y ddogfen:

Dyma'r gosodiad wedi'i gyfieithu i HTML:

Ychydig o nodiadau:

Llinellau 11 a 12 : Elfennau yw hanfod y Rhyngrwyd gan eu bod yn cael eu defnyddio i greu hypergysylltiadau . Maent yn rhwym i briodoledd HREF a rhaid iddynt rwymo'r targed URL .

Llinellau 18–20 : Dyma rai tagiau fformatio testun: yn dynodi pennawd lefel gyntaf; yn dynodi paragraff; yn golygu toriad llinell.

Fformatio gyda Dalennau Arddull Rhaeadrol (CSS).

Cyflwyniad i HTML a CSS i Ddylunwyr

Pan fyddwch chi'n agor y ffeil HTML yn unig mewn porwr gwe, fe welwch nad yw wedi'i fformatio fel ein dyluniad blaenorol. Mae hyn oherwydd nad yw cod HTML yn ddigon - mae angen i ni ei fformatio ag ef Dalennau Arddull Rhaeadrol (CSS) . Mae CSS yn iaith dalen arddull a ddefnyddir i fformatio elfennau HTML.

Ond pam yn union mae angen i ni gyfuno HTML â CCS? Beth amser yn ôl, cyflawnwyd fformatio trwy ychwanegu priodoleddau at dagiau HTML. Fodd bynnag, arweiniodd hyn at god annarllenadwy ac na ellid ei gynnal. Yr ateb oedd gwahanu cynnwys y ddogfen (HTML) oddi wrth fformatio dogfennau (CSS).

Gadewch i ni Dadansoddiad Syml Rheol CSS :.

Dewisydd : Dyma'r elfen HTML rydych chi am ei steilio. Er enghraifft: <erthygl>

Ad : Gall rheol CSS gael un datganiad neu fwy. Mae pob datganiad yn cynnwys eiddo a gwerth ac yn cael ei wahanu gan hanner colon. Rydych chi'n gosod datganiadau mewn braces cyrliog {}. Cyflwyniad i HTML a CSS i Ddylunwyr

Eiddo : Dyma nodwedd arddull, yr ydych am ei newid. Er enghraifft: lliw cefndir, maint ffont ac ati.

Gwerth : Mae gan bob eiddo werth cysylltiedig ag ef. Er enghraifft: #ffcc11 (ar gyfer lliw cefndir), 16px (ar gyfer maint y ffont), ac ati.

Mae llawer o eiddo CSS, y gellir eu gosod ar gyfer pob elfen HTML, ond nid oes angen eu hysgrifennu i gyd eich hun. Gallwch ddibynnu ar osodiadau diofyn eich porwr, neu ddefnyddio dalen arddull sylfaenol sy'n ailosod eich porwr i osodiadau rhesymol. Yn wir, i ysgrifennu detholwyr mae gwneud hyn eich hun yn gofyn am lawer o wybodaeth a phrofiad.

Edrychwn ar rai rheolau CSS sydd eu hangen i fformatio ein dyluniad syml.

Priodweddau Lleoli CSS : yn bodoli 4 dull gwahanol (statig, sefydlog, cymharol ac absoliwt) sy'n ein galluogi i osod rhai elfennau yn ein dyluniad. Ar ôl gosod un o'r dulliau hyn, gallwch osod elfennau gan ddefnyddio'r eiddo uchaf, dde, gwaelod a chwith - byddant yn gweithio'n wahanol yn dibynnu ar ba un o'r 4 dull a ddefnyddiwch. Yn yr achos hwn hoffem leoli llun_plat, gan ddefnyddio absoliwt lleoli.

Model Blwch CSS : y model hwn yn ffrâm sy'n amgáu holl elfennau HTML, gan gynnwys ymylon, borderi, padin, a chynnwys. Yr ymyl yw'r ardal anweledig o amgylch y ffin a'r padin rhwng y ffin a'r cynnwys.

Os ydych chi wir eisiau dysgu mwy am godio, cymerwch gip i'r safle cŵl yma: Codecademy .