Hoe u uw eigen website kunt bouwen: 16 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:19

Een volledig gedekte gids om van papier naar het web te komen, gratis als je wilt, vooral als vriendelijke webmasters je een paar gunsten verschuldigd zijn, maar zelfs met weinig ervaring en kennis kun je een site bouwen en deze als volgt op internet zetten: …

Stap 1: Tools, materialen en basisvaardigheden

Voor het maken van je site heb je het volgende nodig: Gereedschap - Een computer, bij voorkeur minder dan vijf jaar oud - Een kopie van dreamweaver (optioneel) maar dat is wat ik weet en zal je daarop laten zien - Een kopie van photoshop, niet essentieel maar zeker een must voor iedereen die een mooie site wil - Een verbinding met internet op je computer, liefst een snelle (omdat het dingen sneller maakt)Materialen - Een idee - Wat schijfruimte, afhankelijk van waar je site voor is - Tijd, ja dat is een materiaal een waardevolle daarbij - Een werkend e-mailadres als je er een nodig hebt ze zijn vrij van Gmail en hotmailBasisvaardigheden - Een basiskennis van het gebruik van je computer, internet -Dit is een codeloze instructie, het is voor mensen die een site willen maken maar geen idee hebben hoe - Enige ontwerpvaardigheden zouden handig zijn - Weten hoe photoshop te gebruiken zou fijn zijn, paint. NET of GIMP

Stap 2: Laten we beginnen

Als u eenmaal weet wat voor soort site u wilt maken, neemt u uw ontwerpbeslissing.

Denk na over de basiskoelers voor de site, de stijl ervan en hoe u wilt dat mensen erop navigeren. Als je het voor een bedrijf of club maakt, is het waarschijnlijk het beste dat de site de koelers van het bedrijf/de club weerspiegelt en functies heeft die dingen over het bedrijf nabootsen of erop zijn gebaseerd, zoals menuknoppen die doen denken aan iets dat ze verkopen als het een bedrijf is. Je sitenavigatie kan verschillende dingen zijn, over het algemeen zijn de drie belangrijkste typen die worden gebruikt de linker- en rechterzijbalkmenu's en de bovenste balkmenu's (ze gaan over onder de kop zoals die van deze site) Als je de site voor jezelf maakt, kies dan kleuren en ontwerpfuncties je wilt en ga vanaf daar. Een waarschuwing. gebruik geen echt tegenstrijdige kleuren en meisjes proberen niet voor fluorescerend roze te gaan (niet seksistisch zijn, dat gebeurt gewoon vaak) Je zou zelfs een bedrijf kunnen runnen via je site als je wilt, ik heb hier weinig ervaring mee, maar het zou kunnen zijn gemakkelijker met zoiets als de yahoo-winkels die deze site gebruikt.

Stap 3: De site starten

Hier beginnen we, ga naar Mijn documenten en maak een map met de naam 'Mijn website' of gebruik de naam van de site. Maak in die map een map 'afbeeldingen', een met de naam 'pagina's' en een andere met de naam 'bestanden' (degene met de naam bestand is voor alle andere bestanden die je zou kunnen gebruiken tijdens het maken van je site.) Start nu Dreamweaver op en een stukje van het bestand zie je een menu-item genaamd site, dus klik erop en kies een nieuwe site, gebruik het tabblad geavanceerd (omdat het gemakkelijker is om door te gaan), plaats nu de naam van uw website in het vak voor sitenaam. U ziet een vak met het label 'lokale hoofdmap'. Dit is de map die u onder uw sitenaam hebt gemaakt. Het volgende vak heet 'Standaard afbeeldingenmap'. Kies de map met de naam afbeeldingen in uw hoofdmap. Laat de twee selectievakjes met rust, ze zijn allebei zoals ze zouden moeten zijn.

Stap 4: Laten we vast komen te zitten dan

Nadat je al je belangrijkste beslissingen op de site hebt genomen, is het tijd om een sjabloon te maken voor al je pagina's, dit is precies hoe het klinkt, een sjabloon voor het maken van pagina's, een website moet er hetzelfde uitzien om verwarring te voorkomen kijkers en het bespaart veel tijd en verspilde moeite.

