Iz Photoshopa u Dreamweaver

[Jenkiduduldu]

ViperSnake85 kaže:

Moze li mi neko pomoc, sa dreamweaver-om, uradio sam dizajn site-a u cs2-ojci, optimizovo u ready-u i isjeko na slices i sacuvao kao html and images. html otvorim u dw-u 8ci, i sada zelim da upisem text na jedan slice medjutim nemogu jer je to slika... Ja uzmem pa pobrisem taj slice, i ubacim isti slice (sliku) ali kao background i tada mogu da ubacujem text ali se slice ispod poremeti, za par pixela se pomjeri i nikako da ga uganjam... Kako da to rijesim zna li iko??? Hvala i pzz!!!

Vidim da se ovo pojavljuje već drugi put kao problem u istoj temi.
Padaju mi dva moguća rešenja na pamet i oba zavise od izgleda tog slicea gde ti je text odnosno da li je taj text u sliceu preko obične jednobojne pozadine ili se ispod teksta nalazi neki šablon.

Ako je u pitanju text na jednobojnoj pozadini onda otvori sajt u DW, obriši taj slice (sliku) u toj ćeliji tabele, upiši text koji želiš i formatiraj ga uz pomoć CSSa (ovako možeš podesiti boju, poziciju, boju pozadine te ćelije) da ti se poklapa sa layoutom.

Ukoliko se na sliceu (slici) nalazi neki komplikovani šablon ispod texta, onda mi ova varijanta pada na pamet:
U Photoshopu u tom sliceu izostavi text. Eksportuj stranu kao HTML i images, otvori u DWu. Podesi u toj ćeliji (uz pmoć CSSa) background te slike (kao što si već uradio) i onda samo dodaj text i formatiraj ga uz pomoć CSSa.

[dbaja]

Vidi, ako je Dreamweaver napravio html fajl sa tabelom u koju je rasporedio sličice koje si isekao slice alatkom, onda prosto u prvom redu, gde se definiše tabela, koji glasi, recimo ovako:
<TABLE WIDTH="600" BORDER="0" ALIGN="CENTER">

dodaj sledeće parametre, pa da izgleda ovako:
<TABLE WIDTH="600" BORDER="0" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0">

To bi, mislim, trebalo da reši problem prilikom ubacivanja teksta u ćeliju tabele.

[Parsifal]

Kao i jos neki sa ove teme, i ja sam takodje apsolutni pocetnik u kreiranju sajtova, pa evo da objasnim kako sam uspeo da napravim sajt koji sam proverio na serveru i za divno cudo radi .

U DW sam otisao na File> New> Blank Page> HTML> i izabrao “2 column elastic,left sidebar, heder and footer” pa zatim klik na “Create” i u prozoru sam dobio template stranice. Zatim sam otisao na dno strance, klik na dugme “page properties” sto otvara prozor “appearance” gde sam podesio odgovarajuce parametre za stranicu – font, size, text color, background color ili background image. Ja sam ubacio .gif sliku od 320x800 px sa canvas uzorkom za "background image", i u polju ispod podesio “repeat”).
Kada se ovo odradi, onda ide klik na “links”, pa podesavanje boja linkova (link color, visited link, rollover links). Ukoliko se za linkovanje stranica koristi kucani tekst (ja sam koristio linkovanje stranica preko "rollover image"-a), onda “underline style” treba podesiti na “Show underline only on rollover ”. Ostala podesavanja nisam dirao.

Podesavanje boje za tekstualno polje, baner polje, left meni polje i footer polje odradjuje se kada na radnoj povrsini stranice klikne sa jednim klikom na bilo koju ivicu odredjenog polja, sto ce na desnoj stranici radne povrsine otvoriti meni "css styles">"curent" i ispod ce prikazati sve atribute stranice. Jedan od njih ce biti i "background", pa kliknite duplim klikom na njegovu vrednost, npr "#FFFFFF" i ubacite umesto nje novu sifru. Ukoliko i ovde hocete umesto boje da ubacite recimo sliku canvasa, onda se na dnu atributa nalazi "Add property" sa "background-image" atributom, izmedju ostalih.


Sada u glavnom prozoru sledi ubacivanje slika i teksta.

U “insert” meniju klik na karticu “common” gde sam koristio funkcije “image” za ubacivanje banera i drugih slika na stranicu (pritom u polju “border” u “properties”-u na dnu radnog polja, obavezno ukucati nulu), “rollover image” za ubacivanje slika za linkove stranica u levom meniju (uradjenih u PS 180x30 px, 2 slike po linku, sejvovane kao.gif) umesto tekstualno kucanih linkova za stranice i “plug in” za ubacivanje mp3 fajlova (ovo treba izbegavati jer mnogo usporava ucitavanje sajta).

Ubacivanje teksta je potpuno isto kao i u Wordu.

Kada su slike i tekst ubaceni, sada ide optimizacija stranice (svake posebno) za pretrazivace, jer ako se to ne odradi, google ih uopste nece ni indeksovati.
Znaci sada ide prebacivanje iz “design” u “code” mode (gornji levi ugao stranice) i ubacivanje tagova kako bi google mogao da zna sta se na stranici nalazi. Ovda cu prikazati jedan primer neophodnih tagova gde se prvih cetiri ubacuju izmedju <head> i </head>, a peti img tag, izmedju <body> i </body> tagova na stranici.

<head>
1.<title>Mobilni telefoni, racunari, oprema - Svet komunikacija</title>

2.<meta name="Description" content="Sirok izbor kvalitetnih mobilnih telefona, racunara i racunarske opreme" />

3.<meta name="Keywords" content="mobilni telefoni, racunari, laptop, desktop, monitori, racunarska oprema, komunikacije, wireless," />

4.<meta name="language" content="Serbian, Srpski," />
</head>

<body>
5.<img src="svetkomunikacija.jpg" alt="wireless-planeta" width="173" height="215" />
</body>

Ove kodove mozete pogledati za svaku stranicu bilo kog sajta (pa i ovog foruma) sa klikom na "view" > "page source" u vasem browseru.

Kada se sejvuje prva uradjena stranica, onda to treba da bude pocetna stranica sajta i uvek se sejvuje pod imenom “index”, a DW ce zatim traziti da se upise root sajta, tj. naziv sajta i jos neke podatke, npr. ostavite cekirano da sajt radite u lokalu, pa kada ga zavrsite ubacicete ga na server putem ftp-a, ili preko control panela sa racuna hostinga.

Kada odradite podesavanja i ubacivanje na server, ne zaboravite da adresu sajta prijavite kod google-a na www.google.com/addurl/ a nije lose da je prijavite i na jos 10-ak portala-direktorijuma.

Ovde sam u najkracim mogucim crtama opisao najneophodnije postupke za izradu sajta, i tokom tog opisa sigurno sam nesto zaboravio da napomenem. Za one koji znaju sve sto se moze znati o kreiranju sajtova, verovato sam bio nepotrebno opsiran, ali onima koji se prvi put srecu sa DW, to ce samo biti od koristi.

[Parsifal]

Zaboravio sam da navedem da su dimenzije banera: 716x148 px.

[user928]

Da ne otvaram novu temu imam pitanje u vezi slice for web:

da li ovako da isecem sliku ili postoji neki bolji nacin?

zelenom bojom sam obelezio pocetni div

plavom div.ove koje bih stavio da budu background image da bih kasnije u dreamweaver upisao tekst i sredio ga putem css.a (iskljucicu tekst layere kada budem izvozio slice)

crvenom div.ove koje bih stavio da budu foreground images jer bih zeleo da na njih moze da se klikne (da budu link)

evo slike iz photoshopa:



da li je ovo najbolji nacin?

[user928]

uspeo sam , uradio sam ovako:



zelno okvir: div u kojem je background image (samo siva pzadina i strelice)

plavo:div u kojem je H1,i ispod H2 tekst

crveno:div u kojem je p tekst i ispod njega ubacena slika dugmeta (vise o tome)

zelena ikona: div u kome je ubacena slika

ne znam da li je ovo pravilno ali drzi vodu