Dreamweaver Cum să creați un șablon din paginile HTML. Tutorial ilustrat pe Adobe Dreamweaver MX

Pagini web și site-uri web

Ce este o pagină web? Mulți pot răspunde la această întrebare. Acesta este un document online destinat distribuției prin Internet prin intermediul serviciului WWW. Și dacă spunem în comun, acesta este ceea ce arată programul client în fereastra sa pentru a vizualiza paginile web - browser web (browser).

Din punct de vedere tehnic, o pagină web este un fișier text obișnuit care poate fi creat în orice editor de text, același notepad, care este furnizat standard ca parte a Windows. Acest fișier conține textul real al paginii web și diferitele comenzi de formatare ale acestui text. Formatarea comenzilor sunt numite tegs.și descrie limba lor specială HTML. (Limba de marcaj hipertext), limba de marcare hipertext.

Următorul pas este să afli, cu care programele din limba HTML sunt scrise aceste pagini web. Da, deoarece acestea sunt fișiere text convenționale care conțin cod HTML, ele pot fi scrise într-un notebook sau un program similar.

De ce avem nevoie de editori web?

Limbajul HTML, în ciuda unui astfel de nume de înțelepciune, este foarte simplu. Și pentru a scrie cu ea o pagină web simplă cu o pereche de paragrafe text, puteți literalmente în cinci minute, iar cele mai multe ori vor fi cheltuite pe setul de text al acestei pagini și nu etichete HTML. Deci care este problema?

Mulți nu știu HTML, în plus, nu doresc să o studiezi sau nu au timp. Dar vrem să creăm pagini web. Prin urmare, pentru ei, programatorii au scris multe programe concepute pentru a crea pagini web.

Unul dintre aceste programe este scris de către dezvoltatori de la companie. Macromedia. și numită Macromedia Dreamweaver.. Prima versiune a fost lansată în 1998; În prezent, versiunea 8 este disponibilă.

Din Dreamweaver vom lucra.
Dreamweaver. - Un reprezentant tipic al editorilor vizuali care lucrează la principiul WYSIWYG (ceea ce vedeți este ceea ce obțineți "ceea ce vedeți, atunci veți obține"). În acest caz, utilizatorul formează textul și vede imediat rezultatele lucrărilor sale în fereastra editorului.

Există, de asemenea, editori web non-exaltați (sunt editori HTML) pe baza unui alt principiu. Ei lucrează direct cu codul HTML în sine, oferind utilizatorului diverse caracteristici suplimentare: etichete rapide, sarcină convenabilă a parametrilor lor, un set de șabloane predefinite pentru a crea elemente standard de pagină web etc. În acest sens, ele arata ca a Notebook, dar semnificativ avansat.

Aici trebuie să spuneți că aproape toți editorii web serioși au modul de editare direct codul HTML însuși (adică, de fapt, editori de web hibrid). Prin urmare, acum aproape întotdeauna atunci când "editorul web vizual" spune, implică programele hibride. Desigur, numărul lor aparține Dreamweaver.Cu cine este timpul să ne cunoaștem mai aproape.

Introducere

Cu primul pentru a începe programul, vi se va solicita să alegeți un mediu de lucru. Să creăm un document nou " Fişier->Nou"(Fișier nou)

În această filă, creați un document nou selectând pagina de bază (pagina de bază) -\u003e HTML.
Veți deschide fereastra programului.

Și pe pagina nou creată, scrieți un text format din cuvintele ruse-engleză. De exemplu: " informații utile privind lucrul cu programul Dreamweaver".
Apoi salvați pagina cu echipa " Fişier - Salvează ca.", dar nu închideți pagina în Editor și acum deschideți pagina nou creată din browser, ceea ce ați făcut? În cazul meu, a apărut o astfel de scrisoare

Prin urmare, primul lucru pentru ceea ce merită începe este să instruiți Dreamweaver chirilic. Meniu principal Editați | ×. (Editați | ×) - Preferințe. (Setări), în dialogul care se deschide, selectați o categorie Un nou document (Document nou) și în această filă din lista "Codificarea implicită", selectați "Cyrilic (Windows-1251)". Apoi, în partea stângă a acestui dialog, selectați " Fonturi. (Fonturi) "și în listă" Setarea fontului. (Setări fonturi) "Selectați" Cyrilic (chirilic) ".

Aici puteți configura, de asemenea, afișarea textului (selectați fonturile și setați dimensiunea literelor) pentru a fi utilizată în mod implicit. Pentru a finaliza clic pe " O.K"După aceea, creați o altă pagină și introduceți orice text, salvați-l" Fişier - Salvați."Și deschideți pagina salvată. Acum totul este în ordine, dar! Orice pagină web, unde în meta etichetă, nu va afișa" Charset \u003d Windows-1251 "Canset \u003d Windows-1251" va "distrage" Codificarea "Cyrilic (ISO-8859-5)"

Pentru a nu se întâmpla, deschideți fișierul: (Drive \\ Program Files \\ Macromedia \\ Dreamweaver 8 \\ Configuration \\ Encodings \\ encodingmenu.xml) și în lista de codare, găsiți patru codificări chirilice care se desfășoară unul cu celălalt

tabelul 1

Editați acest fișier în "Notepad" prin modificarea codificării "ISO-8859-5" și "Windows-1251" pentru ordinea codării cyrilice de tipul următor.

masa 2

Salvați modificările fișierului, în acest proces de învățare Programul limbii ruse poate fi considerat finalizat.

Interfață

Acum, să ne întoarcem la mediul de lucru al programului.

