Registriraj se
cc

Izmenjava
 












  • Logo(1)
  • razlika v ceni ....(3)
  • Dreamweaver vrašanje(7)
  • Delo dobi...(1)
  • Iščemo arhitekturne projektante!(0)
  • Okus 51. beneškega bienala umetnosti (0)
  • Splet 2.0? (0)
  • Reason - Šola z razlogom 5. del (1)
  • Animiran metulj (0)
  • Reason - Šola z razlogom 4. del (0)
  • Taktike & praksa: Seminar novomedijske umetnosti (0)
  • Povabilo k sodelovanju na festivalu HAIP10 (0)
  • Apple iPad: odiseja v vesolju? (0)
  • Game Developers Conference San Francisco 2010 (0)
  • Google Chrome Beta za Mac in Linux ter razširitve (0)

  •      
     
    Spletno oblikovanje - 3. del Zadni del obsežnega večdelnega znalca o spletnem oblikovanju izpod tipkovnice Flasherja.
    Avtor/ica: Flasher
    Ogledov: 3920
    Komentarji: 4
    Priljubljene: 0
       
    Znalci > Spletno oblikovanje > Spletno oblikovanje - 3. del
       
    slikaslika

    V tretjem koraku sem obljubil razlago, zakaj širina dokumenta ravno 750 pix! S to velikostjo je zadovoljen tisti minimum, ki ga pri spletnem oblikovanju zaenkrat še toleriramo: ločljivost 800x600. 750 pix je maksimalna širina objekta, ki še bo v ločljivosti 800x600 v celoti viden. Iz istega razloga smo razrezali glavni objekt na več kosov. Ti sedaj delujejo kot nekakšen raztegljivi meh, ki se po potrebi razteguje in krči.
       
    slikaslika

    Na vrsti je oblikovanje/vstavljanje teksta.
    V 4. polju glavne tabele, bomo vstavili novo tabelo, ki nam bo služila za lažje pozicioniranje besedila in elementov: Insert/Table (rows: 4, columns: 7, Cell Padding: 0, Cell Spacing: 0, Width: 100%, Border: 0). Tabelo moramo, s pomočjo združevanja in spremembe širin posameznih celic, dodatno preoblikovati-glej sliko.
       
    slikaslika

    Radi bi naredili naslovček, ki bi vsebinsko ločeval besedilo-poženimo Photoshop: File/New (Ctrl +N), velikosti 200x30 pix, v RGB barvni skali, ločljivosti 72 dpi in ozadjem: #303A47. Za podjetje se spodobi uvod v stilu "Dobrodošli,..." pa tako tudi začnimo: Type Tool (font: Photoshop Small, size: 48pt, color:#FFFFFF). Logo oz. znak se na strani lahko uporablja večkrat in v različne namene: odprimo logo.psd iz priložene datoteke in ga dodajmo pred napis ter ga pomanjšamo.
    Sliko shranimo kot txt1.jpg.
       
    slikaslika

    Besedilo bi radi še nekako ločili. Uporaba tanke črtkane črte, je ena izmed bolj elegantnih rešitev kako to storiti. V Photoshopu odprimo nov dokument: File/New (Ctrl +N), velikosti 5x15 pix, v RGB barvni skali, ločljivosti 72 dpi in ozadjem: #303A47. Sedaj pa nekje na polovici višine pravokotnika narišemo kvadratek, ki bo segal do polovice širine pravokotnika in ga pobarvamo z belo.
    Sliko shranimo: vod.jpg in jo zarotiramo za 90 st.-spet jo shranimo: ver.jpg.
       
    slikaslika

    Čaka nas še poslednje dejanje v Photoshopu. Če ste pozorno brali vidite, da imamo sedaj zapolnjena vsa polja tabele, razen enega. Še enkrat bomo uporabili enak trik in uporabili logo podjetja. Tokrat ga bomo pomanjšali na širino 200 pix in pri tem ohranili razmerje višine in širine. Z orodjem Magic Wand odstranimo bele površine in za ozadje postavimo barvo: #303A47. Plast z znakom naredimo bolj prosojno: Opacity 50%.
    Shranimo kot logo2.jpg.
       
    slikaslika

    Vrnimo se v DreamWeaver, tam bomo vstavili prej narejene slike (še enkrat poglejmo sliko iz koraka 16). Najprej vstavimo sliki txt.jpg (v tretje polje) in logo2.jpg (v šesto polje). Preostali dve sliki bomo uporabili kot ozadje: vod.jpg (v prvem polju) in ver.jpg (v petem polju). V polje 4 vpišemo kratek nagovor obiskovalcu – font: Verdana, barva: #CCCCCC. Desni del tabel zapolnimo po istem principu kot levega!
       
    slikaslika

    Prva stran oz. template je skoraj dokončan! Navigacija strani je vse prej kot vsakdanja, namreč celotna je v enem kosu, vključno s samo glavo. Tega "problema" se bomo lotili tako, da bomo posameznim delom slike določil različne reference (povezave). Kliknemo na sliko, nato v orodjarni (Properties Window) izberemo Rectangular HotSpot Tool in narišemo območja, ki bodo predstavljala povezave. Vsakemu območju določimo referenčni dokument!
       
    sako slovo je grenko, namreč prišli smo do konca. Če dokumenta še niste shranili, to storite sedaj in ga z vašim brskalnikom poženite. Ako ste natančno sledili vsem korakom, bi morala stran v vseh ločljivostih izgledati enako-ne sme prihajati do zamikov teksta ali slik.
    Direktor podjetja List d.o.o. vam zadovoljno pomoli sveženj denarcev in se vam zahvali za sodelovanje. Pojdite,...pojdite in zapravljajte!

    (v spomin Zdenku Severju)
       
    Znalci > Spletno oblikovanje > Spletno oblikovanje - 3. del