glava
     

Cilji vaje:

  • narediti spletno stran in jo poimenovati,
  • vstaviti 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 nove spletne strani

Novo spletno stran izdelamo tako, da kliknemo v pozdravnem oknu na HTML v izbiri Create New.

s

Če pozdravnega okna nimamo odprtega, si novo stran odpremo v meniju File>New.. V oknu New Document izberemo na levi strani Blank Page (Prazna stran), pod izbiro Page Type kliknemo HTML, v izbiri Layout pa izberemo <none>. S klikom na gumb Create (Ustvari) odpremo nov dokument.

s

Nov dokument je privzeto poimenovan Untitled-1 in ni shranjen. Če odpremo več novih dokumentov se ti poimenujejo Untitled-2, Untitled-3, Untitled-4. Dokument poimenujemo in shranimo v meniju File>Save. V oknu Save As 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 HTML Documents.

s

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 zaključimo odstavek. Adobe Dreamweaver nam tako besedilo označi kot blok besedila in ga postavi med znački <P></P> (Paragraph), zraven pa doda za besedilom še dva prehoda v novo vrsto.

Besedilo lahko tudi prelomimo. Adobe Dreamweaver nam tak prelom označi z značko za prelom <BR> (Break), ki je samostojna in ne nastopa v paru. Značka za prelom v besedilo vstavi en prehod v novo vrstico. Prelom v spletno stran vstavimo s tipkovno bližnjico Shift+Enter ali pa tako, da na listu Text v vrstici za vstavljanje izberemo predmet Line Break (Prelom vrstice).

V dokument vstavimo besedilo tako, da se postavimo v delovno okno in natipkamo besedilo:
Moj prvi spletni dokument.(Enter)
Učim se izdelovati spletne strani s programom Adobe Dreamweaver CS3. 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)

Nekaj podatkov o meni:
Ime mi je: . (Shift+Enter)
Doma sem: . (Shift+Enter)
Star sem: . (Shift+Enter)
Moji hobiji so: . (Enter)

s

Oblikovanje uporabljamo na odstavku  besedila. Pomembno je razumeti razlike med značko za odstavek in značko za prelom. Če dvakrat pritisnemo kombinacijo tipk Shift+Enter dobimo navidez enak učinek, kot da bi pritisnili Enter. V takem primeru odstavek besedila ne bo zaključen in oblikovanje bo veljalo za celotno besedilo in ne le za izbran odstavek.

s

Dodajanje naslova in postavitev  na sredino

Pred besedilo bomo vrinili še naslov dokumenta. Z vnosno črtico se postavimo pred prvi znak, v našem primeru pred besedo Učim., nato pa z Entrom pred besedilo dodamo nov odstavek. Za naslov vpišemo:

 Moja prva stran

s

Naslov bomo dodali tudi naši spletni strani. Ta naslov se bo pojavljal v naslovni vrstici Adobe Dreamweaverja in spletnega brskalnika. Naslov naj bo smiseln in tak, da si ga zlahka zapomnimo, saj si uporabnik ta naslov shrani med zaznamke brskalnika ali na seznam priljubljenih strani.

Naslov dokumenta dodamo v orodni vrstici v vnosnem polju Title: ali pa v meniju Modify>Page Properties. kjer izberemo kategorijo (Category) Title/Encoding.

s

Naslov v dokumentu bomo postavili na sredino. Vnosno črtico postavimo v besedilo Moja prva stran in v oknu z lastnostmi kliknemo na gumb Poravnaj sredinsko.

s

Nastavitev barv besedila

Privzeta barva besedila na strani je črna. V pogovornem oknu menija Modify>Page Properties kategorije Appearance lahko to nastavitev spremenimo.

Naš naslov v dokumentu bomo obarvali modro. Naslov označimo in v oknu z lastnostmi v barvni paleti izberemo modro barvo.

s

Barvo izberemo v barvni paleti.

s

