64505019 Dream Weaver CS5 Tutorial

download 64505019 Dream Weaver CS5 Tutorial

of 75

Transcript of 64505019 Dream Weaver CS5 Tutorial

  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    1/75

    Dreamweaver CS5 Tutorial: Cum de a proiecta un sitecu Dreamweaver CS5de Christopher Heng, thesitewizard.com

    Adobe Dreamweaver CS5 este un program de calculator care se poate utiliza pentrua crea i a menine un site web. Acesta v permite s site-uri de design vizual pecomputer, aproape n acelai mod n care ar trebui s utilizai o wordprocessor cumar fi Microsoft Word sau Office. Acesta combin uurina n utilizare, cu putere,fcndu-l un favorit (sau "favorit", dac utilizai englez SUA .), att n rndulwebmasteri noi, precum i profesioniti experimentai

    Obiectivele globale din aceasta serie Tutorial

    Aceast serie tutorial v ghideaz prin procesul de creare a unui complet, complet

    funcional, multi-pagina web folosind Dreamweaver CS5. Site-ul dvs. va avea opagin de pornire, un formular de feedback, o pagin Despre noi i un Harta site-ului. n procesul de creare a acestui site, v va nva cum s creai pagini cu maimulte coloane, adugai imagini i text, s creai link-uri, utilizeaz diferite marimi defont, personaliza culorile, adugai o bar de meniuri, s actualizeze paginile web dedesign pe mai multe ntr-un mai uor, etc

    Ca urmare, nu numai ca vei avea un site de lucru de la sfritul acestei serii, vaavea, de asemenea, dobndit abilitile i cunotinele pentru a crea, de proiectare ipublic orice alt site web dorii.

    Scopul acestui capitol

    n acest capitol, v va crea o baz dou coloane pagina web si a pus-o peInternet. Pn la sfritul capitolului, vei fi vizioneaz c pagina de web de peInternet cu ajutorul browser-ul web.

    Important: acest tutorial a fost scris ca un tutorial hands-on. Pentru a beneficia deaceasta, sau chiar pentru a nelege aceasta, vei avea nevoie pentru a efectua, defapt, paii aa cum le-am descris. Natura practic a acestui ghid, este dificil de

    urmat, dac nu faci lucrurile menionate.

    Ce vei avea nevoie

    Exist mai mult la crearea unui site web decat folosind doar un editor de web cum arfi Dreamweaver. Dac suntei nou la crearea de site-ul web, v recomand cu trie cai citit prima Cum sa faceti / Creare site-ul propriu: Ghidul incepatorului AZ , gsite lahttp://www.thesitewizard.com/gettingstarted/startwebsite.shtml

    n cel mai ru, vei avea nevoie de urmtoarele:

    Dreamweaver

    http://www.thesitewizard.com/http://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.thesitewizard.com/general/beware-of-english-variants.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.thesitewizard.com/general/beware-of-english-variants.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.thesitewizard.com/
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    2/75

    Deoarece acesta este un tutorial Dreamweaver, se subintelege ca vei aveanevoie de editor web menionate anterior n sine.

    Not: aceast serie tutorial presupune c utilizai versiunea de CS5Dreamweaver. Dac utilizai o alt versiune, v rugm s mergei la seria detutorial pentru c versiunea n schimb, cum ar fi fie Dreamweaver CS5.5Tutorial , Dreamweaver CS4 Tutorial sau Dreamweaver Tutorial CS3 . DeiCS3, CS4 i CS5/CS5.5 versiunile de Dreamweaver au multe similitudini,exist unele diferene ntre ele (n special ntre CS5/5.5 i versiunileanterioare), aa c va avea un timp mai usor daca ai citit pur i simplututorialul n mod special scris pentru acea versiune.

    Cei care folosesc versiuni de Dreamweaver CS3 anterior, cum ar fiDreamweaver 8, va trebui s facei upgrade la versiunea curent pentru autiliza acest tutorial.Versiunile anterioare Lipsa anumite caracteristici utilizaten seria tutorial trei.

    Un Gazduire Web cont

    Vei fi introducerea site-ul dvs. pe Internet ncepnd cu acest capitol (da, de lacapitolul unu). Pentru ca aceasta s funcioneze, avei nevoie de un webgazd. O gazda web este (vag vorbind) o companie care are computere caresunt conectate permanent la Internet. Dup ce ai terminat proiectarea

    paginile dvs. de web, vei avea nevoie de a le transfera pe computerul dvs. deweb gazd (numit "server de web"), astfel nct s poat fi vzut de restullumii. Exista multe gazde de web n jurul valorii. Dac nu avei deja unul, puteigsi o lista de gazde de web ieftine lahttp://www.thefreecountry.com/webhosting/budget1.shtml

    Reinei c am omis o serie de lucruri importante din lista de mai sus, deoarece puteigsi astfel de informaii de la incepatori AZ Ghidul menionate mai sus. Cele maicrucial, nainte de a ncepe, trebuie s vnregistrai propriul nume dedomeniu pentru motivele prezentate n articolul meu pe Este posibil s se creeze unsite fr a cumpra un nume de domeniu? Preul ridicat al "Free". .

    Configurarea site-ul tau in Site Manager Dreamweaver lui

    nainte de a ncepe proiectarea aspectul paginii web n sine, va trebui s deaDreamweaver cteva informaii de baz despre site-ul dumneavoastra. Acest lucruse face folosind Managerul site-ul su.

    1. Pornirea Dreamweaver.2. Editor web Dreamweaver va aprea, jumatatea superioara a, care ar trebui s

    apar ceva de genul imaginea de mai jos. Aspectul exact al Dreamweaver depe computer va fi puin diferit de imaginea mea, n funcie de ct de mare este

    http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-5-tutorial-1.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver1.shtmlhttp://www.thefreecountry.com/webhosting/budget1.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/domain/website-without-domain-name.shtmlhttp://www.thesitewizard.com/domain/website-without-domain-name.shtmlhttp://www.thesitewizard.com/domain/website-without-domain-name.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-5-tutorial-1.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver1.shtmlhttp://www.thefreecountry.com/webhosting/budget1.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/domain/website-without-domain-name.shtmlhttp://www.thesitewizard.com/domain/website-without-domain-name.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    3/75

    monitorul computerului, i dac suntei execut Windows 7, Vista, XP sau MacOS X. (i, desigur, cuvintele, "thesitewizard.com Dreamweaver TutorialCS5"nu vor aprea n fereastra Dreamweaver fie.)

    Lng partea de sus a ferestrei, ar trebui s fie posibilitatea de a vedea o liniede text pe care scrie "Fiier Editare Vizualizare Inserare Modificare formatWindow site-ului Comenzi Ajutor". Aceasta este bara de meniu Dreamweaver,i fiecare cuvnt pe care bara de meniu este un element clickable care duce laalte meniuri. Vom folosi acest meniu larg n cursul acestui tutorial. Meniul vofer acces la multe dintre facilitile Dreamweaver lui.

    3. Facei clic pe cuvntul "Site-ul" pe bara de meniu. Un meniu drop-down vaaprea. Facei clic pe "site nou ..." articol de pe acel meniu.

    Important: de acum nainte, n interesul de concizie, ne vom referi la o astfelde secven de facei clic pe "site" meniul urmat de clic pe "Site-ul

    New ..." meniu ca "site-ului | site nou ...". Asta este, dac spun facei clic pe"File | nchide", nseamn s facei clic pe meniul "Fiier", i atunci cnd apareun meniu, facei clic pe "Close" articol de pe ea. (Acesta este doar unexemplu, nu facei clic pe meniul Fiier, de fapt, n acest moment.)

    4. O caseta de dialog va aprea. Caseta de dialog ar trebui s aib un titlu degenul "Site-ul de instalare pentru site-ul Unnamed 2". Numrul real careurmeaz cuvintele "Site-ul fr nume" poate fi diferit n sistemul dvs., n funciede dac ai folosit vreodat Dreamweaver pe computer nainte de a. n oricecaz, numrul este neimportant.Eti pe cale s schimbe ntreaga textul "Site-ul

    fr nume 2" pentru numele de site-ul tau oricum.

    n caseta de dialog n sine, ar trebui s vedei dou domenii, unul etichetat"Numele site-ului" i un alt "Folder Site-ul local".

    nlocuii valoarea implicit a "site-ului fr nume 2" n "Site-ul Name" cunumele de site-ul dumneavoastr. Numele de site-ul dvs. poate fi orice numedorii. Dac aicumprat propriul nume de domeniu , ntr-un fel este de aintroduce acest domeniu n acest domeniu. De exemplu, dac avei nregistratun domeniu numit "example.com", pur i simplu de tip "example.com" (fr

    ghilimele) n cmpul, nlocuind cuvintele "Site-ul Unnamed 2". Alternativ, dacsuntei crearea unui site-ul companiei, avei posibilitatea s tastai numele

    http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    4/75

    firmei dvs. n acest domeniu. De exemplu, dac firma dvs. se numete"exemplu, Compania", putei introduce "Compania Exemplu" n acel spaiu.

    Coninutul "Site-ul Name" cmp este pentru referin ta numai. Acesta nu este,de fapt afisate public pe site-ul dvs., astfel nct nu avei nevoie s-i petreacprea mult timp a veni cu un nume perfect pentru a folosi aici. E acolo, n cazuln care creai multe site-uri diferite, folosind Dreamweaver i nevoie de omodalitate de a distinge ntre ele. De dragul de sanatatea ta, am recomandms nu-l lsa ca "site-ului Untitled 2", dar dau un fel de nume informative idescriptiv. n caz contrar, n viitorul ndeprtat, dac i atunci cnd ai 100 desite-uri, vei fi smulgeti parul din cap ncercnd s dau seama ce nume careapartine site-ul web.

    5. "Site-ul local Folder" cmp Dreamweaver spune n cazul n care ar trebui ssalvai o copie a fiierelor pe care le creai. Aceasta este o locaie de pecomputerul personal. Pe sistemele Windows, dac aceasta este prima datcnd l utilizai Dreamweaver, d un nume de folder implicit de "site-ului frnume 2" undeva n folderul Documente. De exemplu, dac suntei utilizaiWindows Vista sau Windows 7, s-ar putea obine un nume sugerat ca " C: \Users \ christopherheng \ Documents \ site-ului fr nume 2 \ ". Pentrua schimba dosarul la unele alt locaie, facei clic pe pictograma de lngcmp, i selectai un folder diferit. Alternativ, dac nu te deranjeaz locaiaimplicit, dar pur si simplu nu-mi place "Site-ul Unnamed 2" poriune, pur isimplu facei clic pe undeva n cmp, muta cursorul la "Site-ul Unnamed 2"parte i s o nlocuiasc cu site-ul dvs. nume (de exemplu,"example.com"). Fii ateni s nu suprascrie orice alt parte a textului, deexemplu, nu tergei oricare dintre backslash-uri ("\"), dac nu tii ce faci.

    n cazul n care punctul de mai sus pare prea complicat, si te simti panica ncretere doar ncercarea de a nelege ceea ce am scris, las totul la setareaimplicit. n timp ce este bine sa ai un nume de folder descriptiv, astfel ncts avei posibilitatea s localizai cu uurin fiierele n viitor, e prea minor ochestiune care urmeaz s fie n valoare de obtinerea blocat de peste.

    6. Cnd suntei satisfcut de modificri, facei clic pe butonul "Salvare" n parteade jos a "Site-ul Setup" caseta de dialog. Caseta de dialog va disprea, i veifi returnate la fereastra principal Dreamweaver. Acum suntei gata pentru aproiecta pagina ta de web primul.

    Cum sa creezi un Dou pagin Web cu Dreamweaver CS5 Coloana

    Diferite site-uri au aspecte diferite. Unele, cum ar fi site-ul Demo Feedback Form autoate lor coninut ntr-o singur coloan. Alii, cum ar fi paginile articolthesitewizard.com e, au un aspect dou coloane. Dac nu tii ce vreau s spun,uita-te la acest articol foarte c suntei lectur. Observai c coloana din stnga apaginii conine thesitewizard.com e logo-ul (n partea de sus a paginii) i meniul denavigare sale. Coloana din dreapta deine textul articolului n sine. Site-uri poate,

    http://www.fbdemo.com/http://www.fbdemo.com/
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    5/75

    desigur, au mai mult de 2 coloane: de exemplu, la momentul acesta a fost scris, amfolosi un aspect coloana 3 pentru meu Harta site-ului .

    n sensul prezentului tutorial, v va fi crearea unei pagini web coloana 2. Formatuldou coloane este un aspect foarte popular printre webmasteri, deoarece este atteficient a spaiului i de familiare utilizatorilor de internet. Un aspect care estefamiliar pentru utilizatori tinde s fie perceput ca user-friendly, deoarecefamiliaritatea ei ce nseamn c utilizatorii vor ti cum s navigai n care un site webcu aspect. Este ntotdeauna important s se strduiasc s fac site-ul dvs. ca ghidulde mai prietenoase cu putin , astfel nct vizitatorii dvs. s tie de fapt, modul deutilizare a site-ului.

    1. Facei clic pe "File | New ...". Dac v amintii ceea ce am menionat maidevreme, acest lucru nseamn s facei clic pe meniul "File", urmat de"New ..." element din meniul care apare.

    O caset de dialog cu un titlu "document nou" va aprea.

    2. n coloana Aspect, cutai linia pe care scrie "2 lichid coloana, bara lateralstnga, antet i subsol" (a se vedea imaginea de mai sus). Facei clic o datpe acea linie.

    3. Pe partea dreapta a ferestrei, cutai pentru cmpul etichetat "Layout CSS" (ase vedea imaginea de mai sus). Facei clic pe sgeata vertical n caseta delng faptul c eticheta i selectai "Creare fiier nou".

    Acest lucru face ca Dreamweaver pentru a salva informaiile de controlaspectul site-ul dvs. (numite "CSS"), ntr-un dosar separat. Din moment cetoate paginile de pe site-ul dvs. vor mprti un aspect comun, introducerea

    toate informaiile despre structura ntr-un singur fiier evit duplicarea inutil ainformaiilor, economisind spatiu pe disc i de lime de band, iar accelerarea

    http://www.thesitewizard.com/sitemap.shtmlhttp://www.thesitewizard.com/webdesign/index.shtml#usabilityhttp://www.thesitewizard.com/webdesign/index.shtml#usabilityhttp://www.thesitewizard.com/sitemap.shtmlhttp://www.thesitewizard.com/webdesign/index.shtml#usabilityhttp://www.thesitewizard.com/webdesign/index.shtml#usability
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    6/75

    de ncrcare a paginilor web n cazul n care utilizatorii dvs. vizit mai multorpagini pe site-ul tau.

    4. Facei clic pe "Create" buton dreapta jos a casetei de dialog.5. O caset de dialog nou, intitulat "Foaie Fiier Salvare ca stil", va

    aprea. Facei clic pe "Salvare" buton pe care caseta de dialog.6. n mod implicit, Dreamweaver creeaz pagina dvs. de Web n ceea ce este

    cunoscut sub numele de "Split" modul. n acest mod, pagina web, aa cumapare ntr-un browser web real este indicat pe partea dreapta. Aceastporiune plcut vizual este numit "Design" modul n Dreamweaver. n parteastng prezinta stau la baza "prime" cod pentru site-ul tau. Acest parteastanga este numit "Codul" modul n Dreamweaver, i codul se prezinta estenumit HTML .

    Dac nu vedei acest lucru "Split" modul, dar a se vedea numai versiuneavizual plcut de site-ul dvs. ("Design" modul), sau doar textul aparentpsreasc din "Codul" modul, nu v facei griji. Suntem pe cale de astandardiza modul de afiare pentru toat lumea.

    Indiferent de ceea ce vedei pe ecran, fie c este vorba "Split" modul l-amdescris mai devreme sau un alt mod, facei clic pe "View | Design" dinmeniu. Textul criptic din "Codul" split screen mode ar trebui s dispar, iarintreaga fereastra ar trebui s fie umplut cu pagina ta web, aa cum aparentr-un browser web ("Design" portie).Reinei c trebuie s ia acest pas dac

    dorii s urmai acest tutorial serie, din moment ce toate etapele din acesttutorial, precum i capturi de ecran presupune cazul n care se lucreaz nmodul de proiectare. Dac nu a comuta la modul de proiectare, s-ar puteaobine confuz Dreamweaver mai trziu, cnd nu se comport aa cumdescriu.

    Not: dac, n viitor, atunci cnd ai terminat acest tutorial serie, i dorii srestaurai "Split" modul, facei clic pe "View | Codul i Design" dinmeniu. Aspectul ecranului se va reveni automat la ceea ce ai vzut maidevreme. Deci nu v temei. Avei posibilitatea s restabilii cu uurin totulnapoi la starea iniial. Dar pentru acum, v rugm a comuta la modul deproiectare.

    Introducere n pagina principal: Ce ar trebui s pun pe paginaprincipal mele?

    nainte de a continua pentru a nlocui textul implicit de pe pagina dvs. cu coninut realpagina web, este important s nelegem principiile de baz spatele a ceea ce vetiface.

    Prima pagin pe care vei fi proiectarea este site-ul dvs. este "de start,initiala". Pagina de pornire a unui site web este de fapt pagina principala. Este pagina

    http://www.thesitewizard.com/html-tutorial/what-is-html.shtmlhttp://www.thesitewizard.com/html-tutorial/what-is-html.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    7/75

    pe care vizitatorii dvs. ajunge la n cazul n care pur i simplu tastai numele dedomeniu al site-ului. De exemplu, dac tastai "thesitewizard.com" n browser, veiajunge la pagina mea de acas.

    n ceea ce privete funcia, pagina de pornire a unui site web este similar cu ocombinaie de coperta unei reviste i pagina de coninutul su. Ca i coperta uneireviste, pagina dvs. de pornire ar trebui s ofere vizitatorilor o idee de fel de lucruricare pot fi gsite pe site-ul dumneavoastr. i ca o revista de "Cuprins", pagina,aceasta ar trebui s ofere link-uri ctre pagini de importante (sau seciuni) pe site-uldvs., astfel nct vizitatorii s poat ajunge la tot ceea ce cutai pe site-ul tau.

    Deci, ce nseamn aceasta n termeni practici? Dac site-ul dvs. este cea care vindeproduse i servicii, poate dorii pagina de start s menionezi produsele cele maiimportante i de servicii, precum i legtur ntr-pagini individuale Descriereaprodusului n cazul n care vizitatorii pot afla mai multe informaii i plasai ocomand. Chiar daca esti doar a crea un site personal, un site web sau hobby, artrebui s ncercai nc pentru a oferi vizitatorilor dvs. o idee de fel de lucruri pe carele putei atepta s gseasc pe site-ul tau.

    Cum de a proiecta pagina de pornire n Dreamweaver CS5

    1. S ne familiarizm cu pagina implicite pe care Dreamweaver a creat pentrutine. Pagina web este n prezent, umplut cu un text substituent pe care le vainlocui cu propriul coninut. n cazul n care textul implicit arat ca suspect deinstruciuni scrise n jargonul tehnic, ci din cauza ca este ntr-adevr ogrmad de instruciuni tehnice.Dar nu trebuie deranjez ncercarea de adescifra. Pri care sunt relevante pentru tine vor fi traduse n limba englez nacest neteda CS5 Dreamweaver serie tutorial .

    Vertical, pagina este mprit n 2 coloane. Coloana din stnga coninenceputurile unui meniu de navigare, ceva asemntor cu ceea ce vedei pethesitewizard.com. Coloana din dreapta este n cazul n care cea mai mareparte a coninutului real ar trebui s mearg, i vei fi n locul textul substituentexistent mai trziu n acest capitol. n prezent, care conine titlul mari deimprimare, "Instruciuni", precum i punctele de text intercalate cu mici sub-rubrici.

    La foarte de sus a paginii este un mic rectange etichetat "Insert_logo (20% x90)". Chiar dac aceasta nu poate fi evident, acest dreptunghi este de faptedinei n colul de o band orizontal de tiere n ambele coloane ale paginiiweb. Intreaga trupa de top orizontal este destinat pentru logo-ul, i vei fi delucru pe aceasta n capitolul 2 al acestui tutorial.

    Defilai la partea de jos a paginii. Putei face acest lucru fie prinapsarea PgDn taste pe tastatur sau prin glisarea bara de defilare din parteadreapt a paginii web cu mouse-ul. Observai c exist o alt band orizontal

    http://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    8/75

    se ntinde pe limea de pagina ta web n partea de jos. Aceasta estesubsol. Vei fi personalizarea textului acestei subsol mai trziu n acest capitol.

    2. Direct de mai sus pagina dvs. Web, n partea din fereastra care apartineprogramului Dreamweaver, mai degrab dect pagina dvs., cutai cuvntul"Titlul" urmat de un cmp care conine n prezent, "Untitled Document" (a sevedea imaginea de mai jos).

    Facei clic pe cursorul mouse-ului undeva n cuvintele "Untitled Document",apoi folosii tastele Delete sau Backspace de pe tastatur pentru a eliminatextul existent.nlocuii-l cu numele de site-ul dumneavoastr. De exemplu,dac site-ul dvs. este numit "Compania XYZ", de tip "XYZ Company" n acestdomeniu.

    Acest "titlu" cmp este un cmp intern pe pagina ta web. Ea nu se afieaz norganism (partea vizibil) a paginii web. Se arat numai n bara de titlu aferestrei browser-ul n sine. Dac nu suntei sigur ce vorbesc despre, uita-te lapartea de sus a ferestrei browserului acum. (Da, n acest moment.) Nu utilizaibara de defilare i nu mergei la partea de sus a acestei pagini n nici unfel. Doar privirea n sus pn la marginea de sus a browser-ului tu. Ar trebuis fie n msur pentru a vedea cuvintele "Dreamweaver CS5 Tutorial: Cums Proiectarea unui site cu Dreamweaver CS5 (thesitewizard.com)", sau celpuin prima parte a acesteia, n cadrul de sus a ferestrei browserului. Am pusaceste cuvinte n cmpul de titlu a acestei pagini web special atunci cnd l-amcreat.

    Dei "Titlu" cmp este doar un cmp intern, aceasta este o parte importanta aunei pagini web. Motoarele de cutare utilizeaz Coninutul acestui cmppentru a lista site-ul dvs. n rezultatele motorului de cutare. Dac lsai titluldvs. setat la "Untitled Document", pagina web va aprea n rezultatelemotorului de cutare ca "Untitled Document", mai degrab dect "CompaniaXYZ", sau ce nume ai dat site-ul dumneavoastr.

    3. Acum, c ai terminat n locul cmpul de titlu, putei ncepe s lucrai cu privirela coninutul principal al paginii web. Tastarea textului ntr-o fereastrDreamweaver este similar cu tastarea in orice wordprocessor. Dac ai

    http://www.thefreecountry.com/utilities/wordprocessors.shtmlhttp://www.thefreecountry.com/utilities/wordprocessors.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    9/75

    utilizat vreodat Microsoft Word sau orice alt procesor de text, procesul esteacelai.

    nlocuiasc primul vizibile la rubrica "Instruciuni", cu numele de site-ul dvs.sau alt text corespunztoare, cum ar fi "Despre XYZ" sau "Bine ati venit lasite-ul lui Shakespeare". Pentru a face acest lucru, facei clic pe cursorulmouse-ului undeva n cuvntul "Instruciuni" pentru a plasa cursorul text de pepagina. Apoi putei folosi tastele sgei pentru a muta cursorul n jurul valoriide, tastele Delete i Backspace pentru a elimina text existent, precum i toatecelelalte personaje de pe tastatur pentru a insera text.

    Dup aceea, muta cursorul la alineatele si sub-rubricile de mai jos (folosindtastele sgeat de pe tastatur sau fcnd clic pe mouse-ul la faa locului pecare dorii s schimbai) i s le nlocuii cu coninutul pe care dorii pe paginadvs. de pornire. inei cont de lucrurile pe care le-am menionat despre cepagina dvs. de pornire ar trebui s includ n seciunea de mai sus. Daca estila o pierdere totala a ceea ce sa scrie, aruncm o privire la blocul eantion detext de mai jos care aparine unei companii fictive i de a folosi c, n calitatede model. Evident, nu vei putea s-l utilizai literal (deoarece compania taeste puin probabil s vnd aceleai lucruri), dar poate fi adaptat pentru a sepotrivi propria afacere. Dac suntei confrunt cu bloc scriitorului, muli oameniconsider c este util s tastai doar ceva, chiar dac sun extrem delumesc. Odat ce ai ceva jos, poti sa te duci mereu napoi i rafina-l ca pe zice trece.

    Bine ati venit la Exemplu Co

    Exemplu de afaceri Co este lider mondial care se ocup cu

    tot felul de exemple. Avem exemple de literatur celebre,

    Pulp Fiction nu-aa-celebre, cri de referin, DVD-uri i

    filme de televiziune, mobilier de birou, i aa mai

    departe. Selectia noastra de exemple este att de mare c

    avem chiar exemple de exemple.

    Produse recomandate

    Dreamweaver site-ului: Acesta este un exemplu al unui site

    Dreamweaver, create cu ajutorul thesitewizard.com e tutorial

    pe Dreamweaver. Tutorial v arat cum s creai un site web

    de baz, dar complet funcional pe care o putei modifica i

    spori pentru a se potrivi nevoilor dumneavoastr.

    Masini de tiparit mecanice: ntoarcei-v la zilele

    glorioase ale vechi, n cazul n care documentele trebuie s

    fie scris pe hrtie, i n cazul n care, dac dorii mai

    multe copii, ai nevoie de hrtie de carbon (nu sunt

    http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtml#homepagehttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtml#homepagehttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtml#homepagehttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtml#homepage
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    10/75

    incluse). Nr de energie electric sau baterii sunt

    necesare. Acest aparat este alimentat de degetele.

    Nu v facei griji despre schimbarea fonturi, fcnd cuvinte mari sau mai mici,subliniind cuvintele, punnd textul n caractere cursive aldine sau, crearea delegturi, inserarea imaginilor, ceea ce face filmul, i lucruri de genulasta. Pentru moment, se concentreze doar pe obtinerea cuvintele talejos. Lustruire pagina dvs. pentru a face sa arate mai frumos va fi predate nurmtoarele cteva capitole.

    4. Nu schimba nimic n coloana din stnga i a ignora faptul c coloanele dinstnga i dreapta au nlimi inegale. Coloana din stnga vor fi tratate ncapitolul cu propriile sale, deoarece se bazeaz pe tine avnd cunotinesuplimentare nainte de a putea lucra pe el.

    5. Cnd ai terminat cu coninutul dvs., defilai n jos ctre partea de jos a paginiipentru a bara orizontal din partea de jos, care solicit Dreamweaversubsol. Misca mouse-ul peste oricare dintre cuvintele din subsol i facei clicpe acesta o dat pentru a plasa cursorul de text acolo. nlocuii textul existentcu orice doriti. Muli webmasteri plasa o notificare drepturilor de autor naceast seciune. Un privind drepturile de autor este pur i simplu o propoziieca "Drepturi de autor 2010 de ctre Christopher Heng". Simbolul drepturilorde autor, , poate fi inserat fcnd clic pe butonul "Inserare | HTML |Caractere speciale | Drepturi de autor" din meniu.Pentru mai multe informaiidespre drepturile de autor, v rugm s citii articolul problemele de copyrightrelevante pentru webmasteri , lahttp://www.thesitewizard.com/general/copyright-issues.shtml

    6. Odat ce suntei mulumit de modificrile pe care le-ai fcut (pn acum), cuexcepia pagin fcnd clic pe "File | Save As ..." din meniu. O caset dedialog, cu un titlu "Save As", va aprea. De tip " index.html "(fara ghilimele),n" File name "cmpul i facei clic pe butonul" Salvare ".

    IMPORTANT : nu utilizai nici un alt nume dect "index.html" ca nume dat dedumneavoastr. Asigurai-v c l-ai tip exact asa cum am menionat, integralcu litere mici (minuscule), cu spaii n cuvntul. Nu utilizai nici un altnume. Numele "index.html" este greit , cum este numele"index.html". Folosii numai "index.html".

    Informaii suplimentare : denumirea "index.html" este un nume special careeste recunoscut de cele mai multe servere de web . n cazul n care estepublicat la locaia dreapta, acesta va fi trimis la vizitatorii dvs. n cazul n carepur i simplu tastai numele dvs. de domeniu (de exemplu,"http://www.example.com/") n browser-ul lor. Acesta este comportamentul pecare l dorii, deoarece suntei proiectarea pagina de start.

    Cum se public / Incarcati pagina Web cu Dreamweaver CS5

    http://www.thesitewizard.com/faqs/copyright-symbol.shtmlhttp://www.thesitewizard.com/faqs/copyright-symbol.shtmlhttp://www.thesitewizard.com/general/copyright-issues.shtmlhttp://www.thesitewizard.com/general/copyright-issues.shtmlhttp://www.thesitewizard.com/faqs/glossary.shtml#webserverhttp://www.thesitewizard.com/faqs/copyright-symbol.shtmlhttp://www.thesitewizard.com/faqs/copyright-symbol.shtmlhttp://www.thesitewizard.com/general/copyright-issues.shtmlhttp://www.thesitewizard.com/general/copyright-issues.shtmlhttp://www.thesitewizard.com/faqs/glossary.shtml#webserver
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    11/75

    Acum suntei de gnd s publicai pagina dvs. pentru a host-uldumneavoastra. Adic, suntei pe cale de a transfera pagina web i fiierele asociateacesteia la computerul dvs. de web gazd, astfel nct s poate fi vizualizat peInternet.

    tiu c unii dintre voi sunt, probabil, filat napoi n groaz la gndul, deoarece paginaeste departe de a fi terminat. Dar nu exist ntr-adevr niciun motiv de ngrijorareaici.Din moment ce site-ul dvs. este nou, i nu ai publicitate adresa site-ului dvs.(numit "URL-ul" n jargonul webmaster) la oricine, nimeni nu va ti chiar i site-ul dvs.exista. Nici mcar motoarele de cautare. Ca urmare, singurul care va vedea paginadvs. de web este neterminat tine. Dup cum vei descoperi n timp, nu este att deuor pentru a obine vizitatori.

    Principalul motiv pentru care suntem publishing pagina dvs. n acest moment esteacela de a v permite s v familiarizai cu toate etapele majore ale designului de opagina web: care este, crearea unei pagini web implic nu numai crafting pagina, darimplic, de asemenea obtinerea de pagina de pe computer pe computerul dvs. deweb gazd.Dup ce obine acest obstacol din calea, vei avea stapanesc ceea ceeste una dintre cele mai mari provocri tehnice, un nou venit este probabil s seconfrunte. Nu lasa aceasta sa te sperie, dei, este de fapt destul de uor!

    Un alt motiv important pentru publicare acum este s v testa de design ntr-unbrowser web atunci cnd pagina dvs. este pe internet. Chiar dac putei testaintotdeauna site-ul dvs. de pe computerul dumneavoastr, nu este acelai lucru. Este

    posibil s se fac greeli care nu prezint atunci cnd pagina dvs. este pe computer,dar apar numai atunci cnd este pe Internet. Testarea pagina pe Internet, dupfiecare etap v permite pentru a prinde aceste erori devreme. n caz contrar, ncazul n care greselile se acumuleaza, aceasta poate deveni dificil pentru voi (ca unnceptor), pentru a afla n cazul n care acesta a mers prost.

    V rugm s nu srii peste acest pas dac suntei n urma acestei serii tutorial. Voipresupune c ai fcut acest lucru n capitolele viitoare, i v pot considera c estedificil s urmeze ceea ce spun acolo dac srii peste acest lucru.

    1. Facei clic pe "site-ului | Administreaza Site-uri ..." meniu. O caset de dialog,"Administreaza Site-uri" va aprea.

    2. Facei clic pe "Edit ..." buton. Aceasta va deschide o caset de dialog "Site-ulde instalare pentru [numele site-ul dvs.]" n cazul n care "[numele site-ului]" vafi nlocuit cu orice nume le-ai introdus cnd ai configurat prima site-ultu . Coninutul din caseta de dialog ar trebui s fie, de asemenea, familiar dela configurarea iniial.

    3. Uit-te la coloana din stnga a casetei de dialog. "Site-ul" linia ar trebui s fieselectat n mod curent. Facei clic pe "Server" linii pentru ao selecta. Cndprocedai astfel, coninutul de partea dreapt a casetei de dialog se vaschimba.

    http://www.thesitewizard.com/dreamweaver/redesign-without-affecting-old-website.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtml#sitemgrhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtml#sitemgrhttp://www.thesitewizard.com/dreamweaver/redesign-without-affecting-old-website.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtml#sitemgrhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtml#sitemgr
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    12/75

    4. Pe coloana din dreapta a casetei de dialog, cutai un "+" (semnul plus). Artrebui s fie chiar sub caseta list goal n mijlocul acelei coloane. Facei clicpe acesta. O caseta de dialog fr titlu va aprea.

    5. Ar trebui s existe dou tab-uri n partea de sus a casetei de dialog, "de baz"i "Advanced". Pentru a v asigura c suntei n fila corect, facei clic pe "debaz" tab.

    6. Introducei orice dorii n "Server Name". Acest cmp este doar pentru propriileinformaii, aa c nu conteaz cu adevrat ceea ce le introducei aici. Un modsimplu este de a introduce ceva de genul "server example.com 's". Numele pecare l introducei aici vor fi afiate n caseta list goal ai vzut mai devreme,i putei modifica ntotdeauna mai trziu, dac vei afla ca ai prefera cevaaltceva.

    7. n acest moment, vei avea nevoie de informaiile pe care gazda dvs. Web pecare le amenajate atunci cnd v-ai nscris pentru un cont de gazduireweb. Gazde web trimite, de obicei, o list lung de detalii despre contul dvs.atunci cnd v nscriei prima dat. Printre acestea este ceva cunoscut subnumele dumneavoastr "adres FTP" (denumit uneori "numele gazdei FTP"sau "FTP server" de ctre gazde web). FTP vine de la "File TransferProtocol". Aceasta este metoda obinuit prin care transferul pagina dvs. deweb de la computer la computer gazd dvs. de web. Acest act de transfer alfiierelor din sistemul dvs. pentru a gzdui sistemul dvs. de web este cunoscutsub numele de "upload" sau "publicare".

    Dac dvs. de web gazd va trimis informaiile ntr-un mesaj e-mail, fie de

    imprimare mesajul stele sau deschide n alt fereastr de pe computerul dvs.,astfel nct s poate face referire la ea. Eu personal prefer s-l deschid nalt fereastr, astfel nct pot tiat pur i simplu i s lipii informaiile dinaceast fereastr n Dreamweaver, evitndu-se astfel erorile de tastare. Cutoate acestea, nu tot ce vi se potriveste cel mai bine.

    Pune adresa de FTP pe care gazda dvs. Web pe care le-a dat n cmpulpentru "adres FTP". Dac avei propriul nume de domeniu, si tu esti gazduitpe un host web comercial , aceast adres este de obicei un nume dedomeniu cu prefixul "ftp". De exemplu, dac numele dumneavoastr de

    domeniu este "example.com

    ", de multe gazde de web va configura adresa tade FTP pentru a fi" ftp.example.com ". Verificai e-mailul primit de la dvs. deweb gazd pentru aceast informaie, sau s le cerei n cazul n care nuputei gsi informaii oriunde. n cazul n care adresa este ntr-adevr" ftp.example.com "intra n faptul c" FTP Adresa "cmp.

    (Reinei c nu putei ghici doar la ntmplare adresa ta de FTP i introducei-laici Ea trebuie s fie ceea ce dvs. de web gazd a furnizat pentru tine.. Ca nutoate gazdele web utilizeaz " ftp.example.com "form. Unii cer doar sintroducei numele dvs. de domeniu (" example.com "), n timp ce altele furniza

    un nume complet independeni de numele dvs. de domeniu. Dac nu suntei

    http://www.thefreecountry.com/webhosting/budget1.shtmlhttp://www.thefreecountry.com/webhosting/budget1.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    13/75

    sigur ce adres FTP pentru site-ul dvs. este, adresai-v gazda dvs. Webpresupuneri este inutil..)

    8. Lsai cmpul portul stabilit la implicit de "21", cu excepia cazului n gazd deweb a instruit s utilizai o adres alt port. n cazul n care gazda dvs. Web nuau menionat nici un numr de port, lsai cmpul singur.

    9. Introducei numele de utilizator i parola FTP n "Nume de utilizator" i"Parola", respectiv, domenii. Obine aceste informaii de la dvs. de web gazd,dac nu tii deja.Dac nu dorii s pstrai introducerea parolei de fiecaredat cnd publicai o pagin, lsai caseta de selectare de lng "Save"activat (o capusa pe care apare automat n caseta atunci cnd tastaiparola). Dac partajai computerul cu alte persoane, i nu dorescDreamweaver pentru a salva parola, facei clic pe caseta care conine capusala debifai-l. Reinei c voi presupune c ai prsit caseta verificate n acesttutorial, deoarece asta este ceea ce majoritatea thesitewizard.com 's cititoriDreamweaver face.

    10.Pentru a v asigura c ai introdus numele de utilizator, parola i adresa FTPcorect, facei clic pe "Test" butonul de sub cmpul parolei. Dac suntei desucces, vei primi un mesaj care spune "Dreamweaver conectat la serverulWeb cu succes". Facei clic pe butonul "OK" pentru a-l concedieze.

    Not: Dac utilizai Windows Vista, Windows Firewall poate emite un mesajntrebndu-v dac a bloca sau debloca conexiunea. Asigurai-v c facei clicpe "Unblock" buton, sau vei fi blocarea conexiunilor FTP pentru

    Dreamweaver. n mod implicit, conexiunile FTP sunt dou sensuri, carenecesit serverul la care v conectai pentru a face o conexiune inapoi la tine,deci avertisment, prin firewall. Acest lucru este normal, asa ca nu intra inpanica atunci cnd primii acest mesaj de la Vista. Interferen de firewall-ulpoate provoca, de asemenea, primul test n Dreamweaver s eueze, ceea ceduce Dreamweaver s emit o caset de dialog care v spune s utilizaiconexiuni pasive. Doar facei clic pe OK pentru acel mesaj, i facei clic pe"Test" butonul din nou.

    n cazul n care "Test" butonul nu reuete, Dreamweaver va afisa un mesajde consiliere v pentru a activa fie "Utilizare pasiva FTP" sau "utilizarea IPv6,modul de transfer" de opiuni. Pentru a face acest lucru, facei clic pe triunghiulde lng "Mai multe opiuni". Putei gsi cuvintele "Mai multe opiuni", chiardeasupra "Ajutor", "Save" si "Cancel" butoanele din partea de jos a casetei dedialog. Mai multe seciunea Opiuni vor fi extinse, dezvluind o seciune undeputei configura n continuare setrile FTP. Facei clic pe "Utilizare pasivaFTP" checkbox s-l activezi i testai din nou. n majoritatea cazurilor, setarea"pasiva FTP" mod de funcionare este suficient pentru a face testul de succes.

    n cazul n care testul continua sa esueze, chiar i dup ce ai verificat"Utilizarea pasiva FTP" caseta, este posibil c ai introdus adresa FTP,numele de utilizator sau parola greit. Pentru a v asigura c acestea sunt

  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    14/75

    tastate corect, nu de tip manual, dar copiai i lipii-le de la informaiilefurnizate de ctre host-ul dumneavoastra.

    Dac, avnd fcut asta, v mai gsii c nu v putei conecta, uita-te lacmpul adres FTP. Nu-l conin numele dvs. de domeniu sau unelemodificri ale domeniului dvs. (cum ar fi " ftp.example.com "n cazul n care"example.com "este propriul nume de domeniu Dac da,? i ai abia cumpratnumele dvs. de domeniu n ultimii 2 de zile, este posibil ca numele dvs. dedomeniu nu a fost nc propagat pe Internet Ce este acest lucru nseamn c,atunci cnd un nume de domeniu nou este cumparat, este nevoie de operioada de timp (de obicei, aproximativ 2 zile) nainte de a fi recunoscute nntreaga lume.. ntr-o astfel de caz, singurul recurs este sa asteptati o zi saucam asa ceva din nou, nainte de testare. Nu e nimic oricine poate face pentrua face acest lucru mai rapid.

    Puteti cere, de asemenea, gazda dvs. Web pentru a v ajuta verificareasetrile dumneavoastr (n cazul n care ai de fapt adresa ta de FTP, numelede utilizator sau parola gresita). Dar amintii-v c, dac problema se afl cuun nume de domeniu nou, care nu sa propagat, trebuie doar sa fie rabdator siasteapta. Nu e nimic gazda dvs. Web poate face pentru a v ajuta ntr-unastfel de caz.

    11.Urmtorul cmp care le-ai pentru a finaliza este "directorul radacina"cmp. Acest lucru este necesar pentru c nu poi pur i simplu publicaipagina dvs. de Web pentru orice folder dorii de pe serverul de web , i seateapt ca acesta s apar pe internet. Web gzduiete, de obicei,configurai computerele lor, astfel nct fiierele plasate doar n folderespecifice sunt considerate ca fcnd parte din site-ul tau. Acest lucru estenecesar, altfel oricine de pe Internet poate citi fiierele private, cum ar fiadresa dvs. de email, etc

    Du-te napoi la informaiile furnizate de ctre host-ul dumneavoastra din nou,i s vedem dac se menioneze numele unui director (sau "director" sau"subdirector"), n cazul n care avei nevoie pentru a plasa fiiere ntr-. Unelegazde v spun pentru a plasa fiiere site-ul dvs. ntr-un director numit"www". Alii spun c trebuie s le loc ntr-un folder numit "public_html". Iar aliis v spun pentru a plasa fiiere ntr-un folder denumit dup numele dedomeniu. i acolo sunt, de asemenea, gazde care spun c putei ncrca saupur i simplu publica fiierele n directorul implicit care le vedei cnd vconectai prin FTP.

    Ca i dumneavoastr "adres FTP", acest lucru nu este ceva ce poi ghicialeatoriu. Dac nu avei deja de informaii, afla cerndu-gazd dvs. de web.

    Odat ce avei informaiile, introducei numele folderului n "directorulrdcin" cmp. De exemplu, n cazul n care gazda dvs. Web v spune spublicai fiierele ntr-o "www" directorul, introducei "www" n acest

    http://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/faqs/glossary.shtml#webserverhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/faqs/glossary.shtml#webserver
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    15/75

    domeniu. n cazul n care v spun s utilizai doar directorul implicit atuncicnd v conectai, lsai acest cmp necompletat.

    (Un ultim lucru: s reinei c n cazul n care cele mai multe gazde de web ncauz sunt "www" i "WWW" sunt dou cuvinte diferite. Sfat: pentru cei carenu pot detecta diferena dintre ele, uita-te la capitalizarea al cuvntului Cu altecuvinte. , dac ei spun, utilizarea "www" pentru a stoca fiierele site-ul dvs.,asigurai-v c ai pus "www" i nu "WWW" n "directorul rdcin" cmp.)

    12.Facei clic pe butonul "Save" atunci cnd ai terminat de configurat setrileFTP.

    13.Vei fi returnate la "Site-ul Setup" caseta de dialog. Observai c intrarea esteacum listat n caseta list pe acea pagin. n cazul n care ai nevoie pentru aface modificri la setrile dvs., facei clic pe pictograma creion din partea dejos a casetei de list. Pictograma creion poate fi gsit direct dup "+" i "-"pictograme.

    Pentru moment, facei clic pe "Salvare" buton de pe aceastfereastr. Dreamweaver poate emite o caset de dialog cu mesajul "cache-ulva fi recreat acum, deoarece setrile numele, folderul rdcin, adresa HTTP,sau deghizare a site-ului au fost schimbate." Facei clic pe "OK". Vei fireturnate la "Manage Sites" caseta de dialog. Facei clic pe "Done" buton.

    14.Odat ce ai terminat de configurat Dreamweaver pentru site-ul dvs., estemomentul de a publica pagina de start. Pentru a face acest lucru, facei clic pe"site-ului | Pune".

    15.Atunci cnd o caset de dialog cu titlul "Pune fiierele dependente" apare,facei clic pe butonul "Yes". Fiierele sunt dependente de fiiere suplimentarecare pagina web are nevoie de dvs., astfel nct acesta este afiat corect ntr-un browser web. Nu luai prea mult timp s facei clic pe "Da" sauDreamweaver va selecta automat "Nu" pentru tine, care nu este ceea cedorii. Trebuie s facei clic pe butonul "Da" sau pe pagina de web nu va aratala fel in browser-ul dumneavoastra .

    (Dac ai ateptat prea mult, i au constatat c Dreamweaver a respins nmod automat caseta de dialog pentru voi, facei clic pe "site-ului | Pune" pestetot din nou De data aceasta, asigurai-v c facei clic pe butonul "Da" atuncicnd apare caseta de dialog. .)

    Dreamweaver va emite apoi o caset de dialog care v informeaz despreevoluia acesteia. Caseta de dialog va disprea automat atunci cnd a finalizatncrcarea pagina ta web.

    Testarea pagina Web

    Acum, c v-ai publicat pagina dvs. de web, va trebui s-l verifica folosind un browserweb. Dei Dreamweaver face o treaba buna de care v arat ce pagina dvs. de web

    http://www.thesitewizard.com/dreamweaver/published-website-looks-different.shtmlhttp://www.thesitewizard.com/dreamweaver/published-website-looks-different.shtmlhttp://www.thesitewizard.com/dreamweaver/published-website-looks-different.shtmlhttp://www.thesitewizard.com/dreamweaver/published-website-looks-different.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    16/75

    va arata, nu este de fapt un browser web, ci un editor web . Ca atare, exist unelelucruri pe care nu se pot testa n mod eficient n Dreamweaver sine.

    Pentru a testa pagina dvs. de pornire, tastai adresa site-ului dvs. ("URL") nbrowser. De exemplu, tastai " http://www.example.com/ ", n cazul n care esteadresa URL a site-ului dumneavoastra. Observai c am fcut s nu v cer s tastai"index.html" filename. Dac ai setat lucrurile corect, chiar daca nu ai de tip"index.html" parte, ar trebui s vedei n continuare coninutul "index.html" fiier.

    Daca primiti un " fiier 404 Not Found "eroare n loc de pagina web pe careproiectate, sau vei obine dumneavoastr pagina de web gazd implicit preinstalate ,este posibil s fi introdus greit numele folderului n "directorul rdcin" cmpul ammentionat mai devreme. Du-te napoi i repara eroarea. Aceasta este, facei clic pe"site-ului | Administreaza Site-uri ..." element de meniu, facei clic pe "Edit ..." buton,facei clic pe "Servers" linia n coloana din stnga, facei clic pe numele serverului ncaseta de list pe partea dreapta pentru a selecta, facei clic pe pictograma creion ncaseta list. Avei posibilitatea s modificai, apoi director rdcin n locaiacorect. Cnd ai terminat, asigurai-v c facei clic pe "Salvare" buton pe careambele caseta de dialog, precum i "Site-ul Setp" caseta de dialog, n cele din urmi facei clic pe "Done" buton "Manage Sites" fereastr.

    Daca primiti un "nr DNS pentru www.example.com" (sau oricare ar fi numele dvs. dedomeniu este) sau "Domeniul nu a fost gsit" de eroare, este posibil s fii cu care seconfrunt problema de propagare domeniu am menionat mai devreme (n cazul ncare un domeniu este att de nou, care se nu este nc recunoscut nc de internetn band larg sau de furnizorul de dial-up). O alt posibilitate este c suntei folosindun web gazd care nu i-a nfiinat "www" subdomeniu pentru tine, i ai tastat n"www.example.com" n browser. Nu toate gazdele web face acest lucru n modautomat pentru tine. Dac acesta este cazul, ncercai s tastai URL-ul dvs., fr"www", de exemplu, de tip "http://example.com/" n browser.

    Daca nu primeste nici erori la toate, dar a se vedea pagina pe care ai creat maidevreme, felicitri! Ai creat i publicat pagina de web folosind Dreamweaver CS5primul.Acesta poate fi o pagin de prime i neterminate (pentru moment), dar v-aiplimbat prin toate etapele eseniale de proiectare i ncrcarea unei pagini web.

    Capitolul urmtoare: Cum s adaugi poze la site-ul dvs.

    n urmtorul capitol al Tutorial Dreamweaver CS5, vei nva cum s adugaiimagini i o sigl pentru site-ul tau .

    Copyright 2010 de ctre Christopher Heng. Toate drepturile rezervate.Obinei mai multe sfaturi gratuite si articole ca aceasta , pe web design, promovare,veniturile i scripting, de la http://www.thesitewizard.com/ .

    http://www.thefreecountry.com/webmaster/htmleditors.shtmlhttp://www.thesitewizard.com/archive/custom404.shtmlhttp://www.thesitewizard.com/faqs/default-page-after-publishing.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-2.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-2.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/http://www.thefreecountry.com/webmaster/htmleditors.shtmlhttp://www.thesitewizard.com/archive/custom404.shtmlhttp://www.thesitewizard.com/faqs/default-page-after-publishing.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-2.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-2.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    17/75

    Cum s adaugi poze i un Site Logo pentru site-ul dvs.Utilizarea Dreamweaver CS5de Christopher Heng, thesitewizard.com

    Una din cele mai multe operatii comune care fiecare web designer nu este de ainsera imagini sau imagini ntr-o pagin web. Ca un webmaster, chiar dac nuintenionai site-ul dvs. pentru a fi covor cu grafica, va trebui n continuare sadugai cel puin o imagine n site-ul dvs.: logo-ul site-ului dvs.. Acest capitol varat cum putei aduga fotografii, logo-uri, i alte tipuri de imagini pentru site-ul dvs.folosind Dreamweaver CS5 .

    Dac avei abia ajuns la acest capitol i de altfel sunt familiarizati cu editorul de webDreamweaver, poate dorii s ncep de la primul capitol al acestui TutorialDreamweaverserie. Voi presupune c ai terminat deja toate etapele descrise n

    capitolul 1, i anume, a creat un site web coloana 2, a adugat coninut n coloana deconinutul principal, i a publicat o versiune preliminar a homepage-ul la Internet.

    (De fapt, dac suntei de lectur acest articol doar pentru a afla ce crearea unui siteweb este vorba, putei gsi articol Cum la Start / Creare site-ul propriu: Ghidulnceptorului AZ a fi un punct mai utile i informative de pornire .)

    Scopul acestui capitol

    Pn la sfritul acestui capitol, va trebui adugat un logo la pagina de pornire,

    precum i (opional) integrate niste poze (fie fotografii de produs, fotografii personalesau alt tip de imagine), n acea pagin web.

    Cum s obinei imagini pentru site-ul dvs.

    Vei avea nevoie pentru a avea urmtoarele imagini pentru site-ul dumneavoastr.

    1. Site-ul Logo

    Dac ne uitm la cele mai multe dintre site-urile de pe Internet, vei observa

    c toate acestea sportul un fel de logo-ului pe paginile lor. De exemplu, logo-ulpentru thesitewizard.com pot fi gsite la colul din stnga sus a paginilorsale. Din moment ce va fi adugarea de un logo pentru site-ul dvs. n acestcapitol, va trebui s aib o imagine unica de a servi ca logo-ul, dac sunteipentru a finaliza acest capitol.

    Cei care sunt crearea unui site pentru o companie care are deja un logo poatefolosi pur i simplu o copie digital de faptul c logo-ul pentru site-ul. Copiedigital trebuie s fie n GIF, JPG sau grafic format PNG. Dac logo-ul dvs.este, n unele formatul de fiier alte, pentru a primi un editor de imagini pentru

    a converti imaginea ntr-una din cele trei formate. Exist mai muli editori njurul valorii de imagini, de la cele celebre comercial ca Adobe Photoshop la

    http://www.thesitewizard.com/http://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.dpbolvw.net/qa115wktqks7AGAB9H798CACD98http://www.thesitewizard.com/http://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.dpbolvw.net/qa115wktqks7AGAB9H798CACD98
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    18/75

    cele gratuite cum ar fi cele listate laFree Image Editori i poz pagina. Dacnu avei o copie digital situat n jurul valorii, dar au o versiune tiprit,scanare sau s ia o fotografie digital de faptul c logo-ul i de a folosi aceaimagine. Din nou, de ieire scanat sau fotografie digital trebuie s fie n PNGJPG, GIF sau format. Acest lucru nu ar trebui s fie, n general, o problem,deoarece cele mai multe camere moderne i scanere pot de ieire fiiere JPG.

    Dac nu avei deja un logo, ar trebui s creai unul pentru utilizarea n site-ultau. Eu nu recomandm s utilizai oricare dintre imagini gratuite gsii n jurulvalorii de Internet, chiar dac titularul dreptului de autorde care imagineaspune c l putei folosi royalty-free pe site-ul tu. Logo-urile sunt ca un simbolde brand pentru site-ul dvs., astfel nct vei dori s fie unic pentru site-ultu. Pentru a crea logo-ul propriu, fie direct, le creai pe computer sau ledesena pe o bucat de hrtie i scanai-l.Pentru cei care nu au creat un logonainte, i nu sunt sigur cum s merg despre asta, aruncai o privire laarticolul Cum s creeze un logo pentru site-ul dvs. rapid i uorgsite lahttp://www.thesitewizard.com / webdesign / face-site-logo-banner.shtml

    Indiferent de modul n care obinei logo-ul, fie prin tragere-le tu insuti sau prinscanarea logo-ul din antetul dumneavoastr, vei dori, probabil, pentru aredimensiona logo-ul dvs. pentru a se potrivi pagina dvs. de web. Deoareceablonul de pagin web pe care le utilizai de la capitolul 1 v d ntreagalime a paginii pentru logo-ul, logo-ul dvs. poate fi destul de larg. Asta este,nu avei nevoie pentru a face la fel de mici ca logo-ul thesitewizard.com 's, pecare l-am creat, astfel nct ar putea stoarce ntr-un col.

    Ce este o lime bun pentru logo-ul, atunci? Nu exist reguli greu irapid. Vom fi (optional) de centrare ("centrare", nenglez SUA ) logo-ul de pepagina, deci nu v facei griji cu privire la acest site este potrivi perfect ntremarginile din stnga i dreapta. Nu exist nici o modalitate de a obtine opotrivire culoare, oricum, deoarece limea paginii dvs. va varia n funcie dect de mare a monitoriza vizitatorilor dvs. este. Centrare logo-ul nseamn c,chiar dac imaginea nu este foarte larg, ar putea s arate nc bine pepagina. De exemplu, logo-ul Google implicit este de fapt destul de ngust, nun mod substanial mai larg dect s thesitewizard.com ", dar nc arat bine pepagina lor, deoarece le-am pus-o n centru. Daca esti la o pierdere completa,alege doar o dimensiune a aleatoare (de exemplu, 450 de pixeli lime i 100pixeli nlime) i locul de munc de acolo. n cazul n care nu arata bine, potisa te duci mereu napoi mai trziu i redimensiona imaginea dvs. n editorulde imagine, i reintroducei-l n pagina dvs. web.

    2. Fotografii de produse i alte tipuri de imagini (opional)

    n afar de logo-ul site-ul dvs., poate dorii s aib alte imagini pentru a fiafiate pe site-ul dvs., cum ar fi imagini de produs, fotografii de tine, fotografiide peisaje sau chiar desene pentru a nfrumusea site-ul tau. Dac da, a luape ei gata nainte de a ncepe acest tutorial.

    http://www.thefreecountry.com/utilities/imagephotoediting.shtmlhttp://www.thesitewizard.com/general/copyright-issues.shtmlhttp://www.thesitewizard.com/webdesign/make-site-logo-banner.shtmlhttp://www.thesitewizard.com/general/beware-of-english-variants.shtmlhttp://www.thesitewizard.com/general/beware-of-english-variants.shtmlhttp://www.thefreecountry.com/utilities/imagephotoediting.shtmlhttp://www.thesitewizard.com/general/copyright-issues.shtmlhttp://www.thesitewizard.com/webdesign/make-site-logo-banner.shtmlhttp://www.thesitewizard.com/general/beware-of-english-variants.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    19/75

    Dac suntei de vnzare un produs digital care poate fi descrcat de pe site-uldvs., i prin urmare, nu au o form fizic pe care o putei lua o fotografie de,poate dorii s ia n considerare crearea unei imagini a acesteia pentru scopuride afiare oricum. Avand o imagine de pe site-ul dvs. de produsul dvs. ntr-unfel face ca produsul sa para mai tangibile n mintea cititorilor mult dectvorbesc despre asta.

    De exemplu, dac vindeiprograme de calculator, puteidesena o imagine de o cutie desoftware pentru a fi afiate pesite-ul dvs., fie folosindun program de desen cum ar ficele am menionat mai sus, saucu o cutie de software 3D despecialitate de desen. Versiunigratuite ale software-ului pot figsite pe 3D Free Software Caseta Image Makerspagina.

    De asemenea, dac suntei de vnzare sau de departe oferind o carteelectronic (sau "ebook"), este posibil s dorii s creai o imagine a criidvs.. Nu exista nici o decizie fr s acopere ebook c tiu de, aa c vatrebui fie s utilizai un program comercial ca Shot Box 3D sau manual oremiz cu ajutorul unui editor grafic . De exemplu, imaginea mea de aici Cumsa faci / Crearea unui Website: incepatori AZ Ghidul a fost creatfolosind BoxShot3D .Software-ul poate crea, de asemenea, lucruri cum ar fiDulapuri cu CD / plicuri (dac suntei de vnzare muzica ta), Dulapuri cusoftware-ul, sticle, pungi de hrtie, bidoane, etc

    Not: nu exist o astfel de carte fizic, aa nct v rugm s nu-mi e-mail sntreb de unde putei cumpra de folosire.Dac dorii s-l citesc, ghidul decomplet este disponibil on-line (i-l putei citi n mod gratuit; nu este nevoie sacumperi nimic) lahttp://www.thesitewizard.com/gettingstarted/startwebsite.shtml

    Cum de a aduga un logo pentru site-ul dvs. Dreamweaver CS51. Creai un folder pentru imaginile dvs. n folderul dvs. site-ullocal

    Pornire Dreamweaver CS5 , dac nu l-au ruleaz deja.

    Vei avea nevoie acum pentru a crea un folder pentru a stoca imaginile pecare dorii s le utilizai pe site-ul tau. Da, eu stiu ca deja ai imaginile stocatentr-un alt folder de pe computer. Cu toate acestea, n scopul de a utilizaaceste imagini pe site-ul dvs., va trebui s copiai acele imagini n ierarhia de

    http://www.thefreecountry.com/utilities/imagephotoediting.shtmlhttp://www.thefreecountry.com/programming/3d-software-box-shot-makers.shtmlhttp://www.thesitewizard.com/archive/ebookpublishing.shtmlhttp://www.thesitewizard.com/archive/ebookpublishing.shtmlhttp://www.thesitewizard.com/archive/ebookpublishing.shtmlhttp://www.plimus.com/jsp/redirect.jsp?contractId=1652181&referrer=thesitewizardhttp://www.thefreecountry.com/utilities/imagephotoediting.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.plimus.com/jsp/redirect.jsp?contractId=1652181&referrer=thesitewizardhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.thefreecountry.com/utilities/imagephotoediting.shtmlhttp://www.thefreecountry.com/programming/3d-software-box-shot-makers.shtmlhttp://www.thefreecountry.com/programming/3d-software-box-shot-makers.shtmlhttp://www.thesitewizard.com/archive/ebookpublishing.shtmlhttp://www.thesitewizard.com/archive/ebookpublishing.shtmlhttp://www.plimus.com/jsp/redirect.jsp?contractId=1652181&referrer=thesitewizardhttp://www.thefreecountry.com/utilities/imagephotoediting.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.plimus.com/jsp/redirect.jsp?contractId=1652181&referrer=thesitewizardhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBG
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    20/75

    dosare care conine restul de fiiere site-ul dvs., sau Dreamweaver nu le varecunoate sau a le publica pe site-ul tau. De exemplu, n cazul n caredosarul site-ul dvs. locale, pe care ai creat-o ncapitolul 1 , se numete "c: \Users \ Chris \ mywebsite", atunci va trebui s copiai acele imagini, fie n aceldosar, sau un subfolder cum ar fi "c: \ Utilizatori \ Chris \ mywebsite \ imagini". n sensul prezentului tutorial, vom crea o "imagini" subfolder. (Not: acestlucru este valabil indiferent dac executai Windows sau Mac OS X.)

    Uit-te la panourile din coloana cea mai din dreapta in Dreamweaver. Ar trebuis fie n msur s faa locului "Files" la jumtatea distanei fila jos aferestrei. (Ar trebui s fie lng o fil etichetat "ACCESS".) Sub fila Fiiere, artrebui s fie n msur s faa locului, o caset list cu dou fiiere listate:"index.html" si "twoColLiqLtHdr.css". Ai creat aceste fiiere n capitolul 1 .

    Mutai mouse-ul pentru un loc gol sub cele dou fiiere, dar nc n panoul deFILES. Facei clic dreapta pe mouse-ul: faptul c este, facei clic pe butonuldin dreapta pe mouse-ul. Un meniu ar trebui s apar. Facei clic pe "NewFolder", element din acel meniu. Dreamweaver va crea un folder nou, numittemporar "untitled", n conformitate cu dvs. dou fiiere. "Untitled", ar trebui sfie n prezent evideniat, permindu-v s i schimbe numele. nlocuiinumele existent cu "imagini", fr ghilimele i n ntregime cu litere mici (mici),i apsai tasta ENTER (sau tasta de returnare dac utilizai un Mac). Numelefolderului ar trebui s fie schimbat acum la "imagini".

    2. Copiai fotografiile n Folder site-ul dvs. Local Imagini

    Acum va trebui s copiai toate imaginile n faptul c "imaginile" folderul pecare tocmai l-ai creat. Procedura exact pentru acest variaz de la sistem lasistem.

    De exemplu, dac utilizai Windows, ncercai acest lucru. Facei clic dreaptape folderul imagini n Dreamweaver. Un meniu va aparea. Facei clic pe"Explore ..."element n acest meniu. O fereastra se va deschide, care v aratconinutul acelui folder. Pentru moment, e gol, deoarece nu ai copiat nimicacolo nc. Acum facei clic pe meniul Start din Windows i "Computer"element (pentru Windows Vista i Windows 7; se numeste "My Computer" nWindows XP), n meniul care apare. O fereastr nou se va deschide,oferindu-v o imagine de ansamblu a tuturor unitile avei pe computer,printre alte lucruri. Cu aceast fereastr de alt parte, navigai la locul n carev pstrai imaginile. Selecteaz toate imaginile pe care dorii s le utilizai pesite-ul tau. Facei clic dreapta pe selecie, care, i alegei "Copy" din meniulcare apare. Comuta la cealalt fereastr (cel pe care le deschis dinDreamweaver). Facei clic dreapta pe spaiul liber n acea fereastr i faceiclic pe "Paste" din meniul care apare. Imagini pe care le anterior selectate vorfi copiate n folderul site-ul dvs. locale imaginile. Putei nchide acum acestedou ferestre. Nu nchide n sine Dreamweaver. Avei n continuare nevoie deea.

    http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    21/75

    3. Deschide pagina web

    Dac ai nchis Dreamweaver (care este, a ieit program) dup ce ai terminatcapitolul 1, probabil c nu au fiierul index.html deschis in Dreamweaveratunci cnd l repornit pentru acest capitol. Pentru a redeschide fiierul-aicreat anterior, facei dublu "index.html", articol n care filaFiiere. Dreamweaver va ncrca pagina dvs. de pornire, i afia aa cum afcut anterior.

    4. tergei substituent Logo existente

    Click dreapta pe "Insert_logo (20% x 90)" cutie dreptunghiular. Un meniu vaaparea. Facei clic pe "Remove Tag " element n acest meniu. Blocdreptunghiular vor fi terse, dvs. i bara de sus antet orizontal se va prbuipentru a deveni o fie ngust n partea de sus. Daca priviti cu atentie, artrebui s vedei, de asemenea, cursorul text clipitor de la marginea din stngaa acestei bar.

    Nu te misca cursorul de text. Nu facei clic oriunde n pagina dvs. web. Doarmergei direct la pasul urmtor.

    5. Introducei Logo

    Facei clic pe "Inserare | Imagine". Dup cum v amintii de la capitolul unu,aceasta nseamn c tu trebuie s facei clic pe "Inserare" element din bara

    de meniu, apoi facei clic pe "Imagine" element din meniul care apare.

    O caset de dialog cu un titlu de "Image source Select", ar trebui sapar. Undeva in mijlocul acelei ferestre, ar trebui s fie posibilitatea de avedea dou dosare: "un _notes" folder i o "imagini" dosar. (Nu v ngrijoraidac nu vedei "_notes" folderul Este irelevant pentru scopurile noastre..)"Imagini" dosar este acelasi pe care l-ai creat mai devreme n acestcapitol. DoubleClick acel folder (care este, mutai mouse-ul peste "imagini"cuvntul, i facei clic pe ea de dou ori n succesiune rapid), pentru aodeschide.

    Dreamweaver va afia, acum, toate imaginile din folderul pe care l-ai copiatmai devreme. Selectai imaginea pe care dorii s utilizai pentru logo-ul. Dacai copiat anterior o multime de poze n acest dosar, i nu sunt sigur ce fiierconine imaginea pe care, se poate vedea o examinare a fiecrei imagini din"Image preview", spaiul de pe partea dreapt a casetei de dialog. Pur isimplu facei clic o dat pe fiecare filename pentru ao selecta, siDreamweaver v va arta o previzualizare a imaginii, care n acelspaiu. Odat ce suntei mulumit de faptul c ai selectat corect de fiierpentru logo-ul, facei clic pe butonul "OK".

  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    22/75

    O caset de dialog intitulat "Tag Atributele Accesibilitate Image" vaaprea. Introducei "[numele site-ului] e logo-ul" (n cazul n care "[numele site-ul dvs.]" este numele site-ul dvs.) n "text alternativ" cmp.

    "Text alternativ" (de multe ori abreviat ca "alt text" de webmasteri) cmp este oscurt descriere a ceea ce conine imagini. Acesta este afiat de un browserweb n cazul n care vizitatorul dezactiveaz ncrcarea toate elementelegrafice n browser. De asemenea, este citit cu voce tare de ctre cititorii deecran (folosit de ctre nevztori), i indexat de motoarele de cutare cadescrierea pentru acea imagine. Dei acest domeniu Text alternativ esteopional, trebuie s completai ntotdeauna s fac site-ul dvs. accesibilnevztorilor.

    Ignorai "Long description" cmpul i facei clic pe butonul "OK".

    Pentru mai bine sau de ru, logo-ul dvs. vor aprea acum n partea de sus apaginii web. Dac aceasta este prima ncercare, exist o ans, chiar c este"pentru mai ru", deoarece nu va trebui experientele anterioare pentru a vghida. n cazul n care logo-ul este prea mare sau prea urt i vrei s scapi deel i ncepe peste tot din nou, facei clic dreapta pe logo-ul i facei clic pe"Remove Tag " element.

    Not: dac utilizai Dreamweaver pentru a redimensiona imaginea ta n loc deun grup specializat neditor grafic , asigurai-v c facei clic dreapta pe

    imagine i selecteaz "Optimizarea ..." din meniul dup ce ai terminatredimensionare. Dreamweaver va face apoi dimensiunea schimbrilorpermanente i a salva imaginea redimensionata peste fiierulexistent. Personal, prefer s folosesc un editor de imagine buna chiar si atuncicand face lucruri cum ar fi imagini redimensionare.Editoarele de imagini tindpentru a v oferi mai mult control asupra imaginilor, dup toate, imaginile suntlor raison d'tre.

    6. Cum la Centrul Logo-ul orizontal pe pagina web

    Dac logo-ul arat bine n poziia sa actual, i nu vrei s-l centru, nu ezitais srii peste acest pas. Altfel, citii mai departe.

    Facei clic o dat pe logo-ul dvs. pentru ao selecta.

    Uit-te la partea de jos a ferestrei Dreamweaver pentru a localiza PropertiesPanel (imaginea de mai jos).

    http://www.thefreecountry.com/utilities/free-screen-readers.shtmlhttp://www.thefreecountry.com/utilities/free-screen-readers.shtmlhttp://www.thesitewizard.com/webdesign/improve-accessibility.shtmlhttp://www.thesitewizard.com/webdesign/improve-accessibility.shtmlhttp://www.thefreecountry.com/utilities/imagephotoediting.shtmlhttp://www.thefreecountry.com/utilities/imagephotoediting.shtmlhttp://www.thefreecountry.com/utilities/free-screen-readers.shtmlhttp://www.thefreecountry.com/utilities/free-screen-readers.shtmlhttp://www.thesitewizard.com/webdesign/improve-accessibility.shtmlhttp://www.thesitewizard.com/webdesign/improve-accessibility.shtmlhttp://www.thefreecountry.com/utilities/imagephotoediting.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    23/75

    Uita-te pentru cmpul etichetat "W". Aceast rubric d dimensiunea real alimii imaginii. De exemplu, n cazul n care "W", spune cmpul "450",nseamn c imaginea este de 450 pixeli lime. Notai aceast valoareundeva (de exemplu, fie c memorarea sau bileel-l jos pe o bucat dehrtie). Vei avea nevoie de ea n scurt timp.

    Uita-te pentru "CSS STILURI" tab-ul in partea dreapta a ferestreiDreamweaver. Ar trebui s fie o anumit distan de mai sus "FILES", panoulpe care ai folosit mai devreme pentru a crea folderul imagini. Ar trebui sexiste un "All" tab-ul de mai jos imediat "CSS stiluri" tab-ul. Dac nu vedei"All" tab-ul, dar a se vedea n schimb un "BUSINESS catalizator" tab-ul directsub "stiluri CSS", aceasta nseamn c CSS STILURI fila nu a fostextins. DoubleClick CSS fila STILURI pentru ao extinde. Ar trebui s vedeiacum "All" tab-ul i o grmad de text care arata ca gebreasca tehnice. (Not:.Dac doubleclicked CSS fila STILURI i pentru a gsi pe care le-ai prbuitpanoul, pur i simplu DoubleClick din nou pentru ao extinde)

    Chiar deasupra "BUSINESS catalizator" fila, n partea din coloana care este,de fapt nc o parte din "stilul CSS" panou, ar trebui s fie n msur s faalocului un iconie cteva mici. Aceste butoane sunt de fapt face clic. Atuncicnd trecei cu mouse-ul peste una dintre aceste icoane, o fereastr vaaprea vrful instrument de a v spune, n scopul de fiecare buton. ncercais vedei ce vreau s spun, dar nu facei clic pe oricare buton n acestmoment. Gsii pe pictograma care are o fereastr vrful instrument carespune: "New CSS Rule". Dac nu poate fi deranjat s trecei cu mouse-ulpeste fiecare buton pentru a gsi, uita doar la imaginea de mai jos pentru avedea despre ce vorbesc despre.

  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    24/75

    Facei clic pe pictograma care are "New articolul CSS" tooltip (pictograma careeste incercuit in imaginea de mai sus).

    O caset de dialog cu un cmp titlu "New CSS articolul" va aprea. CmpulTip Selector este o caset drop-down care conin, probabil, o valoare implicita "compus (n baza seleciei dumneavoastr)". Facei clic pe sgeata n josdin dreapta a casetei drop-down i selectai "Class (se poate aplica la oriceelement HTML)" linia.

    Cmpul Nume Selector de acum ar trebui s fie gol. Facei clic pe cmppentru a plasa cursorul de text acolo, i de tip "logo-ul", fr ghilimele, i nntregime cu litere mici (minuscule). Sub acest domeniu, un comentariuexplicativ, "Acest nume selectorul se va aplica regula de la toate elementeleHTML cu" logo-ul "de clas", ar trebui s apar.

    Facei clic pe butonul "OK".

    O caset de dialog nou, intitulat "Definirea articolul CSS pentru logo-ul ntwoColLiqLtHdr.css.", Ar trebui s apar.

    Facei clic pe "Block" de linie n "categoria" coloana (coloana dinstnga). Coninutul pe partea dreapt a casetei de dialog trebuie s seschimbe. Lng partea de jos din partea dreapta este o caset drop-downetichetate "Display". Facei clic pe sgeata n jos pentru acest cmp iselectai "bloc" element.

    Acum facei clic pe "Box" de linie n "Categorie", coloana pentru aoselecta. Introducei limea imaginii n "Lime" cmp i lsai cmpul de lngaceasta selectat la "px" (pixeli). Pentru cei care nu sunt siguri ce vorbescdespre, limea de imaginea ta este numrul ai notat mai devreme de lapanoul de proprieti.

    Undeva mai jos "nlime" de cmp sunt dou coloane, dei nu apare ca 2coloane. Coloana din stnga a de la rubrica "padding". Coloana din dreaptaare la rubrica "Marja de". Debifai caseta "Same pentru toi" n "Marja de"

    coloana (incercuit in imaginea de mai jos). Apoi facei clic pe sgeata n jospentru "Dreapta" cmpul n care aceeai coloan, i selectai "auto". Facetiacelasi lucru pentru "stnga" n cmpul "Marja de" coloana: care este, faceiclic pe sgeata n jos de lng acel cmp i selectai "auto". Dac gsii catt "stnga" i "Dreapta" cmpuri sunt dezactivate, nseamn c nu ai debifai"Same pentru toi" caseta. Va trebui s debifai caseta de faptul c nainte dea putea selecta "Auto".

  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    25/75

    Facei clic pe "OK".

    Asigurai-v c logo-ul dvs. este inca selectat. Dac nu suntei sigur, facei clicpe logo-ul o dat. Facei clic pe cmpul de clas n Properties Panel dinpartea de jos a ferestrei Dreamweaver. Acesta ar trebui s arate o list lungde elemente. Facei clic pe "logo-ul" de linie n aceast list.

    Logo-ul dvs. ar trebui s fie acum centrat orizontal pe pagina ta web.7. Salvai Att pagin Web i fiiere CSS

    Salvai munca dumneavoastr, fcnd clic pe "File | Save All". Observai cam spus "Save All" nu "Save". Regulile CSS-ai adugat la centrul imaginiidvs. a fost adugat de la Dreamweaver "twoColLiqHdr.css" fiier nu, dvs."index.html" fiier. Prin urmare, dac pur i simplu facei clic pe "File |Salvare", vei economisi doar o parte din modificrile efectuate pn nprezent.

    Pentru cei curiosi despre ceea ce "CSS" este, v rugm s consultaiarticolul Ce este HTML? Ce este CSS? Ce sunt JavaScript, PHP iPerl? pentru mai multe informaii.

    8. Public i Test Page dvs. Web Actualizat n

    Publicarea pagina dvs. web folosind "site-ului | Pune", la fel ca nainte. Dinnou, atunci cnd Dreamweaver v ntreab dac dorii s punei fiiereledependente, asigurai-v c facei clic pe "Da", altfel logo-ul dvs. nu va aprea

    pe pagina ta web. De test, apoi pagina dvs. de pornire cu un browserweb. Dac avei orice probleme cu acest pas, i nu ai nceput aceast serie

    http://www.thesitewizard.com/html-tutorial/what-is-html.shtmlhttp://www.thesitewizard.com/html-tutorial/what-is-html.shtmlhttp://www.thesitewizard.com/html-tutorial/what-is-html.shtmlhttp://www.thesitewizard.com/html-tutorial/what-is-html.shtmlhttp://www.thesitewizard.com/html-tutorial/what-is-html.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    26/75

    de la capitolul 1 , v rugm s revenii la capitolul 1 pentru a citi informaiiimportante pe care le-ai pierdut.

    Cum Pentru a insera imagini n pagina dvs. web cu Dreamweaver CS 5(opional)

    Aceast seciune se refer la introducerea de imagini de produs, fotografii, opere deart, sau alte imagini pe care dorii s inserai n corpul principal al paginiiweb.Imaginile pot fi inserate fie ntre paragrafe de text, cum ar fi ceea ce vedei nmulte dintre fotografiile mele de mai sus, sau cu textul curge n jurul valorii deaceasta, fie pe dreapta sau pe stnga, cum ar fi ceea ce vedei n poza meade Ajutor Crearea / creeze un site: Ghidul incepatorului AZ carte. Derulai n suspentru a vedea imagini diferite moduri poate fi introdus pentru a vedea ce vreau sspun.

    Setarea imagini de fundal , astfel nct acestea formeaza fundalul paginii web, vor fipredate ntr-un capitol ulterior.

    1. Procesul pentru inserarea unei imagini ntr-o pagin web este cea mai mareparte aceeai ca i pentru adugarea logo-ul site-ului.

    Facei clic pe primul loc n pagina ta web n cazul n care dorii s meargimaginea. De exemplu, dac dorii ca imaginea s apar n faa unui anumitparagraf de text, pune cursorul de text la nceputul foarte acestui paragraf.

    2. Facei clic pe "Inserare | Imagine" i alegei imaginea dvs. din "imaginile"dosar i facei clic pe butonul "OK". Dac imaginea dumneavoastr nu este nacel folder, facei clic pe butonul Revocare, copiai de fiier grafic n acelfolder, apoi ncercai din nou.

    3. Introducei textul alternativ pentru acea imagine. De exemplu, n cazul n careimaginea este o fotografie dintr-o carte vindei, a pus titlul crii dvs. n "textalternativ" cmp. Daca este o fotografie de familie la un picnic, spune ceva degenul "Familia mea la un picnic". Cu alte cuvinte, descrie pe scurt imaginea.

    Facei clic pe butonul "OK" atunci cnd ai terminat.

    4. Imaginea dvs. va fi inserat n pagina dvs. web, eventual ntr-o poziie caincomode dup cum se arat n imaginea de mai jos.

    http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-4.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-4.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-4.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-4.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    27/75

    Dac dorii ca imaginea s apar complet nainte de paragraf, facei clicoriunde ntr-un cuvnt n paragraful, i de a folosi cheia cursor pentru al mutade la inceputul acestui paragraf. Hit ENTER (sau RETURN) tasta.

    Pe de alt parte, dac dorii cuvintele sa curga la dreapta a imaginii, cuimaginea pe ea nsi din stnga, facei clic pe imagine o dat pentru aoselecta. Apoi, facei clic pe sgeata n jos de lng caseta derulant pentru"Alinierea" n panoul de proprieti. Selectai "Left" (din moment ce dorii caimaginea din stnga).

    Dac dorii ca imaginea din dreapta, trebuie s selectai "Dreapta" opiune n"Alinierea" cmpul n loc de "stnga".

    Observai, totui, c, dup ce nu Aliniere operaie, cuvintele tale se va mergechiar pn la marginea de imagine (a se vedea captura de ecran de maisus). Acest lucru nu este, de obicei, ceea ce majoritatea oamenilordoresc. Pentru a ajusta spaiul orizontal dintre imagine i cuvintele, introduceiun numr n "Space H" cmp din panoul de proprieti. De exemplu, ncercai

    s tastai "5" (fr ghilimele) n acest domeniu i a lovit ENTER (sauRETURN) tasta. Dreamweaver va insera un pic de spaiu pe orizontal ntre

  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    28/75

    imaginea ta i cuvintele tale. Dac acest rezultat intr-un spatiu care este fieprea ngust sau prea mare, a mri sau micora numrul pn cnd obineirezultate satisfctoare. Pentru a ajusta spaiul vertical ntre imaginea ta, iarcuvintele, utilizeaz "Space V" pe teren n acelai mod.

    5. Salvai munca dumneavoastr cu "File | Salvare", publica, si testati-l ntr-unbrowser web.

    Felicitri. Ai acum lustruit pagina de web, astfel nct acesta conine acum un logo-ulsite-ului i cteva imagini, fcndu-l arate mai mult ca un produs finit.

    Urmtorul capitol

    n capitolul urmtor, vei nva cum s modificai fonturile, culoarea textului, seadaug caractere aldine i cursive, precum i ajusta dimensiunile font .

    Copyright 2010 de ctre Christopher Heng. Toate drepturile rezervate.Obinei mai multe sfaturi gratuite si articole ca aceasta , pe web design, promovare,veniturile i scripting, de la http://www.thesitewizard.com/ .

    Cum se modifica fonturile, dimensiunea textului iCulori in Dreamweaver CS5de Christopher Heng, thesitewizard.com

    Chiar daca site-ul dvs. este acoperit n grafic, poate n msura n care accentul suprincipal este grafica, va trebui n continuare s se ocupe cu text. i n orice momentavei nevoie pentru a manipula text, vei dori probabil s tie cum s fac lucruri cumar fi dimensiunea fontului schimbare, pune cuvintele n aldine sau cursive, schimbaculorile textului ("culori", n engleza american), i chiar schimba fontul insine . Acesta este subiectul acestui capitol din tutorial Dreamweaver CS5 .

    Pentru noul venit, care de-abia a ajuns la aceast pagin, poate dorii s ncep dela primul capitol al CS Dreamweaver 5 tutorial . Capitolul curent presupune c aiterminat toate etapele din ultimele dou capitole, i au ntr-adevr, toate cunotinele

    i abilitile condiie predate acolo. (Apropo, dac suntei nou de a face site-uri web,i sunt aici pentru a afla ceea ce implic, articolul Cum se face / Creare site-ulpropriu: de incepator AZ Ghidul poate fi un punct de plecare mai.)

    Scopul acestui capitol

    Pn la sfritul acestui capitol, va fi capabil de a schimba fonturile, utilizeaz aldinei cursive, si modifica dimensiunea i culoarea de continut text folosind AdobeDreamweaver CS5 . Acest capitol, de asemenea, v introduce n Cascading StyleSheets ("CSS") i v arat cum putei profita de ea la stilul text.

    Introducere n Cascading Style Sheets (CSS)

    http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-3.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-3.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-2.shtmlhttp://www.thesitewizard.com/http://www.thesitewizard.com/http://www.thesitewizard.com/general/beware-of-english-variants.shtmlhttp://www.thesitewizard.com/general/beware-of-english-variants.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-3.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-3.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-2.shtmlhttp://www.thesitewizard.com/http://www.thesitewizard.com/http://www.thesitewizard.com/general/beware-of-english-variants.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.thesitewizard.com/gettingstarted/startwebsite.shtmlhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBG
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    29/75

    Ai ntlnit termenul de "CSS" n trecere nainte de, n primul rnd, atunci cnd a creatun site web coloana 2 de la unul din Dreamweaver pre-ambalate abloane , i apoimai trziu, atunci cnd logo-ul site-ul dvs. centrat n mijlocul paginii casa ta.

    Cu toate acestea, nainte de a ne trece la restul din seria tutorial, este o idee bunpentru a obine o mai bun nelegere a ceea ce acest "CSS" lucru este. Dei,teoretic, un editor vizual ca Dreamweaver te izoleaza de a avea de a face cu omulime de tehnic de nivel sczut chestii de genul CSS, HTML i alte mumbo jumboastfel, un pic de cunotine despre ceea ce se ntmpl n spatele scenei n timp celucra merge un drum lung n ajutndu-v s lucrai mai inteligent i ncredere.

    Cascading Style Sheets, sau "CSS" pentru scurt, este numele de tehnologia de bazpe care Dreamweaver utilizeaz pentru a controla aspectul site-ul dumneavoastr. ntimp ce lucrai n Dreamweaver pentru a face lucruri cum ar fi centrul de logo-ul(ultimul capitol), fonturi schimbare, dimensiunea textului i culori (acest capitol),Dreamweaver genereaza de fapt, cod CSS n fundal pentru a face treaba.

    Tu n mod normal, nu vedei efectiv codul CSS create de Dreamweaver. Acesta esteautomat inserat ntr-un fiier CSS numit "twoColLiqHdr.css" (dac ai utilizat numeleimplicit n capitolul 1) pentru tine. Acesta este motivul pentru care trebuie s vntotdeauna-v c folosii "File | Save All" (introdus ultimul capitol), atunci cnd faciorice fel de schimbare vizuale la pagina ta web. n caz contrar, Dreamweaver vasalva doar fiierul HTML (pagina web propriu-zis) esti lucreaz n prezent, i nusalvai fiierul CSS, de asemenea. De asemenea, este motivul pentru care aveinevoie s v asigurai c s facei clic pe butonul "Da" atunci cnd Dreamweaver vntreab dac aceasta ar trebui s uploadezi fisierele tale depinde in timpul unei"site-ului | Pune" (introdus n capitolul 1) operaiune. n caz contrar, fiierul CSS pesite-ul dvs. nu vor fi publicate, astfel nct orice modificri la aspectul site-ul dvs., cutoate acestea asiduu aplicate, nu vor fi afiate n pagina dvs. web real.

    Linii de cod CSS care controleaz aspectul paginii dvs. de web sunt, nesurprinzator,numit "regulile CSS". Acestea sunt reguli, n sensul c browsere web sunt obligai srespecte aceste norme n randare (de exemplu, afiarea) pagina web. De exemplu,atunci cnd logo-ul dvs. centrat n capitolul 2, ai creat o regul care a ordonatindirect browser-ul pentru a pune o sum egal cu de spaiu liber pe stnga idreapta imaginii (punerea effectively imaginea dvs. n centrul paginii) .

    Regulile CSS pot fi aplicate la nimic pe pagina dvs. web. Pentru a face mai uor saplice o regul CSS la un element de pe pagina web, putem eticheta n mod normal,elementul vrem sa schimbam cu unele nume arbitrar. n acest fel, ne putem referi lafaptul c pur obiect specific de etichet n regul nostru CSS. Noi numim astfel deetichete " clase "n CSS.

    De exemplu, am etichetat logo-ul site-urilor n capitolul 2 "logo-ul" (prin selectarea"logo-ul" de la cmpul de clas n Properties Panel), si a creat o regul CSS pentru apune ceva etichetat "logo-ul", n centrul paginii. Sau, n limbajul tehnic mai precis, am

    http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-2.shtmlhttp://www.thesitewizard.com/html-tutorial/what-is-html.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-3.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-2.shtmlhttp://www.thesitewizard.com/html-tutorial/what-is-html.shtmlhttp://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-3.shtml
  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    30/75

    atribuit logo-ul site-ul unei clase de "logo", i a creat o regul CSS la centrul de oriceimagine cu un nume de clasa de "logo".

    Da, tiu. Punctul de mai sus este un pic de istorie revizioniste. Adevrul este, de fapt,am creat regula CSS pentru o clas numit "logo-ul" primul. Apoi ne-am atribuit claseia logo-ul nostru real. De fapt, acest mod aparent pe spate de lucru, n cazul n carevom crea o regul pentru o etichet n primul rnd, eticheta apoi obiectul mai trziu,este ceea ce vom face n Dreamweaver pentru cea mai mare parte, n principalpentru c face munca mai uoar.

    Apropo, "obiect" sau "element" pe care am menionat mai sus poate fi nimic careapar n pagina dvs. web. Ea poate fi fotografii, fragmente de text, cuvinte, paragrafe,coloanele de la stnga sau la dreapta sau chiar pe pagina web intreaga. i puteialoca mai multe obiecte diferite pe site-ul dvs. etichet foarte acelai (clasa).

    Nu v facei griji dac cele de mai sus este un pic confuz. Lucrurile se vor clarificadup cum am exercite n mod efectiv n procedura de mai jos. Am vrut doar s vdau o imagine de ansamblu a ceea ce suntem pe cale s fac, precum i o explicaiede ce facem ceea ce facem. Dac ai o durere de cap ncercnd s vizualizeze ceeace tocmai am spus, nu te deranja (pentru a vizualiza). Doar trece la seciuneaurmtoare.

    Cum se modifica fonturile, dimensiunea textului i color, text inDreamweaver CS5

    Urmtorii pai se aplic dac dorii s modificai fonturile, pentru a regla dimensiuneatextului, sau schimba culoarea de cuvintele tale. Reinei c aceti pai a face cuschimbarea de stilurile de text pe fragmente specifice de text sau paragrafe mari detext. Dac dorii s modificai fontul implicit utilizat pe pagina dvs. de Web ntreg, saucoloana din ntregul stnga sau la dreapta, vei gsi procedura ntr-o seciuneulterioar (de mai jos). Cu toate acestea, va trebui n continuare s citii aceastseciune, deoarece aceste seciuni nu ofer unele dintre cunotinele i abilitileeseniale de fond predate aici. (Sorry. Dar exist informaii doar prea mult pentru arepeta peste tot.)

    1. Start up Dreamweaver i DoubleClick "index.html" filename n panoul defisierele de pe dreapta. Aceasta deschide pagina de pornire pe care le aulucrat la in ultimele 2 capitole.

    2. Facei clic pe "Format | Stiluri CSS valid | New ...". Dac v amintii conveniefolosit aici, acest lucru nseamn s facei clic pe "Format" din bara demeniu. Apoi, atunci cnd un meniu vertical apare, facei clic pe "Stiluri CSS"element. Dup aceasta, facei clic pe "Nou ..." element din submeniul careapare.

    3. O caset de dialog, intitulat "New CSS Rule", va aprea. Selectai "Clasa A(se poate aplica la orice element HTML)" din caseta vertical de sub "TypeSelector".Facei acest lucru indiferent dac este sau nu este deja selectat.

  • 8/2/2019 64505019 Dream Weaver CS5 Tutorial

    31/75

    4. Dac exist orice text existent n "Selector de Name" cmp, tergei-l. Pentrua face acest lucru, doar s facei clic o dat n domeniu, i de a folosiBackspace sau tasta DEL pentru a scapa de tot ceea ce n acea caset.

    Vom fi introducerea numelui unei clase n acest domeniu. Aceasta "clasa" esteeticheta pe care am mentionat mai devreme. Este clasa care vom fi atribuireabuci de text pentru care dorii modificrile fcute fontului (dac este de aschimba fontul in sine, sau a modifica dimensiunea textului, etc). Pentru a facemai uor de neles despre ce vorbesc aici despre, haidei s presupunem cdorii s schimbai fontul pentru toate denumirile produselor dvs. s apar pesite-ul tau. Pentru a face acest lucru, avei posibilitatea s introducei o clasa(eticheta), cum ar fi "ProductName" (fr ghilimele) n acest domeniu. Maitrziu, v va atribui aceast "ProductName" clasa la fiecare instan dedenumiri de produse pe site-ul tu.

    Cu alte cuvinte, numele pe care l introducei n acest domeniu este de fapt uncuvnt de alegerea ta. Va trebui s-l fac n sus singur. Numele clasei artrebui s nceap cu o liter a alfabetului. Restul de nume poate conine literei numere, dar nu trebuie s includ nici semnele de punctuaie sau spaii. Deexemplu, "NumeProdus" i "welcomemessage" sunt nume acceptabile pentruclase, dar nu i "numele produsului" sau "Mesaj de bun venit".

    ncercai s fac numele descriptiv al coninutului, i nu aspectul. De exemplu,"NumeFirm" este mai bun dect "bigarialfont", deoarece, n viitor, s-ar puteadecide c numele companiei nu ar trebui s apar n Arial, dar n