Gå til innhold

ifra photoshop til html

Januar333

Av Januar333
i Programmering og webutvikling

Anbefalte innlegg

Januar333

Januar333

Skrevet
Skrevet (endret)

hei,

har akkurat mekka min første side i photoshop, brukte 20 min ell no :dontgetit: ..

men finner ikke ut hvordan jeg kan få den til å bli en webside..

tabeller osv? er det en fin guid om dette en plass?

har macromedia pakka men skjønner ikke så mye av det :hmm:

 

legger ved et bilde av siden i firework (men laget i Adobe Photoshop CS)

Endret av freddy85
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
qualbeen

qualbeen

Skrevet
Skrevet (endret)
hei,

har akkurat mekka min første side i photoshop, brukte 20 min ell no :dontgetit: ..

men finner ikke ut hvordan jeg kan få den til å bli en webside..

tabeller osv? er det en fin guid om dette en plass?

har macromedia pakka men skjønner ikke så mye av det :hmm:

 

legger ved et bilde av siden i firework (men laget i Adobe Photoshop CS)

5295677[/snapback]

Kan ikke si jeg ser noe bilde da... :p

Men du lurer på hvordan du kan gjøre om et photoshop-bilde til en webside? Da vil jeg starte med å si at hjemmesider ikke bør "snekres" i photoshop..

 

Er du ny i gamet så vil jeg anbefale Macromedia Dreamweaver, FrontPage eller et tilsvarende program. (Ja, jeg vet jeg kommer til å få mye pepper nå - i en perfekt verden blir alt mekket sammen fra bunnen av, slik at man får ren og pen kode)

 

Tabeller er forresten fy-fy! Med mindre du skal vise tabulære data, da.. Og om du har lyst til å lære deg HTML + CSS så kan http://www.w3schools.com/ eller http://htmldog.com/ være fine steder å starte på!

 

Edit: så nettopp at du ikke forstod Macromedia-pakken, og det er kanskje ikke så rart med tanke på at den inneholder 5-6 ulike programer med 1000 ulike funksjoner og 'stæsj'. Men om du bruker noe tid til å forstå programmet, kan det være verdt det! Bare prøv å lag en helt vanlig tom html-side. Med 'design view' så lager programmet kode for deg! (Riktig nok langt fra perfekt kode, men bedre en i f.eks word...)

Endret av qualbeen
Lenke til kommentar
Garreth

Garreth

Skrevet
Skrevet (endret)

Ja begynn enkelt, og prøv å skriv kodene selv. Det som er så bra når du ikke har lagd hjemmesider før, er at du ikke er blitt avhengig av et dårlig program for å lage sidene.

 

Et enkelt oppsett på en side (uten grafikk foreløpig) vil ca være slik som dette:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sidenavn</title>
</head>

<body>
<h1>Sidenavn eller lignende</h1>
<div id="menycontainer>
<ul>
 <li><a href="#">Knapp1</a></li>
 <li><a href="#">Knapp2</a></li>
 <li><a href="#">Knapp3</a></li>
</ul>
</div>

<div id="tekst">

<h2>Artikkel overskrift</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse facilisis rhoncus dui. Suspendisse dapibus sapien non mi. Nunc et tellus. Fusce quis libero eget mauris mollis condimentum. Vestibulum odio orci, porttitor ac, fringilla sit amet, suscipit in, nulla. Aenean molestie, eros eu imperdiet laoreet, mi nisi volutpat quam, et bibendum lorem sapien ac risus. Aenean rutrum pellentesque urna. Aenean iaculis orci at lorem. Nulla facilisi. Integer id nisl.</p>

<p>Phasellus molestie mattis lorem. Fusce dictum, massa quis ornare fringilla, turpis neque tempor dui, eget porta massa odio at nisl. Maecenas sodales eleifend ante. Quisque pretium aliquet enim. Duis sit amet velit. Praesent consequat. Donec nibh magna, semper at, ullamcorper quis, condimentum a, risus. Aliquam erat volutpat. Ut lobortis hendrerit purus. Praesent felis lacus, tempus in, mollis eget, nonummy sed, metus. </p>

</div>

<div id="bunn">
<p>Bunn tekst</p>
</div>

</body>
</html>

 

Så leser du litt om css og hvordan du kan få denne kjedelige siden til å se ut som designet du har laget i photoshop. Det tar ikke så veldig mye lesing før du forstår nok css til du kan lage en hel side med det.

Endret av Garreth
Lenke til kommentar
Januar333

Januar333

Skrevet
  • Forfatter
Skrevet

hadde håpet å slippi å lære meg html koding..

prøver å legge ved bilde en gang til.

 

jeg ser at man til død å liv, trenger ikke å kunne koder i Macromedia Dreamweaver 8.

hvorfor skal man ikke bruke tabeller, trudde at det man gjorde å deretter klippe bilde slik at det passet i tabellen man har laget? eller er jeg helt på vill spor

Lenke til kommentar
lilminime

lilminime

Skrevet
Skrevet

