A Dreamweaver létrehoz egy oldalt egy sablonból. Sablon telepítése Dreamweaverben. Grafikai beállítások
Ezzel elkészült harmadik weboldalunk. Minden működik, minden oldal normálisan betöltődik, és megjelenik a webböngészőben. Úgy tűnik, nincs ok az aggodalomra.
Nem, de csak egyelőre.
Képzeljünk el egy ilyen helyzetet. Hirtelen úgy döntöttünk, hogy új oldalt adunk az oldalunkhoz. Ehhez minden oldalon módosítanunk kell a navigációs sávot, ehhez pedig mindegyiket meg kell nyitnunk egy dokumentumablakban, hozzáadnunk kell egy hivatkozást és mentenünk kell az oldalt. Oldalunk kis méretű, és viszonylag gyorsan elvégezzük a munkát. Mi van, ha nagyszerű volt?
Természetesen használhatjuk a Dreamweaver beépített eszközeit. Például hívjon fel egy párbeszédpanelt megtalálja és Csere - rendkívül erős. (Lásd a 2. fejezetet a részkarakterlánc-keresési és -csere lehetőségekről.) Vagy indítsa el a hiperhivatkozások cseréjét az elem meghívásával A hivatkozás módosítása az egész webhelyen menü webhely panelek webhely(lásd a 6. fejezetet). Ez sok esetben segít abban, hogy gyorsan kicseréljük az oldal tartalmának vagy HTML-kódjának teljes töredékeit. A szintén 6. fejezetben leírt eszközök és elemkönyvtár nagy segítségünkre lehet.
De mi van akkor, ha jelentős változtatásokat szeretnénk végrehajtani, például gyökeresen megváltoztatni a jelölőtábla szerkezetét? A keresés és csere valószínűleg nem segít nekünk, és még inkább a hiperhivatkozások automatikus cseréje. Ebben az esetben még a könyvtárban lévő eszközök sem segítenek. Tényleg újra kell csinálnod az összes oldalt?
Ha nem a Dreamweaverben dolgozna, valószínűleg ezt kell tenned. De szerencsénk volt. A Dreamweaver olyan hatékony eszközt támogat, mint a sablonok. A 3. fejezetben már említettük őket. Most részletesebben megvizsgáljuk őket.
Minta- ez egyfajta minta, egy weboldal "csontváza", amely minden oldalon közös elemeket tartalmaz. Amikor egy sablon alapján új oldalt hoz létre, csak be kell írnia az oldal egyedi tartalmát a megfelelő helyekre, és el kell mentenie. Később módosíthatja a sablont, és a Dreamweaver az összes oldalt frissíti az alapján.
Ebben az értelemben a sablonok hasonlóak a könyvtári elemekhez (lásd a 6. fejezetet). A különbség az, hogy a sablon az egész oldal üres, és a könyvtár csak azt tárolja. egyedi elemek. A Dreamweaver fejlesztői azonban úgy vélik, hogy a sablonok állnak a legközelebb az eszközökhöz (lásd a 6. fejezetet), ezért elhelyezték a sablonok listáját a eszközök.
A sablon eleinte nem változtatható, vagyis amikor az alapján készítünk oldalt, akkor csak a speciálisan erre kijelölt helyekre - változtatható területekre - lehet tartalmat elhelyezni. Magának a sablonnak az elemei nem szerkeszthetők, mivel ezek változatlan területek. Ha valamit javítani szeretne, akkor magát a sablont kell megnyitnia a dokumentumablakban. Ily módon a Dreamweaver megóvja Önt a sablon hibás megváltoztatásától, és ennek következtében az abból létrehozott weboldalak eltorzításától.
Azt mondhatjuk, hogy a sablonok hétköznapi weboldalak. Szerkesztéskor a sablonokat normál weblapként kezelheti, és ugyanazokat az eszközöket használhatja. Beállíthatja a sablon alapján létrehozandó oldal paramétereit is (cím, háttérszín, szöveg és hiperhivatkozások). HTML kód generálásakor azonban Dreamweaver sablonok sok saját címkét és attribútumot használ, ezért nem teljesen helyes azt állítani, hogy a sablon egy szokásos weboldal.
A sablonok .dwt fájlként kerülnek mentésre a gyökérmappában található Sablonok mappába helyi példány webhely. Ebből az következik, hogy a sablonok az Ön webhelyének szerves részét képezik, akárcsak egy könyvtár. Ha egy sablont egy másik webhelyen szeretne használni, át kell másolnia arra a webhelyre a használatával szabvány azt jelenti Dreamweaver (lásd a 6. fejezetet). Egy oldalon több sablon is használható.
A sablonok akkor lesznek a leghasznosabbak, ha táblázatterv alapján készít oldalakat. Az ilyen oldalak szinte mindig sok ismétlődő elemet tartalmaznak, amelyek manuális frissítése rendkívül időigényes. De a "szokásos" oldalakhoz is készíthet sablonokat. Erre például akkor lehet szükség, ha azonos kialakítású oldalakat hoz létre valamelyik nagyvállalati webhelyhez.
A Dreamweaver jó néhány sablont tartalmaz, amelyeket professzionális webtervezők készítettek. Ezekkel a sablonokkal saját oldalakat hozhat létre; Ennek mikéntjét a 3. fejezet tárgyalja. Próbáld ki – lehet, hogy találsz valamit, ami megfelel az Ön számára.
Hozzon létre egy oldalt egy meglévő sablonból
Kiválaszthatja, megtekintheti és létrehozhatja új dokumentumot a meglévő sablon szerint. Használhatja az Új dokumentum párbeszédpanelt. hogy válasszon sablont a Dreamweaver által meghatározott bármely webhelyről, vagy használja az Eszközök (Eszközök) panelt. új dokumentum létrehozásához egy meglévő sablon alapján.Oldal a sablonból
1. Válassza a Fájl > Új menüpontot.
2. Az Új dokumentum párbeszédpanelen válassza ki az Oldal a sablonból kategóriát.
3. A Webhely oszlopban válassza ki a kívánt sablont tartalmazó Dreamweaver webhelyet, majd válasszon egy sablont a jobb oldali listából.
4. Törölje a jelet az "Oldal frissítése a sablon megváltozásakor" jelölőnégyzetből, ha nem szeretné minden alkalommal frissíteni ezt az oldalt, amikor módosítja az alapsablont.
5. Kattintson a "Beállítások" gombra az alapértelmezett dokumentumbeállítások, például a dokumentumtípus, a kódolás és a fájlkiterjesztés megadásához.
6. Kattintson a Get More Content... elemre a Dreamweaver Exchange megnyitásához, ahol további tartalmat szerezhet be oldala számára.
7. Kattintson az Új gombra, és mentse a dokumentumot (Fájl > Mentés).
Dokumentum létrehozása sablonból az Eszközök panelen ("Források")
1. Nyissa meg az Eszközök (Erőforrások) panelt (Ablak menü > Erőforrások), ha még nincs megnyitva.
2. Az Eszközök (Erőforrások) panelen kattintson a Sablonok ikonra a bal oldalon, hogy megtekinthesse az aktuális webhely sablonjainak listáját.
Ha az alkalmazni kívánt sablont most hozta létre, előfordulhat, hogy a Frissítés gombra kell kattintania a megjelenítéséhez.
3. Kattintson a jobb gombbal (Windows) vagy a Control billentyűt lenyomva tartva (Macintosh) az alkalmazni kívánt sablonra, majd válassza az Új sablonból lehetőséget.
A dokumentum megnyílik a Dokumentum ablakban.
4. Mentse el a dokumentumot.
példa oldal
A Dreamweaver számos professzionálisan tervezett CSS-fájlt és céloldalt tartalmaz mobil alkalmazások. A mintafájlokat kiindulási pontként használhatja webhelye oldalainak megtervezéséhez. Amikor egy főfájlból hoz létre dokumentumot, a Dreamweaver másolatot készít a fájlról.
Megtekintheti a mintafájl előnézetét, és elolvashatja az oldalterv elemeinek rövid leírását az Új dokumentum párbeszédpanelen. Táblázatok használatakor css stílusok Másolhat egy előre megtervezett stíluslapot, és alkalmazhatja a dokumentumokra.
1. Válassza a Fájl > Új menüpontot.
2. Az Új dokumentum párbeszédpanelen válassza ki a Mesteroldal kategóriát.
3. A "Mintamappa" oszlopban válassza a "CSS-stíluslap" vagy a " Kezdőlapok Mobil”, majd válasszon egy mintát a jobb oldali listából.
4. Kattintson a "Létrehozás" gombra.
Az új dokumentum a Dokumentum ablakban nyílik meg (kód- és tervnézeti módok). A CSS-stíluslap kiválasztásával megnyílik a stíluslap Kódnézetben.
6. Amikor megjelenik a "Függő fájlok másolása" párbeszédpanel, állítsa be a beállításokat, és kattintson a "Másolás" gombra az erőforrások kiválasztott könyvtárba másolásához.
Kiválaszthatja saját helyét a függő fájlok számára, vagy használhatja a Dreamweaver által generált alapértelmezett helyet (a mintafájl forrásneve alapján).
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 olyan? 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 a kívánt oldalt tartalmazó új fájlt kell kiválasztani.
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 levelezőprogram ablakának.
Elkészítettük az oldalt, hogy sablont készítsünk belőle a Dreamweaver programban.
Emlékezzünk egy kicsit, hogy már írtam a sablonról a Dreamweaverben. Ha n-edik oldalszámot a létrehozott sablonhoz, majd megváltoztatja, akkor az összes oldal megváltozik a sablon után!
Az egyetlen hely, amely nem változik, az a szerkeszthető terület! Lehet benne eredeti szöveg, vagy bármilyen más egyedi információ.
Hogyan készítsünk szerkeszthető területet a Dreamweaverben.
A szerkeszthető területek száma korlátlan, és bárhol beállíthatja ezeket a területeket.
Létrehozunk egy szerkeszthető területet azon a területen, ahol a fő szöveg lesz!
Megnyitás Dreamweaverben előkészítve.
Ha nincs szövege, akkor csak vigye az egeret arra a helyre, ahol lesz egy szerkeszthető terület. Van szövegem, kiválasztom. Nyomja meg a , - következő - sablonok - új szerkeszthető területet.
Az új ablakban nevezze el a szerkeszthető területet. Nem szöveget használok ehhez, hanem egyszerűen egy számot írok be. Az összes oldalon található szöveghez a szám 2. A címhez pedig külön szerkeszthető 1-es területet készítek - miért van ez? Nem tudom, csak az elején így történt.
Elvileg a cím és a szöveg is egy szerkeszthető területen készíthető!
Lássuk, mit kaptunk.
Itt látjuk, hogy az általunk létrehozott 2. számú szerkeszthető területen van szöveg Ez a szerkeszthető terület csak a programban látható, a böngészőben nem!
Az első sablon mentésekor automatikusan létrejön egy mappa a sablonok tárolására, melynek neve Sablonok.
Megnyílik egy új ablak, ahol:
Site – oldal
Meglévő sablonok - Nekem már vannak sablonjaim, neked pedig megvannak, ha ez az első sablon, akkor az ablak üres lesz.
Leírás – mindig üresen hagyta.
Hogyan nevezzünk el egy sablont a Dreamweaverben?
Miért merült fel ilyen kérdés? Ha különböző témájú webhelyeket készít, vagy különböző alcímei lesznek, akkor a sablonok valószínűleg eltérőek lesznek. Nagyon sok témám van – tehát sok sablonom. Mindegyik sablon eltér a megfelelőjétől a felső sorban, az oldal első sora jelzi, hogy hol tartózkodik.
Mindegyik sablont el kell nevezni valahogy. A sablon neve megjelenik a kódban. Nehéz megmondani, hogy ez a név hogyan fogja befolyásolni az oldal optimalizálását, de nekem úgy tűnik, hogy ha a sablont a fejleszteni kívánt témának megfelelően nevezzük el, akkor jobb lesz, mint egy számmal elnevezni a sablont. vagy egy arctalan szó.
Vegyünk egy példát, ha most megnyomja a ctrl + U billentyűkombinációt, látni fogja a kódot.
Ez a második sor, és látjuk, hogy a sablonunk neve: "All about Dreamweaver.dwt"