Če poznamo oznako ali ime barve lahko v polje za vnos barve v oknu z lastnostmi 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 https://www.w3schools.com/colors/colors_names.asp .

s

s

Če želimo počistiti barvo besedila, kliknemo na gumb brez barve v barvni paleti.

s

Shranjevanje dela in predogled v brskalniku

Shranimo naš prvi dokument z ukazom Save (Shrani) v meniju File (Datoteka) ali s tipkovno bližnjico Ctrl+S. Našo datoteko si sedaj oglejmo v brskalniku. To storimo tako, da v meniju gumba Preview/Debug in browser v orodni vrstici izberemo brskalnik s katerim si želimo ogledati naš dokument. Dokument si lahko ogledamo tudi s tipkovno bližnjico in sicer s funkcijsko tipko F12. V tem primeru nam Adobe Dreamweaver CS3 odpre dokument v privzetem brskalniku. Seznam brskalnikov in nastavitev privzetega brskalnika nastavljamo v meniju Edit z ukazom Preferences.

s

s

Lepljenje besedila iz datoteke

Odprimo si nov prazen dokument v programu Adobe Dreamweaver CS3. Shranimo ga z imenom cas.html v isto lokacijo na trdem disku, kamor smo shranili prvi dokument (prvi.html).

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 Adobe Dreamweaverju postavimo vnosno črtico tja, kamor želimo nalepiti besedilo. V meniju Edit (Urejanje) izberemo ukaz za lepljenje Paste (tipkovna bližnjica Ctrl+V).

s

Pri vstavljanju kopiranega besedila v dokument lahko izbiramo tudi, kako bomo besedilo vstavili. Lahko vstavimo samo besedilo, na voljo pa imamo tudi možnost vstavljanja oblikovanega besedila, pri čemer le-to obdrži obliko iz urejevalnika besedila. V tem primeru izberemo ukaz posebno lepljenje (Paste Special) v meniju Edit. V oknu Paste Special izberemo želeni način vnosa besedila in vnos potrdimo s klikom na gumb OK.

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 Format v oknu z lastnostmi bomo uporabili standardno oblikovanje HTML za besedilo. Na voljo imamo štiri osnovne možnosti oblikovanja:

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

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

s

Podobno preoblikujmo tudi besedo Čas v slog Heading 3.

s

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

s

Seznami

Uporabljamo lahko označene sezname (v jeziku HTML jim pravimo neurejeni seznami) in oštevilčene sezname (urejeni seznami v jeziku HTML). Označeno besedilo v seznam oblikujemo z gumboma v oknu z lastnostmi.

s

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

s

Ker je besedilo v označenem odstavku le prelomljeno v novo vrsto (z značko <BR>), nam preoblikovanje v seznam celoten označen odstavek preoblikuje v le eno točko seznama. Če želimo, imeti več alinej seznama, moramo med posamezne alineje vstaviti Enter.

s

V našem primeru to storimo tako, da vnosno črtico postavimo na začetek druge vrste pred besedo definiramo v odstavku, ki ga želimo pretvoriti v seznam, na tipkovnici pa pritisnemo tipko vračalko (Backspace). S tem odstranimo prelom v novo vrsto. Za tem pa pritisnemo Enter in seznam dobi še drugo vrsto naštevanja.

s

Podobno bomo preoblikovali tudi odstavek, ki se začne z besedilom Enote časa: v neurejen seznam. Tudi tukaj naletimo na težave. Če se postavimo v odstavek, ali označimo cel odstavek, ali pa označimo samo tisti del besedila, ki ga želimo pretvoriti v neurejen seznam, nam Adobe Dreamweaver CS3 seznam uredi, kot kaže.

s

Z ukazom  Undo Set List Type  v meniju  Edit  razveljavimo postavitev seznama in najprej odstavek razdelimo na dva odstavka. Postavimo se pred besedo leto in z vračalko odstranimo prelom vrstice, nato pa na istem mestu vstavimo Enter. Sedaj odstavek zopet preoblikujmo v neurejen seznam. 

