glava
     

Cilji vaje:

  • narediti novo spletno stran in jo poimenovati;
  • vstavljati besedilo;
  • dodati naslov in ga postaviti na sredino;
  • obarvati besedilo;
  • oblikovati besedilo;
  • dodati ločevalno črto;
  • shraniti spletno stran in si jo ogledati v brskalniku.

 

Izdelava osnovne spletne strani z besedilom  

Ko odpremo program Nvu, nam ta samodejno ustvari nov prazen dokument. Nov dokument lahko odpremo tudi z menijskim ukazom Datoteka>Nova, kjer v oknu Ustvari dokument ali predlogo označimo, kakšen dokument želimo.

s

s

Prav tako nov dokument kreiramo tudi s klikom na gumb Novo v orodni vrstici. S klikom na puščico ob gumbu Novo razpremo meni, v katerem določimo, kje naj se nov dokument odpre, z izbiro Več možnosti. pa se nam odpre okno Ustvari dokument ali predlogo v katerem nastavljamo dodatne nastavitve novega dokumenta.

s

Nov dokument je privzeto poimenovan (neimenovano) in ni shranjen. Če odpremo več novih dokumentov se ti vsi poimenujejo (neimenovano).

s

Dokument poimenujemo in shranimo v meniju Datoteka>Shrani. V oknu Naslov strani vnesemo naslov strani, s katerim se stran predstavlja v naslovu okna in med zaznamki. Vnesemo naslov Prva spletna stran.

s

V oknu Shrani stran kot moramo najprej izbrati mesto kamor želimo shraniti naš dokument. Mesto shranjevanja določimo v spustnem seznamu Shrani v:. V Ime datoteke vpišemo ime prva, v izbiri Vrsta datoteke: pa izberemo Datoteke HTML.

s

Da si povečamo delovni prostor zaprimo Upravitelja strani Nvu. Ko ga bomo potrebovali, pa ga bomo ponovno odprli.

Vstavljanje besedila

Pri vnašanju besedila v dokumentno okno nam prehodov v novo vrsto ni potrebno posebej vnašati. Če prehod v novo vrsto potrdimo s tipko Enter, s tem prelomimo besedilo. V kodi nam Nvu doda značko preloma <BR>, ki je samostojna in ne nastopa v paru. Značka za prelom v besedilo vstavi en prehod v novo vrstico.

V dokument vstavimo besedilo tako, da se postavimo v dokumentno okno in natipkamo besedilo:
Učim se izdelovati spletne strani s programom Nvu 1.0. Tole je moje prvo besedilo, ki ga vnašam v spletni dokument. Se mi je zdelo, da bo težje. A mi uspeva brez težav.(Enter)
(Enter)
Nekaj podatkov o meni: (Enter)
Ime mi je: . (Enter)
Doma sem: . (Enter)
Moji hobiji so: . (Enter)

s

Dodajanje naslova in postavitev  na sredino

Pred besedilo bomo vrinili še naslov dokumenta. Z vrivnikom se postavimo pred prvi znak, v našem primeru pred besedo Učim., nato pa z Entrom vstavimo dva preloma besedil. Za naslov vpišemo:

Moja prva stran

s

Naslov v dokumentu bomo postavili na sredino. Vrivnik postavimo v besedilo Moja prva stran in v vrstici za oblikovanje kliknemo na gumb Poravnaj na sredino.

s

Nastavitev barv besedila

Privzeta barva besedila na strani je črna. V pogovornem oknu menija Oblika>Barva besedila. lahko spremenimo barvo besedila. Barvo besedila lahko spremenimo tudi s klikom na gumb Izberi barvo besedila v vrstici za oblikovanje.

s

Naš naslov v dokumentu bomo obarvali modro. Naslov označimo in v vrstici za oblikovanje kliknemo gumb Izberi barvo besedila. V oknu Barva besedila izberemo modro barvo. To lahko storimo na več načinov:

  • izberemo barvo v vnaprej določenih barvah,
  • si sami namešamo barvo,
  • vnesemo vrednost barve za RGB model,
  • vnesemo šestnajstiško oznako,
  • vnesemo ime barve.

s

Če poznamo oznako ali ime barve lahko v polje za vnos barve vpišemo številko barve v šestnajstiški  obliki, npr. za modro #0000FF ali pa kar njeno ime blue. Seznam imen barv si lahko ogledamo na spletni strani http://www.w3schools.com/html/html_colornames.asp .

Shranjevanje dela in predogled v brskalniku

