Instalarea unui șablon în Dreamweaver. Tutorial ilustrat despre Adobe Dreamweaver MX Crearea unei pagini folosind un șablon existent
Bună ziua
Toti stim asta șablon unic bine primit de motoarele de căutare.
Așadar, astăzi vreau să vă vorbesc despre cum să vă scrieți șablon personalizat folosind programul Adobe Dreamweaver
Acest program este plătit, dar dacă căutați pe Google puteți găsi o versiune gratuită (nu un demo),
Adobe Dreamweaver cs6 + crack
Odată descărcat și instalat, cred că puteți începe
Înainte de a începe, creați un folder undeva pentru site, unde ne vom salva fișierele. Și creați imediat un folder pentru imagini
Din meniul principal selectați HTML
Codul sursă al documentului va apărea în fața dvs.
Titlu- necesar pentru a afișa numele site-ului în browser. Acolo scriem numele viitorului nostru site. De exemplu, acum voi crea un site web pe tema turismului. Și de acord, prețurile pe clic publicitate contextuală subiectele turistice sunt mai mari decât cele de cinema sau subiecte sportive. Desigur, nu este bine din partea mea să fac un site web doar pentru a câștiga bani, dar voi încerca să-l fac pe jumătate din SDL. Eu nu scriu articole, le voi comanda doar. Dar subiectul TURISMULUI este prea larg, așa că site-ul meu va fi despre o anumită țară, adică despre Italia. Iată ce am primit
Corp- acesta este corpul site-ului, plasați cursorul între ele și faceți clic pe " Introduce", în el pe" Mese". Aici puteți selecta numărul de rânduri și coloane.
Folosind un tabel, ne vom împărți site-ul în secțiuni (antet, meniu, subsol, bază). Cadrul meu va fi simplu. Dacă vă puteți da seama imediat, puteți alege calea dificilă. Iată cum mi-am împărțit viitorul site:
Mai întâi am setat 2 coloane și 3 rânduri, apoi am combinat cele 2 celule de sus și cele de jos. Pentru a face asta m-am dus la " Proiecta". Selectat folosind butonul " ctrl„2 celule și butonul dreapta al mouse-ului” Mese" => "uneste celulele"
Asta am primit in sectiunea " Cod"
lățime - lățime, setați-l la 1115, pălăria va avea și această dimensiune
înălțime - înălțime, 100%, ecran complet
border - lăsați-l să fie setat la 1 pentru moment, astfel încât să putem vedea granițele. Apoi, când ați terminat, îl puteți schimba la 0
Aș dori să subliniez unul dintre avantajele programului: atunci când începeți să scrieți o etichetă, apare un indiciu și acolo puteți selecta imediat acea etichetă și o puteți introduce.
Salvați ca o dată index.html. Nu se știe niciodată, luminile se vor stinge și va apărea o eroare...
Acum să începem să umplem site-ul cu conținut
Mai întâi trebuie să punem pălăria, am o pălărie pregătită dinainte
Pentru a face acest lucru, introduceți cursorul în prima celulă, apoi " introduce" Și " imagine", selectează antetul nostru acolo. Și va fi inserat automat în cod, schimb lățimea la 1115px și las înălțimea așa cum este.
Dar când măriți pagina, tabelul merge în partea stângă, iar partea dreaptă rămâne goală. Totul trebuie aliniat în centru. Pentru a face acest lucru, selectați întregul tabel (în cod), priviți în jos și vedeți acolo " nivelați" , Selectați " in centru„, asta-i tot. Să ne uităm la ecran
Haideți să facem clic pe antetul nostru chiar aici, selectați textul, mergeți în jos și există o linie " legătură", scrie acolo index.html
Ai terminat cu pălăria, poți adăuga altceva, folosește-ți imaginația
Acum puteți adăuga categorii la blocul Meniu: " introduce" - "hyperlink„. Schimbând parametrii inserăm mai multe categorii după cum ni se potrivesc. De exemplu, pentru mine, Orașe din Italia- city.html, Recenzia Italiei- italia.html, Bucatarie italiana- italyanskaya-picca.html etc.
Dacă faceți clic pe „ proprietățile paginii" , partea de jos a secțiunii " proiecta", puteți modifica parametrii linkului (lumină, dimensiune, indentări, font etc.)
Partea principală: Accesați designul, plasați cursorul peste blocul „partea principală” și introduceți textul, codul pentru acesta va fi scris automat. La fel este și aici dacă mergi la " proprietățile paginii", puteți edita parametrii
Acum să creăm celelalte pagini ale noastre
Să mergem la " proiecta", acolo în blocul "Partea principală" ștergem totul și îl completăm cu alte informații. De exemplu Orașe din Italia, scriu aici tot ce are legătură cu tema Orașului Italiei și salvez pagina ca oras.html
Recenzia Italiei, completați și salvați ca italia.html
Până la urmă asta am primit
Desigur, acesta nu este un masterclass. Și pentru designerii cu experiență, dintre care sunt mulți pe acest forum, lecția mea va părea amuzantă, dar pentru un începător care nu are idee despre crearea unui site web, se va descurca bine.
Sper că lecția mea va servi drept exemplu bun pentru începători și îi va îndruma să facă proiecte mai serioase
Dacă am greșit undeva, nu judeca aspru
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 fi 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 nici un 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ă link-uri?
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.
Continuăm seria de articole dedicate creării unei pagini cu o singură pagină în programul Dreamweaver și în acest articol următor ne vom uita la un șablon html bazat pe o pagină.
Vom crea șablonul nostru html pe baza unui exemplu gata făcut de „pâlnie” simplă pentru atragerea de potențiali distribuitori (clienți) sau abonați.
În articolul anterior, „Cum să vă faceți propriul site web în Dreamweaver”, am studiat puțin despre programul Dreamweaver și am creat prima noastră pagină html folosindu-l.
Dacă vorbim despre motivul pentru care am început acest subiect (subiectul creării one-pagere sau, după cum se spune și ei, crearea unui canal pentru atragerea potențialilor clienți, distribuitori), atunci...
Cert este că întâlnesc în mod repetat câți oameni pur și simplu nu înțeleg evidentul. Tocmai, pentru a crea site-uri web de o pagină de înaltă calitate și pentru a configura un sistem de atracție în acest mod special, nu este nici măcar recomandabil, ci pur și simplu necesar să navighezi în limbile de layout, să poți crea un șablon html simplu și, dacă necesar, faceți-i modificări suplimentare.
Nu trebuie să știi totul perfect. Trebuie doar să știi ce este necesar pentru a-ți rezolva problemele. Și, după cum înțelegeți, una dintre sarcini este să aveți o abilitate puternică în crearea unui site web de o pagină. Aduceți această abilitate până la punctul în care puteți crea șablonul HTML de care aveți nevoie pentru orice scop în orice moment.
Acesta poate fi un șablon html pentru un site web cu o singură pagină, pentru un buletin informativ, pentru un site web de cărți de vizită, pentru o pagină de vânzări, precum și un șablon html pentru diferite inserții personalizate pe site-ul dvs.
Indiferent ce spun ei, componenta tehnică a afacerii tale de rețea sau a afacerii bazate pe vânzarea de produse de informare este foarte importantă.
După cum am spus în articolul anterior, în prezent există o mulțime de servicii pentru crearea de site-uri web de o pagină care oferă diverse tehnologii pentru crearea htmlșablon.
In orice caz, in primul rand, astfel de servicii devin depășite și în timp nu mai îndeplinesc cerințele impuse de tehnologiile moderne.
În al doilea rând, dacă aveți puține sau deloc cunoștințe despre aspectul html, atunci vă va fi foarte greu să faceți modificările de care aveți nevoie la astfel de servicii. Cu toate acestea, dacă sunteți extrem de interesat să vă creșteți rata de conversie pentru a atrage parteneri, aveți nevoie pur și simplu de abilitățile pentru a crea un șablon html.
Al treilea, - dacă studiezi acest subiect doar superficial, individualitatea ta, stilul tău și, ca urmare, vor avea de suferit - Marca dvs.
Așadar, se dovedește că mulți oameni se îndrăgostesc de tot felul de produse, cumpără diverse pachete și servicii, copiază ceea ce în multe cazuri nu funcționează și apoi se întreabă de ce există atât de puțin profit pentru afacerea lor.
Problema este că, chiar și după achiziționarea unor astfel de produse, oamenii se confruntă cu diverse „ capcanele”, renunță și, în cele din urmă, „aruncă” toate acestea, fără măcar a încerca să afle adevăratele motive ale eșecurilor.
Cel mai interesant lucru este că aceste erori și defecțiuni sunt în mare măsură legate de componenta tehnică aspect html, studiind foile de stil în cascadă (CSS) și, de asemenea, înțelegerea ce este interiorul creat pagini html.
Creăm un server local și pregătim terenul pentru crearea primului șablon html
Deci, să începem să creăm primul nostru șablon html în programul Dreamweaver.
În ultimul videoclip și articol, ne-am familiarizat cu programul Dreamweaver și am învățat, de asemenea, cum să inserăm mai multe elemente (sau, după cum se spune, blocuri) pe cel mai simplu șablon html al nostru.
De asemenea, am creat un folder special în care am plasat fișierele de care aveam nevoie pentru lucru.
Acum vom învăța cum să creăm un lucru mai complex - un server local. Este necesar pentru a putea crea, personaliza și testa șabloanele HTML create fără ajutorul internetului.
Acestea. în timp ce creează server local O partiție virtuală (disc) este creată pe hard disk, care simulează Internetul. În consecință, atunci când instalăm un server local pe hard disk, calea către pagina dvs. html va arăta ca și cum ați fi pe Internet.
Ca server local pentru a crea șablon html vom folosi „Denwer”.
Vreau să te opresc chiar acum. Există multe modificări ale „Denwer” și există multe completări la acesta. Prin urmare, dacă mergeți pe site-ul principal pentru descărcare, atunci deși va fi suficient pentru sarcinile noastre, vă recomand să descărcați exact versiunea și asamblarea care linkul către care este mai jos.
Acest ansamblu conține o componentă foarte importantă - „Zend Optimizer”, de care vom avea nevoie în viitor pentru a configura un script foarte important pentru a crește conversia paginilor dvs. html.
Pentru a instala un server local pe hard disk, rulați fisier executabilși urmați instrucțiunile care apar pe ecran.
Am povestit și am arătat mai detaliat despre instalarea și configurarea unui server local într-un tutorial video special creat.
Șablon HTML ca exemplu
Șablonul HTML pe care îl vom lua în considerare este cel mai simplu, dar în prezent conversia la astfel de pagini de o pagină este încă destul de mare. Prin urmare, puteți posta în siguranță astfel de lucruri vizualizare htmlșablon pe site-urile dvs. web.
La ce sa fii atent...
Am încercat să fac lecția ca să nu-ți fie greu, pentru că... Înțeleg că mulți oameni încă nu cunosc foarte bine limbajul de layout HTML, precum și foile de stil în cascadă. Prin urmare, lecția explică în detaliu ce butoane puteți utiliza pentru a vă crea propriul site web de o pagină fără aceste cunoștințe și abilități.
În general, urmăriți lecția, toate fișierele necesare (dacă nu le-ați descărcat încă) și creați site-ul dvs. de o pagină în editor vizual html „Dreamweaver”.
P.S. Există o mică eroare în lecție, pe care am observat-o după crearea videoclipului. Vedeți videoclipul în sine pentru explicații.
P.S.În articolul următor voi pregăti un videoclip în care voi arăta o metodă „avansată” de a crea un site web de o pagină bazat pe cele mai populare șabloane html Runet.
Cu stima, Andrey Averkov
#averkovteam #mlm #networkmarketing #munca de acasă #recrutare #mlm business #rețele sociale
Pagini web și site-uri web
Ce este o pagină Web? Mulți oameni pot răspunde la această întrebare. Acesta este un document Internet destinat distribuției prin Internet prin serviciul WWW. Și dacă vorbim în limbajul obișnuit, asta arată programul client pentru vizualizarea paginilor Web - un browser Web (browser) - în fereastra sa.
CU punct tehnicÎn opinia noastră, o pagină Web este un fișier text obișnuit care poate fi creat în orice editor de text, cum ar fi Notepad, care vine standard cu Windows. Acest fișier conține textul real al paginii Web și diverse comenzi pentru formatarea acestui text. Se apelează comenzile de formatare Etichete, dar le descrie într-un limbaj special HTML(HyperText Markup Language), limbaj de marcare hipertext.
Următorul pas este să aflați ce programe HTML sunt folosite pentru a scrie aceleași pagini Web. Da, pentru că sunt obișnuiți fișiere text, care conțin cod HTML, pot fi scrise într-un Notepad obișnuit sau un program similar.
De ce avem nevoie de editori web?
Limbajul HTML, în ciuda unui nume atât de sofisticat, este foarte simplu. Și cu ajutorul ei puteți scrie o pagină Web simplă cu câteva paragrafe de text în literalmente cinci minute, iar cea mai mare parte a acestui timp va fi cheltuită tastând textul acestei pagini și nu Etichete HTML. Deci care este problema?
Mulți oameni nu știu HTML; în plus, nu vor să-l învețe sau nu au timp pentru el. Dar vor să creeze pagini Web. Prin urmare, programatorii au scris multe programe special pentru ei, concepute pentru a crea pagini Web.
Unul dintre aceste programe a fost scris de dezvoltatorii companiei Macromedia si se numeste Macromedia Dreamweaver. Prima sa versiune a fost lansată în 1998; versiunea 8 este disponibilă în prezent.
Cu Dreamweaver vom lucra.
Dreamweaver- un reprezentant tipic al editorilor web vizuali care lucrează pe principiul WYSIWYG (What You See Is What You Get, „what you see is what you get”). În acest caz, utilizatorul formatează textul și vede imediat rezultatele muncii sale în fereastra editorului.
Există, de asemenea, editori Web non-vizuali (alias editori HTML) bazați pe un principiu diferit. Acestea lucrează direct cu codul HTML în sine, oferind în același timp utilizatorului diverse caracteristici suplimentare: inserarea rapidă a etichetelor, setarea convenabilă a parametrilor acestora, un set de șabloane predefinite pentru crearea elementelor standard ale unei pagini Web etc. În acest sens, sunt similare cu Notepad, dar extinse semnificativ.
Aici trebuie spus că aproape toți editorii Web serioși au un mod de editare a codului HTML în sine (adică sunt de fapt editori Web hibridi). Prin urmare, acum aproape întotdeauna, când se spune „editor web vizual”, se referă la programe hibride. Desigur, acestea includ Dreamweaver, cu care este timpul să ne cunoaștem mai bine.
Introducere
Prima dată când lansați programul, vi se va cere să selectați un mediu de lucru. Să creăm un document nou" Fişier->Nou"(Fișier-Nou)
Din această filă, creați un document nou selectând Pagina de bază -> HTML.
Se va deschide înaintea ta fereastra de lucru programe.
Și pe pagina nou creată, scrieți un text format din cuvinte rusă-engleză. De exemplu: " informatii utile pentru lucrul cu DreamWeaver".
Apoi salvați pagina cu comanda " Fişier -Salvează ca", dar nu închideți pagina în sine în editor, ci acum deschideți pagina nou creată în browser - ce ați primit? În cazul meu, a fost afișat următorul mesaj
Prin urmare, primul lucru cu care trebuie să începeți este să predați DreamWeaver alfabetul chirilic. Meniu principal Editați | ×(Editați | ×) - Preferințe(Setări), în caseta de dialog care se deschide, selectați o categorie Document nou(Document nou) și pe această filă din lista „Codificare implicită”, selectați „Chirilic (Windows-1251)”. Apoi, în partea stângă a acestui dialog, selectați „ Fonturi(Fonturi)" și în listă " Setarea fontului(Setări font)” selectați „Chirilic (Chirilic)”.
Aici puteți configura și afișarea textului (selectați fonturile și setați dimensiunea literelor), care va fi folosit implicit. Pentru a finaliza, faceți clic pe „ Bine". Apoi creați o altă pagină și introduceți ceva text, salvați-l " Fişier - Salvați" și deschideți pagina salvată. Acum totul este în ordine, DAR! Orice pagină web în care eticheta Meta nu indică în mod explicit codificarea „charset = windows-1251” va fi „distilată” în codificarea „Cyrillic (ISO-8859-). 5)"
Pentru a preveni acest lucru, deschideți fișierul: (Unitatea dvs.\ Fișiere de program\ Macromedia\ Dreamweaver 8\ Configuration\ Encodings\ EncodingMenu.xml) și în lista de codificări, găsiți patru codificări chirilice, una după alta
|
tabelul 1
Editați acest fișier în Notepad, schimbând codificările „ISO-8859-5” și „Windows-1251”, astfel încât ordinea codificărilor chirilice să ia următoarea formă
masa 2
|
Salvați modificările în fișier, iar procesul de predare a programului în limba rusă poate fi considerat finalizat.
Interfață
Acum să revenim la mediul de lucru al programului.
Pentru a comuta modul de afișare a mediului de lucru (există doar trei moduri: Cod(Cod), Proiecta(Design si Cod și design pe bara de instrumente sau meniul principal" Vedere"(Vedere).
Selectați dintre aceste moduri pe cel cu care puteți/ști să lucrați, deși este de preferat să lăsați „Cod și Desig”, apoi fereastra de lucru va fi împărțită în două părți și veți putea vedea atât codul HTML în sine. și pagina în modul WYSIWYG.
Deasupra, dedesubt și în dreapta ferestrei documentului sunt grupuri de panouri - ferestre mici care pot fi fie „lipite” de o margine a ferestrei principale, fie „plutitoare” liber lângă aceasta. În partea de sus a fiecărui grup de panouri există titlul acestuia - o bandă albastră „convexă” pe care este scris numele panoului.
Majoritatea panourilor au un așa-numit meniu suplimentar. Se deschide făcând clic pe butonul mic situat în colțul din dreapta sus al grupului în care se află acest panou și care are o imagine a unei liste de trei poziții și o mică săgeată îndreptată în jos. (Când este restrâns, acest buton nu este vizibil.)
Grupurile de panouri sunt întotdeauna situate deasupra ferestrei documentului, chiar dacă acest moment inactiv. Acest lucru se face astfel încât să le putem accesa întotdeauna, indiferent de ce fereastră este activă în prezent.
Dacă vrem să eliminăm oricare dintre aceste grupuri, îl putem „muta” în afara ferestrei documentului sau îl putem închide complet deschizând meniul suplimentar și selectând Închidere grup de panouri. Acum să acordăm atenție marginii din dreapta a ferestrei principale, unde există multe grupuri diferite de panouri. Acesta este așa-numitul dock - o zonă special concepută pentru ei. Dock-ul este separat de restul ferestrei principale printr-o dungă groasă de culoare gri pe care o putem trage cu mouse-ul pentru a redimensiona dock-ul. De asemenea, putem face clic pe butonul destul de proeminent de pe andocare pentru a-l ascunde rapid de toată lumea.
Încă trei panouri Dreamweaver merită o mențiune specială. Ele diferă de panourile obișnuite prin faptul că au dimensiuni constante și fiecare formează propriul grup special
- trusa de instrumente pentru obiecte
- trusa de instrumente pentru documente
instrumentele standard care oferă acces la operațiuni cu fișiere (crearea, deschiderea și salvarea unei pagini Web), clipboard etc., sunt ascunse inițial.
Pentru a afișa aceste panouri meniul principal „ Vedere(Vizualizare) - Bare de instrumente(Barele de instrumente)” (panourile corespunzătoare (Insert, Document, Standard).
Dacă deschidem mai multe pagini Web, va fi foarte dificil să le înțelegem - ferestrele documentelor se suprapun și nu este posibil să ajungem imediat la ceea ce avem nevoie.
Dacă extindem una dintre ferestrele documentului la ecranul complet (mai precis, la întreaga fereastră principală), atunci comutarea între ferestre va deveni ușoară. În acest caz, filele corespunzătoare ferestrelor deschise ale documentului vor apărea în caseta de instrumente pentru documente.
Dacă trebuie să menținem vizibile două sau mai multe ferestre simultan, ar trebui să folosim elementele de meniu „Fereastră - Cascade, Tile orizontal sau Tile vertical”. Primul „așează” totul ferestre deschise documentele într-o „stivă” în fereastra principală, astfel încât să le putem vedea titlurile și o parte din conținut. Al doilea și al treilea punct „așează” un „mozaic” de ferestre de document în fereastra principală, astfel încât acestea să nu se suprapună. Mai mult, al doilea punct prezintă „mozaicul” pe orizontală, iar al treilea - pe verticală.
Definirea unui site în Dreamweaver
Înainte de a vă putea gestiona site-ul, trebuie să îl înregistrați la Dreamweaver.
Pentru a crea un site web nou, utilizați elementul Site nou meniu (site nou). Site(Site web). După selecție, pe ecran va apărea o casetă de dialog Definiția site-ului(Definiția site-ului), constând din două file.
Dacă este deschis într-o filă De bază(De bază), comutați la fila Avansat(Avansat) - oferă mai multe opțiuni pentru personalizarea site-ului dvs.
După cum puteți vedea, în partea stângă a acestei ferestre există o listă de file de al doilea nivel. Comutați la filă Informații locale(Informații locale) ,
unde specificați informații despre fișierele site-ului dvs. aflate pe hard diskul computerului dvs (copie locală
site-ul).
În câmpul de introducere Numele site-ului(Numele site-ului) Introduceți numele site-ului. Acesta servește doar pentru a vă face convenabil să lucrați cu acest site. Numiți site-ul „proba”.
În câmpul de introducere Dosarul rădăcină local(Directorul rădăcină local) specifică calea către folderul rădăcină al copiei locale a site-ului. De asemenea, puteți să faceți clic pe pictograma folderului situată în dreapta acestui câmp de introducere și să selectați folderul dorit în caseta de dialog care apare pe ecran.
Caseta de bifat Actualizează automat lista de fișiere locale(Actualizați automat lista de fișiere locale) activează sau dezactivează actualizare automata lista de fișiere a copiei locale a site-ului. Dacă îl lăsați activat, lista de fișiere a site-ului se va actualiza întotdeauna automat de îndată ce Dreamweaver devine activ. Dacă dezactivați caseta de selectare de mai sus, va trebui să actualizați singur lista fișierelor site-ului, dar Dreamweaver se va activa mai repede.
În câmpul de introducere Folder Imagini implicite(Dosar implicit cu imagini) Introduceți numele folderului în care vor fi localizate implicit toate imaginile grafice pe care le plasați pe paginile Web ale site-ului. De asemenea, puteți să faceți clic pe pictograma folderului situată în dreapta acestui câmp de introducere și să selectați folderul dorit în caseta de dialog care apare pe ecran. Introduceți „pic” în acest câmp.
În câmpul de introducere Adresă HTTP Introdu adresa de internet a site-ului tău. Nu introduceți nimic în acest câmp.
Dacă te uiți la toate categoriile din dreapta, vei avea o mulțime de setări diferite, dar va fi nevoie de încă câteva prelegeri pentru a le cunoaște, dar nu avem atât de mult timp.
După apăsarea butonului „ Gata” în panou Fișiere Va fi afișată o listă de fișiere de site; inițial nu există fișiere acolo, dar acestea vor apărea pe măsură ce lucrați.
Baza aproape oricărei pagini este textul. Creați o pagină nouă (Fișier - Nou) și introduceți orice text în ea.
Textul este tastat folosind tastatura (ce ați crezut?), iar Dreamweaver va împărți în mod independent textul în rânduri.
Cursorul de text, adică bara verticală intermitentă care indică locul unde va apărea textul pe care îl introducem, poate fi mutat în toate direcțiile folosind tastele săgeți.
Și apoi în orice browser, în titlul său puteți citi
Salvați această pagină și dați-i un nume. Paginile principale ale site-urilor sau directoarelor au nume: index.htm, index.html, index.php și așa mai departe.
Pentru a formata paragrafe întregi, este mai convenabil să utilizați lista derulantă " Format(Format)" în panoul " Proprietăți(Opțiuni)".
Dacă acest panou nu este deschis, faceți clic pe triunghiul de lângă cuvântul " Proprietăți(Opțiuni)".
Exemplul prezintă exemple de formatare a paragrafelor; procesul în sine este destul de simplu: faceți clic pe orice paragraf și în listă " Format(Format)" selectați unul dintre cele șase elemente.
Dacă doriți să formatați nu paragrafe, ci doar cuvinte, expresii sau simboluri selectate, atunci celelalte pictograme vă vor fi utile.
Pentru a seta dimensiunea caracterului, utilizați „ mărimea(Mărimea)".
Puteți selecta fontul text - listă " Mod implicitFont„. Mai mult, puteți instala diferite fonturi pentru diferite caractere sau cuvinte.
Puteți folosi aceste 4 butoane pentru a alinia textul. Un detaliu interesant: dacă faceți din nou clic pe butonul comutator apăsat, acesta va fi „eliberat”. În acest caz, paragraful va fi aliniat implicit, de obicei stânga.
- pe marginea stângă;
- in centru;
- pe marginea dreaptă;
- în lățime.
Pentru a seta (mărește/descrește) indentarea paragrafului, puteți utiliza elementele
De fiecare dată când faceți clic pe elementul „Indent”, indentarea va crește, iar când faceți clic pe „Outdent”, dimpotrivă, va scădea.
Să facem câteva cuvinte de pe pagina noastră web cu caractere aldine și cursive. Și două butoane pentru schimbarea stilului ne vor ajuta în acest sens. Dar pentru a activa sau dezactiva sublinierea textului cu o linie, mai trebuie să folosim punctul de comutare Subliniați submeniu Stil meniu (Stil). Text(Text) sau meniul contextual. Nu există niciun buton sau combinație de taste pentru această acțiune.
Paragraf |
Descriere |
Teletip |
Ieșire text de la dispozitivul de ieșire al computerului („teletype”) |
Accent |
Text italic obișnuit |
Text normal aldin |
|
Fragment cod sursa programe în orice limbaj de programare (comenzi, nume de variabile, Cuvinte cheieși așa mai departe.) |
|
Variabil |
Folosit pentru a indica în text numele variabilelor programului în orice limbaj de programare |
Informații afișate de un program utilizatorului |
|
Tastatură |
Text pe care utilizatorul trebuie să îl introducă folosind tastatura |
Citare |
|
Definiție |
Definiția unui termen |
Editori de text susține crearea de numerotate și liste cu marcatori. Articolele din listele numerotate (ordonate), după cum știți, sunt indicate prin numere de serie, iar articolele din listele cu marcatori (neordonate) sunt indicate printr-un fel de pictograme. Să creăm și noi o astfel de listă.
Pentru a converti liniile selectate într-o listă, vom folosi butoanele de comutare ale editorului de proprietăți.
Plasați cursorul text pe orice element din listă. În meniul contextual, selectați „ Listă – Proprietăți” și va apărea o casetă de dialog Lista proprietăți, cu care putem seta niște parametri de listă. Schimbați stilurile de marcatori sau numerotarea (de exemplu: utilizați litere în loc de cifre - a b c d;) și, de asemenea, pentru listele numerotate, setați numărul de la care să începeți numerotarea. Câmpuri de introducere " Tip listă" (în sus trei) - vă permit să specificați tipul întregii liste, în timp ce câmpurile de introducere „Element din listă” (două câmpuri de jos) - se referă doar la linia de listă pe care este poziționat curent cursorul mouse-ului.
Textul poate fi pictat în toate culorile curcubeului - :) Pentru a face acest lucru, selectați orice parte a textului și faceți clic pe butonul.
Fereastra de dialog care se deschide prezintă o paletă de culori.
Puteți selecta orice culoare din această paletă folosind pipeta; fereastra de sus a acestei palete afișează culoarea zonei în care se află în prezent pipeta.
Mai mult, puteți selecta o culoare nu numai folosind paleta, ci și deplasând pipeta pe tot documentul în fereastra editorului vizibil.
Și când faceți clic pe triunghiul din colțul din dreapta sus al panoului " Paletă" veți deschide un alt submeniu în care puteți schimba paletele.
Adesea trebuie să introduceți data creării sau ultimei editări a unui document; butonul „ vă va ajuta în acest sens. Data(Data)" sau (Inserare - Data). În caseta de dialog care se deschide
Puteți seta opțiunea de afișare a datei, precum și, dacă doriți, ziua săptămânii și ora. Dacă verificați „ ActualizațiAutomatpeSalvați" - apoi după fiecare actualizare/editare a paginii data va fi actualizată.
Aveți și posibilitatea de a introduce Simboluri speciale folosind fila „Text”.
Încă unul caracteristică utilă este un curățător de cod HTML. Îl poți apela cu comanda " Comanda - CuratSusXHTML" și o fereastră a acestui dialog se va deschide în fața ta.
Uneori este necesar să se separe informațiile și în acest scop este trasată o linie orizontală. Pe panoul „ Introduce"fila" HTML butonul " . U linie orizontală Există proprietăți Lățime, Înălțime și Culoare. Pentru a seta Lățimea și Înălțimea în panoul „ Proprietăți” trebuie să specificați valorile cerute în câmpuri WȘi H.
Pentru a seta culoarea liniei, selectați linia și în meniul contextual Editați eticheta...
În caseta de dialog, selectați culoarea liniei dorite.
Conexiuni și navigare
Există mai multe moduri de a crea link-uri hipertext către Tipuri variate fișiere. Ar trebui să începeți prin a crea navigarea pe site. Pentru a crea o legătură între fișiere, trebuie să specificați calea exactă pe care puteți ajunge la documentul dorit.
Calea poate fi fie completă - începând cu adresa de Internet (de exemplu: http:// Dreamweaver/index.htm), fie dependentă de rădăcină (../index.htm). Să ne uităm la modul în care procesul de definire a relațiilor dintre documente este implementat în DreamWeaver.
Pentru a realiza un hyperlink de la orice cuvânt sau mai multe cuvinte, trebuie doar să „atașați” o adresă de internet. Pentru claritate, să facem acest lucru - în textul „Macromedia DreamWeaver. Workshop” evidențiați expresia „Macromedia DreamWeaver”. iar în câmpul „Link” din fila „Proprietăți”, introduceți adresa de pornire a acestui ghid (http://Dreamweaver/) și apăsați „Enter”.
După cum probabil ați observat, cuvintele „Macromedia DreamWeaver. Workshop” și-au schimbat culoarea și au devenit un hyperlink. Pentru a elimina un hyperlink, pur și simplu ștergeți adresa de Internet din câmpul „Link” din fila „Proprietăți” și, de asemenea, apăsați tasta „Enter”. Acum să trecem la calea independentă de rădăcină.
Cu „Macromedia DreamWeaver” evidențiat, faceți clic pe pictograma folderului
iar în dialogul care se deschide, puteți specifica pagina la care să mergeți când faceți clic pe acest link. Mai mult, implicit se va deschide folderul unde se află pagina de la care vrei să dai un link. Întrucât atât aceasta (pagina curentă pe care vreau să dau un hyperlink) cât și pagina către care va direcționa acest hyperlink sunt situate în același folder, este suficient să selectați pur și simplu pagina dorită cu mouse-ul și să faceți clic pe butonul „OK” .
Acum plasați cursorul mouse-ului pe acest link și extindeți lista " Ţintă"filete" Proprietăți".
Există patru elemente în această listă, iar în cazul nostru doar două vor funcționa. Primul element „_self” va afișa pagina către care este indicată hyperlinkul în aceeași fereastră de browser (acest mod este setat implicit), iar al doilea element „_blank” va deschide pagina într-o fereastră nouă.
Elementele rămase din meniul „Target” vor fi necesare pentru a lucra cu cadre.
Când creați un site, folderul inițial al acestui site este rădăcina și conține deja fișiere diferiteși alte subdosare.
Dacă vă uitați la codul HTML pentru acest hyperlink, veți vedea că are următoarea formă../index.htm. Mai mult, aceste două puncte dinaintea liniuței îi spun browserului să „urce” un nivel în sus în arborele de directoare. Sus două niveluri - ../../index.htm și așa mai departe.
Dacă doriți să introduceți o adresă poștală, atunci trebuie să introduceți adresa de e-mail în câmpul „Link” din fila „Proprietăți” (de exemplu: mailto:vsh@dvpion.ru), orice referire la o adresă poștală începe cu mailto:, deși dacă din anumite circumstanțe nu doriți să introduceți cuvântul " mailto:", apoi puteți face clic pe butonul din fila "Comun", unde în câmpul "Text" introduceți textul linkului, iar în câmpul "E-Mail" - adresa de e-mail. În ambele cazuri, efectul va fi fi la fel.
Ancore
Un alt tip de link este „ancora”. Utilizarea acestui tip de link este deosebit de utilă atunci când există o cantitate mare de informații situate pe o singură pagină.
Să setăm navigarea în partea de sus a paginii curente. Primul lucru pe care trebuie să-l faceți este să instalați ancora pe pagină.
Și faceți clic pe butonul din fila „Comun”. În caseta de dialog care se deschide, specificați numele ancorei „new_page_11_top”.
Acum tot ce rămâne este să setați un link către această ancoră aici. Pentru a face acest lucru, trebuie să selectați textul, iar în câmpul „Link” al „filei” Proprietăți„introduceți adresa hyperlinkului care face legătura cu această ancoră: #new_page_11_top
Semnul hash (#) din fața numelui ancorei este comanda pentru browser pentru a „mergi” la marcajul numit new_page_11_top.
Dacă doriți să conectați la o ancoră situată pe altă pagină, atunci specificați calea către pagina cu ancora. De exemplu, vreau să direcționez vizitatorii către o pagină cu „exemple de ancore”. Deoarece numele paginii cu exemple este exemple.htm iar ancora către care vreau să redirecționez are numele 02
, atunci linkul va arăta astfel: (examples.htm#02).
Lucrul cu grafica
Cu ce ne-am ocupat înainte? Cu elemente de text ale paginilor Web. Toate elementele de text sunt create folosind etichetele adecvate ale limbajului HTML.
Printre altele, puteți seta fundalul paginii dvs. Dacă doriți doar să setați o culoare ca fundal, atunci utilizați elementul „Background” pentru aceasta (făcând clic stânga pe pătratul asociat cu acest articol). Și în paleta care se deschide, selectați culoarea de care aveți nevoie. Imaginea de fundal poate fi setată selectând un fișier în câmpul corespunzător al aceleiași casete de dialog.
Inserarea unei imagini grafice
Să plasăm cursorul de text în locul de care avem nevoie și să ne uităm la fila „ Uzual„Setul de instrumente pentru obiecte - există un buton” Imagine(Imagine)". Faceți clic pe el și selectați elementul din meniul care apare pe ecran Imagine. Puteți folosi și punctul Imagine meniul Introduce sau faceți clic
Lista derulantă de foldere și lista de fișiere ne vor permite să selectăm folderul și fișierul dorit.
În câmpul de introducere Nume de fișier Va apărea numele fișierului selectat (sau îl putem introduce noi înșine). O listă derulantă Tip fișier ne va permite să alegem ce tip de fișiere trebuie să găsim. Toate acestea ne sunt familiare prin standard casete de dialog deschiderea și salvarea fișiere Windows. Singura diferență este că există un panou de previzualizare în partea dreaptă. Și dacă vrem să-l eliminăm, dezactivăm caseta de selectare previzualizare imagini. Deci am selectat fișierul. Tot ce rămâne este să faceți clic pe OK. Dar Dreamweaver ne va cere mai multe informații afișând „ Atribute de accesibilitate a etichetei imaginii(Atribute de accesibilitate a etichetei de imagine)” .
Lista combinată „ Text alternativ(Text alternativ)” din această fereastră este folosit pentru a seta așa-numitul text de înlocuire. Acesta a fost inventat pentru utilizatorii de canale de comunicare lente. După ce browserul Web încarcă fișierul HTML care conține pagina Web, acesta va afișa un cadru gol de dimensiuni corespunzătoare în loc de imaginea plasată pe acesta. Când utilizatorul plasează cursorul mouse-ului peste o ramă de imagine goală, browser-ul web va afișa un mic sfat explicativ care conține același text de înlocuire. Prin urmare, se recomandă să utilizați întotdeauna această opțiune.
De fapt, pe listă Text alternativ introdus text de înlocuire scurt. Limita sa nu este mai mare de 50 de caractere. Dacă trebuie să afișăm un text de înlocuire mai detaliat, îl putem salva într-un fișier separat de pe pagina Web și apoi introducem adresa sa de internet în câmpul de introducere. Descriere lungă. De asemenea, puteți să faceți clic pe butonul folder situat în dreapta acestui câmp și să selectați fișierul dorit în caseta de dialog Selectați Fișier. Când ați terminat de introdus datele, faceți clic pe OK. Dreamweaver plasează graficul în locul în care se află cursorul de text.
Opțiuni grafice
Acum să salvăm pagina rezultată, să selectăm imaginea dacă nu este selectată și să ne uităm la editorul de proprietăți. Ce vom vedea acolo Câmpuri de intrare WȘi N ne permit să setăm dimensiunile imaginii introducând manual lățimea și, respectiv, înălțimea acesteia. Acest lucru poate fi util dacă imaginea evidențiată face parte din designul site-ului; în alte cazuri, este mai convenabil să setați dimensiunile imaginii trăgând marcatorii de redimensionare cu mouse-ul.
De fapt, atunci când Dreamweaver plasează un grafic pe o pagină Web, acesta își plasează automat lățimea și înălțimea inițiale în aceste câmpuri de introducere. După cum știm deja, browserul Web imediat după încărcarea paginii
afișează imagini care nu au fost încă încărcate ca cadre goale. Dacă dimensiunile imaginii au fost setate în mod explicit, acestea vor fi aplicate imediat pe cadre și designul paginii nu va fi perturbat. În caz contrar, browserul Web va afișa cadre cu o anumită dimensiune implicită, iar atunci când imaginile sunt încărcate ulterior, dimensiunile acestora se vor schimba, făcând ca pagina în sine să fie redesenată. Și asta este foarte neplăcut.
Câmpuri de intrare V SpațiuȘi N Spațiu setați, respectiv, distanța verticală și orizontală de la marginea imaginii până la textul care curge în jurul acesteia. Implicit, ambele sunt zero.
Câmp de intrare Sr specifică adresa de Internet a fișierului în care este stocată imaginea grafică. În dreapta acestuia sunt două butoane. Făcând clic pe cel din dreapta (cu imaginea folderului), vom deschide o casetă de dialog Selectați Sursa imaginii.
De asemenea, putem schimba numele fișierului imagine făcând clic dreapta pe imagine și selectând Fișier sursăîn meniul contextual sau pur și simplu făcând dublu clic pe imagine. După aceasta, pe ecran va apărea o casetă de dialog Selectați Sursa imaginii.
Câmp de intrare Src scăzut asemănător cu câmpul Src, cu excepția faptului că specifică numele fișierului în care se află așa-numitul imagine „schiță”. Imaginea „schiță” are o dimensiune mai mică, de regulă, din cauza calității mai scăzute și a fost inventată, din nou, pentru proprietarii de canale de comunicare cu viteză redusă. Browserul web va descărca mai întâi „schița”, deoarece este mult mai mică ca dimensiune, și o va afișa pe pagină. Și numai atunci, în timp ce utilizatorul vizualizează pagina finală, imaginea principală se încarcă treptat și înlocuiește „schița”.
Se recomandă să faceți o „schiță” numai când imaginea originală prea mare pentru a încărca rapid. În special, acest lucru va fi potrivit dacă vom face un site web cu grafică artistică.
Câmp de intrare Frontieră vă permite să setați grosimea chenarului afișat în jurul imaginii, în pixeli. În mod implicit, este zero, adică nu există niciun cadru.
Lista combinată Alt specifică scurtul text de înlocuire deja familiar nouă.
Acum să ne uităm la lista derulantă Alinia. Ne permite să specificăm alinierea imaginii, în esență poziția relativă a acesteia și textul pe care îl conține.
Listă Alinia conține următoarele articole:
- Mod implicit- locație implicită, de obicei similară cu elementul De bază;
- De bază- partea de jos a imaginii se potrivește text de bază(o linie imaginară pe care se află o linie de text) linia în care se află;
- Thor- partea de sus a imaginii coincide cu partea de sus a textului liniei in care se afla;
- Mijloc- mijlocul imaginii coincide cu linia de bază a textului;
- Fund- partea de jos a imaginii se potrivește cu partea de jos a textului (de obicei, nu la fel ca De bază);
- TextTop- partea de sus a imaginii se potrivește cu partea de sus a celui mai înalt caracter de text (de obicei, nu la fel ca Thor);
- Mijloc absolut- mijlocul imaginii coincide exact cu linia centrală a textului(o linie care trece prin centrul liniei);
- Fund absolut- partea de jos a imaginii coincide cu partea de jos a celui mai mic caracter de text;
- Stânga- imaginea este „apasată” spre marginea stângă a paginii, iar textul „curge” în jurul ei spre dreapta;
- Dreapta- imaginea este „apasată” spre marginea dreaptă a paginii, iar textul „curge” în jurul ei spre stânga.
În ultimele două cazuri imaginea devine plutitoare. browser web la stânga sau la dreapta, iar textul în care a fost inserat se va înfăşura în jurul acestuia. Și în punctul în care a fost inserată imaginea plutitoare, Dreamweaver afișează o specială marker de imagine plutitor. Acest marcator este afișat numai pentru confortul designerului web și numai în Dreamweaver; Browserul web nu îl afișează deloc.
Deci, ne-am dat seama de editorul de proprietăți. Acum să setăm proprietățile imaginii noastre. Distanța față de text va fi de 5 pixeli pe orizontală și pe verticală, alinierea va fi la stânga, textul „alternativ” va fi o „legendă pop-up”. Și salvează pagina.
Pentru a returna dimensiunile originale ale imaginii, putem folosi butonul Anulare) situat între câmpurile de introducere L și H ale editorului de proprietăți și în dreapta acestora, precum și elementul meniului contextual Resetați dimensiunea. Acest lucru este util dacă le-am distorsionat rău și vrem să o luăm de la capăt.
Imagini speciale
HTML și Dreamweaver vă permit să creați nu numai imagini obișnuite, ci și cele cu proprietăți speciale. Acest imagini cu hyperlink, imagini activeȘi hărți imagine. Ele sunt adesea folosite pe paginile Web, așa că va trebui să le analizăm.
Orice imagine poate fi folosită ca hyperlink; pentru a face acest lucru, trebuie doar să introduceți adresa de Internet în câmpul „ Legătură"panouri" Proprietăți".
Mai mult, puteți da un link fie către o adresă de e-mail, fie către o altă pagină web. În al doilea caz, veți avea acces la lista " Ţintă"
Imaginea poate fi activată, reacționând la trecerea cursorului mouse-ului peste ea - Rostogoli. Pentru a face acest lucru, va trebui să vă aprovizionați cu două imagini care se vor înlocui reciproc și pe " Uzual" apăsați butonul corespunzător.
În fereastra care se deschide, va trebui să completați câmpurile obligatorii
În câmp Nume imagine- indicați numele original al imaginii active, iar numele poate conține doar litere latine (orice imagine activă trebuie să înceapă cu o literă) și cifre (cu siguranță arabă!-:)
În câmp Imagine originală- introduceți calea către imaginea principală, cea care va fi încărcată prima pe pagină.
În câmp Imagine de rulare- introduceți calea către „efectul de imagine”, - această imagine va apărea numai când treceți mouse-ul peste imaginea dvs. activă.
Bifeaza casuta Preîncărcare Rollover- în acest caz, ambele imagini vor fi încărcate de browser deodată și efectul va începe imediat după trecerea mouse-ului. În caz contrar (dacă caseta de selectare este dezactivată), când treceți mouse-ul peste o astfel de imagine, browserul va începe să încarce a doua imagine... și va rezulta un fel de efect lent.
În câmp Text alternativ- introduceți un comentariu text care va apărea când treceți mouse-ul peste imagine.
Ei bine, în câmpul Go To URL - adresa de Internet.
Hărți imagine
O hartă este o imagine solidă cu „zone fierbinți” marcate, iar fiecare astfel de zonă este un hyperlink și are propria sa adresă de internet.
Pentru a începe, plasați desenul pe pagină, selectați-l făcând clic stânga pe el și pe fila " Proprietăți„Folosind formele turcoaz (în colțul din stânga jos există un grup de elemente Hartă) selectați una dintre metodele de selectare a unei „zone fierbinți”. Deoarece pentru exemplu vreau să fac pictogramele albastre „zona fierbinte”, cea mai apropiată. lucru la aceasta este o formă dreptunghi.Dar puteți selecta atât un cerc, cât și o formă neregulată Faceți clic pe patrulater și selectați zona de interes.
Forma pe care o selectați va arăta astfel:
Tot ce trebuie să faceți este să introduceți adresa de internet în „câmp” Legătură” (linkurile pot fi către alte pagini de pe site-ul dvs. sau către alte site-uri, sau către adrese postale), selectați unul dintre elementele din câmpul țintă și introduceți text alternativ în câmpul Alt.
După selecție, puteți muta zona selectată făcând clic pe butonul săgeată din colțul din stânga jos.
Și pentru a selecta figuri de forme neregulate, trebuie doar să faceți clic cu butonul stâng al mouse-ului de-a lungul perimetrului zonei de selectat. În cele din urmă, dați numele original hărții dvs. în câmpul de introducere Hartă și gata.
Mese
Pentru a crea masa noua, accesați „fila” Comune"panouri" Introduce" și apăsați butonul. 
În caseta de dialog care apare, completați câmpurile obligatorii.
Rânduri- numărul de rânduri din tabel
Coloane- numărul de coloane din tabel
Lățimea mesei- lățimea tabelului, iar în meniul derulant trebuie să specificați unitățile de măsură - procente sau pixeli.
Grosimea chenarului- grosimea cadrului tabelului în pixeli, iar dacă setați valoarea la zero, tabelul în sine nu va fi vizibil pe pagină.
Umplutura celulară- distanța de indentare în interiorul celulelor tabelului
Spațierea celulelor- distanța dintre marginile celulelor tabelului
Set comutator Antet(Header) ne va permite să creăm un „antet” și să evidențiem prima coloană a tabelului. Acest set include următoarele comutatoare: Niciunul (fără antet sau prima coloană selectată), Stânga (prima coloană selectată), Sus (antet) și Ambele (atât antetul, cât și prima coloană selectate).
Celulele care alcătuiesc antetul și coloana evidențiată vor fi stilate ca celule antet, iar textul pe care îl introducem în ele va fi automat centrat și aldine.
În câmpul de introducere Legendă(Titlu) Introduceți numele tabelului. Acest nume va fi situat deasupra tabelului creat.
Lista verticală Aliniați legenda(Alinierea) ne va permite să setăm locația și alinierea titlului (dacă, desigur, am introdus unul). Următoarele articole sunt disponibile aici:
implicit (implicit) - alinierea este realizată chiar de browserul Web, de obicei în acest caz titlul este situat deasupra tabelului și aliniat în centru;
sus - titlul este deasupra tabelului și aliniat în centru;
jos - titlul este situat sub tabel și este centrat;
stânga - titlul este deasupra tabelului și aliniat la stânga;
dreapta - titlul este situat deasupra tabelului și este aliniat la dreapta.
În zona de editare rezumat Nota de tabel (total) este introdusă. Această notă nu este afișată pe ecran de browserele Web, dar poate fi utilizată în alt scop (de exemplu, poate fi procesată de programe care citesc textul de pe ecran). Nu este necesar să-l setați.
Odată creat tabelul, îl puteți redimensiona trăgând marginile cu mouse-ul. Treceți cursorul peste unul dintre cele trei pătrate din evidențierea tabelului.
Acum să plasăm cursorul de text în orice celulă a tabelului și să introducem ceva text. Să repetăm același lucru cu celulele rămase din tabel.
O celulă de tabel trebuie să aibă cel puțin un anumit conținut, altfel browserul Web îl poate afișa incorect. Dacă celula încă trebuie să fie goală, introduceți spatiu de nerupere(codul său HTML), așa cum face Dreamweaver în astfel de cazuri.
Pentru a defini proprietățile unui tabel - Selectați-l făcând clic stânga pe marginea tabelului. După aceea, în fila „Proprietăți”.
Puteți modifica proprietățile tabelului și puteți personaliza aspectul acestuia.
Camp ID tabel- specificați numele tabelului (atributul este opțional)
Câmpuri RânduriȘi cols- numărul de rânduri și coloane din tabel.
Câmpuri VȘi H- latimea si inaltimea tabelului in pixeli sau procente.
Camp Alinia- alinierea mesei la stânga, la centru sau la dreapta
Camp CellPad- distanța în interiorul celulei (între conținut și marginea celulei)
Camp CellSpace- distanta dintre celulele tabelului
Camp Mai îndrăzneț- latimea marginii mesei
BG Culoare- culoarea de fundal a mesei
Brdr Culoare- culoarea chenarului pentru întreaga masă.
Imagine Bg- exercițiu imagine de fundal pentru masa.
Există, de asemenea, șase butoane suplimentare acolo.
- Buton clarColoanăLățimi- ștergeți valorile lățimii coloanei
- Buton clarRândÎnălțimi- clare valorile înălțimii liniei
- Butoane ConvertitLățimilaPixeliȘi ConvertitLățimilaLa sută- convertiți lățimea celulei în pixeli și convertiți lățimea celulei în procent
- Butoane ConvertitÎnălțimilaPixeliȘi ConvertitÎnălțimilaLa sută- convertiți înălțimea celulei în pixeli și convertiți înălțimea celulei în procent
Pe lângă setarea proprietăților tabelului, există și setarea proprietăților unei celule sau unui grup de celule. Pentru a seta proprietățile unei celule, faceți clic stânga pe ea. Dacă doriți să setați proprietăți pentru un grup de celule, atunci după ce faceți clic pe câmpul primei celule fără a elibera butonul din stanga Folosiți mouse-ul pentru a selecta celulele necesare (puteți selecta cel puțin întregul tabel în acest fel). Când este selectat, marginile tuturor celulelor adăugate vor fi vopsite într-o culoare diferită.
După ce celulele sunt selectate, acordați atenție din nou „panoului” Proprietăți"
Horz- alinierea orizontală a conținutului celulei (stânga, centru sau dreapta)
Vert- alinierea verticală a conținutului celulei (sus, mijloc, jos sau linia de bază)
În domeniile WȘi H- specificați lățimea și înălțimea celulelor selectate; dacă trebuie să specificați valorile sub formă de procente, adăugați simbolul % după valoarea numerică.
BgȘi Brdr- setarea fundalului celulelor și setarea culorii marginilor celulelor. Și folosind marginea superioară Bg, puteți seta o imagine de fundal pentru celule.
Caseta de bifat NuÎnfășurați- interzicerea întreruperilor de linie
Caseta de bifat Antet- pentru a formata celulele selectate ca antet de tabel.
Acum faceți clic stânga în interiorul oricărei celule și apăsați butonul.
Folosind acest dialog, puteți împărți celula selectată în mai multe părți. Comutatoare RânduriȘi Coloane- împărțiți în rânduri și, respectiv, coloane. Număr de... - în câte rânduri sau coloane trebuie împărțită celula selectată.
Acum selectați două celule și faceți clic pe butonul.
Cele două celule pe care le-ați selectat s-au îmbinat într-una singură și puteți împărți din nou această nouă celulă îmbinată sau, dimpotrivă, o puteți combina cu altele la fel ca cele standard.
Puteți aplica rapid formatarea oricărui tabel. Pentru a face acest lucru, selectați tabelul și în meniu „ Comenzi" selectați elementul " FormatMasa(Format tabel)".
Și în dialogul care se deschide, puteți personaliza designul mesei
După ce ați ales unul dintre șabloanele prestabilite, puteți modifica toate atributele acestuia după gust.
Puteți tăia, lipi sau copia celulele tabelului.
Pentru a tăia o celulă (sau mai multe celule), trebuie să o selectați și să dați comanda Editare - Tăiați. Celula (sau mai multe) vor fi șterse din tabel.
Pentru a copia o celulă (sau mai multe celule), trebuie să o selectați și să dați comanda Editare - Copiere. Celula (sau mai multe) vor fi copiate.
Pentru a lipi celulele copiate sau tăiate, utilizați comanda Editare – Lipire.
Înainte de a continua, încercați să creați mese simple.
Designul mesei
Să presupunem că facem un magazin online. Trebuie să punem pe pagină numele, descrierea, prețul și fotografia produsului. Cu mese este mai ușor ca niciodată.
Cu ajutorul unui tabel special formatat, putem plasa mai multe bucăți de text și o imagine grafică așa cum avem nevoie. Și dacă nu ne place ceva, putem modifica ușor acest tabel și obținem un rezultat complet diferit.
Designerii web au stăpânit de mult tabelele. Și la fel de mult timp în urmă, o idee simplă, ca tot ce era ingenios, plutea în aer. Ce se întâmplă dacă puneți TOT textul unei pagini Web într-un tabel mare, formatat complex, „întinzându-l” pe întreaga fereastră a browserului Web? La urma urmei, atunci vom obține posibilități practic nelimitate, aproape la fel cu cele ale colegilor noștri tipografi. Vom putea crea note, note de subsol, bare laterale și mai multe „fluxuri” de text care vor începe și se vor opri acolo unde avem nevoie de ele.
Acum ne-am apropiat de designul tabelar, adică de o metodă de construire a paginilor Web folosind tabele.
Principiul de bază al designului tabelar a fost deja prezentat. Tot textul și toate elementele grafice se potrivesc în celulele tabelului, permițându-vă să faceți tot ce doriți cu ele. De obicei, astfel de tabele (să le numim tabele de aspect) au chenare invizibile, iar riglele sunt create folosind celule foarte subțiri cu umplutură de fundal. Tabelele de marcare sunt foarte complexe, folosesc diverse formatări și îmbinarea mai multor celule și folosesc aproape întotdeauna tabele imbricate.
Crearea manuală a tabelelor complexe de markup este punctul culminant al designului web. Nu toată lumea, chiar și un designer web cu experiență, se va angaja să creeze pagini complexe bazate pe tabele. Și toate acestea se datorează complexității incredibile a codului HTML rezultat. Prin urmare, foarte des apar erori în codul paginilor Web construite pe baza de tabele, motiv pentru care browserul Web nu le poate afișa întotdeauna. De fapt, în toate aceste numeroase celule îmbinate și în cea mai complexă formatare, puteți pur și simplu să vă confuzi.
Probă- acesta este un fel de eșantion, „scheletul” unei pagini Web, care conține elemente comune tuturor paginilor: titlul site-ului, un set de hyperlinkuri, informații despre copyright, eventual un tabel de markup etc. Aceste elemente rămân neschimbate pe toate paginile create pe baza acestui șablon, de aceea sunt numite elemente imuabile. Da, dar cum se potrivește conținutul principal pe pagină?
Foarte simplu. În special în acest scop, șablonul creează zone schimbătoare
. Acestea sunt destinate conținutului unic al paginii care va fi creată pe baza acestui șablon.
Este simplu: creăm o pagină pe baza șablonului și introducem conținutul său principal în zonele editabile. În acest caz, Dreamweaver nu ne permite să edităm elemente imuabile și, pe bună dreptate, sunt imuabile, până la urmă. Dar nu contează - putem oricând să schimbăm șablonul în sine.
Să, de exemplu, trebuie să reparăm titlul site-ului. Deoarece face parte din șablon, deschidem șablonul, îl reparăm și îl salvăm. Dreamweaver ne solicită imediat să transferăm modificările aduse șablonului în toate paginile create pe baza acestuia. Și îl transferă atât de atent încât nu afectează conținutul zonelor schimbătoare! De fapt, corectează toate elementele duplicat de pe toate paginile Web ale site-ului pentru noi. Șabloanele sunt salvate în fișiere speciale cu extensia dwt, în dosar Șabloane, pe care Dreamweaver îl creează singur în folderul rădăcină al copiei locale a site-ului. Numărul de șabloane folosite în site nu este limitat, așa că putem crea unele pagini de site pe baza unui șablon, iar altele pe baza altuia. Sau, în general, ne putem limita la un singur șablon, așa cum, de fapt, se întâmplă cel mai adesea.
Înainte de a crea un șablon, creați un site web. Înregistrați-l în Dreamweaver.
Acum să creăm un document și să facem markup.
- Creați un tabel cu lățime 100%, 2 rânduri și 1 coloană, chenar 0.
- In prima linie vom face un fundal (fon.gif) si o inaltime de 100 pixeli.
- Apoi, scrieți titlul Site-ul meu în titlul paginii și pe primul rând. Setați dimensiunea textului la +7 și culoarea la galben.
- În a doua linie, setați alinierea verticală la Top.
- Inserați un alt tabel cu lățime 100%, 1 rând și 3 coloane, chenar 0.
- Setați alinierea verticală a fiecărei celule la Top.
- Lățimea primei coloane este de 20%, a doua de 60%, a treia de 20%.
- În fiecare coloană vom introduce un alt tabel de 2 rânduri x 1 coloană, lățime 95%, alinierea tabelului centrat. Și, de asemenea, alinierea verticală în fiecare celulă este Top.
- Apoi, completați rândurile cu text ca în exemplul meu.
- În coloana de navigare, setați culoarea celulelor una câte una la verde.
Aspectul paginii noastre este gata. Nu vom face nimic complicat. Acest lucru va fi suficient pentru scopurile acestei prelegeri.
Acum este momentul să creați un șablon și zone editabile.
Există două moduri de a crea un șablon Dreamweaver. În primul rând, poate fi creat de la zero și apoi umplut cu conținut, ca o pagină Web obișnuită.
În al doilea rând, o pagină existentă poate fi salvată ca șablon și apoi editată prin eliminarea conținutului util și lăsând numai elemente comune. Ambele sunt la fel de ușor de făcut.
Pentru a crea un nou șablon „de la zero” meniu „ Fişier – Nou“
Este și mai ușor să creați un șablon nou dintr-o pagină Web existentă. Pentru a face acest lucru, deschideți pagina Web dorită, selectați „ Fişier"paragraf" Salvați ca șablon„ (Salvare ca șablon). De asemenea, puteți face clic pe butonul Faceți șablon(Creează șablon) Panoul de obiecte. Pe ecran va apărea o casetă de dialog Salvați ca șablon ”.
În lista derulantă Site selectați site-ul unde este salvat șablonul. (Șabloanele sunt o proprietate integrală a site-ului, rețineți) În mod implicit, site-ul curent este selectat acolo.
Numele șablonului însuși este introdus în câmpul de introducere Salvează ca. Să numim noul nostru șablon principal(„principal”) deoarece acesta este șablonul nostru principal în jurul căruia ne vom construi site-ul.
După ce ați introdus toate datele necesare, faceți clic pe butonul Salvați(Salvare) pentru a salva șablonul.
După ce creăm un nou șablon, cel mai recent va apărea în lista de șabloane. Și din moment ce am creat acest nou șablon pe baza unei pagini Web existente, adică are conținut, îl putem vizualiza în panou previzualizare. Cu toate acestea, acest panou este foarte mic și, pentru a ne face o idee despre conținutul șablonului, va trebui să-l deschidem într-o fereastră de document.
Editarea unui șablon
Șablonul gol trebuie să fie completat cu conținut. Șablonul creat pe baza unei pagini Web trebuie editat: eliminați conținutul unic acestei pagini, lăsând doar elemente comune tuturor paginilor site-ului. Pentru a face acest lucru, va trebui să deschidem șablonul într-o fereastră de document, ca o pagină Web obișnuită.
Pe ecran va apărea o fereastră de document în care se va deschide șablonul pe care l-am selectat. În exterior, nu va fi diferit de o pagină Web obișnuită.
Ce putem face cu șablonul? Orice. Vă puteți gândi la ea ca la o pagină Web obișnuită cu câteva caracteristici speciale. (Vom descrie aceste caracteristici în continuare.) Putem să tastați text, să îl formatăm, să plasăm imagini, tabele, hyperlinkuri, să comutăm la modul de aspect al paginii și să creăm tabele și celule de aspect, să creăm seturi de cadre, să „curățăm” codul HTML etc.
Dar totuși, șablonul nu este o pagină Web și are unele caracteristici. Așadar, va trebui să plasăm zone modificabile pe acesta, care ulterior vor conține conținutul principal al paginilor. (Mai mult, cu siguranță va trebui să facem acest lucru, altfel de ce avem nevoie de acest șablon atunci.) Vom învăța cum să facem acest lucru puțin mai târziu.
Să deschidem șablonul principal pe care l-am creat pe baza paginii default.htm (dacă nu este deja deschis).
Acum trebuie să punem zone mutabile în șablon. Pentru moment, va exista o singură zonă care poate fi schimbată - conținutul principal al paginii. Și va fi localizat în cea mai mare celulă a tabelului nostru de marcare. Vom lăsa în pace coloana de știri și bara de navigare pentru moment.
Crearea de regiuni editabile
Ca și în cazul șablonului în sine, putem crea zone mutabile în două moduri. Mai întâi, creați o zonă editabilă goală într-o zonă goală a paginii. În al doilea rând, convertiți o parte din conținutul actual al paginii într-o regiune editabilă.
Prima metodă este cea mai bună dacă am creat un șablon de la zero, iar a doua este cea mai bună dacă am convertit o pagină existentă într-un șablon.
Crearea unei zone editabile goale într-un șablon este foarte ușoară. Pentru a face acest lucru, plasați mai întâi cursorul de text în locul în care dorim să creăm o zonă editabilă goală și decideți ce să folosim:
- set de instrumente obiect făcând clic pe butonul Șabloane pe filă Uzualși selectând elementul din meniul care apare Regiunea editabilă;
- meniul contextual selectând din submeniul acestuia Șablon paragraf Nouă regiune editabilă;
- meniul de sistem prin selectarea din submeniu Obiecte șablon meniul Introduce paragraf Regiunea editabilă;
- tastatura, care este cea mai rapidă - doar apăsați
+ + .
După aceasta, pe ecran va apărea o casetă de dialog Nouă regiune editabilă.
În singurul câmp de introducere Nume situat în această fereastră, introduceți numele unic al zonei editabile nou create. Fiecare zonă editabilă pe care o creăm în șablon trebuie să aibă un nume unic. Acest nume poate conține orice caracter, cu excepția literelor alfabetului rus, a ghilimelelor, a apostrofului și a semnelor "<", ">„ și „&”. După ce ați introdus un nume, faceți clic pe OK pentru a crea zona editabilă sau Anulare a refuza asta.
Dacă am plasat accidental o zonă mutabilă în locul nepotrivit pe care l-am dorit, aceasta poate fi reparată. Selectăm zona care poate fi schimbată făcând clic pe titlul acesteia, o „prindem” cu mouse-ul de conținutul său și o tragem în locul dorit.
Dreamweaver creează automat o mică zonă editabilă de titluri de document atunci când creați orice șablon. (De aceea nu vom putea da zonei mutabile numele doctitie - o zonă mutabilă cu acel nume există deja). Această zonă editabilă include conținutul etichetei