In uw sjabloon moet u een koptekst maken, dit is de hoofdbanner die over de bovenkant van de pagina loopt, deze heeft meestal de titel van de site/bedrijfsnaam, een slogan en een afbeelding of logo dat het onderwerp van de site weergeeft. De beste afmetingen die ik kan geven zijn 760 x 100-200, de hoogte heeft de voorkeur en hangt ook af van waar de menubalk zal komen. De breedte is 760, dus het past in browservensters, zelfs wanneer 800x600 res op schermen wordt uitgevoerd (het heeft geen zin als je de helft van de site niet kunt zien) Je menuknop (als je ervoor kiest om ze niet te groot te maken, raad ik aan over 30 pixels hoog en de breedte is afhankelijk van veel dingen, maar de mijne zijn meestal tussen de 100 - 1500 pixels. Aan de andere kant gebruik je misschien flash-knoppen die geen inspanning van jouw kant vereisen. (Voor Dreamweaver dat is)

Stap 5: De sjabloon maken…

Dus nu kiezen we de kleuren van onze site en zo door met de rechtermuisknop op onze lege pagina te klikken en naar pagina-eigenschappen te gaan. Voor de mijne wordt de achtergrond zwart, de tekst wit en zet de titel nu als sjabloon. Je zult op de afbeelding zien dat al mijn linkkleuren zijn ingesteld als blauw, ik raad aan om ook blauw te gebruiken omdat blauw de traditionele linkkleur is en het gebruik van een vreemde linkkleur hoog op de lijst stond van dingen die mensen irriteren aan websites en wat ze maakt onprofessioneel.

Stap 6: Het maken van de sjabloon vervolg. de layout

Nu beginnen we met onze lay-out van de sjabloon.

Klik op de knop Tabel invoegen of de knop Tabel tekenen. Sleep nu gewoon om een tafel te maken, het kiezen van 3x3 is een handige plek om te beginnen. Het eerste wat je moet doen is je tabel 800 pixels breed maken, je kunt de breedte zien in de eigenschappenbalk onderaan, markeer nu de bovenste rij cellen en klik met de rechtermuisknop, ga naar de tabel in het rechtsklikmenu en kies cellen samenvoegen, maak de nieuw gevormde cel de hoogte van je kopafbeelding. Ga bij deze pint naar je tabeleigenschappen en vul de waarde nul in voor 'cellpad' en 'border'-waarden. Dit betekent dat de tafel niet bestaat voor de eindgebruiker, maar alles op zijn plaats houdt. Nu plakken we het in de header-afbeelding die moet worden opgeslagen in de map met site-afbeeldingen, maar als dit niet het geval is, zal Dreamweaver vragen of u het bestand daar naartoe wilt kopiëren. Om een afbeelding in te voegen, kijk langs je knoppenbalk (het tabblad erboven zou gemeenschappelijk moeten zijn) zoek de knop met een afbeelding van een boom in een doos (de meeste programma's gebruiken een soortgelijk symbool) klik erop en er verschijnt een dialoogvenster, blader gewoon naar uw bestand en dubbelklik erop. Als uw afbeelding op de verkeerde plaats verscheen, stond de cursor in de verkeerde cel. Nu je de tafel onder de knie hebt, splits jezelf een cel langs de kant waar je je menubalk wilt hebben, onthoud dat rijen aan de andere kant van de kolommen langs de weg staan. Maak het vak voor je menuknoppentabel zo breed als je denkt dat het er goed uitziet en maak dan je knoppen de juiste breedte (negeer dit als je flash-knoppen wilt) Maak nu een tabel in je cel met 1 rij en zoveel kolommen als er zijn knoppen (u zou dit uit uw siteplan moeten weten, daar kan ik u helemaal niet mee helpen) of voor een horizontaal menu 1 kolom en zoveel rijen als er knoppen zijn.

Stap 7: De menuknoppen toevoegen

Er zijn een paar manieren om dit te doen. Als je simpele afbeeldingsknoppen wilt (een klikbare afbeelding die eruitziet als een knop) dan voeg je de afbeelding in zoals normaal en voor nu is dat alles. later zullen we er links aan toevoegen.

Als je rollover-knoppen wilt (de afbeelding verandert wanneer de cursor zich boven de knopafbeelding bevindt, dan moet je voor elke knop afbeeldingen maken, bijvoorbeeld dat je een aantal mooie donkergrijze knoppen hebt die je wilt laten oplichten wanneer de gebruiker de muis erop zet dan maak je een tweede set knoppen die oplichten, ga dan naar de knop rollover afbeelding toevoegen in de werkbalk (naast of dichtbij de afbeeldingsknop) en kies de donkere voor afbeelding één en de lichte voor afbeelding 2, laat nogmaals de link voor nu omdat je nog geen enkele pagina hebt gemaakt. Als je flash-knoppen wilt, moet je klikken op het media-tabblad bovenaan de knoppenbalk en klikken op het flash-knopsymbool (flash-logo met kleine balk in de benedenhoek.), Het zal u vragen om het document op te slaan voordat u verder gaat, dus sla het op als 'basissjabloon' of iets waarvan u weet dat het de hoofdsjabloon voor uw site is.

Stap 8: De sjabloon maken voor gebruik

Juist, we zijn bijna klaar met onze sjabloon en kunnen heel snel aan onze pagina's beginnen, nu heeft het bewerkbare regio's nodig (plaatsen voor pagina-inhoud om naartoe te gaan) We voegen deze toe door met de rechtermuisknop te klikken en met de rechtermuisknop naar het vervolgkeuzemenu van de sjabloon te gaan menu, kies een nieuw bewerkbaar gebied en er verschijnt een bericht dat het document wordt geconverteerd naar een sjabloon. Dit is goed. Doe dit met de cursor in de tabelcellen waar de inhoud naartoe gaat (die onder en naast de menubalk in de mijne)

Sla nu het document op, sluit het en ga naar het nieuwe bestand en klik op de sjablonen-tabbladen bovenaan, je sjabloon zou daar moeten zijn, zorg ervoor dat de updatepagina wanneer sjabloon verandert is aangevinkt (bespaart later veel werk.)

Stap 9: voeg wat inhoud toe

Zorg ervoor dat uw pagina's uw inhoud toevoegen en vergeet niet om ze op te slaan in de mappen die u voor pagina's hebt gemaakt en plaats uw afbeeldingen ook in de afbeeldingenmap die u hebt gemaakt. Herhaal gewoon het laatste stukje van stap 8 over het maken van de pagina van een sjabloon elke keer dat u een pagina. Let op de nep-inhoud die ik heb gebruikt, het heet Lorem Ispsum en het is een verhaal over goed en kwaad in het Latijn, web- en grafische ontwerpers gebruiken dit om een idee te geven van hoe het product eruit zal zien met echte tekst. het is te vinden op Lipsum.com Die blauwe vakken zijn de bewerkbare regio's die je ook hebt, hoop ik.

Stap 10: Nu maken we onze links

Open je sjabloon die je hebt gebruikt (onthoud dat vinkje, nu komt het om te spelen) Op het moment dat je menuknoppen slechts afbeeldingen zijn (als ze flash zijn, kijk dan hieronder) Nu je pagina's hebt, kunnen het echte knoppen zijn, of het nu rollover of normale afbeeldingen zijn, klik met de rechtermuisknop op uw home-knop en ga naar link wijzigen of link maken (afhankelijk van de versie) er verschijnt een dialoogvenster, blader gewoon naar het bestand van uw startpagina en dubbelklik erop. nu is het gekoppeld aan de pagina, herhaal voor de rest van je knoppen en sla het document op, als Dreamweaver vraagt of je alle pagina's op basis van het document wilt wijzigen, zeg ja.

Voor de flash-knop herinnert u zich dat we de koppelingsbalk hebben genegeerd, dus alles wat we doen is met de rechtermuisknop op de knop klikken en op Bewerken klikken, u krijgt het scherm van eerder te zien, klik gewoon op de bladerknop naast de koppelingsbalk en zoek uw bestand. Nu zou je een vrijwel werkende site moeten hebben, de volgende stap is gevuld met een paar trucjes en dingen voor fotopagina's enz. om dingen gemakkelijker te maken en beter te laten werken.

Stap 11: Een paar tips en handige ideeën

Als je met XP werkt (mogelijk met Vista) is er een XP-powertoy genaamd image resizer waarmee je het formaat van je foto's op maat kunt aanpassen door met de rechtermuisknop te klikken en je kunt batches doen en een duim toevoegen aan het einde van elke naam. Gebruik voor een fotogalerij de miniaturen die u hebt gemaakt als de afbeeldingen op de hoofdpagina en koppel ze als knoppen aan het grotere afbeeldingsbestand, dit zorgt voor veel sneller laden en minder galerijpagina's.

Voor pagina's met heel veel inhoud, is het misschien de moeite waard om de pagina- en vorige paginalinks op te splitsen, dit is eenvoudig te doen en het enige dat u hoeft te doen is ze aan elkaar te linken en de startpagina in te voeren als de sjabloonlink of van welke pagina dan ook het is gekoppeld van. Ik kom terug en voeg meer toe als ik aan ze denk of als mensen ze suggereren, dat is nog maar het begin.

Stap 12: Maak een indexpagina

Op dit moment hebben de meeste webhosts een indexpagina nodig. Dit kan een replica zijn van de startpagina met de naam 'index.htm' (zo moet je het noemen) of een funky pagina maken met enter-site erop (als je' Als je goed bent in flash, zou je een animatie kunnen hebben om dingen op te fleuren. Je moet voelen dat het dichtbij dat speciale moment komt. Ga hier…

Stap 13: Laten we een host voor ons regelen

Nu kom je op de site waar ik je naartoe heb gestuurd, ik heb ervoor gekozen omdat het, wat betreft gratis hosts, geweldig is en ontzettend veel dingen toelaat, evenals 8 gigabyte opslag en zoiets als 300 GB bandbreedte/maand.

Dus volg de registratiestappen en activeer je account, kijk niet eens naar die bestandsbeheerder, dat hebben we niet nodig. Ga rechts naar je account en noteer de naam van je FTP-account, de gebruikersnaam en het wachtwoord (hetzelfde als je wachtwoord voor het hostingaccount) Ga naar sites, bewerk sites en kies de jouwe ga naar het tabblad geavanceerd en ga naar de testserver (Ik weet dat de mijne op externe informatie staat, maar het testen van de server is de gemakkelijkste manier om de site te uploaden), voer uw informatie in zoals weergegeven in de afbeelding.

Stap 14: Kun je het voelen?

Het is tijd om de site te uploaden… Je staat op het punt een website te hebben.

Ga naar de balk met bestanden/activa van uw site, deze ziet er op dit moment ongetwijfeld heel anders uit, klik op het kleine vervolgkeuzemenu met weergaven en kies de testserver. Dreamweaver heeft nu uw FTP-wachtwoord al opgeslagen. Klik op de knop verbinden met externe host (die met drie grappige vormen). zodra het zegt dat je verbonden bent, klik je op de knop bestanden plaatsen. Dat is de knop die een naar boven wijzende pijl is. (Voor later gebruik kun je inloggen op het account en get-bestanden gebruiken om bestanden op te halen die je misschien op je computer bent kwijtgeraakt.) al dat werk, voor kleine updates kunt u in plaats daarvan vervangende bestanden verzenden. Als het zover komt als 'index.htm', zal het vragen of het het moet vervangen, zeg ja, anders gaat je site na 15 dagen uit de lucht, daarom hebben we onze site als eerste gemaakt.

Stap 15: Nu wil je een naam?

Dus het idee van een subsite is van invloed op je ego, je hebt opties, koop een domeinnaam (niet duur zonder hosting en je kunt.com.org.co.uk en.net kiezen die het beste bij je naam past. Of voor de man die het allemaal gratis wil, ga gewoon naar de dot tk-site Ze spiegelen gewoon je pagina's, dus als je die maakt, maak dan je startpagina of je indexpagina de sitelink en kies 'killerjackalope.tk' snap je?

Stap 16: Nog meer voor meer?

Dit is nu een antwoord op een brandende vraag en wordt meegedaan aan de lasercutter wedstrijd (last minute) maar als je een vraag hebt of extra uitleg wilt vraag het dan gewoon, als het klein is zal ik je antwoorden en als het zo is een goede dan zal ik een stap toevoegen zodat iedereen het antwoord op uw vraag heeft.

Ik weet ook dat het uit de ex-tutorial komt, maar ik weet zeker dat dit is wat er gebeurt als je probeert een site op de voorpagina te maken, het is verschrikkelijk en ik zou je liever vertellen dat je Dreamweaver moet stelen dan een voorpagina te kopen. Volgende instructable, hoe grappige hulk-foto's te maken.