Hur man bygger din egen webbplats: 16 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:47

En heltäckande guide för att komma från papper till webben, gratis om du vill, särskilt om några vänliga webbansvariga är skyldiga dig några favörer men även med lite erfarenhet och kunskap kan du bygga en webbplats och få den till webben på följande sätt: …

Steg 1: Verktyg, material och grundläggande färdigheter

För att skapa din webbplats behöver du: Verktyg - En dator, helst mindre än fem år gammal - En kopia av dreamweaver (valfritt) men det är vad jag vet och kommer att visa dig det - En kopia av photoshop, inte nödvändig men definitivt en måste för alla som vill ha en snygg webbplats - En anslutning till internet på din dator, helst en snabb (eftersom det gör saker snabbare) Material - En idé - Lite diskutrymme, beroende på vad din webbplats är för - Tid, ja det är ett material som är värdefullt där - En fungerande e -postadress om du behöver en, de är fria från Gmail och hotmail Grundläggande färdigheter - En grundläggande kunskap om hur du använder din dator, internet -Detta är en kodlös instruktabel, det är för människor som vill skapa en webbplats men inte har någon aning om hur - Vissa designkunskaper skulle vara praktiska - Att veta hur man använder Photoshop vore trevligt, paint. NET eller GIMP

Steg 2: Låt oss komma igång

När du väl vet vilken typ av webbplats du vill få dig att fatta ditt designbeslut.

Tänk på baskylarna för webbplatsen, stilen på den och hur du vill att folk ska navigera den. Om du gör det för ett företag eller en klubb är det förmodligen bäst att webbplatsen återspeglar företagets/klubbens kylare och har funktioner som efterliknar eller är baserade på saker om företaget, som menyknappar som påminner om något de säljer om det är ett företag. Din webbplatsnavigering kan vara flera saker, vanligtvis är de tre huvudtyperna vänster och höger sidofältmenyer och översta menyer (de går under rubriken som den här webbplatsens) Om du gör webbplatsen själv väljer du färger och designfunktioner du gillar och går därifrån Varningsord. använd inte riktigt motstridiga färger och tjejer försöker att inte gå för fluorescerande rosa (inte sexistiskt som bara händer mycket) Du kan till och med driva ett företag via din webbplats om du vill, jag har liten erfarenhet av att göra detta men det kan vara så lättare att använda något som de yahoo -butiker som den här webbplatsen använder.

Steg 3: Starta webbplatsen

Just det är här vi börjar, gå in på Mina dokument och skapa dig en mapp som heter "Min webbplats eller använd webbplatsens namn. Inuti den mappen kan du ringa" bilder "till en bild som kallas" sidor "och en till som heter" filer " (den som heter fil är för alla andra filer du kanske använder under processen att skapa din webbplats.) Starta nu upp dreamweaver och lite från filen ser du ett menyalternativ som heter site så klicka på det och välj ny webbplats, använd den avancerade fliken (eftersom det är lättare att gå igenom), lägg nu in webbplatsens namn i rutan för webbplatsnamn. Du kommer att se en ruta märkt "lokal rotmapp" detta är mappen du skapade under ditt webbplatsnamn. Nästa ruta är märkt 'Standardbilder -mapp' välj den mapp som heter bilder i din rotmapp. Lämna de två kryssrutorna ensamma, de är båda som de borde vara.

Steg 4: Låt oss fastna då

Efter att du har fattat alla dina huvudsakliga beslut på webbplatsen är det dags att göra en mall för alla dina sidor, det är precis vad det låter som, en mall för att göra sidor, en webbplats ska se likadan ut för att undvika både förvirring och tittare och det sparar mycket tid och slöseri.

