Hvordan få ett .jpg bilde til å bli til en layout på en side?

[Krom-stag]

Hei sann.

 

Jeg har bestemt meg for å lage meg en side, så jeg lagde et design i PS som jeg ble passe fornøyd med..

Ja, da har jeg en .JPG fil, hva skal jeg gjøre så?

Hvordan får jeg den til å bli et design,vis dere skjønner?

Dere mener sikkert at dette er et "høl-i-huet" spørsmål, men alle starter jo ett eller annet sted..

 

 

Mvh Henrik.

Endret 15. november 2007 av HenrikTheGuitar

[Steinmann]

Da må du frem med html og css.

Du bruker html til å markere teksten og innholdet du skal ha.

Deretter bruker du css til å få dette til å se ut som det du har designet.

 

Du vil mest sannsynlig ha behov for å ta ut noe som bilder, og da legge som bakgrundsbilde på diverse elementer.

 

Hvis vi får se hva du har designet kan vi jo se om det er noe som er verdt å legge tid i.

Og i såfall hvordan du bør gå frem.

 

Er nok ikke en 3 punkts måte å gjøre dette på.

[Krom-stag]

Her er det.

Men før dere sier noe stygt om det, må dere huske at: Dette er mitt aller første design!

 

 

EDIT: Vet ikke om man kan kalle det et design en gang, men samma det.

Endret 14. november 2007 av HenrikTheGuitar

[siggii]

Det aller enkleste hadde er å sette opp med ren HTML og rammer i et program som foreksempel Adobe Dreamweaver.

 

Dette blir ikke spesielt bra programmert, men det er vel mer enn godt nok for en nybegynner.

 

Før du starter med noe annet, skjønn prinsippet med HTML:)

 

Edit: Glemte å si hvordan du gjør det da:P

 

Du kan lage tabellen, deretter setter du bildet som bakgrunnsbilde. Dette er meget enkelt. Deretter er det bare å justere rammeskillene slik du vil at teksten skal være.

 

Eller så er det mange som slicer i PhotoShop. Det er ikke så vanskelig, men det får noen andre ta. Jeg har ikke testa:P

Endret 14. november 2007 av siggii

[Steinmann]

Jeg ville kanskje ikke kalt det et design.

 

Eneste du trenger å bruke bakgrundsbilde på her er disse grå boksene dine.

 

Resten bør du få til med css. Personlig ville jeg ikke tatt meg bryet, og heller satt meg ned og lært meg enten design eller html/css skikkelig

[Haraldson]

Emnetittelen er fortsatt for lite beskrivende. Du trenger ikke å skrive at du har et spørsmål, det skjønner vi hvis du bruker et lite spørsmålstegn ('?') på slutten, og heller bruker plassen du har til rådighet til å beskrive akkurat hva det er du lurer på.

[Krom-stag]

Emnetittelen er fortsatt for lite beskrivende. Du trenger ikke å skrive at du har et spørsmål, det skjønner vi hvis du bruker et lite spørsmålstegn ('?') på slutten, og heller bruker plassen du har til rådighet til å beskrive akkurat hva det er du lurer på.

Done..

[siggii]

Jeg ville kanskje ikke kalt det et design.

 

Eneste du trenger å bruke bakgrundsbilde på her er disse grå boksene dine.

 

Resten bør du få til med css. Personlig ville jeg ikke tatt meg bryet, og heller satt meg ned og lært meg enten design eller html/css skikkelig

 

 

Det er vel helt uvesentlig hva du vil kalle et design eller ikke. Dessuten er det et design. Hva er det hvis det ikke er et desgin? Bra er det ikke, men spiller deg egentlig noen rolle for deg?

 

Hvis man skal lære seg noe skikkelig må man vel kanskje begynne et sted? Du begynte vel kanskje rett på java og xHTML?

 

Hvis du vil prøve å sette opp med CSS kan jeg annbefale deg denne tutorialen. Jeg brukte den når jeg begynte med CSS, og den hjalp meg veldig godt.

[FrodeNilsen]

Her er det.

Men før dere sier noe stygt om det, må dere huske at: Dette er mitt aller første design!

 

 

EDIT: Vet ikke om man kan kalle det et design en gang, men samma det.

 

Det er ikke første gang designere kommer fra PhotoShop. I likhet med andre i den kategorien virker du opptatt av det visuelle, og å formatere det visuelle akkurat slik du vil ha det.

 

Html og xhtml er ikke ett formaterings språk, css benyttes til formatering. Hele tanken bak markup språk som dette, er at den samme sgml eller xml filen kan vises på ett utall forskjellige måter, og i bunnen ligger tanken om at visuelt design i stor grad er noe du ikke har full kontroll over.

 

Skillet mellom innhold og struktur på den ene siden, og formatering på den andre siden, gjør at det er enkelte ting som ikke er noen hensikt å forsøke seg på.

 

Du har forsøkt med avkutting av hjørner og noen linjer her og der.

 

De linjene blir litt plundrete å designe i html. Men ikke umulig. Jeg ville nok heller forsøke noe mer basic i første omgang. Jeg vil anbefale deg å opprette en div boks med fast størrelse med ett bakgrunnsbilde, hvis du absolutt skal det slik.

 

Den linja på toppen tror jeg at jeg hadde droppet, dvs. den over home-downloads. Jeg forstod ikke den helt.

 

De tre boksene kan oppnås med ett bakgrunnsbilde i en div boks. Igjen er du avhengi av fast størrelse, og er prisgitt at teksten ikke tar større plass en boksen. Du vil også kunne få problemer med flyten av tekst i hjørnene.

 

Personlig vil jeg bli mer imponert om du lager en enkel side, men gjør det grunnleggende rett. Det er nok lurere å begynne med en navigeringsboks på toppen, uten strekene, og rene firkantede bokser uten de strekene rundt.

 

Du bør velge riktig font, linjeavstand, fontfarge, og linkfarge. Det vil si tekstformatering. Du finner ett godt dokument om dette her:

http://files.jeffcroft.com/presentations/f..._Typography.pdf

 

Du trenger også en måte å markere hoover over linker og en måte å markere hvor leseren er på siden. Det vil si navigering. Kanskje ikke verdens beste eksempel:

http://htmldog.com/articles/rollovers/

 

Du kan med fordel fylle opp med tulle innhold, som herfra:

http://www.lipsum.com/

 

Ellers har du jo definisjonsdokumentet til CSS2.1. Du finner bakgrunnsbilde her:

http://www.w3.org/TR/CSS21/colors.html#pro...ackground-image

 

Bakgrunnsfarge:

http://www.w3.org/TR/CSS21/colors.html#pro...ackground-color

 

Du kan lese om definisjon av høyde og bredde her:

http://www.w3.org/TR/CSS21/colors.html#pro...ackground-color

htmldog har eksempler av slik bruk her:

http://htmldog.com/guides/cssadvanced/layout/

 

Denne siste linken serverer nesten alt du trenger på ett fat.

 

Du finner boks rammer her:

http://www.w3.org/TR/CSS21/box.html#border-properties

 

CSS indeksen finner du her

http://www.w3.org/TR/CSS21/propidx.html

 

Sist og ikke minst, burde du installere Opera, eller FireFox med mulig for enkel validering av kildekode. I opera er det bare å åpne siden og høyreklikke. Velg så kontroller kildekode, og du får vite om du har kode leifer i koden din.

 

Du vil bruke lenger tid med Dreamweaver enn hvis du tar utgangpunkt i layouten til htmldog.