Pentru a comuta modul de afișare al mediului de lucru (doar trei moduri: Cod. (Codul), Proiecta. (Design si Cod și design. În bara de instrumente sau meniul principal " VEDERE."(Vedere).

Selectați din aceste moduri Cel cu care puteți afla / știi cum să lucrați, deși este preferabil să părăsiți "codul și design", atunci fereastra de lucru pare să fie împărțită în două părți și puteți vedea codul HTML în sine și pagina în modul WYSIWYG.

Deasupra, de mai jos și fereastra dreaptă a documentului există grupuri de panouri - ferestre mici care pot fi fie "lipite" la o margine a ferestrei principale, fie înot liber "lângă el. În partea de sus a fiecărui grup de panouri există antetul său - bandă albastră "convexă", pe care este scrisă numele panoului.

Cele mai multe panouri au așa-numitul meniu opțional. Se deschide când faceți clic pe un buton mic situat în colțul din dreapta sus al grupului, în care este localizat acest panou și având o listă de trei poziții și o mică săgeată. (Într-o stare comprimată, acest buton nu este vizibil.)

Grupurile de panouri sunt întotdeauna situate deasupra ferestrei documentului, chiar dacă în acest moment sunt inactive. Acest lucru se face astfel încât să putem obține întotdeauna acces la ele, indiferent de modul în care fereastra este acum activă.
Dacă vrem să eliminăm oricare dintre aceste grupuri, putem "scoatem" dincolo de fereastra de documente sau deloc, deschideți meniurile sale suplimentare și selecționând elementul de grup de panouri apropiate. Acum, acordați atenție la marginea dreaptă a ferestrei principale, unde există multe feluri de grupuri de panouri. Aceasta este așa-numita zonă de doc, mai ales pentru ei intenționați. Dockul este separat de restul ferestrei principale a benzii gri groase, pe care le putem trage mouse-ul prin schimbarea dimensiunilor docului. De asemenea, putem face clic pe mouse-ul cu un buton destul de note pe docul pentru ao ascunde rapid cu toată lumea.

Trei mai multe panouri Dreamweaver sunt demne de o mențiune separată. Din panourile obișnuite, ele diferă prin faptul că au dimensiuni permanente și formează fiecare grup special

obiecte de seturi de instrumente

document Toolkit

standard Toolkit care oferă acces la operațiile de fișiere (crearea, deschiderea și salvarea unei pagini web), clipboard etc., este inițial ascunsă.

Pentru a scoate aceste panouri pe ecranul meniului principal " Vedere (View) - Bare de instrumente (Bare de instrumente) "(panouri corespunzătoare (inserție, document, standard).

Dacă deschidem mai multe pagini web, va fi foarte dificil să le dați seama - ferestrele de documente se suprapun reciproc și ajung imediat la calea cea bună.

Dacă dezvăluim unul dintre documentele de pe întregul ecran (mai precis, pe întreaga fereastră principală), veți comuta pur și simplu între ferestre. În acest caz, în instrumentul de documente vor apărea file corespunzătoare ferestrelor de ferestre deschise.

Dacă trebuie să continuăm să vedem două ferestre dintr-o dată sau mai mult, merită să utilizați elementele de meniu "fereastră - cascadă, țiglă orizontal sau plăci vertical". Primul dintre ele "pune" toate ferestrele deschise ale documentelor sub forma unui "stivă" în fereastra principală, astfel încât să putem vedea titlurile lor și o parte a conținutului. A doua și a treia elemente "stau" în fereastra principală "Mozaic" din ferestrele documentelor, astfel încât acestea să nu se suprapună. Mai mult decât atât, al doilea paragraf a stabilit "mozaicul" orizontal și al treilea vertical.

Definiția site-ului în Dreamweaver

Înainte de a începe să gestionați site-ul, acesta trebuie înregistrat în Dreamweaver.

Pentru a crea un site nou, utilizați elementul SITE NOU(Site nou) meniu Site-ul.(Site-ul web). După selectare, pe ecran apare o casetă de dialog. Definiția site-ului.(Definiția site-ului), constând din două file.

Dacă este deschisă pe tabară De bază. (Basic), treceți la fila Avansat (Avansat) - Oferă mai multe oportunități pentru configurarea site-ului dvs.
După cum puteți vedea, în partea stângă a acestei ferestre există o listă cu filele de nivel secundar. Comutați la fila Informații locale.(Informații locale) , În cazul în care informațiile despre fișierele site-ului dvs., care sunt pe hard diskul computerului (Copie localăsite).

În câmpul de intrare Numele site-ului.(Numele site-ului) Numele site-ului este introdus. Se servește numai pentru a lucra confortabil cu acest site. Denumiți site-ul "proba".

În câmpul de intrare Dosarul rădăcină locală.(Directorul rădăcină locală) Specifică calea către dosarul rădăcină al copiei locale a site-ului. De asemenea, puteți să faceți clic pe pictograma folderului situată în partea dreaptă a acestui câmp de introducere și selectați folderul dorit din caseta de dialog care apare pe ecran.

Steag Reîmprospătați automat lista de fișiere locale(Actualizați automat lista de fișiere locale) pornește sau dezactivează actualizarea automată a listei fișierelor copiei locale a site-ului. Dacă lăsați-l activat, lista fișierelor site-ului va fi întotdeauna actualizată automat de îndată ce Dreamweaver devine activă. Dacă dezactivați caseta de selectare de mai sus, dvs. va trebui să actualizați lista fișierelor site-ului, dar Dreamweaver va fi activat mai repede.

În câmpul de intrare Dosarul de imagini implicite.(Folder cu imagini În mod implicit), numele dosarului este introdus în care sunt plasate toate imaginile grafice pe pagina web a site-ului vor fi localizate în mod implicit. De asemenea, puteți să faceți clic pe pictograma folderului situată în partea dreaptă a acestui câmp de intrare și selectați folderul dorit din caseta de dialog care apare pe ecran. Introduceți câmpul "PIC".

În câmpul de intrare Adresa HTTP.adresa de Internet a site-ului dvs. este introdusă. Nu introduceți nimic în acest domeniu.

Dacă vă uitați la toate categoriile din dreapta, atunci veți avea multe setări diferite, dar pentru o întâlnire cu ei vor avea nevoie de câteva prelegeri, dar nu avem prea mult timp.

După apăsarea butonului " Gata"În panou Fișiere. Va apărea o listă de fișiere site-uri, inițial că nu există fișiere, dar 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 formați orice text în el.

Textul este tipărit cu ajutorul tastaturii (și cum ați crezut?), În timp ce Dreamweaver va rupe independent textul pe șiruri de caractere.

Cursor de text, adică o linie verticală intermitentă care arată locul în care va apărea textul pe care îl colectați, se poate mișca în toate direcțiile folosind tastele săgeți.

Și apoi în orice browser, în titlul său va fi posibil să se citească

Salvați această pagină oferindu-i orice nume. Paginile principale ale site-urilor sau directoarelor dau numele: index.htm, index.html, index.php și așa mai departe.

Pentru a forma paragrafele, este mai convenabil să utilizați lista derulantă " Format. (Format) "pe panou" Proprietăți. (Parametri) ".

Dacă nu deschideți acest panou - faceți clic pe triunghiul de lângă cuvântul " Proprietăți. (Parametri) ".

În exemplul, sunt prezentate exemple de formatare a paragrafelor, procesul în sine este destul de simplu: faceți clic pe orice paragraf și listat Format. (Format) "Alegeți unul dintre cele șase elemente.
Dacă doriți să formatați nu paragrafe, dar numai cuvinte, expresii sau simboluri selectate - atunci veți folosi pictogramele rămase.
Pentru a specifica dimensiunea caracterelor, utilizați elementul " mărimea (Marimea)".
Puteți alege lista fonturilor text " Mod implicit.Font."Și pentru caractere sau cuvinte diferite, puteți seta diferite fonturi.

Pentru a alinia textul, puteți utiliza aceste 4 butoane. Detalii interesante: Dacă faceți clic din nou prin butonul de comutare, acesta "stoarce". În acest caz, alinierea implicită va fi instalată pentru paragraf, de obicei pe marginea din stânga.

pe marginea din stânga;
centrat;
pe marginea dreaptă;
În lățime.

Pentru sarcină (creștere / scădere), paragrafele pot fi utilizate de paragrafe.
De fiecare dată când apăsați punctul "liniuță", linia va crește și când faceți clic pe "Outdent", dimpotrivă, acesta este redus dimpotrivă.

Există câteva cuvinte pe pagina noastră cu caractere aldine și medii. Și ne vom ajuta în aceste două butoane pentru a schimba tragerea. Dar pentru a porni sau dezactiva textul lui Linie subliniazăÎncă mai trebuie să folosim comutatorul de comutare Subliniază Submeni. Stil.(Stil) meniu TEXT.(Text) sau meniul contextual. Nici butoanele, nici combinația cheie pentru această acțiune.

Paragraf	Descriere
Teletype.	Textul afișat de dispozitivul de ieșire ("TELETIP")
Accent.	Text cursiv normal
	Text cu caractere aldine
	Fragmentul codului sursă al programului pe orice limbă de împerechere a programului (comenzi, nume variabile, cuvinte cheie etc.)
Variabil.	Folosit pentru a desemna în textul programelor variabile variabile pe orice limbă de programare
	Informații generate de orice program pentru utilizator
Tastatură.	Textul pe care utilizatorul trebuie să îl introducă de la tastatură
Citare
Definiție.	Definiție

Editorii de text acceptă crearea de liste numerotate și de etichete. Punctele de liste numerotate (ordonate), după cum știți, sunt desemnate de numerele de secvență și punctele listelor marcate (dezordonate) - orice pictograme. Să creăm o astfel de listă.
Pentru a converti liniile selectate la listă, utilizați butoanele de editare a comutatorului.
Puneți cursorul de text pe orice element de listă din meniul contextual, selectați " Listă – Proprietăți"Și apare o casetă de dialog Lista proprietăților.Cu care putem seta unele dintre parametrii listei. Schimbați markerii sau stilurile de numerotare (de exemplu: utilizați litere în loc de numere - A B C;), precum și pentru listele numerotate, setați numărul din care trebuie să fie pornit numerotarea. Câmpurile de introducere " Tipul de listă"(Trei TOP) - - Permiteți să setați tipul întregii liste, în timp ce câmpurile de introducere" element "(două câmpuri inferioare) sunt legate numai de lista listei pe care este instalată în prezent cursorul mouse-ului.

Textul poate fi vopsit în toate culorile curcubeului - :) Pentru a face acest lucru, selectați orice parte a textului și faceți clic pe buton.
În dialogul descoperit, paleta de culori

Puteți alege orice culoare din această paletă cu o pipetă, în fereastra superioară a acestei palete Afișează culoarea zonei pe care se află pipeta acum.
Mai mult, puteți alege culoarea nu numai cu paleta, ci și mutați pipetul în timpul documentului din fereastra de editor vizibilă.
Și când faceți clic pe triunghi în colțul din dreapta sus al panoului " Paletă"Veți apela un alt submeniu unde puteți schimba paletele.

Adesea este necesar să se introducă data creației sau ultima editare a documentului, butonul vă va ajuta în acest sens. Data. (Data) "sau (introduceți (pastă) - data). În dialogul deschis

Puteți seta opțiunea de afișare a datei, precum și dacă doriți și ziua săptămânii și timpului. Dacă instalați o bifă " Actualizați.Automat.pE.Salvați."- Apoi, după fiecare pagină de actualizare / editare, data va fi actualizată.
De asemenea, aveți posibilitatea de a introduce caractere speciale utilizând fila "Text".

O altă funcție utilă este un Cod HTML Cleaner. Sunați-l de către echipă " Comanda. - Curat.Sus.XHTML."Și înainte de a deschide fereastra acestui dialog.

Uneori este necesar să împărțiți informațiile și să punem o linie orizontală. Pe panou " Introduce"Tab" HTML."Buton. Linia orizontală are o lățime, o înălțime și o culoare. Pentru a seta lățimea și înălțimea în panou " Proprietăți."Trebuie să specificați valorile necesare în câmpuri. W. și H..
Pentru a seta linia de culoare, selectați linia și în meniul contextual al etichetei Editare (Editare etichetă) ...
În caseta de dialog, selectați culoarea liniei dorită.

Comunicare și navigație

Există mai multe modalități de a crea legături hipertext la diferite tipuri de tipuri de fișiere. Ar trebui să începeți cu crearea de navigație pe site. Pentru a crea comunicarea între fișiere, trebuie să specificați cu exactitate calea în care puteți ajunge la documentul dorit.
Calea poate fi ca un început complet, cu adresa online pentru a începe (de exemplu: http: // Dreamweaver / index.htm) și dependent de rădăcină (../index.htm). Să ne uităm la modul în care procesul de atribuire a locurilor de muncă între documente este implementat în Dreamweaver.
Pentru a face un hyperlink din orice cuvânt sau mai multe cuvinte - este suficient pentru a "atașa" adresa de internet la ea. Pentru claritate, vom face acest lucru - în textul "Macromedia Dreamweaver. Workshop" evidențiază expresia "Macromedia Dreamweaver". Și în câmpul "Link" din fila "Proprietăți", introduceți adresa inițială a acestui manual (http: // Dreamweaver /) și faceți clic pe "Enter".

După cum ați observat - cuvintele "Macromedia Dreamweaver" a schimbat culoarea și a devenit un hyperlink. Pentru a șterge un hyperlink - Doar ștergeți adresa Internet din câmpul "Link" al filelor "Proprietăți" și apăsați, de asemenea, tasta Enter. Acum ne întoarcem la calea dependentă de rădăcini.

Evidențiați "Macromedia Dreamweaver" Apăsați butonul cu dosarul de imagine

Și în dialogul care se deschide, puteți specifica pagina care urmează să fie urmată făcând clic pe acest link. În plus, în mod implicit, dosarul se va deschide unde se află pagina cu care doriți să oferiți un link. Deoarece aceasta este aceasta (pagina curentă pe care vreau să o dau un hyperlink) și pagina în care va trimite acest hyperlink, sunt situate într-un singur dosar, este suficient doar pentru a evidenția pagina dorită și faceți clic pe butonul "OK".

Acum puneți cursorul mouse-ului pe acest link și extindeți lista " Ţintă."file" Proprietăți.".
Există patru elemente în această listă, iar în cazul nostru numai două vor funcționa. Primul element "_self" - va afișa pagina la care punctele hyperlink din aceeași fereastră a browserului (acest mod este setat în mod implicit), iar al doilea - "_blank" - va dezvălui pagina într-o fereastră nouă.
Elementele de meniu rămase "țintă" vor fi necesare pentru a lucra cu cadre.

Când creați un site web, dosarul inițial al acestui site este rădăcina și există deja fișiere diferite și alte foldere investite.
Dacă vă uitați la HTML - codul acestui hyperlink, veți vedea că a luat următoarea formă ../ index.htm. Și aceste două puncte înainte de a spune browserul "urca" un nivel de nivel de catalog. Două niveluri în sus - ../../index.htm și așa mai departe.

Dacă doriți să introduceți o adresă de corespondență, atunci pentru aceasta trebuie să introduceți fila "Proprietăți" a adresei de e-mail din câmpul "Link" (de exemplu: mailto:[E-mail protejat] dvpion.ru.), orice legătură cu adresa poștală începe cu mailto: , deși dacă nu doriți să introduceți cuvântul pentru niciun cuvânt, 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 și în câmpul" E-mail "- o adresă de e-mail. Și în același caz, efectul va fi la fel.

Ancoră

Un alt tip de link-uri este o "ancore". Utilizați acest tip de link-uri este util în special cu un număr mare de informații situate pe o singură pagină.
Să setăm tranziția paginii curente. Primul lucru pe care trebuie să-l faceți este să setați ancora pe pagină.
Și faceți clic pe butonul din fila "comună". În dialogul care se deschide, specificați numele denumirii ancorei "New_page_11_top".
Acum rămâne doar pentru a stabili o legătură cu această ancoră aici. Pentru a face acest lucru, selectați textul și în câmpul câmpurilor "Link" Proprietăți.Introduceți adresa hyperlinkului referitor la această ancoră: # New_page_11_top

Grila (#) Înainte de numele ancorei este - aceasta este comanda browserului "Du-te la" la marca sub numele NEW_PAGE_11_TOP.
Dacă doriți să vă referiți la ancoră, situată pe o altă pagină, specificați calea către pagină cu o ancoră. De exemplu, vreau să trimit vizitatori la pagina "Exemple de ancorare". Deoarece numele paginii cu exemple - examples.htm. , și ancora, pe care vreau să o redirecționez, are un nume 02 Legătura va avea următoarea formă: (Exemples.htm # 02).

Lucrul cu grafica

Ce ne-am ocupat mai devreme? Cu elemente de text ale paginilor web. Toate elementele de text sunt create utilizând etichetele HTML corespunzătoare.
Printre altele, puteți seta fundalul paginii dvs. Dacă doriți pur și simplu să întrebați orice culoare ca fundal, utilizați-l pentru acest element "Fundal (fundal)" (făcând clic pe butonul stâng al mouse-ului de pe pătrat la acest element). Și în paleta deschisă, selectați culoarea de care aveți nevoie. Imagine de fundal Puteți seta fișierul în câmpul corespunzător din aceeași casetă de dialog.

Introduceți imaginea grafică

Să punem cursorul de text în locul de care aveți nevoie și să vă uitați la fila " UZUAL."Instrumente de obiecte - există un buton" Imagine.(Imagine)". Faceți clic pe acesta și în meniul care apare pe ecran va selecta elementul Imagine.. De asemenea, puteți utiliza elementul. Imagine. meniul Introduce. sau apăsați ++. După aceasta, pe ecran apare o casetă de dialog. Selectați sursa de imagine..

Lista derulantă a folderului și lista de fișiere ne vor permite să selectați dosarul și fișierul dorit.
În câmpul de intrare Nume de fișiernumele fișierului selectat apare (sau putem introduce singur). Și lista derulantă Tip fișiersă alegem ce tip de fișiere pe care trebuie să le găsim. Toate acestea sunt familiare în funcție de casetele de dialog standard de deschidere și de salvare a fișierelor Windows. Singura diferență este în partea dreaptă a panoului de previzualizare. Și dacă vrem să o eliminăm pentru a opri caseta de selectare PREVIZUALIZARE. imagini.Deci, am ales dosarul. Rămâne să faceți clic pe OK. Dar Dreamweaver va necesita mai multe informații de la noi, retragerea unei casete de dialog " Atribute de accesibilitate a imaginii(Atributele accesibilității etichetei de imagine) " .

Lista combinată " Text alternativ.(Text alternativ) "Această fereastră servește la sarcina așa-numita textul înlocuirii.Este inventată pentru utilizatorii canalelor de comunicare lentă. După ce browserul web va încărca un fișier HTML cu o pagină Web, acesta în locul unei imagini plasate pe acesta, afișați un cadru gol al dimensiunilor corespunzătoare. Când utilizatorul plasează mouse-ul peste cadrul gol al imaginii, browserul web va afișa un indiciu mic care conține acest text al înlocuirii. Prin urmare, se recomandă utilizarea întotdeauna această oportunitate.

De fapt, în listă Text alternativ.introdus scurt text de înlocuire.Restricția sa nu are mai mult de 50 de caractere. Dacă trebuie să afișăm un text de înlocuire mai detaliat, îl puteți salva într-un fișier de pagină web separat, apoi introduceți adresa de Internet în câmpul de introducere Descriere lungă.De asemenea, puteți dubla butonul sub forma unui dosar situat corect din acest câmp și selectați fișierul dorit din caseta de dialog Selectați fișierul. După terminarea introducerii datelor, faceți clic pe butonul OK. Dreamweaver va plasa o imagine grafică în locul unde se află cursorul de text.

Parametrii imaginii grafice

Acum salvați pagina rezultată, selectați imaginea dacă nu este evidențiată și uitați-vă la editorul de proprietăți. Ce vom vedea câmpurile de introducere acolo W. și N. Să stabilim dimensiunea imaginii introducând, respectiv, lățimea și înălțimea manuală. Poate fi utilă dacă imaginea selectată face parte din designul site-ului; În alte cazuri, este mai convenabil să setați dimensiunile imaginii prin glisarea markerilor de dimensiuni cu mouse-ul.

De fapt, Dreamweaver, când este plasat pe o pagină grafică, imaginea grafică însăși lățimea și înălțimea inițială în aceste câmpuri. După cum știm deja, browser web imediat după descărcarea paginii
Afișează încă imagini încărcate sub forma unui cadru gol. Dacă dimensiunile imaginilor au fost stabilite în mod clar, acestea vor fi aplicate imediat la cadre, iar designul paginii nu se va rupe. În caz contrar, browserul web va afișa cadrul implicit de un fel de neplată și la încărcarea ulterioară a imaginii, dimensiunile lor se vor schimba, ceea ce va determina redresarea paginii în sine. Și este foarte neplăcut.

Câmpuri de introducere V spațiu.și H spațiu.acestea specifică, respectiv, distanța verticală și orizontală de la marginea imaginii în textul curgere. Implicit, ambele sunt zero.

Domeniul de intrare SRC.specifică adresa Internet a fișierului unde este stocată imaginea grafică. Din partea dreaptă a acesteia sunt două butoane vizibile. Făcând clic pe dreapta acestora (cu imaginea dosarului), vom deschide caseta de dialog Selectați sursa de imagine..

De asemenea, putem schimba numele fișierului imagine făcând clic pe imagine cu butonul drept al mouse-ului și selectați elementul. Fișier sursă.În meniul contextual sau faceți dublu clic pe imagine. După aceasta, pe ecran apare o casetă de dialog. Selectați sursa de imagine.

Domeniul de intrare SCR scăzut.similar cu câmpul SRC.excepția că numele fișierului este salvat de așa-numitul Imaginea "Chernovoy".Imaginea "Draft" are o dimensiune mai mică, de regulă, datorită calității inferioare și inventată, din nou, pentru proprietarii de canale de comunicare cu viteză mică. Browserul web va descărca mai întâi "Chernovik", deoarece are o dimensiune mult mai mică și o va conduce pe pagină. Apoi, în timp ce utilizatorul navigând pe pagina finită, imaginea principală este încărcată treptat și înlocuiește "proiectul".

Se recomandă să faceți un "schiță" numai atunci când imaginea originală este prea mare pentru a încărca rapid. În special, va fi potrivit dacă ne adunăm pentru a face un site cu grafică artistică.

Domeniul de intrare Frontieră.vă permite să setați grosimea cadrului afișat în jurul imaginii în pixeli. În mod implicit, este egal cu zero, adică cadrele nu sunt.

Lista combinată Alt.specifică textul scurt al înlocuirii deja familiar pentru noi.

Acum, să ne întoarcem la lista derulantă. Alinia.Aceasta ne permite să stabilim alinierea imaginii, de fapt - locația relativă a acestuia și textul în care este localizat.
Listă Alinia.conține următoarele elemente:

Mod implicit.- locația implicită, de obicei similară cu elementul De bază;

De bază- partea de jos a imaginii coincide cu text de bază(linia imaginară pe care se află linia de text) șirul în care este;

Torp- partea superioară a imaginii coincide cu partea superioară a textului liniei în care este localizată;

Mijloc- mijlocul imaginii coincide cu textul de bază;

Fund- partea de jos a imaginii coincide cu partea inferioară a textului (de obicei nu la fel ca De bază);

Texttop.- În partea de sus a imaginii coincide cu partea superioară a celui mai mare simbol text (de obicei nu la fel ca Torus);

Absolut Mijlociu- mijlocul imaginii coincide exact cu textul liniei centrale(linia care trece prin linia centrală);

Fundul absolut.- partea de jos a imaginii coincide cu partea inferioară a celui mai mic simbol text;

Stânga.- imaginea "presează" la marginea din stânga a paginii și textul "fluxurile" la dreapta;

Dreapta- Imaginea "presează" la marginea dreaptă a paginii și textul "Streams" la stânga sa.

În ultimele două cazuri, imaginea devine plutire.Browserul web la stânga sau la dreapta, în timp ce textul în care a fost introdus, se va susține. Și în punctul în care a fost introdusă imaginea plutitoare, Dreamweaver afișează o specială marker de imagine plutitor. Acest marker este afișat numai pentru confortul unui designer web și numai în Dreamweaver; Browserul web nu o afișează.

Deci, cu editorul proprietăților ne-am dat seama. Acum, să punem proprietățile imaginii noastre. Distanța de la text vom face 5 pixeli orizontal și vertical, aliniere - de-a lungul marginii din stânga, "alternativ" text - "inscripție pop-up". Și salvați pagina.

Pentru a returna dimensiunile originale ale imaginii, putem folosi butonul de anulare) situat între W și H și Editorul de proprietăți și dreptul elementului de meniu contextual. Resetați dimensiunea.Este util dacă le distorsionăm foarte mult și doriți să începem din nou peste tot.

Imagini speciale

Limba HTML și Dreamweaver vă permit să creați nu numai imagini obișnuite, dar aveți și proprietăți speciale. aceasta imagini-hyperlink-uri, imagini active și imagini de cardul. Ele sunt adesea folosite pe paginile web, deci va trebui să le luăm în considerare.

Orice imagine poate fi utilizată ca hyperlink, doar introduceți adresa Internet în câmp. " LEGĂTURĂ."Panouri" Proprietăți.".
Și puteți da link-ul atât la adresa de e-mail, cât și la o altă pagină web. În al doilea caz, veți avea o listă disponibilă. " Ţintă."

Imaginea poate fi făcută activă la cursorul mouse-ului pe acesta - Rostogoli. Pentru a face acest lucru, va trebui să stocați două imagini care se vor înlocui reciproc și pe fila " UZUAL."Apăsați butonul corespunzător.
În fereastra care se deschide, va trebui să completați câmpurile obligatorii.

În câmpul Numele imaginii. - Specificați numele original al imaginii active și numai literele latine pot fi în nume (orice imagine activă ar trebui să înceapă cu litera (arabă! - :)
În câmpul Imagine originală. - Introduceți calea către imaginea principală care va fi prima care va porni pe pagină.

În câmpul Imagine de răsturnare. - Introduceți calea spre "Efectul imaginii", - această imagine va apărea numai atunci când puneți cursorul mouse-ului în imaginea activă.
Verificați caseta din câmp Preload Rollover. - În acest caz, ambele desene vor fi imediat încărcate de browser și efectul va începe imediat când deplasați mouse-ul. În caz contrar (când caseta de selectare este deconectată), când locuiți pe o astfel de imagine a mouse-ului - browserul va începe să se încarce a doua imagine ... și un efect lent se va dovedi.
În câmpul Altemate text - Introduceți un comentariu de text care apare până când se deplasează cursorul mouse-ului pe imagine.
Ei bine, în câmpul Go to URL - adresa Internet.

Cartele de imagine

Harta este o imagine dintr-o singură bucată, cu "zone fierbinți", fiecare astfel de zonă este un hyperlink și adresa sa Internet.

Pentru a începe, plasați desenul pe pagină, selectați-l făcând clic pe acesta cu butonul stâng al mouse-ului și pe fila " Proprietăți."Cu ajutorul cifrelor turcoaz (în colțul din stânga jos - un grup de elemente de hartă), selectați una dintre metodele de selectare a unei" zone fierbinți ". De exemplu, vreau să fac o" zonă fierbinte "pictograme albastre, Cu cât este mai aproape de aceasta o figură dreptunghiului. Dar puteți alege atât cercul cât și figura formei greșite. Faceți clic pe Quadrilateral și selectați zona de interes pentru dvs.

Figura pe care o evidențiați va lua forma:

trebuie doar să introduceți adresa de Internet în domeniu " LEGĂTURĂ."(Link-urile pot fi pe alte pagini ale site-ului dvs. sau pe alte site-uri sau adrese de e-mail), selectați unul dintre elementele câmpului țintă și introduceți text alternativ în câmpul ALT.

După selectare, puteți muta zona selectată făcând clic pe butonul cu săgeata din colțul din stânga jos.
Și pentru a evidenția cifrele formelor incorecte, este suficient să faceți clic pe butonul stâng al mouse-ului de-a lungul perimetrului zonei care urmează să fie selectat. În cele din urmă, lăsați numele original al cardului dvs. în câmpul de introducere a hărții și asta este.

Mese

Pentru a crea o masă nouă, mergeți la fila " Commons."Panouri" Introduce."Și apăsați butonul.

În dialogul 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 mesei și în meniul derulant trebuie să specificați unitățile de măsurare - interes sau pixeli.
Grosimea frontierei- Grosimea cadrului de masă în pixeli și dacă puneți o valoare egală cu zero, atunci tabelul în sine nu va fi vizibil pe pagină.
Celulele de perete - distanța pensionării în interiorul celulelor tabelului
Dreapta de celule - Distanța dintre marginile tabelelor tabelului
Set de switch-uri Antet.(Subsolul superior) ne va permite să creăm o "capac" și prima coloană selectată a tabelului. În acest set, comutatoarele nu sunt disponibile (fără "capace" sau prima coloană dedicată), stânga (prima coloană selectată), Torus ("Cap") și ambele (și "cap" și o primă coloană selectată).
Celulele care alcătuiesc "capacul" și coloana selectată vor fi decorate ca celule de antet, iar textul pe care le încheiem în ele va fi aliniat automat în centru și este evidențiat cu caractere aldine.
În câmpul de intrare Legendă (Titlu) Tabelul este introdus. Acest nume va fi deasupra tabelului creat.
Lista verticală Alinierea captiunii.(Aliniere) ne va permite să stabilim locația și alinierea numelui (dacă, bineînțeles, l-am introdus). Următoarele elemente sunt disponibile aici:
Implicit - browserul web efectuează alinierea, de obicei numele este situat deasupra tabelului și nivelurilor din centru;
Top - Numele este deasupra tabelului și nivelurilor din centru;
Fundul - numele este sub masă și niveluri în centru;
Stânga - numele este deasupra mesei și se aliniază la marginea din stânga;
DREPT - Numele este deasupra mesei și se aliniază pe marginea dreaptă.

În zona de editare rezumat (Total) Nota tabelului este introdusă. Această notă nu este afișată de browserele web pe ecran, dar pot fi utilizate în alte scopuri (de exemplu, poate procesa programe care citesc textul pe ecran). Setați-o neapărat.

După ce tabelul este creat, puteți schimba dimensiunile prin glisarea limitelor folosind mouse-ul. Mouse-ul peste una din cele trei pătrate din selecția tabelului.
Acum puneți cursorul de text în orice tabel din tabel și înscrieți un text. Repetați același lucru cu restul tabelului.
Celulele de masă trebuie să aibă în mod necesar cel puțin un anumit conținut, altfel browserul web îl poate afișa incorect. Dacă celula trebuie încă să fie goală, introduceți-o în el un spațiu incontestabil (codul HTML -), la fel ca și Dreamweaver în astfel de cazuri.
Pentru a determina proprietățile tabelului - evidențiați-o făcând clic pe butonul stâng al mouse-ului de-a lungul graniței tabelului. După aceea, pe fila "Proprietăți".

Puteți schimba proprietățile tabelului și puteți seta.
Camp ID-ul tabelului. - Setați numele tabelului (atributul nu este necesar)
Camp Rânduri și Cols. - Numărul de rânduri și coloane din tabel.
Camp V. și H. - lățimea și înălțimea mesei în pixeli sau procente.
Camp Alinia. - alinierea tabelului de pe marginea stângă, centrul sau marginea dreaptă
Camp Cellpad. - Distanța din interiorul celulei (între conținutul și limita celulei)
Camp CellSpaza. - Distanța dintre celulele tabelei
Camp Mai îndrăzneț. - Tabelul lățimii de frontieră
BG Culoare- Tabel de fundal color
Culoarea Brdr. - Culoarea frontierei pentru întreaga masă.
Bg imagine. - Setați modelul de fundal pentru masă.
Există încă șase butoane suplimentare.

Buton clarColoană.Lățimi. - Valori de lățime clară a coloanei

Buton clarRândÎnălțimi. - Curățați valorile înălțimii rândului

Butoane Convertit.Lățimi.la.Pixeli. și Convertit.Lățimi.la.La sută - Conversia lățimii celulelor în pixeli și convertiți lățimea procentului celulelor

Butoane Convertit.Înălțimi.la.Pixeli. și Convertit.Înălțimi.la.La sută - transformarea înălțimii celulelor în pixeli și transformarea înălțimii celulelor în interes

Pe lângă stabilirea proprietăților tabelului, există și un set de proprietăți celulare sau grup de celule. Pentru a specifica proprietățile celulare, faceți clic pe butonul stâng al mouse-ului. Dacă doriți să setați proprietățile grupului celulelor, apoi 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 aloca în acest fel cel puțin întregul tabel). La selectarea - limitele tuturor celulelor adăugate vor fi vopsite într-o altă culoare.
După evidențierea celulelor - se acordă din nou atenție panoului " Proprietăți."

Horz. - alinierea orizontală a conținutului celulelor (pe marginea din stânga, în centru sau de marginea dreaptă)
Vert. - alinierea verticală a conținutului celulelor (în partea de sus, în mijloc, în partea de jos sau de linia de bază)
În domenii W. și H. - Specificați lățimea și înălțimea celulelor selectate, dacă trebuie să specificați valorile în procente - Adăugați simbolul% după valoarea numerică.
BG.și Brdr. - Setați fundalul celulelor și setați culoarea limitelor celulelor. Și cu câmpul superior al BG - puteți specifica imaginea de fundal pentru celule.
Steag Nu.Înfășurați. - Interzicerea transferului de rând
Steag Antet. - Pentru a forma celulele selectate ca titlu de tabel.
Faceți clic pe butonul stâng al mouse-ului din interiorul oricărei celule și apăsați butonul.
Cu 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 corzi și coloane, respectiv. Numărul de ... - pentru cât de multe rânduri sau coloane trebuie împărțite la celula selectată.

Acum selectați cele două celule și apăsați butonul.
Două celule selectate ați fuzionat într-una și această nouă celulă combinată pe care o puteți împărți din nou sau invers pentru a fuziona cu alții ca standard.
În orice tabel puteți aplica rapid formatarea. Pentru a face acest lucru, selectați tabelul și în meniu " Comenzi."Alegeți elementul" Format.Masa(Formatați tabelul). "
Și în dialogul care se deschide, puteți configura designul tabelului

După selectarea unuia dintre șabloanele presetate, puteți schimba toate atributele sale la gustul dvs.
Puteți tăia, introduceți sau copiați celulele tabelei.
Pentru a reduce celula (sau mai multe celule), trebuie să o evidențiezi și să dați comanda Editare. Celula (sau mai multe) va fi scoasă din tabel.
Pentru a copia celula (sau mai multe celule), trebuie să o evidențiezi și să dați comanda de editare - copie. Celula (sau mai multe) va fi copiată.
Pentru a introduce celulele copiate sau tăiate, utilizați comanda Editare-Lipire.
Înainte de a vă deplasa, încercați mâna în crearea celor mai simple mese.

Masa Design.

Să presupunem că facem un magazin online. Trebuie să punem numele pe pagina, descrierea, prețul și fotografia bunurilor. Cu tabele este mai ușor decât simplu.

Cu ajutorul unei mese special formatate, putem plasa mai multe fragmente de text și o imagine grafică, deoarece avem nevoie. Și dacă nu ne place ceva, putem remake ușor această masă și putem obține un rezultat complet diferit.

Designerii web au stăpânit mult timp mesele. Și la fel de mult timp purtând o simplă, ca toată ideea ingenioasă. Și dacă puneți tot textul paginii web într-o masă formată mare, complexă, "întinderea" pe întreaga fereastră de browser web? La urma urmei, vom primi posibilități practic nelimitate, aproape la fel ca colegii noștri. Vom putea crea și note, notele de subsol și inserții și mai multe "fluxuri" ale textului care vor începe și vor întrerupe locul unde avem nevoie.

Așa că am venit aproape de designul tabular, adică metoda de construire a paginilor web folosind tabele.
Principiul principal al designului tabelului a fost deja dat. Toate textele și toate graficele sunt plasate în celulele de masă, ceea ce vă permite să faceți ceva cu ei. De regulă, astfel de mese (să le numim tabele de marcare) au limite invizibile, iar rutele sunt create folosind celule foarte subțiri cu umplere de fundal. Tabelele de marcare sunt foarte complexe, utilizați diferite formate și combinații de celule multiple și tabele practic imbricate mereu.
Crearea meselor complexe de marcare a mașinilor - cel mai înalt pilot al designului web. Nu toată lumea chiar și un designer web experimentat se va angaja să facă pagini complexe bazate pe tabele. Și toate acestea datorită complexității incredibile a codului HTML rezultat. Prin urmare, este foarte des în codul paginii web bazat pe web, există erori, deoarece acestea nu pot afișa întotdeauna un browser web. De fapt, în toate aceste numeroase celule combinate și în formatul cel mai complex, puteți obține cu ușurință confuz.

Șablon - acesta este un exemplu de eșantion, "scheletul" unei pagini web care conține elemente comune pentru toate paginile: un antet de site, un set de hyperlink-uri, informații despre drepturi de autor, eventual o masă de marcare etc. Aceste elemente rămân neschimbate pe toate paginile create Pe baza acestui șablon, prin urmare, se numește și elemente neschimbate. Da, dar cum se află conținutul principal pe pagina pusă pe pagină?
Foarte simplu. Mai ales pentru asta în șablon sunt create zone schimbătoare . Acestea sunt destinate unui conținut unic de pagină care va fi creat pe baza acestui șablon.

Toate simple: Creați o pagină bazată pe șablon și introduceți conținutul principal în zonele variabile. Elementele neschimbate ale Dreamweaver în acest caz nu ne conduc, și corect - sunt imuabile, în cele din urmă. Dar acest lucru nu este o problemă - putem schimba mereu modelul în sine.

Permiteți, de exemplu, trebuie să remediem titlul site-ului. Deoarece este parte a șablonului, deschidem un model, corectați-l și salvați-l. Dreamweaver ne invită imediat să mutăm modificările făcute în șablon în toate paginile create pe baza ei. Și transferuri, așa atent, care nu afectează conținutul zonelor variabile! De fapt, el corectează toate elementele repetitive pe toate paginile web ale site-ului. Șabloanele sunt salvate în fișiere speciale având o extensie dWT., în dosar Șabloane.care Dreamweaver se creează în dosarul rădăcină al copiei locale a site-ului. Numărul de șabloane utilizate în site nu este limitat, astfel încât să putem crea câteva pagini bazate pe un șablon, în timp ce altele se bazează pe celălalt. Și, în general, putem să ne limităm la un singur șablon, deoarece, de fapt, se întâmplă cel mai adesea.

Înainte de a crea un șablon, creați un site web. Înregistrați-l la Dreamweaver.
Acum creați un document și faceți marcajul.

Creați un tabel cu o lățime de 100%, 2 linii și 1 coloană, granița 0.

În prima linie vom face fundalul (fon.gif) și o înălțime de 100 pixeli.

Apoi, scrieți titlul site-ului meu în titlul paginii și în prima linie. Setați dimensiunea textului +7 și culoarea galbenă.

În a doua linie, puneți alinierea verticală de sus.

Introduceți o altă masă cu o lățime de 100%, 1 șir și 3 coloane, marginea 0.

În fiecare celulă, setați alinierea nivelului vertical de sus.

Lățimea primei coloane este de 20%, a doua 60%, a treia 20%.

În fiecare coloană, introduceți mai multe pe tabelul 2 linii x 1 coloană, lățime de 95%, aliniați tabelul din centru. Și, de asemenea, alinierea în fiecare celulă pe verticală de sus.

Apoi, completați șiruri de caractere ca în exemplul meu.

În coloana de navigare, setați culoarea celulelor printr-un verde.

Layout-ul paginii noastre este gata. Nu vom face nimic greu de făcut. Ca parte a acestei prelegeri, acest lucru este suficient.
Este timpul să creați un șablon și o zonă editabilă.

Există două modalități de a crea un șablon Dreamweaver. În primul rând, poate fi creat "de la zero", apoi completați conținutul ca pagină web obișnuită.
În al doilea rând, pagina existentă poate fi salvată ca șablon, apoi editați, ștergând conținutul util și lăsând numai elemente comune. Ambele fac la fel de ușor.
Pentru a crea un șablon nou "De la zero" Meniu " Fişier – Nou“

Creați un nou șablon bazat pe pagina web existentă este chiar mai ușoară. Pentru a face acest lucru, deschideți pagina web dorită, selectați în meniu " Fişier"Articol" Salvați ca șablon."(Salvați ca șablon). De asemenea, puteți să faceți clic pe buton. Face șablon. (Creați un șablon) Panou de obiect. Caseta de dialog apare pe ecran. Salvați ca șablon. ”.

În lista derulantă Site-ul. Selectați site-ul în care este salvat șablonul. (Șabloanele sunt o proprietate integrală a site-ului, amintiți-vă) în mod implicit, site-ul curent este selectat acolo.

Numele șablonului este introdus în câmpul de introducere. Salvează ca.. Să ne numim noul șablon principal. ("Șef"), deoarece acesta este modelul nostru principal, pe baza cărora vom construi site-ul nostru.
Introducerea tuturor datelor necesare, faceți clic pe Salvați. (Salvați) pentru a salva șablonul.
După ce creăm un nou șablon, acesta din urmă va apărea în lista de șabloane. Și din moment ce am creat acest nou șablon bazat pe o pagină web existentă, adică are conținut, îl putem vedea pe panoul de previzualizare. Adevărat, acest panou este foarte mic și pentru a obține o idee despre conținutul șablonului, va trebui să-l deschidem în fereastra documentului.

Editați șablonul

Un model gol trebuie să fie umplut cu conținut. Șablonul creat pe baza paginii web trebuie editat: Scoateți conținutul unic pentru această pagină, lăsând numai elementele pentru toate paginile stem. Pentru a face acest lucru, va trebui să deschidem un șablon în fereastra documentului ca pagină web obișnuită.
O fereastră de documente va apărea pe ecranul în care șablonul selectat de noi va fi deschis. În exterior, el nu va diferi de pagina web obișnuită.
Ce putem face cu șablonul? Orice. Puteți considera o pagină web obișnuită cu unele caracteristici. (Aceste caracteristici descriem în continuare)
Dar totuși un șablon nu este o pagină web și are unele caracteristici. Deci, va trebui să punem zonele variabile pe el, în care conținutul principal al paginilor va fi ulterior. (Mai mult, cu siguranță vom trebui să o facem, altfel de ce avem nevoie de acest șablon.) Cum să o faceți, vom învăța puțin mai târziu.
Deschideți șablonul principal pe care l-am creat pe baza paginii implicite.htm (dacă nu este încă deschisă).

Acum trebuie să punem în zonele variabile ale șablonului. Până în prezent, zona variabilă va fi doar una dintre conținutul principal al paginii. Și va fi localizată în cea mai mare celulă din tabelul nostru de marcă. Vom lăsa coloana de știri și panoul de navigare până singur.

Crearea de zone schimbătoare

Ca și în cazul șablonului în sine, putem crea zone variabile în două moduri. În primul rând, creați o zonă variabilă goală pe o pagină goală. În al doilea rând, transformați un fragment al conținutului actual al paginii în zona variabilă.

Primul mod este cel mai potrivit dacă am creat un model "de la zero", iar al doilea - dacă am convertit o pagină existentă în șablon.

Creați o zonă variabilă goală în șablon este foarte simplă. Pentru a face acest lucru, puneți mai întâi cursorul de text la locul în care vrem să creăm o zonă goală schimbătoare și să decidem cum să utilizați:

instrumente de obiecte făcând clic pe buton Șabloane.pe tab-ul UZUAL.și alegerea unui element din meniul care apare Regiune editabilă;

context meniul selectând în submeniul său Șablon.paragraf O nouă regiune editabilă;

meniul sistemului selectând în submeniu Obiecte de șablon.meniul Introduce.paragraf Regiune editabilă;

tastatura, care este mai rapidă, este suficientă pentru a face clic ++.

Pe ecran va apărea apoi caseta de dialog. O nouă regiune editabilă.
În singurul câmp al numelui numelui din această fereastră, este introdus numele unic al zonei variabile nou create. Fiecare zonă variabilă creată de noi în șablon ar trebui să aibă un nume unic. Acest nume poate conține orice caractere, cu excepția literelor alfabetului, citate, apostrof și semne "<", ">"Și" & "Introducerea unui nume, faceți clic pe butonul OK pentru a crea o zonă variabilă sau Anulare Pentru refuzul de la acesta.

Dacă am plasat în mod accidental zona de schimbare, nu în locul în care doreau, este corectată. Evidențiați zona variabilă făcând clic pe mouse-ul peste antet, "Capturați" mouse-ul peste conținut și luând locul potrivit.

Dreamweaver când creați orice șablon creează automat o mică zonă de doctle variabilă. (Prin urmare, nu vom putea da un nume de domeniu variabil Doctitie - o zonă variabilă cu un astfel de nume deja există). Această zonă variabilă include conținutul etichetei. Cu alte cuvinte, numele paginii web. <br><b><i>Atenţie!</i> </b><br> După ce o pagină web a fost creată pe baza șablonului, nu veți putea redenumi niciuna dintre regiunile variabile disponibile în acesta. <br> Și, în cele din urmă, se poate întâmpla ca doriți să eliminați zona de schimbare. Puteți face acest lucru în două moduri: simplu și foarte simplu. O modalitate foarte simplă este să selectați zona de schimbare făcând clic pe antet și apăsați tasta. <Del>. Mod ușor - pentru a pune un cursor de text undeva în interiorul conținutului zonei schimbătoare și selectați element <b>Îndepărtați marca editabilă.</b> Submeni. <b>Șabloane.</b> meniul <b>Modifica.</b> sau meniul contextual. Rețineți că după eliminarea zonei de schimbare, conținutul său rămâne în șablon. Deci, dacă doriți să ștergeți întreaga zonă variabilă, va trebui, de asemenea, să ștergeți conținutul său.</p> <h3><b><span>Crearea de pagini web bazate pe șabloane</span> </b></h3> <p>Creați o pagină Web bazată pe șablon în două moduri. Prima modalitate este de a folosi elementul deja familiar pentru noi. <b>Nou</b>meniul <b>Fişier.</b>În acest caz, pe ecran apare o casetă de dialog. <b>Document nou,</b>comutați la fila <b>Șabloane.</b> <br> În listă <b>Șabloane pentru.</b>selectați site-ul din care va fi luat șablonul. Șablonul în sine este ales în listă. <b>Site-ul. <i><имя cauma>. </i> </b>Dacă steagul <b>Actualizați pagina când modificările șablonului</b>activat (și este activat în mod implicit), când șablonul este modificat, pe baza căreia pagina web creează, acesta din urmă va fi schimbat în consecință. Și este mai bine să nu dezactivați această casetă de selectare. <br> Pe ecran apare o fereastră de documente care conține o nouă pagină web. <br> Zona variabilă creată de noi este evidențiată într-un cadru albastru. În plus față de conținutul său, nici un alt element de pagină nu poate fi schimbat; Când vă deplasați pe el, cursorul mouse-ului modifică ultima formă pe cercul încrucișat. Nici măcar nu vom putea selecta nimic din conținutul șablonului - numai conținutul regiunilor variabile.</p> <p>Mai mult, dacă trecem la modul de afișare a codului HTML, atunci nu vom putea corecta conținutul șablonului în sine. Codul HTML aparținând șablonului va fi format în Gray Dim - acesta este un avertisment pentru noi. După cum puteți vedea, șablonul este protejat în siguranță de editare. <br> Să mergem la muncă! Am pus cursorul de text în zona variabilă, ștergând vechiul său conținut, care a rămas în "moștenirea" din șablon și a introduce unul nou. Dacă nu vrem să introducem din nou acest conținut (în evenimentul nostru, în cele din urmă există o pagină web finalizată, pe baza căreia am creat acest model), puteți utiliza metoda pe care a experimentat computerul "Copiere și -Incur ". Deschideți vechea pagină web, <br> Copiați conținutul principal în clipboard și introduceți-l în zona variabilă. Ce poate fi mai ușor și mai rapid!</p> <h3><b><span>Actualizarea paginilor bazate pe șabloane</span> </b></h3> <p>Acum, presupuneți că am creat câteva pagini bazate pe șablon și după aceea, după aceea, au observat brusc că o eroare a fost embrietă în conținutul șablonului. Noi numim șablonul pe ecran, regulile și salvați-l. Ce se întâmplă în acest caz? Și acest lucru se va întâmpla. În primul rând, Dreamweaver va afișa caseta de dialog <b>Actualizați.</b><b>Șablon.</b><b>Fișiere.</b><b>, </b>După aceea, Dreamweaver va afișa o altă casetă de dialog <b>Actualizați fișierele,</b>conținând informații despre paginile actualizate; Închideți-l făcând clic pe buton <b>Închide.</b></p> <p>Din păcate, avem puțin timp să studiem și am revizuit foarte repede și pe scurt posibilitatea de a lucra în programul Dreamweaver. Dacă doriți să explorați mai profund acest material, este interesant să creați pagini web și site-uri, atunci ar trebui să vă înscrieți pentru un design web sau un curs de design web.</p> </td> <p>Fiecare site trebuie să fie design, dar poate fi prea dificil de a crea un design pentru utilizatorii novici. Dacă utilizați și doriți să faceți designul original al site-ului, atunci va trebui să cunoașteți câteva informații. <br></p> <p>Pentru a începe, începeți să căutați un șablon de înaltă calitate pe Internet. După ce a găsit una dintre opțiuni (de regulă, arhivă cu fișiere) deschide-o și asigurați-vă că are foldere și fișiere necesare, cum ar fi imagini, index.html, defauckt.css etc. Dacă nu există fișiere ale fișierelor din arhivă, puteți începe imediat să căutați un alt șablon.</p> <h2>Instrucțiuni de instalare Șablon</h2> <p>Dacă aveți toate fișierele necesare, utilizați următoarele instrucțiuni.</p> <p>1. Arhiva trebuie să deschidă în folderul Șabloane pe care doriți să le creați în directorul site-ului dvs.. La copierea, urmăriți transferul complet al tuturor fișierelor și folderelor, deoarece Aceasta poate fi cauza afișării non-de înaltă calitate a anumitor elemente.</p> <p>2. Acum <i>deschis Dreamweaver.</i> Și apăsați combinația CTRL + N cheie sau selectați Fișier\u003e Nou. În fereastra care apare, trebuie să mergeți la fila "Șabloane" și să selectați numele site-ului dvs. din coloana din stânga.</p> <p>După aceasta, numele șablonului apare în coloana din stânga, pe care tocmai ați adăugat la dosarul Șabloanelor:</p> <p> <br><img src='https://i1.wp.com/workion.ru/wp-content/uploads/2013/06/1323.jpg' width="100%" loading=lazy loading=lazy></p> <p>În partea dreaptă, pe care am subliniat-o în verde, puteți urmări modul în care este instalat șablonul va arăta. Pentru a crea o pagină cu acest șablon, apăsați butonul "Creare".</p> <p>3. După aceasta, va apărea o pagină de cod în care puteți modifica unele setări de pagină:</p> <p> <br><img src='https://i0.wp.com/workion.ru/wp-content/uploads/2013/06/4231.jpg' width="100%" loading=lazy loading=lazy></p> <p>După cum arată practica, paginile cu șabloane gata făcute sunt adesea "umplute", deci are sens să citiți cu atenție codul și să eliminați piesele inutile.</p> <p>În mod separat, aș dori să spun că cea mai bună opțiune pentru obținerea unui șablon este ordinea unui proiect individual. Pe schimburi independente, puteți găsi o mulțime de artiști care vor fi de acord să creeze un șablon unic pentru site-ul dvs. pentru o anumită taxă. Acesta este un proces mult mai simplu decât crearea acestui șablon.</p> <p>Veți fi, de asemenea, interesați: <br> — <br> — <br> — </p> <p>Acum, întregul site constă dintr-o singură pagină - <b>index</b>. Dar, la urma urmei, site-ul dvs. va consta dintr-o singură pagină, nu? Apoi, să creăm restul paginilor.</p> <p>Se înțelege că aveți deja o imagine a conținutului aproximativ al celorlalte pagini ale site-ului dvs. Dacă nu o aveți încă, vă sfătuiesc să construiți această imagine în capul meu, ca și în lucrarea ulterioară, aceasta va ajuta.</p> <p>În general, aveți numele de secțiuni și subsecțiuni? Este logic să începem cu creația lor.</p> <p>Mai întâi deschideți pagina index din Dreamweaver. Acum salvați-l completând comanda <b>Fișier | Salvați ca (salvați ca)</b>, dar deja sub un nume diferit. Să presupunem cea de-a doua pagină pe care o veți fi numită <b>state.</b> (articole). Deci, salvați pagina indexului sub magazinele de nume.</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Acum aveți două pagini gemene identice care au nume diferite. Dar de ce aveți nevoie de două exact aceleași pagini de pe site, deși sub nume diferite? Cred că nu este nimic.</p> <p>Prin urmare, fără a închide Dreamweaver, faceți modificări la noua dvs. pagină, pe care o voi numi implicit implicit <b>state.</b>. Introduceți toate fotografiile, scrieți textul ... Implementați ideile despre această pagină. Desigur, la început pot exista toate câteva paragrafe, dar este doar prima opțiune?</p> <p>Gata? Apoi du-te <b>Proprietăți de pagină.</b>. Amintiți-vă totuși cum se face? Comandă de meniu <b>Modificați | Proprietăți de pagină (Proprietăți pagină)</b>sau combinație de taste <Ctrl>+<J>. Următorul în lista din stânga <b>Categorie</b> Selectați elementul <b>Titlu / Codificare (antet / codificare)</b>.</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_2.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Lângă inscripție <b>Titlu (titlu)</b>scrieți antetul paginii. În acest caz, "articole". De asemenea, puteți scrie "numele site-ului dvs.\u003e articole" sau invers, "articole\u003e numele site-ului dvs.".</p> <p>Apropo, și pentru pagina principală aveți un titlu? În general, care este titlul? Aceasta este ceea ce este afișat în partea de sus a ferestrei browserului dvs. la vizualizarea paginii.</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_3.jpg' height="37" width="191" loading=lazy loading=lazy></p> <p>Asta-i tot, a doua pagină este creată. Înainte de a vă deplasa pentru a crea toate celelalte pagini, vă voi spune cum să conectați două pagini deja create (index și state) cu hyperlink-uri.</p> <p>Ca utilizator al Internetului, cu siguranță vă confruntați cu referințe. Întregul internet constă din ei! Este dificil să se prezinte existența ei fără legături care sunt practic pe fiecare pagină.</p> <p>Vizitatorii dvs. vor trebui, de asemenea, să meargă într-un fel de la o secțiune la alta. Și cum faceți fără linkuri?</p> <p>Acum puteți executa comanda de meniu. <b>Modificați | Face link.</b> (Se deschide o casetă de dialog) sau contactați panoul nostru de proprietăți preferate. <br> Dacă alegeți oa doua opțiune, acordați atenție domeniului <b>Link (link)</b>. În dreapta găsiți un buton cu dosarul de imagine. <b>Răsfoiți fișierul.</b> Și faceți clic pe el.</p> <p>Se deschide o casetă de dialog <b>Selectați fișierul.</b>unde trebuie să selectați fișierul la care va conduce link-ul.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_6.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Faceți clic pe OK, salvați pagina și deschideți-o în browser. Verificați modul în care funcționează linkul. Dacă ați făcut toate corect, după ce faceți clic pe pagina dorită. În acest caz, de pe pagina principală la pagina de articol. Este ca asta? Deci, cu sarcina pe care ați făcut-o cu succes!</p> <p>Hyperlink-urile pot fi create de la zero, fără a evidenția cuvântul sau fraza. Deschideți fila <b>UZUAL.</b> Bare de instrumente <b>Introduce.</b>. Primul este butonul <b>Hyperlink (hyperlink)</b>.</p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_8.jpg' height="52" width="140" loading=lazy loading=lazy></p> <p>Faceți clic pe ea deschide caseta de dialog <b>Hyperlink (hyperlink)</b>.</p> <p><img src='https://i0.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_9.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Camp <b>Link (link)</b> Ați devenit deja familiar, trebuie să existe adresa URL a paginii la care se face legătura. Când faceți clic pe butonul din dreapta <b>Naviga.</b> Cu imaginea dosarului, fereastra se deschide <b>Selectați fișierul.</b>.</p> <p>Acordați atenție câmpului de introducere <b>Titlu</b>. Puteți introduce textul explicativ pentru a fi afișat când depuneți cursorul la link. Acest câmp este destul de spațios, este posibil să introduceți mai multe propuneri.</p> <p>Pentru a schimba adresa link-ului creat, îl puteți selecta și corecta valoarea introdusă în câmp <b>LEGĂTURĂ.</b> Panouri <b>Proprietăți.</b>. Sau executați comanda de meniu <b>Modificați | Schimbați linkul (înlocuiți linkul)</b>care deschide fereastra <b>Selectați fișierul.</b>în care trebuie să selectați un fișier nou care conține pagina dorită.</p> <p>În plus față de link-urile simple de text, puteți crea și un link poștal în Dreamweaver. Linkul poștal este un hyperlink care creează o tranziție către o altă pagină sau pe site, dar la adresa de e-mail specificată. De regulă, astfel de link-uri sunt folosite pe site-uri pentru a crea feedback cu vizitatorii.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_10.jpg' height="254" width="243" loading=lazy loading=lazy></p> <p><img src='https://i1.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_11.jpg' height="51" width="139" loading=lazy loading=lazy></p> <p>Ambele metode conduc la deschiderea casetei de dialog. <b>Link-ul de e-mail (link de e-mail).</b></p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_12.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Faceți clic pe OK și uitați ce sa întâmplat.</p> <p>Pe pagină, în locul în care se afla cursorul de text, textul introdus în câmpul de text va apărea. Va arăta ca un link de text obișnuit. Deschideți pagina în browser și faceți clic pe link. Fereastra standard a programului de e-mail trebuie deschisă.</p> <p><img src='https://i2.wp.com/prostosite.ru/wp-content/uploads/2013/01/dreamweaver_img3_2_13.jpg' align="center" height="499" width="461" loading=lazy loading=lazy></p> <span> <p>Continuăm seria de articole dedicate creării unei singure pagini în programul "Dreamweaver" și în acest articol regulat Luați în considerare șablonul HTML bazat pe o singură pagină.</p> <p>Vom crea șablonul nostru HTML pe baza eșantionului finit al celei mai simple "pâlnie" de atragere a potențialilor distribuitori (clienți) sau a abonaților.</p> <p>În ultimul articol "Cum de a face site-ul dvs. în programul Dreamweaver" Avem puțin studiat programul "Dreamweaver" și a creat prima pagină HTML prin ea.</p> <p>Dacă vorbim de ce am început acest subiect (subiectul creării unei pagini sau așa cum se spune, creând o pâlnie pentru a atrage potențialii clienți, distribuitori, apoi ...</p> <p>Faptul este că am întâlnit în mod repetat câți oameni pur și simplu nu înțeleg evident. Este faptul că, pentru a crea calitativ site-urile dvs. de o singură pagină și pentru a stabili un sistem de atragere a acestei metode, nu este chiar de dorit, ci pur și simplu trebuie să fie ghidat în limbile de aspect, să puteți crea cel mai simplu șablon HTML și , dacă este necesar, pentru a face schimbări suplimentare.</p> <p>Nu trebuie să știți totul perfect. Este necesar doar să știm ce este necesar pentru a vă rezolva sarcinile. Și, după cum înțelegeți, una dintre sarcini este să aveți o abilitate rezistentă de a crea o singură pagină. Aduceți această abilitate înainte de a putea crea un șablon HTML în orice moment în orice moment.</p> <p>Acesta poate fi un șablon HTML pentru o singură pagină, pentru eliberarea poștală, pentru un site de carte de vizită, pentru vânzarea unei pagini, precum și un șablon HTML pentru diferite inserții arbitrare de pe site-ul dvs.</p> <p>Pentru a nu spune acolo, iar componenta tehnică a afacerii sau afacerilor dvs. de rețea pe baza vânzării de produse informaționale este foarte importantă.</p> <p>Așa cum am spus în ultimul articol, în prezent există o mulțime de servicii pentru a crea site-uri de o singură pagină unde sunt oferite diverse tehnologii pentru a crea un șablon HTML.</p> <p>Dar, <b>in primul rand</b>Astfel de servicii sunt furate și, în timp, nu mai răspunde la cerințele pe care le sunt prezentate tehnologii moderne.</p> <p><b>În al doilea rând</b>Dacă sunteți slab sau nu orientați spre toate în aspectul HTML, veți fi foarte greu de făcut în astfel de servicii de care aveți nevoie. Cu toate acestea, dacă aveți sânge interesat de convertirea dvs. pentru a atrage parteneri pentru a crește, aveți nevoie doar de abilitățile de a crea un șablon HTML.</p> <p><b>În al treilea rând</b>- în cazul în care studiați doar superficial acest subiect, personalitatea dvs. va suferi, stilul dvs. și, ca rezultat - <b>Marca ta.</b>.</p> <p>Deci, se pare că foarte multe "sunt conduse" pe diferite tipuri de produse, cumpara diverse pachete și servicii, copiați ceea ce în multe cazuri nu funcționează, și apoi surpriză, de ce se întoarce atât de puțin din afacerea lor.</p> <p>Problema este, de asemenea, că, chiar și prin achiziționarea unor astfel de produse, oamenii se confruntă cu diferite "capcane", își coboară mâinile și, în cele din urmă, "aruncă" toate acestea, fără a face nici măcar încercări de a afla adevăratele cauze ale eșecurilor.</p> <p>Cel mai interesant lucru este că aceste greșeli și eșecuri sunt mai conectate cu componenta tehnică a aspectului HTML, studiind foile de stil cascadă (CSS) și, de asemenea, înțeleg că și ceea ce este în general inside creat de paginile HTML.</p> <h3>Creați un server local și pregătiți solul pentru a crea primul șablon HTML</h3> <p>Deci, începem să creăm primul nostru șablon HTML în programul Dreamweaver.</p> <p>În ultimul videoclip și articol, ne-am întâlnit cu programul Dreamweaver și, de asemenea, am învățat să inserați mai multe elemente pe șablonul nostru simplu HTML (sau, așa cum spun ei - blocuri).</p> <p>De asemenea, am creat un dosar special în care ați plasat fișierele pentru muncă.</p> <p>Acum vom învăța să creăm un lucru mai complex - un server local. Este necesar ca să putem crea, personaliza și testa șabloanele HTML create.</p> <p>Acestea. Când creați un server local pe hard disk, se creează o secțiune virtuală (disc) care imită Internetul. În consecință, când vom instala un server local pe hard disk, calea către pagina dvs. HTML va arăta ca și cum ați fi pe Internet.</p> <p>Ca un server local pentru a vă crea <b>Șablonul HTML.</b> Vom folosi "Denwer".</p> <p>Doriți imediat să vă opriți puțin. Modificări "Denwer" foarte mult și există multe add-on-uri la ea. Prin urmare, dacă mergeți mai întâi la site-ul principal pentru descărcare, atunci, deși va fi suficient pentru sarcinile noastre, dar vă recomandăm să descărcați exact versiunea și montarea, <b>link-ul la care este mai jos</b>.</p> <p>În acest ansamblu există o componentă foarte importantă - "Zend Optimizer", pe care va trebui să le configuram în continuare un script foarte important pentru a crește conversia paginilor HTML.</p> <p>Pentru a seta serverul local pe hard disk, pur și simplu rulați fișierul executabil și urmați instrucțiunile pe care le veți apărea pe ecran.</p> <p>În detaliu despre instalarea și configurarea serverului local, am spus și a arătat într-un tutorial video special creat.</p> <h3>Șablonul HTML pe exemplu</h3> <p>Șablonul HTML, pe care îl vom lua în considerare, este cel mai simplu, dar în prezent convertirea la astfel de tunnori este încă destul de mare. Prin urmare, puteți plasa în siguranță acest tip de șablon HTML pe site-urile dvs.</p> <p>Ce ar trebui să acorde atenție ...</p> <p>Am încercat să fac o lecție, astfel încât nu a fost dificil pentru tine, pentru că Înțeleg că mulți încă nu știu destul de bine limba de straturi HTML, precum și foi de stil cascadă. Prin urmare, în lecție este explicată în detaliu, cu care butoane puteți face site-ul dvs. de o pagină fără aceste cunoștințe și abilități.</p> <p>În general, consultați lecția, toate fișierele necesare (dacă nu ați descărcat) și creați-vă o pagină în editorul vizual al HTML "Dreamweaver".</p> <p><b>P.S.</b> În lecție, o mică eroare pe care am observat-o după crearea unui videoclip. Explicații Vezi în videoclipul în sine.</p> <p><b>P.S.</b> În articolul următor, voi pregăti un videoclip în care voi afișa metoda "avansată" de creare a unui site de o singură pagină bazat pe cele mai populare șabloane HTML RUNnet.</p> <p><i>Cu sinceritate, Andrei Aperkov</i></p> <p>#EverkoVteam # MLM # nethewarketing # muncitor # recrutare # Mlambiu # grădiniță socială</p> </span> <p>o zi buna <br>Știm cu toții că șablonul unic este bine perceput de motoarele de căutare. <br>Deci, astăzi vreau să vorbesc despre cum să-mi scriu propriul șablon cu programul <b>Adobe Dreamweaver.</b><br>Acest program este plătit, dar dacă căutați în Google, puteți găsi o versiune gratuită (nu un demo), <br></p><p> <input style="margin: 3px; padding: 0; border: 1px solid #999999; background-color: #FAFAFA; font-weight: bold; font-size: 0.8em" type="button" value="+" onclick="if (this.parentNode.parentNode.getElementsByTagName(" div this.parentnode.parentnode.getelementsbytagname this.innertext="" this.value="−" else></p> <p>Adobe Dreamweaver CS6 + Kryak</p><br>De îndată ce am descărcat și instalat, cred că puteți începe <p>Înainte de a începe, creați un dosar undeva pentru site, vom salva fișierele noastre acolo. Și să creați imediat un dosar pentru imagini</p><p>În meniul principal, selectați <b>HTML.</b></p><p>Codul sursă al documentului va apărea în fața dvs. <br><b>Titlu</b> - Necesitatea de a afișa numele site-ului în browser. Noi scriem numele site-ului nostru viitor. De exemplu, acum voi crea un site web despre tema turismului. Și sunteți de acord, prețul pe clic în subiectele turistice publicitare contextuale este mai mare decât cel al filmului sau al sportului. Desigur, din partea mea, nu este bine să faci un site exclusiv pentru câștiguri, dar voi încerca să fac jumătate de eșantion. Nu scriu articole artistice, voi comanda numai. Dar turismul tematic este prea extins, așa că site-ul meu va fi despre o anumită țară, adică despre <b>Italia</b>. Asta am făcut</p><p><b>Corp.</b> - acesta este corpul site-ului, pune cursorul între ele, faceți clic pe " <b>Introduce</b>", în ea" <b>Mese</b>"Aici puteți alege numărul de rânduri și coloane.</p><p>Cu ajutorul mesei, ne-am împărțit site-ul pe secțiuni (cap, meniu, subsol, bază). Cadrul meu va fi simplu. Dacă vă puteți descoperi imediat cum să alegeți o cale complicată. Așa mi-am împărțit locul viitor:</p><p>La început, setați 2 coloane și 3 linii și apoi celulele superioare și cele două celule inferioare combinate. Pentru a face acest lucru mergeți la " <b>Proiecta</b>"Alocat folosind butonul" <b>ctrl.</b>"2 celule și butonul drept al mouse-ului" <b>mese</b>" => "<b>combină celulele</b>"<br>Asta am primit în secțiunea " <b>Codul</b>" </p><p>lățimea - lățimea, puneți 1115, pălăria va fi de asemenea de această dimensiune <br>Înălțime - Înălțime, 100%, ecran complet <br>frontieră - Să fie în valoare de 1, astfel încât am văzut granițe. Apoi, când totul terminat, îl puteți schimba la 0</p><p>Vreau să subliniez unul dintre avantajele programului, când începeți să scrieți un fel de etichetă apare și acolo puteți alege imediat eticheta și introducerea. <br>Salvați o dată pe zi <b>index.html.</b> . Nu știi niciodată ce, lumina oprește eroarea pe care o va da ...</p><p>Acum, să începem să umplem conținutul site-ului <br>Mai întâi trebuie să punem o pălărie, am o pălărie pre-pregătit <br>Pentru a face acest lucru introduceți cursorul în prima celulă, apoi " <b>introduce</b>"Și" <b>imagine</b>", Alegeți antetul nostru acolo și se va introduce automat în cod, am schimbat lățimea la 1115px și lasă înălțimea așa cum este. <br>Dar, cu o creștere a amplorii paginii, tabelul intră în partea stângă, iar dreapta rămâne goală. Trebuie să vă aliniați în centru. Pentru a face acest lucru, evidențiam întreaga masă (în cod), priviți în jos și vedeți acolo " <b>alinia</b>", alegeți" <b>cENTRU</b>", asta-i tot. Ne uităm la ecran</p><p>Să facem imediat capacul nostru imediat, să alocați textul, să mergeți în jos și există un șir " <b>legătură</b>", Scriem index.html acolo <br>Cu un capac terminat, puteți adăuga altceva, obțineți o gustare</p><p>Acum puteți adăuga categorii la blocul de meniu: " <b>introduce</b>" - "<b>hyperlink.</b>"Prin schimbarea parametrilor pentru dvs. introduceți mai multe categorii. De exemplu, am <b>Orașele Italiei</b> - City.html, <b>Italia Obzor.</b> - Italliya.html, <b>alimente italiană</b> - ITALIAANSKAYA-PICCA.HTML etc.</p><p>Dacă faceți clic pe butonul " <b>proprietăți Pagina</b>", din partea de jos a secțiunii" <b>proiecta</b>", Puteți schimba parametrii de legătură (lumină, dimensiune, liniuță, font etc.)</p><p>Partea principală: intrăm în design, aducem cursorul la blocul "Partea principală" și introduceți textul, codul pentru acesta este înregistrat automat. Aici, dacă te duci la " <b>proprietăți Pagina</b>"Puteți edita parametrii</p><p>Acum, să creăm celelalte pagini <br>Mergi la " <b>proiecta</b>"În blocul" cel mai ", eliminăm totul, completăm alte informații. De exemplu <b>Orașele Italiei</b> Am scris aici totul legat de tema orașului Italia și salvez pagina ca <b>city.html.</b> <br><b>Italia Obzor.</b> , umpleți-vă și păstrați-vă ca <b>italliya.html.</b></p><p>La sfârșit, asta am făcut</p><p>Aceasta este naturală nu o masterat. Și pentru designerii experimentați care sunt foarte multe pe acest forum, lecția mea va părea ridicolă, dar pentru un începător care nu are conceptul în crearea unui site, se va coborî complet. <br>Sper că lecția mea va servi pentru a începe cu un bun exemplu și îi va trimite mai multe proiecte serioase</p><p>Dacă undeva am făcut o greșeală, nu judecă strict</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </article> <div class="post-bottom"> <div class="post-share"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir" data-counter=""></div> </div> </div> <div class='yarpp-related'> <div class="related-items"> <div class="headline">Nu a găsit un răspuns la întrebarea dvs.? Uita-te aici</div> <div class="items"> <div class="related-item"> <a class="related-item__title" href="https://totrdlo.ru/ro/registraciya-lichnoi-stranicy-v-socialnoi-seti-facebook-kak-obedinit-dve-uchetnye.html"><img src="/uploads/3283d29449f6fcf31e7b8c7f3a8f6779.jpg" width="120" height="120" alt="Cum să combinați două conturi pe Facebook?" class="related-item__image" / loading=lazy loading=lazy>Cum să combinați două conturi pe Facebook?</a> <div class="related-item__comments"><span></span></div> </div> <div class="related-item"> <a class="related-item__title" href="https://totrdlo.ru/ro/kak-v-vorde-delat-ramki-krasivye-skachivaem-i-vstavlyaem-krasivye-ramki-v.html"><img src="/uploads/fd38b064f444ed23c0ccb9be68fc25ad.jpg" width="120" height="120" alt="Descărcați și introduceți un cadru frumos către documentul Word" class="related-item__image" / loading=lazy loading=lazy>Descărcați și introduceți un cadru frumos către documentul Word</a> <div class="related-item__comments"><span></span></div> </div> <div class="related-item"> <a class="related-item__title" href="https://totrdlo.ru/ro/clock-watchdog-timeout-windows-10-chto-delat-kak-ispravit-oshibki-clock-watchdog-timeout-tipa-sinii.html"><img src="/uploads/418be8351eeee7a32bc2c905fc8ed975.jpg" width="120" height="120" alt="Cum să remediați erorile de tip ceas_watchdog_timeout"синий экран" (0x00000101)" class="related-item__image" / loading=lazy loading=lazy>Cum de a repara ceasul_watchdog_timeout tip "albastru ecran" (0x00000101)</a> <div class="related-item__comments"><span></span></div> </div> </div> </div> </div> <div style="text-align: center; margin-top: 15px; margin-bottom: 15px; " id="vanna-1965575812"><div class="adsense"><script type="text/javascript">ga_1();</script></div></div> </main> <aside class="sidebar"> <div class="advices" data-theme="vannapedia_v.3"> <div class="headline"></div> <div class="advices-content"> <img src="/uploads/e819878f778f58eec8fa5da1561c1952.jpg" width="120" height="120" alt="Intel Core i5 4590 Recenzii de procesor" class="advices__image" / loading=lazy loading=lazy> <div class="advices__title" data-id="3334"><a href="https://totrdlo.ru/ro/processor-intel-core-i5-4590-otzyvy-obem-kesh-pamyati-l3-mb.html">Intel Core i5 4590 Recenzii de procesor</a></div> </div> </div> <div class="vk-widget" id="text-3"> <div class="textwidget"><script type="text/javascript" src="//vk.com/js/api/openapi.js?130"></script> <div id="vk_groups"></div> </div> </div> <div class="sidebar-questions"> <div class="headline">Nou</div> <ul> <li><a href="https://totrdlo.ru/ro/chto-delat-esli-chernyi-ekran-chernyi-ekran-pri-vklyuchenii.html" >Ecranul negru când porniți computerul</a></li> <li><a href="https://totrdlo.ru/ro/kak-zablokirovat-programme-dostup-v-internet-kak-zablokirovat.html" >Cum să blocați corect programele de acces pe Internet?</a></li> <li><a href="https://totrdlo.ru/ro/cherneet-ekran-chernyi-ekran-pri-vklyuchenii-kompyutera-chto.html" >Ecranul negru când porniți computerul?</a></li> <li><a href="https://totrdlo.ru/ro/nastroika-mach3-pod-vash-stanok-bazovaya-nastroika-mach3-pereklyuchit-yazyk-na-match.html" >Limba de comutare de bază de configurare Mach3 pe \u200b\u200bmeciul 3</a></li> <li><a href="https://totrdlo.ru/ro/pochemu-net-zvuka-v-dinamikah-kompyutera-pochemu-ne-rabotaet-zvuk-na.html" >De ce sunetul nu funcționează pe computer cum să remedieze problema</a></li> <li><a href="https://totrdlo.ru/ro/kak-nachertit-diagrammu-v-vorde-stroim-grafiki-i-diagrammy-v-ms-word-diagramma.html" >Construiți grafice și diagrame în MS Word</a></li> </ul> </div> <div class="section"> </div> <div class="section"> <div class="headline">Articole populare</div> <ul class="sidebar-posts"> <li><a href="https://totrdlo.ru/ro/anime-fony-dlya-yandeks-brauzera-zhivye-upravlenie-temami-v-yandeks.html"><img src="/uploads/a7fbccd6efc443dd82be7ccfadade707.jpg" width="80" height="80" alt="Gestionarea temelor în Yandex" / loading=lazy loading=lazy>Gestionarea temelor în Yandex</a></li> <li><a href="https://totrdlo.ru/ro/post-i-get-zaprosy-prostymi-slovami-kak-otpravit-post-zapros-iz-brauzera-metod.html"><img src="/uploads/b37483beedf1144b2ca10b1603f4d78c.jpg" width="80" height="80" alt="Cum se trimite browser-ul de solicitare Post: Metodă Postare variabilă Post în exemplele de utilizare PHP" / loading=lazy loading=lazy>Cum se trimite browser-ul de solicitare Post: Metodă Postare variabilă Post în exemplele de utilizare PHP</a></li> <li><a href="https://totrdlo.ru/ro/kakie-sistemnye-trebovaniya-igry-cs-go-optimalnyi-komp-dlya.html"><img src="/uploads/ba7b6a9d8273cc696c1be7825f6e3e6c.jpg" width="80" height="80" alt="Calculator optim pentru COP care computer pentru CS merge" / loading=lazy loading=lazy>Calculator optim pentru COP care computer pentru CS merge</a></li> </ul> </div> <div class="section"> <div class="headline">Nou pe site</div> <ul class="sidebar-posts sidebar-photo"> <li><a href="https://totrdlo.ru/ro/optimalnyi-komp-dlya-ks-go-kompyuter-dlya-cs-go-sistema-na-kotoroi-ks-go-ne.html">Calculator optim pentru COP</a></li> <li><a href="https://totrdlo.ru/ro/ispolzovanie-xml-v-srede-delphi-ispolzovanie-xml-document-object-model-sozdanie-xml-v.html">Utilizarea modelului de obiect al documentului XML Crearea unui XML în clapa Delphi Xe</a></li> <li><a href="https://totrdlo.ru/ro/kak-ubrat-oshibku-scenariya-v-windows-kak-ispravlyat-svoi-oshibki.html">Cum de a corecta greșelile dvs. Cum de a repara toate erorile laptopului</a></li> <li><a href="https://totrdlo.ru/ro/migaet-bukva-s-na-printere-ustranyaem-oshibki-esli-printer.html">Eliminați erorile dacă imprimanta nu vrea să tipăriți</a></li> <li><a href="https://totrdlo.ru/ro/kak-ubrat-oshibku-scenariya-v-windows-ispravlyaem-oshibki-v-rabote-windows-kak.html">Corect Windows în Windows Cum să scapi de erorile de calculator</a></li> </ul> </div> </aside> </div> <footer class="footer"> <nav class="footer__nav"><ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1219"><a href="https://totrdlo.ru/ro/">Nou</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/ustranenie-nepoladok-zablokirovannyh-ustanovok-i-udalenii-net.html">Depanarea instalațiilor și ștergerilor blocate</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/modul-chisla-v-eksele-summirovanie-po-modulyu-v-excel-alternativnye.html">Modul de sumare în Excel</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/administrator-windows-zaproshennaya-operaciya-trebuet-povysheniya-administrator.html">Operația solicitată necesită o creștere</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/zakrepit-stroku-v-word-zakreplyaem-zakreplenie-paneli-instrumentov-v-word-vklyuchenie.html">Fixați bara de instrumente în cuvânt</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1230"><a href="https://totrdlo.ru/ro/">Popular</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/zakrepit-tablicu-v-word-zakreplenie-paneli-instrumentov-v-word-vklyuchenie-otdelnyh.html">Fixați bara de instrumente în cuvânt</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/ne-udalyaetsya-stranica-v-word-kak-v-programme-word-udalyat-stranicy.html">Ca în programul Word pentru ștergerea paginilor</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/pochemu-poyavlyaetsya-sinii-ekran-na-windows-7-sinii-ekran-smerti-bsod-boremsya.html">Ecranul de moarte albastră (BSOD) - Ne luptăm cu erorile</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/smenit-imya-vkontakte-bez-proverki-kak-pomenyat-imya-i-familiyu-v.html">Cum de a schimba numele și prenumele la VK</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/vklyuchaetsya-noutbuk-acer-aspire-v3-571g-ne-vklyuchaetsya-noutbuk-acer-sbros.html">Nu este inclus laptop Acer</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/rabochaya-klaviatura-ne-rabotaet-ustanovka-draivera-s-diska-otkazyvaetsya.html">Instalarea driverului de pe disc</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/moshchnye-igrovye-pk-moshchnye-igrovye-pk-kak-sobrat-igrovoi-komp-za-100000.html">PC-uri puternice de jocuri Cum de a asambla un computer de jocuri pentru 100.000</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/devil-may-cry-vyletaet-ne-zapuskaetsya-dmc-tormozit-igra-vyletaet-glyuchit-reshenie-samyh-rasprostra.html">Diavolul poate plânge accidentele. Nu începe DMC? Inhibă jocul? Se blochează? Buggy? Rezolvarea celor mai frecvente probleme. După fiecare misiune în DMC: Diavolul poate plânge problemele cu transferul contului pentru liste de lideri</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1236"><a href="https://totrdlo.ru/ro/">Recomandat</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/dyablo-3-zavisaet-vo-vremya-igry-ne-zapuskaetsya-diablo-iii-tormozit-igra-vyletaet.html">Nu începe Diablo III?</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/kak-proverit-kompyuter-na-sledyashchie-programmy-kak-proverit-kompyuter-na.html">Cum să verificați computerul la spyware</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/kak-naiti-programmu-slezheniya-na-kompyutere-shpionskie.html">Spyware pe computer</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/chto-delat-esli-mass-effect-3-vyletaet-pri-zapuske-mass-effect-ne-zapuskaetsya.html">Efectul de masă nu începe: rezolvarea problemelor</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/reshenie-samyh-rasprostranennyh-problem-ne-zapuskaetsya-the-saboteur.html">Are Saboteur?</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/pochemu-kompyuter-shch-lkaet-prichiny-po-kotorym-shchelkaet-zhestkii.html">Motivele pentru care hard diskul face clic și soluția lor de făcut atunci când faceți clic pe unitatea de sistem</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/deadfall-adventures-kak-sdelat-polnoekrannyi-rezhim-kak-aktivirovat-polnoekrannyi-rezhim-v-brauzere.html">Cum se activează modul Fullscreen în browser?</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://totrdlo.ru/ro/mirror-s-edge-chernyi-ekran-zvuk-est-mirrors-edge-ne-zapuskaetsya-ne.html">Oglinzile de margine nu pornește, nu funcționează, nu este instalat</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-6898"><a href="https://totrdlo.ru/ro/">Despre site</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6900"><a href="">Despre site</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6901"><a href="">Publicitate pe site-ul web</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6902"><a href="">Contacte</a></li> </ul> </li> </ul></nav> <div class="footer-bottom"> <div class="footer-left"> <div class="foot__logo"> <div class="footer__logo-sitename">toddlo.ru. <span> RU.</span></div> </div> <style> .foot__logo { min-height: 35px; margin: 0 0 11px -79px; padding: 9px 0 0 79px; text-decoration: none; } </style> <p>© 2021 Toate drepturile rezervate</p> <p>Ghidul dvs. mobil. Operatori. Sfat util</p> <ul class="footer-bottom__nav"> <li><a href="" >Publicitate pe proiect</a></li> </ul> </div> <div class="footer-buttons"> </div> <ul class="footer__soc"> <li><a href="http://vk.com/" target="_blank" class="vk">În contact cu</a></li> <li>Odnoklassniki.</li> <li><a href="http://www.facebook.com/" target="_blank" class="fb">Facebook.</a></li> <li><a href="https://twitter.com/" target="_blank" class="twi">Stare de nervozitate.</a></li> </ul> <div class="footer-right"> <div class="footer__note"></div> <div class="footer__counters" id="text-2"> <div class="textwidget"></div> </div> </div> </div> </footer> </div> </div> <link rel='stylesheet' id='wp-lightbox-bank.css-css' href='/wp-content/plugins/wp-lightbox-bank/assets/css/wp-lightbox-bank.css?ver=4.8.3' type='text/css' media='all' /> <script type='text/javascript' src='https://totrdlo.ru/wp-content/themes/vannapedia_v.3/js/scripts.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.3'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://totrdlo.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-fixed", "margin_top" : 10, "margin_bottom" : 0, "stop_id" : "respond", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-4'] } ; </script> <script type='text/javascript' src='https://totrdlo.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://totrdlo.ru/wp-content/plugins/wp-lightbox-bank/assets/js/wp-lightbox-bank.js?ver=4.8.3'></script> <script type='text/javascript' src='https://totrdlo.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0'></script> <script type="text/javascript">  </script><br> <br> </body> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>