Gå til innhold

Fra design til HTML

Donnie Darko

Anbefalte innlegg

Donnie Darko

Donnie Darko

Skrevet
Skrevet

Hei.

Jeg har nå holdt på med en hjemmeside/portefølje. Jeg har designet siden i photoshop, for så å putte det inn i Dreamweaver. Som dere sikkert kan se (URL nederst) er hele siden i bilder, også teksten.

Hvilke metode vil være den enkleste for å omgjøre "tekstbilde" til ren tekst?

 

Å fjerne teksten i PS, og så fylle med tekst inn i DW? Jeg prøvde det, men var utrolig vrient å få teksten på riktig plass i DW, og det tar fort lang tid om jeg skal begynne å slice alle sidene osv.

 

URL: http://www.mathiaslf.hostoi.com

 

Takker for all hjelp jeg kan få.

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
NgZ

NgZ

Skrevet
Skrevet
Ja, er fullt klar over at det er ideelt mtp websider, men når jeg ikke synes det er gøy, så ser jeg rett og slett ikke poenget.
Da burde du fjerne websiden fra portifolioen. Blir den tatt opp, spør de hvprdan den er laget. Svarer du "Øh, laget den i PS", og faktisk ikke har bedrevet webdesign i det hele tatt, er det en 2'er. Hvis du er heldig. Tabeller er forresten nesten like fy-fy, jeg ser du bruker det nå. Med resultatet at en "boks" er på viidvanke, og et bilde manlger både der og et annet sted på siden, så det blir hull.

 

Webdesign ER css.

Lenke til kommentar
Donnie Darko

Donnie Darko

Skrevet
  • Forfatter
Skrevet
Ja, er fullt klar over at det er ideelt mtp websider, men når jeg ikke synes det er gøy, så ser jeg rett og slett ikke poenget.
Da burde du fjerne websiden fra portifolioen. Blir den tatt opp, spør de hvprdan den er laget. Svarer du "Øh, laget den i PS", og faktisk ikke har bedrevet webdesign i det hele tatt, er det en 2'er. Hvis du er heldig. Tabeller er forresten nesten like fy-fy, jeg ser du bruker det nå. Med resultatet at en "boks" er på viidvanke, og et bilde manlger både der og et annet sted på siden, så det blir hull.

 

Webdesign ER css.

 

Så det du sier er at jeg ikke kan ha det gøy, og lage en webside slik jeg vil ha det? Det blir for dumt for meg.

 

Du sier jeg har brukt tabeller? Hvor ser du det?

Lenke til kommentar
k-orm

k-orm

Skrevet
Skrevet
Du sier jeg har brukt tabeller? Hvor ser du det?
I kildekoden:

<table id="Table_01" width="961" height="1418" border="0" cellpadding="0" cellspacing="0">
<tr>
	<td colspan="42">
		<img src="images/Forside_01.gif" width="960" height="17" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
Osv...

HTML-tagen <Table> = tabell

Lenke til kommentar
NgZ

NgZ

Skrevet
Skrevet

Når du sa portifolie og jeg så på siden, regnet jeg med at du var Media-elev. :p Hvis du lager det på egen hånd for morro skyld, kan du jo gjøre hva du vil. Men den eneste løsningen som ikke er "helt feil" når det gjelder design av nettsider er fortsatt css. Det gjør det mye letter og, når man får grepet på det, selv om det kan vøre litt verre å starte fra scratch med det. (ivherfall for en fersking for meg.)

 

Kildekoden viser det ganske greit. Som et eksempel på hva som er feil med siden, kan jeg nevne:

Klikk for å se/fjerne innholdet nedenfor
		<td>
		<img src="images/spacer.gif" width="95" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="25" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="2" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="28" height="1" alt=""></td>
	<td>

		<img src="images/spacer.gif" width="2" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="6" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="16" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="19" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="9" height="1" alt=""></td>

	<td>
		<img src="images/spacer.gif" width="11" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="42" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="35" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	<td>

		<img src="images/spacer.gif" width="10" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="6" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="9" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="43" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="5" height="1" alt=""></td>

	<td>
		<img src="images/spacer.gif" width="3" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="15" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="11" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	<td>

		<img src="images/spacer.gif" width="20" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="25" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="33" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="72" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="42" height="1" alt=""></td>

	<td>
		<img src="images/spacer.gif" width="14" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="33" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="15" height="1" alt=""></td>
	<td>

		<img src="images/spacer.gif" width="3" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="7" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="39" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="14" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="1" height="1" alt=""></td>

	<td>
		<img src="images/spacer.gif" width="3" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="34" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="18" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="28" height="1" alt=""></td>
	<td>

		<img src="images/spacer.gif" width="10" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="154" height="1" alt=""></td>
	<td></td>

 

