Vedä ja pudota -sivustojen rakentajien maailmassa Adobe Dreamweaver on onnistunut pysymään ajan tasalla kilpailussa. Tämä ohjelmisto on täynnä upeita ominaisuuksia ja työkaluja, jotka tekevät elämästäsi helppoa, ja se on loistava valinta web-suunnittelijoille ja -kehittäjille.

Mutta kuinka luot ensimmäisen verkkosivustosi Dreamweaverilla?

Dreamweaverin käytön aloittaminen

Sinun on hankittava kopio Adobe Dreamweaverista, ennen kuin voit aloittaa sen käytön, mutta ilmainen kokeiluversio on saatavilla.

Suuntaa kohteeseen Adobe kirjaudu sisään tai rekisteröi tili ja aloita lataamalla Adobe Creative Cloud -työkalu. Täältä voit ladata Adobe Dreamweaverin ja aloittaa koko oppaan käytön.

Tämä opas näyttää, kuinka voit tehdä perussivuston käyttämällä Dreamweaver-mallitiedostoja pohjana. Löydät kaikki projektitiedostot osoitteesta tämä GitHub-arkisto.

Vaihe 1: Luo Dreamweaver-sivusto

Avaa Adobe Dreamweaver ja siirry kohtaan Sivusto valikko sivun yläreunassa. Valitse Uusi sivusto, valitse verkkosivustollesi nimi ja tiedostosijainti sille.

instagram viewer

Vaihe 2: Luo mallitiedosto

Seuraavaksi on aika luoda mallitiedosto uudelle verkkosivustollesi. Mallitiedostot toimivat samalla tavalla kuin CMS-järjestelmien, kuten WordPressin ja Shopifyn, käyttämät teemat, vain sinä teet ne itse.

Klikkaa Luo uusi tai mene osoitteeseen Tiedosto > Uusi ja valitse HTML-malli alkaen dokumentti tyyppi lista.

Tämä luo perusmallin, jossa on jo HTML-koodia. Käytät tätä HTML-koodia projektissasi, joten se kannattaa pitää paikallaan seuraavia vaiheita varten.

​​​​​​

Vaihe 3: Luo otsikko malliin

Nyt on aika rakentaa valikko/otsikko-osio verkkosivustolle juuri luomassasi mallissa. Mene Lisää näytön yläreunasta ja valitse Otsikko luettelosta.

Tässä vaiheessa avautuu valintaikkuna. Lisää nimi uudelle otsikkoluokalle ja napsauta OK lisätäksesi koodin HTML-koodiisi. Sen pitäisi automaattisesti sijoittaa uusi koodi sisään -tunnisteita, mutta voit siirtää niitä tarvittaessa.

Tämän jälkeen sinun tulee lisätä myös div-elementti sivuston logoon ja nav-elementti sivuston valikkoon. Siirry kohtaan Lisää valikko ja valitse Div, palaa sitten kohtaan Lisää valikko ja valitse Nav. Molemmat elementit tarvitsevat oman luokkanimen.

Tämän prosessin viimeisenä vaiheena lisäsimme joitain valikkovaihtoehtoja navigointielementtiimme. Voit tehdä tämän siirtymällä osoitteeseen Lisää ja valitse Hyperlinkki. Lisäsimme viisi hyperlinkkiä sivustomme otsikkoon: Home, Lion, Tiger, Jaguar ja House Cat.

Sivuja, joiden otsikossa on linkkejä, ei ole vielä olemassa, joten jätä href ominaisuus tyhjiä, kunnes luot ne.

Vaihe 4: Lisää tyylitaulukko CSS: lle

Kuten näette, tämä sivusto ei näytä kovin hyvältä sellaisenaan. Hieman CSS: ää ratkaisee tämä ongelma, ja voit lisätä tyylitaulukon helposti Dreamweaveriin. Siirry kohtaan CSS-suunnittelija näytön oikealla puolella ja napsauta Plus -kuvaketta Lähteet-kohdan vieressä. Sinun tarvitsee vain valita tyylisivullesi nimi, ja voit jättää muut asetukset ennalleen.

