Share
Als het gaat om het maken van uw zakelijke website, zijn er verschillende manieren om dit te doen. U kunt kiezen voor een sitebouwer, een ontwikkelaar kunt een site voor u maken of een CMS zoals WordPress gebruiken. Hoewel er niets mis is met deze opties, kunnen ze te veel zijn als alles wat u nodig heeft een eenvoudige website is om te laten zien waar uw bedrijf over gaat en om potentiële klanten en klanten een manier te bieden om contact met u op te nemen.
Als u geen fancy functies nodig hebt en u voorziet niet regelmatig bloggen of online verkopen, dan is een HTML-responsieve websitesjabloon precies wat u nodig hebt. Hier zullen we u door de installatiestappen leiden zodat u in een mum van tijd plat kunt starten.
Het mooie van HTML-responsieve sjablonen voor bedrijfswebsites is dat ze eenvoudig te gebruiken zijn en geen speciale technische kennis vereisen om ze naar uw hostingserver te uploaden. Ze zijn ook gemakkelijker te wijzigen dan andere websitebouwers en CMS's.
In deze zelfstudie laten we u zien hoe u een op HTML reagerende websitesjabloon kunt aanpassen en uploaden naar uw server, zodat u gemakkelijk een responsieve bedrijfswebsite kunt maken.
Voordat we beginnen met het aanpassen van de website, zijn er een paar dingen die je nodig hebt. Ze omvatten een domeinnaam en een hostingplan, een FTP-programma en code-editor, een op HTML reagerende zakelijke websitesjabloon en tenslotte inhoud en afbeeldingen die op uw site worden weergegeven. Laten we een kijkje nemen naar elk van de onderstaande.
Het eerste dat u hoeft te doen is een domeinnaam en een hostingplan kopen zodat uw website online te vinden is. In de meeste gevallen kunt u een gratis domeinnaam krijgen wanneer u zich bij de meeste providers aanmeldt voor een hostingplan. Als het gaat om uw domeinnaam, is het een goed idee om uw echte bedrijfsnaam als domeinnaam te gebruiken.
Probeer indien mogelijk een .COM-extensie te krijgen omdat deze de populairste is, maar onthoud dat het vinden van een goede domeinnaam met .COM vandaag niet zo eenvoudig is als vroeger. In dat geval wilt u mogelijk andere extensies bekijken, zoals .CO of een lokaal domein zoals .US.
Als het gaat om hostingproviders, kunt u hostingpakketten vinden die beginnen bij $ 5 per maand. U kunt hun veelgestelde vragen lezen om te zien hoe zij omgaan met klantenservice en een idee krijgen van hun algemene voorwaarden. Overweeg ook om de beoordelingen van een bepaalde host op andere websites van derden te lezen om te zien wat hun klanten over hen zeggen.
De volgende items op onze lijst zijn een FTP-client zoals FileZilla en een code-editor zoals Sublime Text. Het doel van een FTP-client is om uw computer te verbinden met de hostserver en de bestanden van uw website eenvoudig in één keer te uploaden, in plaats van deze één voor één te uploaden via het bedieningspaneel van de host. Een code-editor, aan de andere kant, zal u helpen bij het bewerken van de sjabloonbestanden en het gemakkelijker maken om verschillende delen van de code te vinden die bewerkt moeten worden.
Zowel Sublime Text als FileZilla zijn gratis te downloaden en kunnen worden gebruikt op Mac-, Windows- en Linux-gebaseerde computers.
Ten slotte hebt u een HTML-sjabloon en de inhoud nodig die u aan uw website wilt toevoegen. U vindt een overvloed aan responsieve HTML-sjablonen die speciaal zijn gemaakt voor zakelijke websites op marktplaatsen zoals Envato Elements. Zodra je er een vindt die je leuk vindt, kun je deze eenvoudig downloaden, de map uitpakken en ergens opslaan waar je gemakkelijk toegang toe hebt.
Wat de inhoud betreft, overweeg dan de kopie op de pagina's van uw site en leg uit wat uw bedrijf doet, wie het bedient en hoe het klanten helpt met producten en diensten. U kunt ook informatie toevoegen over belangrijke mensen in uw bedrijf. Vergeet visuele elementen zoals afbeeldingen en logo's niet.
Nu is het tijd om de inhoud binnen de sjabloon te bewerken en de dummy-informatie te vervangen door die van jou. Voor deze tutorial gebruik ik de Moose-sjabloon. Deze responsieve websitesjabloon heeft een vlak en responsief ontwerp en bevat verschillende paginasjablonen die geschikt zijn voor bedrijfseigenaars, creatieve bureaus, digitale studio's en meer.
Voordat u begint met het bewerken van de sjabloon, is het belangrijk om de structuur te begrijpen, zodat u weet welke bestanden u moet wijzigen. Zoals u kunt zien in de onderstaande schermafbeelding, heeft de uitgepakte map drie submappen.
De sjabloon genaamd template is de submap die alle bestanden bevat die deel uitmaken van ons responsieve websitesjabloon, evenals een paar extra submappen. Als u een andere sjabloon gebruikt, ziet u mogelijk niet al deze bestanden en submappen, maar over het algemeen kunt u verwachten:
Dubbelklik op het bestand index.html of klik er met de rechtermuisknop op en selecteer Openen in Chrome (of welke browser je ook gebruikt). Wanneer u de sjabloon in uw browser bekijkt, kunt u zien dat er een schuifregelaar is waar u de afbeeldingen en de ondertitels moet vervangen, een servicesectie waar u uw eigen gegevens moet toevoegen en meer.
De gemakkelijkste manier om te vinden waar u deze informatie kunt bewerken, is door met de rechtermuisknop op de tekst te klikken en op de knop te klikken Inspecteren link.
Het Inspector-venster wordt geopend en u ziet de HTML-code die wordt gebruikt in de HTML-responsieve websitesjabloon aan de linkerkant van het venster en de CSS-code die verantwoordelijk is voor de visuele stijl van de sjabloon aan de rechterkant. handzijde van het infovenster.
Kijk naar de HTML-code en u zult zien dat de regel code die de geselecteerde tekst bevat, is gemarkeerd. In het screenshot-voorbeeld bevindt de header die ik inspecteer en die is gemarkeerd in het infovenster zich tussen de
tags bevatten het HTML-alinea-element.
Als u de sjabloon wilt wijzigen, moet u weten welke tags de tekst bevatten die u wilt bewerken en deze opnieuw kunt vinden in de codebewerker. Vervolgens kunt u de tekst vervangen door uw eigen tekst.
Nu we weten welke tags we moeten bewerken, is het tijd om het index.html-bestand in een code-editor zoals Sublime Text te openen. Klik met de rechtermuisknop op het bestand en klik op Open met Sublime-tekst (of een andere code-editor).
Open het HTML-bestand in de codebewerker en scrol omlaag totdat u dezelfde tekst vindt die u in uw browser inspecteerde. Klik vervolgens tussen de
Klik vervolgens tussen de tags, verwijder de tekst en voer een korte slogan of beschrijvende tekst in. U kunt ook delen van de responsieve websitesjabloon verwijderen die u niet nodig hebt. Als u naar de onderstaande schermafbeelding kijkt, ziet u dat ik de tekst van de koptekst heb vervangen en de onderste rij van de services heb verwijderd.
Als u de rest van de startpagina en andere pagina's in de sjabloon wilt bewerken, hoeft u dit proces slechts eenmaal te herhalen.
Laten we nu uitleggen hoe de dummy-afbeeldingen eenvoudig kunnen worden vervangen. Eerst moet u al uw afbeeldingen in de afbeeldingenmap plaatsen in de map van uw HTML-responsieve websitesjabloon. Ga vervolgens terug naar uw browser en inspecteer een deel van de pagina met een afbeelding.
De Inspector vertelt u de naam van de afbeelding en welke tags die afbeelding bevatten. Nu kunt u teruggaan naar de codebewerker en naar dat stuk code zoeken. Vervang vervolgens de afbeeldingnaam door de naam van uw afbeelding en sla de wijzigingen op.
Nu u uw eigen inhoud heeft ingevoerd, bespreken we hoe u de sjabloon kunt stijlen. In mijn geval bevat de Moose-sjabloon een paar vooraf gemaakte kleurenschema's die zich in de stijl> CSS> kleur submap. Dit betekent dat ik de kleuren eenvoudig kan wijzigen door het stylesheet in de kop van het document aan te passen voor mijn favoriete kleuren stylesheet.
Zoek de volgende regel code in de HTML-sjabloon:
Als je de naam wijzigt in blue.css, verander je de rode kleur van de sjabloon in een blauwe tint:
U kunt ook het hoofdstijlblad met de naam style.css bewerken en uw gewenste lettertypen en kleuren toevoegen.
Volg eenvoudig het HTML-bewerkingsprincipe: controleer eerst het element dat u wilt opmaken en zoek het vervolgens in het bestand style.css en experimenteer met verschillende waarden.
De laatste stap bij het maken van een responsieve website is om uw bestanden naar uw hostserver te uploaden. Uw hostingprovider had u onmiddellijk moeten e-mailen nadat u zich had geregistreerd met de nodige informatie voor FTP-bestandsoverdracht.
U moet FileZilla (of een ander FTP-programma) starten en vervolgens de vereiste informatie invoeren in de bovenste balk. Dit betekent dat u de naam van de server, uw gebruikersnaam en uw wachtwoord moet invoeren en vervolgens op moet klikken Snel verbinden:
Vervolgens zoekt u naar de HTML-responsieve websitemalplaat aan de linkerkant van het FTP-programma en vouwt u deze uit door erop te klikken. Selecteer in het onderstaande venster de volledige inhoud en sleep ze naar de rechterkant van het FTP-scherm. Zet de bestanden neer in de hoofdmap van uw hostingserver, meestal de map public_html.
Wacht tot het uploadproces is voltooid en open vervolgens je browser en voer je domeinnaam in. Uw site zou nu live moeten zijn.
Nu uw site live is, is het essentieel dat u cruciale informatie opneemt die elke zakelijke website zou moeten hebben.
Het maken van een responsieve bedrijfswebsite is eenvoudig als u de onderdelen begrijpt die deel uitmaken van de structuur van de sjabloon en de informatie vinden die u moet wijzigen. Gebruik onze zelfstudie om uw zakelijke website in te stellen en vergeet niet om onze verzameling responsieve zakelijke HTML-sjablonen te bekijken om de perfecte website te vinden voor uw site.
Accentsconagua