Share
Vi gjorde det! Vi opprettet vår aller første nettside fra bunnen av, og vi snakket om noen viktige designstykker som hvite rom, typografi og farge.
I denne siste opplæringen vil vi raskt gjennomgå alt vi har lært så langt om å bygge et nettsted og design, vurdere måter å få vår nettside på Internett, slik at vi kan lede våre venner og familie til en webadresse og berøre litt på noen nyttige ressurser fremover med våre studier.
Ikke glem å stille noen siste spørsmål i kommentarfeltet nederst på denne siden!
La oss ta en titt på seriekartplanen vi tok for å komme dit vi er nå.
Vi startet denne serien ved å ta opp hvordan nettverket fungerer. For at to forskjellige datamaskiner skal snakke med hverandre, må de begge være koblet til Internett via en Internett-leverandør (Internett-leverandør).
For at andre skal kunne vurdere nettstedet vårt på Internett, må disse nettstedene overføres (flyttes) til en server. en spesiell datamaskin med direkte tilgang til Internett. Vi vil gjennomgå dette mer i en seksjon nedenfor.
Vår rolle på Internett er en webdesigner. Det er vår jobb å sørge for at et nettsted ser herlig ut, og det er veldig enkelt for brukerne å lese og navigere.
Med disse målene har vi tenkt å begynne å bygge vår Tuts + Town-side med HTML og CSS etter å ha skrevet noen fantastiske skisser på papir. For å forberede seg på denne delen av prosessen måtte vi lære alt om filnavn og organisering.
Vi vet nå at hoved HTML-filen alltid kalles index.html og om bildene er plassert i egen mappe eller ikke påvirker src attributt i vår HTML.
Til slutt valgte vi en tekstredigerer og var offisielt forberedt på å begynne å skrive noen HTML- og CSS-filer!
For å bygge vår Tuts + Town-område etablerte vi først HTML-strukturen og deretter plugget inn innholdet.
Denne strukturen besto av flere elementer nestet innenfor en primær html element og har dette fundamentet på plass gjort plugging inn innholdet mye enklere.
Når innholdet var på plass, kunne vi begynne å utforme alt med CSS. Først måtte vi knytte de to dokumentene sammen i HTML hode:
I vårt CSS-dokument kunne vi erklære farger, størrelser, layout og mer på elementer i HTML-dokumentet, som til slutt fører til det ferdige nettstedet.
Denne delen av serien ble ferdig med en opplæring som diskuterer de forskjellige bildformatene som er tilgjengelige for oss. Vi snakket om å inkludere dem i vår HTML og noen effekter vi kan søke på bilder med CSS, for eksempel å endre deres opasitet:
Som nevnt er alle bildene som brukes i Tuts + Town-serien, SVGs, noe som betyr at de kan resizes uten å miste kvalitet og lett kan redigeres.
Etter at vi opprettet nettstedet vårt, gjennomgikk vi de grunnleggende designkonseptene som bidro til å gi utseendet, følelsen og brukbarheten til nettstedet.
Innhold er den viktigste delen av webdesign, så etter å ha fastslått at innholdet vårt er nyttig, nødvendig og godt organisert, flyttet vi inn på bilder.
Visuell hierarki ble etablert for nettstedet gjennom varierende skriftstørrelser, farger og hvite rom, akkurat som ballongen ovenfor er designet for å være den dominerende gjenstanden i bildet.
Typografi er overalt, vi ser skriftlige ord og er en av de viktigste delene av webdesign. Brukerne våre må kunne lese innholdet vårt, men vi må også sørge for at fontene vi velger, stemmer overens med tonen og følelsen av innholdet vårt og visuell design.
Denne delen av serien ble avsluttet med en veiledning om fargeteori, betydningen av bestemte farger, forskjellige fargesystemer for nettet, og hvordan du velger en vellykket palett.
Når det gjelder primære og sekundære fargevinduer, kan vi bedre forstå hvordan enkelte farger er opprettet, og hvorfor enkelte farger kan se bra sammen, mens andre ikke gjør det.
Nå, la oss gå gjennom hvordan vi ville gå om å få nettstedet vårt på nettet!
Som vi diskuterte i begynnelsen av denne serien, lever dette nettstedet lokalt på våre individuelle datamaskiner og ikke på Internett. På dette tidspunktet kan vi ikke lede venner og familie til en adresse på nettet, slik at de ennå ikke kan se vårt fantastiske arbeid.
Som vi diskuterte i introduksjonsveiledningen, må filene leve på en server for at andre skal kunne se dem på Internett.
Prosessen med å få et nettsted på internett kan ofte innebære å gjøre et kjøp og ha en e-postadresse. Hvis du er for ung til å ha tilgang til noen av disse, er det best å ha en voksen med deg for følgende seksjon.
Det finnes en rekke tjenester som vil hjelpe vert våre filer for oss, noe som gjør dem tilgjengelige på internett. For denne serien skal vi fokusere på hosting gjennom NeoCities og det grunnleggende begrepet domenenavn.
NeoCities er en fantastisk og gratis alternativ for enkel fil hosting på nettet; selv om vi fortsatt trenger en e-postadresse for å registrere oss!
La oss gå gjennom trinnene for å få våre filer vert her:
Her er en titt på nettstedet på NeoCities: tutsplustown.neocities.org
En annen fordel med denne tjenesten er at vi ikke trenger å gå gjennom domenet (den tilpassede adressen til nettsteder), kjøps- og oppsettprosessen, selv om vi vil røre på hvordan du gjør det neste også.
Viktig! Det er mulig å bruke et egendefinert domenenavn med NeoCities ved å gå inn i nettstedets innstillinger etter første oppsett og følge instruksjonene der; selv om dette for øyeblikket krever en oppgradert konto for $ 5,00 USD månedlig.
Domener er de egendefinerte adressene vi refererer til, slik at de kan besøke et nettsted. Dette trinnet var ikke nødvendig da vi var vert for våre nettstedfiler på NeoCities fordi det opprettet en spesiell Neocities-adresse for oss. Men hvis vi ønsker å ha et virkelig tilpasset domenenavn (for eksempel tutsplustown.com for eksempel) må vi kjøpe dette navnet.
Som med vårt NeoCities brukernavn, må domenenavnet vårt også være unikt. Det kan ta litt tid å finne et navn som ikke allerede er tatt.
Her er et par tjenester som tillater oss å kjøpe domenenavn når vi oppretter en konto:
Det endelige trinnet for å sette opp et egendefinert domene kan fullføres via hosting-tjenesten (som Neocities eller BitBalloon nevnt nedenfor) når filene er overført.
Hvis vi velger å ikke bruke NeoCities, er det noen andre hostingfirmaer som ser ut til å være spesielt rimelige og enklere å bruke, men kanskje den som står mest ut av disse grunnene, er BitBalloon.
BitBalloon er gratis å prøve, men krever betaling for å inkludere et egendefinert domene, akkurat som NeoCities. Enkelheten i hvilke filer som kan bli trukket og droppet inn i grensesnittet, gjør dette til et ganske spennende alternativ for grunnleggende nettsteder som Tuts + Town.
Når filene er overført, kan vi fullføre den egendefinerte oppsettprosessen for domenet via verktøyene i BitBalloon-dashbordet.
Vår Tuts + Town har sin egen egen adresse som ble oppnådd og satt opp på samme måte som vi nettopp har vurdert: tutsplustown.com.
Mens denne serien ga en introduksjon til webdesign, kan vi raskt ende opp med å utvikle våre ferdigheter en gang til praksis, øve, øve emnene vi har gjennomgått her.
Boken "Bygg ditt eget nettsted, en tegneserieguide til HTML, CSS og Wordpress" av Nate Cooper gir et solid grunnlag for å skape et nettsted gjennom en morsom historie fortalt i et tegneserieformat.
Shay Howe har skrevet som en rekke dybdeopplæringer på både nybegynner og avansert nivå HTML og CSS:
Responsive webdesign refererer til utforming av nettsteder som tar hensyn til forskjellige skjermstørrelser. Vi bruker for eksempel mye tid på våre smarttelefoner, og som designere må vi sørge for at nettstedet vårt fungerer på disse mindre skjermbildene, i tillegg til en fullskjerm-skjermen.
Det er en fantastisk nybegynneropplæring av Shay Howe på emnet.
Vi brukte piksler i hele denne serien som en måleenhet på nettet. Å bruke piksler er helt OK når du kommer i gang, jo mer erfaring får du jo mer, vil du innse hvor begrensende de er. Det er en så ufleksibel måleenhet som ikke fungerer bra i responsiv design.
Når det gjelder å designe over forskjellige skjermstørrelser, finnes det flere alternativer som vil være mer fleksible enn piksler, for eksempel prosenter og Rems.
Mens vi kort diskuterte flexbox i CSS Layout-opplæringen, er det mye mer vi kan oppnå med layouter som bruker det. Det er et par fantastiske steder å lære mer, som denne Complete Guide to Flexbox og et Flexbox Cheatsheet diagram.
Når det gjelder layout som helhet og ikke bare flexbox, er det et pent lite nettsted som hjelper oss med å gå gjennom det grunnleggende.
Mens det er mye mer kan vi lære å styrke og utvide våre webdesign ferdigheter, vi har oppnådd så mye gjennom denne serien og har nå en mye bedre forståelse av grunnleggende for både å designe og bygge et nettsted.
Vi offisielt tok et nettsted til liv fra skisser på papir til et ekte nettsted med sin egen webadresse; Alt i dag med en webdesigner!
Vår hjemmeside Tuts + Town vil fungere som en vakker, brukervennlig guide for turister som vurderer å besøke, så takk for alt ditt harde arbeid.
Accentsconagua