Dreamweaver creează o pagină pe baza unui șablon. Instalarea unui șablon în Dreamweaver. Opțiuni grafice
Acum am finalizat al treilea site web. Totul funcționează, toate paginile se încarcă normal și sunt afișate în browserul Web. S-ar părea că nu există niciun motiv de îngrijorare.
Nu, dar doar deocamdată.
Să ne imaginăm o astfel de situație. Am decis brusc să adăugăm o pagină nouă pe site-ul nostru. Pentru a face acest lucru, trebuie să schimbăm bara de navigare în toate paginile, iar pentru a face acest lucru va trebui să deschidem fiecare dintre ele într-o fereastră de document, să adăugăm un link și să salvăm pagina. Site-ul nostru este de dimensiuni reduse și vom finaliza această lucrare destul de repede. Dacă era grozav?
Desigur, putem folosi instrumentele încorporate ale Dreamweaver. De exemplu, apelați caseta de dialog Găsi și Înlocuiește - produsul este extrem de puternic. (Pentru informații despre căutarea și înlocuirea subșirurilor, consultați capitolul 2.) Sau începeți să înlocuiți hyperlinkurile apelând elementul Schimbați linkul la nivel de site meniul Site panouri Site(vezi capitolul 6). În multe cazuri, acest lucru ne va ajuta să înlocuim rapid secțiuni întregi din conținutul unei pagini sau codul HTML. Biblioteca de active și elemente, descrisă și în Capitolul 6, poate fi de mare ajutor.
Dar dacă vrem să facem unele modificări semnificative, de exemplu, să schimbăm radical structura tabelului de layout? Căutarea și înlocuirea este puțin probabil să ne ajute, cu atât mai puțin înlocuirea automată a hyperlink-urilor. Nici măcar activele cu o bibliotecă nu ne vor ajuta în acest caz. Chiar trebuie să refaci toate paginile din nou?!
Dacă nu lucrați în Dreamweaver, probabil că ar trebui să faceți acest lucru. Dar am fost norocoși. Dreamweaver acceptă șabloane puternice. Au fost deja menționate în capitolul 3. Acum le vom analiza mai detaliat.
Probă- acesta este un fel de eșantion, „scheletul” unei pagini Web, care conține elemente comune tuturor paginilor. Când creați o pagină nouă pe baza unui șablon, tot ce trebuie să faceți este să introduceți conținutul unic al acestei pagini în locurile potrivite și să-l salvați. Puteți schimba șablonul mai târziu, iar Dreamweaver va actualiza toate paginile pe baza acestuia.
În acest sens, șabloanele sunt similare elementelor bibliotecii (vezi capitolul 6). Diferența este că un șablon este un șablon pentru o pagină întreagă, iar biblioteca stochează doar acea pagină elemente individuale. Cu toate acestea, dezvoltatorii Dreamweaver cred că șabloanele sunt cele mai apropiate ca „relație” cu activele (a se vedea capitolul 6) și au plasat o listă de șabloane în panou Active.
Inițial, șablonul nu poate fi modificat, adică atunci când creați o pagină pe baza acestuia, puteți plasa conținut numai în locuri special desemnate - zone editabile. Nu puteți edita elemente ale șablonului în sine, deoarece acestea sunt zone imuabile. Dacă doriți să corectați ceva, va trebui să deschideți șablonul în sine în fereastra documentului. Astfel, Dreamweaver vă scutește de la modificarea greșită a șablonului și, în consecință, de la distorsionarea paginilor Web create din acesta.
Putem spune că șabloanele sunt pagini Web obișnuite. Când editați, puteți trata șabloanele ca pagini web obișnuite și puteți utiliza aceleași instrumente. De asemenea, puteți seta parametrii paginii care vor fi create pe baza acestui șablon (titlu, culoare de fundal, text și hyperlink-uri). Cu toate acestea, la crearea codului HTML Șabloane Dreamweaver folosește multe dintre propriile etichete și atribute, așa că nu este în întregime corect să spunem că șablonul este o pagină Web obișnuită.
Șabloanele sunt salvate în fișiere cu extensia .dwt în folderul Templates situat în folderul rădăcină copie locală site-ul. Rezultă că șabloanele sunt o parte integrantă a site-ului dvs., la fel ca biblioteca. Pentru a utiliza orice șablon pe alt site, va trebui să îl copiați pe acel site folosind mijloace standard Dreamweaver (vezi capitolul 6). Mai multe șabloane pot fi utilizate pe un site.
Șabloanele vă sunt cele mai utile dacă creați pagini bazate pe un design tabelar. Asemenea pagini conțin aproape întotdeauna multe elemente care se repetă, care sunt extrem de laborioase pentru a actualiza manual. Dar puteți pregăti și șabloane pentru pagini „obișnuite”. Acest lucru poate fi necesar, de exemplu, dacă creați pagini cu același design pentru un site web corporativ mare.
Dreamweaver vine cu destul de multe șabloane create de designeri web profesioniști. Puteți utiliza aceste șabloane pentru a vă crea paginile; modul în care se face acest lucru a fost discutat în capitolul 3. Încercați - puteți găsi ceva care vi se potrivește.
Crearea unei pagini folosind un șablon existent
Puteți selecta, previzualiza și crea un document nou dintr-un șablon existent. Puteți utiliza caseta de dialog Document nou. pentru a selecta un șablon din orice site definit în Dreamweaver sau utilizați panoul Active. pentru a crea un document nou folosind un șablon existent.Pagina din șablon
1. Alegeți Fișier > Nou.
2. În caseta de dialog Document nou, selectați Pagina din categoria Șablon.
3. În coloana Website, selectați site-ul Dreamweaver care conține șablonul dorit, apoi selectați un șablon din lista din dreapta.
4. Debifați caseta de selectare „Actualizați pagina când șablonul se modifică” dacă nu doriți să reîmprospătați această pagină de fiecare dată când faceți modificări la șablonul de bază.
5. Faceți clic pe butonul Setări pentru a seta setările implicite ale documentului, cum ar fi tipul documentului, codificarea și extensia fișierului.
6. Faceți clic pe Obține mai mult conținut... pentru a deschide Dreamweaver Exchange, de unde puteți obține mai mult conținut pentru a vă stila pagina.
7. Faceți clic pe butonul Nou și salvați documentul (Fișier > Salvare).
Crearea unui document folosind un șablon din panoul Active („Resurse”)
1. Deschideți panoul Active (Fereastră > Resurse), dacă nu este deja deschis.
2. În panoul Active (Resurse), faceți clic pe pictograma Șabloane din stânga pentru a vizualiza o listă de șabloane de pe site-ul curent.
Dacă șablonul pe care doriți să îl aplicați tocmai a fost creat, poate fi necesar să faceți clic pe butonul Actualizare pentru a-l vedea.
3. Faceți clic dreapta (Windows) sau Control-clic (Macintosh) pe șablonul pe care doriți să îl aplicați, apoi selectați Nou din șablon.
Documentul se deschide în zona Fereastra documentului.
4. Salvați documentul.
Pagina Exemplu
Dreamweaver include mai multe fișiere CSS proiectate profesional și pagini de pornire pentru aplicatii mobile. Puteți utiliza fișierele exemplu ca punct de plecare pentru a vă proiecta paginile site-ului. Când creați un document dintr-un fișier eșantion, Dreamweaver creează o copie a fișierului.
Puteți previzualiza fișierul exemplu și puteți citi o scurtă descriere a elementelor de design ale paginii în caseta de dialog Document nou. La folosirea tabelelor Stiluri CSS Puteți copia o foaie de stil pre-proiectată și o puteți aplica documentelor dvs.
1. Alegeți Fișier > Nou.
2. În caseta de dialog New Document, selectați categoria Sample Page.
3. În coloana Sample Folder, selectați CSS Style Sheet sau Pagini de pornire Mobile” și apoi selectați o mostră din lista din dreapta.
4. Faceți clic pe butonul „Creare”.
Noul document se deschide în zona Fereastra documentului (vizualizări Cod și Design). Selectând Foaia de stil CSS va deschide foaia de stil în vizualizarea Cod.
6. Când apare caseta de dialog Copiere fișiere dependente, setați opțiunile și faceți clic pe butonul Copiere pentru a copia resursele în directorul selectat.
Puteți alege propria locație pentru fișierele dependente sau puteți utiliza locația implicită generată de Dreamweaver (pe baza numelui sursei fișierului eșantion).
Pentru a crea șabloane de pagină în Dreamweaver, trebuie să utilizați meniul Fișier -> Salvare ca șablon. Să începem să le creăm. Mai întâi, să creăm un șablon pagina principala viitorul site. Pentru a face acest lucru, selectați marcajul cu fișierul index.html deschis în Dreamweaver. Apoi, în meniul principal al programului, selectați Fișier -> Salvare ca șablon.. (salvare ca șablon). Ca urmare a acestor acțiuni, va apărea panoul prezentat în figura de mai jos.
Apoi, tot ce trebuie să faceți este să faceți clic pe butonul Salvați, va apărea un panou cu întrebarea „Actualizați linkurile?” la care trebuie să răspunzi „Da”. Drept urmare, un alt folder numit „Șabloane” va apărea în folderul cu proiectul nostru, iar în acesta va exista un fișier numit index.dwt. Acesta este șablonul real pentru pagina de pornire a site-ului. Deoarece acest fișier este deja deschis în fereastra de lucru Dreamweaver, puteți să vă uitați la codul său și să aflați cum diferă de codul din fișierul index.html. La urma urmei, în exterior, aceste fișiere nu sunt diferite atunci când sunt deschise în browser. Deci, care este trucul? Și trucul este că între etichete
Și inscripţiile au apărut evidenţiate în verde.
Acestea sunt așa-numitele regiuni editabile. Ce înseamnă acest lucru? Aceasta înseamnă că dacă o pagină de site este legată de acest fișierșablon, atunci modificările paginii pot fi făcute numai în aceste locuri. Restul acestei pagini va fi închisă pentru editare.
Acum întregul site este format dintr-o singură pagină - index. Dar site-ul tău va consta din mai multe pagini, nu? Apoi să trecem la crearea restului paginilor.
Se înțelege că ar trebui să aveți deja o imagine în cap a conținutului aproximativ al paginilor rămase ale site-ului dvs. Dacă nu o aveți încă, vă sfătuiesc să vă construiți această imagine în cap, de atunci munca in continuare va ajuta foarte mult.
În general, aveți nume de secțiuni și subsecțiuni? Este logic să începem cu crearea lor.
Mai întâi, deschideți pagina de index în Dreamweaver. Acum salvați-l executând comanda Fișier | Salvează ca, dar sub alt nume. Să presupunem că a doua pagină este numită state(articole). Așadar, salvați pagina de index sub numele statelor.
Acum aveți două pagini gemene identice cu nume diferite. Dar de ce ai nevoie de două complet pe site? pagini identice, deși sub denumiri diferite? Cred că nu are absolut niciun rost.
Deci, fără a închide Dreamweaver, faceți modificări la noua pagină, pe care o voi numi implicită state. Introduceți toate imaginile, scrieți textul... Dă viață ideilor tale despre această pagină. Desigur, la început pot exista doar câteva paragrafe, dar aceasta este doar prima opțiune?
Gata? Atunci să mergem la Proprietățile paginii. Îți mai amintești cum se face asta? Comanda de meniu Modificați | Proprietățile paginii sau scurtătură de la tastatură
Lângă inscripție Titlu scrie titlul paginii tale. În acest caz, „Articole”. De asemenea, poți scrie „numele site-ului tău > articole” sau invers, „articole > numele site-ului tău”.
Apropo, ai un titlu pentru pagina principală? Oricum, ce este un titlu? Acesta este ceea ce apare în partea de sus a ferestrei browserului dvs. când vizualizați o pagină.
Gata, a fost creată a doua pagină. Înainte de a trece la crearea tuturor celorlalte pagini, vă voi spune cum să conectați cele două pagini deja create (index și state) cu hyperlink-uri.
Ca utilizator de internet, fără îndoială ați întâlnit link-uri de mai multe ori. Întregul Internet este alcătuit din ei! Este greu să-ți imaginezi existența fără link-uri, care sunt aproape pe fiecare pagină.
De asemenea, vizitatorii tăi vor trebui să treacă într-un fel de la o secțiune la alta. Cum poți face asta fără linkuri?
Acum puteți executa comanda de meniu Modificați | Faceți legătura(se va deschide o casetă de dialog) sau accesați panoul nostru preferat de Proprietăți.
Dacă ați ales a doua opțiune, atunci acordați atenție câmpului Legătură. În dreapta găsim un buton cu o imagine de folder Căutați fișierulși faceți clic pe el.
Se va deschide o casetă de dialog Selectați Fișier, unde trebuie să selectați fișierul la care va duce linkul.
Faceți clic pe OK, salvați pagina și deschideți-o în browser. Să verificăm cum funcționează linkul. Dacă ați făcut totul corect, atunci după ce faceți clic veți fi dus la pagina dorită. În acest caz, de la pagina principală la pagina Articole. Este ca asta? Aceasta înseamnă că ați finalizat sarcina cu succes!
Hyperlinkurile pot fi create de la zero fără a selecta mai întâi un cuvânt sau o expresie. Deschide fila Uzual barele de instrumente Introduce. Primul buton este Hyperlink.
Făcând clic pe el, se deschide o casetă de dialog Hyperlink.
Camp Legăturăștiți deja, aceasta ar trebui să fie adresa URL a paginii la care se face legătura. Când faceți clic pe butonul din dreapta Naviga cu o imagine a folderului, se va deschide o fereastră Selectați Fișier.
Acordați atenție câmpului de introducere Titlu. Aici puteți introduce text explicativ care va fi afișat când treceți cursorul peste link. Acest câmp este destul de spațios; este posibil să introduceți mai multe propoziții.
Pentru a schimba adresa unui link creat, o puteți selecta și corecta valoarea introdusă în câmp Legătură panouri Proprietăți. Sau executați comanda de meniu Modificați | Schimbați legătura care deschide o fereastră Selectați Fișier, în care trebuie să selectați fișier nou, care conține pagina necesară.
Pe lângă linkurile simple text, puteți crea și un link de e-mail în Dreamweaver. Un link de e-mail este un hyperlink care creează o tranziție nu către o altă pagină sau site, ci către o adresă specificată E-mail. De regulă, astfel de link-uri sunt folosite pe site-uri pentru a crea părere cu vizitatori.
Ambele metode deschid o casetă de dialog Link de e-mail.
Faceți clic pe OK și vedeți ce se întâmplă.
Pe pagină, în locul în care se afla cursorul de text, va apărea textul introdus în câmpul Text. Va arăta ca un link text obișnuit. Deschideți pagina în browser și faceți clic pe link. Ar trebui să se deschidă o fereastră standard a programului de e-mail.
Am pregătit pagina pentru a o transforma într-un șablon în Dreamweaver.
Să ne amintim puțin ce am scris deja despre șablon în Dreamweaver. Când adăugați al n-lea număr de pagini la șablonul creat și apoi îl schimbați, atunci toate paginile se vor schimba urmând șablonul!
Singurul loc care nu se va schimba este zona editabilă! Poate exista text original sau orice altă informație unică.
Cum să faci o zonă editabilă în Dreamweaver.
Numărul de zone editabile este nelimitat și puteți seta astfel de zone oriunde.
Vom crea o zonă editabilă în zona în care vom avea textul principal!
Deschideți cel pregătit în Dreamweaver.
Dacă nu aveți niciun text, atunci pur și simplu mutați mouse-ul peste locul unde aveți zona editabilă. Am text, îl selectez. Faceți clic pe , - următorul - șabloane - o nouă zonă editabilă.
În fereastra nouă, denumește zona ta editabilă. Nu folosesc text pentru asta, ci pur și simplu pun un număr. Pentru textul de pe toate site-urile, numărul este 2. Și pentru titlu fac o zonă editabilă separată nr. 1 - de ce? Nu știu, așa a fost inițial.
În principiu, atât titlul, cât și textul pot fi realizate într-o singură zonă editabilă!
Să vedem ce avem.
Aici vedem că există text în zona editabilă Nr. 2 pe care am creat-o noi. Această zonă editabilă poate fi văzută doar în program, nu este vizibilă în browser!
Când salvați primul șablon, este creat automat un folder pentru stocarea șabloanelor, care se va numi Șabloane.
Se deschide o nouă fereastră unde:
Site - site web
Șabloane existente - am deja șabloane, dar pentru tine, dacă acesta este primul șablon, atunci fereastra va fi goală.
Descriere - lăsați-o întotdeauna goală.
Cum denumești un șablon în Dreamweaver?
De ce a apărut această întrebare? Dacă aveți de gând să faceți un site web pe diferite subiecte, sau veți avea diferite categorii, atunci șabloanele probabil vor fi diferite. Am o mulțime de teme - așa că există o mulțime de șabloane. Fiecare șablon este diferit de fratele său linia de sus, primul rând de pe pagină indicând unde vă aflați.
Fiecare dintre șabloane trebuie numit ceva. Numele șablonului va fi afișat în cod. Cum va afecta acest nume optimizarea paginii dvs. este greu de spus, dar mi se pare că dacă numim șablonul în conformitate cu subiectul pe care urmează să îl dezvoltați, va fi mai bine decât să numiți șablonul un număr sau un cuvânt fără chip.
Să ne uităm la un exemplu, dacă acum apăsați combinația de taste ctrl + U, veți vedea codul.
Aceasta este a doua linie și vedem că șablonul nostru se numește - „Totul despre programul Dreamweaver.dwt”
