Når det gjelder å skape ditt nettsted, er det flere måter å gjøre det på. Du kan velge en byggemotor, du kan ha et utviklingsdesign et nettsted for deg, eller du kan bruke et CMS som WordPress. Mens det ikke er noe galt med disse alternativene, kan de være for mye hvis alt du trenger er et enkelt nettsted for å vise frem hva virksomheten din handler om, og gi potensielle kunder og kunder en måte å kontakte deg på..

Hvis du ikke trenger fancy funksjoner, og du ikke forutser deg selv regelmessig å blogge eller selge på nettet, er en HTML-responsiv nettsamliste akkurat det du trenger. Her går vi gjennom oppsettstrinnene, slik at du kan starte på kort tid. 

Hvordan lage et responsivt nettsted i HTML

Skjønnheten i HTML-responsive forretningssider er at de er enkle å bruke og ikke krever noen spesiell teknisk kunnskap for å laste dem opp til hosting-serveren din. De er også enklere å endre enn andre nettsidebyggere og CMS.

I denne opplæringen viser vi deg hvordan du endrer og laster opp en HTML-responsiv nettsamlering til serveren din, slik at du enkelt kan lage en responsiv forretningswebside..

Før du kommer i gang

Før vi begynner med responsiv nettsidemodifikasjon, er det noen ting du trenger. De inkluderer et domenenavn og en hostingplan, et FTP-program og en kodeditor, en HTML-responsiv nettside-mal, og til slutt innhold og bilder som vil gå på nettstedet ditt. La oss se nærmere på hver av de nedenfor.

1. Domenenavn og Hosting

Det første du må gjøre er å kjøpe et domenenavn og en hosting plan, slik at nettstedet ditt kan bli funnet på nettet. I de fleste tilfeller kan du få et gratis domenenavn når du registrerer deg for en hostingplan med de fleste leverandører. Når det gjelder domenenavnet ditt, ville det være en god idé å bruke ditt virkelige firmanavn som domenenavnet.

Hvis det er mulig, prøv å få en .COM-utvidelse som den er den mest populære, men husk at det å finne et godt domenenavn med en .COM er ikke så lett i dag som det en gang var. I så fall vil du kanskje se på andre utvidelser som .CO eller et lokalt domene som .US.

Når det gjelder hosting leverandører, kan du finne hosting pakker som starter på $ 5 / month. Du vil lese gjennom deres vanlige spørsmål for å se hvordan de håndterer kundeservice og få en følelse av deres vilkår og betingelser. Vurder også å lese anmeldelser av en bestemt vert på andre tredjeparts nettsteder for å se hva kundene sier om dem.

2. FTP-klient og kode redigerer

De neste elementene på vår liste er en FTP-klient som FileZilla og en kodeditor som Sublime Text. Formålet med en FTP-klient er å koble datamaskinen til vertsserveren og enkelt laste opp nettstedets filer på en gang, i stedet for å laste dem opp en etter en gjennom vertsens kontrollpanel. En kodeditor vil på den annen side hjelpe deg med å redigere malens filer og gjøre det lettere å finne forskjellige deler av koden som trenger redigering.

Både Sublime Text og FileZilla er gratis å laste ned og kan brukes på Mac, Windows og Linux-baserte datamaskiner.

3. Din valgte HTML Responsive Website Template og innholdet på nettstedet

Til slutt trenger du en HTML-mal og innholdet du vil legge til på nettstedet ditt. Du kan finne en mengde responsive HTML-maler laget spesielt for virksomhetswebsteder på markedsplasser som Envato Elements. Når du har funnet en du liker, kan du bare laste den ned, pakke ut mappen og lagre den et sted du lett kan få tilgang til.

Når det gjelder innhold, vurder kopien som går på sidene på nettstedet ditt, og forklar hva firmaet ditt gjør, hvem det tjener, og hvordan det hjelper kundene med produkter og tjenester. Du kan også legge til informasjon om nøkkelpersoner i din bedrift. Ikke glem visuelle elementer som bilder og logoer.

Slik tilpasser du malens innhold

