Képek hozzáadása a webhelyéhez a Dreamweaverben

Kép hozzáadása a weboldalhoz elsőre szinte varázslatosnak tűnhet, mert a folyamat olyan egyszerű a Dreamweaverrel. A webes grafikákkal kapcsolatos kihívás nem az, hogy hozzáadja őket az oldalakhoz, hanem olyan szép képeket készítsen, amelyek gyorsan betöltődnek a megtekintő böngészőjében.

A képek létrehozásához, konvertálásához, szerkesztéséhez és optimalizálásához egy másik programra van szüksége, például a Photoshopra, a Photoshop Elementsre vagy a Fireworksre. A képek optimalizálása csökkenti a fájlméretet, így a képek gyorsabban töltődnek le. A Dreamweaver biztosít néhány alapvető képszerkesztő eszközt, de legtöbbször a Dreamweavert használja képek beszúrására és elhelyezésére az oldalon.

A Dreamweaver megkönnyíti a képek weboldalain való elhelyezését, és többféle módot kínál erre:

• Kattintson a Képek ikonra a Közös beszúrás panelen, majd válasszon ki egy képet a Kép beszúrása párbeszédpanelen.

• A Fájlok panelen kattintson és húzza a kép nevét arra az oldalra, ahol meg szeretné jeleníteni a képet.

• Használja a Beszúrás menüt.

Ha nincs kéznél webre optimalizált JPEG, GIF vagy PNG kép, ingyenesen letölthet már optimalizált képeket .

Ha képet szeretne elhelyezni egy weboldalon a Beszúrás menü használatával, kövesse az alábbi utasításokat:

Meglévő oldal megnyitása vagy új oldal létrehozása és mentése.

Vigye a kurzort oda, ahová be szeretné szúrni a képet az oldalon.

Beszúrhat képeket egy új üres fájl bal felső sarkába, és képeket illeszthet be

címkéket és elemeket a weboldalon, de nem helyezhet el egy képet az oldal közepére anélkül, hogy további HTML-címkéket vagy CSS-formázást használna annak elhelyezéséhez.

Válassza a Beszúrás → Kép → Kép menüpontot.

Megjelenik a Képforrás kiválasztása párbeszédpanel.

Tallózással keresse meg a beszúrni kívánt képet.

Számítógépes rendszerétől függően különböző módokon tekintheti meg a képeket a beillesztéskor. Íme három gyakori lehetőség:

• Windows XP rendszerű számítógépen válassza a Nézet menü Bélyegképek elemét a Megtekintés mezőtől jobbra, hogy megjelenítse a megnyitott mappákban lévő összes kép miniatűr verzióját. A párbeszédpanel jobb szélén bármelyik kiválasztott kép egyetlen előnézetét is megtekintheti.

• Windows Vista vagy Windows 7 rendszerű számítógépen válasszon egy ikonopciót (Kis ikonok, Közepes ikonok, Nagy ikonok vagy Extra nagy ikonok) a Nézet menü legördülő listájából a Megtekintés mezőtől jobbra, hogy megjelenítse a miniatűr verziókat az összes kép bármely nyitott mappában. A párbeszédpanel jobb szélén bármelyik kiválasztott kép egyetlen előnézetét is megtekintheti.

• Mac rendszeren válassza a Megtekintés oszlopként lehetőséget a párbeszédpanel bal felső sarkában. A párbeszédpanel jobb szélén bármelyik kiválasztott kép egyetlen előnézetét megtekintheti.

  

  Köszönet: Casey Stoll fotói

A kép beillesztéséhez kattintson duplán a kép nevére, vagy kattintson egyszer, majd kattintson az OK gombra.

Ha beszúr egy képet egy oldalra, és a kép nem kerül mentésre a helyi webhely mappájába, a Dreamweaver figyelmeztető párbeszédpanelen kéri, és felajánlja a kép másolását a helyi webhely mappájába. Sok tervező létrehoz egy images nevű almappát a helyi webhely mappájában, ahol tárolja a webhelyén lévő összes képet, de ha úgy tetszik, több almappába is rendezheti a képeket.

Válassza ki a képet a weboldalán a kép tulajdonságainak megtekintéséhez és szerkesztéséhez.

A képbeállítások automatikusan megjelennek az oldal alján található Tulajdonságvizsgálóban, ha egy képet kiválaszt.

Köszönet: Casey Stoll fotója

Amikor beszúr egy képfájlt egy oldalra, valójában nem adja hozzá a kép másolatát az oldalhoz; létrehozol egy hivatkozást a képre. A mögöttes kód nagyjából úgy néz ki, mint az egyik oldalról a másikra mutató hivatkozás kódja.

Mind a képhivatkozások, mind a hivatkozások tartalmazzák a fájl nevét és az oldaltól a fájl elérési útját. Lényegében egy utasítást hoz létre a webböngésző számára, hogy megtalálja a képet, amikor megjeleníti az oldalt.

Ahhoz, hogy képet jelenítsen meg weboldalán, fel kell töltenie az oldalt és a képet is a webhely közzétételekor. Ha a képfájlok és az ezekre hivatkozó oldalak nem ugyanazon a relatív helyen vannak a merevlemezen, mint a webszerverén, akkor megszakítja a képeire való hivatkozást, és egy csúnya Törött kép ikon jelenik meg az oldalon. .

A legjobb módja annak, hogy a képek és fájlok egymáshoz képest ott maradjanak, ahol lenniük kell, ha hagyja, hogy a Dreamweaver nyomon kövesse őket. Ezért olyan fontos, hogy befejezze a webhely beállítási folyamatát, és gondoskodjon arról, hogy soha ne helyezzen át vagy nevezzen át képeket, kivéve a Fájlok panelen.