For EN bolk med åpenrom. Det er mildt sagt ikke riktige måten å gjøre det på.

Lenke til kommentar
Donnie Darko

Donnie Darko

Skrevet
  • Forfatter
Skrevet
Du sier jeg har brukt tabeller? Hvor ser du det?
I kildekoden:

<table id="Table_01" width="961" height="1418" border="0" cellpadding="0" cellspacing="0">
<tr>
	<td colspan="42">
		<img src="images/Forside_01.gif" width="960" height="17" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
Osv...

HTML-tagen <Table> = tabell

 

Ok. Jeg er ikke helt sikker på hva tabeller er eller hvorfor det er fy-fy i denne sammenhengen, men jeg har ikke kodet noe som helst - grunnet jeg ikke kan det.

Det skjedde nok automatisk da jeg la PDF-filen inn i DW.

Lenke til kommentar
Donnie Darko

Donnie Darko

Skrevet
  • Forfatter
Skrevet
Når du sa portifolie og jeg så på siden, regnet jeg med at du var Media-elev. :p Hvis du lager det på egen hånd for morro skyld, kan du jo gjøre hva du vil. Men den eneste løsningen som ikke er "helt feil" når det gjelder design av nettsider er fortsatt css. Det gjør det mye letter og, når man får grepet på det, selv om det kan vøre litt verre å starte fra scratch med det. (ivherfall for en fersking for meg.)

 

Kildekoden viser det ganske greit. Som et eksempel på hva som er feil med siden, kan jeg nevne:

Klikk for å se/fjerne innholdet nedenfor
		<td>
		<img src="images/spacer.gif" width="95" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="25" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="2" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="28" height="1" alt=""></td>
	<td>

		<img src="images/spacer.gif" width="2" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="6" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="16" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="19" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="9" height="1" alt=""></td>

	<td>
		<img src="images/spacer.gif" width="11" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="42" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="35" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	<td>

		<img src="images/spacer.gif" width="10" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="6" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="9" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="43" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="5" height="1" alt=""></td>

	<td>
		<img src="images/spacer.gif" width="3" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="15" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="11" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	<td>

		<img src="images/spacer.gif" width="20" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="25" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="33" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="72" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="42" height="1" alt=""></td>

	<td>
		<img src="images/spacer.gif" width="14" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="33" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="15" height="1" alt=""></td>
	<td>

		<img src="images/spacer.gif" width="3" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="7" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="39" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="14" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="1" height="1" alt=""></td>

	<td>
		<img src="images/spacer.gif" width="3" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="34" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="18" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="28" height="1" alt=""></td>
	<td>

		<img src="images/spacer.gif" width="10" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="154" height="1" alt=""></td>
	<td></td>

 

For EN bolk med åpenrom. Det er mildt sagt ikke riktige måten å gjøre det på.

 

Åh, nei. Er ingen media-elev, selvom jeg gjerne skulle vært det, hehe.

Er sikkert mye greiere med CSS når man kan det godt, men når jeg prøvde å sette meg inn i det føltes det som om det ville ta evigheter.

 

Det med åpenrom, hvordan skulle det ellers sett ut?

Lenke til kommentar
NgZ

NgZ

Skrevet
Skrevet

Vel, en linje med kode i .css som sa at hovedelementet var så stort, og så hadde det blitt så stort av seg selv, uten at man må fylle det opp med åpenrom.

 

Jeg kan ikke .css godt nok til ås rkvie dem fra scratch uten mye plunder enda, men godt nok til å fikse på eksisterende. Et kjapt google-søk gav denne siden. Du skal se at med et derifra som ligner det du vil ha, og en god side der du kan lese om ulike css-funksjoner (w3c har en side der du kan sla opp alle "tags"ene og hvilke verdier du kan stille inn på de forskjellige), har du en side du er tilnærmet fornøyd med i løpet av morgendagn. Så kan du lese og flikke enda mer etterhvert.

