Lecții de trimitere a formularelor Adobe Dreamweaver cs6. antrenament Dreamweaver. Selectarea unui mod de afișare a documentului

Dreamweaver este un instrument puternic care vă permite să simplificați de zece ori multe operațiuni de rutină cu care se confruntă în mod inevitabil orice webmaster. O tranziție convenabilă între modul grafic și modul de editare a codului vă permite să obțineți control maxim asupra site-ului pe care îl creați.

Adobe Dreamweaver pentru începători.

În această lecție vom învăța cum să lucrăm cu acest editor de cod și să realizăm configurarea inițială a programului:

Primul lucru pe care trebuie să-l faceți este să faceți clic pe fila Editați și să mergeți Setări –> Creați un document (Document nou).

În caseta de dialog care apare, trebuie să setați următorii parametri:

Tip de document implicit (DTD) –> HTML 4.01 Tranzițional

Codificare implicită –> Chirilic (Windows)

Mergem la creat disc local Z:\ (acest disc este creat implicit de program). Acolo, în directorul de acasă, creăm un folder numit plata.ru, în care, la rândul său, creăm folderul www, în care creăm folderul img. Rezultatul ar trebui să fie o ierarhie - Z:\home\plata.ru\www\img.

Clic Creați (nou) –> Site (Site)

Pe fila Informații locale Introduceți informații de bază despre site:

Nume site: PLATA.RU

Director rădăcină local: Z:\home\plata.ru\www\

Dosar implicit de imagine: Z:\home\plata.ru\www\img\

În documentul care se deschide, între etichete scrie urmatorul cod:

Salut Lume

Repornim Denver pentru a actualiza lista de adrese și în orice browser disponibil, introduceți www.plata.ru în bara de adrese.

Ar trebui să arate așa:

Tot ce rămâne este să atașați foaia de stil și configurarea Dreamweaver poate fi considerată completă.

Noi creăm fișier nou cu numele SS.css în directorul rădăcină al site-ului și scrieți un mic cod în interior

Faceți clic dreapta în zona goală pentru lucrul cu stiluri, situată în colțul din dreapta sus al ferestrei programului și selectați Atașați foaia de stil.

Introduceți adresa la care ați salvat tabelul și faceți clic pe OK. Salvăm ambele documente și le verificăm în browser. Culoarea inscripției ar trebui să devină roșie.

În această lecție, am configurat Dreamweaver să funcționeze cu viitorul nostru site web. Acest program Se va dovedi a fi pur și simplu de neînlocuit și în curând vei putea vedea asta pentru tine.

În lecția următoare ne vom uita la .

Ţintă : Familiarizați-vă cu Dreamweaver atunci când creați o pagină web, precum și spațiul de lucru al programului.

Sarcini:

  • Explorați zona de lucru.
  • Învață să creezi o pagină nouă folosind conținut CSS.
  • Învață să salvezi un document.
  • Învață să schimbi titlul paginii și titlurile textului.
  • Învață să inserezi text dintr-un document extern.
  • Învață să adaugi imagini de prim-plan și de fundal.
  • Învață să creezi, să schimbi și să selectezi Stiluri CSS.
  • Învață să lucrezi cu modurile de afișare Cod și Cod și Design.

Înainte să începi să studiezi,.

În procesul de finalizare a tuturor lucrărilor de laborator, veți crea un site web cu drepturi depline pentru o companie de turism.

Structura paginilor web este prezentată în Figura 1.

Figura 1 - Structura site-ului final

Ca rezultat al acestei lucrări de laborator, ar trebui să ajungeți cu o pagină web ca aceasta (Figura 1.1):

Figura 1.1 - Previzualizarea paginii web

Folosind ecranul de bun venit

Fereastra ecranului de bun venit oferă acces rapid către paginile cu care ați lucrat recent, vă ajută să creați cu ușurință diferite tipuri pagini și oferă acces direct la unele subiecte cheie unde puteți găsi răspunsuri la întrebările dvs. Ecranul de bun venit apare la prima pornire a programului sau dacă nu sunt deschise alte documente.

Să folosim ecranul Bun venit pentru a afla cum să deschidem un document.

1. Pentru a deschide o nouă pagină goală, faceți clic pe opțiune HTMLîn coloană Creați nou(Creați) (Figura 1.2).

Figura 1.2 - Fereastra ecran de întâmpinare

2. Se va deschide unul nou înaintea ta HTML document (Figura 1.3).

Figura 1.3 - Noua fereastră HTML

Selectarea unui aspect CSS

Adobe Dreamweaver CS4 are 32 de fișiere de aspect CSS, fiecare cu un design diferit. În această sarcină vom selecta un fișier și îl vom modifica.

  1. Executa Fișier => Nou(Fișier => Creare) .
  2. Selectați Coloană Necompletat Pagină (Pagina goală) în caseta de dialog Nou Document(Creează document) .
  3. Selecta HTMLîn coloană Pagină Tip(Tipul paginii) .
  4. Selecta 2 coloane fix, stânga bară laterală, antet şi subsolul(2 coloane cu lățime fixă, margine din partea stângă, antet și subsol) pe coloană Aspect(Aspect) .
  5. Lăsați celelalte opțiuni setate la setările lor implicite și faceți clic pe butonul Crea(Crea).
  6. Selecta Fișier => Salvați(Fișier => Salvare).
  7. Salvați ca(Salvare ca) accesați folderul laborator1. Introduceți „Umbria.html” și faceți clic pe butonul Salva.

Selectarea unui mod de afișare a documentului