Kot vidimo na sliki rešitev še vedno ni zadovoljiva. Med posameznimi besedami imamo prelome vrstic. Nadomestiti jih moramo z Entri. To storimo tako, da se z vnosno črtico postavimo pred vsako besedo v seznamu in pritisnemo Enter. Na sliki vidimo, da je seznam dobil želeno obliko.

s

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). Adobe Dreamweaver CS3 ima paleto za urejanje slogov integrirano v programu.

Označimo odstavek besedila Natančneje določimo enoto časa. in mu določimo velikost besedila v oknu z lastnostmi v spustnem meniju Size na velikost 12 točk (pixels).

s

Umikanje besedila

Sedaj odstavku, ki smo mu spremenili velikost besedila, spremenimo še njegovo širino z umikanjem. To storimo tako, da kliknemo na gumb Text Indent v oknu z lastnostmi.

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 v oknu z lastnostmi v meniju Font. Pisave v seznamu so urejene v skupinah, kar poveča možnost, da ima uporabnik nameščeno eno od pisav iz skupine.

Če sami vidimo pisavo na svojem zaslonu, to še ne pomeni, da bodo pisavo enako videli tudi obiskovalci naše spletne strani. Če pisave v računalniku nimajo nameščene, bo brskalnik uporabil privzeto nadomestno pisavo. V skupinah pisav, ki so v Adobe Dreamweaverju na voljo po namestitvi programa, so pisave, ki se običajno uporabljajo v operacijskih sistemih Windows in Macintosh.

s

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

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 Insert izberemo HTML in Horizontal Rule. Seveda se moramo pred tem z vrivno črtico postaviti na mesto, kamor želimo vstaviti vodoravno črto. Mi jo bomo v našem primeru vstavili v predzadnjo vrstico našega dokumenta. Ko vodoravno črto vstavimo in jo izberemo, se v oknu z lastnostmi pojavijo še nekatere možnosti, ki jih lahko priredimo črti. Črto lahko poimenujemo, ji določimo širino in višino v slikovnih pikah ali odstotkih zaslona, nastavimo njeno poravnavo in vključimo ali izključimo njeno senčenje.

s

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 oknu z lastnostmi s klikom na gumb Italic,

s

 

  • besedilu Enote časa: določimo lastnost krepko, kar storimo v oknu z lastnostmi s klikom na gumb Bold,

s

  • zadnji dve vrstici poravnajmo na sredino in jima dodelimo slog Preformatted, kar storimo v oknu z lastnostmi v izbiri Format.

s

Nastavljanje lastnosti strani

Dokumentu lahko dodelimo še nekaj lastnosti in nastavitev. To storimo s klikom na gumb Page Properties. v oknu z lastnostmi ali pa v meniju Modify izberemo Page Properties..

s

Okno ima različne kategorije (Category). Mi bomo izbrali Appearance (videz), v katerem lahko nastavljamo lastnosti ozadja okna in robove. Ozadje našega dokumenta bomo obarvali v svetlo sivem tonu. To storimo s klikom na gumb Background color:.

s

Ker nam barvna paleta ne nudi možnosti izbiranja dovolj svetlih sivih tonov, bomo barvo izbrali v oknu za mešanje barv.

s

V oknu za mešanje barv z drsnikom na desni strani (črn trikotnik) izberemo želen sivi ton. S klikom na gumb Dodaj med namešane barve si izbrano barvo lahko shranimo za kasnejšo uporabo, s klikom na gumb V redu pa potrdimo barvo ozadja. S klikom na gumb OK zapremo okno z lastnostmi strani.

Naš dokument poimenujmo Čas in prostor tako, da vpišemo ime v orodno vrstico v rubriko Title: in ga shranimo s kombinacijo tipk Ctrl+S. Če dokument ni shranjen, nam to označuje zvezdica v zavihku z imenom dokumenta.

s

S pritiskom na funkcijsko tipko F12 si končno podobo dokumenta oglejmo še v brskalniku.

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