Instaliranje predloška u Dreamweaver. Ilustrirani vodič za Adobe Dreamweaver MX Stvaranje stranice pomoću postojećeg predloška
Dobar dan
Svi to znamo jedinstveni predložak dobro prihvaćen od strane tražilica.
Dakle, danas želim razgovarati o tome kako napisati svoj vlastiti predložak pomoću programa Adobe Dreamweaver
Ovaj program se plaća, ali ako pretražujete na Googleu možete pronaći besplatnu verziju (ne demo),
Adobe dreamweaver cs6 + crack
Nakon preuzimanja i instaliranja, mislim da možete početi
Prije nego što počnete, napravite mapu negdje za stranicu, gdje ćemo spremiti naše datoteke. I odmah stvorite mapu za slike
Iz glavnog izbornika odaberite HTML
Pred vama će se pojaviti izvorni kod dokumenta.
Titula- potrebno za prikaz naziva stranice u pregledniku. Tu pišemo naziv naše buduće stranice. Na primjer, sada ću napraviti web stranicu na temu turizma. I složite se, cijene po kliku u kontekstualno oglašavanje turističke teme su više od onih o kinu ili sportskim temama. Naravno, nije dobro s moje strane napraviti web stranicu samo za zaradu, ali pokušat ću napraviti pola SDL. Sam ne pišem članke, samo ću ih naručiti. Ali tema TURIZMA je preširoka, tako da će moja stranica biti o jednoj konkretnoj zemlji, tj Italija. Evo što sam dobio
Tijelo- ovo je tijelo stranice, postavite kursor između njih i kliknite na " Umetnuti", u njemu na " Stolovi". Ovdje možete odabrati broj redaka i stupaca.
Pomoću tablice podijelit ćemo našu stranicu na dijelove (zaglavlje, izbornik, podnožje, baza). Moj će okvir biti jednostavan. Ako to možete shvatiti odmah, možete odabrati težak put. Ovako sam podijelio svoju buduću stranicu:
Prvo sam postavio 2 stupca i 3 retka, a zatim sam spojio 2 gornje i 2 donje ćelije. Da bih to učinio otišao sam na " Oblikovati". Odabrano pomoću gumba " ctrl"2 ćelije i desna tipka miša" stolovi" => "spajanje ćelija"
Ovo sam dobio u odjeljku " Kodirati"
širina - širina, postavite na 1115, šešir će također biti ove veličine
visina - visina, 100%, cijeli ekran
granica - neka za sada bude postavljena na 1 da možemo vidjeti granice. Kada završite, možete ga promijeniti na 0
Želio bih istaknuti jednu od prednosti programa: kada počnete pisati oznaku, pojavi se savjet i tu odmah možete odabrati tu oznaku i umetnuti je.
Spremi kao jednom index.html. Nikad se ne zna, svjetla će se ugasiti i pojavit će se neka greška...
Sada počnimo puniti stranicu sadržajem
Prvo moramo staviti šešir, imam šešir pripremljen unaprijed
Da biste to učinili, umetnite kursor u prvu ćeliju, a zatim " umetnuti"I" slika", tamo odaberite naše zaglavlje. I ono će se automatski umetnuti u kod, mijenjam širinu na 1115px, a visinu ostavljam kakva jest.
Ali kada povećate stranicu, tablica ide na lijevu stranu, a desna strana ostaje prazna. Sve treba poravnati u središtu. Da biste to učinili, odaberite cijelu tablicu (u kodu), pogledajte dolje i pogledajte tamo " izravnati" , Izaberi " u središtu", to je sve. Pogledajmo ekran
Neka naše zaglavlje bude moguće kliknuti upravo ovdje, odaberite tekst, idite dolje i pojavit će se redak " veza", tamo napišite index.html
Gotovi ste sa šeširom, možete dodati još nešto, upotrijebite svoju maštu
Sada možete dodati kategorije u blok izbornika: " umetnuti" - "hipervezu". Promjenom parametara ubacujemo nekoliko kategorija koje nam odgovaraju. Na primjer, za mene, Gradovi Italije- grad.html, pregled Italije- italia.html, talijanska kuhinja- italyanskaya-picca.html, itd.
Ako kliknete na " svojstva stranice" , dno odjeljka " oblikovati", možete promijeniti parametre veze (osvjetljenje, veličinu, uvlake, font itd.)
Glavni dio: Idite na dizajn, zadržite pokazivač iznad bloka "glavni dio" i umetnite svoj tekst, kod za njega će se automatski napisati. Ovdje je isto ako odete na " svojstva stranice", možete urediti parametre
Kreirajmo sada naše druge stranice
Idemo " oblikovati", tamo u bloku "Glavni dio" brišemo sve i ispunjavamo ga drugim informacijama. Na primjer Gradovi Italije, ovdje pišem sve vezano za temu grada Italije, a stranicu spremam kao grad.html
pregled Italije, ispunite i spremite kao italija.html
Na kraju sam ovo dobio
Ovo naravno nije masterclass. I za iskusne dizajnere, kojih ima mnogo na ovom forumu, moja lekcija će se činiti smiješna, ali za početnika koji nema pojma o izradi web stranice, bit će sasvim u redu.
Nadam se da će moja lekcija poslužiti kao dobar primjer početnicima i uputiti ih na ozbiljnije projekte
Ako sam negdje pogriješio, ne sudite strogo
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.
Nastavljamo seriju članaka posvećenih stvaranju one-pagera u programu Dreamweaver, au sljedećem ćemo članku pogledati html predložak temeljen na one-pageru.
Napravit ćemo naš html predložak na temelju gotovog primjera jednostavnog "lijevka" za privlačenje potencijalnih distributera (klijenata) ili pretplatnika.
U prethodnom članku “Kako napraviti vlastitu web stranicu u Dreamweaveru” proučili smo malo o programu Dreamweaver i pomoću njega izradili našu prvu html stranicu.
Ako govorimo o tome zašto sam pokrenuo ovu temu (temu izrade onepagera ili, kako se još kaže, stvaranja lijevka za privlačenje potencijalnih klijenata, distributera), onda...
Činjenica je da se opetovano susrećem koliko ljudi jednostavno ne razumije ono što je očito. Upravo za izradu kvalitetnih jednostranih web stranica i postavljanje sustava privlačenja na ovaj način nije čak ni preporučljivo, već jednostavno potrebno snalaziti se u jezicima izgleda, biti u stanju izraditi jednostavan html predložak i, ako potrebno, napravite dodatne izmjene na njemu.
Ne morate sve savršeno znati. Samo trebate znati što je potrebno za rješavanje vaših problema. I, kao što razumijete, jedan od zadataka je imati snažnu vještinu u stvaranju web stranice na jednoj stranici. Dovedite ovu vještinu do točke da možete stvoriti HTML predložak koji vam je potreban za bilo koju svrhu u bilo koje vrijeme.
To može biti html predložak za web stranicu s jednom stranicom, za newsletter, za web stranicu s posjetnicama, za prodajnu stranicu, kao i html predložak za razne prilagođene umetke na vašoj web stranici.
Što god rekli, tehnička komponenta vašeg mrežnog poslovanja ili poslovanja temeljenog na prodaji informacijskih proizvoda vrlo je važna.
Kao što sam rekao u prethodnom članku, trenutno postoji mnogo usluga za izradu jednostranih web stranica koje nude različite tehnologije za stvaranje html-ašablona.
Međutim, Prvo, takve usluge postaju zastarjele i s vremenom više ne zadovoljavaju zahtjeve koje nameću suvremene tehnologije.
Drugo, ako imate malo ili nimalo znanja o html izgledu, tada će vam biti vrlo teško napraviti promjene koje su vam potrebne na takvim uslugama. Međutim, ako ste vitalno zainteresirani za povećanje svoje stope konverzije za privlačenje partnera, jednostavno trebate vještine za izradu html predloška.
Treći, - ako ovu temu proučavate samo površno, vaša će individualnost, vaš stil i, kao rezultat toga, patiti - Vaš brand.
Tako ispada da mnogi ljudi padaju na kojekakve proizvode, kupuju razne pakete i usluge, kopiraju ono što u velikom broju slučajeva ne radi, a onda se pitaju zašto je tako mali povrat na njihov posao.
Problem je što se i nakon kupnje takvih proizvoda ljudi suočavaju s raznim “ zamke”, odustati i na kraju sve to “baciti”, a da uopće nije pokušao saznati prave razloge neuspjeha.
Najzanimljivije je da su te pogreške i kvarovi u velikoj mjeri povezani s tehničkom komponentom html izgled, proučavanje kaskadnih stilskih listova (CSS), a također i razumijevanje onoga što je stvoreno u unutrašnjosti html stranice.
Izrađujemo lokalni poslužitelj i pripremamo teren za izradu prvog html predloška
Dakle, počnimo stvarati naš prvi html predložak u programu Dreamweaver.
U prošlom videu i članku upoznali smo se s programom Dreamweaver, a također smo naučili kako umetnuti nekoliko elemenata (ili, kako oni također kažu, blokova) na naš najjednostavniji html predložak.
Napravili smo i posebnu mapu u koju smo smjestili datoteke potrebne za rad.
Sada ćemo naučiti kako stvoriti složeniju stvar - lokalni poslužitelj. Potreban je kako bismo mogli kreirati, prilagoditi i testirati naše stvorene HTML predloške bez pomoći interneta.
Oni. pri stvaranju lokalni poslužitelj Na vašem tvrdom disku stvara se virtualna particija (disk) koja simulira Internet. Sukladno tome, kada instaliramo lokalni poslužitelj na vaš tvrdi disk, put do vaše html stranice će izgledati kao da ste na internetu.
Kao lokalni poslužitelj za stvaranje našeg html predložak koristit ćemo "Denwer".
Želim te zaustaviti odmah. Postoje mnoge modifikacije "Denwera" i postoje mnogi dodaci. Stoga, ako odete na glavnu stranicu za preuzimanje, iako će to biti dovoljno za naše zadatke, preporučujem da preuzmete upravo onu verziju i sklop koji poveznica na koju je ispod.
Ovaj sklop sadrži vrlo važnu komponentu - “Zend Optimizer”, koja će nam trebati u budućnosti za konfiguriranje vrlo važne skripte za povećanje konverzije vaših html stranica.
Da biste instalirali lokalni poslužitelj na svoj tvrdi disk, samo pokrenite izvršna datoteka i slijedite upute koje se pojavljuju na vašem zaslonu.
Rekao sam i pokazao detaljnije o instaliranju i konfiguriranju lokalnog poslužitelja u posebno kreiranom video vodiču.
Html predložak kao primjer
HTML predložak koji ćemo razmotriti je najjednostavniji, ali trenutačno je pretvorba u takve one-pagere još uvijek prilično visoka. Stoga, možete sigurno objaviti takve html pogled predložak na vašim web stranicama.
Na što obratiti pozornost...
Pokušao sam napraviti lekciju tako da vam ne bude teško, jer... Razumijem da mnogi ljudi još uvijek ne znaju dobro HTML jezik rasporeda, kao ni kaskadne stilske listove. Stoga lekcija detaljno objašnjava koje gumbe možete koristiti za izradu vlastite web stranice na jednoj stranici bez ovog znanja i vještina.
Općenito, pogledajte lekciju, sve potrebne datoteke (ako ih još niste preuzeli) i izradite svoju web stranicu na jednoj stranici u vizualni urednik html "Dreamweaver".
p.s. Postoji mala pogreška u lekciji koju sam primijetio nakon izrade videa. Za objašnjenja pogledajte sam video.
p.s. U sljedećem ću članku pripremiti video u kojem ću pokazati “naprednu” metodu izrade jednostrane web stranice temeljene na najpopularnijim html predlošci Runet.
Srdačan pozdrav, Andrej Averkov
#averkovtim #mlm #mrežnimarketing #rad od kuće #regrutiranje #mlmposao #društvene mreže
Web stranice i web stranice
Što je web stranica? Mnogi ljudi mogu odgovoriti na ovo pitanje. Ovo je internetski dokument namijenjen distribuciji putem interneta putem WWW servisa. A ako govorimo uobičajenim jezikom, to je ono što klijentski program za pregledavanje web stranica - web preglednik (browser) - prikazuje u svom prozoru.
S tehnička točka Po našem mišljenju, web stranica je obična tekstualna datoteka koja se može stvoriti u bilo kojem uređivaču teksta, kao što je Notepad, koji dolazi standardno uz Windows. Ova datoteka sadrži stvarni tekst web stranice i razne naredbe za oblikovanje tog teksta. Pozivaju se naredbe za oblikovanje oznake, ali ih opisuje posebnim jezikom HTML(HyperText Markup Language), jezik za označavanje hiperteksta.
Sljedeći korak je otkriti koji se HTML programi koriste za pisanje istih web stranica. Da, jer su obični tekstualne datoteke, koji sadrže HTML kod, mogu se napisati u običnom Notepadu ili sličnom programu.
Zašto su nam potrebni web uređivači?
HTML jezik, unatoč tako sofisticiranom nazivu, vrlo je jednostavan. I uz njegovu pomoć možete napisati jednostavnu web stranicu s nekoliko odlomaka teksta u doslovno pet minuta, a većinu tog vremena potrošit ćete na upisivanje teksta ove stranice, a ne HTML oznake. Pa u čemu je problem?
Mnogi ljudi ne znaju HTML, štoviše, ne žele ga naučiti ili nemaju vremena za to. Ali oni žele stvarati web stranice. Stoga su programeri napisali mnoge programe posebno za njih, dizajnirane za izradu web stranica.
Jedan od tih programa napisali su programeri iz tvrtke Macromedia i zove se Macromedia Dreamweaver. Njegova prva verzija objavljena je davne 1998. godine; trenutno je dostupna verzija 8.
Radit ćemo s Dreamweaverom.
Dreamweaver- tipični predstavnik vizualnih web urednika koji rade na principu WYSIWYG (What You See Is What You Get, “što vidite to i dobijete”). U tom slučaju korisnik oblikuje tekst i odmah vidi rezultate svog rada u prozoru uređivača.
Postoje i nevizualni uređivači weba (tzv. HTML uređivači) temeljeni na drugačijem principu. Oni rade izravno sa samim HTML kodom, dok korisniku pružaju razne dodatne mogućnosti: brzo umetanje oznaka, prikladno postavljanje njihovih parametara, skup unaprijed definiranih predložaka za izradu standardnih elemenata web stranice itd. U tom su smislu slični Notepadu, ali znatno prošireni.
Ovdje treba reći da gotovo svi ozbiljniji web uređivači imaju mod za uređivanje samog HTML koda (tj. oni su zapravo hibridni web uređivači). Stoga sada gotovo uvijek, kad kažu "vizualni web uređivač", misle na hibridne programe. Naravno, to uključuje Dreamweaver, s kojima je vrijeme da se bolje upoznamo.
Uvod
Kada prvi put pokrenete program, od vas će se tražiti da odaberete radno okruženje. Kreirajmo novi dokument" Datoteka->Novi"(Datoteka-novo)
Na ovoj kartici izradite novi dokument odabirom Osnovna stranica -> HTML.
Otvorit će se pred vama radni prozor programa.
I na novostvorenoj stranici napišite tekst koji se sastoji od rusko-engleskih riječi. Na primjer: " korisne informacije za rad s DreamWeaverom".
Zatim spremite stranicu naredbom " Datoteka -Spremi kao", ali nemojte zatvoriti samu stranicu u uređivaču, već sada otvorite novonastalu stranicu u pregledniku - što ste dobili? U mom slučaju prikazana je sljedeća poruka
Stoga, prva stvar s kojom treba početi je naučiti DreamWeaver ćirilici. Glavni izbornik Uredi(Uredi) - Postavke(Postavke), u dijaloškom okviru koji se otvori odaberite kategoriju Novi dokument(Novi dokument) i na ovoj kartici u popisu "Default Encoding" odaberite "Cyrillic (Windows-1251)". Zatim, na lijevoj strani ovog dijaloškog okvira odaberite " Fontovi(Fontovi)" i na popisu " Postavka fonta(Postavke fonta)" odaberite "Ćirilica (ćirilica)".
Ovdje također možete konfigurirati prikaz teksta (odabrati fontove i postaviti veličinu slova), koji će se koristiti prema zadanim postavkama. Za završetak kliknite " u redu". Zatim stvorite drugu stranicu i unesite tekst, spremite ga " Datoteka - Uštedjeti" i otvorite spremljenu stranicu. Sada je sve u redu, ALI! Svaka web stranica na kojoj Meta tag ne navodi eksplicitno kodiranje "charset = windows-1251" bit će "destilirana" u kodiranje "Cyrillic (ISO-8859- 5 )"
Kako biste spriječili da se to dogodi, otvorite datoteku: (Vaš pogon\ Programske datoteke\ Macromedia\ Dreamweaver 8\ Configuration\ Encodings\ EncodingMenu.xml) i na popisu kodiranja pronađite četiri ćirilična kodiranja, jedno za drugim
|
stol 1
Uredite ovu datoteku u Notepadu, zamijenivši kodiranje "ISO-8859-5" i "Windows-1251" tako da redoslijed kodiranja ćirilice ima sljedeći oblik
tablica 2
|
Spremite promjene u datoteku i proces podučavanja programa ruskog jezika može se smatrati završenim.
Sučelje
Sada se vratimo na radno okruženje programa.
Za promjenu načina prikaza radnog okruženja (postoje samo tri načina: Kodirati(Kodirati), Oblikovati(Dizajn) i Kod i dizajn na alatnoj traci ili glavnom izborniku" Pogled"(Pogled).
Od ovih modova odaberite onaj s kojim možete/znate raditi, iako je poželjno ostaviti “Code and Desig”, tada će radni prozor biti podijeljen u dva dijela i moći ćete vidjeti i sam HTML kod a stranica u WYSIWYG modu.
Iznad, ispod i desno od prozora dokumenta nalaze se grupe panela - malih prozora koji se mogu "zalijepiti" na jedan rub glavnog prozora ili slobodno "lebdjeti" pored njega. Na vrhu svake grupe panoa nalazi se njen naslov - "konveksna" plava traka na kojoj je ispisan naziv panela.
Većina panela ima takozvani dodatni izbornik. Otvara se klikom na mali gumb koji se nalazi u gornjem desnom kutu grupe u kojoj se nalazi ovaj panel, a koji ima sliku liste od tri pozicije i malu strelicu prema dolje. (Kad je sažet, ovaj gumb nije vidljiv.)
Grupe panela uvijek se nalaze iznad prozora dokumenta, čak i ako ovaj trenutak neaktivan. To je učinjeno kako bismo im uvijek mogli pristupiti, bez obzira na to koji je prozor trenutno aktivan.
Ako želimo ukloniti bilo koju od ovih grupa, možemo je “premjestiti” izvan prozora dokumenta ili je potpuno zatvoriti otvaranjem njenog dodatnog izbornika i odabirom Zatvori grupu panela. Sada obratimo pažnju na desni rub glavnog prozora, gdje se nalazi mnogo različitih grupa panela. Riječ je o takozvanom pristaništu - prostoru posebno dizajniranom za njih. Dock je odvojen od ostatka glavnog prozora debelom sivom trakom koju možemo povući mišem kako bismo promijenili veličinu docka. Također možemo kliknuti prilično istaknuti gumb na docku kako bismo ga brzo sakrili od svih.
Još tri Dreamweaver panela vrijedna su posebnog spomena. Razlikuju se od običnih panela po tome što imaju stalne dimenzije i čine svaki svoju posebnu skupinu
- objektni alat
- alat za dokumente
standardni alati koji omogućuju pristup operacijama s datotekama (stvaranje, otvaranje i spremanje web stranice), međuspremnik, itd., u početku su skriveni.
Za prikaz ovih ploča glavni izbornik " Pogled(Pogled) – Alatne trake(Alatne trake)” (odgovarajuće ploče (Umetni, Dokument, Standard).
Ako otvorimo više web stranica, bit će ih vrlo teško razumjeti - prozori dokumenata se međusobno preklapaju i nije moguće odmah doći do onoga što nam treba.
Ako jedan od prozora dokumenta proširimo na cijeli zaslon (točnije na cijeli glavni prozor), tada će prebacivanje između prozora postati jednostavno. U tom slučaju, kartice koje odgovaraju otvorenim prozorima dokumenta pojavit će se u alatnom okviru dokumenta.
Ako trebamo držati dva ili više prozora vidljivima odjednom, trebali bismo koristiti stavke izbornika "Prozor - kaskada, popločavanje vodoravno ili popločavanje okomito". Prvi "izlaže" sve otvoreni prozori dokumente u "skupu" u glavnom prozoru kako bismo mogli vidjeti njihove naslove i dio sadržaja. Druga i treća točka "postavljaju" "mozaik" prozora dokumenta u glavnom prozoru tako da se ne preklapaju. Štoviše, druga točka postavlja "mozaik" vodoravno, a treća - okomito.
Definiranje stranice u Dreamweaveru
Prije nego što možete upravljati svojim web mjestom, morate ga registrirati u Dreamweaveru.
Za izradu nove web stranice upotrijebite stavku Nova stranica(Nova stranica) izbornik stranica(Web stranica). Nakon odabira, na ekranu će se pojaviti dijaloški okvir Definicija stranice(Site Definition), koji se sastoji od dvije kartice.
Ako je otvoren u kartici Osnovni, temeljni(Osnovno), prebacite se na karticu Napredna(Napredno) - pruža više opcija za prilagodbu vaše stranice.
Kao što vidite, na lijevoj strani ovog prozora nalazi se popis kartica druge razine. Prijeđi na karticu Lokalne informacije(Lokalne informacije) ,
gdje navodite informacije o datotekama vaše web stranice koje se nalaze na tvrdom disku vašeg računala (lokalna kopija
mjesto).
U polje za unos Ime stranice(Naziv stranice) Unesite naziv stranice. Služi samo da vam olakša rad s ovom stranicom. Nazovite mjesto "proba".
U polje za unos Lokalna korijenska mapa(Lokalni korijenski direktorij) navodi stazu do korijenske mape lokalne kopije web mjesta. Također možete kliknuti na ikonu mape koja se nalazi desno od ovog polja za unos i odabrati željenu mapu u dijaloškom okviru koji se pojavljuje na ekranu.
Potvrdni okvir Automatski osvježi lokalni popis datoteka(Automatski ažuriraj lokalni popis datoteka) omogućuje ili onemogućuje automatsko ažuriranje popis datoteka lokalne kopije stranice. Ako ga ostavite uključenim, popis datoteka stranice uvijek će se automatski ažurirati čim Dreamweaver postane aktivan. Ako isključite gornji potvrdni okvir, morat ćete sami ažurirati popis datoteka stranice, ali Dreamweaver će se aktivirati brže.
U polje za unos Zadana mapa sa slikama(Zadana mapa sa slikama) Unesite naziv mape u kojoj će se prema zadanim postavkama nalaziti sve grafičke slike koje postavljate na web stranice web stranice. Također možete kliknuti na ikonu mape koja se nalazi desno od ovog polja za unos i odabrati željenu mapu u dijaloškom okviru koji se pojavljuje na ekranu. Unesite "pic" u ovo polje.
U polje za unos HTTP adresa Unesite internetsku adresu vaše stranice. Nemojte ništa upisivati u ovo polje.
Ako pogledate sve kategorije desno, imat ćete puno različitih postavki, ali trebat će još nekoliko predavanja da ih upoznate, ali nemamo toliko vremena.
Nakon pritiska na “ Spreman” na ploči Datoteke Prikazat će se popis datoteka stranice; u početku tamo nema datoteka, ali će se pojaviti dok radite.
Osnova gotovo svake stranice je tekst. Napravite novu stranicu (File - New) i u nju upišite bilo koji tekst.
Tekst se upisuje pomoću tipkovnice (što ste mislili?), a Dreamweaver će tekst samostalno rastaviti na retke.
Kursor teksta, odnosno treptajuću okomitu traku koja označava mjesto gdje će se pojaviti tekst koji upisujemo, možemo pomicati u svim smjerovima pomoću tipki sa strelicama.
I onda u bilo kojem pregledniku, u njegovom naslovu možete pročitati
Spremite ovu stranicu i dajte joj naziv. Glavnim stranicama web-mjesta ili imenika daju se imena: index.htm, index.html, index.php i tako dalje.
Za oblikovanje cijelih odlomaka prikladnije je koristiti padajući popis " Format(Format)" na ploči " Svojstva(Opcije)".
Ako ova ploča nije otvorena, kliknite na trokut pored riječi " Svojstva(Opcije)".
Primjer prikazuje primjere oblikovanja odlomaka; sam postupak je prilično jednostavan: kliknite na bilo koji odlomak i na popisu " Format(Format)" odaberite jednu od šest stavki.
Ako ne želite oblikovati odlomke, već samo odabrane riječi, izraze ili simbole, tada će vam druge ikone biti korisne.
Za postavljanje veličine znakova koristite " Veličina(Veličina)".
Možete odabrati font teksta - popis " ZadanoFont". Štoviše, možete instalirati različite fontove za različite znakove ili riječi.
Možete koristiti ova 4 gumba za poravnavanje teksta. Zanimljiv detalj: ako ponovno kliknete na pritisnutu tipku prekidača, ona će se “otpustiti”. U tom će slučaju odlomak biti standardno poravnat, obično lijevo.
- na lijevom rubu;
- u središtu;
- na desnom rubu;
- u širinu.
Da biste postavili (povećali/smanjili) uvlaku odlomka, možete koristiti stavke
Svaki put kada kliknete na stavku "Uvuci", uvlaka će se povećati, a kada kliknete na "Izvući", naprotiv, smanjit će se.
Učinimo neke riječi na našoj web stranici podebljanim i kurzivnim. U tome će nam pomoći dva gumba za promjenu stila. Ali omogućiti ili onemogućiti podvlačenje teksta linijom, još uvijek moramo koristiti točku prebacivanja Naglasiti podizbornik Stil(Stil) izbornik Tekst(Tekst) ili kontekstni izbornik. Ne postoji gumb ili kombinacija tipki za ovu radnju.
stavak |
Opis |
Teletip |
Izlaz teksta iz izlaznog uređaja računala ("teletajp") |
Naglasak |
Uobičajeni kurzivni tekst |
Uobičajeni podebljani tekst |
|
Fragment izvorni kod programe u bilo kojem programskom jeziku (naredbe, imena varijabli, ključne riječi i tako dalje.) |
|
Varijabilna |
Koristi se za označavanje u tekstu imena programskih varijabli u bilo kojem programskom jeziku |
Informacije koje program prikazuje korisniku |
|
Tipkovnica |
Tekst koji korisnik mora unijeti pomoću tipkovnice |
Citat |
|
Definicija |
Definicija pojma |
Urednici teksta podržati stvaranje numeriranih i popisi s grafičkim oznakama. Stavke u numeriranim (uređenim) popisima, kao što znate, označene su serijskim brojevima, a stavke u označenim (neuređenim) popisima označene su nekom vrstom ikona. Napravimo i mi takav popis.
Kako bismo odabrane retke pretvorili u popis, koristit ćemo gumbe za prebacivanje uređivača svojstava.
Postavite tekstualni pokazivač na bilo koju stavku popisa. U kontekstnom izborniku odaberite " Popis – Svojstva” i pojavit će se dijaloški okvir Popis svojstava, s kojim možemo postaviti neke parametre liste. Promijenite stilove grafičkih oznaka ili numeriranje (na primjer: koristite slova umjesto brojeva - a b c d;), a također, za numerirane popise, postavite broj od kojeg će početi numeriranje. Polja za unos " Vrsta popisa" (gornja tri) - omogućuju vam da odredite vrstu cijelog popisa, dok polja za unos "Stavka popisa" (dva donja polja) - odnose se samo na redak popisa na kojem se trenutno nalazi kursor miša.
Tekst se može obojiti u sve dugine boje - :) Da biste to učinili, odaberite bilo koji dio teksta i kliknite na gumb.
Dijalog koji se otvara prikazuje paletu boja.
Možete odabrati bilo koju boju iz ove palete pomoću kapaljke; gornji prozor ove palete prikazuje boju područja na kojem se trenutno nalazi kapaljka.
Štoviše, boju možete odabrati ne samo pomoću palete, već i pomicanjem kapaljke po dokumentu u vidljivom prozoru uređivača.
A kada kliknete na trokut u gornjem desnom kutu ploče " Paleta" pojavit ćete drugi podizbornik u kojem možete mijenjati palete.
Često morate umetnuti datum izrade ili posljednjeg uređivanja dokumenta; u tome će vam pomoći gumb ". Datum(Datum)" ili (Umetni - Datum). U dijaloškom okviru koji se otvori
Možete postaviti opciju prikaza datuma, kao i po želji dan u tjednu i vrijeme. Ako označite " AžurirajAutomatskinaUštedjeti" - tada će nakon svakog ažuriranja/uređivanja stranice datum biti ažuriran.
Također imate mogućnost umetanja Posebni simboli pomoću kartice "Tekst".
Još jedan korisna značajka je čistač HTML koda. Možete ga pozvati naredbom " Naredba - ČistGoreXHTML" i pred vama će se otvoriti prozor ovog dijaloga.
Ponekad je potrebno razdvojiti podatke iu tu svrhu se povlači vodoravna linija. Na ploči " Umetnuti"tab" HTML" dugme . U vodoravna crta Postoje svojstva Širina, Visina i Boja. Za postavljanje širine i visine na ploči " Svojstva” morate navesti tražene vrijednosti u poljima W I H.
Da biste postavili boju linije, odaberite liniju iu kontekstnom izborniku Uredi oznaku...
U dijaloškom okviru odaberite željenu boju linije.
Veze i navigacija
Postoji nekoliko načina za stvaranje hipertekstualnih veza na Različite vrste datoteke. Trebali biste započeti stvaranjem navigacije web stranice. Za stvaranje poveznice između datoteka potrebno je navesti točan put kojim možete doći do željenog dokumenta.
Put može biti potpun - počevši s internetskom adresom (na primjer: http:// Dreamweaver/index.htm) ili ovisan o korijenu (../index.htm). Pogledajmo kako je proces definiranja odnosa između dokumenata implementiran u DreamWeaveru.
Da biste od bilo koje riječi ili nekoliko riječi napravili hipervezu, dovoljno je da joj “priložite” internetsku adresu. Radi jasnoće, učinimo ovo - u tekstu "Macromedia DreamWeaver. Radionica" označite izraz "Macromedia DreamWeaver." i u polju "Link" na kartici "Properties" unesite početnu adresu ovog vodiča (http://Dreamweaver/) i pritisnite "Enter".
Kao što ste možda primijetili, riječi "Macromedia DreamWeaver. Radionica" promijenile su boju i postale hiperlink. Da biste uklonili hipervezu, jednostavno izbrišite internetsku adresu u polju "Veza" na kartici "Svojstva" i također pritisnite tipku "Enter". Sada prijeđimo na put neovisan o korijenu.
S označenim "Macromedia DreamWeaver", kliknite ikonu mape
au dijaloškom okviru koji se otvori možete odrediti stranicu na koju želite otići kada kliknete na ovu vezu. Štoviše, prema zadanim postavkama otvorit će se mapa na kojoj se nalazi stranica s koje želite dati poveznicu. Budući da se i ova (trenutna stranica na koju želim dati hipervezu) i stranica na koju će ova hiperveza usmjeravati nalaze u istoj mapi, dovoljno je jednostavno označiti željenu stranicu mišem i kliknuti gumb “OK” .
Sada postavite pokazivač miša na ovu vezu i proširite popis " Cilj"kartice" Svojstva".
Na ovom popisu postoje četiri stavke, au našem slučaju samo dvije će raditi. Prva stavka “_self” prikazat će stranicu na koju upućuje hiperveza u istom prozoru preglednika (ovaj je način rada postavljen prema zadanim postavkama), a druga stavka “_blank” otvorit će stranicu u novom prozoru.
Preostale stavke izbornika "Cilj" bit će potrebne za rad s okvirima.
Kada kreirate web mjesto, početna mapa ovog web mjesta je korijen i već sadrži različite datoteke i druge podmape.
Ako pogledate HTML kod za ovu hipervezu, vidjet ćete da ima sljedeći oblik../index.htm. Štoviše, ove dvije točke prije crtice govore pregledniku da se "popne" jednu razinu više u stablu imenika. Gore dvije razine - ../../index.htm i tako dalje.
Ako želite umetnuti poštansku adresu, morate unijeti adresu e-pošte u polje "Veza" na kartici "Svojstva" (na primjer: mailto:vsh@dvpion.ru), svaka referenca na poštansku adresu počinje s mailto:, iako ako zbog nekih okolnosti ne želite unijeti riječ " mailto:", zatim možete kliknuti gumb na kartici "Uobičajeno", gdje u polje "Tekst" unesite tekst veze, au polje "E-pošta" - adresu e-pošte. U oba slučaja učinak će biti isti.
Sidra
Druga vrsta veze je "sidro". Korištenje ove vrste poveznice posebno je korisno kada se na jednoj stranici nalazi velika količina informacija.
Postavimo navigaciju na vrh trenutne stranice. Prvo što trebate učiniti je instalirati samo sidro na stranicu.
I kliknite gumb na kartici "Uobičajeno". U dijaloškom okviru koji se otvori navedite naziv sidra "new_page_11_top".
Sada sve što preostaje je postaviti poveznicu na ovo sidro ovdje. Da biste to učinili, morate odabrati tekst, au polju "Veza" kartice "tab" Svojstva"unesite adresu hiperveze koja vodi do ovog sidra: #new_page_11_top
Oznaka hash (#) ispred naziva sidra naredba je za preglednik da "ide" do oznake koja se zove nova_stranica_11_vrh.
Ako se želite povezati na sidro koje se nalazi na drugoj stranici, odredite put do stranice sa sidrom. Na primjer, želim usmjeriti posjetitelje na stranicu s "primjerima sidra". Budući da je naziv stranice s primjerima primjeri.htm a sidro na koje želim preusmjeriti ima ime 02
, poveznica će izgledati ovako: (examples.htm#02).
Rad s grafikom
S čime smo se prije bavili? S tekstualnim elementima web stranica. Svi tekstualni elementi kreirani su pomoću odgovarajućih HTML jezičnih oznaka.
Između ostalog, možete postaviti pozadinu svoje stranice. Ako samo želite postaviti boju kao pozadinu, tada za to upotrijebite stavku "Pozadina" (lijevim klikom miša na kvadrat povezan s ovom stavkom). I u paleti koja se otvori odaberite boju koja vam je potrebna. Pozadinsku sliku možete postaviti odabirom datoteke u odgovarajućem polju istog dijaloškog okvira.
Umetanje grafičke slike
Postavimo tekstualni pokazivač na mjesto koje nam je potrebno i pogledajmo karticu “ Uobičajen“objekt toolkit - postoji gumb” Slika(Slika)". Kliknite na nju i odaberite stavku u izborniku koji se pojavi na ekranu Slika. Također možete koristiti točku Slika Jelovnik Umetnuti ili kliknite
Padajući popis mapa i popis datoteka omogućit će nam odabir željene mape i datoteke.
U polje za unos Naziv datoteke Pojavit će se naziv odabrane datoteke (ili ga možemo unijeti sami). Padajući popis Vrsta datoteke omogućit će nam odabir vrste datoteka koje trebamo pronaći. Sve nam je to standardno poznato dijaloški okviri otvaranje i spremanje Windows datoteke. Jedina razlika je u tome što se s desne strane nalazi ploča za pregled. A ako ga želimo ukloniti, isključite potvrdni okvir Pregled slike. Dakle, odabrali smo datoteku. Preostaje samo kliknuti OK. Ali Dreamweaver će od nas tražiti još neke informacije prikazivanjem " Atributi pristupačnosti oznake slike(Atributi pristupačnosti oznake slike)” .
Kombinirani popis " Zamjenski tekst(Alternative text)” ovog prozora služi za postavljanje tzv zamjenski tekst. Ovo je izmišljeno za korisnike sporih komunikacijskih kanala. Nakon što web preglednik učita HTML datoteku koja sadrži web stranicu, prikazat će prazan okvir odgovarajućih dimenzija umjesto slike postavljene na njega. Kada korisnik postavi kursor miša preko praznog okvira slike, web-preglednik će prikazati mali opis alata koji sadrži isti zamjenski tekst. Stoga se preporuča uvijek koristiti ovu opciju.
Zapravo na popisu Zamjenski tekst uveo kratki zamjenski tekst. Njegovo ograničenje nije veće od 50 znakova. Ako trebamo prikazati detaljniji zamjenski tekst, možemo ga spremiti u zasebnu datoteku na web stranici, a zatim unijeti njegovu internetsku adresu u polje za unos Dugi opis. Također možete kliknuti gumb mape koji se nalazi desno od ovog polja i odabrati željenu datoteku u dijaloškom okviru Odaberite Datoteka. Kada ste završili s unosom podataka kliknite OK. Dreamweaver postavlja grafiku na mjesto gdje se trenutno nalazi kursor teksta.
Grafičke opcije
Spremimo sada rezultirajuću stranicu, odaberimo sliku ako nije odabrana i pogledajmo uređivač svojstava. Što ćemo tamo vidjeti Polja za unos W I N omogućuju nam da postavimo dimenzije slike ručnim unosom širine i visine. Ovo može biti korisno ako je istaknuta slika dio dizajna stranice; u drugim slučajevima, prikladnije je postaviti dimenzije slike povlačenjem markera za promjenu veličine mišem.
Zapravo, kada Dreamweaver postavi grafiku na web stranicu, automatski postavlja njezinu izvornu širinu i visinu u ova polja za unos. Kao što već znamo, web preglednik odmah nakon učitavanja stranice
prikazuje slike koje još nisu učitane kao prazne okvire. Ako su veličine slike izričito postavljene, one će se odmah primijeniti na okvire i dizajn stranice neće biti narušen. U suprotnom, web preglednik će prikazati okvire određene zadane veličine, a kada se slike naknadno učitaju, njihove veličine će se promijeniti, uzrokujući ponovno crtanje same stranice. A ovo je vrlo neugodno.
Polja za unos V Razmak I N Razmak postavite okomitu i vodoravnu udaljenost od ruba slike do teksta koji teče oko nje. Prema zadanim postavkama oba su nula.
Polje za unos Src navodi internetsku adresu datoteke u kojoj je pohranjena grafička slika. Desno od njega su dva gumba. Klikom na desnu (sa slikom mape) otvorit ćemo dijaloški okvir Odaberite Izvor slike.
Također možemo promijeniti naziv slikovne datoteke desnim klikom na sliku i odabirom Izvorna datoteka u kontekstnom izborniku ili jednostavnim dvoklikom na sliku. Nakon toga na ekranu će se pojaviti dijaloški okvir Odaberite Izvor slike.
Polje za unos Niska Src slično polju Src, osim što navodi naziv datoteke gdje se nalazi tzv "nacrt" slike. Slika "nacrt" ima manju veličinu, u pravilu, zbog niže kvalitete, a izmišljena je, opet, za vlasnike komunikacijskih kanala niske brzine. Web-preglednik će prvo preuzeti “nacrt” budući da je puno manje veličine i prikazati ga na stranici. I tek tada, dok korisnik gleda gotovu stranicu, glavna slika se postupno učitava i zamjenjuje "nacrt".
Preporuča se napraviti "nacrt" samo kada originalna slika prevelik za brzo učitavanje. Ovo će posebno biti prikladno ako ćemo izraditi web stranicu s umjetničkom grafikom.
Polje za unos Granica omogućuje vam da postavite debljinu obruba prikazanog oko slike, u pikselima. Standardno je nula, tj. nema okvira.
Kombinirani popis Alt navodi kratki zamjenski tekst koji nam je već poznat.
Sada pogledajmo padajući popis Uskladiti. Omogućuje nam da odredimo poravnanje slike, u biti relativni položaj slike i teksta koji sadrži.
Popis Uskladiti sadrži sljedeće stavke:
- Zadano- zadana lokacija, obično slična stavci Osnovna linija;
- Osnovna linija- donji dio slike odgovara osnovni tekst(zamišljena linija na kojoj se nalazi red teksta) linija u kojoj se nalazi;
- Thor- vrh slike poklapa se s vrhom teksta retka u kojem se nalazi;
- sredina- sredina slike poklapa se s osnovnom linijom teksta;
- Dno- dno slike odgovara dnu teksta (obično nije isto kao Osnovna linija);
- TekstTop- vrh slike odgovara vrhu najvišeg tekstualnog znaka (obično nije isto što i Thor);
- Apsolutna sredina- sredina slike točno se podudara s središnja linija teksta(crta koja prolazi središtem crte);
- Apsolutno Dno- dno slike poklapa se s dnom najnižeg znaka teksta;
- Lijevo- slika je "pritisnuta" na lijevi rub stranice, a tekst "teče" oko nje s desne strane;
- Pravo- slika je "pritisnuta" na desni rub stranice, a tekst "teče" oko nje s lijeve strane.
U zadnja dva slučaja slika postaje plutajući. web-preglednik s lijeve ili desne strane, a tekst u koji je umetnut prelamat će se oko njega. A na mjestu gdje je plutajuća slika umetnuta, Dreamweaver prikazuje poseban plutajući marker slike. Ova oznaka se prikazuje samo kao pogodnost za web dizajnera i samo u Dreamweaveru; Web preglednik ga uopće ne prikazuje.
Dakle, shvatili smo uređivač svojstava. Sada postavimo svojstva naše slike. Udaljenost od teksta bit će 5 piksela vodoravno i okomito, poravnanje će biti lijevo, "alternativni" tekst bit će "skočni natpis". I spremite stranicu.
Za vraćanje izvornih dimenzija slike možemo koristiti gumb za odustajanje) koji se nalazi između polja za unos W i H u uređivaču svojstava i desno od njih, kao i stavku kontekstnog izbornika Poništi veličinu. Ovo je korisno ako smo ih jako iskrivili i želimo početi ispočetka.
Posebne slike
HTML i Dreamweaver omogućuju stvaranje ne samo običnih slika, već i onih s posebnim svojstvima. Ovaj slike hiperveza, aktivne slike I slikovne karte. Često se koriste na web stranicama, pa ćemo ih morati pogledati.
Bilo koja slika može se koristiti kao hiperveza; da biste to učinili, samo unesite internetsku adresu u polje " Veza"paneli" Svojstva".
Štoviše, možete dati poveznicu ili na adresu e-pošte ili na drugu web stranicu. U drugom slučaju, imat ćete pristup popisu " Cilj"
Slika se može učiniti aktivnom, reagirajući na prelazak pokazivača miša preko nje - Prevrtanje. Da biste to učinili, morat ćete se opskrbiti s dvije slike koje će se međusobno zamijeniti, a na " Uobičajen" pritisnite odgovarajuću tipku.
U prozoru koji se otvori morat ćete ispuniti potrebna polja
U polju Naziv slike- navedite originalni naziv aktivne slike, a naziv može sadržavati samo latinična slova (svaka aktivna slika mora započeti slovom) i brojeve (svakako arapske!-:)
U polju Izvorna slika- unesite put do glavne slike, one koja će se prva učitati na stranici.
U polju Slika prelaska mišem- unesite putanju do “efekta slike”, - ova slika će se pojaviti samo kada prijeđete mišem preko svoje aktivne slike.
Označite kućicu Preload Rollover- u ovom slučaju, preglednik će odjednom učitati obje slike, a učinak će početi odmah nakon prijelaza miša. U suprotnom (ako je potvrdni okvir isključen), kada prijeđete mišem preko takve slike, preglednik će početi učitavati drugu sliku... i doći će do neke vrste sporog efekta.
U polju Zamjenski tekst- unesite tekstualni komentar koji će se pojaviti kada prijeđete mišem preko slike.
Pa, u polju Go To URL - Internet adresa.
Slikovne karte
Karta je čvrsta slika s označenim “vrućim područjima”, a svako takvo područje je hiperlink i ima svoju internetsku adresu.
Za početak postavite crtež na stranicu, odaberite ga lijevim klikom na njega i na kartici " Svojstva"Koristeći tirkizne oblike (u donjem lijevom kutu nalazi se grupa elemenata karte) odaberite jednu od metoda za odabir "vrućeg područja". Budući da za primjer želim učiniti plave ikone "vrućim područjem", najbliže Ovo je oblik pravokutnika. Ali možete odabrati i krug i nepravilan oblik Kliknite na četverokut i odaberite područje interesa.
Oblik koji odaberete izgledat će ovako:
Sve što trebate napraviti je unijeti internet adresu u “polje” Veza” (veze mogu biti na druge stranice na vašem web-mjestu ili na druge web-mjesta, ili na poštanske adrese), odaberite jednu od stavki u polju Target i unesite alternativni tekst u polje Alt.
Nakon odabira, možete pomaknuti odabrano područje klikom na gumb sa strelicom u donjem lijevom kutu.
A da biste odabrali figure nepravilnih oblika, samo kliknite lijevom tipkom miša duž perimetra područja za odabir. Na kraju, dajte izvorni naziv svojoj karti u polje za unos karte i to je to.
Stolovi
Kako bismo stvorili novi stol, idite na "tab" Commons"paneli" Umetnuti" i pritisnite gumb. 
U dijaloškom okviru koji se pojavi ispunite potrebna polja.
Redovi- broj redaka u tablici
Stupci- broj stupaca u tablici
Širina stola- širina tablice, au padajućem izborniku potrebno je odrediti mjerne jedinice - postotke ili piksele.
Debljina granice- debljina okvira tablice u pikselima, a ako vrijednost postavite na nulu, sama tablica neće biti vidljiva na stranici.
Cell Padding- udaljenost uvlake unutar ćelija tablice
Razmak ćelija- udaljenost između granica ćelija tablice
Set prekidača Zaglavlje(Header) omogućit će nam da stvorimo "header" i označimo prvi stupac tablice. Ovaj skup uključuje sljedeće prekidače: Ništa (nije odabrano zaglavlje niti prvi stupac), Lijevo (odabran prvi stupac), Vrh (zaglavlje) i Oba (odabrani su i zaglavlje i prvi stupac).
Ćelije koje čine zaglavlje i označeni stupac bit će stilizirane kao ćelije zaglavlja, a tekst koji unesemo u njih bit će automatski centriran i podebljan.
U polje za unos Naslov(Naslov) Unesite naziv tablice. Ovaj naziv nalazit će se iznad stvorene tablice.
Padajući popis Poravnaj naslov(Alignment) omogućit će nam postavljanje položaja i poravnanja naslova (ako smo ga, naravno, unijeli). Ovdje su dostupne sljedeće stavke:
zadano (prema zadanim postavkama) - poravnanje vrši sam web preglednik, obično se u ovom slučaju naslov nalazi iznad tablice i poravnat u sredini;
vrh - naslov je iznad tablice i poravnat u sredini;
dolje - naslov se nalazi ispod tablice i centriran je;
lijevo - naslov je iznad tablice i poravnat ulijevo;
desno - naslov se nalazi iznad tablice i poravnat je udesno.
U području uređivanja Sažetak Upisuje se bilješka (ukupno) tablice. Ovu bilješku web-preglednici ne prikazuju na zaslonu, ali se može koristiti u neke druge svrhe (na primjer, mogu je obraditi programi koji čitaju tekst na ekranu). Nije ga potrebno postavljati.
Nakon što je tablica stvorena, možete joj promijeniti veličinu povlačenjem obruba mišem. Zadržite pokazivač iznad jednog od tri kvadrata u isticanju tablice.
Sada postavimo kursor teksta u bilo koju ćeliju tablice i upišemo tekst. Ponovimo isto s preostalim ćelijama tablice.
Ćelija tablice mora imati barem neki sadržaj, inače bi je web preglednik mogao netočno prikazati. Ako ćelija i dalje treba biti prazna, umetnite neprekinuti prostor(njegov HTML kod), kao što u takvim slučajevima radi sam Dreamweaver.
Za definiranje svojstava tablice - Odaberite je klikom lijevom tipkom miša na rub tablice. Nakon toga, na kartici "Svojstva".
Možete promijeniti svojstva tablice i prilagoditi njezin izgled.
Polje Tablica id- odredite naziv tablice (atribut nije obavezan)
Polja Redovi I Cols- broj redaka i stupaca u tablici.
Polja V I H- širina i visina tablice u pikselima ili postocima.
Polje Uskladiti- poravnanje tablice lijevo, središnje ili desno
Polje CellPad- udaljenost unutar ćelije (između sadržaja i ruba ćelije)
Polje CellSpace- udaljenost između ćelija tablice
Polje Hrabrije- širina obruba tablice
BG boja- boja pozadine tablice
Brdr Boja- boja obruba za cijelu tablicu.
Bg slika- vježbanje pozadinska slika za stol.
Tu je i šest dodatnih gumba.
- Dugme ČistoStupacširine- brisati vrijednosti širine stupca
- Dugme ČistoRedVisine- jasne vrijednosti visine linije
- Gumbi Pretvoritiširinedopikseli I Pretvoritiširinedopostotak- Pretvorite širinu ćelije u piksele i pretvorite širinu ćelije u postotak
- Gumbi PretvoritiVisinedopikseli I PretvoritiVisinedopostotak- pretvoriti visinu ćelije u piksele i pretvoriti visinu ćelije u postotak
Osim postavljanja svojstava tablice, postoji i postavljanje svojstava ćelije ili grupe ćelija. Da biste postavili svojstva ćelije, kliknite na nju lijevom tipkom miša. Ako želite postaviti svojstva za grupu ćelija, tada nakon klika na polje prve ćelije bez otpuštanja lijevi gumb Mišem označite željene ćelije (na ovaj način možete označiti barem cijelu tablicu). Kada se odabere, granice svih dodanih ćelija bit će obojane drugom bojom.
Nakon što su ćelije odabrane, ponovno obratite pozornost na "ploču" Svojstva"
Horz- horizontalno poravnanje sadržaja ćelije (lijevo, središnje ili desno)
Vert- okomito poravnanje sadržaja ćelije (gornja, srednja, donja ili osnovna linija)
U poljima W I H- odredite širinu i visinu odabranih ćelija; ako trebate odrediti vrijednosti kao postotke, dodajte simbol % nakon numeričke vrijednosti.
Bg I Brdr- postavljanje pozadine ćelija i postavljanje boje obruba ćelija. I koristeći gornju marginu Bg, možete postaviti pozadinsku sliku za ćelije.
Potvrdni okvir NeZamotati- zabrana prekida reda
Potvrdni okvir Zaglavlje- za formatiranje odabranih ćelija kao zaglavlja tablice.
Sada kliknite lijevom tipkom unutar bilo koje ćelije i pritisnite gumb.
Pomoću ovog dijaloškog okvira možete odabranu ćeliju podijeliti na nekoliko dijelova. Prekidači Redovi I Stupci- podijeliti u retke i stupce. Broj... - na koliko redaka ili stupaca treba podijeliti odabranu ćeliju.
Sada odaberite dvije ćelije i kliknite gumb.
Dvije ćelije koje ste odabrali spojile su se u jednu i tu novu spojenu ćeliju možete ponovno podijeliti ili je, naprotiv, kombinirati s drugima kao standardne.
Možete brzo primijeniti oblikovanje na bilo koju tablicu. Da biste to učinili, odaberite tablicu i u izborniku " Naredbe”odaberi stavku” FormatStol(Tablica oblikovanja)".
U dijaloškom okviru koji se otvori možete prilagoditi dizajn svoje tablice
Nakon što odaberete jedan od unaprijed postavljenih predložaka, možete promijeniti sve njegove atribute prema vlastitom ukusu.
Možete izrezati, zalijepiti ili kopirati ćelije tablice.
Da biste izrezali ćeliju (ili više ćelija), potrebno ju je označiti i dati naredbu Uredi - Izreži. Ćelija (ili nekoliko njih) bit će izbrisana iz tablice.
Da biste kopirali ćeliju (ili više ćelija), potrebno ju je označiti i dati naredbu Uredi - Kopiraj. Ćelija (ili nekoliko) će se kopirati.
Za lijepljenje kopiranih ili izrezanih ćelija koristite naredbu Uredi – Zalijepi.
Prije nego krenete dalje, okušajte se u izradi jednostavnih tablica.
Dizajn stola
Recimo da radimo online trgovinu. Na stranicu moramo staviti naziv, opis, cijenu i fotografiju proizvoda. Sa stolovima je lakše nego ikad.
Uz pomoć posebno oblikovane tablice možemo postaviti nekoliko dijelova teksta i grafičku sliku onako kako nam je potrebno. A ako nam se nešto ne sviđa, možemo malo promijeniti ovu tablicu i dobiti potpuno drugačiji rezultat.
Web dizajneri odavno su savladali tablice. A isto tako davno, jednostavna ideja, kao i sve genijalno, lebdjela je u zraku. Što ako stavite SAV tekst web-stranice u veliku, složeno oblikovanu tablicu, "rastežući" je preko cijelog prozora web-preglednika? Uostalom, tada ćemo dobiti praktički neograničene mogućnosti, gotovo iste kao i kod naših kolega tiskara. Moći ćemo stvarati bilješke, fusnote, bočne trake i višestruke "streamove" teksta koji će započeti i zaustaviti se tamo gdje ih trebamo.
Sada smo se približili tabelarnom dizajnu, tj. metodi konstruiranja web stranica pomoću tablica.
Osnovni princip tabelarnog oblikovanja već je dat. Sav tekst i sve grafike stanu u ćelije tablice, što vam omogućuje da s njima radite što god želite. Obično takve tablice (nazovimo ih tablicama izgleda) imaju nevidljive obrube, a ravnala se stvaraju pomoću vrlo tankih ćelija s pozadinskim ispunama. Markup tablice su vrlo složene, koriste različito oblikovanje i spajanje više ćelija i gotovo uvijek koriste ugniježđene tablice.
Ručno stvaranje složenih označnih tablica vrhunac je web dizajna. Neće se svatko, čak ni iskusni web dizajner, baviti stvaranjem složenih stranica na temelju tablica. A sve je to zbog nevjerojatne složenosti dobivenog HTML koda. Stoga vrlo često postoje pogreške u kodu Web stranica izgrađenih na temelju tablica, zbog čega ih Web preglednik ne može uvijek prikazati. Zapravo, u svim tim brojnim spojenim ćelijama iu najsloženijem oblikovanju jednostavno se možete zbuniti.
Uzorak- ovo je neka vrsta uzorka, "kostur" web-stranice, koji sadrži elemente zajedničke svim stranicama: naslov web-mjesta, skup hiperveza, informacije o autorskim pravima, eventualno tablicu označavanja, itd. Ovi elementi ostaju nepromijenjeni na svim stranicama stvoreni na temelju ovog predloška, zato se nazivaju nepromjenjivi elementi. Da, ali kako se glavni sadržaj uklapa na stranicu?
Jako jednostavno. Posebno za tu svrhu, predložak stvara promjenjiva područja
. Namijenjeni su jedinstvenom sadržaju stranice koja će biti izrađena na temelju ovog predloška.
Jednostavno je: kreiramo stranicu na temelju predloška i unesemo njen glavni sadržaj u područja koja se mogu uređivati. U ovom slučaju Dreamweaver nam ne dopušta uređivanje nepromjenjivih elemenata, i to je s pravom - oni su ipak nepromjenjivi. Ali nema veze - uvijek možemo promijeniti sam predložak.
Neka, na primjer, moramo popraviti naslov stranice. Budući da je dio predloška, otvaramo predložak, popravljamo ga i spremamo. Dreamweaver nas odmah poziva da promjene napravljene na predlošku prenesemo na sve stranice stvorene na temelju njega. I prenosi ga tako pažljivo da ne utječe na sadržaj promjenjivih područja! Zapravo, umjesto nas ispravlja sve duplicirane elemente na svim web stranicama stranice. Predlošci se spremaju u posebne datoteke s ekstenzijom dwt, u mapi Predlošci, koju Dreamweaver sam stvara u korijenskoj mapi lokalne kopije stranice. Broj predložaka koji se koriste na stranici nije ograničen, tako da neke stranice stranice možemo izraditi na temelju jednog predloška, a druge na temelju drugog. Ili se općenito možemo ograničiti na jedan predložak, što se zapravo najčešće događa.
Prije izrade predloška izradite web stranicu. Registrirajte ga u Dreamweaveru.
Kreirajmo sada dokument i napravimo oznake.
- Napravite tablicu širine 100%, 2 retka i 1 stupca, obruba 0.
- U prvom redu ćemo napraviti pozadinu (fon.gif) i visinu od 100 piksela.
- Zatim napišite naslov My Site u naslov stranice iu prvi red. Postavite veličinu teksta na +7 i boju na žutu.
- U drugom retku postavite okomito poravnanje na Top.
- Umetnite drugu tablicu širine 100%, 1 reda i 3 stupca, obruba 0.
- Postavite okomito poravnanje svake ćelije na vrh.
- Širina prvog stupca je 20%, drugog 60%, trećeg 20%.
- U svaki ćemo stupac umetnuti još jednu tablicu od 2 retka x 1 stupac, širine 95%, poravnanja tablice u sredini. Također okomito poravnanje u svakoj ćeliji je Top.
- Zatim ispunite retke tekstom kao u mom primjeru.
- U navigacijskom stupcu, jednu po jednu boju ćelija postavite na zelenu.
Izgled naše stranice je spreman. Nećemo raditi ništa komplicirano. Ovo će biti dovoljno za potrebe ovog predavanja.
Sada je vrijeme za izradu predloška i područja koja se mogu uređivati.
Postoje dva načina za izradu Dreamweaver predloška. Prvo, može se stvoriti od nule, a zatim ispuniti sadržajem, poput obične web stranice.
Drugo, postojeća stranica može se spremiti kao predložak, a zatim urediti uklanjanjem korisnog sadržaja i ostavljanjem samo zajednički elementi. Oba su jednako laka za napraviti.
Za izradu novog predloška "od nule" izbornik " Datoteka – Novi“
Još je lakše stvoriti novi predložak iz postojeće web stranice. Da biste to učinili, otvorite željenu web stranicu, odaberite “ Datoteka"odlomak" Spremi kao predložak“ (Spremi kao predložak). Također možete kliknuti gumb Napravi predložak(Stvori predložak) Ploča objekata. Na ekranu će se pojaviti dijaloški okvir Spremi kao predložak ”.
Na padajućem popisu stranica odaberite mjesto na kojem je predložak spremljen. (Predlošci su sastavni dio web-mjesta, zapamtite) Prema zadanim postavkama, trenutno je web-mjesto odabrano tamo.
Sam naziv predloška upisuje se u polje za unos Spremi kao. Nazovimo naš novi predložak glavni("glavni") jer je ovo naš glavni predložak oko kojeg ćemo graditi našu stranicu.
Nakon unosa svih potrebnih podataka kliknite gumb Uštedjeti(Spremi) za spremanje predloška.
Nakon što izradimo novi predložak, posljednji će se pojaviti na popisu predložaka. Budući da smo stvorili ovaj novi predložak na temelju postojeće web stranice, što znači da ima sadržaj, možemo ga vidjeti na ploči pretpregled. Međutim, ova je ploča vrlo mala, a kako bismo dobili predodžbu o sadržaju predloška, morat ćemo je otvoriti u prozoru dokumenta.
Uređivanje predloška
Prazan predložak potrebno je popuniti sadržajem. Predložak stvoren na temelju web-stranice mora se urediti: uklonite sadržaj koji je jedinstven za ovu stranicu, ostavljajući samo elemente zajedničke svim stranicama web-mjesta. Da bismo to učinili, morat ćemo otvoriti predložak u prozoru dokumenta, poput obične web stranice.
Na ekranu će se pojaviti prozor dokumenta u kojem će se otvoriti predložak koji smo odabrali. Izvana se neće razlikovati od obične web stranice.
Što možemo učiniti s predloškom? Bilo što. Možete je zamisliti kao običnu web stranicu s nekim posebnim značajkama. (Dolje ćemo opisati te značajke.) Možemo upisivati tekst, formatirati ga, postavljati slike, tablice, hiperveze, prebacivati se na način izgleda stranice i stvarati tablice i ćelije izgleda, stvarati okvire, "očistiti" HTML kod itd.
Ipak, predložak nije web stranica i ima neke značajke. Dakle, na njega ćemo morati postaviti promjenjiva područja koja će naknadno sadržavati glavni sadržaj stranica. (Štoviše, to ćemo svakako morati učiniti, inače zašto nam onda treba ovaj predložak.) Naučit ćemo kako to učiniti malo kasnije.
Otvorimo glavni predložak koji smo izradili na temelju default.htm stranice (ako već nije otvoren).
Sada moramo staviti promjenjiva područja u predložak. Za sada će postojati samo jedno promjenjivo područje - glavni sadržaj stranice. I nalazit će se u najvećoj ćeliji naše tablice označavanja. Za sada ćemo ostaviti stupac s vijestima i navigacijsku traku.
Stvaranje regija koje se mogu uređivati
Kao i kod samog predloška, možemo stvoriti promjenjiva područja na dva načina. Prvo stvorite prazno područje za uređivanje u praznom području stranice. Drugo, pretvorite dio trenutnog sadržaja stranice u područje koje se može uređivati.
Prva metoda je najbolja ako smo kreirali predložak od nule, a druga je najbolja ako smo pretvorili postojeću stranicu u predložak.
Stvaranje praznog područja za uređivanje u predlošku vrlo je jednostavno. Da biste to učinili, prvo postavite tekstualni pokazivač na mjesto gdje želimo stvoriti prazno područje za uređivanje i odlučite što ćete koristiti:
- objektni alat klikom na gumb Predlošci na kartici Uobičajen i odabirom stavke u izborniku koji se pojavi Regija za uređivanje;
- kontekstni izbornik odabirom iz njegovog podizbornika Predložak paragraf Nova regija za uređivanje;
- izbornik sustava odabirom u podizborniku Predložak objekata Jelovnik Umetnuti paragraf Regija za uređivanje;
- tipkovnica, koja je najbrža - samo pritisnite
+ + .
Nakon toga na ekranu će se pojaviti dijaloški okvir Novo područje koje se može uređivati.
U jedino polje za unos Naziv koje se nalazi u ovom prozoru unesite jedinstveni naziv novostvorenog područja za uređivanje. Svako područje za uređivanje koje stvorimo u predlošku mora imati jedinstveno ime. Ovo ime može sadržavati bilo koje znakove osim slova ruske abecede, navodnika, apostrofa i znakova "<", ">" i "&". Nakon unosa naziva, kliknite OK za stvaranje područja za uređivanje ili Otkazati odbiti ovo.
Ako smo slučajno postavili promjenjivo područje na pogrešno mjesto koje smo htjeli, to se može popraviti. Promjenjivo područje odabiremo klikom na njegov naslov, mišem ga “hvatamo” za sadržaj i povlačimo na željeno mjesto.
Dreamweaver automatski stvara malo područje naslova koje je moguće uređivati kada izradite bilo koji predložak. (Zbog toga nećemo moći promjenjivom području dati naziv doctitie - promjenjivo područje s tim imenom već postoji). Ovo područje koje se može uređivati uključuje sadržaj oznake