Ferdig å lage side i PhotoShop, men hva nå?

[Pug]

Jeg får ikke til å legge til innhold på siden min. Jeg har lest en god del tutorials som tar for seg hvordan gå fra PhotoShop til å legge siden ut på nett, men ingen av de funker med ei side som har navigasjon/poll til venstre...

 

Har prøvd meg litt fram i DreamWeaver MX2004, men får heller ikke til å legge til innhold med DM, fordi alle tablene blir strukket ned sammen med innholdet...

 

Har lest litt om css på sticky threaden, men skjønte neste ingenting...

 

Jeg får rett og slett ikke til å legge til innhold på siden min uten at resten av bildene blir strukket ut...

 

Noen som vet hvordan jeg skal gå fram for å få lagt til innhold?

[funkweb]

Du sier at du ikke klarer og legge til innhold, vel..

Du har satt en bilde der.. sperra jo da alt.

 

<img src="images/content.gif" width="501" height="419" alt="">

 

Du bruker unødvendig mye *.gif bilder her som har SAMME farge.

Definer bakgrunn farge isteden.

Endret 26. februar 2004 av funkweb

[Arve Systad]

Må vel strengt tatt legge bilder som bakgrunn i cellene, og legge innhold OPPÅ lissom..

 

Dessuten anbefaler eg deg å sette deg inn i HTML/CSS først. Kommer alltid godt med å vite ka du faktisk gjør av og til

[Pug]

Du sier at du ikke klarer og legge til innhold, vel..

Du har satt en bilde der.. sperra jo da alt.

 

<img src="images/content.gif" width="501" height="419" alt="">

 

Du bruker unødvendig mye *.gif bilder her som har SAMME farge.

Definer bakgrunn farge isteden.

Joda, kan bruke bakgrunnsfarge, men når det blir for mye innhold der kommer tablene til å bli strukket nedover og alt blir ødelagt...

[funkweb]

Hehe, ser jo hvorfor.

Endret 26. februar 2004 av funkweb

[Pug]

Hehe, ser jo hvorfor.

Ser hva hvorfor?

[funkweb]

Fordi du bruker bilder som bakgrunn.

Det skaper problemer..

Altså det er <img> tag hele veien her med bilder og 1 tabell.

Og det er liksom hele greia.

Endret 26. februar 2004 av funkweb

[Pug]

Fordi du bruker bilder som bakgrunn.

Det skaper problemer..

Altså det er <img> tag hele veien her med bilder og 1 tabell.

Og det er liksom hele greia.

Ja, brukte PhotoShop til å slice, også save for web...

 

Hvordan ville du slicet, lagret og kodet etter å ha ordna side i PhotoShop da?

Endret 26. februar 2004 av Pug

[FuLu]

En ting jeg aldri kommer til å gjøre, er å basere webdesignet mitt på noe et tegneprogram genererer for meg via slice og save as webformat.

 

Tok og "delte" opp siden din i seksjoner jeg ville ha klippet ut og laget bilder av. Nå tok jeg standpunkt i at siden er fixed i bredden på alle elementer. Høyden kan fint bli variabel.

 

Jeg pleier ikke bruke <img> til å vise layoutbilder på en side. CSS og DIV er like greit. Background, width og height egenskapene i CSS kan gjøre mye

 

Bilde forklaring: LINK

 

Forklaring av nummerering i bildet:

• 1. Header
  
• 2. meny knappene, nå var jeg litt sløv med å tegne den røde boksen like store. Meningen var at den røde boksen skulle være like bred som "kolonnen" knappen er i.
  
• 3. Dette er menyen/boksen sin bakgrunn som skal repeteres nedover. Denne er 1px høy
  
• 4. Slutten på menyen/boksen
  
• 5. Dette er bakgrunnen til selve siden, den er også 1px høy og skal repeteres nedover etter header.
  
• 6. Tittel til boksen
  
• 7. Bunnen av siden
  

Struktur kan f.eks være slik:

<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="poll"></div>
<div id="content"></div>
<div id="footer_bottom"></div>
</div>

 

#container har f.eks bakgrunnen fylt med bilde nr 5 som repeteres nedover

#header sier seg selv

#menu trenger egentlig _ikke_ bilde nr 3 i bakgrunnen (repetert nedover), siden du skal ha knapper som mulig fyller den. Men du trenger en div e.l inni den menu div'en til slutt kanskje, som viser bunnen på menyen.

#poll kan fint ha bilde nr 3 repetert nedover som bakgrunn, siden du sikkert skal ha tekst og submit knapper her. Her trenger du en div som viser poll tittel, og en div som viser bunnen på boksen, slik som menyen..

#content trenger ikke noe bakgrunn annet enn transparent, men den må plasseres kanskje med position: absolute (siden jeg strukurerte det litt sånn dumt...)

#footer_bottom (bottom eller footer eller hva du vil kalle det) har du helt til slutt, som er da bilde nr 7

 

Orket ikke skrive komplett kode eller løsning, sånt er litt tidkrevende. Ville bare gi deg en push i riktig retning

[Pug]

Wow, takker!!

 

Skal prøve å kode litt i css i morgen

[Pug]

Dette er hva jeg har fått til hittil:

 

 

____________________________________________________________________

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Melwasúl's Web</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

 

A:link

{ text-decoration: value; none; color:#99FFCC; }

A:visited

{ text-decoration: value; none; color:#CCFFCC; }

A:active

{ text-decoration: value; none; color:#99FFCC; }

A:hover

{ text-decoration: value; none; color:#CCFFFF; }

 

body

{ background-color: #FFFFFF;

 

font-family: Tahoma;

color: #000000;

font-size: small;

}

 

#container

{ background:url('images/background_repeat.gif');background-repeat:repeat-y;

}

 

#header

{

}

 

#menu

{

}

 

#poll

{

}

 

#content

{ position:absolute;

left: 220px;

top: 130px;

width: 500px;

}

 

#footer

{

}

 

</style>

 

</head>

 

<body>

 

<div id="header"></div>

<div id="container"></div>

<div id="menu"></div>

<div id="poll"></div>

<div id="content">

 

Test...

 

</div>

<div id="footer"></div>

 

</body>

</html>

___________________________________________________________________

 

 

Som du sikkert ser, er det ikke noe særlig mye ennå...

 

Hvordan får jeg bakgrunnen til å repetere seg selv uten at jeg skriver noe der?

 

Hva er koden for å vise bilde med css?

 

Er det noen store feil hittil?

Hva er viktig å få med i de forskjellige css div'ene?

 

Takker for all hjelp!

[PT]

Noe som kan være greit er å legge CSS'en i et eksternt stilark slik at koden blir mer ryddig:

<link rel="stylesheet" href="stilsett.css" type="text/css">

[PoleCat]

Noe som kan være greit er å legge CSS'en i et eksternt stilark slik at koden blir mer ryddig:

<link rel="stylesheet" href="stilsett.css" type="text/css">

Ikke for å ødelegge en tråd, men blir det akkurat det samme, bare at det ikke er inkuldert i selve dokumentet?

[PT]

Noe som kan være greit er å legge CSS'en i et eksternt stilark slik at koden blir mer ryddig:

<link rel="stylesheet" href="stilsett.css" type="text/css">

Ikke for å ødelegge en tråd, men blir det akkurat det samme, bare at det ikke er inkuldert i selve dokumentet?

Stemmer det

Dokumentet blir bare ryddigere for oss som liker å kode for hånd