Sablon telepítése Dreamweaverben. Adobe Dreamweaver MX Illustrated oktatóanyag Oldal létrehozása meglévő sablonból
Jó napot
Mindannyian tudjuk, hogy a keresőmotorok jól fogadják az egyedi sablonokat.
Tehát ma arról szeretnék beszélni, hogyan írhat sajátot saját sablon a program használatával Adobe Dreamweaver
Ez a program fizetős, de ha rákeresel a Google-on, találhatsz ingyenes verziót (nem demót),
Adobe dreamweaver cs6 + crack
Miután letöltötte és telepítette, azt hiszem, elkezdheti
Mielőtt elkezdené, hozzon létre egy mappát valahol az oldal számára, ahová elmentjük a fájljainkat. És azonnal hozzon létre egy mappát a képek számára
A főmenüből válassza ki HTML
Látni fogja a dokumentum forráskódját.
Cím- szükséges a webhely nevének megjelenítéséhez a böngészőben. Ide írjuk leendő oldalunk nevét. Például most készítek egy weboldalt a turizmus témájában. És el kell ismernie, hogy a turisztikai témák kontextuális hirdetésében a kattintásonkénti költség magasabb, mint a mozi vagy a sport témáké. Persze nem jó tőlem, hogy kizárólag pénzkeresés céljából csinálok oldalt, de megpróbálom az SDL felét megcsinálni. Nem magam írok cikkeket, csak rendelek. De a TURIZMUS téma túl kiterjedt, így az oldalam egy adott országról fog szólni, vagyis kb Olaszország. Én ezt tettem
Test- ez a webhely törzse, helyezze a kurzort közéjük, kattintson a " Beszúrás", benne a " táblázatok" . Itt választhatja ki a sorok és oszlopok számát.
A táblázat segítségével oldalunkat részekre bontjuk (fejléc, menü, lábléc, alap). A keretem egyszerű lesz. Ha azonnal rájössz, választhatod a nehezebb utat. Így osztottam fel leendő webhelyemet:
Először 2 oszlopot és 3 sort állítottam be, majd egyesítettem a felső 2 és az alsó 2 cellát. Ehhez elmentem Tervezés" . gombbal kiemelve " ctrl"2 cella és a jobb egérgomb" táblázatok" => "egyesítse a cellákat"
Íme, amit kaptam a " A kód"
szélesség - szélesség, 1115-re állítva, a fejléc is azonos méretű lesz
magasság - magasság, 100%, teljes képernyő
határ - egyelőre legyen 1, hogy lássuk a határokat. Majd ha végzett, módosíthatja 0-ra
A program egyik előnyét szeretném kiemelni, amikor elkezdesz írni valamilyen címkét, akkor egy tipp jelenik meg, és ott azonnal kiválaszthatod és beillesztheted azt a címkét.
Mentés egyszer másként index.html. Soha nem tudhatod, a lámpa kikapcsol valamilyen hibát...
Most kezdjük el feltölteni az oldalt tartalommal
Először kalapot kell feltenni, nekem előre van egy kalapom
Ehhez helyezze be a kurzort az első cellába, majd a " betét"és" kép" , válaszd ki ott a fejlécünket. És automatikusan bekerül a kódba, a szélességet 1115px-re változtatom, a magasságot pedig úgy hagyom, ahogy van.
De ha nagyít az oldalra, a táblázat a bal oldalra kerül, a jobb oldal pedig üres marad. Mindent középpontba kell helyezni. Ehhez válassza ki a teljes táblázatot (a kódban), nézzen le, és ott lásd " igazítsa" , válassza a " a központban", ennyi. A képernyőre nézünk
Azonnal tegyük ide kattinthatóvá a fejlécünket, jelöljük ki a szöveget, menjünk le, és ott van egy sor " link" , írja oda az index.html-t
Egy kalappal elkészült, hozzáadhat még valamit, fantáziálhat
Most hozzáadhat kategóriákat a menüblokkhoz: " betét" - "hiperhivatkozás". A paraméterek saját magunk számára történő megváltoztatásával több kategóriát is beillesztünk. Például nekem van, Olaszország városai- város.html , Olaszország áttekintése- olaszország.html olasz étel- italyanskaya-picca.html stb.
Ha rákattint a " oldal tulajdonságait" , alsó rész " tervezés", módosíthatja a hivatkozás paramétereit (fény, méret, kitöltés, betűtípus stb.)
Fő rész: Bemegyünk a tervezésbe, vigyük a kurzort a "főrész" blokkra, és illesszük be a szöveget, a kód automatikusan megíródik. Itt is ugyanez a helyzet, ha erre jársz oldal tulajdonságait", szerkesztheti a paramétereket
Most hozzuk létre a többi oldalunkat
Megyünk " tervezés", ott a "Fő rész" blokkban mindent törölünk, feltöltjük egyéb információval.Pl Olaszország városai, Ide írok mindent, ami Olaszország városa témájával kapcsolatos, és az oldalt más néven mentem el city.html
Olaszország áttekintése, töltse ki és mentse másként italia.html
Végül ezt kaptam
Természetesen ez nem mesterkurzus. És a tapasztalt tervezők számára, akikből sok van ezen a fórumon, a lecke nevetségesnek tűnik, de egy kezdőnek, akinek fogalma sincs az oldal létrehozásáról, megteszi.
Remélem, leckém jó példaként szolgál majd a kezdőknek, és komolyabb projektekre irányítja őket.
Ha valahol hibáztam, ne ítélj szigorúan
Oldalsablonok Dreamweaverben történő létrehozásához a Fájl -> Mentés sablonként menüt kell használnia. Kezdjük el létrehozni őket. Először is hozzunk létre egy sablont kezdőlap jövőbeli webhely. Ehhez válassza ki a könyvjelzőt úgy, hogy az index.html fájl meg van nyitva a Dreamweaverben. Ezután a program főmenüjében válassza a Fájl -> Mentés sablonként .. menüpontot (mentés sablonként). Ezen műveletek eredményeként az alábbi ábrán látható panel jelenik meg.
Ezután már csak a Mentés gombot kell megnyomnia, megjelenik egy panel a "Hivatkozások frissítése?" kérdéssel. amire "Igen" kell válaszolnia. Ennek eredményeként a projektünkkel együtt egy másik "Sablonok" nevű mappa jelenik meg a mappában, és ebben egy index.dwt nevű fájl. Ez az oldal főoldalának valódi sablonja. Mivel ez a fájl már meg van nyitva a Dreamweaver munkaablakában, megtekintheti a kódját, és megtudhatja, miben tér el az index.html fájl kódjától. Végül is ezek a böngészőben megnyitott fájlok nem különböznek egymástól. Tehát mi a hangsúly? És a trükk a címkék között van
és zölddel kiemelt feliratok vannak.
Ezek az úgynevezett szerkeszthető régiók. Mit is jelent ez? Ez azt jelenti, hogy ha a webhely oldala hivatkozik adott fájl sablont, akkor csak ezeken a helyeken lehet változtatni az oldalon. Az ilyen oldal többi része szerkesztés céljából be lesz zárva.
Most az egész webhely csak egy oldalból áll - index. De az Ön webhelye nem fog egyetlen oldalból állni, igaz? Ezután folytassuk a többi oldal létrehozását.
Magától értetődik, hogy már a fejében kell lennie egy képnek webhelye többi oldalának hozzávetőleges tartalmáról. Ha még nincs meg, azt tanácsolom, hogy építsd a fejedben ezt a képet, hiszen in további munka sokat fog segíteni.
Általánosságban elmondható, hogy megvannak a szakaszok és alszakaszok nevei? Logikus, hogy a létrehozásukkal kezdjük.
Először nyissa meg az indexoldalt a Dreamweaverben. Most mentse el a parancs futtatásával Fájl (Fájl) | Mentés másként (Mentés másként), de más néven. Tegyük fel, hogy a második oldalt hívják meg Államok(cikkek). Tehát mentse el az indexoldalt állapotként.
Most már van két egyforma ikeroldala, különböző névvel. De miért kell feltétlenül kettő? azonos oldalak, bár más néven? Szerintem abszolút semmit.
Ezért a Dreamweaver bezárása nélkül módosítsa az új oldalt, amelyet alapértelmezés szerint meg fogok hívni Államok. Illessze be az összes képet, írja be a szöveget... Valósítsa meg elképzeléseit erről az oldalról. Persze lehet, hogy eleinte csak pár bekezdés lesz, de ez csak az első lehetőség?
Kész? Aztán megyünk a Oldal tulajdonságai. Emlékszel még, hogyan készült? Menü parancs Módosítás | Oldal tulajdonságai vagy billentyűparancsot
felirat mellett címírd be az oldalad címét. Ebben az esetben a cikkek. Azt is beírhatja, hogy "webhely neve > cikkek" vagy fordítva, "cikkek > webhelye neve".
Egyébként van címe a főoldalnak? Egyáltalán mi az a címsor? Ez az, ami megjelenik a böngészőablak legtetején, amikor megtekint egy oldalt.
Ennyi, elkészül a második oldal. Mielőtt rátérnénk az összes többi oldal létrehozására, megmutatom, hogyan kapcsolhatunk össze két már létrehozott oldalt (indexet és állapotokat) hiperhivatkozásokkal.
Internet-felhasználóként bizonyára többször is találkozott már hivatkozásokkal. Az egész internet belőlük áll! Nehéz elképzelni a létezését a szinte minden oldalon található linkek nélkül.
A látogatóinak valahogy át kell lépniük az egyik szakaszból a másikba. És hogyan lehet ezt linkek nélkül csinálni?
Most már végrehajthatja a menüparancsot Módosítás | Link létrehozása (hivatkozás létrehozása)(megnyílik egy párbeszédpanel), vagy nyissa meg kedvenc Tulajdonságok panelünket.
Ha a második lehetőséget választotta, akkor figyeljen a mezőre Link (link). A jobb oldalon találunk egy mappaképet tartalmazó gombot Keresse meg a fájltés kattintson rá.
Megnyílik egy párbeszédpanel Válaszd ki a fájlt, ahol ki kell választani azt a fájlt, amelyhez a hivatkozás vezet.
Kattintson az OK gombra, mentse el az oldalt, és nyissa meg egy böngészőben. Nézzük meg, hogyan működik a link. Ha mindent helyesen csinált, akkor kattintás után a kívánt oldalra kerül. Ebben az esetben a főoldalról a Cikkek oldalra. Ez ilyen? Tehát sikeresen teljesítette a feladatot!
A hiperhivatkozások a semmiből is létrehozhatók anélkül, hogy először ki kellene választani egy szót vagy kifejezést. Lap megnyitása Gyakori eszköztár Beszúrás. Az első gomb az Hiperhivatkozás (Hiperhivatkozás).
Ha rákattint, megnyílik egy párbeszédpanel Hiperhivatkozás (Hiperhivatkozás).
Terület Link (link) már tudja, ennek annak az oldalnak az URL-jének kell lennie, amelyre hivatkozik. A jobb oldali gombra kattintva Tallózás a mappa képével megnyílik egy ablak Válaszd ki a fájlt.
Ügyeljen a beviteli mezőre Cím. Itt adhat meg magyarázó szöveget, amely akkor jelenik meg, ha a hivatkozás fölé viszi az egérmutatót. Ez a mező elég tágas, több mondat is beírható.
A létrehozott hivatkozás címének megváltoztatásához kiválaszthatja azt, és javíthatja a mezőben megadott értéket Link panelek Tulajdonságok. Vagy hajtsa végre a menüparancsot Módosítás | Link módosítása amely ablakot nyit Válaszd ki a fájlt amelyben ki kell választani új fájl A, amely tartalmazza a szükséges oldalt.
Az egyszerű szöveges hivatkozások mellett levélhivatkozást is létrehozhat a Dreamweaverben. A levélhivatkozás olyan hiperhivatkozás, amely nem egy másik oldalra vagy webhelyre, hanem a megadott címre hoz létre átmenetet Email. Általában az ilyen hivatkozásokat a webhelyeken használják létrehozásra Visszacsatolás látogatókkal.
Mindkét módszer megnyit egy párbeszédpanelt E-mail hivatkozás (Link e-mail).
Kattintson az OK gombra, és nézze meg, mi történik.
Az oldalon azon a helyen, ahol a kurzor volt, megjelenik a Szöveg mezőbe beírt szöveg. Úgy fog kinézni, mint egy normál szöveges hivatkozás. Nyissa meg az oldalt egy böngészőben, és kattintson a hivatkozásra. Meg kell nyílnia egy szabványos e-mail program ablakának.
Folytatjuk a Dreamweaver programban az egyoldalas lap létrehozásáról szóló cikksorozatot, és ebben a következő cikkben egy egyoldalason alapuló html sablont fogunk megvizsgálni.
Html sablonunkat a legegyszerűbb „tölcsér” kész mintája alapján készítjük el a potenciális forgalmazók (ügyfelek) vagy előfizetők vonzására.
Az utolsó „Hogyan készítsünk saját weboldalt a Dreamweaverben” cikkben egy kicsit tanulmányoztuk a Dreamweaver programot, és azon keresztül készítettük el az első html oldalunkat.
Ha arról beszélünk, hogy miért indítottam el ezt a témát (az egyoldalas lapok létrehozásának témája vagy, ahogy mondják, egy tölcsér létrehozása a potenciális ügyfelek, forgalmazók vonzására, akkor ...
Az a helyzet, hogy többször is találkozom azzal, hogy hány ember egyszerűen nem érti a nyilvánvalót. Pontosan az a tény, hogy a minőségi egyoldalas oldalak létrehozásához és a vonzerőrendszer ily módon történő kialakításához nem is kívánatos, hanem egyszerűen az elrendezési nyelveken kell eligazodni, a legegyszerűbb html-t készíteni. sablont, és ha szükséges, végezzen további módosításokat rajta.
Nem kell mindent tökéletesen tudnod. Csak tudnod kell, mire van szükséged a problémáid megoldásához. És amint érti, az egyik feladat az, hogy erős készségekkel rendelkezzen az egyoldalas lap létrehozásában. Hozd ezt a képességet arra a pontra, hogy bármikor létrehozhatod azt a html-sablont, amelyre szükséged van bármilyen célra.
Ez lehet egyoldalas HTML-sablon, hírlevél-kiadás, névjegykártya-oldal, értékesítési oldal, valamint html-sablon különféle egyedi beillesztésekhez az Ön webhelyén.
Bármit is mondanak, a hálózati vagy az információs termékek értékesítésén alapuló üzletének műszaki összetevője nagyon fontos.
Ahogy az előző cikkben mondtam, jelenleg nagyon sok szolgáltatás létezik egyoldalas webhelyek létrehozására, amelyek különféle technológiát kínálnak html létrehozása sablon.
Azonban, először, az ilyen szolgáltatások elavulnak, és idővel már nem felelnek meg a modern technológiák által támasztott követelményeknek.
Másodszor, ha gyenge vagy egyáltalán nem orientálod a html elrendezést, akkor nagyon nehéz lesz módosítani azokon a szolgáltatásokon, amelyekre szükséged van. Ha azonban létfontosságú az affiliate konverziójának növelése, akkor egyszerűen szüksége van egy html-sablon létrehozásához.
Harmadszor, - ha csak felületesen tanulmányozza ezt a témát, akkor személyisége, stílusa szenved, és ennek következtében - Az Ön márkája.
Így aztán kiderül, hogy sok embert „elvezetnek” különféle termékekhez, vásárolnak különféle csomagokat, szolgáltatásokat, lemásolják azt, ami sok esetben nem működik, aztán csodálkoznak, miért van olyan kevés megtérülés a vállalkozásukból.
A probléma az, hogy az emberek még az ilyen termékek megvásárlása után is különféle problémákkal szembesülnek. buktatók", adja fel, és ennek eredményeként "dobja" mindezt anélkül, hogy kísérletet tenne a kudarcok valódi okainak kiderítésére.
A legérdekesebb az, hogy ezek a hibák és meghibásodások inkább a műszaki komponenshez kapcsolódnak. html elrendezés, a tanulmány a lépcsőzetes stíluslapok (css), és azt is megérteni, hogy mi a belső a létrehozott html oldalak.
Hozzon létre egy helyi szervert, és készítse elő a terepet az első html-sablon létrehozásához
Tehát kezdjük el elkészíteni az első html sablonunkat a Dreamweaver programban.
Az utolsó videóban és cikkben megismerkedtünk a Dreamweaver programmal, illetve azt is megtanultuk, hogyan illeszthetünk be több elemet (vagy ahogy mondani szokás, blokkokat) a legegyszerűbb html sablonunkra.
Létrehoztunk egy speciális mappát is, ahová a munkához szükséges fájlokat helyeztük el.
Most megtanuljuk, hogyan hozhatunk létre egy bonyolultabb dolgot - egy helyi szervert. Erre azért van szükség, hogy az Internet segítsége nélkül is elkészíthessük, testreszabhassuk és tesztelhessük elkészített html sablonjainkat.
Azok. alkotás közben helyi szerver egy virtuális partíció (lemez) jön létre a merevlemezen, amely utánozza az internetet. Ennek megfelelően, amikor egy helyi szervert telepítünk a merevlemezére, a html oldal elérési útja úgy fog kinézni, mintha az interneten lenne.
Helyi szerverként létrehozni a mi sablon html"Denwer"-t fogjuk használni.
Csak egy kicsit meg akarlak állítani. A Denwernek számos módosítása van, és számos kiegészítés van hozzá. Ezért, ha a fő oldalra megy a letöltéshez, akkor bár ez elég lesz a feladatainkhoz, azt javaslom, hogy pontosan azt a verziót és összeállítást töltse le link, amelyre alább található.
Ennek az összeállításnak van egy nagyon fontos összetevője - a "Zend Optimizer", amelyre a jövőben szükségünk lesz egy nagyon fontos szkript konfigurálásához, amely növeli html-oldalai konverzióját.
Helyi szerver telepítéséhez a merevlemezre egyszerűen futtassa futtatható fájlés kövesse a képernyőn megjelenő utasításokat.
A helyi szerver telepítésével és konfigurálásával kapcsolatban részletesebben elmondtam és megmutattam egy speciálisan létrehozott videós oktatóanyagban.
Html sablon példa szerint
Az általunk figyelembe vett html sablon a legegyszerűbb, azonban jelenleg az ilyen egylapozók konverziója még mindig meglehetősen magas. Ezért nyugodtan közzétehet ilyeneket html nézet sablont a webhelyén.
Mire kell figyelni…
Igyekeztem úgy elkészíteni a leckét, hogy ne legyen nehéz számodra, mert. Megértem, hogy sokan még mindig nem ismerik túl jól a html elrendezési nyelvet, valamint a lépcsőzetes stíluslapokat. Ezért a lecke részletesen elmagyarázza, hogy mely gombok segítségével készítheti el egyoldalas webhelyét ezen ismeretek és készségek nélkül.
Általában nézze meg a leckét, az összes szükséges fájlt (ha még nem töltötte le), és hozzon létre egy oldalt vizuális szerkesztő html Dreamweaver.
P.S. A leckében van egy kis hiba, amit a videó elkészítése után vettem észre. Lásd a videót a magyarázatért.
P.S. A következő cikkben egy videót készítek, amelyben bemutatok egy "fejlett" módszert egy egyoldalas webhely létrehozására a legnépszerűbbek alapján html sablonok Runet.
Üdvözlettel: Andrey Averkov
#averkovteam #mlm #hálózati marketing #munkaotthon #toborzás #mlmbusiness #szociális hálózatok
Weboldalak és weboldalak
Mi az a weblap? Erre a kérdésre sokan tudnak válaszolni. Ez egy internetes dokumentum, amelyet a WWW szolgáltatáson keresztül az interneten keresztül terjesztenek. Közösen szólva pedig ezt mutatja a weblapok megtekintésére szolgáló kliensprogram - egy webböngésző (böngésző) az ablakában.
TÓL TŐL műszaki pont A weblap egy egyszerű szöveges fájl, amely bármilyen szövegszerkesztőben létrehozható, például a Jegyzettömbben, amely a Windows alapfelszereltsége. Ez a fájl tartalmazza a weboldal tényleges szövegét, és ugyanahhoz a szöveghez különböző formázási parancsokat. A formázási parancsok meghívásra kerülnek címkéket, hanem leírja sajátos nyelvezetüket HTML(HyperText Markup Language), hipertext jelölőnyelv.
A következő lépés annak kiderítése, hogy milyen HTML-programokkal írják ezeket a weboldalakat. Igen, mert hétköznapiak szöveges fájlok, amelyek HTML kódot tartalmaznak, normál Jegyzettömbben vagy hasonló programban írhatók.
Miért van szükségünk webszerkesztőkre?
A HTML nyelv a trükkös név ellenére nagyon egyszerű. És ezzel szó szerint öt perc alatt megírhat egy egyszerű weblapot néhány bekezdésnyi szöveggel, és ennek az időnek a nagy részét magának az oldalnak a szövegének beírásával kell tölteni, és nem HTML címkék. Tehát mi a probléma?
Sokan nem ismerik a HTML-t, sőt, nem is akarják megtanulni, vagy nincs rá idejük. De weblapokat akarnak létrehozni. Ezért, különösen számukra, a programozók számos programot írtak weboldalak létrehozására.
Az egyik ilyen programot a cég fejlesztői írták Macromediaés felhívott Macromedia Dreamweaver. Első változata még 1998-ban jelent meg; A 8-as verzió jelenleg elérhető.
A Dreamweaverrel fogunk dolgozni.
álomszövő- a WYSIWYG elvén működő vizuális webszerkesztők legtipikusabb képviselője (What You See Is What You Get, "What you see is what you get"). Ugyanakkor a felhasználó formázza a szöveget, és azonnal látja munkája eredményét a szerkesztő ablakban.
Léteznek nem vizuális webszerkesztők is (más néven HTML szerkesztők), amelyek más elven működnek. Közvetlenül magával a HTML-kóddal dolgoznak, miközben különféle lehetőségeket biztosítanak a felhasználó számára további jellemzők: címkék gyors beillesztése, paramétereik kényelmes beállítása, előre definiált sablonok készlete a weblapok szabványos elemeinek létrehozásához stb. Ebben az értelemben hasonlóak a Jegyzettömbhöz, de sokkal fejlettebbek.
Itt el kell mondani, hogy szinte minden komoly webszerkesztő rendelkezik magának a HTML-kódnak a szerkesztési módjával (vagyis tulajdonképpen hibrid webszerkesztőkről van szó). Ezért ma már szinte mindig, amikor azt mondják, hogy "vizuális webszerkesztő", csak hibrid programokat értünk alatta. Természetesen ezek közé tartozik álomszövő amellyel eljött az ideje, hogy jobban megismerjük egymást.
Bevezetés
A program első indításakor a rendszer felkéri a munkakörnyezet kiválasztására. Hozzunk létre egy új dokumentumot" Fájl->Új"(Fájl-új)
Ezen a lapon hozzon létre egy új dokumentumot az Alapoldal (Alapoldal) -> HTML kiválasztásával.
Megnyílik előtted működő ablak programokat.
És az újonnan létrehozott oldalra írjon valami orosz-angol szavakból álló szöveget. Például: " hasznos információ a DreamWeaverrel való együttműködésért".
Ezután mentse az oldalt a " paranccsal Fájl -Mentés másként", de ne zárja be magát az oldalt a szerkesztőben, és most nyissa meg az újonnan létrehozott oldalt a böngészőben - mit kapott? Az én esetemben egy ilyen felirat jelent meg
Ezért az első dolog, amellyel meg kell tanítani a cirill betűt a DreamWeaver számára. Főmenü Szerkesztés(Szerkesztés) - preferenciák(Beállítások) a megnyíló párbeszédablakban válasszon ki egy kategóriát Új dokumentum(Új dokumentum), és azon a lapon az "Alapértelmezett kódolás" listában válassza a "Cirill (Windows-1251)" lehetőséget. Ezután a párbeszédpanel bal oldalán válassza a " Betűtípusok(Betűtípusok)" és a listában " Betűtípus beállítása(Betűkészlet-beállítások)" válassza a "Cirill" lehetőséget.
Itt is testreszabhatja a szöveg megjelenítését (betűtípusok kiválasztása és a betűk méretének beállítása), amely alapértelmezés szerint kerül felhasználásra. A befejezéshez kattintson a " rendben". Ezután hozzon létre egy másik oldalt, írjon be egy szöveget, mentse el " Fájl - Megment" és nyissa meg a mentett oldalt. Most minden rendben van, DE! Minden olyan weboldal, ahol a meta tag nem határozza meg kifejezetten a "charset = windows-1251" kódolást, a "cirill (ISO-8859-" kódolású) lesz "desztillálva". 5)"
Ennek elkerülése érdekében nyissa meg a következő fájlt: (A meghajtó\ Program fájlok\ Macromedia\ Dreamweaver 8\ Configuration\ Encodings\ EncodingMenu.xml) és a kódolások listájában keresse meg a négy egymást követő cirill kódolást
|
Asztal 1
Szerkessze ezt a fájlt a Jegyzettömbben, cserélje fel az "ISO-8859-5" és a "Windows-1251" kódolást úgy, hogy a cirill kódolási sorrend a következő legyen
2. táblázat
|
Mentse el a változtatásokat a fájlban, így a program orosz nyelvre való tanításának folyamata befejezettnek tekinthető.
Felület
Most térjünk vissza a program munkakörnyezetéhez.
A munkakörnyezet megjelenítési módjának váltása (három mód van: Kód(A kód), tervezés(tervezés) és kód és design az eszköztáron vagy a főmenüben" Kilátás"(Kilátás).
Válaszd ki ezek közül a módok közül azt, amellyel tudsz/tudsz dolgozni, bár célszerű elhagyni a "Kód és Tervezés" menüpontot, ekkor a munkaablak két részre oszlik, és látni fogja magát a HTML kódot is. és az oldalt WYSIWYG módban.
A dokumentumablak felett, alatt és jobbra panelek csoportjai vannak - kis ablakok, amelyek vagy "ragaszthatók" a főablak egyik szélére, vagy szabadon "lebeghetnek" mellette. Az egyes panelcsoportok tetején található a címe – egy „megemelt” kék sáv, amelyen a panel neve szerepel.
A legtöbb panelnek van egy úgynevezett kiegészítő menüje. Megnyílik, ha rákattint egy kis gombra a csoport jobb felső sarkában, amelyben ez a panel található, és egy három pozícióból álló listát és egy lefelé mutató kis nyilat ábrázol. (Tömörített állapotban ez a gomb nem látható.)
A panelcsoportok mindig a dokumentumablak felett helyezkednek el, még akkor is, ha Ebben a pillanatban inaktív. Ez azért történik, hogy mindig elérjük őket, függetlenül attól, hogy éppen melyik ablak van aktív.
Ha valamelyik csoportot el akarjuk távolítani, akkor a további menüjének megnyitásával és a Panelcsoport bezárása menüpont kiválasztásával "kimozdíthatjuk" a dokumentumablakból, vagy teljesen bezárhatjuk. Most figyeljünk a főablak jobb szélére, ahol sokféle panelcsoport található. Ez az úgynevezett dokk – egy kifejezetten számukra kialakított terület. A dokkolót a főablak többi részétől egy vastag szürke sáv választja el, amelyet az egérrel húzva átméretezhetjük a dokkolót. A dokkoló meglehetősen szembetűnő gombjára kattintva is gyorsan elrejthetjük mindenki elől.
Három másik Dreamweaver panel érdemel külön említést. Abban különböznek a hagyományos panelektől, hogy állandó méreteik vannak, és mindegyik külön csoportot alkot.
- objektum eszköztár
- dokumentum eszköztár
a szabványos eszközkészlet, amely hozzáférést biztosít a fájlokkal végzett műveletekhez (weblap létrehozása, megnyitása és mentése), a vágólap stb., kezdetben el van rejtve.
Ezeknek a paneleknek a megjelenítéséhez a főmenü képernyőjén " Kilátás(Kilátás)- Eszköztárak(Eszköztárak)” (a megfelelő panelek (Insert, Document, Standard).
Ha több weblapot nyitunk meg, nagyon nehéz lesz megérteni őket - a dokumentumablakok átfedik egymást, és sok időbe telik, amíg a megfelelő oldalra jutunk.
Ha az egyik dokumentumablakot teljes képernyőre (pontosabban a teljes főablakra) bővítjük, akkor az ablakok közötti váltás egyszerűbbé válik. Ebben az esetben a dokumentum eszköztárban a megnyitott dokumentumablaknak megfelelő fülek lesznek.
Ha egyszerre két vagy több ablakot kell szem előtt tartani, használjuk az „Ablak - Lépcsőzetes, Mozaik vízszintesen vagy Mozaik függőlegesen” menüpontokat. Az első mindent "terít". nyitott ablakok dokumentumokat a főablakban egy "veremben", így láthatjuk a címüket és tartalmuk egy részét. A második és harmadik pont a főablakban a dokumentumablakok "mozaikját" helyezi el, hogy ne fedjék egymást. Ezenkívül a második pont vízszintesen, a harmadik pedig függőlegesen helyezi el a „mozaikot”.
Webhely meghatározása a Dreamweaverben
Mielőtt kezelné webhelyét, regisztrálnia kell a Dreamweavernél.
Új webhely létrehozásához használja az elemet új oldal(Új oldal) menüben webhely(Weboldal). A kiválasztás után egy párbeszédablak jelenik meg a képernyőn. A webhely meghatározása(Webhely meghatározása), amely két lapból áll.
Ha meg van nyitva egy lapon Alapvető(Alap), váltson a lapra Fejlett(Opcionális) – több lehetőséget biztosít a webhely testreszabásához.
Amint láthatja, ennek az ablaknak a bal oldalán található a második szintű lapok listája. Váltás lapra helyi információ(Helyi információ) ,
ahol a webhelyének számítógépe merevlemezén található fájljaira vonatkozó információk vannak beállítva (helyi példány
webhely).
A beviteli mezőben webhely neve(Webhely neve) Adja meg a webhely nevét. Csupán arra szolgál, hogy kényelmesebbé tegye az Ön számára ezzel az oldallal való munkát. Nevezze el a webhelyet "proba".
A beviteli mezőben Helyi gyökérmappa(Helyi gyökérkönyvtár) adja meg a webhely helyi példányának gyökérmappájának elérési útját. A beviteli mezőtől jobbra található mappa ikonra kattintva is kiválaszthatja a kívánt mappát a képernyőn megjelenő párbeszédpanelen.
Jelölőnégyzet Helyi fájllista automatikus frissítése(A helyi fájllista automatikus frissítése) engedélyezi vagy letiltja automatikus frissítés fájlok listája a webhely helyi példányában. Ha engedélyezve hagyja, a webhelyfájlok listája mindig automatikusan frissül, amint a Dreamweaver aktiválódik. Ha kikapcsolja a fenti jelölőnégyzetet, akkor magának kell frissítenie a webhelyfájlok listáját, de a Dreamweaver gyorsabban aktiválódik.
A beviteli mezőben Alapértelmezett képmappa(Alapértelmezett képmappa) Adja meg a mappa nevét, amely alapértelmezés szerint tartalmazza a webhely weboldalain elhelyezett összes grafikát. A beviteli mező jobb oldalán található mappa ikonra kattintva is kiválaszthatja a kívánt mappát a képernyőn megjelenő párbeszédpanelen. Ebbe a mezőbe írja be a „pic” kifejezést.
A beviteli mezőben HTTP-cím adja meg webhelye webcímét. Ne írjon be semmit ebbe a mezőbe.
Ha végignézed a jobb oldali összes kategóriát, akkor nagyon sokféle beállítási lehetőséged lesz, de ezek megismeréséhez még néhány előadásra lesz szükséged, de nincs annyi időnk.
A " gomb megnyomása után Kész” a panelen Fájlok megjelenik a webhelyfájlok listája, kezdetben nincsenek fájlok, de munka közben megjelennek.
Szinte minden oldal alapja a szöveg. Hozzon létre egy új oldalt (Fájl - Új), és írjon be bármilyen szöveget.
A szöveg beírása a billentyűzet segítségével történik (mire gondolsz?), míg a Dreamweaver önállóan bontja sorokra a szöveget.
A szövegkurzor, vagyis a villogó függőleges sáv, amely megmutatja, hogy az általunk beírt szöveg hol fog megjelenni, a nyílbillentyűk segítségével minden irányba mozgatható.
És akkor bármelyik böngészőben, a címében olvasható lesz
Mentse el ezt az oldalt az Ön által választott névvel. A webhelyek vagy könyvtárak fő oldalai nevet kapnak: index.htm , index.html , index.php és így tovább.
Egész bekezdések formázásához kényelmesebb a legördülő lista használata " Formátum(Formátum)" a panelen " Tulajdonságok(Lehetőségek)".
Ha ez a panel nincs megnyitva, kattintson a " szó melletti háromszögre Tulajdonságok(Lehetőségek)".
A példa példákat ad a bekezdések formázására, maga a folyamat meglehetősen egyszerű: kattintson bármelyik bekezdésre, és a listában " Formátum(Formátum)" válasszon egyet a hat lehetőség közül.
Ha nem bekezdéseket, hanem csak kiválasztott szavakat, kifejezéseket vagy szimbólumokat szeretne formázni, akkor a többi ikon jól fog jönni.
A karakter méretének beállításához használja a " méret(A méret)".
Kiválaszthatja a szöveg betűtípusát - lista " AlapértelmezettBetűtípus" . A különböző karakterekhez vagy szavakhoz pedig különböző betűtípusokat állíthat be.
Ezzel a 4 gombbal lehet szöveget igazítani. Érdekes részlet: ha újra rákattint a lenyomott gomb-kapcsolóra, az "kicsavarodik". Ebben az esetben a bekezdés az alapértelmezett igazításra lesz állítva, általában balra.
- a bal szél mentén;
- a központban;
- a jobb szél mentén;
- szélességében.
A bekezdés behúzásának beállításához (növeléséhez/csökkentéséhez) használhatja az elemeket
Minden alkalommal, amikor rákattint a "Behúzás" elemre, a behúzás növekszik, és ha rákattint az "Outdent" elemre, ellenkezőleg, csökken.
Tegyünk néhány szót félkövéren és dőlt betűvel a weboldalunkon. Két stílusmódosító gomb pedig ebben segít nekünk. De engedélyezni vagy letiltani szöveg aláhúzása vonallal, akkor is használnunk kell a kapcsolópontot Aláhúzás almenübe stílus(Stílus) menü Szöveg(Szöveg) ill helyi menü. Ehhez a művelethez nincsenek gombok vagy billentyűkombinációk.
Bekezdés |
Leírás |
telex |
Szövegkimenet a számítógép kimeneti eszközéről ("TTY") |
Hangsúly |
Normál dőlt szöveg |
Normál félkövér szöveg |
|
Töredék forráskód programok bármilyen programozási nyelven (parancsok, változónevek, kulcsszavakat stb.) |
|
változó |
A szövegben a programváltozók nevének jelzésére szolgál bármely programozási nyelvben |
Bármely program által a felhasználó számára megjelenített információ |
|
Billentyűzet |
A szöveg, amelyet a felhasználónak be kell írnia a billentyűzetről |
Idézet |
|
Meghatározás |
Bármely kifejezés meghatározása |
Szövegszerkesztők számozott és pontozott listák. A számozott (rendezett) listák tételeit, mint tudja, sorozatszámok jelzik, a felsorolásjeles (sorrend nélküli) listák tételeit pedig valamilyen ikonok jelzik. Hozzunk létre egy ilyen listát.
A kiválasztott sorok listává alakításához a tulajdonságszerkesztő váltógombjait használjuk.
Helyezze a kurzort a lista bármely elemére, a helyi menüben válassza ki a " Lista – Tulajdonságok” és megjelenik egy párbeszédpanel. Tulajdonságok listája, amellyel a lista néhány paraméterét beállíthatjuk. Módosítsa a felsorolásstílusokat vagy a számozást (például: használjon betűket számok helyett - a b c d;), és a számozott listáknál állítsa be azt a számot, amelytől a számozás kezdődjön. Beviteli mezők " Lista típusa" (felső három) - - lehetővé teszi a teljes lista típusának beállítását, míg a "Lista elem" beviteli mezők (két alsó mező) - csak a lista azon sorára vonatkoznak, amelyen az egérkurzor éppen található.
A szöveg a szivárvány összes színére festhető-:) Ehhez válasszuk ki a szöveg bármely részét és kattintsunk a gombra.
A megnyíló párbeszédpanel a színpalettát mutatja.
A palettáról bármilyen színt kiválaszthat a pipetta segítségével, a paletta felső ablaka annak a területnek a színét jeleníti meg, ahol a cseppentő éppen található.
Sőt, nem csak a paletta segítségével választhat színt, hanem úgy is, hogy a szemcseppentőt mozgatja a dokumentumban a látható szerkesztőablakban.
És amikor rákattint a panel jobb felső sarkában lévő háromszögre " Paletta" meg fog hívni egy másik almenüt, ahol megváltoztathatja a palettákat.
Gyakran előfordul, hogy be kell illesztenie egy dokumentum létrehozásának vagy utolsó szerkesztésének dátumát, ebben a " gomb segít. Dátum(Dátum)" vagy (Beszúrás (Beszúrás) - Dátum (Dátum)). A megnyíló párbeszédpanelen
Beállíthatja a dátum megjelenítési opciót, valamint, ha kívánja, a hét napját és az időt. Ha bejelöli a " frissítésAutomatikusantovábbMegment" - akkor az oldal minden frissítése/szerkesztése után a dátum frissül.
Lehetőséged van beszúrni is Különleges szimbólumok a "Szöveg" fül segítségével.
Másik hasznos funkció egy HTML kódtisztító. Meghívhatja a "" paranccsal parancs - tisztaFelXHTML"és ez a párbeszédablak megnyílik előtted.
Néha el kell különíteni az információkat, és ehhez vízszintes vonalat helyeznek el. A panelen" Beszúrás" lap " HTML" gombot. Nál nél vízszintes vonal Szélesség, magasság és szín tulajdonságok vannak. A szélesség és magasság beállításához a panelen " Tulajdonságok” meg kell adnia a szükséges értékeket a mezőkben Wés H.
A vonal színének beállításához válassza ki a vonalat, és a helyi menüben Címke szerkesztése (Címke szerkesztése) ...
A párbeszédpanelen válassza ki a kívánt vonalszínt.
Kommunikáció és navigáció
Számos módja van a hipertext hivatkozások létrehozásának különböző típusok fájlokat. Kezdje a webhelynavigáció létrehozásával. A fájlok közötti kapcsolat létrehozásához meg kell adni a pontos elérési utat, amelyen keresztül eljuthat a kívánt dokumentumhoz.
Az elérési út lehet teljes – internetcímmel kezdve (például: http:// Dreamweaver/index.htm), vagy gyökérfüggetlen (../index.htm). Nézzük meg, hogyan valósul meg a DreamWeaverben a dokumentumok közötti kapcsolatok létrehozásának folyamata.
Ahhoz, hogy bármilyen szóból vagy több szóból hiperhivatkozást készítsünk, elég egy internetcímet "csatolni". Az egyértelműség kedvéért tegyük ezt – a "Macromedia DreamWeaver. Workshop" szövegben jelölje ki a "Macromedia DreamWeaver" kifejezést. és a "Tulajdonságok" fül "Link" mezőjébe írja be a kézikönyv kezdőcímét (http://Dreamweaver/), majd nyomja meg az "Enter" gombot.
Mint látható, a "Macromedia DreamWeaver. Workshop" szavak színe megváltozott, és hiperhivatkozássá vált. Hiperhivatkozás eltávolításához egyszerűen törölje az internetcímet a "Tulajdonságok" lap "Link" mezőjében, majd nyomja meg az "Enter" billentyűt. Most menjünk tovább a gyökérfüggő útvonalra.
A „Macromedia DreamWeaver” kijelölésével kattintson a mappa ikonjára
és a megnyíló párbeszédablakban megadhatja, hogy a hivatkozásra kattintva melyik oldalra kerüljön. Sőt, alapértelmezés szerint megnyílik az a mappa, ahol az oldal található, amelyről linket szeretne adni. Mivel mind ez (az aktuális oldal, amelyre hiperhivatkozást szeretnék adni), mind az oldal, amelyre ez a hiperhivatkozás irányít, ugyanabban a mappában található, elegendő, ha az egérrel kiválasztja a kívánt oldalt, és rákattint az "OK" gombra.
Most helyezze az egérmutatót erre a linkre, és bontsa ki a listát " Cél"lapok" Tulajdonságok".
Ebben a listában négy elem található, és esetünkben csak kettő fog működni. Az első "_self" elem - azt az oldalt jeleníti meg, amelyre a hiperhivatkozás mutat ugyanabban a böngészőablakban (ez a mód alapértelmezés szerint be van állítva), a második - "_blank" - pedig új ablakban nyitja meg az oldalt.
A többi "Cél" menüpontra szükség lesz a keretekkel való munkához.
Amikor létrehoz egy webhelyet, a webhely kezdeti mappája a gyökérmappa, és már tartalmazza különböző fájlokatés egyéb almappák.
Ha megnézi ennek a hiperhivatkozásnak a HTML-kódját, látni fogja, hogy ez így néz ki: ../index.htm. Sőt, ez a két pont a kötőjel előtt azt mondja a böngészőnek, hogy „másszon” egy szinttel feljebb a címtárfán. Két szinttel feljebb - ../../index.htm és így tovább.
Ha postai címet szeretne beszúrni, akkor a "Tulajdonságok" lap "Link" mezőjében meg kell adnia egy e-mail címet (például: mailto:[e-mail védett] dvpion.ru), minden postacímre mutató hivatkozás a következővel kezdődik mailto:, bár ha bizonyos körülmények miatt nem szeretné beírni a " mailto:", akkor a "Közös" fülön nyomja meg a gombot, ahol a "Szöveg" mezőbe írja be a hivatkozás szövegét, az "E-mail" mezőbe pedig az e-mail címet. Mindkét esetben a a hatás ugyanaz lesz.
Horgonyok
A hivatkozások másik típusa a "horgony". Az ilyen típusú hivatkozások használata különösen akkor hasznos, ha egy oldalon nagy mennyiségű információ található.
Állítsuk be az átmenetet az aktuális oldal tetejére. Első lépésként magát a horgonyt kell beállítani az oldalon.
És nyomja meg a gombot a "Közös" fülön. A megnyíló párbeszédpanelen adja meg a horgony nevét – az „új_oldal_11_teteje” nevet.
Most már csak be kell állítani egy linket ehhez a horgonyhoz. Ehhez jelölje ki a szöveget, és a lap "Link" mezőjében " Tulajdonságok" írja be az erre a horgonyra hivatkozó hiperhivatkozás címét: #new_page_11_top
A horgony neve előtti hash jel (#) az a parancs, amellyel a böngésző "ugorjon" a new_page_11_top nevű jelzésre.
Ha egy másik oldalon található horgonyhoz szeretne hivatkozni, adja meg magának a horgonyoldalnak az elérési útját. Például egy „horgonypéldákkal” ellátott oldalra szeretném irányítani a látogatókat. Mivel a példákkal ellátott oldal neve az példák.htmés annak a horgonynak, amelyre át akarok irányítani, a neve van 02
, akkor a hivatkozás így fog kinézni: (examples.htm#02).
Grafikával való munka
Mivel foglalkoztunk korábban? Weboldalak szöveges elemeivel. Minden szövegelem a megfelelő HTML nyelvi címkék használatával jön létre.
Többek között beállíthatja oldala hátterét. Ha csak egy színt szeretne beállítani háttérként, akkor ehhez használja a "Háttér" elemet (az elemhez tartozó mezőre kattintva a bal egérgombbal). A megnyíló palettán pedig válassza ki a kívánt színt. A háttérképet úgy állíthatja be, hogy kiválaszt egy fájlt ugyanazon párbeszédpanel megfelelő mezőjében.
Grafika beillesztése
Helyezzük a kurzort a kívánt helyre, és nézzük meg a „ Gyakori"objektum eszköztár - van egy gomb" Kép(Kép)". Kattintson rá, és a képernyőn megjelenő menüben válassza ki az elemet Kép. Ön is használhatja az elemet Kép menü Beszúrás vagy kattintson
A mappák legördülő listája és a fájlok listája lehetővé teszi a kívánt mappa és fájl kiválasztását.
A beviteli mezőben Fájl név megjelenik a kiválasztott fájl neve (vagy mi magunk is megadhatjuk). Egy legördülő lista Fájltípus lehetővé teszi számunkra, hogy kiválasszuk, milyen típusú fájlokat kell keresnünk. Mindez a szabványból ismerős számunkra párbeszédpanelek felfedezése és megőrzése Windows fájlok. Az egyetlen különbség az, hogy az előnézeti ablak a jobb oldalon található. És ha el akarjuk távolítani, tiltsa le a jelölőnégyzetet előnézet képeket. Tehát kiválasztottunk egy fájlt. Marad az OK gomb megnyomása. De a Dreamweaver további információkat kér tőlünk a párbeszédpanel megjelenítésével Képcímke kisegítő lehetőségek attribútumai(A képcímke akadálymentesítési attribútumai)” .
kombinált mező Alternatív szöveg(alternatív szöveg)” ennek az ablaknak a beállítására szolgál az ún helyettesítő szöveg. Ez a lassú kommunikációs csatornák felhasználói számára készült. Miután a webböngésző betöltötte a HTML fájlt a weblappal, a ráhelyezett kép helyett egy megfelelő méretű üres keretet jelenít meg. Amikor a felhasználó az egeret az üres képkeret fölé helyezi, a webböngésző egy kis elemleírást jelenít meg, amely pontosan ezt a helyettesítő szöveget tartalmazza. Ezért ajánlatos mindig ezt a lehetőséget használni.
Valójában a listán Alternatív szöveg bemutatott rövid helyettesítő szöveg. A korlát nem haladja meg az 50 karaktert. Ha bőbeszédesebb helyettesítő szöveget kell megjelenítenünk, akkor azt elmenthetjük egy külön weblapfájlba, majd a beviteli mezőbe írjuk be az internetcímét. hosszú leírás. A mező jobb oldalán található mappa alakú gombra kattintva is kiválaszthatja a kívánt fájlt a párbeszédpanelen. válaszd ki a fájlt. Ha végzett az adatok megadásával, nyomja meg az OK gombot. A Dreamweaver a grafikát a szövegkurzor aktuális helyére helyezi.
Grafikai beállítások
Most mentsük el a kapott oldalt, jelöljük ki a képet, ha nincs kiválasztva, és nézzük meg a tulajdonságszerkesztőt. Mit fogunk látni ott Beviteli mezőkben Wés H lehetővé teszi a kép méreteinek beállítását a szélességének és magasságának manuális megadásával. Ez akkor lehet hasznos, ha a kiemelt kép a webhely kialakításának része; más esetekben kényelmesebb a képméretek beállítása az átméretező fogantyúk egérrel való húzásával.
Valójában, ha grafikus képet helyez el egy weboldalon, a Dreamweaver ezekbe a beviteli mezőkbe helyezi az eredeti szélességét és magasságát. Mint már tudjuk, a webböngésző közvetlenül az oldal betöltése után
üres keretként jeleníti meg a még fel nem töltött képeket. Ha a képméretek kifejezetten be lettek állítva, akkor azok azonnal rákerülnek a keretekre, és az oldaltervezés nem lesz zavarva. Ellenkező esetben a webböngésző az alapértelmezett méretben jeleníti meg a kereteket, és a képek következő betöltésekor a méretük megváltozik, aminek következtében maga az oldal is újrarajzolódik. És ez nagyon kellemetlen.
Beviteli mezők V Spaceés H Spaceállítsa be a kép széle és a körülötte körbefutó szöveg közötti függőleges és vízszintes távolságot. Alapértelmezés szerint mindkettő nulla.
Belépés mező src megadja annak a fájlnak az internetcímét, ahol a grafikus képet tárolják. Tőle jobbra két gomb található. A jobb oldalira kattintva (a mappa képével) megnyílik a párbeszédablak Válassza a Képforrás lehetőséget.
A kép fájlnevét is megváltoztathatjuk, ha jobb gombbal rákattintunk a képre és kiválasztjuk forrás fájl a helyi menüben, vagy egyszerűen kattintson duplán a képre. Ezt követően egy párbeszédpanel jelenik meg a képernyőn. Válassza a Képforrás lehetőséget.
Belépés mező alacsony src hasonló a terepen src, kivéve, hogy megadja annak a fájlnak a nevét, ahol az ún "piszkozat" kép. A "piszkozat" kép általában kisebb méretű, az alacsonyabb minőség miatt, és ismét az alacsony sebességű kommunikációs csatornák tulajdonosai számára találták ki. A webböngésző először letölti a "piszkozatot", mivel az sokkal kisebb, és megjeleníti az oldalon. És csak ezután, amíg a felhasználó a kész oldalt nézi, a fő kép fokozatosan betöltődik, és felváltja a "piszkozatot".
„Piszkozat” készítése csak akkor javasolt eredeti kép túl nagy a gyors betöltéshez. Ez különösen akkor megfelelő, ha művészi grafikával rendelkező oldalt készítünk.
Belépés mező Határ lehetővé teszi a kép körül megjelenő keret vastagságának pixelben megadását. Alapértelmezés szerint nulla, azaz nincs keret.
kombinált doboz alt beállítja a számunkra már ismert rövid helyettesítő szöveget.
Most nézzük a legördülő listát. Igazítsa. Lehetővé teszi, hogy beállítsuk a kép igazítását, valójában a kép és a szöveg egymáshoz viszonyított helyzetét, amelyben található.
Lista Igazítsa a következő elemeket tartalmazza:
- Alapértelmezett- alapértelmezett hely, általában hasonló az elemhez alapvonal;
- Alapvonal- a kép alja megegyezik a szöveg alapvonala(egy képzeletbeli sor, amelyen a szövegsor található) az a sor, amelyben található;
- Thor- a kép teteje megegyezik annak a sornak a felső részével, amelyben található;
- Középső- a kép közepe egybeesik a szöveg alapsorával;
- alsó- a kép alja megegyezik a szöveg aljával (általában nem ugyanaz, mint alapvonal);
- szöveg felső- a kép teteje megegyezik a szöveg legmagasabb karakterének tetejével (általában nem azonos Thor);
- Abszolút Közép- a kép közepe pontosan egybeesik szöveg középső sora(a vonal közepén áthaladó vonal);
- Abszolút Bottom- a kép alja egybeesik a szöveg legalsó karakterének aljával;
- Bal- a kép a lap bal szélére "nyomódik", jobbra pedig "körül folyik" a szöveg;
- Jobb- a kép az oldal jobb szélére "nyomódik", a bal oldalon pedig a szöveg "körbeteker".
Az utolsó két esetben a kép válik úszó. Webböngésző balra vagy jobbra, körülötte a beillesztett szöveggel. És azon a ponton, ahol a lebegő képet beszúrták, a Dreamweaver egy speciálisat jelenít meg lebegő képjelző. Ez a jelölő csak a webtervező kényelmét szolgálja, és csak a Dreamweaverben; A webböngésző nem jeleníti meg.
Tehát kitaláltuk az ingatlanszerkesztőt. Most állítsuk be a képünk tulajdonságait. A szövegtől való távolságot vízszintesen és függőlegesen 5 pixelre tesszük, igazítás - balra, "alternatív" szöveg - "felugró címke". És mentse el az oldalt.
A kép eredeti méreteinek visszaállításához használhatjuk a tulajdonságszerkesztő W és H beviteli mezői között és azoktól jobbra található Mégse gombot) és a helyi menüt. méret visszaállítása. Ez akkor hasznos, ha sokat torzítottuk őket, és újra akarjuk kezdeni.
Különleges képek
A HTML nyelv és a Dreamweaver nem csak közönséges, hanem speciális tulajdonságokkal rendelkező képeket is lehetővé tesz. azt hiperlink képek, aktív képekés képtérképek. Gyakran használják weboldalakon, ezért meg kell néznünk őket.
Bármilyen kép használható hiperhivatkozásként, csak írja be a webcímet a " Link"panelek" Tulajdonságok".
Ezenkívül megadhat egy hivatkozást egy e-mail címre és egy másik weboldalra is. A második esetben lesz egy lista " Cél"
Egy kép aktívvá tehető, reagálva az egérkurzorral a felette való mozgatásra - Görgetés. Ehhez két képet kell felhalmoznia, amelyek helyettesítik egymást, és a " Gyakori" nyomja meg a megfelelő gombot.
A megnyíló ablakban ki kell töltenie a kötelező mezőket
A terepen kép neve- adja meg az aktív kép eredeti nevét, és a név csak latin betűket (minden aktív képnek betűvel kell kezdenie) és számokat (abszolút arab!-:) tartalmazhat
A terepen eredeti kép- adja meg a fő kép elérési útját, amelyik elsőként töltődik be az oldalon.
A terepen Áthúzó kép- adja meg a "kép - effektus" elérési útját - ez a kép csak akkor jelenik meg, ha az egérmutatót az aktív kép fölé viszi.
Jelölje be a négyzetet Preload Rollover- ebben az esetben mindkét képet azonnal betölti a böngésző, és az effektus azonnal elindul, amikor az egeret ráhúzzuk. Ellenkező esetben (kikapcsolt jelölőnégyzet mellett) ha egy ilyen kép fölé viszed az egeret, akkor a böngésző elkezdi betölteni a második képet... és valami lassú hatás jön létre.
A terepen Altemate szöveg- írjon be egy szöveges megjegyzést, amely akkor jelenik meg, amikor az egeret a kép fölé viszi.
Nos, az Ugrás az URL-hez mezőben - az internetcím.
Térkép képek
A térkép egy tömör kép, amelyen "forró területek" vannak megjelölve, és minden ilyen terület egy hiperhivatkozás, és megfelel a saját internetcímének.
Először helyezze el a képet az oldalra, válassza ki a bal egérgombbal rákattintva és a " Tulajdonságok" a türkiz alakzatok segítségével (a bal alsó sarokban - térképelemek csoportja) válassza ki a "forró terület" kiválasztásának egyik módszerét. jelöljön ki egy kört és egy szabálytalan alakzatot is. Kattintson a négyszögre, és válassza ki azt a területet, amelyen Ön érdekli a.
A kiválasztott forma így fog kinézni:
csak be kell írnia az internet címet a mezőbe Link” (a linkek az Ön webhelyének más oldalaira vagy más webhelyekre mutathatnak, vagy postacímek), válassza ki az egyik elemet a Cél mezőben, és írjon be alternatív szöveget az Alt mezőbe.
A kijelölés után a bal alsó sarokban található nyíl gomb megnyomásával mozgathatja a kijelölt területet.
A szabálytalan alakú figurák kiválasztásához pedig elég a bal egérgombbal kattintani a kijelölendő terület kerületén. Végül adja meg a térkép eredeti nevét a Térkép beviteli mezőben, és kész.
táblázatok
A létrehozás érdekében új asztal, menj a " Commons"panelek" Beszúrás" és nyomja meg a gombot. 
Töltse ki a kötelező mezőket a megjelenő párbeszédablakban.
Sorok- a táblázat sorainak száma
oszlopok- a táblázat oszlopainak száma
asztal szélessége- a táblázat szélessége, és a legördülő menüben meg kell adni a mértékegységeket - százalék vagy pixel.
határvastagság- a táblázat keretének vastagsága pixelben, és ha az értéket nullára állítja, akkor maga a táblázat nem lesz látható az oldalon.
cella kitöltése- behúzási távolság a táblázat celláiban
Cellaköz- távolság a táblázat cellahatárai között
Kapcsolókészlet fejléc(Header) lehetővé teszi, hogy létrehozzunk egy "fejlécet" és a táblázat kiemelt első oszlopát. A készletben elérhető választógombok: Nincs (nincs fejléc és első oszlop kiválasztva), Bal (első oszlop kijelölve), Felső (fejléc) és Mindkettő (fejléc és első oszlop is kijelölve).
A "fejlécet" és a kiválasztott oszlopot alkotó cellák fejléccellái lesznek, és a bennük beírt szöveg automatikusan középre és félkövérre kerül.
A beviteli mezőben Felirat(Cím) Adja meg a táblázat nevét. Ez a név a létrehozott táblázat fölé kerül.
Legördülő lista Felirat igazítása(Igazítás) lehetővé teszi a név helyének és igazításának beállítását (ha természetesen megadtuk). A következő tételek érhetők el itt:
alapértelmezett (alapértelmezett) - az igazítást maga a webböngésző végzi, általában ebben az esetben a cím a táblázat felett van és középen van;
top - a cím a táblázat felett van és középen van;
alsó - a név az asztal alatt található és középen van;
balra – a cím a táblázat felett van és balra igazítva;
jobbra – a cím a táblázat felett van, és jobbra igazítva.
A szerkesztési területen Összegzés(Össz.) táblázat megjegyzés be van írva. Ezt a megjegyzést a webböngészők nem jelenítik meg, de más célra felhasználható (például képernyőszöveget olvasó programok feldolgozhatják). Nem szükséges kérni.
A táblázat létrehozása után a szegélyek egérrel történő húzásával átméretezheti. Vigye az egérmutatót a táblázatban található három négyzet egyikére.
Most helyezze a kurzort a táblázat bármelyik cellájába, és írjon be egy szöveget. Tegye ugyanezt a táblázat többi cellájánál is.
Egy táblázatcellának legalább egy tartalommal kell rendelkeznie, ellenkező esetben előfordulhat, hogy a webböngésző nem jeleníti meg megfelelően. Ha a cellának továbbra is üresnek kell lennie, illesszen be egy nem törő szóközt (a HTML kódját -), ahogy ilyenkor maga a Dreamweaver teszi.
Táblázat tulajdonságainak megadása - Jelölje ki a táblázat szélén található bal egérgombbal. Ezt követően a "Tulajdonságok" fülön.
Módosíthatja a táblázat tulajdonságait és testreszabhatja a megjelenését.
Terület táblázat id- állítsa be a táblázat nevét (az attribútum nem kötelező)
mezőket Sorokés Cols- a táblázat sorainak és oszlopainak száma.
mezőket Vés H- a táblázat szélessége és magassága pixelben vagy százalékban.
Terület Igazítsa- igazítsa az asztalt balra, középre vagy jobbra
Terület CellPad- térköz a cellán belül (a tartalom és a cellaszegély között)
Terület CellSpase- táblázatcellák közötti távolság
Terület Merészebb- táblázatszegély szélessége
bg szín- asztal háttérszíne
Brdr Szín- szegélyszín az egész asztalra.
Bg kép- gyakorlat háttér kép az asztalhoz.
Hat további gomb is található.
- Gomb EgyértelműOszlopSzélesség- egyértelmű oszlopszélesség értékek
- Gomb EgyértelműsorMagasság- sormagasság értékek tisztázása
- Gombok AlakítaniSzélességnak nekPixelekés AlakítaniSzélességnak nekSzázalék- konvertálja a cella szélességét képpontokká, és konvertálja a cellaszélességet százalékossá
- Gombok AlakítaniMagasságnak nekPixelekés AlakítaniMagasságnak nekSzázalék- konvertálja a cella magasságát képpontokká, és konvertálja a cella magasságát százalékossá
A táblázat tulajdonságainak beállításán kívül lehetőség van egy cella vagy cellacsoport tulajdonságainak beállítására is. Egy cella tulajdonságainak beállításához kattintson rá a bal egérgombbal. Ha egy cellacsoporthoz szeretne tulajdonságokat beállítani, akkor az első cella mezőjére való kattintás után, elengedés nélkül bal gomb egeret, jelölje ki a szükséges cellákat (ilyen módon legalább a teljes táblázatot kijelölheti). Ha kiválasztja, az összes hozzáadott cella szegélye más színűre lesz festve.
A cellák kiválasztása után ismét figyeljen a panelre " Tulajdonságok"
Horz- a cella tartalmának vízszintes igazítása (balra, középre vagy jobbra)
Vert- a cellatartalom függőleges igazítása (felső, középső, alsó vagy alapvonal)
A mezőkön Wés H- adja meg a kiválasztott cellák szélességét és magasságát, ha értékeket kell megadnia százalékban - adjon hozzá egy % szimbólumot a számérték után.
bgés Brdr- a cellák hátterének beállítása és a cellák szegélyeinek színének beállítása. A felső Bg mező segítségével pedig beállíthatja a cellák háttérképét.
Jelölőnégyzet nemBetakar- sortörések letiltása
Jelölőnégyzet fejléc- a kijelölt cellák táblázatfejlécként való formázásához.
Most kattintson a bal egérgombbal bármelyik cellában, és nyomja meg a gombot.
Ezzel a párbeszédpanelen a kijelölt cellát több részre oszthatja. Kapcsolók Sorokés oszlopok- sorokra és oszlopokra osztva. Number of... - hány sorra vagy oszlopra kell felosztani a kijelölt cellát.
Most válasszon ki két cellát, és kattintson a gombra.
A kiválasztott két cella egyesült, és ezt az új egyesített cellát ismét feloszthatja, vagy fordítva, kombinálhatja másokkal, például a szokásos cellákkal.
Gyorsan alkalmazhat formázást bármely táblázatra. Ehhez válassza ki a táblázatot, és a menüben „ Parancsok" tárgy kiválasztása " Formátumasztal(Táblázat formázása)”.
A megnyíló párbeszédpanelen pedig személyre szabhatja asztala kialakítását
Az előre beállított sablonok egyikének kiválasztása után az összes attribútumot tetszés szerint módosíthatja.
Kivághatja, beillesztheti vagy másolhatja a táblázat celláit.
Egy cella (vagy több cella) kivágásához ki kell jelölnie azt, és ki kell adnia a Szerkesztés - Kivágás parancsot. A cella (vagy több) eltávolításra kerül a táblázatból.
Egy cella (vagy több cella) másolásához ki kell jelölnie azt, és ki kell adnia a Szerkesztés - Másolás parancsot. A cella (vagy több) másolásra kerül.
A másolt vagy kivágott cellák beillesztéséhez használja a Szerkesztés - Beillesztés parancsot.
Mielőtt továbblépne, próbálja ki magát egyszerű táblázatok létrehozásában.
Táblázatos kialakítás
Tegyük fel, hogy egy webáruházat építünk. Az oldalon fel kell tüntetnünk a termék nevét, leírását, árát és fényképét. Asztalokkal ez egyszerű.
Egy speciálisan formázott táblázat segítségével több szövegrészt és egy grafikus képet is elhelyezhetünk a szükséges módon. És ha valami nem tetszik, kissé módosíthatjuk ezt a táblázatot, és teljesen más eredményt kaphatunk.
A webdesignerek régóta ismerik a táblázatokat. És ugyanilyen régen egy egyszerű, mint minden zseniális ötlet lebegett a levegőben. Mi a teendő, ha egy weboldal ÖSSZES szövegét egy nagy, összetetten formázott táblázatba helyezi, és úgy "kinyújtja", hogy az illeszkedjen a teljes webböngészőablakhoz? Hiszen akkor gyakorlatilag korlátlan lehetőségeket kapunk, szinte ugyanazokat, mint nyomdásztársainkat. Létrehozhatunk majd jegyzeteket, lábjegyzeteket, oldalsávokat, és több "szövegfolyamot", amelyek ott kezdődnek, ahol szükségünk van rá.
Így közel járunk a táblázatos tervezéshez, vagyis a weboldalak táblázatok segítségével történő felépítéséhez.
A táblázatos tervezés alapelve már adott. Minden szöveg és minden grafika a táblázat celláiba kerül, ami lehetővé teszi, hogy azt csináljon velük, amit akar. Általában az ilyen táblázatok (nevezzük őket elrendezési táblázatoknak) láthatatlan szegéllyel rendelkeznek, és a vonalzók nagyon vékony cellákból készülnek, háttérkitöltéssel. Az elrendezési táblázatok nagyon összetettek, eltérő formázást és több cellaegyesítést használnak, és szinte mindig beágyazott táblázatokat tartalmaznak.
Az összetett elrendezési táblázatok kézzel történő létrehozása a webdesign csúcsa. Nem minden tapasztalt webtervező vállalkozik arra, hogy táblázatok alapján összetett oldalakat készítsen. És mindez a kapott HTML-kód hihetetlen összetettsége miatt. Emiatt a táblázatok alapján felépített weboldalak kódjában nagyon gyakran előfordulnak olyan hibák, amelyek miatt nem mindig jeleníthető meg egy webböngésző. Valójában ebben a számos egyesített cellában és a legbonyolultabb formázásban egyszerűen összezavarodhat.
Minta- ez egyfajta minta, egy weboldal "csontváza", amely minden oldalon közös elemeket tartalmaz: a webhely címét, hiperhivatkozások halmazát, szerzői jogi információkat, esetleg jelölőtáblát stb. Ezek az elemek változatlanok maradnak az összes létrehozott oldalon ezen a sablonon alapul, ezért nevezik őket megváltoztathatatlan elemeknek. Igen ám, de hogyan fér el a fő tartalom az oldalon?
Nagyon egyszerű. A sablon különösen erre hoz létre változtatható területek
. A sablon alapján létrehozandó oldal egyedi tartalmára vonatkoznak.
Egyszerű: a sablon alapján létrehozunk egy oldalt, és beírjuk annak fő tartalmát a változtatható területekre. Ebben az esetben a Dreamweaver nem engedi meg, hogy változtathatatlan elemeket szerkeszthessünk, és ez joggal van – elvégre megváltoztathatatlanok. De nem számít – magát a sablont mindig megváltoztathatjuk.
Például javítanunk kell a webhely címét. Mivel a sablon része, megnyitjuk a sablont, javítjuk és mentjük. A Dreamweaver azonnal felszólít minket, hogy a sablonban végrehajtott változtatásokat vigyük át az összes, a sablon alapján létrehozott oldalra. És átad, olyan óvatosan, hogy ne befolyásolja a változó területek tartalmát! Valójában kijavítja helyettünk az összes ismétlődő elemet a webhely összes weboldalán. A sablonok speciális fájlokban vannak tárolva a kiterjesztéssel dwt, mappában Sablonok, amelyet a Dreamweaver hoz létre a webhely helyi példányának gyökérmappájában. Az oldalon felhasznált sablonok száma nincs korlátozva, így az oldal egyes oldalait az egyik, másokat egy másik sablon alapján készíthetjük el. És általában csak egyetlen sablonra korlátozhatjuk magunkat, ahogy ez a legtöbbször megtörténik.
Mielőtt létrehozna egy sablont, hozzon létre egy webhelyet. Regisztrálja a Dreamweavernél.
Most hozzunk létre egy dokumentumot, és készítsük el a jelölést.
- Hozzon létre egy 100%-os szélességű, 2 soros és 1 oszlopos táblázatot, a szegély 0.
- Az első sorban készítsünk hátteret (fon.gif) és 100 pixel magasságot.
- Ezután írja be a My Site címet az oldal címébe és az első sorba. Állítsa a szöveg méretét +7-re és a színt sárgára.
- A második sorban állítsa a függőleges igazítást Top értékre.
- Szúrjon be egy másik táblázatot 100%-os szélességgel, 1 sorral és 3 oszloppal, 0 szegéllyel.
- Minden cellában állítsa a függőleges igazítást Top értékre.
- Az első oszlop szélessége 20%, a második 60%, a harmadik 20%.
- Minden oszlopba szúrjon be további 2 sort x 1 oszlopot a táblázatba, 95%-os szélességgel, a táblázat középre igazításával. És az egyes cellák függőleges igazítása felül.
- Ezután töltse ki a sorokat szöveggel, mint a példámban.
- A navigációs oszlopban a cellák színét egyenként állítsa zöldre.
Elkészült az oldalunk elrendezése. Semmi nehéz dolgot nem fogunk csinálni. Ez elegendő az előadás céljaira.
Ideje létrehozni a sablont és a szerkeszthető területeket.
Kétféleképpen lehet létrehozni Dreamweaver sablon. Először is létrehozható a semmiből, majd feltölthető tartalommal, mint egy normál weboldal.
Másodszor, egy meglévő oldal menthető sablonként, majd szerkeszthető a hasznos tartalom eltávolításával, és csak a közös elemek meghagyásával. Mindkettőt egyformán könnyű megtenni.
Új menüsablon létrehozása a semmiből " Fájl – Új“
Még egyszerűbb új sablont létrehozni egy meglévő weboldal alapján. Ehhez nyissa meg a kívánt weboldalt, válassza a „ Fájl" bekezdés " Mentés sablonként" (Mentés sablonként). A gombra is kattinthat Készítsen sablont(Sablon létrehozása) objektumpanel. Egy párbeszédpanel jelenik meg a képernyőn. Mentés sablonként ”.
Csepp webhely ki van választva a webhely, ahol a sablont tárolják. (A sablonok az oldal kizárólagos tulajdonát képezik, ne feledje) Alapértelmezés szerint ott az aktuális oldal van kiválasztva.
Maga a sablon neve kerül beírásra a beviteli mezőbe Mentés másként. Adjunk nevet az új sablonunknak fő-("mester"), hiszen ez a fő sablonunk, ami alapján elkészítjük oldalunkat.
Az összes szükséges adat megadása után kattintson a gombra Megment(Mentés) a sablon mentéséhez.
Miután létrehoztunk egy új sablont, az utóbbi megjelenik a sablonok listájában. És mivel ezt az új sablont egy meglévő weboldal alapján hoztuk létre, azaz van benne tartalom, a panelen megtekinthetjük előnézet. Igaz, ez a panel nagyon kicsi, és ahhoz, hogy képet kapjunk a sablon tartalmáról, meg kell nyitnunk a dokumentumablakban.
Sablonszerkesztés
Az üres sablont fel kell tölteni tartalommal. A weblap alapján létrehozott sablont szerkeszteni kell: az oldal egyedi tartalmának eltávolításához, csak az oldal összes oldalán közös elemeket hagyva meg. Ehhez meg kell nyitnunk a sablont egy dokumentumablakban, mint egy normál weboldalon.
A képernyőn megjelenik egy dokumentumablak, amelyben megnyílik az általunk kiválasztott sablon. Külsőleg semmiben sem különbözik egy szokásos weboldaltól.
Mit tehetünk egy sablonnal? Bármi. Felfoghatja úgy, mint egy normál weboldalt, néhány speciális funkcióval. (Ezeket a funkciókat a későbbiekben ismertetjük.) Szöveget gépelhetünk, formázhatunk, elhelyezhetünk képeket, táblázatokat, hiperhivatkozásokat, átválthatunk oldalelrendezési módba és táblázatokat és jelölőcellákat hozhatunk létre, keretkészleteket készíthetünk, HTML kódot tisztíthatunk stb.
Ennek ellenére a sablon nem weblap, és van néhány sajátossága. Tehát változtatható területeket kell majd elhelyeznünk rajta, amelyekben a későbbiekben az oldalak fő tartalma fog elhelyezkedni. (Sőt, erre mindenképpen szükségünk lesz, különben miért van akkor szükségünk erre a sablonra.) Hogy ezt hogyan tegyük, azt egy kicsit később megtudjuk.
Nyissuk meg a default.htm oldal alapján létrehozott fő sablont (ha még nincs megnyitva).
Most változó területeket kell elhelyeznünk a sablonban. Egyelőre egyetlen változtatható terület lesz - az oldal fő tartalma. És a jelölőtáblánk legnagyobb cellájában lesz található. A híroszlopot és a navigációs sávot egyelőre békén hagyjuk.
Szerkeszthető régiók létrehozása
A sablonhoz hasonlóan itt is kétféleképpen hozhatunk létre egyéni régiókat. Először hozzon létre egy üres szerkeszthető területet az oldal üres részén. Másodszor, alakítsa át az oldal aktuális tartalmának egy töredékét változtatható területté.
Az első módszer a legjobb, ha a semmiből hoztunk létre egy sablont, a második módszer pedig a legjobb, ha egy meglévő oldalt alakítottunk át sablonná.
Üres szerkeszthető terület létrehozása a sablonban nagyon egyszerű. Ehhez először tegyük a kurzort arra a helyre, ahol egy üres szerkeszthető területet szeretnénk létrehozni, és döntsük el, mit használjunk:
- objektum eszköztárat a gombra kattintva Sablonok lapon Gyakoriés válassza ki a megjelenő menüből EditableRegion;
- helyi menüt az almenüjének kiválasztásával Sablon bekezdés Új szerkeszthető régió;
- rendszer menü almenüből kiválasztva Sablon objektumok menü Beszúrás bekezdés EditableRegion;
- billentyűzet, amely a leggyorsabb – csak nyomja meg
+ + .
Ezután egy párbeszédpanel jelenik meg a képernyőn. Új szerkeszthető régió.
Az ablak egyetlen Név beviteli mezőjében az újonnan létrehozott változóterület egyedi neve kerül megadásra. A sablonban létrehozott minden módosítható területnek egyedi névvel kell rendelkeznie. Ez a név bármilyen karaktert tartalmazhat, kivéve az orosz ábécé betűit, idézőjeleket, aposztrófot és jeleket "<", ">" és "&". A név megadása után kattintson az OK gombra a szerkeszthető terület létrehozásához, vagy Megszünteti megtagadni azt.
Ha véletlenül rossz helyre tettük az átméretezhető területet, ez javítható. A módosítandó területet a címére kattintva kiválasztjuk, az egérrel a tartalomnál fogva "megragadjuk" és a megfelelő helyre húzzuk.
A Dreamweaver automatikusan létrehoz egy kis szerkeszthető szövegterületet, amikor bármilyen sablont létrehoz. (Ezért nem adhatjuk a változtatható hatókörnek a doctitie nevet – már létezik ilyen nevű változtatható hatókör.) Ez a változó terület tartalmazza a címke tartalmát