Bearbeta filer är den ena delen i WebUtopia. Här kan du arbeta med flera filer samtidigt. Du kan till exempel felsöka dina filer, komprimera dom, sök och ersätt osv.
I Editorn arbetar du med dina filer. Du kan skapa frames, tabeller, formulär, felsöka din kod, komprimera och mycket, mycket mer snabbt och enkelt. Om du vill ha ett speciellt dokument att utgå ifrån varje gång du gör ett nytt dokument kan du grunddokumentet och spara det i mappen mallar. Välj sedan Arkiv -> Nytt -> Malldokument när du skapar nya sidor.
Kopiera filer underlättar för dig när du ska lägga upp din sida på webben. Här kan du kopiera de filer som har ändrats till en speciell katalog och sedan lägga ut de filer. På så sätt slipper du ta med filer som inte är uppdaterade utan skickar bara det som behövs. Programmet kopierar även underkataloger.
Ibland ska man ändra i flera sidor på en gång, t ex byta bakgrundsfärg eller epostadresser. Att göra detta manuellt är mycket tidskrävande och jobbigt. Om du går in i Bearbeta filer kan du få uppgiften utförd snabbt och enkelt. Gå in i inställningar för Sök och ersätt och knappra in de saker du skall byta ut. Programmet klarar att söka efter flera saker samtidigt. Ett exempel:
Du vill byta bakgrundsfärg på dina knallgröna sidor. Gå in i inställningar och skriv in:
<BODY BGCOLOR="#00FF00">
och ersätt det med
<BODY BGCOLOR="#FF0000">
så får dina tidigare gröna sidor en skrikande röd färg istället. Du kan kombinera detta med andra ändringar.
Några specialtecken kan användas för att t ex kunna söka efter radbrytningar. Anta att du vill ersätta:
<BR>
med
<BR>
<BR><BR>
Skriv då "<BR>\n<BR>" i "Sök" och "<BR><BR>" i "Ersätt". Följande tecken kan användas:
\\ betyder \
\n betyder radbrytning
\t betyder tabulator
För att vara säker på att din hemsida ser bra ut på alla plattformar ska du byta ut vissa tecken mot en speciell kod. "Å" blir t ex "å". I filen "htmlkod.dat" finns samtliga koder och du kan själv gå in och ändra i den.
En anledning till att komprimera sina sidor är att man då får mindre filer och sidan går därmed snabbare att ladda ned. Har man gjort sin sida i en HTML-editor (som t ex PageMill, FrontPage) så får man väldigt ofta väldigt stora filer som kan komprimeras rejält, ibland upp till 20%.
Väljer du att komprimera radbrytningar kan du få dina filer lite mindre. Programmet ändrar dina radbrytningar till en mindre variant. I PC så använder man ASCII-kod 13 och 10 för en radbrytning. Det räcker med ett tecken för hemsidor. Du har två alternativ att välja mellan, ASCII-kod 13 eller 10. 13 används i Mac medan 10 används i Unix. Det spelar egentligen ingen roll vilken du använder.
Du kan lika enkelt ändra filerna så att dom får en "normal" radbrytning igen. Detta är bra när du ska ändra i filerna.
För att få bäst komprimering bör du komprimera dina rader. Väldigt ofta sätter man ut mellanslag i koden för att det ska vara lättare att läsa, speciellt HTML-editorer är glada att göra detta. Faktum är att man kan ta bort de inledande och avslutande mellanslagen i koden bortsett från kod innanför <PRE> och </PRE>. Detta alternativ gör att man drastiskt kan minska koden.
Ibland vill man ta bort samtliga radbrytningar för att göra en mindre fil, t ex i tabeller. Om du går in i editorn -> Redigera -> Komprimera -> Radera radbrytningar så kan du göra detta. Du bör dock vara mycket försiktig när du använder detta kommandot, det finns en risk för att layout ändras.
Felsöka taggar
Ett vanligt fel är att man glömmer att sätta ut taggar. Ex:
<TR><TD><CENTER><B>WebUtopia</B></CENTER></TD</TR>
Felsöka standardtaggar
WebUtopia kontrollerar att ditt dokument innehåller det standard taggar som ett
HTML-dokument ska innehålla, <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY>
</BODY> och </HTML>. Programmet kollar också att taggarna ligger i rätt ordning
och att det inte finns dubletter.
Felsöka citatstecken
Citatstecken ska endast stå i taggar, i text skall det stå """. Programmet
hjälper dig med detta. Programmet hittar också om du har glömt att skriva ett
citatstecken, ex:
<IMG SRC="webutopi.gif" WIDHT=493" HEIGHT="274">
Med Webfärgväljaren kan du på ett enkelt och smidigt sätt ändra färg och se vilken hexadecimal kod färgen har. Koden används t ex i bakgrundsfärger, tabeller och liknande.
När man gör hemsidor skall man helst hålla sig till en speciell palett för att dina sidor ska se bra ut på alla plattformar. Det finns 216 färger att välja mellan. På bilder kan man inte alltid förändra, men bakgrundsfärgen på sidan och tabeller där kan man försöka hålla sig till standarden.
Hur det hexadecimala talsystem kan vara bra att kunna lite om. Det "vanliga" decimalsystemet är uppbyggt från 0 till 9. Det hexadecimala system är uppbyggd från 0 till F. Man räknar alltså:
0 1 2 3 4 5 6 7 8 9 A B C D E F
När man skriver en färg för en sida brukar man använda sig av en kod, t ex "#00CCFF". Det första tecknet behöver du inte bry dig om, det visar bara att det är en hexadecimal kod. Siffrorna därefter är ett värde för RGB. RGB betyder helt enkelt, Red (rött), Green (grönt) och Blue (blått). "00" betyder alltså att det inte ska vara någon röd färg med. "CC" som kommer efter betyder att det skall vara en ganska stark grön färg. Det sista, "FF", betyder att det ska vara blått på full styrka.
Här nedan ser du en tabell över samtliga standardfärger som används på webben.
| ----00 | ----33 | ----66 | ----99 | ----CC | ----FF | |
| 0000-- | ||||||
| 0033-- | ||||||
| 0066-- | ||||||
| 0099-- | ||||||
| 00CC-- | ||||||
| 00FF-- | ||||||
| 3300-- | ||||||
| 3333-- | ||||||
| 3366-- | ||||||
| 3399-- | ||||||
| 33CC-- | ||||||
| 33FF-- | ||||||
| 6600-- | ||||||
| 6633-- | ||||||
| 6666-- | ||||||
| 6699-- | ||||||
| 66CC-- | ||||||
| 66FF-- | ||||||
| 9900-- | ||||||
| 9933-- | ||||||
| 9966-- | ||||||
| 9999-- | ||||||
| 99CC-- | ||||||
| 99FF-- | ||||||
| CC00-- | ||||||
| CC33-- | ||||||
| CC66-- | ||||||
| CC99-- | ||||||
| CCCC-- | ||||||
| CCFF-- | ||||||
| FF00-- | ||||||
| FF33-- | ||||||
| FF66-- | ||||||
| FF99-- | ||||||
| FFCC-- | ||||||
| FFFF-- |
Om man tycker att det är svårt med hexadecimala koder finns det andra alternativ. De flesta webläsare har stöd för namn på vissa färger. Här nedan ser du samtliga 16 färger:
| Namn: | Färgexempel: | Hex: | Namn: | Färgexempel: | Hex: |
| BLACK | 000000 | SILVER | C0C0C0 | ||
| MAROON | 800000 | RED | FF0000 | ||
| GREEN | 008000 | LIME | 00FF00 | ||
| OLIVE | 808000 | YELLOW | FFFF00 | ||
| NAVY | 000080 | BLUE | 0000FF | ||
| PURPLE | 800080 | FUCHSIA | FF00FF | ||
| TEAL | 008080 | AQUA | 00FFFF | ||
| GRAY | 808080 | WHITE | FFFFFF |
Här ser du samtliga kortkommandon som kan användas i Editorn.
| CTRL+A | Markera allt |
| CTRL+B | Fet stil |
| CTRL+C | Kopiera |
| CTRL+D | Radera taggar |
| CTRL+E | Editera aktuell tagg |
| CTRL+F | Teckensnitt |
| CTRL+G | Nytt dokument genom guide |
| CTRL+H | Konvertera till HTML-kod |
| CTRL+I | Kursiv stil |
| CTRL+J | Senaste mall |
| CTRL+K | Felkontroll - Allt |
| CTRL+L | Infoga länk |
| CTRL+M | Skapa nytt dokument efter mall |
| CTRL+N | Nytt dokument |
| CTRL+P | Stycke <P> |
| CTRL+Q | Avsluta WebUtopia |
| CTRL+R | Infoga radbrytning <BR> |
| CTRL+S | Spara |
| CTRL+T | Infoga tabell |
| CTRL+U | Understruken stil |
| CTRL+V | Klistra in |
| CTRL+X | Klipp ut |
| CTRL+Y | Infoga igen |
| CTRL+Z | Ångra |
| CTRL+F1...F6 | Överskrift 1-6 <Hn> |
| CTRL+Upp-pil | Föregående fil |
| CTRL+Ned-pil | Nästa fil |
| CTRL+Mellanslag | Infoga hårt mellanslag ( ) |
| F1 | Starta denna hjälpfil |
| F3 | Sök nästa |
| SHIFT+F3 | Sök |
| F5 | Infoga tid |
| F6 | Felkontroll - Taggar |
| F7 | Felkontroll - Standardtaggar |
| F8 | Felkontroll - Citatstecken |
| F9 | Överblick |
| F11 | Visa/dölj filmeny |
| SHIFT+F11 | Visa/dölj objektmeny |
| F12 | Granska |