Dreamweaverin perusteet

Adobe Dreamweaver ohjelman avulla voidaan luoda, koodata ja hallita dynaamisia verkkosivustoja yksinkertaista koodausmoduulilla. HTML, CSS ja muu webbistandardien avulla voidaan helposti luoda nettisivustoja omanmaun mukaan. 

HTML (lyhenne sanoista Hypertext Markup Language[1], suomennettuna hypertekstin merkintäkieli) on avoimesti standardoitumerkintäkieli, jolla voidaan kuvata hyperlinkkejä sisältävää tekstiä eli hypertekstiä. HTML:llä voidaan myös merkitä tekstin rakenne eli esimerkiksi, mikä osa tekstistä on otsikkoa ja mikä leipätekstiä. HTML tunnetaan erityisesti kielenä, jolla internetsivut on kirjoitettu.

https://fi.wikipedia.org/wiki/HTML

Cascading Style Sheets (lyh. CSS[1], kirjaimellisesti ”porrastetut tyyliarkit”) on erityisesti verkkosivuille kehitetty tyylisivu. CSS:ssä dokumentille voi määritellä useita tyyliohjeita, jotka yhdistetään tietyllä tavalla yhdeksi säännöstöksi. CSS-tiedostojen pääte on yleensä .css

https://fi.wikipedia.org/wiki/Cascading_Style_Sheets

Miten luodaan nettisivustoa?

  • Verkkosivustojen rakentamisessa ensimmäinen työvaihe on suunnitteluvaihe, jossa mietitään yleisön tarpeita, asiakkaan tarpeita, teknisiä ja -markkinointivaatimuksia. Tässä myös suunnittelet millaista designit, tyylit ja elementit haluaisit luoda verkkosivustollesi. On aina hyvä tehdä moodboardejä, jossa teit netti sivupohja ja voisit myös katsoa sopiva fontti ja värimaailma etukäteen. Pitää myös miettiä domain, host ja serverista saadakseen kaikki tekniset asioita kuntoon. 
  • Kun luodaan nettisivun, kannatta miettiä millaista elementtejä tule olemaan nettisivussa. Sen perusteella voidaan luoda joko paperilla tai Illustratorissa nettisivun pohja. Kun visio ja tyyli on selkeä, se on helpompi luoda sivustoa Dreamweaverissä. 
  • Yleensä nettisivustossa tule olemaan eri elementtejä kuten:  
  • body – se on sama kuin tiedoston arki 
  • container – se on se ruskea laatikko, jonka sisällä tulee kaikki muut elementit 
  • header – eli ylätunniste – tässä tulee pääotsikko, tausta kuva, logot, some ikonit jne., 
  • nav – eli navigation bar – tässä tulee sivustossa oleva sivunimet kuten etusivu, palvelut, hinnasto, yhteystiedot jne., 
  • main – se on alue, jossa tulee sisältöä kuten taulukot (jossa on tr (koko rivi) td (solut)), kappaleet, kuvat jne., 
  • Footer – alatunniste – tässä tulee some ikonit, kategoriat, maps jne., 

Kuvassa lisää tietoa: 

Nettisivupohja esimmerkki

Dreamweaver tutuksi:

Dreamweaver koodi ikkunassa, kun kirjaimella on valkoinen väri se tarkoittaa, että teksti on sisältöä, vihreä väri tarkoittaa class (itse keskity nimet) ja punainen väri tulee, kun on virheettä koodissa. 

  1. Avaa dreamweaver. File ->New document ->Kirjoittaa Title nimi (esim. Kertaussivisto – Etusivu), doc type -html – OK.  
  1. Ihan alussa kirjoitetaan html tagit kaikille elementille ja sen jälkeen tehdään CSS tyylit. Kaikki elementit tulee olemaan body:n sisällä.  
  1. Body:n sisällä luodaan uusi div elementit. Insert – Div -Insert Div:ssa -> Insert at insertion point -> container -> OK. Poista sisältöä. 

4. Seuraava elementti on navigation bar jossa tulee kaikki sivu nimet. Insert -> Div ->at insertion point -> nav ->OK.

5. Samalla tavalla seuraavaksi luodaan main elementti. Insert – > Div -> class at insertion point -> main -> OK. Main:ssa lisätään kaikki sisältöä. 

  • lisää otsikon Insert – heading -<h1>Etusivun kuvaava pääotsikko</h1>.  
  • lisää kuvat Insert – image 
  • lisää kappaleet – Insert –paragraph (<p>kappale</p>) 

6. Seuraavaksi lisätään footer eli alatunniste. Insert -> Div ->class at insertion point -> Footer – > OK 

CSS Tyylit

Kun kaikki elementit on luotu ja pohja on valmis voidaan, määritä tyyliä. Tässä on erilaisia tyyli vaihtoehtoja jokaiselle elementille mitä olen käyttänyt harjoittelu tehtävässä.

Windows -> CSS Designer ->In Sources -> Create a New CSS File

Body: se on samaa kuin tiedoston arkki jossa tulee kaikki sisältoä. Ensin määritellään bodylle tyylit.

body – css tyylit

.container : sen sisällä tulee kaikki sisältöä. Tässä märitellään container:lle tyylit

  • width: 1200px;
  • min-height: 700px;
  • margin-left: auto;
  • margin-right: auto;
  • margin-bottom: 50px;
  • background-color: #EDE4E4;