I din mall måste du skapa en rubrik, det här är huvudbannern som löper överst på sidan, den har vanligtvis titeln på webbplatsen/företagsnamnet, en slogan och en bild eller logotyp som speglar webbplatsens ämne. De bästa måtten jag kan ge är 760 x 100-200 höjden är preferens och beror också på var menyraden ska gå. Bredden är 760 så den passar i webbläsarfönster även när 800x600 upplösning visas på skärmar (det är ingen nytta om du inte kan se halva sajten) Din menyknapp (om du väljer att göra dem ska den inte vara för hög rekommenderar jag om 30 pixlar i höjd och bredd beror på många saker men mina är vanligtvis mellan 100 - 1500 pixlar. Sedan kan du använda blixtknappar som kräver ingen ansträngning från din sida. (För dreamweaver det vill säga)

Steg 5: Gör mallen …

Så nu väljer vi vår webbplats färger och vad inte genom att högerklicka på vår tomma sida och gå till sidegenskaper. För min kommer bakgrunden att vara svart, texten vit och sätta titeln som mall nu. Du kommer att märka på bilden att alla mina länkfärger är inställda på blå, jag föreslår att du använder blått också eftersom blå är den traditionella länkfärgen och att använda udda länkfärg var högt på listan över saker som irriterar människor om webbplatser och vad som gör dem till oprofessionell.

Steg 6: Gör mallen fortsatt. layouten

Nu börjar vi vår layout av mallen.

Klicka på knappen Infoga tabell eller Rita tabell. Nu är det bara att dra för att göra ett bord, att välja 3x3 är ett praktiskt ställe att börja. Det första du bör göra är att göra bordet 800 pixlar brett, du kan se bredden i egenskapsfältet längst ner, markera nu den översta raden med celler och högerklicka, gå till tabellen i högerklicksmenyn och välj sammanfoga celler, gör den nybildade cellen till höjden på din rubrikbild. Vid denna pint går du till dina tabellegenskaper och anger värdet noll för "cellpad" och "border" -värden. Detta innebär att tabellen inte finns för slutanvändaren men håller allt på plats. Nu lägger vi den i rubrikbilden som ska sparas i mappen webbplatsbilder men om det inte är dreamweaver kommer att fråga om du vill kopiera filen dit. För att infoga en bild, titta längs med knapparna (fliken ovanför dem borde vara vanlig) hitta knappen med en bild av ett träd i en ruta (de flesta program använder en liknande symbol) klicka på den och en dialogruta kommer upp, bara leta efter din fil och dubbelklicka på den. Om din bild visades på fel plats var markören i fel cell. Nu när du håller på att dela bordet dela dig själv en cell längs den sida du vill ha menyraden, kom ihåg att raderna ligger tvärs över kolumnerna längs vägen. Gör rutan för din menyknappar tabell så bred som du tycker ser bra ut, gör sedan dina knappar till rätt bredd (ignorera detta om du vill ha blixtknappar) Gör nu en tabell inuti din cell med 1 rad och så många kolumner som det finns knappar (du borde veta detta från din webbplatsplan, jag kan inte hjälpa dig alls där det är ditt val) eller för en horisontell meny 1 kolumn och lika många rader som det finns knappar.

Steg 7: Lägga till menyknapparna

Det finns några sätt att göra detta. Om du vill ha enkla bildknappar (en klickbar bild som ser ut som en knapp) Sedan sätter du in bilden som vanligt och för nu är det allt. senare lägger vi till länkar till dem.

Om du vill ha rullningsknappar (bilden ändras när markören är över knappbilden måste du göra till bilder för varje knapp, säg att du har några fina mörkgrå knappar som du vill tända när användaren sätter musen på dem sedan gör du en andra uppsättning knappar som lyser. Du går sedan till knappen Lägg till överrullningsbild i verktygsfältet (bredvid eller nära bildknappen) och väljer den mörka för bild en och den ljusa för bild 2, lämna igen länken för tillfället eftersom du inte har skapat en enda sida än. Om du vill ha blixtknappar måste du klicka på fliken media längst upp på knappens verktygsfält och klicka på infoga blixtknappsymbolen (blixtlogo med litet fält i nedre hörnet.), Det kommer att be dig att spara dokumentet innan du fortsätter så spara det som "basmall" eller något som du vet betyder huvudmallen för din webbplats.

Steg 8: Skapa mall för användning

Vi är nästan klara med vår mall och kan komma igång på våra sidor väldigt snart, nu behöver det redigerbara regioner (Platser för sidinnehåll att gå) Vi lägger till dessa genom att högerklicka och gå till mallens rullgardinsmeny i högerklick -menyn, välj ny redigerbar region och ett meddelande kommer att säga att dokumentet kommer att konverteras till en mall. Det här är bra. Gör detta med markören i tabellcellerna där innehållet kommer att gå (de under och bredvid menyraden i mitt)

Spara nu dokumentet, stäng det och gå till ny fil och klicka på mallflikarna högst upp, din mall ska finnas där, se till att uppdateringssidan när rutan för malländringar är markerad (sparar mycket arbete senare.)

Steg 9: Lägg till lite innehåll

Få dina sidor att lägga till ditt innehåll och kom ihåg att spara dem i de mappar du skapade för sidor och lägg dina bilder i bildmappen du också gjorde. Upprepa bara den sista biten i steg 8 om att göra sidan från en mall varje gång du gör en Observera det falska innehåll jag använde, det heter Lorem Ispsum och det är en historia om gott och ont på latin, webb- och grafiska formgivare använder detta för att ge en uppfattning om hur produkten kommer att se ut med riktig text. den finns på Lipsum.com. De där blå rutorna är de redigerbara regionerna du också har, hoppas jag.

Steg 10: Nu skapar vi våra länkar

Öppna din mall som du använde (kom ihåg den här kryssrutan, nu kommer den in för att spela) För tillfället är dina menyknappar bara bilder (om de är blixten ser du nedan) Nu när du har sidor kan de vara riktiga knappar, oavsett om det är rullning eller vanliga bilder högerklickar du på din hemknapp och går till ändrar länk eller gör länk (beror på version) en dialogruta kommer upp, bara leta efter filen på din hemsida och dubbelklicka på den. nu är den länkad till sidan, upprepa för resten av dina knappar och spara dokumentet, om dreamweaver frågar om du vill ändra alla sidor baserat på dokumentet säger ja.

För blixtknapp kommer du ihåg att vi ignorerade länkfältet så allt vi gör är att högerklicka på knappen och klicka på redigera så visas skärmen från tidigare, tryck bara på bläddringsknappen bredvid länkfältet och hitta din fil. Nu borde du ha en ganska fungerande webbplats, nästa steg är fyllt med några knep och saker för fotosidor etc. för att göra saker enklare och fungera bättre.

Steg 11: Några tips och användbara idéer

Om du arbetar med XP (eventuellt vista ingår) finns det en XP -drivlåda som kallas image resizer som gör att du kan anpassa storleken på dina bilder genom att högerklicka och du kan göra batcher och lägga till tummen i slutet av varje namn. För ett fotogalleri använder du miniatyrbilderna som du gjorde som bilderna på huvudsidan och länkar dem som knappar till den större bildfilen, detta möjliggör snabbare laddning och mindre gallerisidor.

För sidor med massor av innehåll på kan det vara värt att dela upp sidan och tidigare sidlänkar, det här är enkelt att göra och allt du gör är att länka dem till varandra och lägga in en som mallänk eller från vilken sida som helst det är länkat från. Jag kommer tillbaka och lägger till mer när jag tänker på dem eller som folk föreslår dem, det är bara början.

Steg 12: Skapa en indexsida

Just nu kräver de flesta webbhotell en indexsida, detta kan antingen vara en kopia av hemsidan som heter 'index.htm' (det är vad du måste namnge den) eller göra en funky sida med enter -webbplats på den (om du ' om du är bra på flash kan du ha en animation för att liva upp saker. Du måste känna att det närmar sig det speciella ögonblicket. Gå hit …

Steg 13: Låt oss skaffa oss en värd

Nu hittar du dig själv på webbplatsen som jag skickade dig till, jag valde det eftersom det när det gäller gratis värdar är bra och tillåter oerhört mycket saker, såväl som 8gig lagring och något som 300 GB bandbredd/månad.

Så följ registreringsstegen och aktivera ditt konto, titta inte ens på den filhanteraren, vi kommer inte att behöva det. Gå direkt till ditt konto och ta ner namnet på ditt FTP -konto, användarnamnet och lösenordet (samma som ditt lösenord för värdkontot) Gå till webbplatser, redigera webbplatser och välj ditt gå vidare till den avancerade fliken och gå till testservern (Jag vet att min är på fjärrinformation men testservern är det enklaste sättet att ladda upp webbplatsen), ange din information som visas på bilden.

Steg 14: Kan du känna det?

Det är dags att ladda upp webbplatsen … Du är på väg att ha en webbplats.

Gå över till din webbplats filer/tillgångsfält, det ser utan tvekan väldigt annorlunda ut just nu, klicka på den lilla rullgardinsmenyn med vyer och välj testserver. Nu har dreamweaver redan sparat ditt FTP -lösenord. Klicka på knappen för anslutning till fjärrvärd (den med tre roliga former). när det står att du är ansluten klickar du på knappen Lägg upp filer., det är knappen som är en uppåtpekande pil. (För senare användning kan du logga in på kontot och använda get -filer för att hämta filer som du kan ha förlorat på din dator.) När du träffar detta kommer det att fråga om du vill lägga upp hela sajten, fan vad du gör med allt som fungerar, för mindre uppdateringar kan du skicka ersättningsfiler istället. När den når så långt som 'index.htm' kommer den att fråga om den skulle ersätta den, säg ja annars går din webbplats ner efter 15 dagar, det var därför vi gjorde vår webbplats först.

Steg 15: Vill du ha ett namn?

Så tanken på att vara en undersida påverkar ditt ego, du har alternativ, köper ett domännamn (inte dyrt utan hosting och du kan göra.com.org.co.uk och.net välja det som passar ditt namn bäst. Eller för killen som vill ha allt gratis går du bara till dot tk -webbplatsen De speglar helt enkelt dina sidor så när du gör det till din hemsida eller din indexsida till webbplatslänken. och välj säga killerjackalope.tk fick det?

Steg 16: Något mer för något mer?

Nu är detta ett svar på en brännande fråga och läggs in i laserskärartävlingen (sista minuten) men om du har några frågor eller vill ha extra förklaringar än att bara fråga, om det är litet svarar jag på dig och om det är en bra då lägger jag till ett steg så att alla har svaret på din fråga.

Jag vet också att det är från ex -handledningen, men jag är säker på att detta är vad som händer när du försöker skapa en sida på förstasidan, det är hemskt och jag skulle hellre berätta för dig att stjäla dreamweaver och sedan köpa förstasida. Nästa instruerbara, hur man gör roliga hulkbilder.