Adobe Dreamweaver cs6 vormi esitamise õppetunnid. Dreamweaveri koolitus. Dokumendi kuvamisrežiimi valimine

Dreamweaver on võimas tööriist, mis võimaldab kümnekordselt lihtsustada paljusid rutiinseid toiminguid, millega iga veebihaldur paratamatult silmitsi seisab. Mugav üleminek graafilise režiimi ja koodi redigeerimisrežiimi vahel võimaldab teil luua loodava saidi üle maksimaalse kontrolli.

Adobe Dreamweaver algajatele.

Selles õppetükis õpime, kuidas selle koodiredaktoriga töötada ja programmi algset seadistamist teha:

Esimene asi, mida peate tegema, on klõpsata vahekaardil Redigeerimine ja minna Seadistused -> Loo dokument (uus dokument).

Ilmuvas dialoogiboksis peate määrama järgmised parameetrid.

Vaikedokumendi tüüp (DTD) –> HTML 4.01 Transitional

Vaikekodeering –> kirillitsa (Windows)

Läheme loodu juurde kohalik ketas Z:\ (selle ketta loob programm vaikimisi). Seal kodukataloogis loome kausta nimega plata.ru, kuhu omakorda loome www kausta, millesse loome kausta img. Tulemuseks peaks olema hierarhia - Z:\home\plata.ru\www\img.

Klõpsake Loo (uus) –> sait (sait)

Vahekaardil Kohalik teave Sisestage saidi põhiteave:

Veebisaidi nimi: PLATA.RU

Kohalik juurkataloog: Z:\home\plata.ru\www\

Pildi vaikekaust: Z:\home\plata.ru\www\img\

Avanevas dokumendis siltide vahel kirjutage järgmine kood:

Tere, Maailm

Taaskäivitame Denveri, et värskendada aadresside loendit ja mis tahes saadaolevas brauseris sisestage aadressiribale www.plata.ru.

See peaks välja nägema selline:

Jääb üle vaid stiilileht kinnitada ja Dreamweaveri seadistuse võib lugeda lõpetatuks.

Meie loome uus fail nimega SS.css saidi juurkataloogis ja kirjutage sisse väike kood

Paremklõpsake stiilidega töötamise tühjal alal, mis asub programmi akna paremas ülanurgas, ja valige Lisa stiilileht.

Sisestage aadress, kuhu tabeli salvestasite, ja klõpsake nuppu OK. Salvestame mõlemad dokumendid ja kontrollime neid brauseris. Sildi värv peaks muutuma punaseks.

Selles õppetükis konfigureerisime Dreamweaveri töötama meie tulevase veebisaidiga. See programm See osutub lihtsalt asendamatuks ja varsti saate selles ise veenduda.

Järgmises õppetükis vaatleme .

Sihtmärk : tutvuge veebilehe loomisel Dreamweaveriga ja programmi tööruumiga.

Ülesanded:

  • Uurige tööpiirkonda.
  • Õppige looma uut lehte, kasutades CSS-i sisu.
  • Õppige dokumenti salvestama.
  • Õppige muutma lehe pealkirja ja tekstipealkirju.
  • Õppige sisestama teksti välisest dokumendist.
  • Õppige lisama esiplaani ja taustapilte.
  • Õppige looma, muutma ja valima CSS-stiilid.
  • Õppige töötama koodi ja koodi ning disaini kuvarežiimidega.

Enne õppima asumist,.

Kõigi laboritööde tegemise käigus loote reisifirmale täisväärtusliku veebilehe.

Veebilehtede struktuur on näidatud joonisel 1.

Joonis 1 – lõpliku veebisaidi struktuur

Selle laboritöö tulemusena peaksite saama sellise veebilehe (joonis 1.1):

Joonis 1.1 – Veebilehe eelvaade

Tervituskuva kasutamine

