A drag and drop webhelykészítők világában az Adobe Dreamweaver jól tette, hogy a verseny közepette is releváns marad. A nagyszerű funkciókkal és rengeteg eszközzel, amelyek megkönnyítik az életét, ez a szoftver nagyszerű választás webes tervezők és fejlesztők számára.

De hogyan készíti el az első webhelyét a Dreamweaver segítségével?

Ismerkedés a Dreamweaverrel

Mielőtt elkezdené dolgozni vele, be kell szereznie az Adobe Dreamweaver egy példányát, de ingyenes próbaverzió áll rendelkezésre.

Irány a Vályogtégla webhelyet, jelentkezzen be vagy regisztráljon fiókot, és a kezdéshez töltse le az Adobe Creative Cloud eszközt. Innen letöltheti az Adobe Dreamweaver programot, és elkezdheti a teljes útmutatót.

Ez az útmutató megmutatja, hogyan készíthet alap webhelyet Dreamweaver sablonfájlok alapján. A projekt teljes fájljait megtalálja itt ezt a GitHub-tárat.

1. lépés: Hozzon létre egy Dreamweaver webhelyet

Nyissa meg az Adobe Dreamweavert, és lépjen a Webhely menü az oldal tetején. Válassza ki Új webhely, majd válasszon nevet a webhelyének, és válassza ki a fájl helyét.

2. lépés: Hozzon létre egy sablonfájlt

Ezután itt az ideje, hogy sablonfájlt hozzon létre új webhelyéhez. A sablonfájlok hasonlóan működnek, mint a CMS-rendszerek, például a WordPress és a Shopify által használt témák, csak Ön készíti el őket.

Kattintson Újat készíteni vagy menj oda Fájl > Új és válassz HTML sablon tól dokumentum típus lista.

Ezzel létrehoz egy alapsablont, amelyen már van néhány HTML. Ezt a HTML-kódot fogja használni a projekthez, ezért érdemes megtartani a helyén a következő lépésekhez.

​​​​​​

3. lépés: Hozzon létre egy fejlécet a sablonban

Most itt az ideje, hogy az imént létrehozott sablonban elkészítse a menü/fejléc részt a webhelyen. Menj Beszúrás a képernyő tetején, és válassza a lehetőséget Fejléc a listáról.

Ekkor megnyílik egy párbeszédpanel. Adjon nevet az új fejléc osztályának, és kattintson a gombra rendben hogy hozzáadja a kódot a HTML-hez. Automatikusan el kell helyeznie az új kódot a címkéket, de szükség esetén áthelyezheti.

Ezt követően adjon hozzá egy div elemet a webhely logójához és egy navig elemet a webhely menüjéhez. Menj a Beszúrás menüt, és válassza ki Div, majd térjen vissza a Beszúrás menüt, és válassza ki Nav. Mindkét elemnek saját osztálynévre van szüksége.

A folyamat utolsó lépéseként néhány menüopciót adtunk hozzá navigációs elemünkhöz. Ehhez lépjen a következőre: Beszúrás és válassza ki Hiperhivatkozás. Öt hiperhivatkozást adtunk webhelyünk fejlécéhez: Otthon, Oroszlán, Tigris, Jaguár és Házi macska.

Azok az oldalak, amelyek fejlécében linkek lesznek, még nem léteznek, ezért hagyja el a href a tulajdonságok üresek, amíg létre nem hozza őket.

4. lépés: Adjon hozzá egy stíluslapot a CSS-hez

Amint látja, ez a webhely nem néz ki túl jól, ahogy van. Egy kis CSS megoldja ezt a problémát, és könnyedén hozzáadhat stíluslapot a Dreamweaverben. Menj a CSS tervező a képernyő jobb oldalán, és kattintson a gombra Plusz ikonra a Források mellett. Csak nevet kell választania a stíluslapnak, és a többi beállítást meghagyhatja.

Az első dolog az, hogy a fejlécet flexboxmá kell alakítani. A Flexbox csak az egyik módja a weboldal CSS használatával történő elrendezésének. Ezzel párhuzamosan be van állítva az oldal betűtípusa, fekete hátteret állítanak be, és számos egyéb változtatás is be van iktatva a webhely jobb megjelenése érdekében. A teljes CSS kódot a cikk végén láthatja.

5. lépés: Szerkeszthető régiók hozzáadása a sablonhoz

A szerkeszthető régiók HTML-részeket hoznak létre, amelyek szerkeszthetők, ha a sablont más oldalak létrehozására használja. Főoldalunk tartalma tökéletesen illeszkedik egy ilyen régióba. Menj Beszúrás > Sablon > Szerkeszthető régió szerkeszthető régió hozzáadásához az oldalához.

6. lépés: Kép/szövegtartalom hozzáadása a sablonhoz

Az imént hozzáadott szerkeszthető régió további HTML-kód nélkül használható, de az egyes oldalak létrehozásakor továbbra is hozzáadhat néhány szerkesztést. A kezdéshez lépjen a következőre: Beszúrás és válassza ki Div új div elem hozzáadásához a webhelyhez.

Ez egyszerre fog működni az oldalon lévő szöveges tartalom tárolójaként, valamint egy háttérkép hozzáadásának helyeként. Ennek az elemnek van egy osztálya és egy azonosítója, így a különböző oldalak eltérő CSS-tulajdonságokkal rendelkeznek. Ezek egyedi CSS háttérminták nagyszerűek, ha Dreamweaver webhelyét a következő szintre szeretné emelni.

Ezután lépjen ide Beszúrás > Címsorok > H1 címsor hozzáadásához az imént hozzáadott div elemen belül. Mindkét elemnek szüksége van némi CSS-re a megfelelő működéshez. A div háttér-kép, háttérméret és magasság értékekkel rendelkezik. Menj Fájl > Összes mentése hogy megbizonyosodjon arról, hogy a sablon frissül.

