|
Jonas Byströms WEB-designsida [Uppdaterad 1997-03-15] |
Av Jonas Byström
All HTML-kodning (eller om man skall kalla det HTML-formatering) är gjord manuellt i W95 Anteckningar. Jag började så och har sedan fortsatt då den mesta tiden hittils har gått åt att skapa grafiken mer än att skapa meningsfull text. Antagligen laddar jag hem någon bra HTML-editor då det är dags att börja skriva. Nackdelen med manuell kodning är just att man sitter och skriver formateringsinformation istället för att skriva den text man egentligen vill skriva. Toppen för mig vore om jag kunde spara i HTML-format från MS-Word, då skulle mycket vara vunnet.
All grafik är skapad i det mycket trevliga programmet Paint Shop Pro 4.12 från JASC. PSP är ett shareware och får användas för demonstration i en månad. Programmet är främst avsett för hantering av bilder och fotografier och lär ha fått ett stort uppsving det senaste året p.g.a. dess goda anpassning mot internets WEB-design. Man kan läsa in bilder från en stor mängd olika format, redigera och sedan skriva till valfritt filformat. Dessutom kan man skapa egna bilder men mer avancerade ritfunktioner saknas. Dock kan man skapa rätt mycket textgrafik som är vanligt på WEB-sidor. Det finns en mycket användbar "browser" inbyggd som gör att man enkelt (och snabbt) håller koll på alla bilder. Fungerar som ett snyggt fotoalbum.
Upp<HEAD> <META NAME="..." CONTENT="..."> <META ...> </HEAD><META NAME="Description" CONTENT="Jonas Byströms WEB-design"><META NAME="Author" CONTENT="Jonas Byström"><META NAME="Keywords" CONTENT="paint shop pro web-design HTML">
Bilden består av ett fält med blågrön färg till vänster och vit (eg. transparent) färg till höger med en suddig övergång. Den är gjord i PSP med en maximalt bred bild och en liten blågrön rektangel i vänsterkanten. Gränsen mellan de olika områdena är diffuserad med Image/NormalFilters/Blur. Det är viktigt att bilden är maximalt bred för att inte den blågröna listen skall återupprepa sig på skärmen i din WEB-läsare. Bilden är sparad med transparent färg för det högra fältet.
Bakgrundsformatering anges i BODY-taggen enligt:
<BODY BGCOLOR="#FFFFFF" BACKGROUND="hembg2.gif">BGCOLOR="#FFFFFF" sätter bakgrundsfärgen till vitt och BACKGROUND="hembg2.gif" lägger ovanstående bild över detta.
Bakgrundsbilden upprepar sig både till höger och nedåt automatiskt och behöver därför egentligen bara vara 1 linje hög. (Högerexpansionen kan du se om du har 1024x768 eller mer i upplösning och maximerar fönstret)
Ett annat sätt att är att dela in hela sidan i två kolumner m.h.a. en tabell, ange bakgrundsfärg till #008080 ("Teal") i vänster kolumn och #FFFFFF ("White") i höger kolumn. Detta fungerar dock inte i Netscape 2 och man får heller inte en mjuk övergång mellan färgerna.
Nu fungerar inte detta alltid. Om man gör fönstret väldigt smalt så ändras kolumnbredden ändå. Tricket för att förhindra att vänsterkolumnen görs smalare än 110 punkter är att lägga in en bild med tillräcklig bredd vilken då förhindrar eventuell avsmalning. Jag har lagt in en bild, "spacer.gif", som är en punkt hög, 105 punkter bred och genomskinlig. (Egentligen kan bilden vara 1x1 punkt, den anges ju till önskad bredd med WIDTH-argumentet.) Anledningen till att jag satt linjebredden till 105 och inte 110 är att Netscape 2 och IE 3 automatiskt lägger en vänstermarginal på cirka 5 punkter (?). I IE 3 kan man ändra detta men tyvärr inte i Netscape 2. Därför har bredden 105 valts som en hygglig anpassning.
Exempel:
<TABLE>
<TR>
</TABLE>
<TD WIDTH=110>
</TR>
<IMG WIDTH="105" HEIGHT="1" ALIGN=LEFT SRC="img/spacer.gif">
</TD>
Kolumntext ...
<TD WIDTH=480>
Kolumntext ...
</TD>
För att placera valknapparna i vänster kolumn i höjd med knapparna i höger kolumn så använder
jag två rader i tabellen. Text och/eller bilder i de båda kolumnerna i rad 2 börjar då på samma rad.
Dessutom har jag skapat en tabell i huvudtabellens högra kolumn längst ner. På så sätt kan jag
placera Email-länken i mitten och uppdateringsinformationen till höger.
Layout:
|
|
Logga | |||
|
Vänster list med valknappar |
Valknappar Löptext Avgränsare Besöksräknare
|
Alternativ:
Skriv text utan färg (vit färg mot vit bakgrund).
Väl CUTOUT enligt ovan.
Välj COLORS/COLORIZE. Hue 150, Saturation 200.
Välj IMAGE/SPECIAL EFFECTS/EMBOSS.
Välj ADD DROP SHADOW enligt ovan.
Och då blir det så här istället:
Pröva själv med större värden på Vertical och Horizontal CUTOUT, andra värden på Hue och Saturation, prova IMAGE/EDGE FILTERS/TRACE CONTOUR etc. Kreativiteten känner inga gränser. Nästa steg kan bli att använda en mask och färglägga texten med ett mönster, mycket effektfullt.
Skapa gärna en transparent bakgrund genom att aktivera detta vid sparning (FILE/SAVE AS/OPTIONS.../SET THE TRANSPARENCY VALUE TO BACKGROUND VALUE). Observera att aktiverad bakgrundsfärg måste överensstämma med bildens faktiska bakgrundsfärg. (Att göra transparenta bakgrunder med skuggade bilder har sina begränsningar. Skuggan är i ovanstående fall genererad (och anpassad) mot vit bakgrund. Om den senare presenteras mot mörk bakgrund blir det inte helt naturligt. Även om du gör transparenta bilder bör du generera skuggan mot den bakgrundsfärg du vet att du kommer att använda.)
Avgränsningslinje och pilar (upp, vänster) är gjorda på samma sätt.
Numera använder jag normalt alltid HomeSite. Den är inte "topp" men förenklar arbetet väsentligt och är trots allt bättre än Anteckningar.
En timme senare hade jag denna bild ...
Färger och färgpaletter är ett svårt ämne som jag inte har riktigt koll på. MIC har insett problemet och möjliggör en mycket enkel konvertering (via guider) till 8-bitars färgpaletter som är vanliga på WEB:en. (Om du studerar min logga så är färgen antagligen grynig - det är den inte i PSP på min dator, men väl på WEB:en.)
Microsoft GIF Animator
Microsoft GIF Animator låter dig skapa
GIF-animeringar (rörliga bilder på Internet) med bilder skapade i t.ex. MIC. Dock har programmet en del
buggar, bl.a. fungerar filsparning med transparent bakgrund dåligt (eller så är det jag som gör fel).
| [ Hemsida | Skapa hemsida | HTML-Guide | WEB-design | Knappdesign | FTP-tips | Idésida | Länkar ] | ||
| Till hemsidan |
Skicka gärna kommentarer till © Jonas Byström |
Utmärkelser |
