1. Inledning
Den här sidan berättar mer om layoutverktyget Layout grid, som det heter i den engelska versionen. På svenska borde det bli något i stil med "layoutrutan" eller "layoutrutnätet".
Detta verktyg låter dig placera text och bilder var du vill i dokumentet. Rutmönstret underlättar layouten och du behöver inte tänka på att skapa tabeller eller andra inställningar.
När du är nöjd med din layout, gör GoLive tabeller och de inställningar som behövs. På detta sätt kan man alltså koncentrera sig på själva utformandet av sidan och slipper fundera närmare över koden.
2. För- och nackdelar med layout grid
Skall man använda ett layoutrutnät eller inte?
Många grafiska program för att göra hemsidor har numera ett layoutrutnät som gör att man kan placera objekt var som helst på webbsidan. Processen liknar den i layoutprogram för trycksaker, som InDesign/PageMaker och QuarkXPress.
Jag tror att GoLive, från Adobe, var först med layoutrutnät, men idag har även Dreamweaver, m.fl. program denna funktion. Man drar in rutnätet på webbsidan och placerar sedan objekt på det. Rutnätet omvandlas sedan till tabeller.
Rutnät har många fördelar, eftersom man slipper sitta och ställa in värden för alla tabellceller. Att göra en snygg hemsida går därför ganska snabbt och enkelt.
Men det finns också många nackdelar. GoLive skapar mycket kod för sina rutnät och koden tar mycket plats vilket gör sidan trög att ladda.
Tips!
Lägg in ett rutnät respektive en tabell och jämför sedan själv vilken skillnad det blir mellan den kod de båda objekten får!
Skall man använda rutnät?
Ja, det tycker jag, så länge man inte behöver bygga avancerade sidor. Är det viktigt att bilder hamnar skarv i skarv utan mellanrum, t.ex i en meny, bör man dock vara uppmärksam på den kod GoLive skapar. Testa alltid dina sidor noga innan du publicerar dem!
3. Placera objekt
Uppgift Börja med att placera en layoutruta i ett nytt dokument.
Du ser i bilden här till höger vilket objekt det är du skall använda;.
Bilden visar också hur det ser ut när layoutrutan är på plats.
Man kan ändra rutans storlek genom att dra i dess kanter. Först måste objektet markeras och sedan kan man dra och trycka i de blå fyrkanterna. När handen visar sig kan rutan flyttas.
Om du tittar i koden ser du nu att GoLive lagt in ett nytt element inne i tabellerna. Detta element är <SPACER>, som används för att rätta till Netscapes lite konstiga tabellhantering. Med SPACER blir tabellcellerna så stora som man angett. Internet Explorer ignorerar detta element.
Obs!
Det går att komma runt Netscapes felaktiga tabellhantering även utan att använda SPACER. Det är egentligen inte så svårt utan krävs mest erfarenhet och en hel del pillande med koden och testande i olika versioner. Man kan t.ex med fördel skriva in koden för ett mellanslag, som fungerar lika bra: <TD> </TD>
GoLive har en särskild palett för att hantera rutnät.
När man markerat layoutrutan aktiveras denna, kallad Inspector och "Layout grid inspector" i GoLive 4. På svenska kallas den kontextpaletten.
Bilden visar hur den ser ut i PC-versionen.
Man markerar rutnätet och tittar på kontextpaletten för att se alla inställningsmöjligheter.
Överst hittar man uppgifter om hur stortrutnätet är. Klickar man på Optimize tar programmet bort onödig rutnätsyta, så att man slipper en massa extra rader och kolumner.
Under rubriken Grid kan man göra inställningar för hur små rutor layoutrutan skall ha. Ju lägre värde desto mindre rutor.
Där finns också en liten finess, Snap, som innebär att objekten fästs mot rutnätets kanter. Detta är bra att ha igång, eftersom bilder och textrutor annars kan börja krångla, om de inte passar perfekt efter rutnätets kanter.
Det skall dock sägas att bilder måste fylla ut rutorna exakt för att läggas ihop; se vad jag skrev i avsnitt 2.
Bakgrundsfärg behöver man sällan använda, men kan kanske vara en fördel om man vill öka kontrasten mellan ett vitt rutnät och vita bilder och textrutor.
I Mac-versionen ser Inspector ut så som på bilden här bredvid.
Uppgift: Ändra storleken på layoutrutan så att den är 550 pixlar bred och 200 pixlar hög!
För att även de som använder skärmupplösningen 640x480 skall kunna läsa sidan utan att behöva scrolla i sidled, brukar man göra sidan högst 580 pixlar bred. Jag brukar själv använda mig av 550 pixlars bredd för brödtext, eftersom det ger lagom långa rader.
Vill man inte begränsa sig för denna skärmupplösning, utan nöjer sig med att designa för 800x600, kan man alltså töja lite på gränserna här.
Uppgift: Pröva att lägga in olika objekt på layoutrutan, så att du blir bekant med hur det fungerar.
Som du märker kan man inte skriva något direkt på layoutrutan. I stället måste man lägga in en särskild textruta för att få in text. Om du tittar till höger om layoutrutan i grundpaletten, ser du bl.a symbolen för en textruta (text box).
När man placerat en textruta på layoutrutan kan man markera den och ändra dess storlek. Man kan också skriva in vilken text man vill.
4. Markera flera objekt
För att markera flera objekt i layoutrutan markerar man först ett objekt. Genom att hålla nere Shift (Mac) eller Control (Windows) kan man sedan markera ytterligare objekt.
Uppgift: Markera minst två objekt i din layoutruta!
Som du ser i bilden här bredvid dyker nu en ny palett upp, som heter Multiselection Inspector. Här kan du justera dina objekt så att de hamnar kant i kant. I vissa fall kan du även justera dem så att de får exakt rätt storlek. Objekten anpassas efter det objekt du valde först.
Denna palett och funktion har i GoLive 5 flyttats till paletten Align, som brukar dyka upp längst upp på skärmen. Den kan också tas fram via menyn Window-Align, via verktygsfältet eller Ctrl+8 (Windows) eller Cmd+8 (Mac).
Under fliken Special kan du ställa in exakt hur långt ifrån varandra olika objekt skall ligga. Valen aktiveras när de är möjliga. Genom att klicka på en knapp kan du se hur justeringen sker. Det går att justera ner till en pixels noggrannhet.
|