Shranimo naš prvi dokument z ukazom Shrani v meniju Datoteka ali s tipkovno bližnjico Ctrl+S ali pa s klikom na gumb Shrani datoteko na lokalno mesto v orodni vrstici. Našo datoteko si sedaj oglejmo v brskalniku. To storimo tako, da v orodni vrstici kliknemo gumb Prebrskaj.

s

V oknu Zahteva zunanjega protokola potrdimo polje Mojo odločitev si zapomni za vse povezave tega tipa in zaženemo brskalnik z ukazom Poženi program.

s

V brskalniku so se nepravilno prikazali šumniki.

s

Zato si datoteko še enkrat shranimo z menijskim ukazom Datoteka>Shrani in spremeni kodiranje znakov. V oknu Shrani in spremeni nabor znakov izberemo Unicode(UTF-8) in potrdimo shranjevanje.

s

Ponovno si ogledamo dokument v brskalniku. Šumniki so se sedaj prikazali pravilno.

s

s

Zaprimo brskalnika in se vrnimo v program Nvu.

Lepljenje besedila iz datoteke

Odprimo si nov prazen dokument v programu Nvu. Shranimo ga z imenom cas.html v isto lokacijo na trdem disku, kamor smo shranili prvi dokument (prva.html).Dokument pa poimenujmo Čas in prostor.

Pri poimenovanju dokumentov je priporočljiva previdnost. Izogibajmo se slovenskih krilatih črk, presledkov in ostalih dobrot v dolgih imenih datotek. Prej ali slej nam bodo v širnem internetu prinesle težave.
Da nam ne bo potrebno tipkati, si bomo besedilo prekopirali iz urejevalnika besedil. V mapi gradiva bomo našli že pripravljeno besedilo v datoteki cas.doc. Datoteko odprimo, označimo besedilo in ga kopirajmo v odložišče z ukazom v meniju Urejanje>Kopiraj (tipkovna bližnjica je Ctrl+C).

V Nvu postavimo vrivnik tja, kamor želimo nalepiti besedilo. V meniju Urejanje izberemo ukaz za lepljenje Prilepi brez oblikovanja, ki nam v dokument vstavi samo besedilo, oblike pa ne. Ukaz v meniju Urejanje>Prilepi nam poleg besedila v dokument prilepi tudi oblikovanje besedila.

s

Oblikovanje besedila

Besedilo, ki smo ga prekopirali iz urejevalnika besedila bomo oblikovali, da bo dobilo lepšo in preglednejšo obliko.

Uporaba oblikovanja besedila

Z menijem v vrstici za oblikovanje bomo uporabili standardno oblikovanje HTML za besedilo. Na voljo imamo štiri osnovne možnosti oblikovanja:

  • Telo besedila - odstrani vse sloge, ki so trenutno uporabljeni na izbranem besedilu.
  • Odstavek - izbranemu besedilu doda značke odstavka <P></P> in dva prehoda v novo vrsto.
  1. Naslov 1 do Naslov 6 - slogi naslovov, doda značke <H1></H1> . <H6></H6>. Slog Naslov 1 je največji,  slog Naslov 6 pa najmanjši naslov.
  2. Naslov - izbranemu besedilu doda značke <ADDRESS></ADDRESS> in besedilo postavi ležeče.
  3. Predoblikovano - prikaže besedilo v nesorazmerni pisavi.

Izberimo besedilo ČAS IN PROSTOR in ga oblikujmo v slog Naslov 1.

s

Podobno preoblikujmo tudi besedo Čas v slog Naslov 3.

s

Označimo prvi odstavek in ga poravnajmo obojestransko. Obojestransko poravnajmo tudi preostale odstavke, ki vsebujejo več besedila.

s

Seznami

Uporabljamo lahko označene sezname, ki jim v jeziku HTML pravimo neurejeni seznami, in oštevilčene sezname, ki jih v jeziku HTML imenujemo urejeni seznami. Označeno besedilo v seznam oblikujemo z gumboma v vrstici za oblikovanje.

s

Označimo besedilo drugega odstavka v našem dokumentu in ga spremenimo v urejen oziroma oštevilčen seznam.

s

Podobno bomo preoblikovali tudi odstavek, ki se začne z besedilom Enote časa: v neurejen oziroma označen seznam.

s

Spreminjanje velikosti besedila

Pisavi lahko spreminjamo velikost. V jeziku HTML ne moremo prirediti točno določene velikosti v pikah. To lahko storimo z uporabo palete za urejanje slogov CSS (Cascading Style Sheets).