Det er en '"tool '" i Photoshop som heter "Slice tool' den kan du bruke til og dele opp bilde så kan du dele opp bilde i biter som "her skal jeg ha en link dette bilde skal være en link osvosv,,, så når du har delt opp bildet i biter kan du trykke "save as web"..

 

Lagre det oppdelte bilde i en mappe som er lett tilgjengelig.

Har du da Frontpage kan du trykke import webpage eller noe slikt..

 

Da får du opp bilde du har laget men som er oppdelt, og da kan du velge de bitene du har delt om til feks. en link...

 

Vil da også påpeke at dette er en fæl måte og lage en side på for scriptet blir helt phucked.. Ikke like mye som i Word, men stygg. Derfor kan det bli litt forskjell på visningen av de forskjellige browserne, siden blir tregere og det blir vanskelig å debugge om det blir noe feil.

Lenke til kommentar
Fisker

Fisker

Skrevet
Skrevet

I sted for å starte en ny tråd, spør jeg her.

Jeg er en nybegynner i Html og det meste av det derre der. Skal få laget en side og vil ha den slik som jeg har mekka i PS i bildet. Banneret og footeren kommer sikkert til å bli byttet ut.

Anyway: Meningen er at det skal se slik ut, men må jeg bruke frames da?

post-90299-1134673661_thumb.jpg

Lenke til kommentar
qualbeen

qualbeen

Skrevet
Skrevet (endret)

nope, du trenger ikke frames!

 

antar du ønsker en standard banner & footer som ser helt lik ut på alle sidene dine. Det finnes sikkert flere løsninger for å få til dette, og de dårligste vil jeg påstå er frames eller iframes.

 

Enkel metode om du har få sider: kopier kildekoden for header og footer inn i alle filene. Negativt: et helvete å endre på banner/footer senere, spesielt om du har fått endel sider...

 

Anbefalt metode: Bruk PHP eller et annet server-språk. Du trenger egentlig bare å kunne en setning: include. Bare skriv <php include("filnavn"); ?> der du vil ha inn menyen, og der du vil ha inn footeren. Husk å lagre som php!

 

Alternativ metode:

(Omvendt av anbefalt metode, nå inkluderes de ulike tekstfilene: Ha en fil (index.php) som inneholder banner & footer, og bruk 

<?php
if (!isset[$_GET[artId]) {
 echo "404 Error: Siden finnes ikke";
}
else{
 $artikkel = $_GET[artId];
 include ("filsti/$artikkel.php");
}
?>

OBS: Adressen til de ulike artikkel-filene blir: http://dittdomene.com/?artId=filnavn (altså ikke filnavn.php)

 

Tilslutt; jeg er ikke den beste når det gjelder php, så om du lurer på noe spør i det php-forumet.)

Endret av qualbeen
Lenke til kommentar
Fisker

Fisker

Skrevet
Skrevet (endret)

Takk for svar, jeg har ikke peiling på php så da blir det den enkle metoden din.

Men hvordan får jeg skriften flyttet dit som jeg har plasert den i photshop-bildet?

altså: Flytte det jeg vil skrive til under banneret i html.

som dere skjønner er jeg en nybegynner.

Endret av SoloX
Lenke til kommentar
qualbeen

qualbeen

Skrevet
Skrevet

Når det kommer til posisjonering av tekst så er CSS en fin ting. Men om du kun vil ha teksten etter bildet så trenger du vel ikke noe spesifikk kode for det..

 

Noen css-eksempler der du her: http://www.w3schools.com/css/css_examples.asp

Og for å bruke css i ditt dokument har du to valg:

1: I <head>-taggen linker du til et eget css-dokument som inneholder all css-kode:

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

(filnavnet er her style.css)

2: i <head>-taggen tastes den style-koden man ønsker å bruke slik 

<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>

Gode hjelpemidler til å forstå helt basic css:

http://www.w3schools.com/css/default.asp

http://htmldog.com/guides/cssbeginner/

og maaaange andre sider... tips: google ;)

Lenke til kommentar
funkweb

funkweb

Skrevet
Skrevet

Om man snekrer noe i Photoshop, er det en par ting man må huske på.

Du skal lagre informasjonen ved å "Save selection", for så senere load selection området når du trenger det.

 

På denne måten sparer man mye tid isteden å "marquee" hele tiden bare for å markere et sted du vil klippe ut.

 

Seff. må du "marquee" første gangen for så lagre det :p

 

Da har du plutserlig en samling av diverse ting som banner, knapper og ting du eventuelt vil putte inn i Dreamweaver.!!

 

Lykke til.!!

Lenke til kommentar
qualbeen

qualbeen

Skrevet
Skrevet (endret)

Med mindre du bruker frames (som man ikke bør!), blir ikke siden delt opp i slike 'celler' som du ønsker. Dvs, man kan fint dele opp siden i ulike deler, men å kun påvirke én del av siden, mens resten står uberørt er vanskelig. Legg f.eks. merke til hva som skjer på 99% av sidene du surfer på når du trykker på en link: hele siden oppdateres (lastes på nytt), selv om meny/header er lik. Dette legger du best merke til med godt gammeldags modem :p

 

Nuja, nok svada. Løsningen:

Da jeg jeg gikk bort fra frames (jada, har vært ung og dum en gang :blush:) så lagde jeg først én side som inneholdt det som skal være likt på hver side. Denne siden kopierte jeg opp i X antall eksemplarer. Derretter la jeg til ulik tekst på ønsket plass på hver side. Slik fikk jeg X antall sier med eksakt lik meny/header/footer, men med ulikt innhold.

 

Ulempen er at om du ønsker å endre layout må alt gjøres om igjen. Derfor anbefaler jeg php. Hvis du ikke ønsker php så se bort ifra denne nederste biten av innlegget...

1: lag en html-fil som inneholder layuot (menyer, logo og slikt).

2: de ulike dokumentene (tekstene) dine lagres med filformat '.php', og på ønsket plassering inkluderer du designet fra (1). Det som da skjer er at nettleseren mottar et produkt av disse to sidene. Derfor skal kun én av filene inneholde taggene <html> <head> <body> (ikke avslutt de før etter at alle andre filer er inkludert).

Lite eksempel:

<!-- Denne fila inneholder tekstdokumentet, og heter testside.php -->
<html>
<head>
 <title>Test</title>
</head>
<body>

<!-- Her inkluderer vi logo og annet design ved hjelp av php-kode -->
<?php include("logo.php"); ?>

Nå som logoen er implementert kan jeg skrive ned annet innhold... 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc rutrum dictum enim. Nam urna. Phasellus porttitor libero non elit. Phasellus et justo ut massa feugiat egestas. Pellentesque suscipit odio ut neque. Etiam vestibulum, urna id pretium mattis, leo massa vehicula tellus, nec ultricies leo arcu in felis. Etiam ipsum. Sed vehicula lectus vitae nibh. Sed vitae nisi. Morbi commodo, ipsum nec semper venenatis, neque massa consequat magna, ut ullamcorper nunc lectus pulvinar lorem. Nam libero. Donec eget metus. Curabitur congue sapien ac nunc mollis pharetra. Suspendisse quam. Vivamus et arcu. Nam dapibus, nibh sed pulvinar varius, eros tortor ultricies lectus, vel euismod velit pede sed tortor. Sed sit amet augue non magna porta dignissim. In vitae tortor quis ligula dictum elementum. 

Morbi commodo purus ut nulla tincidunt nonummy. Nullam arcu. Sed id dui elementum nibh vestibulum congue. Sed ut mauris. Aenean pede. Mauris fringilla luctus orci. Aliquam a massa ut mauris lobortis posuere. Nullam eu magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in erat. Proin sit amet eros. Quisque accumsan tempus orci. Proin mi neque, interdum in, tristique quis, pellentesque in, sapien.

Helt på slutten kommer en liten 'footer' som er lik på alle sidene. Derfor inkluderes den også..
<?php include("footer.php"); ?>

</body>
</html>

Så må vi lage logo/meny-siden:

<!-- dette er logo. Den inneholder hverken <html> eller <body>-tagger, siden dette allerede er med i dokumentet over. -->
<img src="images/logo.gif" alt="Min logo" /> Velkommen til min side!
<ul>
 <li>Menyvalg 1</li>
 <li>Menyvalg 2</li>
 <li>Menyvalg 3 osv</li>
</ul>

Footer-fila gjøres selvfølgelig helt likt!

 

Tada, så enkelt kan det gjøres!

Tilslutt: noen som vet hvordan jeg kan spesifisere hva slags code som kommer i [code*]-taggen? Og hvordan bruker man spoiler-tekst?

Endret av qualbeen
Lenke til kommentar
Januar333

Januar333

Skrevet
  • Forfatter
Skrevet (endret)

har sett en slik template som har en slik løsning jeg er på jakt etter, ser nesten lik siden min bare det er et grønn natur bilde i bakgrunn, men finner den ikke igjen.

det som er kjekt med en slik løsning er at man får rull gardin, samt at det er veldig enkelt å redigere de html sidene man linker, trenger bare bakgrunn. samt at det ser pent ut, syntes jeg.

Endret av freddy85
Lenke til kommentar
Dustwave

Dustwave

Skrevet
Skrevet

Kan ikke si jeg ser noe bilde da... :p

Men du lurer på hvordan du kan gjøre om et photoshop-bilde til en webside? Da vil jeg starte med å si at hjemmesider ikke bør "snekres" i photoshop..

 

 

Kanksje for nybegynnere, men det er alltid greit å starte i photoshop og noe man må gjøre hvis man vil ha litt "ok" grafikk på siden

 

Det er også veldig greit når man jobber for klienter å bruke programmer som Photoshop, det gir dem en ide om hvordan siden vil se ut og de kan gi feedback på det som du kan ta til etteretning på meget kort tid ved å redigere dokumentet.. slipper å kode mye unødvendig og man kan starte kodingen når man vet hvordan siden kan se ut.. noe som sparer veldig mye tid også

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...