Lenke til kommentar
Donnie Darko

Donnie Darko

Skrevet
  • Forfatter
Skrevet
Det finnes mange gratis CSS-maler som du kan ta utgangspungt i for at teksten ikke skal være et bilde. Bare åpne google og søk free css template

 

 

Vel, en linje med kode i .css som sa at hovedelementet var så stort, og så hadde det blitt så stort av seg selv, uten at man må fylle det opp med åpenrom.

 

Jeg kan ikke .css godt nok til ås rkvie dem fra scratch uten mye plunder enda, men godt nok til å fikse på eksisterende. Et kjapt google-søk gav denne siden. Du skal se at med et derifra som ligner det du vil ha, og en god side der du kan lese om ulike css-funksjoner (w3c har en side der du kan sla opp alle "tags"ene og hvilke verdier du kan stille inn på de forskjellige), har du en side du er tilnærmet fornøyd med i løpet av morgendagn. Så kan du lese og flikke enda mer etterhvert.

 

Nå vil jeg helst ikke ha en template da jeg vil ha det designet jeg har nå.

Lenke til kommentar
k-orm

k-orm

Skrevet
Skrevet
Nå vil jeg helst ikke ha en template da jeg vil ha det designet jeg har nå.
Som sagt: Ta utgangspungt i en template, som layout-messig ligner på siden din og sett inn dine bilder og tekst og endre 'innstillingene' i CSS-fila så vil den se identisk ut med den du har nå.

Ja det det er en del arbeid, og du synes sikkert det er kjedelig. Alternativet er å ha siden din slik den er nå, med kun bilder.

Lenke til kommentar
Donnie Darko

Donnie Darko

Skrevet
  • Forfatter
Skrevet
Tror nok at trådstarter burde lære seg litt HTML og CSS for å komme videre...

Og kanskje også lese "Guide: Hvordan få en skisse til å bli ferdig HTML".

Kan også anbefale å se over rettskrivingen hvis dette skal se seriøst ut (f.eks. så heter det abonner, ikke abboner).

 

Var det ikke en lenger opp i tråden som sa dette? Ang. rettskrivingen så har jeg ikke gått over da jeg ville bli ferdig med designet så fort som mulig. Kunne egentlig brukt fylletekst.

Har heller ikke fått svar på det jeg egentlig spurte om i første post.

Lenke til kommentar
Donnie Darko

Donnie Darko

Skrevet
  • Forfatter
Skrevet
Nå vil jeg helst ikke ha en template da jeg vil ha det designet jeg har nå.
Som sagt: Ta utgangspungt i en template, som layout-messig ligner på siden din og sett inn dine bilder og tekst og endre 'innstillingene' i CSS-fila så vil den se identisk ut med den du har nå.

Ja det det er en del arbeid, og du synes sikkert det er kjedelig. Alternativet er å ha siden din slik den er nå, med kun bilder.

 

Da forstår jeg, og skal lete gjennom nå.

Vet du hvordan det er å skrive artikler osv da? Synes det å plotte inn tekst i DW var vrient, men kanskje enklere om jeg skaffer meg en template?

Lenke til kommentar
BeFs

BeFs

Skrevet
Skrevet
Hvilke metode vil være den enkleste for å omgjøre "tekstbilde" til ren tekst?

 

Lagre i PDF og bruk tekstgjenkjenning.

 

Der har du svar på spørsmålet ditt. Litt omvei når du allerede har teksten lagret i en photoshopfil, men what ever floats your boat.

Lenke til kommentar
Donnie Darko

Donnie Darko

Skrevet
  • Forfatter
Skrevet
Hvilke metode vil være den enkleste for å omgjøre "tekstbilde" til ren tekst?

 

Lagre i PDF og bruk tekstgjenkjenning.

 

Der har du svar på spørsmålet ditt. Litt omvei når du allerede har teksten lagret i en photoshopfil, men what ever floats your boat.

 

Kan du forklare hvordan dette gjøres? :)

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...