​​​​​​

A helyi hálózaton vagy az interneten bárhonnan hozzáadhat képeket, de a legjobb, ha a képeket a webhely saját fájljaiba menti a könnyű hozzáférés érdekében.

7. lépés: Adjon hozzá oldalakat a sablonnal

Most, hogy a helyén van egy sablon, elkezdhet hozzáadni néhány oldalt. Menj Fájl > Új és válassza ki HTML alatt dokumentum típus. Add hozzá a Cím minden leütés előtt hozzáadott oldalhoz Teremt.

Az új oldal fehér, és még nincs rajta a sablonunk. Miután megnyílt új oldala a Dreamweaverben, lépjen a következő helyre: Eszközök > Sablonok és kattintson rá Sablon alkalmazása az oldalra. Válassza ki a sablont a listából, és kattintson Válassza ki a sablon betöltéséhez. Végül menjen ide Fájl > Mentés másként és a mentés előtt válasszon nevet az új oldalnak.

Ismételje meg ezt a folyamatot, amíg nincs elegendő oldala az Ön igényeinek megfelelő. Ehhez nem kell egyetlen sablonhoz sem ragaszkodnia; újakat adhat hozzá a különböző oldalelrendezésekhez.

8. lépés: Oldalhivatkozások hozzáadása a sablonhoz

Az oldalak hozzáadásával módosíthatja a sablonban lévő navigációs hivatkozásokat, hogy azok a megfelelő oldalakra mutassanak. Menjen vissza a sablonhoz, és keresse meg a korábban hozzáadott A címkéket. Törölje a helyőrző hivatkozást, és kattintson a idézőjel kinyitni a Tallózás menü. Innen kiválaszthatja a megfelelő oldalt az egyes linkekhez.

9. lépés: Javítsa ki a CSS/HTML-t az új oldalakon

Jelenleg mindegyik oldal ugyanúgy fog kinézni. Néhány lépést meg kell tenni annak biztosítására, hogy saját tartalommal rendelkezzenek; Kövesse az alábbi lépéseket az új webhely befejezéséhez.

  • Módosítsa a tartalom div elem azonosítóját minden oldalon, hogy az tükrözze az oldal címét
  • Adjon hozzá CSS-kódot az új elemazonosítóhoz egy másik háttérképpel
  • Változtassa meg a címet minden oldalon

10. lépés: Tesztelje a webhelyet a böngészőben

Tesztelheti új webhelyét választott webböngészőjében közvetlenül az Adobe Dreamweavertől. Menj Fájl > Valós idejű előnézet és válassza ki a kívánt böngészőt a webhely megtekintéséhez. Ez nagyszerű a CSS vagy más olyan kód teszteléséhez, amely nem kompatibilis minden böngészővel.

Most már csak olyan helyre van szüksége, ahol webhelyét tárolhatja. Statikus webhely tárolása az AWS S3 segítségével remek hely a kezdéshez.

A HTML és CSS kód

<!doctype html>
<html>
<fej>
<meta karakterkészlet="utf-8">
<!-- TemplateBeginEditable name="tanit" -->
<cím>Névtelen dokumentum</title>
<!-- TemplateEndEditable -->
<link href="../page-css.css" rel="stíluslap" típus="szöveg/css">
</head>
<test>
<header class="fő-fejléc">
<div class="site-logó">MakeUseOf példaoldal</div>
<nav class="főmenü">
<a href="../Home.html">itthon</a><a href="../Oroszlán.html">Oroszlán</a><a href="../Tigris.html">Tigris</a><a href="../Jaguar.html">Jaguár</a><a href="../Ház Cat.html">Házi macska</a>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<div class="központi téma" id="oroszlán">
<h1>Ez egy oroszlán!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>

Ez a HTML elkészíti a projektünk kész weboldalát. Szétszedheti, hogy megtudja, hogyan működik, de javasoljuk, hogy készítsen saját HTML-kódot webhelyéhez.

@charset "utf-8";
body {
 margó: 0;
 háttér: fekete;
 betűcsalád: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.main-header {
 kijelző: flex;
 háttér: fekete;
 padding: 20px;
}
.site-logo {
 szélesség: 30%;
 fehér szín;
 betűsúly: félkövér;
 szöveg-átalakítás: nagybetűk;
}
.főmenü {
 szélesség: 70%;
 szöveg igazítása: jobbra;
}
.főmenüa {
 padding: 10px;
 szöveg-dekoráció: nincs;
 fehér szín;
}
.központi téma {
 magasság: 100vh;
 padding: 20px;
 háttér-méret: borító;
}
.központi témah1 {
 fehér szín;
 betűméret: 10 rem;
 szöveg-átalakítás: nagybetűk; 
}
#oroszlán {
 háttérkép: url("Images/largelion.png");
}
#tigris {
 háttérkép: url("Images/tiger.png");
}
#jaguar {
 háttérkép: url("Images/jaguar.png");
}
#házi macska {
 háttérkép: url("Images/housecat.png");
}
#allcats {
 háttérkép: url("Images/loadsofcats.png");
}

Ez a CSS is része a kész projektnek. Az általunk tárgyalt HTML-hez hasonlóan ezzel a kóddal is játszhatsz, hogy sajátod legyen ez a webhely.

Weboldalak készítése az Adobe Dreamweaverrel

A Dreamweaver nem tűnik olyan könnyen használhatónak, mint a WordPress vagy a Squarespace, de sokkal nagyobb teljesítményt biztosít. Ez az útmutató remek kiindulópont, de még sok mindent meg kell tanulni, és érdemes a Dreamweavert felfedezni.