.header : tässä märitellään ylätunnisteelle tyylit, kuten koko ja tausta kuva

  • height: 350px;
  • background-image: url(kuvat/header_bg.jpg);

.logo: header:ssa taustakuvan päällä tulee logo tässä tapauksessa

  • margin-top: 50px;
  • margin-left: 100px;

.nav: se on navigation bar jossa tulee nettisivuston sivu nimet kuten etusivu, palvelut, hinnasto

  • background color :
  • height : 40 px;
  • text-align: centre;

.navilinkki: tässä märitellään nav:n sisällä kirjoitettu tekstille tyylit

  • margin-left: 10px;
  • margin-right: 10px;
  • text-align: center;
  • line-height: 40px;
  • text-decoration: none;
  • font-size: 20px;
  • color: #472021;

a:hover: se alleviivaa ja linkkitää navigation barissa kirjoitettu sivunimet oikealle sivulle

  • text-decoration: underline;
  • color: #9591C5;
  • text-shadow: 0px 0px;

a: Jos käytetään sanat sisällössä mitä pitää toimia linkinä ja halutaan eri värit yksittäissanoille, käytetään a class.

color: #F14A90;
text-decoration: none;

.main: tässä määritellään main:lle tyllit.

  • padding-left: 150px;
  • padding-right: 150px;
  • padding-top: 50px;
  • padding-bottom: 50px;

hr: se tarkoittaa horizontal line. Jos halutaan käyttää viiva sisällössä.

  • width: 150px;
  • border: 1px solid #69BD70;
  • height: 1px;
  • float: none;

p: tässä märitellään kappale tyylit

color: #090808;
line-height: 24px; (line height on sama kuin leading)

.alatunniste: tässä märitellään footerilla oleva tekstille tyylit

  • font-size: 16px;
  • line-height: 18px;
  • text-align: left;

.footer : tässä märitellään footer laatikolle tyylit

  • padding-left: 150px;
  • padding-bottom: 30px;
  • padding-top: 20px;
  • border-top: 1px solid #8D2D2E;

table : taulukkon tyylit

  • margin-top: 15px;
  • border: 2px solid #8D3233;
  • padding: 5px;
  • border-collapse: collapse; ( to fit the table inside the frame)

td : taulukko solujen tyylit
padding: 5px;

tr: taulukko rivien tyylit
background-color: #D39595;

tr:nth-of-type(odd) : jos haluat eri värit riveille
background-color: #CFBCBC;

.container .main img : Jos laitetaan kuvat erikseen containerissa. Esim: omakuva
.omakuva

  • float: left;
  • margin-right: 20px;

EMBED: jos halutaan laittaa maps tai tietoa eri sivustolta omalla sivulla sanotaan embediksi.

Käytetään Insert -> HTML ->iframe tag. Sen jälkeen avaa google maps tai youtube -> share -> embed -> copy link -> liittää dreamweaverissa iframe tagin sisällä.

Kun luodaan tyylit aina kannattaa selaimella tarkistaa, että kaikki elementit toimivat suunnittelu mukaan.

Dokumentointi:

Aina pitää nimetä tiedostoa oikealla tavalla. Etusivu on aina index.html. Muut sivut nimetään aihe.html. Esim: yhteystiedot.html. Kaikki kuvat ja grafiikat laitetaan aina ’kuva’ kansiossa. Kuvat pitää muokata PhotoShopissa, jossa on oikea koot, väri profiili ja tallennetaan export-> save for web -> jpeg muodossa. Jos luodaan grafiikka Illustratorissa, voidaan käyttää ’Asset Export’ ja sen kautta samaan aikaan voidaan exportoida eri formaatilla. 

FTP: File transfer protocol

Wikipedian mukaan, FTP (lyhenne sanoista File Transfer Protocol[1]) on TCPprotokollaa käyttävä tiedostonsiirtomenetelmä kahden tietokoneen välille. FTP-yhteys toimii asiakas-palvelin -periaatteella. Yleensä asiakas (client) ottaa yhteyttä palvelimeen (host tai server), joka tarjoaa FTP-palvelun.

PC:ssa käytettiin Winscp ja Mac:ssa käytettiin Filezilla palvelimen.

WinSCP on ilmainen, graafisella käyttöliittymällä varustettu, SFTP-asiakasohjelma (Secure File Transfer Protocol), joka mahdollistaa turvallisen tiedostojen siirron oman koneen ja palveluntarjoajan palvelimen välillä. SFTP-siirtotavan suurin ero perinteiseen FTP:hen on se, että SFTP:tä käytettäessä kaikki tieto siirtyy salattuna. FTP-protokollaa käytettäessä kaikki tieto liikkuu salaamattomana. Ensimmäinen luonnollinen askel käyttöönotossa on WinSCP-ohjelman lataaminen omalle koneelle.

https://tuki.sigmatic.fi/lyhyt-ohje-winscpn-kayttoon/

FileZilla on avoimeen lähdekoodiin perustuva alustariippumaton FTP-, SFTP– ja FTPS-muotoja tukeva tiedonsiirto-ohjelma.

https://fi.wikipedia.org/wiki/FileZilla

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out /  Muuta )

Google photo

Olet kommentoimassa Google -tilin nimissä. Log Out /  Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out /  Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out /  Muuta )

Muodostetaan yhteyttä palveluun %s

Create a website or blog at WordPress.com

Ylös ↑

Create your website with WordPress.com
Aloitus
%d bloggaajaa tykkää tästä: