Share
Vi gjorde det! Vi skapade vår allra första hemsida från början och vi pratade om några viktiga delar av designen, som vitryck, typografi och färg.
I den här sista handledningen kommer vi snabbt att granska allt vi har lärt oss hittills om att bygga en webbplats och design, granska sätt att få vår hemsida på Internet så att vi kan rikta våra vänner och familj till en webbadress och beröra lite på vissa användbara resurser framåt med våra studier.
Glöm inte att ställa några slutliga frågor i kommentarfältet längst ner på den här sidan!
Låt oss ta en titt på serie färdplanen vi tog för att komma dit vi är nu.
Vi startade denna serie genom att adressera hur webben fungerar. För att två olika datorer ska prata med varandra måste de båda vara anslutna till Internet via en Internetleverantör (Internet Service Provider).
För att andra ska kunna granska vår webbplats på Internet måste dessa sidfiler överföras (flyttas) till en server. en speciell dator med direkt tillgång till Internet. Vi kommer att granska det här mer i ett avsnitt nedan.
Vår roll på Internet är en webbdesigner. Det är vårt jobb att se till att en webbplats ser underbar ut och är super lätt för våra användare att läsa och navigera.
Med dessa mål i åtanke stod vi för att börja bygga vår Tuts + Town-webbplats med HTML och CSS efter att ha ritat några fantastiska skisser på papper. För att förbereda sig för denna del av processen fick vi lära oss allt om filnamn och organisation.
Vi vet nu att huvud HTML-filen alltid kallas index.html och om bilder finns i sin egen mapp eller inte påverkar src attribut i vår HTML.
Slutligen valde vi en textredigerare och var officiellt beredda att börja skriva HTML och CSS-filer!
För att bygga vår Tuts + Town-webbplats etablerade vi först vår HTML-struktur och kopplade sedan in innehållet.
Denna struktur bestod av flera element kapslade inom en primär html element och att ha denna grund på plats gjorde att pluggar in innehållet mycket enklare.
När innehållet var på plats kunde vi börja utforma allt med CSS. Först måste vi länka de två dokumenten tillsammans i HTML huvud:
I vårt CSS-dokument kunde vi förklara färger, storlekar, layout och mer på element i HTML-dokumentet, så småningom leder till den färdiga webbplatsdesignen.
Det här avsnittet av serien avslutades med en handledning som diskuterar de olika bildformat som är tillgängliga för oss. Vi pratade om att inkludera dem i vår HTML och några effekter vi kan tillämpa på bilder med CSS, som att ändra deras opacitet:
Som nämnts är alla bilder som används i Tuts + Town-serien SVGs, vilket innebär att de kan ändras utan att förlora kvalitet och enkelt redigeras.
Efter att vi skapat vår webbplats granskade vi de grundläggande konceptkoncept som hjälpte till att skapa utseende, känsla och användbarhet för webbplatsen.
Innehåll är den viktigaste delen av webbdesign, så efter att ha fastställt att innehållet är användbart, behövs och välorganiserat flyttade vi på bilder.
Visuell hierarki upprättades för platsen genom varierande fontstorlek, färger och blankutrymme, precis som ballongen ovan är utformad för att vara det dominerande objektet i bilden.
Typografi är överallt där vi ser skrivna ord och är en av de viktigaste delarna av webbdesign. Våra användare måste kunna läsa vårt innehåll, men vi måste också se till att de teckensnitt vi väljer väljer att matcha tonen och känslan av vårt innehåll och visuellt design.
Detta avsnitt i serien avslutades med en handledning om färgteori, betydelsen av vissa färger, olika färgsystem för webben och hur man väljer en lyckad palett.
Med hänvisning till de primära och sekundära färghjulen kan vi bättre förstå hur vissa färger skapas och varför vissa färger kan se bra ut samtidigt som andra inte.
Låt oss nu gå igenom hur vi skulle gå för att få vår webbplats på webben!
Som vi diskuterade i början av denna serie bor denna webbplats lokalt på våra enskilda datorer och inte på Internet. Vid denna tidpunkt kan vi inte rikta vänner och familj till en adress på webben, så att de ännu inte kan se vårt fantastiska arbete.
Som vi diskuterade i introduktionshandledningen måste filerna leva på en server för att andra ska kunna se dem på Internet.
Processen att få en webbplats på internet kan ofta innebära att man köper och har en e-postadress. Om du är för ung för att få tillgång till någon av dessa är det bäst att ha en vuxen med dig i följande avsnitt.
Det finns ett antal tjänster som kommer att hjälpa till värd våra filer för oss, vilket gör dem tillgängliga på Internet. För denna serie kommer vi att fokusera på hosting via NeoCities och det grundläggande begreppet domännamn.
NeoCities är en fantastiskt och gratis alternativ för enkel filhantering på webben; även om vi fortfarande behöver en e-postadress för att registrera oss!
Låt oss gå igenom stegen för att få våra filer värd här:
Här är en titt på webbplatsen på NeoCities: tutsplustown.neocities.org
En annan fördel med denna tjänst är att vi inte behöver gå igenom domänen (anpassad adress för webbplatser) inköp och installationsprocessen, men vi kommer att beröra hur du gör det här också.
Viktig! Det är möjligt att använda ett anpassat domännamn med NeoCities genom att gå in i webbplatsens inställningar efter den första installationen och följ instruktionerna där. men det krävs för närvarande ett uppgraderat konto för $ 5,00 USD per månad.
Domäner är de anpassade adresserna vi refererar till så att de kan besöka en webbplats. Detta steg var inte nödvändigt när vi värd våra webbplatsfiler på NeoCities eftersom det skapade en speciell Neocities-adress för oss. Men om vi letar efter ett verkligt anpassat domännamn (t.ex. tutsplustown.com till exempel) måste vi köpa det här namnet.
Som med vårt NeoCities användarnamn måste vårt domän också vara unikt. Det kan ta lite tid att hitta ett namn som inte redan är taget.
Här är några tjänster som gör att vi kan köpa domännamn när vi skapar ett konto:
Det sista steget för att skapa en anpassad domän kan fyllas i via webbhotell (som Neocities eller BitBalloon som nämns nedan) när filerna överförs.
Om vi väljer att inte använda NeoCities finns det några andra värdföretag som står ut för att vara särskilt prisvärda och enklare att använda, men kanske den som uppstår mest av dessa skäl är BitBalloon.
BitBalloon är gratis att försöka men kräver betalning för att inkludera en anpassad domän, ungefär som NeoCities. Lätten i vilka filer som kan släpas och släppas in i gränssnittet gör det här ett ganska spännande alternativ för grundläggande webbplatser som Tuts + Town.
När filerna är överförda kan vi slutföra den anpassade domäninstallationsprocessen genom verktygen i BitBalloon-instrumentpanelen.
Vår Tuts + Town webbplats har sin egen webbplats adress som erhölls och upprättats på samma sätt som vi just granskat: tutsplustown.com.
Medan denna serie gav en introduktion till webbdesign kan vi snabbt sluta vilja öka våra färdigheter när vi öva, öva, öva de ämnen vi granskade här.
Boken "Bygg din egen hemsida, en komisk guide till HTML, CSS och Wordpress" av Nate Cooper ger en solid grund för att skapa en webbplats genom en rolig historia berättad i ett komisk format.
Shay Howe har skrivit som en serie djupt tutorials på både nybörjare och avancerad nivå HTML och CSS:
Responsiv webbdesign avser utformning av webbplatser som tar hänsyn till olika skärmstorlekar. Vi tillbringar mycket tid på våra smartphones, till exempel, och som designers behöver vi se till att vår webbplats fungerar på dessa mindre skärmar samt en fullskärms-skrivbordsskärm.
Det finns en fantastisk nybörjarehandledning av Shay Howe om ämnet.
Vi använde pixlar i hela serien som en måttenhet på webben. Att använda pixlar är helt OK när du börjar, desto mer erfarenhet blir du desto mer kommer du att inse hur begränsande de är. Det är en sådan oflexibel måttenhet som inte fungerar bra i lyhörd design.
När det gäller att utforma över olika skärmstorlekar finns det flera alternativ som blir mer flexibla än pixlar, t.ex. procentsatser och rem.
Medan vi kortfattat diskuterat flexbox i CSS Layout-handledningen finns det mycket mer vi kan åstadkomma med layouter med hjälp av den. Det finns några fantastiska platser för att lära sig mer, som denna Komplett Guide till Flexbox och ett Flexbox Cheatsheet-diagram.
När det gäller layout som helhet och inte bara flexbox finns det en snygg liten sida som hjälper oss att gå igenom grunderna.
Medan det finns mycket mer kan vi lära oss att stärka och öka våra webbdesign färdigheter, vi har uppnått så mycket i hela serien och har nu en mycket bättre förståelse för grunderna för både att designa och bygga en webbplats.
Vi har officiellt tagit en webbplats till liv från skisser på papper till en riktig webbplats med sin egen webbadress; allt på dagen för webbdesigner!
Vår webbplats Tuts + Town kommer att fungera som en vacker, användarvänlig guide för turister som överväger att besöka, så tack för allt ditt hårda arbete.
Accentsconagua