Tobulėjant tiek daug programavimo, stiliaus ir žymėjimo kalbų, interneto dizaino mokymasis tampa sudėtingesnis nei bet kada. Laimei, yra daugybė įrankių, padedančių jums pradėti. Ieškokite kelių pagrindinių išteklių, pvz., Internetinių vadovėlių ar naujausios žiniatinklio dizaino knygos. Kai būsite pasiruošę pradėti, pradėkite įsisavinti HTML ir CSS pagrindus. Tada galite pradėti tyrinėti pažangesnes interneto dizaino kalbas, pvz., „JavaScript“!
Žingsniai
1 metodas iš 4: žiniatinklio dizaino išteklių paieška
Žingsnis 1. Patikrinkite internete interneto dizaino kursus ir vadovėlius
Internetas yra pilnas išsamios informacijos apie žiniatinklio dizainą ir daug jos yra laisvai prieinama. Galite pradėti lankydami nemokamus internetinius „Udemy“ar „CodeCademy“kursus arba prisijungdami prie kodavimo bendruomenės, pvz., „FreeCodeCamp“. Taip pat „YouTube“galite rasti žiniatinklio dizaino vaizdo įrašų pamokų.
- Jei tiksliai žinote, ko ieškote, pabandykite atlikti paiešką naudodami konkrečius terminus (pvz., „Klasių parinkikliai CSS pamokoje“).
- Jei esate pradedantysis ir neturite žiniatinklio kūrimo patirties, pradėkite mokytis HTML ir CSS kodavimo pagrindų.
Žingsnis 2. Pažvelkite į tai, kaip pasimokyti vietinėje kolegijoje ar universitete
Jei lankote kolegiją ar universitetą, pasitarkite su savo mokyklos informatikos skyriumi arba peržiūrėkite kursų katalogą, kad sužinotumėte, ar yra kokių nors interneto dizaino kursų. Jei nesate mokykloje, patikrinkite, ar netoliese esančios kolegijos ar universitetai siūlo internetinio dizaino tęstinio mokymo kursus.
Kai kurie universitetai siūlo interneto dizaino kursus, kuriuose gali dalyvauti visi norintys. Patikrinkite svetaines, tokias kaip Coursera.org, kad rastumėte nemokamų ar prieinamų interneto dizaino kursų, kuriuos veda universiteto instruktoriai
Žingsnis 3. Gaukite knygyno ar bibliotekos žiniatinklio dizaino knygų
Gera knyga apie interneto dizainą gali būti neįkainojama nuoroda, kai mokotės ir taikote savo amatus. Ieškokite naujausių knygų apie bendrą interneto dizainą arba konkrečius kodavimo formatus ir kalbas, kurias norėtumėte išmokti.
Žurnalų ir tinklaraščių straipsnių apie interneto dizainą skaitymas taip pat yra geras būdas išmokti naujų metodų, pasisemti įkvėpimo ir neatsilikti nuo naujausių tendencijų
Žingsnis 4. Atsisiųskite arba įsigykite tam tikrą interneto dizaino programinę įrangą
Gera žiniatinklio kūrimo programinė įranga gali padėti jums kurti svetaines efektyviau ir efektyviau, taip pat puikiai padeda išmokti pritaikyti kodavimą, scenarijus ir kitus pagrindinius dizaino elementus. Jums gali būti naudinga naudoti tokius įrankius kaip:
- Grafinio dizaino programos, tokios kaip „Adobe Photoshop“, „GIMP“ar „Sketch“.
- Svetainių kūrimo įrankiai, tokie kaip „WordPress“, „Chrome DevTools“ar „Adobe Dreamweaver“.
- FTP programinė įranga, skirta perkelti baigtus failus į serverį.
5 žingsnis. Pradėdami raskite keletą svetainės šablonų, su kuriais galėsite žaisti
Nėra nieko blogo naudojant šablonus, kai išmokstate žiniatinklio dizaino pagrindų. Ieškokite jums patinkančių tinklalapių šablonų ir atidžiai peržiūrėkite kodą, kad suprastumėte, kaip dizaineris sudėjo puslapį. Taip pat galite eksperimentuoti keisdami kodą ir pridėdami savo elementų prie šablono.
Norėdami pradėti, ieškokite nemokamų svetainių šablonų arba eksperimentuokite su šablonais, pateikiamais kartu su jūsų interneto dizaino programine įranga
2 metodas iš 4: HTML įvaldymas
Žingsnis 1. Susipažinkite su pagrindinėmis HTML žymėmis
HTML yra paprasta žymėjimo kalba, naudojama formuojant pagrindinius svetainės elementus. Naudodami žymas galite formatuoti skirtingus svetainės elementus. Žymos rodomos kampiniuose skliaustuose prieš ir po kiekvieno elemento ir pateikiamos instrukcijos, kaip tas elementas veiks puslapyje. Norėdami uždaryti žymą, prieš galutinę žymę įdėkite a / kampinių skliaustų viduje.
- Pavyzdžiui, jei norite, kad dalis jūsų teksto būtų tokia drąsus, elementą apsuptumėte žyma, tokia: Šis tekstas yra paryškintas.
- Keletas įprastų žymų yra (pastraipa), (inkaras, kuris apibrėžia susietą tekstą) ir (šriftas, kuris gali padėti apibrėžti įvairius teksto atributus, pvz., Dydį ir spalvą).
- Kitos žymos apibrėžia skirtingas paties HTML dokumento dalis. Pavyzdžiui, naudojama informacijai apie puslapį, kuri nebus matoma žiūrovui, pvz., Raktiniams žodžiams ar puslapio aprašymui, kurie būtų rodomi paieškos variklio rezultatuose, saugoti.
2 žingsnis. Išmokite naudoti žymos atributus
Kai kurioms žymėms reikia papildomos informacijos, kad jos galėtų veikti. Ši papildoma informacija rodoma pradinėje žymoje ir vadinama „atributu“. Atributo pavadinimas rodomas iškart po žymos pavadinimo, atskirtas tarpais. Atributo reikšmė yra pridedama prie atributo pavadinimo ženklu = ir supa kabutes.
- Pvz., Jei norėjote dalį savo teksto padaryti raudoną, tai galite padaryti naudodami žymą ir atitinkamą šrifto spalvos atributą, pavyzdžiui: Šis tekstas yra raudonas.
- Daugelis efektų, kurie kažkada buvo reguliariai pasiekiami naudojant HTML žymų atributus, pvz., Nustatant skirtingas šrifto spalvas, dabar dažniausiai atliekami naudojant CSS kodavimą.
Žingsnis 3. Eksperimentuokite su įdėtais elementais
HTML taip pat leidžia sudėti elementus į kitus elementus, kad būtų sukurtas sudėtingesnis formatavimas. Pvz., Jei norite apibrėžti pastraipą ir tada pasukti kursyvu dalį pastraipos teksto, galite tai padaryti taip:
Man patinka koduoti!
Žingsnis 4. Susipažinkite su tuščiais elementais
Kai kuriems HTML elementams nereikia nei atidarymo, nei uždarymo žymų. Pvz., Jei įterpiate vaizdą, jums reikia tik vienos „img“žymos, kurioje yra žymos pavadinimas ir visi kiti būtini atributai (pvz., Vaizdo failo pavadinimas ir bet koks kitas tekstas, kurį norite pridėti prieinamumo tikslais). Pavyzdžiui:
5 žingsnis. Naršykite pagrindinį HTML dokumento išdėstymą
Kad HTML svetainė tinkamai veiktų, turite žinoti, kaip formatuoti visą puslapį. Tai reiškia, kad reikia nustatyti, kur prasideda ir kur baigiasi jūsų html kodas, taip pat naudoti žymas, kad nustatytumėte, kurios kodo dalys bus rodomos, palyginti su kuriomis, kad būtų pateikta paslėpta pagrindinė informacija. Pavyzdžiui:
- Naudokite žymą, kad apibrėžtumėte savo puslapį kaip HTML dokumentą.
- Tada į žymas įtraukite visą savo puslapį, kad nustatytumėte, kur prasideda ir kur baigiasi jūsų kodas.
- Žymose įdėkite bet kokią informaciją, kuri nebus rodoma žiūrovui, pvz., Puslapio pavadinimą, raktinius žodžius ir puslapio aprašymą.
- Žymomis apibrėžkite savo puslapio turinį (t. Y. Bet kokį tekstą ir vaizdus, kuriuos norite matyti žiūrovas).
3 metodas iš 4: susipažinimas su CSS
Žingsnis 1. Naudokite CSS, kad pritaikytumėte stilius savo HTML dokumentams
CSS yra stiliaus lapo kalba, leidžianti tinklalapiui pritaikyti skirtingus stiliaus ir dizaino elementus. Pvz., Jei norite pasirinktinai taikyti tam tikrą šriftą ar teksto spalvą kai kuriems puslapio teksto elementams, galite sukurti CSS failą. Tada galite įterpti CSS failą į savo HTML dokumentą, kur tik norite.
-
Pvz., Jei norite, kad CSS failas visus HTML dokumento pastraipos elementus paverstų žalia spalva, galite sukurti.css failą, kuriame yra šios eilutės:
- p {
- spalva: žalia;
- }
- Tada išsaugotumėte failą tokiu pavadinimu kaip style.css.
- Norėdami pritaikyti stilių lapą savo HTML dokumentui, įterpkite jį kaip tuščią nuorodos elementą žymose. Pavyzdžiui:
2 žingsnis. Susipažinkite su CSS taisyklių rinkinio elementais
Atskiras CSS kodo elementas vadinamas „taisyklių rinkiniu“. Taisyklių rinkinyje yra įvairių elementų, kurie apibrėžia, ką norite atlikti savo kodu. Jie apima:
- Rinkiklis, kuris apibrėžia norimą stilizuoti HTML elementą. Pavyzdžiui, jei norite, kad jūsų taisyklių rinkinys paveiktų pastraipos elementus, pradėkite savo taisyklių rinkinį raide „p“.
- Deklaracija, kurioje apibrėžiamos norimos stiliaus savybės (pvz., Šrifto spalva). Deklaracija pateikiama garbanotuosiuose skliaustuose {}.
- Nuosavybė, nurodanti, kurią HTML elemento nuosavybę norite sukurti. Pavyzdžiui, žymoje galite nurodyti, kad norite formuoti teksto spalvą.
- Nuosavybės vertė konkrečiai apibrėžia, kaip norite pakeisti nuosavybę (pvz., Jei nuosavybė yra šrifto spalva, tada nuosavybės vertė bus „žalia“).
- Vienoje deklaracijoje galite keisti kelias skirtingas ypatybes.
Žingsnis 3. Taikykite CSS savo tekstui, kad rašymas atrodytų gražiai
CSS yra naudinga, kai tekstui pritaikomi įvairūs efektai, nereikia atskirai koduoti kiekvienos nuosavybės HTML. Eksperimentuokite, kaip pakeisti įvairias CSS spausdinimo ypatybes, įskaitant:
- Šrifto spalva
- Šrifto dydis
- Šriftų šeima (pvz., Šriftų, kuriuos norite naudoti tekste, diapazonas)
- Teksto lygiavimas
- Linijos aukštis
- Tarpai tarp raidžių
Žingsnis 4. Eksperimentuokite su dėžutėmis ir kitais CSS išdėstymo įrankiais
CSS taip pat naudinga įtraukiant į puslapį patrauklius vaizdinius elementus, tokius kaip teksto laukeliai ir lentelės. Be to, galite jį naudoti norėdami pakeisti bendrą puslapio išdėstymą ir nustatyti, kur skirtingi elementai yra išdėstyti vienas kito atžvilgiu.
Pvz., Galite apibrėžti tokius atributus kaip elemento plotis ir fono spalva, pridėti kraštinę arba nustatyti paraštes, kurios sudarys tarpą tarp įvairių jūsų puslapio elementų
4 metodas iš 4: darbas su kitomis dizaino kalbomis
Žingsnis 1. Jei norite į savo puslapius įtraukti interaktyvių elementų, išmokite „JavaScript“
„JavaScript“yra puiki kalba, kurią galite išmokti, jei norite savo svetainėse pridėti daugiau išplėstinių funkcijų, tokių kaip animacija ir iššokantys langai. Eikite į kursus arba ieškokite internetinių pamokų, kaip koduoti „JavaScript“ir įtraukti šiuos koduotus elementus į savo tinklalapius | naudojant HTML.
Prieš pradėdami naudotis „JavaScript“, turite būti susipažinę su HTML ir CSS puslapių kūrimo pagrindais
Žingsnis 2. Susipažinkite su „jQuery“, kad palengvintumėte „JavaScript“kodavimą
„jQuery“yra „JavaScript“biblioteka, kuri gali supaprastinti „Java“programavimą, leisdama pasiekti įvairius iš anksto užkoduotus „JavaScript“elementus. „jQuery“yra puikus įrankis, jei jau esate susipažinę su „JavaScript“kodavimo pagrindais.
„JQuery“biblioteką ir daugybę kitų vertingų išteklių galite pasiekti per „jQuery Foundation“svetainę „jQuery.org“
3 žingsnis. Studijuokite serverio kalbas, jei jus domina vidinės pusės kūrimas
Nors HTML, CSS ir „JavaScript“idealiai tinka žiniatinklio kūrėjams, kurie orientuojasi į tai, ką vartotojas mato ir daro svetainėje, serverio kalbos yra naudingos, jei jus labiau domina darbas užkulisiuose. Jei norite sužinoti apie „back-end“kūrimą, sutelkite dėmesį į kalbų, tokių kaip „Python“, „PHP“ir „Ruby on Rails“, mokymąsi.
Šios kalbos yra naudingos tvarkant ir apdorojant duomenis, kurių vartotojas nemato. Pavyzdžiui, PHP gali būti naudojamas kuriant saugius slaptažodžio kūrimo įrankius svetainėse, kuriose reikalingas prisijungimas
Pagalbos failai
HTML cheat Sheet
CSS apgaulės lapas
