Opțiuni grafice
Puteți adăuga diferite elemente în pagină selectându-le folosind elementul de meniu „Inserare”.
O opțiune mai convenabilă poate fi utilizarea barei de instrumente pentru a insera elemente în pagină. Dacă nu vedeți acest panou, îl puteți activa bifând caseta, așa cum se arată în figură.
Așa arată bara de instrumente.
Mai întâi trebuie să inserăm un tabel. Să specificăm următorii parametri pentru tabel, așa cum vedeți în figură.
Pentru a preveni presarea mesei pe marginea stângă, o aliniem la centru.
În partea de jos, selectați alb pentru fundal.
Pentru antet și subsol avem nevoie de o singură celulă fiecare. Să îmbinăm cele două celule de sus și cele de jos. Mai întâi, selectați primele două celule folosind mouse-ul.
Faceți clic pe butonul de mai jos care combină celulele, așa cum se arată în figură.
Să îmbinăm cele două celule inferioare în același mod. Asta s-a intamplat.
Meniurile necesită mai puțin spațiu decât corpul textului. Plasați cursorul în celula din mijloc din stânga și setați-i lățimea la 20%. Acum va ocupa 20% din lățimea tabelului, iar coloana din dreapta va rămâne 80%.
Asta s-a intamplat.
Să începem să umplem celulele. Introduceți imaginea pregătită pentru antet. Faceți clic pe butonul pentru a insera imagini.
Selectați imaginea dorită.
Este util să oferiți text explicativ pentru imagine. Dacă dintr-o dată cineva are imaginile dezactivate în browser, va vedea acest text în loc de imagine, iar motoarele de căutare vor afișa imagini de pe site-ul dvs. pe baza acestui text într-o căutare de imagini.
Acum să facem meniul. Lăsați site-ul să aibă trei pagini - cea principală, despre clima Antarcticii și despre lumea animalelor din Antarctica. Să scriem titluri pentru aceste pagini și să le evidențiem cu mouse-ul.
Faceți clic pe butonul de mai jos pentru a face meniul sub forma unei liste marcate (1). De asemenea, vom alege alinierea de sus, astfel încât meniul să fie întotdeauna în partea de sus a celulei (2).
Acum, titlurile elementelor de meniu trebuie transformate în link-uri. Selectați textul „Acasă”.
Să venim cu nume pentru fișierele altor două pagini, de exemplu, klimat.html și zhivotnyj-mir.html și, în mod similar, să facem link-uri pentru elementele de meniu corespunzătoare.
Înainte de a introduce orice imagine pe site, aceasta trebuie mai întâi optimizată și salvată într-un format adecvat. Apoi ar trebui să selectați un loc potrivit pe pagină pentru a insera această imagine și să plasați acolo cursorul de text.
Acum executăm comanda de meniu Introduce(Inserare) | Imagine(Imagine) (
Se va deschide o casetă de dialog Selectați Sursa imaginii(Selectarea sursei imaginii):
Vă rugăm să rețineți că în partea dreaptă a casetei de dialog există un panou Previzualizare imagine(Previzualizare imagine), care nu numai că previzualizează imaginea selectată, ci și afișează caracteristicile acesteia: dimensiune, format, volum și timpul estimat de încărcare.
Lista verticală Pliant iar lista de fișiere grafice disponibile aflată mai jos vă permite să selectați imaginea dorită. Faceți clic pe butonul OK. Imaginea va fi inserată în locația cursorului text:
Puteți redimensiona imaginea (dacă doriți să faceți acest lucru) în mai multe moduri. Primul este manual. Mai întâi, selectați imaginea făcând clic pe butonul stâng al mouse-ului. Pe panou Proprietăți(Proprietăți) va afișa proprietățile imaginii selectate, iar imaginea în sine va avea un chenar subțire, cu trei pătrate mici negre care apar pe marginile din dreapta și de jos. Acestea sunt așa-numiții markeri de redimensionare a imaginii:
Pentru a redimensiona imaginea manual, trebuie să trageți aceste mânere în direcția dorită. Pentru a sincroniza dimensiunile orizontale și verticale, țineți apăsată tasta
A doua metodă este să introduceți în câmpurile corespunzătoare ale panoului Proprietăți(Proprietăți) valorile verticale ( N) și orizontală ( W) dimensiuni. În mod implicit, dimensiunile imaginilor sunt setate în pixeli, dar le puteți seta și ca procent din dimensiunea paginii. Pentru a face acest lucru, după dimensiunea introdusă în câmp trebuie să puneți un semn de procent %.
Dacă valorile din câmpurile pentru dimensiunea imaginii sunt îngroșate, înseamnă că au fost deja modificate. Dimensiunile originale ale imaginii sunt afișate într-un stil mai subțire.
Pentru a restabili valorile reale ale imaginii, trebuie să faceți clic pe săgeata rotunjită afișată în dreapta câmpurilor de introducere a dimensiunii imaginii.
În Dreamweaver, puteți modifica și poziția relativă a unei imagini și a textului care o înfășoară. Pentru asta este lista Alinia(Aliniere), situat în, ați ghicit, panoul Proprietăți(Proprietăți):
Valoarea implicită este Mod implicit. Restul de nouă parametri sunt:
- De bază— marginea de jos a imaginii coincide cu linia de bază a textului;
- Thor— marginea de sus a imaginii coincide cu linia de sus a textului;
- Mijloc— mijlocul imaginii coincide cu linia de bază a textului;
- Fund— marginea inferioară a imaginii coincide cu fund text;
- TextTop— marginea superioară a imaginii coincide cu marginea superioară a celui mai înalt caracter de text;
- Mijloc absolut— mijlocul imaginii coincide cu linia centrală a textului;
- Fund absolut— marginea de jos a imaginii coincide cu marginea de jos a caracterului de text cel mai jos;
- Stânga– imaginea este aliniată la stânga;
- Dreapta– imaginea este aliniată la dreapta.
În mod implicit, imaginea este plasată pe pagină fără nicio margine. Dar există momente când un desen trebuie evidențiat într-un fel. Pentru aceasta, se folosește un cadru (sau, așa cum este adesea numit, un chenar). Lățimea cadrului în pixeli este specificată în câmpul de introducere Frontieră(Chenar) situat pe panou Proprietăți(Proprietăți) imaginii grafice:
O valoare nulă sau nicio valoare nu definește niciun cadru. Rama este doar neagra. Figura prezintă exemple de utilizare a chenarelor cu grosimi de 0, 1, 5, 10, 25 pixeli:
Inserarea fișierelor audio și video
În timp ce călătoriți pe internet, probabil ați întâlnit site-uri cu muzică. Cel mai adesea, muzica se găsește pe paginile de start, dar site-urile tematice nu fac excepție.
Sincer să fiu, nu prea îmi plac site-urile care folosesc muzică de fundal. Când navighezi mult timp pe site, aceeași melodie devine destul de plictisitoare. Asa ca nu te lasa dus :)
Cel mai important lucru de luat în considerare atunci când alegeți muzica de fundal este că aceasta se potrivește cu tema site-ului dvs. Și, în general, gândiți-vă dacă ar fi logic să folosiți muzică de fundal pe site-ul dvs.?
Muzica, ca și imaginea de fundal, nu trebuie să distragă atenția de la conținutul paginii. Dacă aceasta este muzică de fundal, atunci cel mai bine ar fi să folosiți doar o melodie fără cuvinte.
Cu toate acestea, pe lângă melodia de fundal, puteți înregistra un salut cu vocea și îl puteți face să ruleze de fiecare dată când vizitați site-ul. Sau adăugați efecte sonore la diferite acțiuni ale utilizatorului - de exemplu, un sunet de „clic” atunci când faceți clic pe linkuri.
Înainte de a plasa sunetul pe o pagină, trebuie să creați sau să selectați un fișier de sunet adecvat. Acum există mai multe formate pentru stocarea unor astfel de documente: MP3, WMA și WAV. Sunt universale și pot fi jucate de aproape toți jucătorii.
Puteți încorpora un fișier de sunet într-o pagină folosind un link obișnuit (vom vorbi despre crearea de linkuri puțin mai târziu). Dar această metodă nu este cea mai bună, deoarece necesită mult efort din partea utilizatorului. Este mai bine să-l folosiți pentru a prezenta, de exemplu, colecția dvs. de muzică.
O modalitate mai eficientă este să încorporați un sunet în pagină care va începe să fie redat când pagina se încarcă. Pentru a face acest lucru, trebuie să conectați așa-numitul modul de expansiune(Conecteaza). Aceste mici programe speciale sunt biblioteci dinamice Windows (DLL) și sunt încărcate automat de browser pentru a reda un fișier audio sau video.
Pentru a conecta un astfel de modul de extensie, ca întotdeauna, mai întâi selectați o locație potrivită pe pagină și plasați cursorul text acolo. Apoi executați comanda de meniu Introduce(Inserare) | Mass-media(Multimedia) | Conecteaza(modul de extindere):
Pentru a accelera procesul, puteți folosi butonul Mass-media fila (Multimedia). Uzual Inserați bara de instrumente. În lista derulantă, selectați ultimul element - Conecteaza.
Oricare dintre cele două opțiuni va deschide o casetă de dialog Selectați Fișier(Selectați un fișier). Dacă fișierul de sunet selectat nu se află în folderul site-ului, Dreamweaver vă va informa despre acest lucru și vă va oferi să îl salvați în folderul corect. În exemplu, fișierul este deja acolo unde ar trebui să fie.
Acum faceți clic pe butonul OK și vedeți ce avem. În locul de pe pagină în care ați plasat cursorul de text, apare un mic dreptunghi gri, care arată același semn ca înaintea articolului Conecteaza butoane Mass-media file Uzual. După cum probabil ați ghicit, acesta este semnul modulului de expansiune.
Acum să aruncăm o privire mai jos, și anume, la panou Proprietăți, unde sunt afișate acum proprietățile modulului de extensie:
După cum puteți vedea, aici puteți regla înălțimea, lățimea modulului, căptușeala și alinierea. Și, de asemenea, lățimea chenarului, calea fișierului și așa mai departe. Butonul Redare ocupă un loc proeminent pe panou. De ce crezi că este nevoie?
Acum să vedem cum va arăta această pictogramă a modulului de extensie în browser:
E simplu. Faceți clic pe săgeata (1) fișierul este redat, faceți clic pe „pauză” sub forma a două linii verticale (2) - redarea se oprește.
Simplu - da, dar setările nu sunt cumva suficiente, nici măcar nu este potrivit pentru un mini-player. Deci, să revenim la Dreamweaver, să mărim lățimea modulului la 100 de pixeli și să vedem ce apare în browser.
E mai bine, nu-i așa? Mai multe butoane de control au devenit vizibile. Acum să mărim lățimea cu încă 100 de pixeli. Poate va mai aparea ceva? 🙂
Da, așteptările noastre au fost îndeplinite! Cu toate acestea, nu vor mai apărea butoane noi (cel puțin în exemplul meu), așa că nu este nevoie să experimentăm în continuare.
Dacă nu vă place acest mini-player și doriți să-l eliminați de pe pagină, lăsând sunetul în sine, atunci introduceți valori individuale în câmpurile de intrare pentru dimensiunea modulului de expansiune. Va fi afișat ca un punct mic, care va fi destul de greu de recunoscut ca jucător. Totuși, în acest caz, vizitatorul nu va putea reda fișierul din nou și nici nu va putea întrerupe redarea. Nu cred că se va bucura de această perspectivă. Mai ales dacă nu-i place sunetul.
Apoi va avea doar două opțiuni - fie opriți volumul în difuzoare, fie închideți fereastra cu site-ul dvs. Prima modalitate este mai costisitoare, dar a doua este ușoară – unul sau două clicuri de mouse.
Puteți insera video într-o pagină în același mod ca și audio - folosind Conecteaza. Nu uitați să măriți dimensiunea modulului de expansiune, astfel încât câmpul de vizualizare să fie mai mare. Un exemplu de fereastră de player pentru demonstrarea unui fișier video:
Imagini de fundal
Mai sus ne-am uitat la modul în care toate tipurile de imagini în diferite formate sunt plasate pe o pagină Web. Toate aceste imagini reprezentau conținutul util al paginii și se aflau în „fluxul” textului, fie atașate rigid de acesta, fie „plutind” în el. Cu toate acestea, standardul HTML definește și așa-numitele imagini de fundal, care sunt plasate sub text și „strălucesc prin” culoarea „transparentă” a elementelor grafice ale paginii. În acest sens, imaginile de fundal sunt similare cu filigranele de pe hârtie de timbru.
Setarea unei imagini de fundal pentru o pagină Web este foarte simplă. Pentru a face acest lucru, deschideți caseta de dialog Proprietățile paginii(vezi Fig. 3.50), pentru care selectați elementul Proprietățile paginii meniul Modifica sau meniul contextual sau apăsați tastele
Orez. 4.26. Pagina web cu imagine de fundal
O imagine de fundal bine aleasă poate însufleți semnificativ o pagină Web. Dar nu ar trebui să alegeți o imagine prea strălucitoare sau colorată ca fundal. Cel mai bine este să imediat după setarea fundalului, să încercați să citiți singur textul afișat pe pagină și să evaluați dacă este ușor de citit. Dacă nu, înlocuiți imaginea de fundal cu una diferită sau eliminați-o cu totul. De asemenea, puteți încerca să alegeți culoarea potrivită pentru text, astfel încât să fie lizibil, dar să nu vă rănească ochii. Uită-te din nou la smochin. 4.26 - acolo textul pare suficient de contrastant pe fundal pentru a fi citit normal.
O imagine de fundal se comportă exact ca imaginile obișnuite plasate pe o pagină: browserul web încarcă mai întâi fișierul HTML al paginii și apoi orice fișiere însoțitoare, inclusiv imaginile. Aceasta înseamnă că nu va mai exista fundal pe pagina ta o perioadă de timp. Și trebuie să vă asigurați că utilizatorul poate citi cel puțin textul paginii dvs. Pentru a face acest lucru, selectați o culoare de fundal care este similară cu tonul general al imaginii de fundal. Deci, dacă imaginea de fundal are un ton închis, setați culoarea de fundal a paginii la gri închis, albastru închis sau negru. Și în acest caz, nu ar trebui să lăsați fundalul paginii alb, deoarece textul dvs. va fi, de asemenea, cel mai probabil alb.
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.
Din punct de vedere tehnic, 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, deoarece sunt fișiere text simplu care conțin cod HTML, ele pot fi scrise în Notepad obișnuit sau într-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 petrecută tastând textul acestei pagini în sine, și nu etichetele 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 funcții suplimentare: inserarea rapidă a etichetelor, setarea convenabilă a parametrilor acestora, un set de șabloane predefinite pentru crearea elementelor standard ale paginii Web etc. În acest sens, sunt similare. la Notepad, dar extins 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.
O fereastră de program de lucru se va deschide în fața dvs.
Și pe pagina nou creată, scrieți un text format din cuvinte rusă-engleză. De exemplu: " informații utile despre 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: (Discul dvs. \Program Files\ 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ă nu sunt active în prezent. 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 dintre ele „așează” toate ferestrele de document deschise într-un „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(Actualizează automat lista de fișiere locale) activează sau dezactivează actualizarea automată a listei 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 mai fi nevoie de 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 în care 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 seta 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 meniu 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 |
|
Un fragment din codul sursă al unui program în orice limbaj de programare (comenzi, nume de variabile, cuvinte cheie etc.) |
|
Variabil |
Folosit pentru a indica în text numele variabilelor programului în orice limbaj de programare |
Informații afișate de un program către utilizator |
|
Tastatură |
Text pe care utilizatorul trebuie să îl introducă folosind tastatura |
Citare |
|
Definiție |
Definiția unui termen |
Editorii de text sprijină crearea de liste numerotate și marcate. 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 Listă proprietăți, cu care putem seta niște parametri de listă. Schimbați stilurile marcatoarelor 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ă" (trei de sus) - 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 caractere speciale folosind fila „Text”.
O altă caracteristică utilă este curățarea codului 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 " . O linie orizontală are proprietățile 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 legături hipertext către diferite tipuri de 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 diverse fișiere și alte subfoldere.
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 din casetele de dialog standard de deschidere și salvare a fișierelor 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 acest lucru 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 ei 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”.
Este recomandat să faceți o „schiță” doar atunci când imaginea originală este prea mare pentru a se î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 ale site-ului dvs. sau către alte site-uri, sau către adrese poștale), 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 un tabel nou, 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ă, inserați un spațiu care nu se întrerupe în ea (codul său HTML este -), 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- setarea unei imagini 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 stâng al mouse-ului, selectați 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 dvs
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.
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ă pentru a elimina conținut util și a lăsa doar 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(Creați ș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 în care 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 pentru că am creat acest șablon nou bazat pe o pagină Web existentă, adică are conținut, îl putem previzualiza în panoul de 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