Ensimmäinen asia on muuttaa otsikko flexboxiksi. Flexbox on vain yksi tapa luoda verkkosivu CSS: n avulla. Tämän lisäksi sivuston fontti asetetaan, musta tausta asetetaan ja useita muita muutoksia tehdään sivuston näyttämiseksi paremmalta. Näet koko CSS-koodin artikkelin lopusta.

Vaihe 5: Lisää muokattavat alueet malliin

Muokattavat alueet luovat HTML-osioita, joita voidaan muokata, kun käytät mallia muiden sivujen luomiseen. Pääsivumme sisältö sopii täydellisesti tällaiselle alueelle. Mene Lisää > Sapluuna > Muokattava alue lisätäksesi muokattavan alueen sivullesi.

Vaihe 6: Lisää kuva-/tekstisisältö malliin

Juuri lisäämääsi muokattavissa olevaa aluetta voidaan käyttää ilman ylimääräistä HTML-koodia, mutta voit silti lisätä joitain muokattavaksi, kun luot yksittäisiä sivuja. Aloita siirtymällä kohtaan Lisää ja valitse Div lisätäksesi uuden div-elementin verkkosivustollesi.

Tämä toimii sekä sivun tekstisisällön säilönä että taustakuvan lisäämispaikkana. Tällä elementillä on luokka ja tunnus, joten eri sivuilla on erilaiset CSS-ominaisuudet. Nämä ainutlaatuisia CSS-taustakuvioita ovat hyviä, jos haluat viedä Dreamweaver-verkkosivustosi uudelle tasolle.

Siirry seuraavaksi kohtaan Lisää > Otsikot > H1 lisätäksesi otsikon juuri lisäämäsi div-elementin sisään. Molemmat elementit tarvitsevat jonkin verran CSS: ää toimiakseen oikein. Div sisältää taustakuvan, taustan koon ja korkeuden arvot. Mene Tiedosto > Tallenna kaikki varmistaaksesi, että mallisi päivittyy.

​​​​​​

Voit lisätä kuvia mistä tahansa paikallisverkostasi tai Internetistä, mutta on parasta tallentaa kuvat verkkosivuston omiin tiedostoihin, jotta niitä on helppo käyttää.

Vaihe 7: Lisää sivuja mallin avulla

Nyt kun sinulla on malli, voit aloittaa sivujen lisäämisen. Mene Tiedosto > Uusi ja valitse HTML alla dokumentti tyyppi. Lisää Otsikko jokaiselle ennen painamista lisäämäsi sivulle Luoda.

Uusi sivu on valkoinen, eikä siinä ole vielä malliamme. Kun uusi sivusi on auki Dreamweaverissa, siirry osoitteeseen Työkalut > Mallit ja klikkaa Käytä mallia sivulle. Valitse mallisi luettelosta ja napsauta Valitse ladataksesi mallisi. Siirry lopuksi kohtaan Tiedosto > Tallenna nimellä ja valitse uudelle sivullesi nimi ennen sen tallentamista.

Toista tätä, kunnes sinulla on tarpeeksi sivuja tarpeisiisi. Sinun ei tarvitse tarttua yhteen malliin tätä varten; voit lisätä uusia eri sivuasetteluille.

Vaihe 8: Lisää sivulinkit malliin

Kun sivusi on lisätty, voit muuttaa mallissasi olevia navigointilinkkejä niin, että ne linkittävät oikeille sivuille. Palaa malliisi ja etsi aiemmin lisäämäsi A-tunnisteet. Poista paikkamerkkilinkki ja napsauta lainausmerkit avaamaan Selaa valikosta. Täältä voit valita oikean sivun jokaiselle linkkillesi.

Vaihe 9: Korjaa CSS/HTML uusilla sivuilla

