Textblock och Navigation

Här ska vi gå in på hur du lägger in text och navigerar mellan sidorna.

Navigation

Startsidan

Allmänt Om Hemsidor

Bästa WebEditorn

Starta Bygg i WYSIWYG

Textblock och Navigation

Ladda Upp Din Sida

Foton och Bilder

Länkar

Downloads

Kontakt

 

Sveriges startsida

BILDER

 Klicka på bilderna nedan för att se dom större. Öppnar i samma fönster så för att komma tillbaka, välj pil bakåt

Bild 1. Textblock formateras

Bild 2. Navigation

      Bild 3A. Dialogfönster Länkar

Bild 3. Internlänk

Bild 4. Internlänk - Välj Fil

 Bild 5. Internlänk Klar

  Bild 6. Navigation konfigurera 1

 

 Bild 7. Konfigurera Navig. knapp

Nu ska vi lägga in lite innehåll på sidan i form av text samt ordna till hur man navigerar fram och tillbaka mellan de olika sidorna du skapar.

Textblock

Texten är väldigt lätt att lägga till. Gå bara upp till det översta verktygsfältet och ungefär i mitten av detta hittar du en knapp märkt "Text". Klicka på denna och din markörpil förvandlas till ett kors, samtidigt som knappen "Text" blir ljusare.

Placera nu ditt "muskors" ungefär där du skulle vilja ha din text, tryck ner Vänster musknapp, håll den nere och dra upp en textruta. I denna står det nu "Double click to edit"...så då gör vi väl det.  Dubbelklicka på texten och nu fick rutan en vit bakgrund samt en markör börjar blinka i slutet av texten. Du kan nu välja om Du vill ta bort texten med backsteg eller markera hela "Double click to edit" och ta bort det genom att trycka delete...alla sätt är bra !

Skriv in din text och när Du är nöjd kan Du markera allt och formatera den som Du vill. Jag har valt att använda fonten Comic Sans i 14 punkters storlek.

Se bild 1.

Nu har jag inte skrivit så mycket, men det räcker för att visa. Notera att bara för att texten är färdigskriven kan man alltid gå tillbaka för att ändra, ta bort eller lägga till. Layouten är inte heller den helt fastspikad...Om Du enkelklickar någonstans på texten dyker de små blå fyrkanterna tunt texten upp, och dom kan du dra i för att bredda eller göra textblocket smalare. Lägger du musen någonstans på texten när du har de små blå fyrkanterna framme får Du den där "fyra-pilen" och då kan Du flytta runt på hela textblocket om Du håller Vänster musknapp nertryckt,

Dubbelklickar Du på texten får Du fram den vita bakgrunden och då kan Du redigera själva texten....enkelt och smart..

Navigation

Du kommer att behöva kunna navigera mellan olika sidor Du bygger. För att skapa ytterligare en sida går Du bara in under "File" och väljer "New Page / Blank Page" eller trycket på "New" knappen i övre verktygsfältet. Att bygga den sidan gör Du på precis samma sätt som den här index-sidan, men tänk bara på att döpa den till något lätt som "sid1" eller nåt...och spara den på samma plats som din index sida, såklart !

Nu ska vi navigera....nere i det högra verktygsfältet, det som Du innan vi startade drog till sidan finns en knapp som heter navigation...du ser den på bild 2.  Klickar Du på den så händer exakt samma sak som tidigare, knappen blir ljusare och muspilen blir till ett kors. Nu sätter Du korset där Du skulle vilja ha dina navigationsknappar...de flesta sidorna har det förlagt till Vänster sida på sin Hemsida, ganska högt upp, så jag föreslår att vi håller oss till ungefär samma placering.

När Du nu valt platsen så Vänsterklickar Du bara och vips, ett set om 4 knappar dyker upp och på alla står det samma.. "Web Builder". Som det är nu är det "döda" knappar utan någon somhelst funktion och Du bör ha publicerat dina sidor på nätet för att kunna konfigurera dom rätt (testa dom så det funkar), men vi tar nu och arbetar med ett fiktivt webb-konto så Du vet hur Du ska göra sen, när Du väl har ett konto som Du lagt upp dina sidor på.