Vom efectua majoritatea operațiunilor de web design în fereastră Proiecta, dar amintiți-vă că lângă fereastră Document Există patru moduri de afișare (Figura 1.4):

  • Proiecta(Design) - prezintă pagina într-un context asemănător unui browser;
  • Cod(Cod) - afișează codul sursă al paginii;
  • Cod şi Proiecta(Cod și Design) - combină și modul de afișare Proiectași modul de afișare Cod. Faceți clic pe butonul Despică(split) pentru a afișa acest mod de afișare.
  • Trăi(Live View) - prezintă pagina într-un browser care funcționează în timp real.

Figura 1.4 - Moduri de afișare

Modurile de afișare sunt legate între ele. Orice modificare făcută într-una dintre ele poate fi văzută imediat în celelalte.

Schimbarea titlului paginii

Titlul paginii apare în bara de titlu a browserului. Titlurile paginilor sunt unul dintre elementele cheie utilizate motoarele de căutare pentru indexarea site-urilor web.

  1. Selectați substituentul de text „Document fără titlu” în câmp Titlu(Nume) barele de instrumente Document(Figura 1.5).
  2. Introduceți „Umbria Hill Town Tours” și faceți clic Intră.

Figura 1.5 - Bara de instrumente Document

Schimbarea antetelor

Substituenții de titlu în Dreamweaver sunt ușor de schimbat.

1. Faceți dublu clic pe textul substituent Titlu pentru a-l selecta. Apoi introduceți „Călătorește Umbria cu noi” (Figura 1.6).

Figura 1.6 - Schimbarea substituentului titlului

2. Plasați cursorul peste începutul textului substituent PrincipalConţinut(Conținutul principal) și evidențiați întreaga frază.
3. Cu textul selectat, tastați „Te distrezi. Lucrăm.” (Figura 1.7)

Figura 1.7 - Modificarea substituentului de conținut

4. Selectați Fișier => Salvați(Fișier => Salvare).

Inserarea textului

Textul simplu poate fi schimbat la fel de ușor ca și titlurile.

1. Plasați cursorul în fața textului substituent simplu și selectați restul textului pentru a selecta al doilea substituent al antetului și toate paragrafele.
2. Apăsaţi tasta Şterge pentru a elimina ceea ce ai selectat.
3. Navigați la fișier Text. TXT aflat într-un folder Lecții/lab1/Text.txt.

4. Copiați textul în clipboard.
5. Lipiți textul copiat sub titlul „Te distrezi. Lucrăm.” (Figura 1.8).

Figura 1.8 - Inserarea textului

Textul va fi formatat automat ca paragrafe.

6. În același mod, introduceți în câmp „Umbria Hill Town Tours”. Subsol.
 7. Creați sfârșitul liniei făcând clic Schimbare+ Intră, apoi introduceți „Contactele noastre”.

Inserarea imaginilor

1. Selectați tot conținutul din bara laterală, inclusiv titlul substituentului Bara laterală1 Conținutși următoarele două paragrafe.
2. Faceți clic Şterge.
3. Faceți clic

și apăsați Ştergeîn selectorul de etichete situat în partea de jos a ferestrei Document pentru a elimina eticheta

(Figura 1.9).

Figura 1.9 - Selector de etichete

4. Dacă panoul Introduce(Insert) este invizibil, faceți-l vizibil selectând Fereastra => Inserare(Fereastra => Inserare). Executa Inserare => Comun => Imagini(Inserare => General => Imagine) (Figura 1.10).

Figura 1.10 - Inserați panoul

5. Accesați fișierele aflate în folder Lecții/laborator1/și selectați sculptat-gradina.jpgși faceți clic pe OK (Figura 1.11).

Figura 1.11 - Inserarea imaginii sculpted-garden.jpg

6. Plasați cursorul la începutul paragrafului care începe cu „Vino și bucură-te” și selectează Imagini pe panou Introduce.
7. Selectați o imagine italian-hill-town.jpgși apăsați Bine.
8. Introduceți „italian-hill-town” ca text suplimentar. Clic Bine(Figura 1.12).
9. Dacă panoul Proprietăți nu este vizibil, selectați Fereastra => Proprietăți.
10. Cu imaginea pe care tocmai ați introdus-o selectată, activați fltrtîn meniul pop-up Clasă panouri Proprietăți.

Clasa fltrt este o abreviere pentru float right, respectiv fltlft - float left.

11. Selectați Fișier => Salvați.

Figura 1.12 - Inserarea imaginii italian-hill-town.jpg

Selectarea și schimbarea stilurilor CSS

Paginile web moderne folosesc Cascading Style Sheets (CSS) pentru stil și aspect. O pagină web este adesea comparată cu un scaun cu trei picioare, HTML, CSS și JavaScript fiind componentele structurii sale. HTML este conținutul, materialul pe care îl introduceți în modul de afișare Design. CSS este aspectși aspectul cu anumite elemente, culori și fundaluri. JavaScript adaugă funcționalitate interactivă. În acest exercițiu, veți schimba culoarea de fundal a unei pagini existente, veți adăuga elemente grafice pe fundal și veți configura mai multe atribute de text. Toate aceste acțiuni sunt efectuate prin utilizarea panoului CSSStiluri(stiluri CSS).

CSS poate fi folosit pentru a schimba proprietățile de stil ale oricăruia Etichetă HTML, de exemplu tag .

1. Selectați Fereastra => Stiluri CSS (Fereastră => Stiluri CSS). Se va deschide panoul Stiluri CSS.
2. Dacă este necesar, faceți clic pe butonul Toate pe panou Stiluri CSS a schimba modul curent Actual.

Toate modurile afișează toate stilurile CSS asociate cu pagina curentă. Trebuie să aveți documentul deschis în vizualizatorul de documente pentru a vedea orice stiluri în panou Stiluri CSS.

3. Deschideți intrarea