Kun kehitetään niin monia ohjelmointi-, tyyli- ja merkintäkieliä, web -suunnittelun oppimisesta tulee monimutkaisempaa kuin koskaan. Onneksi on olemassa paljon työkaluja, joiden avulla pääset alkuun. Etsi muutamia perusresursseja, kuten online-opetusohjelmia tai ajan tasalla oleva web-suunnittelukirja. Kun olet valmis aloittamaan, aloita hallitsemalla HTML- ja CSS -perusteet. Sitten voit alkaa tutkia kehittyneempiä web -suunnittelukieliä, kuten JavaScriptiä!
Askeleet
Tapa 1 /4: Web -suunnitteluresurssien etsiminen
Vaihe 1. Tarkista verkossa web -suunnittelukursseja ja opetusohjelmia
Internet on täynnä yksityiskohtaista tietoa web -suunnittelusta, ja suuri osa siitä on vapaasti saatavilla. Voit aloittaa ottamalla joitain ilmaisia verkkokursseja Udemyssa tai CodeCademyssa tai liittymällä koodausyhteisöön, kuten freeCodeCamp. Löydät myös web -suunnitteluohjeita YouTubesta.
- Jos tiedät tarkalleen, mitä etsit, kokeile hakua käyttämällä tiettyjä termejä (esim. "Luokan valitsimet CSS -opetusohjelmassa").
- Jos olet aloittelija, jolla ei ole kokemusta web -suunnittelusta, aloita oppimalla HTML- ja CSS -koodauksen perusteet.
Vaihe 2. Tarkastele luokan ottamista paikallisessa korkeakoulussa tai yliopistossa
Jos opiskelet korkeakoulussa tai yliopistossa, tarkista koulusi tietojenkäsittelytieteen osastolta tai tutustu kurssiluetteloosi, onko saatavilla web -suunnittelukursseja. Jos et ole koulussa, tarkista, tarjoavatko läheisesi korkeakoulut tai yliopistot web -suunnittelun jatkokoulutusta.
Jotkut yliopistot tarjoavat online -web -suunnittelutunteja, jotka ovat avoimia kaikille, jotka haluavat ilmoittautua. Tarkista verkkosivuilta, kuten Coursera.org, löytääksesi ilmaisia tai kohtuuhintaisia web -suunnittelutunteja, joita opettavat yliopiston opettajat
Vaihe 3. Hanki web -suunnittelukirjoja kirjakaupasta tai kirjastosta
Hyvä kirja web -suunnittelusta voi olla korvaamaton lähde, kun opit ja sovellat ammattiasi. Etsi ajantasaisia kirjoja yleisestä web-suunnittelusta tai tietyistä koodausmuodoista ja kielistä, jotka haluat oppia.
Verkkosuunnittelua koskevien aikakauslehtien ja blogiartikkelien lukeminen on myös hyvä tapa oppia uusia tekniikoita, saada inspiraatiota ja pysyä ajan tasalla uusimmista trendeistä
Vaihe 4. Lataa tai osta web -suunnitteluohjelmisto
Hyvä web -suunnitteluohjelmisto voi auttaa sinua rakentamaan verkkosivustoja tehokkaammin ja tehokkaammin, ja se on myös loistava tapa oppia koodauksen, komentosarjojen ja muiden suunnittelun keskeisten elementtien soveltamisen yksityiskohdat. Saatat hyötyä seuraavien työkalujen käytöstä:
- Graafiset suunnitteluohjelmat, kuten Adobe Photoshop, GIMP tai Sketch.
- Verkkosivustojen rakennustyökalut, kuten WordPress, Chrome DevTools tai Adobe Dreamweaver.
- FTP -ohjelmisto valmiiden tiedostojen siirtämiseksi palvelimellesi.
Vaihe 5. Etsi joitain verkkosivustojen malleja, joilla voit pelata aloittaessasi
Mallien käyttämisessä ei ole mitään vikaa, kun opit web -suunnittelun perusteet. Hae haluamiasi verkkosivumalleja ja katso tarkasti koodia saadaksesi käsityksen siitä, miten suunnittelija kokosi sivun. Voit myös kokeilla koodin muuttamista ja omien elementtien lisäämistä malliin.
Aloita etsimällä ilmaisia verkkosivustojen malleja tai kokeile web -suunnitteluohjelmiston mukana tulevia malleja
Tapa 2/4: HTML: n hallitseminen
Vaihe 1. Tutustu HTML -perustageihin
HTML on yksinkertainen merkintäkieli, jota käytetään verkkosivuston peruselementtien muotoiluun. Voit muotoilla verkkosivustosi eri osia tunnisteiden avulla. Tunnisteet näkyvät kulmissa hakasulkeissa ennen ja jälkeen jokaisen elementin ja antavat ohjeita siitä, miten elementti toimii sivulla. Sulje tunniste asettamalla a / viimeisen tunnisteen eteen kulmikiinnikkeiden sisään.
- Jos esimerkiksi haluat osan tekstistäsi lihavoitu, ympäröisit elementin tunnisteella seuraavasti: Tämä teksti on lihavoitu.
- Muutamia yleisiä tunnisteita ovat (kappale), (ankkuri, joka määrittää linkitetyn tekstin) ja (fontti, joka voi auttaa määrittelemään tekstin erilaisia määritteitä, kuten koko ja väri).
- Muut tunnisteet määrittävät itse HTML -asiakirjan eri osat. Sitä käytetään esimerkiksi sisältämään sivua koskevia tietoja, jotka eivät näy katsojalle, kuten avainsanoja tai sivun kuvauksia, jotka näkyvät hakukoneen tuloksissa.
Vaihe 2. Opi käyttämään tagin määritteitä
Jotkin tunnisteet tarvitsevat lisätietoja niiden toiminnan määrittämiseksi. Nämä lisätiedot näkyvät avaustunnisteessa, ja niitä kutsutaan attribuutiksi. Määritteen nimi näkyy heti tagin nimen jälkeen välilyönnillä erotettuna. Määritteen arvo liitetään määritteen nimeen = -merkillä ja sitä ympäröivät lainausmerkit.
- Jos esimerkiksi haluat tehdä osan tekstistäsi punaiseksi, voit tehdä sen käyttämällä tagia ja asianmukaista fontin värin määritettä, kuten tämä: Tämä teksti on punainen.
- Monet tehosteet, jotka aikaisemmin saatiin rutiininomaisesti HTML -tunnistemääritteillä, kuten eri kirjasinvärien asettaminen, tehdään tyypillisesti sen sijaan CSS -koodauksella.
Vaihe 3. Kokeile sisäkkäisiä elementtejä
HTML: n avulla voit myös sijoittaa elementtejä muihin elementteihin monimutkaisemman muotoilun luomiseksi. Jos esimerkiksi haluat määrittää kappaleen ja kursivoida osan kappaleessa olevasta tekstistä, voit tehdä sen näin:
Rakastan koodausta!
Vaihe 4. Tutustu tyhjiin elementteihin
Jotkin HTML -elementit eivät tarvitse sekä avaus- että sulkutunnisteita. Jos esimerkiksi lisäät kuvan, tarvitset vain yhden "img" -tunnisteen, joka sisältää tunnisteen nimen ja kaikki muut tarvittavat määritteet (kuten kuvatiedoston nimen ja mahdollisen vaihtoehtoisen tekstin, jonka haluat lisätä esteettömyystarkoituksiin). Esimerkiksi:
Vaihe 5. Tutustu HTML -asiakirjan perusasetteluun
Jotta HTML-pohjainen verkkosivustosi toimisi oikein, sinun on tiedettävä koko sivun muotoilu. Tämä edellyttää html -koodin alkamis- ja päättymispaikan määrittämistä sekä tunnisteiden käyttämistä sen määrittämiseksi, mitkä koodin osat näytetään verrattuna niihin, jotka tarjoavat piilotettuja taustatietoja. Esimerkiksi:
- Määritä sivusi HTML -dokumentiksi tunnisteella.
- Sisällytä sitten koko sivusi tunnisteisiin, jotta voit määrittää, missä koodisi alkaa ja päättyy.
- Aseta kaikki tiedot, joita ei näytetä katsojalle, kuten sivun otsikko, avainsanat ja sivusi kuvaus.
- Määritä sivusi runko (eli kaikki teksti ja kuvat, jotka haluat katsojan näkevän) tunnisteilla.
Tapa 3/4: CSS: ään tutustuminen
Vaihe 1. Käytä CSS: ää tyylien käyttämiseen HTML -asiakirjoissasi
CSS on tyylitaulukon kieli, jonka avulla voit käyttää eri tyylejä ja ulkoasua verkkosivullasi. Jos haluat esimerkiksi käyttää tiettyä fonttia tai tekstin väriä valikoivasti joihinkin sivusi tekstielementteihin, voit luoda CSS -tiedoston tätä varten. Sitten voit lisätä CSS -tiedoston HTML -asiakirjaasi missä haluat.
-
Jos esimerkiksi haluat, että CSS -tiedosto muuttaa kaikki HTML -asiakirjasi kappale -elementit vihreiksi, voit luoda.css -tiedoston, joka sisältää rivit:
- p {
- väri: vihreä;
- }
- Tallennat sitten tiedoston nimellä style.css.
- Jos haluat soveltaa tyylitaulukkoa HTML -asiakirjaasi, lisää se tyhjäksi linkkielementiksi tunnisteisiin. Esimerkiksi:
Vaihe 2. Tutustu CSS -sääntöjoukon elementteihin
Yksittäistä CSS -koodin osaa kutsutaan”sääntöjoukkoksi”. Sääntöjoukko sisältää eri elementtejä, jotka määrittävät koodisi tehtävän. Nämä sisältävät:
- Valitsin, joka määrittää tyylittävän HTML -elementin. Jos esimerkiksi haluat, että sääntöjoukko vaikuttaa kappale -elementteihin, aloita sääntöjoukosi p -kirjaimella.
- Ilmoitus, joka määrittää ominaisuudet, jotka haluat muotoilla (kuten kirjasimen väri). Ilmoitus on hakasulkeissa {}.
- Ominaisuus, joka määrittää tyylittävän HTML -elementin ominaisuuden. Esimerkiksi tunnisteessa voit määrittää, että haluat muotoilla tekstin värin.
- Ominaisuuden arvo määrittelee nimenomaisesti, miten haluat muuttaa ominaisuutta (esim. Jos ominaisuus on fontin väri, ominaisuuden arvo olisi "vihreä").
- Voit muokata useita eri ominaisuuksia yhdessä ilmoituksessa.
Vaihe 3. Käytä CSS: ää tekstiisi saadaksesi ladattavan tekstin näyttämään hyvältä
CSS on hyödyllinen erilaisten tehosteiden lisäämisessä tekstiin ilman, että jokaista ominaisuutta täytyy erikseen koodata HTML -muodossa. Kokeile muuttaa erilaisia ladontaominaisuuksia CSS: ssä, mukaan lukien:
- Fontin väri
- Fonttikoko
- Fonttiperhe (esim. Fonttivalikoima, jota haluat käyttää tekstissäsi)
- Tekstin tasaus
- Viivankorkeus
- Kirjainväli
Vaihe 4. Kokeile laatikoita ja muita CSS -asettelutyökaluja
CSS on myös hyödyllinen lisäämällä sivullesi houkuttelevia visuaalisia elementtejä, kuten tekstiruutuja ja taulukoita. Lisäksi voit käyttää sitä sivusi yleisen asettelun muuttamiseen ja eri elementtien sijoittamiseen toisiinsa nähden.
Voit esimerkiksi määrittää määritteitä, kuten elementin leveyden ja taustavärin, lisätä reunuksen tai asettaa marginaaleja, jotka luovat tilaa sivusi eri elementtien väliin
Tapa 4/4: Työskentely muiden suunnittelukielien kanssa
Vaihe 1. Opi JavaScript, jos haluat lisätä interaktiivisia elementtejä sivuillesi
JavaScript on hyvä kieli oppia, jos haluat lisätä lisäominaisuuksia verkkosivustoihisi, kuten animaatioita ja ponnahdusikkunoita. Osallistu kurssille tai etsi online -opetusohjelmia siitä, miten voit koodata JavaScript -koodilla ja sisällyttää koodatut elementit verkkosivuillesi | HTML: n avulla.
Ennen kuin voit perehtyä JavaScriptiin, sinun on tunnettava HTML- ja CSS -sivujen rakentamisen perusteet
Vaihe 2. Tutustu jQueryyn JavaScript -koodauksen helpottamiseksi
jQuery on JavaScript-kirjasto, joka voi yksinkertaistaa Java-ohjelmointia antamalla sinun käyttää erilaisia esikoodattuja JavaScript-elementtejä. jQuery on loistava työkalu, jos olet jo perehtynyt JavaScript -koodauksen perusteisiin.
Voit käyttää jQuery -kirjastoa ja monia muita arvokkaita resursseja jQuery.org -sivuston kautta
Vaihe 3. Opiskele palvelinpuolen kieliä, jos olet kiinnostunut taustakehityksestä
Vaikka HTML, CSS ja JavaScript ovat ihanteellisia web-suunnittelijoille, jotka keskittyvät siihen, mitä käyttäjä näkee ja tekee verkkosivustolla, palvelinpuolen kielet ovat hyödyllisiä, jos olet kiinnostunut kulissien takana olevasta työstä. Jos haluat oppia taustakehityksestä, keskity kielten oppimiseen, kuten Python, PHP ja Ruby on Rails.
Nämä kielet ovat hyödyllisiä sellaisten tietojen hallintaan ja käsittelyyn, joita käyttäjä ei näe. Esimerkiksi PHP: n avulla voidaan rakentaa suojattuja salasanan luontityökaluja sivustoille, jotka edellyttävät kirjautumista
Ohjetiedostot
HTML -huijaussivu
CSS -huijausarkki