Jokainen sivu näyttää tällä hetkellä samalta. On toteutettava muutamia vaiheita varmistaaksesi, että niillä on oma sisältönsä. viimeistele uusi verkkosivustosi noudattamalla alla olevia ohjeita.

  • Muuta sisällön div -elementin tunnus jokaisella sivulla vastaamaan sivun otsikkoa
  • Lisää CSS-koodi uudelle elementtitunnukselle eri taustakuvalla
  • Vaihda otsikko jokaisella sivulla

Vaihe 10: Testaa verkkosivustoa selaimessasi

Voit testata uutta verkkosivustoasi valitsemallasi verkkoselaimella suoraan Adobe Dreamweaverista. Mene Tiedosto > Reaaliaikainen esikatselu ja valitse haluamasi selain tarkastellaksesi verkkosivustoasi. Tämä sopii erinomaisesti CSS: n tai muun koodin testaamiseen, joka ei ole yhteensopiva kaikkien selaimien kanssa.

Nyt tarvitset vain paikan, jossa verkkosivustosi isännöi. Staattisen sivuston isännöinti AWS S3:lla on hyvä paikka aloittaa.

HTML- ja CSS-koodi

<!doctype html>
<html>
<pää>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="oppia" -->
<otsikko>Nimetön dokumentti</title>
<!-- TemplateEndEditable -->
<linkki href="../page-css.css" rel="tyylisivu" tyyppi="teksti/css">
</head>
<kehon>
<header class="pääotsikko">
<div class="sivuston logo">MakeUseOf esimerkkisivusto</div>
<nav class="päävalikko">
<a href="../Home.html">Koti</a><a href="../Lion.html">Leijona</a><a href="../Tiger.html">Tiikeri</a><a href="../Jaguar.html">Jaguar</a><a href="../House Cat.html">Kotikissa</a>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<div class="pääsisältö" id="leijona">
<h1>Tämä on leijona!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>

Tämä HTML rakentaa valmiin verkkosivuston projektiamme varten. Voit purkaa sen osiin nähdäksesi, miten se toimii, mutta kehotamme sinua luomaan oman HTML-koodin verkkosivustollesi.

@charset "utf-8";
body {
 marginaali: 0;
 tausta: musta;
 kirjasinperhe: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.main-header {
 näyttö: flex;
 tausta: musta;
 täyte: 20px;
}
.site-logo {
 leveys: 30 %;
 väri valkoinen;
 fontin paino: lihavoitu;
 tekstin muunnos: isot kirjaimet;
}
.päävalikko {
 leveys: 70 %;
 tekstin tasaus: oikea;
}
.päävalikkoa {
 täyte: 10px;
 tekstikoristelu: ei mitään;
 väri valkoinen;
}
.main-content {
 korkeus: 100vh;
 täyte: 20px;
 taustan koko: kansi;
}
.main-contenth1 {
 väri valkoinen;
 fontin koko: 10rem;
 tekstin muunnos: isot kirjaimet; 
}
#leijona {
 taustakuva: url("Images/largelion.png");
}
#tiikeri {
 taustakuva: url("Images/tiger.png");
}
#jaguar {
 taustakuva: url("Images/jaguar.png");
}
#kotikissa {
 taustakuva: url("Images/housecat.png");
}
#allcats {
 taustakuva: url("Images/loadsofcats.png");
}

Tämä CSS on myös osa valmisprojektia. Kuten käsittelemämme HTML-koodi, voit pelata tällä koodilla tehdäksesi tästä verkkosivustosta omasi.

Verkkosivustojen luominen Adobe Dreamweaverilla

Dreamweaver ei ehkä vaikuta yhtä helppokäyttöiseltä kuin WordPressin tai Squarespacen kaltaiset työkalut, mutta se antaa sinulle paljon enemmän tehoa. Tämä opas on loistava lähtökohta, mutta opittavaa on paljon, ja Dreamweaveriin kannattaa tutustua itse.