OK... Då konfigurerar vi knapparna och vi antar att Du har ett Telia konto som heter ~u4552935  Adressen till Telias webbserver är http://web.telia.com Din förstasida som vi arbetat med har Du döpt till index och din andra sida vi ska länka till har Du döpt till sid1

Dubbelklicka på knapparna Du just skapat och då dyker det upp ett fönster, så som Du ser på Bild 3A. Markera den första textraden det står "Web Builder" på och klicka sen på "Edit" till Höger. Ett nytt fönster dyker upp som heter "edit button". På första raden står det "Web Builder" och det är knappens namn. Jag döper om den här til "Blombilder" och Du döper din till vad Du har gjort på din andrasida Längre ner står det "Link type" och som default är den på "Web Site" och den ändrar vi till "InternalWeb Page".  (Bild 3) Under den står det URL, och precis under det fältet står det till Höger "Browse for a file". Klicka på den och ett fönster dyker upp. Se nu till så att Du är i mappen  där du skapat dina sidor. Längst ner på detta lilla fönster står det "Filformat" och den är satt till "HTML Files". Det där får vi ändra genom att trycka på den lilla pilen neråt och då välja "Web Builder Files" istället. (Bild 4) När den är markerad ser Du alla dina webbsidor om Du sparat dem i rätt mapp. Det räcker nu med att klicka på sid1 kort och gott.  Sen är det bara att klicka på OK, och OK igen tills Du är tillbaks på arbetsytan igen. Länken du skapat kallas för dynamisk länk och kommer att fungera även om Du skulle flytta din webbsida till ett annat webbhotell.

För att i rättvisans namn även beskriva hur man skapar en annan typ av länk, den statiska länken skriver jag följande exempel:

Dubbelklicka på knapparna Du just skapat och då dyker det upp ett fönster, så som Du ser på Bild 6. Markera den första textraden det står "Web Builder" på och klicka sen på "Edit" till Höger. Ett nytt fönster dyker upp som heter "edit button". På första raden står det "Web Builder" och det är knappens namn. Jag döper om den här til "Blombilder" och Du döper din till vad Du har gjort på din andrasida Längre ner står det "Link type" och som default är den på "Web Site" och det behåller vi.

Nu hade Du ett Teliakonto, servern på telias hemsidor heter web.telia.com och ett kontonummer som heter u4552935 och andrasidan hade vi döpt till sid1 Adressen till din andra sida blir då: http://web.telia.com/~u4552935/sid1.html

Observera ~ tecknet framför kontonumret. Det får Du fram genom att trycka AltGr + på knappen med symbolen ~ som finns precis sidan om Enter knappen.  Se Bild 7.  Nu ser jag att jag har skapat länken på rad 2, men vad gör det...för mycket jobb att ändra alla bilderna

Dock ser jag gärna att Du väljer det förstnämnda alternativet, den dynamiska länken då den inte är beroende av var Du väljer att publicera din Webbsida !

(Tack, svenkalle på Internetstarts Forum för att ha visat mig på de olika typerna av länkarna och Rob för korrekt terminologi )

TIPS ! Som ni antagligen märkt när ni kikat på bilderna kan man ändra utseende på knapparna. Tittar ni på Bild 5 där jag har öppnat fönstret Navigation Bar Properties efter att ha klickat på knapparna vi skapade, så upptill på flikarna står det på en flik "Style".  Där kan Du ändra bäst Du vill hur dina knappar ska se ut !

TIPS 2 ! När man skapar sina Navigationsknappar kan det vara lämpligt att döpa den översta till Home eller Startsidan. Detta för att man ska ju kunna komma tillbaks till ursprungssidan, och när man fixat ett par länkar kan man ju bara kopiera sina Navigationsknappar och klistra in dem på undersidorna. Som Du ser har jag gjort detta på Bild 5. Kommer de sen i fel ordning, tycker Du kanske när Du ser de på en undersida  ...men det går enkelt att sortera om dem med "Move Up" och "Move Down" knapparna i Navigation Bar Properties fönstret.

Nu kan man även låta ena sidan av webbsidan ligga kvar statiskt och bara innehållet ändras, men då är Vi inne på något som heter "Frames" ...och just nu är det lite för krångligt för oss. När Vi är mer varma i kläderna tar Vi oss an den överkursen...