Nå er det på tide å redigere innholdet i malen og erstatte dummyinformasjonen med din egen. I forbindelse med denne opplæringen bruker jeg elgemalen. Denne responsive nettstedsmalen har flat og responsiv design og inneholder flere forskjellige sidemaler som passer for bedriftseiere, kreative byråer, digitale studioer og mer.

1. Forstå hvordan den Responsive Website Mal er strukturert

Før du begynner å redigere malen, er det viktig å forstå strukturen slik at du vet hvilke filer du må endre. Som du kan se fra skjermbildet nedenfor, har den utpakket mappen tre undermapper.

Den som heter mal er undermappen som inneholder alle filene som utgjør vår responsive nettsidemal samt noen ekstra undermapper. Hvis du bruker en annen mal, kan du ikke se alle disse filene og undermappene, men generelt kan du forvente å finne:

• Bilder-mappen som inneholder alle demo-bildene som brukes i malen.
• JS eller JavaScript-mappe med all JavaScript-koden som trengs for at malen skal fungere skikkelig. Generelt sett trenger du ikke å redigere innholdet i denne mappen, da JavaScript brukes til ekstra funksjonalitet, for eksempel animasjon eller form validering.
• CSS eller Styles-mappen som inneholder CSS-filene, må du redigere for å tilpasse skrifter, farger og andre visuelle stiler.
• Ulike HTML-filer for forskjellige sider på nettstedet ditt, som index.html, about.html, contact.html og andre.

2. Erstatt Dummy Content

Dobbeltklikk filen index.html eller høyreklikk den og velg Åpne i Chrome (eller hvilken nettleser du bruker). Når du ser på malen i nettleseren din, kan du se at det er en skyveknapp der du må bytte ut bildene og bildeteksten, en tjenesteavdeling der du må legge til din egen informasjon og mer.

Den enkleste måten å finne hvor du skal redigere denne informasjonen er å høyreklikke på teksten og klikk på Undersøke link.

Inspektørvinduet vil dukke opp, og du vil kunne se HTML-koden som brukes i HTML-responsiv nettsamliste på venstre side av vinduet og CSS-koden som er ansvarlig for den visuelle stilen til malen på høyre- side av inspektørvinduet.

Se på HTML-koden, og du vil se at koden med den valgte teksten er uthevet. I skjermbildeeksemplet er overskriften som jeg inspiserer, og det er markert i Inspector-vinduet, mellom

koder, som er HTML-kodene. Etiketter i HTML består av en åpnings- og avsluttende kode og utgjør et tagpar som inneholder tilsvarende HTML-elementer. For eksempel,

koder kalles overskriftskoder og brukes til å holde en nivå 1 overskrift. på samme måte,

Tagger inneholder avsnittet HTML-element.

For å endre malen, må du vite hvilke koder som holder teksten du vil redigere, og finne dem igjen i kodeditoren. Deretter kan du erstatte teksten med din egen.

Nå som vi vet hvilke koder vi trenger å redigere, er det på tide å åpne index.html-filen i en kodeditor som Sublime Text. Høyreklikk filen og klikk Åpne med Sublime Text (eller andre kodeditorer).

Med HTML-filen din åpen i kodeditoren, rull ned til du finner den samme teksten du inspiserte i nettleseren din. Deretter klikker du mellom

tagger, slett dummy-teksten, og skriv inn din egen.

Deretter klikker du mellom tagger, slett teksten og skriv inn en kort tagline eller beskrivende tekst. Du kan også slette deler av den mottatte nettsiden du ikke trenger. Hvis du ser på skjermbildet nedenfor, vil du legge merke til at jeg har erstattet teksten til overskriften og slettet den nederste raden av tjenestene.

For å redigere resten av hjemmesiden og andre sider i malen, er alt du trenger å gjøre gjenta denne prosessen om og om igjen.

Nå, la oss forklare hvordan du enkelt kan erstatte dummy-bildene. Først må du plassere alle bildene dine i bildemappen i mappen din for HTML-responsiv nettsammenmal. Deretter går du tilbake til nettleseren din og inspiserer en del av siden med et bilde.

Inspektøren vil fortelle deg navnet på bildet, samt hvilke tagger som inneholder bildet. Nå kan du gå tilbake til kodeditoren og se etter det stykke kode. Deretter erstattes bildenavnet med navnet på bildet ditt og lagrer endringene.

Slik utformer du den Responsive Website Template

Nå som du har skrevet inn ditt eget innhold, la oss diskutere hvordan du stiler malen. I mitt tilfelle inneholder Moose-malen med noen forhåndsdefinerte farger som ligger i stil> CSS> farge undermappe. Dette betyr at jeg enkelt kan endre fargene ved å endre stilarket i dokumentets hode for mitt foretrukne fargestilark.

Finn følgende linje med kode i HTML-malen:

Hvis du endrer navnet til blue.css, endres den røde fargen på malen til en blå nyanse:

Du kan også redigere hoved stilarket called style.css og inkludere dine foretrukne skrifttyper og farger.

Følg bare HTML redigering prinsippet: Først, inspiser elementet du vil stil, og finn det i style.css filen og eksperimentere med forskjellige verdier.

Slik laster du opp filer til serveren

Det siste trinnet i å lage en responsiv nettside er å laste opp filene dine til webserveren din. Din vertsleverandør bør ha sendt deg e-post til deg umiddelbart etter at du har registrert deg med den nødvendige informasjonen for FTP-filoverføring.

Du må starte FileZilla (eller et annet FTP-program) og deretter skrive inn den nødvendige informasjonen i topplinjen. Dette betyr at du må skrive inn serverens navn, brukernavn og passord, og klikk deretter på Quickconnect:

Deretter vil du finne den HTML-responsive nettsiden malemappen på venstre side av FTP-programmet og utvide den ved å klikke på den. I vinduet under velger du alt innholdet og drar dem over til høyre på FTP-skjermen. Slett filene i rotmappen til webserveren din, som vanligvis er mappen public_html.

Vent til opplastingsprosessen er ferdig, og åpne deretter nettleseren din og skriv inn domenenavnet ditt. Nettstedet ditt skal nå være live.

4 Nøkkelelementer Din Responsive Business Website bør inkludere

Nå som nettstedet ditt er i live, er det viktig at du inkluderer viktig informasjon hver bedriftens nettside burde ha.

1. Om og tjenester side. En om side forteller de besøkende historien bak merket ditt og hjelper dem å forstå hvordan tjenestene dine kan hjelpe dem. Derfra kan du naturlig lenke til din serviceside som skal gi en kort beskrivelse av alt som er inkludert i tjenesten, samt prisen på hver pakke.
2. Kontakt side. Det er selvsagt at du trenger en kontaktside, slik at besøkende kan komme i kontakt med deg for å planlegge en samtale eller for å finne ut mer om deg. Din kontaktside skal inneholde et enkelt kontaktskjema, men du kan også liste opp dine sosiale medierprofiler eller et telefonnummer.
3. Sosialt bevis. Stykker av sosialt bevis som testamente, vurderinger eller funksjoner i andre publikasjoner går langt i retning av å etablere troverdighet og kompetanse. Vurder å inkludere noen av dem på hjemmesiden og skape en dedikert side som vil huse alle gjeldende og fremtidige ros du mottar.
4. Oppfordring til handling. Til slutt, ikke glem at du må gjøre det krystallklart for de besøkende, hva det er som du vil at de skal gjøre. Bare å vise tjenestene dine vil ikke gjøre mye for å oppmuntre dem til å bestille en samtale. Ta med flere samtaler til handling på hjemmesiden din og hele resten av nettstedet ditt, som gjør det enkelt for besøkende å gjøre noe.

Lag ditt Responsive Business Website i dag

Å lage en responsiv forretningswebside er lett når du forstår delene som utgjør strukturen i malen og hvordan du finner informasjonen du må endre. Bruk vår veiledning for å sette opp virksomhetswebområdet ditt, og ikke glem å sjekke ut vår samling av responsive virksomhets HTML-maler for å finne den perfekte for nettstedet ditt.