Index / tech / Hoe kan ik een beeld in de titel van een webpagina met behulp van Dreamweaver

Share This Post

tech

Hoe kan ik een beeld in de titel van een webpagina met behulp van Dreamweaver

Strikt genomen, is het niet mogelijk afbeeldingen in de <title> van een HTML document omvatten. Wat webgebruikers meestal opvatten als een foto naast een webpagina titel is eigenlijk een kleine afbeelding met de naam van een favicon. De term is een

Advertisement



Strikt genomen, is het niet mogelijk afbeeldingen in de <title> van een HTML document omvatten. Wat webgebruikers meestal opvatten als een foto naast een webpagina titel is eigenlijk een kleine afbeelding met de naam van een favicon. De term is een verkorte versie van "favoriete icoon ', zo genoemd omdat het meestal verschijnt naast de titel van een webpagina opgeslagen in de map Favorieten van een webbrowser. Gebruik Adobe Dreamweaver om een ​​favicon in de titel van uw website plaatst.

Wat je nodig hebt

Adobe Dreamweaver

Adobe Photoshop

Selecteer een geschikte afbeelding. Favicons zijn erg klein, het meten van slechts 16 pixels plein, zodat het beeld dat u selecteert moet eenvoudig genoeg zijn om leesbaar blijven op miniatuur grootte. Complex logo's zien er vaak verkrampt of lijken te gekartelde randen hebben wanneer verkleind tot 16 pixels. Als dit gebeurt, moet u overwegen het gebruik van een alternatieve afbeelding die niet uw logo bevat, maar in plaats daarvan geeft aan welke van de inhoud op uw website of kleurenpalet van de site. In beide gevallen is er zeker van uw afbeelding is een perfect vierkant aan de vermindering te verzekeren zelfs.

Het formaat van uw afbeelding. Na het kiezen van een beeld dat goed vermindert, opent u het bestand in Photoshop. In het menu aan de bovenkant van het scherm, selecteer "Beeld", en klik op 'Image Size. " In het dialoogvenster dat verschijnt, verandert zowel de breedte en hoogte van de afbeelding om 16 pixels en klik op OK.

Sla uw afbeelding als een GIF- of PNG. GIF en PNG-afbeeldingen te ervaren de minste problemen bij het omgezet in ICO-formaat in de volgende stap. Als u uw afbeelding op te slaan in een van deze formaten, selecteer "File" in het menu bovenaan in Photoshop en klik op 'Opslaan als. " Geef je favicon bestand een naam en klik op de drop-down menu onder de bestandsnaam veld en selecteer de optie of "Compuserve GIF" "PNG". Klik op 'Opslaan'.

Zet uw afbeelding naar ICO-formaat. Photoshop kan geen beeldbestanden op te slaan op de gewenste ICO-formaat op zijn eigen. In plaats daarvan moet je ofwel downloaden van een Photoshop plug-in of gebruik maken van een web nut. Gebruik bijvoorbeeld de gratis favicon generator uit de favicon.cc website (zie referenties). Van de voorpagina van deze site, klik op de "Import Image" knop. Zoek het GIF- of PNG-bestand gemaakt in stap 3 en klik op 'Upload'. Binnen een paar seconden, zal het nut van uw bestand te transformeren afbeelding van een 16-vierkante pixels in. Om dit op uw computer in ICO-formaat op te slaan, zoekt de rubriek genaamd "Preview" in de buurt van de onderkant van de pagina en klik op 'Download Favicon. " Bewaar dit bestand naar de map met de rest van uw webpagina bestanden.

Voeg de favicon op uw webpagina. Favicons koppelen aan individuele webpagina's op dezelfde manier als externe bestanden, zoals JavaScripts en Cascading Style Sheets. Open uw webpagina in Dreamweaver, schakel dan over naar de codeweergave door "View" aan de bovenkant van het scherm te selecteren in het menu en klik op de optie "Code". Next, de volgende code tussen het openen en sluiten <head> tags van uw webpagina en na de <title> tags:

<Link rel = "shortcut icon" href = "images / favicon.ico" type = "image / x-icon" />
<Link rel = href = "images / favicon.ico" type "icoon" = "image / x-icon" />

Deze code gaat uit van de favicon bestaat in de map afbeeldingen. Als u uw favicon elders te plaatsen, het actualiseren van de locatie in elk href attribuut. Waarom heb je nodig om twee links bevatten? Cross-browser compatibiliteit. Internet Explorer 7 behandelt favicons anders dan andere browsers en vereist een unieke regel om nauwkeurige presentatie te verzekeren.

Sla uw webpagina, dan opent u het in uw browser. Je ziet nu je favicon. Als uw browser al open is, kan het nodig zijn om volledig te sluiten en opnieuw op te starten voordat de favicon verschijnt. Merk ook op dat sommige browsers tonen favicons voor paginatitels gevestigd in de map Favorieten, niet de titelbalk van de browser zelf.

Share This Post