Dreamweaver stvara stranicu na temelju predloška. Instaliranje predloška u Dreamweaver. Grafičke opcije
Sada smo dovršili našu treću web stranicu. Sve radi, sve se stranice učitavaju normalno i prikazuju se u web pregledniku. Čini se da nema razloga za brigu.
Ne, ali samo trenutno.
Zamislimo takvu situaciju. Iznenada smo odlučili dodati novu stranicu na našu web stranicu. Da bismo to učinili, moramo promijeniti navigacijsku traku na svim stranicama, a da bismo to učinili morat ćemo otvoriti svaku od njih u prozoru dokumenta, dodati poveznicu i spremiti stranicu. Naša stranica je male veličine i ovaj ćemo posao završiti prilično brzo. Što ako je bio izvrstan?
Naravno, možemo koristiti Dreamweaverove ugrađene alate. Na primjer, pozovite dijaloški okvir Pronaći i Zamijeni - proizvod je izuzetno moćan. (Za informacije o traženju i zamjeni podnizova, pogledajte Poglavlje 2.) Ili počnite zamjenjivati hiperveze pozivanjem stavke Promijenite vezu na cijelom web-mjestu Jelovnik stranica ploče stranica(vidi poglavlje 6). U mnogim slučajevima to će nam pomoći da brzo zamijenimo cijele dijelove sadržaja stranice ili HTML koda. Knjižnica sredstava i elemenata, također opisana u 6. poglavlju, može biti od velike pomoći.
Ali što ako želimo napraviti neke značajne promjene, na primjer, radikalno promijeniti strukturu tablice izgleda? Malo je vjerojatno da će nam pomoći pretraživanje i zamjena, a još manje automatska zamjena hiperveza. Čak nam ni imovina s knjižnicom neće pomoći u ovom slučaju. Zar stvarno moraš ponovno prepravljati sve stranice?!
Da ne radite u Dreamweaveru, vjerojatno biste ovo morali učiniti. Ali imali smo sreće. Dreamweaver podržava moćne predloške. Već su spomenuti u 3. poglavlju. Sada ćemo ih pogledati detaljnije.
Uzorak- ovo je neka vrsta uzorka, "kostur" web stranice, koji sadrži elemente zajedničke svim stranicama. Kada kreirate novu stranicu na temelju predloška, sve što trebate učiniti je unijeti jedinstveni sadržaj upravo te stranice na prava mjesta i spremiti ga. Predložak možete promijeniti kasnije, a Dreamweaver će ažurirati sve stranice na temelju njega.
U tom smislu, predlošci su slični elementima knjižnice (vidi Poglavlje 6). Razlika je u tome što je predložak predložak za cijelu stranicu, a biblioteka pohranjuje samo tu stranicu pojedinačni elementi. Međutim, programeri Dreamweavera vjeruju da su predlošci najbliži u "povezanosti" sa imovinom (vidi Poglavlje 6), te su postavili popis predložaka na ploču Imovina.
U početku se predložak ne može mijenjati, odnosno kada na temelju njega izradite stranicu, sadržaj možete postavljati samo na posebno označena mjesta - područja za uređivanje. Ne možete uređivati elemente samog predloška jer su to nepromjenjiva područja. Ako želite nešto ispraviti, morat ćete otvoriti sam predložak u prozoru dokumenta. Dakle, Dreamweaver vas spašava od pogrešne promjene predloška i, sukladno tome, od iskrivljavanja web stranica stvorenih iz njega.
Možemo reći da su predlošci obične web stranice. Prilikom uređivanja možete tretirati predloške kao obične web stranice i koristiti iste alate. Također možete postaviti parametre stranice koja će biti kreirana na temelju ovog predloška (naslov, boja pozadine, tekst i hiperveze). Međutim, prilikom izrade HTML koda Dreamweaver predlošci koristi mnoge vlastite oznake i atribute, tako da nije sasvim točno reći da je predložak obična web stranica.
Predlošci se spremaju u datoteke s nastavkom .dwt u mapi Predlošci koja se nalazi u korijenskoj mapi lokalna kopija mjesto. Iz toga slijedi da su predlošci sastavni dio vaše stranice, baš kao i biblioteka. Za korištenje bilo kojeg predloška na drugom mjestu, morat ćete ga kopirati na to mjesto pomoću standardnim sredstvima Dreamweaver (vidi Poglavlje 6). Na jednom mjestu može se koristiti nekoliko predložaka.
Predlošci su vam najkorisniji ako izrađujete stranice na temelju tabličnog dizajna. Takve stranice gotovo uvijek sadrže mnogo ponavljajućih elemenata, čije je ručno ažuriranje izuzetno zahtjevno. Ali također možete pripremiti predloške za "obične" stranice. To može biti potrebno, na primjer, ako izradite stranice s istim dizajnom za veliko korporativno web mjesto.
Dreamweaver dolazi s dosta predložaka koje su izradili profesionalni web dizajneri. Ove predloške možete koristiti za izradu svojih stranica; kako se to radi raspravljalo se u 3. poglavlju. Pokušajte - možda pronađete nešto što vam odgovara.
Izrada stranice pomoću postojećeg predloška
Možete odabrati, pregledati i stvoriti novi dokument iz postojećeg predloška. Možete koristiti dijaloški okvir Novi dokument. za odabir predloška s bilo kojeg mjesta definiranog u Dreamweaveru ili upotrijebite ploču Sredstva. za izradu novog dokumenta pomoću postojećeg predloška.Stranica iz predloška
1. Odaberite Datoteka > Novo.
2. U dijaloškom okviru Novi dokument odaberite kategoriju Stranica iz predloška.
3. U stupcu Web stranica odaberite stranicu Dreamweaver koja sadrži predložak koji želite, a zatim odaberite predložak s popisa s desne strane.
4. Poništite potvrdni okvir "Osvježi stranicu kada se predložak promijeni" ako ne želite osvježavati ovu stranicu svaki put kada napravite promjene u osnovnom predlošku.
5. Pritisnite gumb Postavke za postavljanje zadanih postavki dokumenta, poput vrste dokumenta, kodiranja i ekstenzije datoteke.
6. Kliknite Nabavite više sadržaja... da biste otvorili Dreamweaver Exchange, gdje možete dobiti više sadržaja za stiliziranje svoje stranice.
7. Pritisnite gumb Novo i spremite dokument (Datoteka > Spremi).
Stvaranje dokumenta pomoću predloška s ploče Sredstva ("Resursi")
1. Otvorite ploču Sredstva (Prozor > Resursi), ako već nije otvorena.
2. Na ploči Sredstva (Resursi), kliknite ikonu Predlošci na lijevoj strani da biste vidjeli popis predložaka na trenutnom mjestu.
Ako je predložak koji želite primijeniti upravo stvoren, možda ćete morati kliknuti gumb Ažuriraj da biste ga vidjeli.
3. Desnom tipkom miša (Windows) ili Control-klik (Macintosh) predložak koji želite primijeniti, a zatim odaberite Novo iz predloška.
Dokument se otvara u području prozora dokumenta.
4. Spremite dokument.
Ogledna stranica
Dreamweaver uključuje nekoliko profesionalno dizajniranih CSS datoteka i početnih stranica za mobilne aplikacije. Ogledne datoteke možete koristiti kao početnu točku za dizajn stranica svoje web-lokacije. Kada izradite dokument iz uzorka datoteke, Dreamweaver stvara kopiju datoteke.
Možete pregledati oglednu datoteku i pročitati kratak opis elemenata dizajna stranice u dijaloškom okviru Novi dokument. Pri korištenju tablica CSS stilovi Možete kopirati unaprijed dizajniranu tablicu stilova i primijeniti je na svoje dokumente.
1. Odaberite Datoteka > Novo.
2. U dijaloškom okviru New Document odaberite kategoriju Sample Page.
3. U stupcu Sample Folder odaberite CSS Style Sheet ili Početna stranica Mobile", a zatim odaberite uzorak s popisa s desne strane.
4. Pritisnite gumb "Stvori".
Novi dokument otvara se u području prozora dokumenta (prikaz koda i dizajna). Odabirom CSS stilske tablice otvorit će se stilska tablica u prikazu koda.
6. Kada se pojavi dijaloški okvir Kopiraj zavisne datoteke, postavite opcije i kliknite gumb Kopiraj da kopirate resurse u odabrani direktorij.
Možete odabrati vlastitu lokaciju za ovisne datoteke ili koristiti zadanu lokaciju koju je generirao Dreamweaver (na temelju izvornog naziva datoteke uzorka).
Kako biste stvorili predloške stranica u Dreamweaveru, morate koristiti izbornik File -> Save As Template. Počnimo ih stvarati. Najprije izradimo predložak početna stranica buduća stranica. Da biste to učinili, odaberite oznaku s datotekom index.html otvorenom u Dreamweaveru. Zatim u glavnom izborniku programa odaberite File -> Save As Template.. (spremi kao predložak). Kao rezultat ovih radnji pojavit će se ploča prikazana na donjoj slici.
Zatim, sve što trebate učiniti je kliknuti gumb Spremi, pojavit će se ploča s pitanjem "Ažurirati veze?" na što morate odgovoriti "Da". Kao rezultat toga, u mapi s našim projektom pojavit će se još jedna mapa pod nazivom "Predlošci", au njoj će se nalaziti datoteka pod nazivom index.dwt. Ovo je pravi predložak početne stranice web stranice. Budući da je ova datoteka već otvorena u radnom prozoru Dreamweavera, možete pogledati njen kod i saznati po čemu se razlikuje od koda u datoteci index.html. Uostalom, izvana, te se datoteke ne razlikuju kada se otvore u pregledniku. Pa u čemu je trik? A trik je u tome što između oznaka
I natpisi su bili označeni zelenom bojom.
To su takozvana područja koja se mogu uređivati. Što to znači? To znači da ako je stranica stranice povezana s ovu datoteku predloška, tada se promjene na stranici mogu napraviti samo na tim mjestima. Ostatak takve stranice bit će zatvoren za uređivanje.
Sada se cijela stranica sastoji od samo jedne stranice - indeks. Ali vaša će se stranica sastojati od više od jedne stranice, zar ne? Zatim krenimo na izradu ostalih stranica.
Podrazumijeva se da biste već trebali imati sliku u glavi približnog sadržaja preostalih stranica vaše stranice. Ako ga još nemate, savjetujem vam da izgradite ovu sliku u svojoj glavi daljnji rad on će puno pomoći.
Općenito, imate li nazive odjeljaka i pododjeljaka? Logično je započeti s njihovim stvaranjem.
Prvo otvorite indeksnu stranicu u Dreamweaveru. Sada ga spremite pokretanjem naredbe Datoteka | Spremi kao, ali pod drugim imenom. Pretpostavimo da se zove vaša druga stranica Države(članci). Stoga spremite indeksnu stranicu pod imenom navodi.
Sada imate dvije identične stranice blizanke s različitim imenima. Ali zašto vam trebaju dva potpuno na web mjestu? identične stranice, iako pod drugim imenima? Mislim da apsolutno nema smisla.
Dakle, bez zatvaranja Dreamweavera, napravite promjene na svojoj novoj stranici, koju ću nazvati zadanom Države. Umetnite sve slike, napišite tekst... Oživite svoje ideje o ovoj stranici. Naravno, u početku može biti samo nekoliko odlomaka, ali ovo je samo prva opcija?
Spreman? Onda idemo na Svojstva stranice. Sjećate li se još kako se to radi? Naredba izbornika Izmijeni | Svojstva stranice ili tipkovni prečac
Pored natpisa Titula napiši naslov svoje stranice. U ovom slučaju, "Članci". Također možete napisati "naziv vaše stranice > članci" ili obrnuto, "članci > naziv vaše stranice".
Usput, imaš li naslov za glavnu stranicu? Što je uopće naslov? To je ono što se pojavljuje na samom vrhu prozora vašeg preglednika kada pregledavate stranicu.
To je to, druga stranica je napravljena. Prije nego prijeđem na izradu svih ostalih stranica, reći ću vam kako hiperlinkovima povezati dvije već izrađene stranice (indeks i stanja).
Kao korisnik interneta, nesumnjivo ste više puta naišli na poveznice. Cijeli Internet je sastavljen od njih! Teško je zamisliti njegovo postojanje bez poveznica, koje se nalaze na gotovo svakoj stranici.
Vaši će posjetitelji također morati nekako prijeći iz jednog dijela u drugi. Kako to možete učiniti bez poveznica?
Sada možete izvršiti naredbu izbornika Izmijeni | Napravite vezu(otvorit će se dijaloški okvir) ili idite na našu omiljenu ploču Svojstva.
Ako ste odabrali drugu opciju, obratite pozornost na polje Veza. S desne strane nalazimo gumb sa slikom mape Potražite datoteku i kliknite na njega.
Otvorit će se dijaloški okvir Odaberite Datoteka, gdje je potrebno odabrati datoteku na koju će poveznica voditi.
Kliknite OK, spremite stranicu i otvorite je u pregledniku. Provjerimo kako veza radi. Ako ste sve učinili ispravno, nakon klika bit ćete preusmjereni na željenu stranicu. U ovom slučaju, s glavne stranice na stranicu Članci. je li tako? To znači da ste uspješno izvršili zadatak!
Hiperveze se mogu stvoriti od nule bez prethodnog odabira riječi ili izraza. Otvorite karticu Uobičajen alatne trake Umetnuti. Prvi gumb je Hiperveza.
Klikom na njega otvara se dijaloški okvir Hiperveza.
Polje Veza već znate, ovo bi trebao biti URL stranice na koju se povezuje. Kada kliknete na gumb s desne strane pretraživati sa slikom mape, otvorit će se prozor Odaberite Datoteka.
Obratite pozornost na polje za unos Titula. Ovdje možete unijeti tekst objašnjenja koji će se prikazati kada prijeđete pokazivačem iznad poveznice. Ovo polje je prilično prostrano, moguće je unijeti nekoliko rečenica.
Za promjenu adrese kreiranog linka, možete ga odabrati i ispraviti unesenu vrijednost u polje Veza ploče Svojstva. Ili izvršite naredbu izbornika Izmijeni | Promjena veze koji otvara prozor Odaberite Datoteka, u kojem trebate odabrati nova datoteka, koji sadrži traženu stranicu.
Uz jednostavne tekstualne veze, u Dreamweaveru možete stvoriti i vezu za e-poštu. Poveznica e-pošte je hiperveza koja stvara prijelaz ne na drugu stranicu ili mjesto, već na određenu adresu E-mail. U pravilu se takve veze koriste na web stranicama za izradu Povratne informacije s posjetiteljima.
Obje metode otvaraju dijaloški okvir Veza putem e-pošte.
Pritisnite OK i pogledajte što se događa.
Na stranici, na mjestu gdje je bio tekstualni kursor, pojavit će se tekst upisan u polje Tekst. Izgledat će kao obična tekstualna poveznica. Otvorite stranicu u pregledniku i kliknite na poveznicu. Trebao bi se otvoriti standardni prozor programa za e-poštu.
Pripremili smo stranicu da je pretvorimo u predložak u Dreamweaveru.
Prisjetimo se malo što sam već napisao o predlošku u Dreamweaveru. Kada kreiranom predlošku dodate n-ti broj stranica, a zatim ga promijenite, tada će se sve stranice promijeniti prema predlošku!
Jedino mjesto koje se neće promijeniti je područje za uređivanje! Može postojati izvorni tekst ili bilo koja druga jedinstvena informacija.
Kako napraviti područje koje se može uređivati u Dreamweaveru.
Broj područja koja se mogu uređivati je neograničena i takva područja možete postaviti bilo gdje.
Napravit ćemo područje za uređivanje u području gdje ćemo imati glavni tekst!
Otvorite pripremljeni u Dreamweaveru.
Ako nemate tekst, jednostavno prijeđite mišem preko mjesta na kojem se nalazi područje za uređivanje. Imam tekst, odaberem ga. Kliknite , - dalje - predlošci - novo područje za uređivanje.
U novom prozoru dodijelite naziv području za uređivanje. Za to ne koristim tekst, već samo broj. Za tekst na svim stranicama, broj je 2. A za naslov pravim zasebno područje za uređivanje br. 1 - zašto je to tako? Ne znam, tako je bilo na početku.
U principu, i naslov i tekst mogu biti napravljeni u jednom prostoru za uređivanje!
Da vidimo što imamo.
Ovdje vidimo da postoji tekst u uređivačkom području broj 2 koje smo kreirali. Ovo uređivačko područje može se vidjeti samo u programu, nije vidljivo u pregledniku!
Kada spremite prvi predložak, automatski se kreira mapa za pohranu predložaka koja će se zvati Predlošci.
Otvara se novi prozor gdje:
Web stranica - web stranica
Postojeći predlošci - Već imam predloške, ali vama, ako je ovo prvi predložak, prozor će biti prazan.
Opis - uvijek ga ostavljate praznim.
Kako se zove predložak u Dreamweaveru?
Zašto se ovo pitanje pojavilo? Ako ćete izraditi web stranicu na različite teme, ili ćete imati različite kategorije, onda će predlošci vjerojatno biti drugačiji. Imam puno tema - tako da ima puno predložaka. Svaki predložak razlikuje se od svog brata Gornji red, prvi red na stranici koji pokazuje gdje se nalazite.
Svaki od predložaka mora se nekako zvati. Naziv predloška bit će prikazan u kodu. Teško je reći kako će ovo ime utjecati na optimizaciju vaše stranice, ali čini mi se da ako predložak nazovemo u skladu s temom koju ćete razvijati, to će biti bolje nego da predložak nazovemo brojem ili bezlična riječ.
Pogledajmo primjer, ako sada pritisnete kombinaciju tipki ctrl + U, vidjet ćete kod.
Ovo je drugi redak i vidimo da se naš predložak zove - “Sve o programu Dreamweaver.dwt”
