Hvordan sette et bilde i tittelen på en webside ved hjelp av Dreamweaver

August 4

Strengt tatt er det ikke mulig å inkludere bilder i <title> del av et HTML-dokument. Hva nettbrukere vanligvis oppfatter som et bilde ved siden av en webside tittel er faktisk et lite bilde kalt en favicon. Begrepet er en forkortet versjon av "favoritt-ikonet," så kalt fordi det oftest vises ved siden av tittelen på en webside lagret på Favoritter-mappen fra en nettleser. Bruk Adobe Dreamweaver til å sette inn et favicon inn nettsidens tittel.

Bruksanvisning

1 Velg et passende bilde. Favicons er svært liten, måler bare 16 piksler torget, slik at bildet du velger, må være enkle nok til å forbli leselige på miniatyrstørrelse. Komplekse logoer ser ofte trangt eller synes å ha hakkete kanter når skaleres til 16 piksler. Hvis dette skjer med deg, bør du vurdere å bruke en alternativ bilde som ikke omfatter logoen din, men i stedet gjenspeiler enten type innhold på din nettside eller fargepalett nettstedets. I begge tilfeller, gjøre visse bildet er et perfekt kvadrat for å sikre jevn reduksjon.

2 Endre størrelsen på bildet. Når du har valgt et bilde som reduserer vel, åpne filen i Photoshop. I menyen øverst på skjermen, velg "Image", deretter "Image Size". I dialogboksen som vises, endrer både bredden og høyden på bildet til 16 piksler og klikk OK.

3 Lagre bildet som en GIF eller PNG. GIF og PNG-bilder oppleve færrest problemer når konvertert til ICO format i følgende trinn. For å lagre bildet i et av disse formatene, velger du "Fil" fra menyen øverst i Photoshop, klikk på "Lagre som". Gi din favorittikon filen et navn, og klikk på rullegardinmenyen under navnefeltet filen og velg enten "Compuserve GIF" eller "PNG" alternativet. Klikk på "Lagre".

4 Konverter bildet til ICO format. Photoshop kan ikke lagre bildefiler til ønsket ICO format på egen hånd. I stedet må du enten laste ned en Photoshop plug-in eller bruke en web-verktøyet. For eksempel bruke gratis favicon generator fra favicon.cc nettsted (se referanser). Fra forsiden av dette nettstedet, klikk på "Import Image" knappen. Finn GIF eller PNG-fil opprettet i trinn 3 og klikk "Last opp". I løpet av noen sekunder, vil verktøyet forvandle din fil inn i en 16-kvadrat-pixel image. Hvis du vil lagre dette til datamaskinen i ICO format, finn overskriften merket "Preview" nederst på siden, og klikk deretter på "Last ned Favicon." Lagre denne filen i mappen med resten av nettsidefiler.

5 Legg til favorittikon til websiden din. Favicons lenker til enkelte nettsider på samme måte som eksterne filer, for eksempel Javascript og Cascading Style Sheets. Åpne din nettside i Dreamweaver, deretter bytte til kodevisning ved å velge "View" fra menyen øverst på skjermen og klikke på "Code" alternativet. Deretter inkluderer følgende kode mellom åpning og lukking <head> taggene på websiden din, og etter <title> taggene:

Denne koden forutsetter favicon eksisterer i Bilder-mappen. Hvis du plasserer favicon andre steder, oppdatere plasseringen finnes i hver href attributt. Hvorfor trenger du å ta med to linker? Kryss-nettleser kompatibilitet. Internet Explorer 7 håndterer favicon annerledes enn andre nettlesere, og krever en unik regel for å sikre nøyaktig presentasjon.

6 Lagre webside, og deretter åpne den i nettleseren din. Du vil nå se din favorittikon. Hvis nettleseren allerede er åpent, må du kanskje helt tett og starte den på nytt før favicon vises. Vær også oppmerksom på at enkelte nettlesere viser favorittikoner for sidetitler lokalisert i Favoritter-mappen, ikke tittellinjen i selve nettleseren.