Logo w Photoshopie dla każdego

[Marcin_Kijak]

Poprawiłem trochę logo (a raczej zrobiłem od zera). Nadal się oddziela od tła, ale to już lepsze niż poprzednio.

Nadal nie mogę za pomocą stylu CSS zrobić odsyłacza (czy jest to możliwe?).

Chodziło mi o to, aby za pomocą jednej zmiany w arkuszu CSS zrobić ten obszar (logo) jako odnośnik do strony głównej; a nie za pomocą html - bo wtedy muszę we wszystkich stronach ręcznie to robić...

[Tomasz Fabiszak]

Niestety za pomocą samych stylów nie zrobisz odsyłacza. Style CSS informują przeglądarkę JAK wyświetlać daną stronę, a dokument XHTML zawera TERŚĆ i wszystkie akcje, które użytkownik może wykonać na stronie. Bez edycji dokumentów XHTML się nie obejdzie.

Musisz w dokumencie/dokumentach XHTML wstawić znaczniki <h1><a href="http://www.projektsukces.pl/">ProjektSukces.pl</a> wewnątrz bloku <div class="headMiddle"></h1></div>

Dodatkowo do arkusza ze stylami musisz dodać wpisy, które umieściłem w poprzednim poście oraz dodatkowo:

Kod: Zaznacz wszystko

#header h1 a {
display:block;
height:55px;
width:398px;
margin:0;
padding:0;
text-decoration:none;
}

Daniel podał odsyłacz do jednego z lepszych kursów XHTML i CSS po polsku w Sieci - tam możesz sprawdzić znaczenie poszczególnych atrybutów.

[Marcin_Kijak]

To fakt ad. styli. Myślałem jednak, że jest jakaś opcja aby nadać znaczenie aby np. konkretny blok był traktowany jako odnośnik.

Czyli trzeba usiąść i przerobić całość ręcznie... :/

Tutaj kłania się CMS albo PHP... zamiast strony w htmlu

[Paweł Landzberg]

Technika ta nosi nazwę FIR (ang. Farhner Image Replacement - metoda Farhnera zastępowania tekstów obrazkami). Nazwami się nie przejmuj podaję je tylko dla porządku, gdyby ktoś chciał więcej na ten temat poszukać w Sieci.

Jak dla mnie jest to trochę technika spamerska. Na stronie masz nagłówek, którego nie widzą użytkownicy - jest on spreparowany tylko specjalnie dla wyszukiwarek. Efekt jest taki, że roboty wyszukiwarek widzą co innego niż użytkownicy.

Co do odnośnika logo w topie to ja robię to w taki sposób:

Cały top mam załączony jako obrazek - nie tło. I w nim wyznaczam obszar, który jest linkiem np.:

Kod: Zaznacz wszystko

<img src="/images/logo.jpg" alt="Opis topa" width="760" height="150" usemap="#logo-firmy" />
  <map name="logo-firmy" id="logo-firmy">
       <area shape="rect" coords="15,42,366,105" href="/" alt="Opis logo" />
  </map>

Area - określa obszar, który ma być linkiem. Shape="rect" - obszar ma być prostokątny. Cords - współrzędne obszaru: pierwsze dwie liczby jest to punkt określający lewy górny róg obszaru, dwa następne określają prawy dolny róg (ja sobie te punkty ustalam w IrfanView: klikam w miejsce gdzie ma być lewy górny róg obszaru - pojawia mi się wtedy jego położenie, następnie przeciągam kursor do prawego dolnego punktu - pojawia się położenie drugiego punktu).

Fragment ten mam zapisany w php i dołączam go do miejsca na stronie, gdzie ma się pojawić (include) - w ten sposób w razie potrzeb edytuję tylko 1 plik, aby zmienić logo.

[Marcin_Kijak]

Wypróbowałem też z całym divem który odnosi się do nagłówka - jak obejme go w <a href...> też jest klikalny.

Szkoda, że na początku nie pomyślałem, aby stałe elementy (nagłówek, menu itp) zrobić właśnie w php lub w java script (prosty sposób rozyłał kiedyś Piotr Majewski w newsletterze, nawet go sprawdziłem).

Z drugiej strony chciałem mieć stronę w html/css a nie cms, zeby mieć 100% kontroli nad każdym kawałkiem serwisu i był łatwy do pozycjonowania.

[Twenty Eyes]

Photoshop jest niezastąpiony do tworzenia logotypów dla serwisów internetowych. Tak jak napisał autor pierwszego postu, dobrze pracować w programie do grafiki wektorowej, jednak jeżeli logo ma być zastosowane tylko na stronie internetowej to sam Photoshop będzie wystarczający.