Tervituskuva aken pakub kiire juurdepääs lehtedele, millega olete hiljuti töötanud, aitab teil hõlpsasti luua erinevad tüübid lehekülgi ja pakub otsest juurdepääsu mõnele võtmeteemale, kust leiate vastused oma küsimustele. Tervituskuva kuvatakse programmi esmakordsel käivitamisel või kui muid dokumente pole avatud.

Kasutame tervituskuva, et õppida, kuidas dokumenti avada.

1. Uue tühja lehe avamiseks klõpsake valikul HTML veerus Loo uus(Loo) (Joonis 1.2).

Joonis 1.2 – Tervituskuva aken

2. Teie ees avaneb uus HTML dokument (joonis 1.3).

Joonis 1.3 – Uus HTML-aken

CSS-i paigutuse valimine

Adobe Dreamweaver CS4-l on 32 CSS-paigutusfaili, millest igaüks on erineva kujundusega. Selles ülesandes valime ühe faili ja muudame seda.

  1. Käivitage Fail => Uus(Fail => Loo) .
  2. Valige Veerg Tühi Lehekülg (Tühi leht) dialoogiboksis Uus Dokument(Loo dokument) .
  3. Valige HTML veerus Lehekülg Tüüp(Lehe tüüp) .
  4. Valige 2 veergu fikseeritud, vasakule külgriba, päis ja jalus(2 fikseeritud laiusega veergu, vasakpoolne veeris, päis ja jalus) veeru kohta Paigutus(Paigutus) .
  5. Jätke muude suvandite vaikeseadetele ja klõpsake nuppu Loo(Loo).
  6. Valige Fail => Salvesta(Fail => Salvesta).
  7. Salvesta kui(Salvesta nimega) minge kausta lab1. Sisestage "Umbria.html" ja klõpsake nuppu Salvesta.

Dokumendi kuvamisrežiimi valimine

Enamiku veebidisaini toiminguid teostame aknas Disain, aga pidage meeles seda akna juures Dokument Kuvamisrežiimi on neli (joonis 1.4):

  • Disain(Disain) – esitleb lehte brauserilaadses kontekstis;
  • Kood(Code) - kuvab lehe lähtekoodi;
  • Kood ja Disain(Kood ​​ja kujundus) - ühendab ja kuvab režiimi Disain ja kuvamisrežiim Kood. Klõpsake nuppu Lõhestatud(jagatud) selle kuvarežiimi kuvamiseks.
  • Otse(Otsevaade) – esitleb lehte reaalajas töötavas brauseris.

Joonis 1.4 - Kuvarežiimid

Kuvamisrežiimid on omavahel seotud. Kõik ühes neist tehtud muudatused on kohe näha ka teistes.

Lehe pealkirja muutmine

Lehe pealkiri kuvatakse brauseri tiitliribal. Lehekülje pealkirjad on üks peamisi kasutatud elemente otsingumootorid veebisaitide indekseerimiseks.

  1. Valige väljal teksti kohatäide "Pealkirjata dokument". Pealkiri(nimi) tööriistaribad Dokument(Joonis 1.5).
  2. Tippige sinna "Umbria Hill Town Tours" ja klõpsake Sisenema.

Joonis 1.5 – Dokumendi tööriistariba

Päiste muutmine

Dreamweaveri pealkirja kohahoidjaid on lihtne muuta.

1. Topeltklõpsake kohatäite teksti Pealkiri selle valimiseks. Seejärel sisestage "Travel Umbria with us" (joonis 1.6).

Joonis 1.6 – Pealkirja kohatäide muutmine

2. Hõljutage kursorit kohatäideteksti alguse kohal PeamineSisu(Põhisisu) ja tõstke esile kogu fraas.
3. Kui tekst on valitud, tippige "Teil on lõbus. Me töötame." (Joonis 1.7)

Joonis 1.7 – sisu kohahoidja muutmine

4. Valige Fail => Salvesta(Fail => Salvesta).

Teksti sisestamine

Lihtteksti saab muuta sama lihtsalt kui pealkirju.