Označimo odstavek besedila Natančneje določimo enoto časa. in mu določimo velikost besedila z menijskim ukazom Oblika>Velikost na vrednost majhno. Z gumboma v vrstici za oblikovanje zmanjšujemo ali večamo pisavo. Pri tem načinu velikost pisave ocenimo vizualno.

s
s

Umikanje besedila

Odstavek, ki smo mu spremenili velikost besedila, zamaknimo v levo z umikanjem besedila. To storimo tako, da kliknemo na gumb Zamakni v desno v vrstici za oblikovanje.

s

Izbira pisave

Besedilu lahko namesto privzete pisave, ki je običajno Times New Roman, dodelimo drugo pisavo. To storimo tako, da označimo besedilo, ki mu želimo spremeniti pisavo, nato pa izberemo nabor pisav ali pisavo v vrstici za oblikovanje.

Če sami vidimo pisavo na svojem zaslonu, to še ne pomeni, da bodo pisavo enako videli tudi obiskovalci naše spletne strani. Če pisave nimajo nameščene v računalniku, bo brskalnik uporabil privzeto nadomestno pisavo.

V našem primeru bomo naslovoma ČAS IN PROSTOR in Čas spremenili pisavo v Helvetica, Arial.

s

Dodajanje ločevalne črte

Vodoravna črta je grafični element, ki je v kodi HTML zapisan z značko <HR>. V isti ravnini ne more poleg ločevalne črte stati noben drug element.

Vodoravno črto vstavimo tako, da v meniju Vstavi izberemo Vodoravna črta. Seveda se moramo pred tem z vrivnikom postaviti na mesto kamor želimo vstaviti vodoravno črto. Mi jo bomo v našem primeru vstavili v predzadnjo vrstico našega dokumenta.

s

Našemu dokumentu dodajmo še nekaj lastnosti oblik, da dobimo končno želeno obliko:

  • obarvajmo naš glavni naslov ČAS IN PROSTOR z modro barvo z oznako #0000FF,
  • obarvajmo podnaslov Čas z oranžno barvo z oznako #FF9900,
  • urejenemu (oštevilčenemu) seznamu spremenimo pisavo v ležeče, kar storimo v vrstici za oblikovanje s klikom na gumb Kurzivno,

s

  • besedilu Enote časa: določimo lastnost krepko, kar storimo v vrstici za oblikovanje s klikom na gumb Krepko,

s

  • zadnji dve vrstici poravnajmo na sredino in jima dodelimo slog Predoblikovano, kar storimo v vrstici za oblikovanje v izbiri.

s

Nastavljanje lastnosti strani

Dokumentu lahko dodelimo še nekaj lastnosti in nastavitev. Ozadje našega dokumenta bomo obarvali v svetlo sivem tonu #EFEFEF. To storimo s klikom na gumb Izberi barvo ozadja v vrstici za oblikovanje.

s

s

Dokument še shranimo z menijskim ukazom Datoteka>Shrani in spremeni kodiranje znakov. Nastavimo kodiranje znakov na Unicode (UTF-8). Da dokument ni shranjen nam označuje sličica diskete v zavihku z imenom dokumenta. Dokument si oglejmo v brskalniku.

s

s

 

Navodila
Uvod v svetovni splet
Dreamweaver - 01 - Spoznavanje programa
Dreamweaver - 02 - Izdelava osnovne spletne strani z besedilom
Dreamweaver - 03 - Dodajanje slik
Dreamweaver - 04 - Tabele
Dreamweaver - 05 - Ogled in spreminjanje kode HTML
Dreamweaver - 06 - Definiranje spletišča
Dreamweaver - 07 - Postavitev strani
Dreamweaver - 08 - Priprava in uporaba predloge
Dreamweaver - 09 - Povezave
Dreamweaver - 10 - Izdelava slikovnih kart in navigacijskih vrstic
Dreamweaver - 11 - Dodajanje večpredstavnostnih datotek
Dreamweaver - 12 - Izdelava spletnega foto albuma
Dreamweaver - 13 - CSS
Dreamweaver - 14 - Prenos spletišča na strežnik
NVU - 01 - Spoznavanje programa
NVU - 02 - Izdelava osnovne spletne strani z besedilom
NVU - 03 - Dodajanje slik
NVU - 04 - Tabele
NVU - 05 - Povezave
NVU - 06 - CSS
NVU - 07 - Spletišče
NVU - 08 - Objava spletišča

Izhod

 

na vrh