Opprette et nettsted uten HTML-kunnskap? Nettredaktører for å bygge nettsteder vinner terreng, ofte på grunn av de vakre malene. Hvis du foretrekker å ikke starte fra et slikt ferdig design, som ofte ender med et betalt alternativ, er RocketCake et skrivebordsprogram som du kan bygge et vakkert nettsted fra bunnen av.
Det engelske programmet inneholder bare femten maler for inspirasjon. Intensjonen er at du lager ditt eget nettsted med RocketCake som du enkelt kan oppdatere senere. RocketCake er en såkalt WYSIWYG-editor. Du trenger ikke å skrive inn HTML-koder. Du kompilerer ditt eget nettsted ved å plassere elementer på arbeidsområdet og deretter laste opp saken. Elementene inkluderer tekstbokser, knapper, bilder, menyer, lysbildefremvisning, filmer, lydklipp og mer. Det som gjør RocketCake spesiell, er at det er redaktør å bygge såkalte responsive nettsteder. Et slikt responsivt nettsted er mobilvennlig, fordi oppsettet tilpasser seg skjermen på enheten som noen besøker nettstedet med.
En responsiv webside forblir ryddig, enten du ser den på en stor skjerm eller en liten smarttelefonskjerm. For dette formål vil nettstedet justere en rekke komponenter, for eksempel skriftstørrelse, ordning av visse elementer og måten menyen vises på skjermen.
Last ned RocketCake her. Det er en versjon for Windows og en for macOS. I denne workshopen bruker vi den gratis utgaven. Dette gjør det enkelt å lage et smidig fungerende responsivt nettsted. Det er også en profesjonell utgave av RocketCake, som koster 39 euro. Med den profesjonelle versjonen kan du opprette et ubegrenset antall nettsteder. Det er også CSS-støtte, som du raskt kan justere layoutstiler på et helt nettsted. Versjon 3.1 av RocketCake er forbedret slik at nettstedet ditt scorer bedre med Google og andre søkemotorer. Videre inneholder den gratis versjonen noen få funksjoner som tidligere bare var i den betalte utgaven.
Arbeidsmiljø og skjerm
Øverst på arbeidsområdet er linjen med knapper for å legge til en ny side, for å forhåndsvise med Internet Explorer og for å publisere nettstedet på Internett. Til høyre finner du Verktøysett med alle elementene du kan plassere på en webside. Øverst til venstre kan du se strukturen til alle sidene på nettstedet ditt.
Nedenfor er det Eiendommer. Her endrer du egenskapene til hvert element du velger. Anta at du vil legge til et bilde på en side, så velger du bildefilen i Egenskapene og angir om bildet skal ha avrundede eller skarpe hjørner og så videre ...
Helt nederst bestemmer du skjermbredden. Som standard er dette Desktop-vise. Via den lille rullegardinmenyen nederst til venstre kan du også jobbe i displayet til en rekke populære mobile enheter, som iPhone, iPad, Samsung Galaxy, LG ... Hvis du ikke finner ønsket bredde i dette menyen, kan du også velge Egendefinert og bruke en glidebryter for å angi bredden som skal vises på skjermen. Denne breddeinnstillingen er viktig for å bestemme brytepunktene, som vi vil diskutere senere.
Farger og hjemmeside
La oss starte med hjemmesiden. I dette eksemplet lager vi nettstedet til et ambisiøst rockeband. I stedet for å starte med en mal, velger du Tom side. Egenskaper-delen vil tilpasse seg hvert element du velger. Klikk for eksempel på bakgrunnen til den første siden, så får du tilgang Bakgrunnsfarge velg en bakgrunnsfarge. Standard er 000000, html-koden for hvit. Hvis du klikker på ruten med de tre punktene, får du fargevelgeren. I egenskapene gir du denne websiden en tittel. Dette vil snart vises øverst i nettleservinduet. Du lar navnet på hjemmesiden ligge på index.html. En nettleser søker alltid etter indeksiden som skal vises som en startside.
Under den bestemmer du fargene på de fire typene hyperkoblinger. LinkColor bestemmer fargen på lenkene som ennå ikke er besøkt, LinkColorActive refererer til lenker som noen besøker for øyeblikket, LinkColorHover er fargen på en lenke musepekeren peker på og LinkColorVisited refererer til lenker som noen allerede har besøkt.
Navigasjonsfelt og introbilde
For å plassere en navigasjonslinje, velg elementet i verktøysettet Navigasjonsmeny og klikk deretter på arbeidsområdet. I denne navigasjonslinjen skriver du inn menyelementene du vil lage websider for. Hold navnene på disse elementene korte. I vårt eksempel er disse Bandet, Who, Where, When, Why og Media. Øverst er knappene for å formatere teksten til disse navigasjonselementene. Hvis du klikker på selve navigasjonslinjen, kan du justere fargen og formen på linjen i Egenskapene. Så du kan BackGroundMode velg for Farge, bilde, gradering og Stilknapp. I Gradient bestemmer du fargetonene til overgangen, og i Styled Button får menylinjen et konveks utseende.
Vi ønsker også å legge til et banner eller introbilde. For å gjøre dette må du først plassere varen Container. I eiendommene på ImageNameKlikk på de tre punktene for å velge bildet du har forberedt på forhånd. Hvis den er for stor, vil RocketCake spørre om den kan justere bildestørrelsen. Det er lov. Tittelen "Mad Dog" som du ser på banneret øverst i denne artikkelen, la vi til bildet selv med et annet program. I prinsippet kan du også skrive tekst med varen Flytende tekst over et bilde. Dessverre gir dette et uforutsigbart resultat på mobile enheter.
Når du er fornøyd, lagrer du arbeidsfilen et sted på harddisken som en .rcd-fil.
Kolonner
Under banneret vil du gi hjemmesiden innhold i en, to eller tre kolonner. For å gjøre dette, velg elementet i Toolset Beholder med kolonner. RocketCake spør hvor mange kolonner du vil ha. Søknaden vil også vite hva minimumsbredden på en kolonne er. Vi har valgt to kolonner og standardinnstillingen 150. Dette betyr at på en bred skjerm kan kolonnene sees pent ved siden av hverandre. Hvis en kolonne på en liten skjerm blir mindre enn 150 piksler, vises den ikke lenger ved siden av, men under den forrige kolonnen.
I dette eksemplet setter vi venstre kolonne til MinBredde 500. 500 er brytpunktet for venstre kolonne. Hvis skjermbredden blir for liten, vil den besøkende lese innholdet i høyre kolonne under venstre kolonne. I tillegg har vi satt banneret til MaxBredde 1000.
For å gjøre høyre kolonne smalere enn venstre, klikk først på venstre kolonne. De Størrelse er der som standard 50%, automatisk. For eksempel endre det til 70%, automatisk. Dette fører til at den andre kolonnen midlertidig flyter under den første. Du kan løse dette hvis du klikker på den andre kolonnen og på Størrelse 30%, automatisk Fyll inn. Dette gir deg et forhold på 70/30. Deretter fyller du kolonnene med tekst, som du også designer som med tekstbehandler. Du kan også få tilgang til en slik kolonne fra verktøysettet Overskrifter (kopper). Overskrift 1, 2, 3 holder koppene flotte.
For å legge til et bilde, plasser markøren i teksten og klikk på i verktøysettet Bilde. Naviger deretter til stedet der bildet venter. Klikk på knappen nå og da Forhåndsvisning for å se arbeidet ditt i en nettleser.
Hvis du klikker på en slik tekstkolonne, vil du se i egenskapene at Polstring standard er satt til 10, 10, 10, 10. Padding er avstanden fra teksten til kolonnekanten. Det første tallet refererer til toppen, det andre til bunnen, det tredje til høyre og det fjerde til venstre. Hvis du vil ha litt mer polstring på høyre side av en tekstboks, må du sette den tredje verdien til for eksempel 20.
Polstring er derfor avstanden på innsiden av en boks, Margin er avstanden på utsiden. Hvis du vil ha litt mer mellomrom mellom bunnen av bildet og toppen av teksten under det, endrer du margen fra 0, 0, 0, 0 for å si 0, 10, 0, 0.
Ekstra sider
Nå som hjemmesiden er klar, vil du naturligvis lage flere sider for prosjektet ditt. Det gjøres med knappen Legg til side. Programmet spør om du vil opprette en helt ny side eller en kopi av en eksisterende webside. I dette eksemplet vil vi bruke stilen til hjemmesiden vår: den svarte bakgrunnen, skrift, skriftstørrelse, bredden på beholderen ... Så vi går for det andre alternativet. Så fjerner vi banneret og endrer innholdet i tekstbeholderen.
Hvis du vil ha en bunntekst nederst på hver side, kan du legge til en der også Container eller Beholder med kolonner og skriv inn for eksempel kontaktinformasjonen eller copyright-informasjonen. Spesialtegn som copyright-symbolet kan ikke angis direkte med tastaturet. I RocketCake velger du slike spesialtegn fra menyen Sett inn, sett inn tekstsymbol.
Lenker
Selvfølgelig vil du at knappene i navigasjonsmenyen skal peke på de riktige sidene. For å gjøre dette, velg først knappen i navigasjonsmenyen og klikk deretter knappen med kjeden. Eller du trykker på høyre museknapp og velger Sett inn hyperkobling. Dette åpner et valgvindu der du må velge mellom å koble til en ekstern webside, en e-postadresse, en side av dette prosjektet eller en bestemt fil. Velg alternativet Side i prosjektet. Deretter vil du se en liste over opprettet nettsider der du velger riktig.
Bie Mål velger å åpne websiden i et nytt nettleservindu eller i det åpne nettleservinduet. Sistnevnte alternativ er vanlig. Hvis du holder nede venstre museknapp mens du holder musepekeren over en navigasjonsmenyknapp, legger du til undermenyer som deretter vil koble deg til eksisterende websider på samme måte.
Masterpages
RocketCake fungerer også med såkalte mastersider. Hvis du oppretter et nettsted med mange sider, vil denne teknikken øke oppsettet betydelig. En masterside er en formatert modell som fungerer som mal for andre sider. En slik masterside er derfor ikke en vanlig webside. Slik lager du en: Opprett en ny webside, plasser rullegardinmenyen, få menyen til å fungere som den skal, og formater denne siden uten noe egentlig tekstinnhold. Deretter legger du til en fra verktøysettet Innhold Plassholder til. Uten dette elementet fungerer ikke mastersiden. Gi denne spesielle siden et meningsfylt navn, for eksempel masterpage.html. Deretter oppretter du en eller flere nettsider som du ikke gir med en layout.
Du skriver inn tekst, eventuelt legger til et bilde og lagrer denne siden. For disse sidene med innhold ser du nederst på Egenskapene i feltet Masterside. Der aktiverer du alternativet Bruk MasterPage. Hvis du har aktivert haken, vises en ny rute der du velger navnet på den tiltenkte mastersiden. Du kan bruke flere mastersider. På dette punktet vil du ikke se noe annet enn hvis du trykker på knappen Forhåndsvisning vil du legge merke til at innholdet på denne siden er pent publisert i innholdsplassholderen på den valgte mastersiden.
Sett inn media
Med RocketCake legger du til YouTube-videoer ved å klikke på elementet i verktøysettet YouTube-video å velge. Skriv deretter inn nettadressen til videoen i Egenskaper. Det er like enkelt å legge til et fotogalleri. Etter deg bildegalleri valgt fra verktøysettet, velger du de forskjellige bildene i boksene ImageFile1, ImageFile2 og så videre. Det er flere måter å forstørre bildene på i galleriet. For eksempel kan du åpne dem i et nytt vindu, i et popup-vindu, men vi liker best som et stort bilde på et eget lag.
Å publisere
Du er ferdig? Deretter kan du publisere nettstedet på internett eller på en lokal disk. RocketCake er utstyrt med en ftp-funksjon for å plassere alt på serveren i mappen som leverandøren din gjør tilgjengelig for dette. Fyll inn ftp-adresse, brukernavn og passord. Bruk alternativet om nødvendig Lagre passord for å lagre passordet. Når du publiserer nettstedet på harddisken din, kan du besøke hjemmesiden ved å åpne index.html-filen med internettprogrammet ditt.