1. Asetage kursor lihtsa kohatäite teksti ette ja valige ülejäänud tekst, et valida teine ​​päise kohatäide ja kõik lõigud.
2. Vajutage klahvi Kustuta et eemaldada see, mille valisite.
3. Sirvige faili Tekst. txt asub kaustas Lessons/lab1/Text.txt.

4. Kopeerige tekst lõikepuhvrisse.
5. Kleepige kopeeritud tekst pealkirja „Sul on lõbus. Me töötame." (Joonis 1.8).

Joonis 1.8 – Teksti sisestamine

Tekst vormindatakse automaatselt lõikudena.

6. Samamoodi sisestage väljale "Umbria Hill Town Tours". Jalus.
 7. Looge rea lõpp, klõpsates Shift+ Sisenema, seejärel sisestage "Meie kontaktid".

Piltide sisestamine

1. Valige külgribal kogu sisu, sealhulgas kohatäite pealkiri Külgriba1 sisu ja kaks järgmist lõiku.
2. Klõpsake Kustuta.
3. Klõpsake

ja vajutage Kustuta märgendi eemaldamiseks akna Dokumendi allosas asuvas sildivalijas

(Joonis 1.9).

Joonis 1.9 – Sildi valija

4. Kui paneel Sisesta(Insert) on nähtamatu, tehke see nähtavaks valides Aken => Sisesta(Aken => Sisesta). Käivitage Sisesta => Tavaline => Pildid(Sisesta => Üldine => Pilt) (Joonis 1.10).

Joonis 1.10 – Sisesta paneel

5. Avage kaustas olevad failid Tunnid/lab1/ ja valige skulptuur-aed.jpg ja klõpsake nuppu OK (joonis 1.11).

Joonis 1.11 – pildi sculpted-garden.jpg sisestamine

6. Viige kursor põhilõigu algusesse, mis algab sõnadega "Tule ja naudi" ja valige Pildid paneelil Sisesta.
7. Valige pilt itaalia-mägi-linn.jpg ja vajutage Okei.
8. Sisestage lisatekstina "itaalia-hill-town". Klõpsake Okei(Joonis 1.12).
9. Kui paneel Atribuudid pole nähtaval, valige Aken => Atribuudid.
10. Kui äsja sisestatud pilt on valitud, aktiveerige fltrt hüpikmenüüs Klass paneelid Omadused.

Klass fltrt on lühend sõnadest float right, vastavalt fltlft - float left.

11. Valige Fail => Salvesta.

Joonis 1.12 – pildi itaalia-mägi-linn.jpg sisestamine

Stiilide valimine ja muutmine CSS

Kaasaegsed veebilehed kasutavad stiilide kujundamiseks ja paigutuseks CSS-i (Cascading Style Sheets). Veebilehte võrreldakse sageli kolme jalaga tooliga, mille struktuuri komponendid on HTML, CSS ja JavaScript. HTML on sisu, materjal, mille sisestate kujunduskuva. CSS on välimus ja paigutus koos teatud elemendid, värvid ja taustad. JavaScript lisab interaktiivset funktsionaalsust. Selles harjutuses muudate olemasoleva lehe taustavärvi, lisate taustale graafikat ja seadistate mitu tekstiatribuuti. Kõik need toimingud tehakse paneeli abil CSSStiilid(CSS-stiilid).

CSS-i saab kasutada mis tahes stiili omaduste muutmiseks HTML-märgend, näiteks silt .

1. Valige Aken => CSS-stiilid (Aken => CSS-stiilid). Paneel avaneb CSS-stiilid.
2. Vajadusel klõpsake nuppu Kõik paneelil CSS-stiilid, et muuta praegune režiim Praegune.

Kõik režiim kuvab kõik praeguse lehega seotud CSS-stiilid. Paneeli stiilide nägemiseks peab dokument olema dokumendivaaturis avatud CSS-stiilid.

3. Avage kirje