Com afegir imatges al vostre lloc web a Dreamweaver

Afegir una imatge a la vostra pàgina web pot semblar gairebé màgic al principi perquè el procés és molt senzill amb Dreamweaver. El repte dels gràfics web no és afegir-los a les vostres pàgines, sinó crear imatges atractives que es carreguen ràpidament al navegador del vostre espectador.

Necessites un altre programa, com ara Photoshop, Photoshop Elements o Fireworks, per crear, convertir, editar i optimitzar imatges. L'optimització de les imatges fa que les mides dels fitxers siguin més petites, de manera que les vostres imatges es descarreguen més ràpidament. Dreamweaver ofereix algunes eines bàsiques d'edició d'imatges, però sobretot utilitzeu Dreamweaver per inserir i posicionar imatges a la vostra pàgina.

Dreamweaver facilita la col·locació d'imatges a les vostres pàgines web i ofereix diverses maneres de fer-ho:

• Feu clic a la icona Imatges al tauler Inserció comuna i, a continuació, seleccioneu una imatge mitjançant el quadre de diàleg Insereix imatge.

• Al tauler Fitxers, feu clic i arrossegueu el nom d'una imatge a la pàgina on voleu que aparegui la imatge.

• Utilitzeu el menú Insereix.

Si no teniu a mà una imatge JPEG, GIF o PNG optimitzada per a la web, podeu descarregar imatges gratuïtes que ja estiguin optimitzades.

Per col·locar una imatge en una pàgina web mitjançant el menú Insereix, seguiu aquestes instruccions:

Obre una pàgina existent o crea i desa una pàgina nova.

Col·loca el cursor on vulguis inserir la imatge a la pàgina.

Podeu inserir imatges a la part superior esquerra d'un nou fitxer en blanc i podeu inserir-hi imatges

etiquetes i elements d'una pàgina web, però no podeu col·locar una imatge al mig d'una pàgina sense utilitzar etiquetes HTML addicionals o format CSS per posicionar-la.

Trieu Insereix → Imatge → Imatge.

Apareix el quadre de diàleg Selecciona la font d'imatge.

Navega per localitzar la imatge que vols inserir.

Depenent del vostre sistema informàtic, podeu previsualitzar les imatges mentre les inseriu de diferents maneres. Aquí hi ha tres opcions habituals:

• En un ordinador amb Windows XP, seleccioneu Miniatures a la llista desplegable del menú Visualitza a la dreta del camp Cerca a per mostrar versions en miniatura de totes les imatges en qualsevol carpeta oberta. També podeu veure una vista prèvia única de qualsevol imatge seleccionada a l'extrem dret del quadre de diàleg.

• En un ordinador amb Windows Vista o Windows 7 , trieu una opció d'icona (icones petites, icones mitjanes, icones grans o icones extra grans) a la llista desplegable del menú Visualitza a la dreta del camp Cerca a per mostrar versions en miniatura de totes les imatges de qualsevol carpeta oberta. També podeu veure una vista prèvia única de qualsevol imatge seleccionada a l'extrem dret del quadre de diàleg.

• En un Mac, trieu l'opció Veure com a columnes a la part superior esquerra del quadre de diàleg. Podeu veure una vista prèvia única de qualsevol imatge seleccionada a l'extrem dret del quadre de diàleg.

  

  Crèdit: Fotos de Casey Stoll

Per inserir la imatge, feu doble clic al nom de la imatge o feu clic una vegada i després feu clic a D'acord.

Si inseriu una imatge en una pàgina i la imatge no es desa a la carpeta del vostre lloc local, Dreamweaver us demanarà un quadre de diàleg d'advertència i us proposa copiar la imatge a la carpeta del vostre lloc local. Molts dissenyadors creen una subcarpeta anomenada imatges dins de la carpeta del lloc local on emmagatzemen totes les imatges del seu lloc, però podeu organitzar imatges en diverses subcarpetes si ho preferiu.

Seleccioneu la imatge a la vostra pàgina web per veure i editar les propietats de la imatge.

Les opcions d'imatge es mostren automàticament a l'inspector de propietats a la part inferior de la pàgina quan se selecciona una imatge.

Crèdit: Foto de Casey Stoll

Quan insereixes un fitxer d'imatge a una pàgina, en realitat no afegeixes una còpia de la imatge a la pàgina; creeu una referència a la imatge. El codi subjacent s'assembla molt al codi d'un enllaç d'una pàgina a una altra.

Tant les referències d'imatge com els enllaços inclouen el nom del fitxer i el camí des de la pàgina fins a aquest fitxer. Bàsicament, esteu creant una instrucció per a un navegador web per trobar la imatge quan mostra la pàgina.

Per mostrar una imatge a la vostra pàgina web, heu de penjar tant la pàgina com la imatge quan publiqueu el vostre lloc web. Si els vostres fitxers d'imatge i les pàgines que fan referència a aquests fitxers no es troben a la mateixa ubicació relativa del vostre disc dur que al vostre servidor web, trenqueu la referència a les vostres imatges i apareixerà una icona d'Imatge trencada lletja a la vostra pàgina. .

La millor manera d'assegurar-vos que les vostres imatges i fitxers es mantinguin on se suposa que estan en relació entre ells és deixar que Dreamweaver els faci un seguiment. Per això és tan important completar el procés de configuració del lloc i assegurar-se que mai no moveu ni canvieu el nom d'una imatge, excepte al tauler Fitxers.