Dreamweaver CS5 Tutorial: Cum de a proiecta un site cu Dreamweaver CS5

de Christopher Heng, thesitewizard.com Adobe Dreamweaver CS5 este un program de calculator care se poate utiliza pentru a crea i a menine un site web. Acesta v permite s site-uri de design vizual pe computer, aproape n acelai mod n care ar trebui s utilizai o wordprocessor cum ar fi Microsoft Word sau Office. Acesta combin uurina n utilizare, cu putere, fcndu-l un favorit (sau "favorit", dac utilizai englez SUA .), att n rndul webmasteri 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 o pagin de pornire, un formular de feedback, o pagin Despre noi i un Harta siteului. n procesul de creare a acestui site, v va nva cum s creai pagini cu mai multe coloane, adugai imagini i text, s creai link-uri, utilizeaz diferite marimi de font, personaliza culorile, adugai o bar de meniuri, s actualizeze paginile web de design pe mai multe ntr-un mai uor, etc Ca urmare, nu numai ca vei avea un site de lucru de la sfritul acestei serii, va avea, de asemenea, dobndit abilitile i cunotinele pentru a crea, de proiectare i public orice alt site web dorii.

Scopul acestui capitol

n acest capitol, v va crea o baz dou coloane pagina web si a pus-o pe Internet. Pn la sfritul capitolului, vei fi vizioneaz c pagina de web de pe Internet cu ajutorul browser-ul web. Important: acest tutorial a fost scris ca un tutorial hands-on. Pentru a beneficia de aceasta, sau chiar pentru a nelege aceasta, vei avea nevoie pentru a efectua, de fapt, 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 ar fi Dreamweaver. Dac suntei nou la crearea de site-ul web, v recomand cu trie c ai citit prima Cum sa faceti / Creare site-ul propriu: Ghidul incepatorului AZ , gsite la http://www.thesitewizard.com/gettingstarted/startwebsite.shtml n cel mai ru, vei avea nevoie de urmtoarele:

Dreamweaver

Deoarece acesta este un tutorial Dreamweaver, se subintelege ca vei avea nevoie de editor web menionate anterior n sine. Not: aceast serie tutorial presupune c utilizai versiunea de CS5 Dreamweaver. Dac utilizai o alt versiune, v rugm s mergei la seria de tutorial pentru c versiunea n schimb, cum ar fi fie Dreamweaver CS5.5 Tutorial , Dreamweaver CS4 Tutorial sau Dreamweaver Tutorial CS3 . Dei CS3, CS4 i CS5/CS5.5 versiunile de Dreamweaver au multe similitudini, exist unele diferene ntre ele (n special ntre CS5/5.5 i versiunile anterioare), aa c va avea un timp mai usor daca ai citit pur i simplu tutorialul n mod special scris pentru acea versiune. Cei care folosesc versiuni de Dreamweaver CS3 anterior, cum ar fi Dreamweaver 8, va trebui s facei upgrade la versiunea curent pentru a utiliza acest tutorial.Versiunile anterioare Lipsa anumite caracteristici utilizate n seria tutorial trei.

Un Gazduire Web cont

Vei fi introducerea site-ul dvs. pe Internet ncepnd cu acest capitol (da, de la capitolul unu). Pentru ca aceasta s funcioneze, avei nevoie de un web gazd. O gazda web este (vag vorbind) o companie care are computere care sunt conectate permanent la Internet. Dup ce ai terminat proiectarea paginile dvs. de web, vei avea nevoie de a le transfera pe computerul dvs. de web gazd (numit "server de web"), astfel nct s poat fi vzut de restul lumii. Exista multe gazde de web n jurul valorii. Dac nu avei deja unul, putei gsi o lista de gazde de web ieftine la http://www.thefreecountry.com/webhosting/budget1.shtml Reinei c am omis o serie de lucruri importante din lista de mai sus, deoarece putei gsi astfel de informaii de la incepatori AZ Ghidul menionate mai sus. Cele mai crucial, nainte de a ncepe, trebuie s v nregistrai propriul nume de domeniu pentru motivele prezentate n articolul meu pe Este posibil s se creeze un site 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 dea Dreamweaver cteva informaii de baz despre site-ul dumneavoastra. Acest lucru se 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 de pe computer va fi puin diferit de imaginea mea, n funcie de ct de mare este

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

Lng partea de sus a ferestrei, ar trebui s fie posibilitatea de a vedea o linie de text pe care scrie "Fiier Editare Vizualizare Inserare Modificare format Window site-ului Comenzi Ajutor". Aceasta este bara de meniu Dreamweaver, i fiecare cuvnt pe care bara de meniu este un element clickable care duce la alte meniuri. Vom folosi acest meniu larg n cursul acestui tutorial. Meniul v ofer acces la multe dintre facilitile Dreamweaver lui. 3. Facei clic pe cuvntul "Site-ul" pe bara de meniu. Un meniu drop-down va aprea. Facei clic pe "site nou ..." articol de pe acel meniu. Important: de acum nainte, n interesul de concizie, ne vom referi la o astfel de 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 apare un meniu, facei clic pe "Close" articol de pe ea. (Acesta este doar un exemplu, 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 de genul "Site-ul de instalare pentru site-ul Unnamed 2". Numrul real care urmeaz cuvintele "Site-ul fr nume" poate fi diferit n sistemul dvs., n funcie de dac ai folosit vreodat Dreamweaver pe computer nainte de a. n orice caz, 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" cu numele de site-ul dumneavoastr. Numele de site-ul dvs. poate fi orice nume dorii. Dac aicumprat propriul nume de domeniu , ntr-un fel este de a introduce acest domeniu n acest domeniu. De exemplu, dac avei nregistrat un domeniu numit "example.com", pur i simplu de tip "example.com" (fr ghilimele) n cmpul, nlocuind cuvintele "Site-ul Unnamed 2". Alternativ, dac suntei crearea unui site-ul companiei, avei posibilitatea s tastai numele

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 petreac prea mult timp a veni cu un nume perfect pentru a folosi aici. E acolo, n cazul n care creai multe site-uri diferite, folosind Dreamweaver i nevoie de o modalitate de a distinge ntre ele. De dragul de sanatatea ta, am recomandm s nu-l lsa ca "site-ului Untitled 2", dar dau un fel de nume informative i descriptiv. n caz contrar, n viitorul ndeprtat, dac i atunci cnd ai 100 de site-uri, vei fi smulgeti parul din cap ncercnd s dau seama ce nume care apartine site-ul web.
5. "Site-ul local Folder" cmp Dreamweaver spune n cazul n care ar trebui s

salvai o copie a fiierelor pe care le creai. Aceasta este o locaie de pe computerul personal. Pe sistemele Windows, dac aceasta este prima dat cnd l utilizai Dreamweaver, d un nume de folder implicit de "site-ului fr nume 2" undeva n folderul Documente. De exemplu, dac suntei utilizai Windows Vista sau Windows 7, s-ar putea obine un nume sugerat ca " C: \ Users \ christopherheng \ Documents \ site-ului fr nume 2 \ ". Pentru a schimba dosarul la unele alt locaie, facei clic pe pictograma de lng cmp, i selectai un folder diferit. Alternativ, dac nu te deranjeaz locaia implicit, dar pur si simplu nu-mi place "Site-ul Unnamed 2" poriune, pur i simplu 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, de exemplu, 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 n cretere doar ncercarea de a nelege ceea ce am scris, las totul la setarea implicit. n timp ce este bine sa ai un nume de folder descriptiv, astfel nct s avei posibilitatea s localizai cu uurin fiierele n viitor, e prea minor o chestiune care urmeaz s fie n valoare de obtinerea blocat de peste. 6. Cnd suntei satisfcut de modificri, facei clic pe butonul "Salvare" n partea de jos a "Site-ul Setup" caseta de dialog. Caseta de dialog va disprea, i vei fi returnate la fereastra principal Dreamweaver. Acum suntei gata pentru a proiecta 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 au toate lor coninut ntr-o singur coloan. Alii, cum ar fi paginile articol thesitewizard.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 a paginii conine thesitewizard.com e logo-ul (n partea de sus a paginii) i meniul de navigare sale. Coloana din dreapta deine textul articolului n sine. Site-uri poate,

desigur, au mai mult de 2 coloane: de exemplu, la momentul acesta a fost scris, am folosi un aspect coloana 3 pentru meu Harta site-ului . n sensul prezentului tutorial, v va fi crearea unei pagini web coloana 2. Formatul dou coloane este un aspect foarte popular printre webmasteri, deoarece este att eficient a spaiului i de familiare utilizatorilor de internet. Un aspect care este familiar pentru utilizatori tinde s fie perceput ca user-friendly, deoarece familiaritatea ei ce nseamn c utilizatorii vor ti cum s navigai n care un site web cu aspect. Este ntotdeauna important s se strduiasc s fac site-ul dvs. ca ghidul de mai prietenoase cu putin , astfel nct vizitatorii dvs. s tie de fapt, modul de utilizare a site-ului. 1. Facei clic pe "File | New ...". Dac v amintii ceea ce am menionat mai devreme, 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 lateral stnga, antet i subsol" (a se vedea imaginea de mai sus). Facei clic o dat pe acea linie. 3. Pe partea dreapta a ferestrei, cutai pentru cmpul etichetat "Layout CSS" (a se vedea imaginea de mai sus). Facei clic pe sgeata vertical n caseta de lng faptul c eticheta i selectai "Creare fiier nou". Acest lucru face ca Dreamweaver pentru a salva informaiile de control aspectul site-ul dvs. (numite "CSS"), ntr-un dosar separat. Din moment ce toate paginile de pe site-ul dvs. vor mprti un aspect comun, introducerea toate informaiile despre structura ntr-un singur fiier evit duplicarea inutil a informaiilor, economisind spatiu pe disc i de lime de band, iar accelerarea

de ncrcare a paginilor web n cazul n care utilizatorii dvs. vizit mai multor pagini 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 cum apare ntr-un browser web real este indicat pe partea dreapta. Aceast poriune plcut vizual este numit "Design" modul n Dreamweaver. n partea stng prezinta stau la baza "prime" cod pentru site-ul tau. Acest partea stanga este numit "Codul" modul n Dreamweaver, i codul se prezinta este numit HTML . Dac nu vedei acest lucru "Split" modul, dar a se vedea numai versiunea vizual plcut de site-ul dvs. ("Design" modul), sau doar textul aparent psreasc din "Codul" modul, nu v facei griji. Suntem pe cale de a standardiza modul de afiare pentru toat lumea. Indiferent de ceea ce vedei pe ecran, fie c este vorba "Split" modul l-am descris mai devreme sau un alt mod, facei clic pe "View | Design" din meniu. Textul criptic din "Codul" split screen mode ar trebui s dispar, iar intreaga fereastra ar trebui s fie umplut cu pagina ta web, aa cum apare ntr-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 acest tutorial, precum i capturi de ecran presupune cazul n care se lucreaz n modul de proiectare. Dac nu a comuta la modul de proiectare, s-ar putea obine confuz Dreamweaver mai trziu, cnd nu se comport aa cum descriu. Not: dac, n viitor, atunci cnd ai terminat acest tutorial serie, i dorii s restaurai "Split" modul, facei clic pe "View | Codul i Design" din meniu. Aspectul ecranului se va reveni automat la ceea ce ai vzut mai devreme. Deci nu v temei. Avei posibilitatea s restabilii cu uurin totul napoi la starea iniial. Dar pentru acum, v rugm a comuta la modul de proiectare.

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

nainte de a continua pentru a nlocui textul implicit de pe pagina dvs. cu coninut real pagina web, este important s nelegem principiile de baz spatele a ceea ce veti face. 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

pe care vizitatorii dvs. ajunge la n cazul n care pur i simplu tastai numele de domeniu al site-ului. De exemplu, dac tastai "thesitewizard.com" n browser, vei ajunge la pagina mea de acas. n ceea ce privete funcia, pagina de pornire a unui site web este similar cu o combinaie de coperta unei reviste i pagina de coninutul su. Ca i coperta unei reviste, pagina dvs. de pornire ar trebui s ofere vizitatorilor o idee de fel de lucruri care 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-ul dvs., 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 vinde produse i servicii, poate dorii pagina de start s menionezi produsele cele mai importante i de servicii, precum i legtur ntr-pagini individuale Descrierea produsului n cazul n care vizitatorii pot afla mai multe informaii i plasai o comand. Chiar daca esti doar a crea un site personal, un site web sau hobby, ar trebui s ncercai nc pentru a oferi vizitatorilor dvs. o idee de fel de lucruri pe care le 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 pentru

tine. Pagina web este n prezent, umplut cu un text substituent pe care le va inlocui cu propriul coninut. n cazul n care textul implicit arat ca suspect de instruciuni scrise n jargonul tehnic, ci din cauza ca este ntr-adevr o grmad de instruciuni tehnice.Dar nu trebuie deranjez ncercarea de a descifra. Pri care sunt relevante pentru tine vor fi traduse n limba englez n acest neteda CS5 Dreamweaver serie tutorial . Vertical, pagina este mprit n 2 coloane. Coloana din stnga conine nceputurile unui meniu de navigare, ceva asemntor cu ceea ce vedei pe thesitewizard.com. Coloana din dreapta este n cazul n care cea mai mare parte a coninutului real ar trebui s mearg, i vei fi n locul textul substituent existent mai trziu n acest capitol. n prezent, care conine titlul mari de imprimare, "Instruciuni", precum i punctele de text intercalate cu mici subrubrici. La foarte de sus a paginii este un mic rectange etichetat "Insert_logo (20% x 90)". Chiar dac aceasta nu poate fi evident, acest dreptunghi este de fapt edinei n colul de o band orizontal de tiere n ambele coloane ale paginii web. Intreaga trupa de top orizontal este destinat pentru logo-ul, i vei fi de lucru pe aceasta n capitolul 2 al acestui tutorial. Defilai la partea de jos a paginii. Putei face acest lucru fie prin apsarea PgDn taste pe tastatur sau prin glisarea bara de defilare din partea dreapt a paginii web cu mouse-ul. Observai c exist o alt band orizontal

se ntinde pe limea de pagina ta web n partea de jos. Aceasta este subsol. Vei fi personalizarea textului acestei subsol mai trziu n acest capitol. 2. Direct de mai sus pagina dvs. Web, n partea din fereastra care apartine programului Dreamweaver, mai degrab dect pagina dvs., cutai cuvntul "Titlul" urmat de un cmp care conine n prezent, "Untitled Document" (a se vedea 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 elimina textul existent.nlocuii-l cu numele de site-ul dumneavoastr. De exemplu, dac site-ul dvs. este numit "Compania XYZ", de tip "XYZ Company" n acest domeniu. Acest "titlu" cmp este un cmp intern pe pagina ta web. Ea nu se afieaz n organism (partea vizibil) a paginii web. Se arat numai n bara de titlu a ferestrei browser-ul n sine. Dac nu suntei sigur ce vorbesc despre, uita-te la partea de sus a ferestrei browserului acum. (Da, n acest moment.) Nu utilizai bara de defilare i nu mergei la partea de sus a acestei pagini n nici un fel. Doar privirea n sus pn la marginea de sus a browser-ului tu. Ar trebui s fie n msur pentru a vedea cuvintele "Dreamweaver CS5 Tutorial: Cum s Proiectarea unui site cu Dreamweaver CS5 (thesitewizard.com)", sau cel puin prima parte a acesteia, n cadrul de sus a ferestrei browserului. Am pus aceste cuvinte n cmpul de titlu a acestei pagini web special atunci cnd l-am creat. Dei "Titlu" cmp este doar un cmp intern, aceasta este o parte importanta a unei pagini web. Motoarele de cutare utilizeaz Coninutul acestui cmp pentru a lista site-ul dvs. n rezultatele motorului de cutare. Dac lsai titlul dvs. setat la "Untitled Document", pagina web va aprea n rezultatele motorului de cutare ca "Untitled Document", mai degrab dect "Compania XYZ", sau ce nume ai dat site-ul dumneavoastr.
3. Acum, c ai terminat n locul cmpul de titlu, putei ncepe s lucrai cu privire

la coninutul principal al paginii web. Tastarea textului ntr-o fereastr Dreamweaver este similar cu tastarea in orice wordprocessor . Dac ai

utilizat vreodat Microsoft Word sau orice alt procesor de text, procesul este acelai. 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 la site-ul lui Shakespeare". Pentru a face acest lucru, facei clic pe cursorul mouse-ului undeva n cuvntul "Instruciuni" pentru a plasa cursorul text de pe pagina. Apoi putei folosi tastele sgei pentru a muta cursorul n jurul valorii de, tastele Delete i Backspace pentru a elimina text existent, precum i toate celelalte personaje de pe tastatur pentru a insera text. Dup aceea, muta cursorul la alineatele si sub-rubricile de mai jos (folosind tastele sgeat de pe tastatur sau fcnd clic pe mouse-ul la faa locului pe care dorii s schimbai) i s le nlocuii cu coninutul pe care dorii pe pagina dvs. de pornire. inei cont de lucrurile pe care le-am menionat despre ce pagina dvs. de pornire ar trebui s includ n seciunea de mai sus. Daca esti la o pierdere totala a ceea ce sa scrie, aruncm o privire la blocul eantion de text de mai jos care aparine unei companii fictive i de a folosi c, n calitate de model. Evident, nu vei putea s-l utilizai literal (deoarece compania ta este puin probabil s vnd aceleai lucruri), dar poate fi adaptat pentru a se potrivi propria afacere. Dac suntei confrunt cu bloc scriitorului, muli oameni consider c este util s tastai doar ceva, chiar dac sun extrem de lumesc. Odat ce ai ceva jos, poti sa te duci mereu napoi i rafina-l ca pe zi ce 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

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 de legturi, inserarea imaginilor, ceea ce face filmul, i lucruri de genul asta. Pentru moment, se concentreze doar pe obtinerea cuvintele tale jos. Lustruire pagina dvs. pentru a face sa arate mai frumos va fi predate n urmtoarele cteva capitole. 4. Nu schimba nimic n coloana din stnga i a ignora faptul c coloanele din stnga i dreapta au nlimi inegale. Coloana din stnga vor fi tratate n capitolul cu propriile sale, deoarece se bazeaz pe tine avnd cunotine suplimentare nainte de a putea lucra pe el. 5. Cnd ai terminat cu coninutul dvs., defilai n jos ctre partea de jos a paginii pentru a bara orizontal din partea de jos, care solicit Dreamweaver subsol. Misca mouse-ul peste oricare dintre cuvintele din subsol i facei clic pe acesta o dat pentru a plasa cursorul de text acolo. nlocuii textul existent cu orice doriti. Muli webmasteri plasa o notificare drepturilor de autor n aceast seciune. Un privind drepturile de autor este pur i simplu o propoziie ca "Drepturi de autor 2010 de ctre Christopher Heng". Simbolul drepturilor de autor , , poate fi inserat fcnd clic pe butonul "Inserare | HTML | Caractere speciale | Drepturi de autor" din meniu.Pentru mai multe informaii despre drepturile de autor, v rugm s citii articolul problemele de copyright relevante pentru webmasteri , la http://www.thesitewizard.com/general/copyright-issues.shtml 6. Odat ce suntei mulumit de modificrile pe care le-ai fcut (pn acum), cu excepia pagin fcnd clic pe "File | Save As ..." din meniu. O caset de dialog, 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 de dumneavoastr. Asigurai-v c l-ai tip exact asa cum am menionat, integral cu litere mici (minuscule), cu spaii n cuvntul. Nu utilizai nici un alt nume. Numele "index.html" este greit , cum este numele "index.html". Folosii numai "index.html". Informaii suplimentare : denumirea "index.html" este un nume special care este recunoscut de cele mai multe servere de web . n cazul n care este publicat la locaia dreapta, acesta va fi trimis la vizitatorii dvs. n cazul n care pur i simplu tastai numele dvs. de domeniu (de exemplu, "http://www.example.com/") n browser-ul lor. Acesta este comportamentul pe care l dorii, deoarece suntei proiectarea pagina de start.

Cum se public / Incarcati pagina Web cu Dreamweaver CS5

Acum suntei de gnd s publicai pagina dvs. pentru a host-ul dumneavoastra. Adic, suntei pe cale de a transfera pagina web i fiierele asociate acesteia la computerul dvs. de web gazd, astfel nct s poate fi vizualizat pe Internet. tiu c unii dintre voi sunt, probabil, filat napoi n groaz la gndul, deoarece pagina este departe de a fi terminat. Dar nu exist ntr-adevr niciun motiv de ngrijorare aici.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 pagina dvs. de web este neterminat tine. Dup cum vei descoperi n timp, nu este att de uor pentru a obine vizitatori. Principalul motiv pentru care suntem publishing pagina dvs. n acest moment este acela de a v permite s v familiarizai cu toate etapele majore ale designului de o pagina web: care este, crearea unei pagini web implic nu numai crafting pagina, dar implic, de asemenea obtinerea de pagina de pe computer pe computerul dvs. de web gazd.Dup ce obine acest obstacol din calea, vei avea stapanesc ceea ce este una dintre cele mai mari provocri tehnice, un nou venit este probabil s se confrunte. 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-un browser web atunci cnd pagina dvs. este pe internet. Chiar dac putei testa intotdeauna 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, dup fiecare etap v permite pentru a prinde aceste erori devreme. n caz contrar, n cazul n care greselile se acumuleaza, aceasta poate deveni dificil pentru voi (ca un nceptor), 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. Voi presupune c ai fcut acest lucru n capitolele viitoare, i v pot considera c este dificil 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-ul de instalare pentru [numele site-ul dvs.]" n cazul n care "[numele site-ului]" va fi nlocuit cu orice nume le-ai introdus cnd ai configurat prima site-ul tu . Coninutul din caseta de dialog ar trebui s fie, de asemenea, familiar de la configurarea iniial. 3. Uit-te la coloana din stnga a casetei de dialog. "Site-ul" linia ar trebui s fie selectat n mod curent. Facei clic pe "Server" linii pentru ao selecta. Cnd procedai astfel, coninutul de partea dreapt a casetei de dialog se va schimba.

4. Pe coloana din dreapta a casetei de dialog, cutai un "+" (semnul plus). Ar trebui s fie chiar sub caseta list goal n mijlocul acelei coloane. Facei clic pe 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 "de baz" tab. 6. Introducei orice dorii n "Server Name". Acest cmp este doar pentru propriile informaii, aa c nu conteaz cu adevrat ceea ce le introducei aici. Un mod simplu este de a introduce ceva de genul "server example.com 's". Numele pe care 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 ceva altceva. 7. n acest moment, vei avea nevoie de informaiile pe care gazda dvs. Web pe care le amenajate atunci cnd v-ai nscris pentru un cont de gazduire web. Gazde web trimite, de obicei, o list lung de detalii despre contul dvs. atunci cnd v nscriei prima dat. Printre acestea este ceva cunoscut sub numele dumneavoastr "adres FTP" (denumit uneori "numele gazdei FTP" sau "FTP server" de ctre gazde web). FTP vine de la "File Transfer Protocol". Aceasta este metoda obinuit prin care transferul pagina dvs. de web de la computer la computer gazd dvs. de web. Acest act de transfer al fiierelor din sistemul dvs. pentru a gzdui sistemul dvs. de web este cunoscut sub 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 n alt fereastr, astfel nct pot tiat pur i simplu i s lipii informaiile din aceast fereastr n Dreamweaver, evitndu-se astfel erorile de tastare. Cu toate 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 cmpul pentru "adres FTP". Dac avei propriul nume de domeniu, si tu esti gazduit pe un host web comercial , aceast adres este de obicei un nume de domeniu cu prefixul "ftp". De exemplu, dac numele dumneavoastr de domeniu este " example.com ", de multe gazde de web va configura adresa ta de FTP pentru a fi" ftp.example.com ". Verificai e-mailul primit de la dvs. de web gazd pentru aceast informaie, sau s le cerei n cazul n care nu putei 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-l aici Ea trebuie s fie ceea ce dvs. de web gazd a furnizat pentru tine.. Ca nu toate gazdele web utilizeaz " ftp.example.com "form. Unii cer doar s introducei numele dvs. de domeniu (" example.com "), n timp ce altele furniza un nume complet independeni de numele dvs. de domeniu. Dac nu suntei

sigur ce adres FTP pentru site-ul dvs. este, adresai-v gazda dvs. Web presupuneri este inutil..) 8. Lsai cmpul portul stabilit la implicit de "21", cu excepia cazului n gazd de web a instruit s utilizai o adres alt port. n cazul n care gazda dvs. Web nu au 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 fiecare dat cnd publicai o pagin, lsai caseta de selectare de lng "Save" activat (o capusa pe care apare automat n caseta atunci cnd tastai parola). Dac partajai computerul cu alte persoane, i nu doresc Dreamweaver pentru a salva parola, facei clic pe caseta care conine capusa la debifai-l. Reinei c voi presupune c ai prsit caseta verificate n acest tutorial, deoarece asta este ceea ce majoritatea thesitewizard.com 's cititori Dreamweaver face. 10. Pentru a v asigura c ai introdus numele de utilizator, parola i adresa FTP corect, facei clic pe "Test" butonul de sub cmpul parolei. Dac suntei de succes, vei primi un mesaj care spune "Dreamweaver conectat la serverul Web cu succes". Facei clic pe butonul "OK" pentru a-l concedieze. Not: Dac utilizai Windows Vista, Windows Firewall poate emite un mesaj ntrebndu-v dac a bloca sau debloca conexiunea. Asigurai-v c facei clic pe "Unblock" buton, sau vei fi blocarea conexiunilor FTP pentru Dreamweaver. n mod implicit, conexiunile FTP sunt dou sensuri, care necesit 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 in panica atunci cnd primii acest mesaj de la Vista. Interferen de firewall-ul poate provoca, de asemenea, primul test n Dreamweaver s eueze, ceea ce duce Dreamweaver s emit o caset de dialog care v spune s utilizai conexiuni 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 mesaj de 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 triunghiul de lng "Mai multe opiuni". Putei gsi cuvintele "Mai multe opiuni", chiar deasupra "Ajutor", "Save" si "Cancel" butoanele din partea de jos a casetei de dialog. Mai multe seciunea Opiuni vor fi extinse, dezvluind o seciune unde putei configura n continuare setrile FTP. Facei clic pe "Utilizare pasiva FTP" 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

tastate corect, nu de tip manual, dar copiai i lipii-le de la informaiile furnizate de ctre host-ul dumneavoastra. Dac, avnd fcut asta, v mai gsii c nu v putei conecta, uita-te la cmpul adres FTP. Nu-l conin numele dvs. de domeniu sau unele modificri 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 cumprat numele dvs. de domeniu n ultimii 2 de zile, este posibil ca numele dvs. de domeniu 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 o perioada de timp (de obicei, aproximativ 2 zile) nainte de a fi recunoscute n ntreaga lume.. ntr-o astfel de caz, singurul recurs este sa asteptati o zi sau cam asa ceva din nou, nainte de testare. Nu e nimic oricine poate face pentru a face acest lucru mai rapid. Puteti cere, de asemenea, gazda dvs. Web pentru a v ajuta verificarea setrile dumneavoastr (n cazul n care ai de fapt adresa ta de FTP, numele de utilizator sau parola gresita). Dar amintii-v c, dac problema se afl cu un nume de domeniu nou, care nu sa propagat, trebuie doar sa fie rabdator si asteapta. Nu e nimic gazda dvs. Web poate face pentru a v ajuta ntr-un astfel 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 publicai pagina dvs. de Web pentru orice folder dorii de pe serverul de web , i se ateapt ca acesta s apar pe internet. Web gzduiete, de obicei, configurai computerele lor, astfel nct fiierele plasate doar n foldere specifice sunt considerate ca fcnd parte din site-ul tau. Acest lucru este necesar, altfel oricine de pe Internet poate citi fiierele private, cum ar fi adresa 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-. Unele gazde 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 alii s v spun pentru a plasa fiiere ntr-un folder denumit dup numele de domeniu. i acolo sunt, de asemenea, gazde care spun c putei ncrca sau pur i simplu publica fiierele n directorul implicit care le vedei cnd v conectai prin FTP. Ca i dumneavoastr "adres FTP", acest lucru nu este ceva ce poi ghici aleatoriu. Dac nu avei deja de informaii, afla cerndu-gazd dvs. de web. Odat ce avei informaiile, introducei numele folderului n "directorul rdcin" cmp. De exemplu, n cazul n care gazda dvs. Web v spune s publicai fiierele ntr-o "www" directorul, introducei "www" n acest

domeniu. n cazul n care v spun s utilizai doar directorul implicit atunci cnd v conectai, lsai acest cmp necompletat. (Un ultim lucru: s reinei c n cazul n care cele mai multe gazde de web n cauz sunt "www" i "WWW" sunt dou cuvinte diferite. Sfat: pentru cei care nu pot detecta diferena dintre ele, uita-te la capitalizarea al cuvntului Cu alte cuvinte. , 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 setrile FTP. 13. Vei fi returnate la "Site-ul Setup" caseta de dialog. Observai c intrarea este acum listat n caseta list pe acea pagin. n cazul n care ai nevoie pentru a face modificri la setrile dvs., facei clic pe pictograma creion din partea de jos a casetei de list. Pictograma creion poate fi gsit direct dup "+" i "-" pictograme. Pentru moment, facei clic pe "Salvare" buton de pe aceast fereastr. Dreamweaver poate emite o caset de dialog cu mesajul "cache-ul va fi recreat acum, deoarece setrile numele, folderul rdcin, adresa HTTP, sau deghizare a site-ului au fost schimbate." Facei clic pe "OK". Vei fi returnate la "Manage Sites" caseta de dialog. Facei clic pe "Done" buton. 14. Odat ce ai terminat de configurat Dreamweaver pentru site-ul dvs., este momentul 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 suplimentare care pagina web are nevoie de dvs., astfel nct acesta este afiat corect ntrun browser web. Nu luai prea mult timp s facei clic pe "Da" sau Dreamweaver va selecta automat "Nu" pentru tine, care nu este ceea ce dorii. Trebuie s facei clic pe butonul "Da" sau pe pagina de web nu va arata la fel in browser-ul dumneavoastra . (Dac ai ateptat prea mult, i au constatat c Dreamweaver a respins n mod automat caseta de dialog pentru voi, facei clic pe "site-ului | Pune" peste tot din nou De data aceasta, asigurai-v c facei clic pe butonul "Da" atunci cnd apare caseta de dialog. .) Dreamweaver va emite apoi o caset de dialog care v informeaz despre evoluia acesteia. Caseta de dialog va disprea automat atunci cnd a finalizat ncrcarea pagina ta web.

Testarea pagina Web

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

va arata, nu este de fapt un browser web, ci un editor web . Ca atare, exist unele lucruri 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") n browser. De exemplu, tastai " http://www.example.com/ ", n cazul n care este adresa 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 care proiectate, sau vei obine dumneavoastr pagina de web gazd implicit preinstalate , este posibil s fi introdus greit numele folderului n "directorul rdcin" cmpul am mentionat 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 n caseta de list pe partea dreapta pentru a selecta, facei clic pe pictograma creion n caseta list. Avei posibilitatea s modificai, apoi director rdcin n locaia corect. Cnd ai terminat, asigurai-v c facei clic pe "Salvare" buton pe care ambele caseta de dialog, precum i "Site-ul Setp" caseta de dialog, n cele din urm i facei clic pe "Done" buton "Manage Sites" fereastr. Daca primiti un "nr DNS pentru www.example.com" (sau oricare ar fi numele dvs. de domeniu este) sau "Domeniul nu a fost gsit" de eroare, este posibil s fii cu care se confrunt problema de propagare domeniu am menionat mai devreme (n cazul n care un domeniu este att de nou, care se nu este nc recunoscut nc de internet n band larg sau de furnizorul de dial-up). O alt posibilitate este c suntei folosind un 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 mod automat 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 mai devreme, felicitri! Ai creat i publicat pagina de web folosind Dreamweaver CS5 primul.Acesta poate fi o pagin de prime i neterminate (pentru moment), dar v-ai plimbat 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 adugai imagini 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/ .

Cum s adaugi poze i un Site Logo pentru site-ul dvs. Utilizarea Dreamweaver CS5
de Christopher Heng, thesitewizard.com Una din cele mai multe operatii comune care fiecare web designer nu este de a insera imagini sau imagini ntr-o pagin web. Ca un webmaster, chiar dac nu intenionai site-ul dvs. pentru a fi covor cu grafica, va trebui n continuare s adugai cel puin o imagine n site-ul dvs.: logo-ul site-ului dvs.. Acest capitol v arat 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 web Dreamweaver, poate dorii s ncep de la primul capitol al acestui Tutorial Dreamweaverserie. 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 de coninutul 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 site web este vorba, putei gsi articol Cum la Start / Creare site-ul propriu: Ghidul nceptorului 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 personale sau 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-ul pentru thesitewizard.com pot fi gsite la colul din stnga sus a paginilor sale. Din moment ce va fi adugarea de un logo pentru site-ul dvs. n acest capitol, va trebui s aib o imagine unica de a servi ca logo-ul, dac suntei pentru a finaliza acest capitol. Cei care sunt crearea unui site pentru o companie care are deja un logo poate folosi pur i simplu o copie digital de faptul c logo-ul pentru site-ul. Copie digital 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 n jurul valorii de imagini, de la cele celebre comercial ca Adobe Photoshop la

cele gratuite cum ar fi cele listate laFree Image Editori i poz pagina. Dac nu 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 acea imagine. Din nou, de ieire scanat sau fotografie digital trebuie s fie n PNG JPG, 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-ul tau. Eu nu recomandm s utilizai oricare dintre imagini gratuite gsii n jurul valorii de Internet, chiar dac titularul dreptului de autor de care imaginea spune c l putei folosi royalty-free pe site-ul tu. Logo-urile sunt ca un simbol de brand pentru site-ul dvs., astfel nct vei dori s fie unic pentru site-ul tu. Pentru a crea logo-ul propriu, fie direct, le creai pe computer sau le desena pe o bucat de hrtie i scanai-l.Pentru cei care nu au creat un logo nainte, i nu sunt sigur cum s merg despre asta, aruncai o privire la articolul Cum s creeze un logo pentru site-ul dvs. rapid i uor gsite la http://www.thesitewizard.com / webdesign / face-site-logo-banner.shtml Indiferent de modul n care obinei logo-ul, fie prin tragere-le tu insuti sau prin scanarea logo-ul din antetul dumneavoastr, vei dori, probabil, pentru a redimensiona logo-ul dvs. pentru a se potrivi pagina dvs. de web. Deoarece ablonul de pagin web pe care le utilizai de la capitolul 1 v d ntreaga lime 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, pe care l-am creat, astfel nct ar putea stoarce ntr-un col. Ce este o lime bun pentru logo-ul, atunci? Nu exist reguli greu i rapid. Vom fi (optional) de centrare ("centrare", n englez SUA ) logo-ul de pe pagina, deci nu v facei griji cu privire la acest site este potrivi perfect ntre marginile din stnga i dreapta. Nu exist nici o modalitate de a obtine o potrivire culoare, oricum, deoarece limea paginii dvs. va varia n funcie de ct 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 pe pagina. De exemplu, logo-ul Google implicit este de fapt destul de ngust, nu n mod substanial mai larg dect s thesitewizard.com ", dar nc arat bine pe pagina 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 100 pixeli nlime) i locul de munc de acolo. n cazul n care nu arata bine, poti sa te duci mereu napoi mai trziu i redimensiona imaginea dvs. n editorul de 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 fi afiate pe site-ul dvs., cum ar fi imagini de produs, fotografii de tine, fotografii de peisaje sau chiar desene pentru a nfrumusea site-ul tau. Dac da, a lua pe ei gata nainte de a ncepe acest tutorial.

Dac suntei de vnzare un produs digital care poate fi descrcat de pe site-ul dvs., 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 scopuri de afiare oricum. Avand o imagine de pe site-ul dvs. de produsul dvs. ntr-un fel face ca produsul sa para mai tangibile n mintea cititorilor mult dect vorbesc despre asta.

De exemplu, dac vindei programe de calculator, putei desena o imagine de o cutie de software pentru a fi afiate pe site-ul dvs., fie folosind un program de desen cum ar fi cele am menionat mai sus, sau cu o cutie de software 3D de specialitate de desen. Versiuni gratuite ale software-ului pot fi gsite pe 3D Free Software Caseta Image Makerspagina. De asemenea, dac suntei de vnzare sau de departe oferind o carte electronic (sau "ebook") , este posibil s dorii s creai o imagine a crii dvs.. Nu exista nici o decizie fr s acopere ebook c tiu de, aa c va trebui fie s utilizai un program comercial ca Shot Box 3D sau manual o remiz cu ajutorul unui editor grafic . De exemplu, imaginea mea de aici Cum sa faci / Crearea unui Website: incepatori AZ Ghidul a fost creat folosind BoxShot3D .Software-ul poate crea, de asemenea, lucruri cum ar fi Dulapuri cu CD / plicuri (dac suntei de vnzare muzica ta), Dulapuri cu software-ul, sticle, pungi de hrtie, bidoane, etc Not: nu exist o astfel de carte fizic, aa nct v rugm s nu-mi e-mail s ntreb de unde putei cumpra de folosire.Dac dorii s-l citesc, ghidul de complet este disponibil on-line (i-l putei citi n mod gratuit; nu este nevoie sa cumperi nimic) la http://www.thesitewizard.com/gettingstarted/startwebsite.shtml

Cum de a aduga un logo pentru site-ul dvs. Dreamweaver CS5 1. Creai un folder pentru imaginile dvs. n folderul dvs. site-ul local
Pornire Dreamweaver CS5 , dac nu l-au ruleaz deja. Vei avea nevoie acum pentru a crea un folder pentru a stoca imaginile pe care dorii s le utilizai pe site-ul tau. Da, eu stiu ca deja ai imaginile stocate ntr-un alt folder de pe computer. Cu toate acestea, n scopul de a utiliza aceste imagini pe site-ul dvs., va trebui s copiai acele imagini n ierarhia de

dosare care conine restul de fiiere site-ul dvs., sau Dreamweaver nu le va recunoate sau a le publica pe site-ul tau. De exemplu, n cazul n care dosarul 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 acel dosar, sau un subfolder cum ar fi "c: \ Utilizatori \ Chris \ mywebsite \ imagini ". n sensul prezentului tutorial, vom crea o "imagini" subfolder. (Not: acest lucru este valabil indiferent dac executai Windows sau Mac OS X.) Uit-te la panourile din coloana cea mai din dreapta in Dreamweaver. Ar trebui s fie n msur s faa locului "Files" la jumtatea distanei fila jos a ferestrei. (Ar trebui s fie lng o fil etichetat "ACCESS".) Sub fila Fiiere, ar trebui 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 de FILES. Facei clic dreapta pe mouse-ul: faptul c este, facei clic pe butonul din dreapta pe mouse-ul. Un meniu ar trebui s apar. Facei clic pe "New Folder", element din acel meniu. Dreamweaver va crea un folder nou, numit temporar "untitled", n conformitate cu dvs. dou fiiere. "Untitled", ar trebui s fie n prezent evideniat, permindu-v s i schimbe numele. nlocuii numele existent cu "imagini", fr ghilimele i n ntregime cu litere mici (mici), i apsai tasta ENTER (sau tasta de returnare dac utilizai un Mac). Numele folderului 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 pe care tocmai l-ai creat. Procedura exact pentru acest variaz de la sistem la sistem. De exemplu, dac utilizai Windows, ncercai acest lucru. Facei clic dreapta pe folderul imagini n Dreamweaver. Un meniu va aparea. Facei clic pe "Explore ..."element n acest meniu. O fereastra se va deschide, care v arat coninutul acelui folder. Pentru moment, e gol, deoarece nu ai copiat nimic acolo nc. Acum facei clic pe meniul Start din Windows i "Computer" element (pentru Windows Vista i Windows 7; se numeste "My Computer" n Windows 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 care v pstrai imaginile. Selecteaz toate imaginile pe care dorii s le utilizai pe site-ul tau. Facei clic dreapta pe selecie, care, i alegei "Copy" din meniul care apare. Comuta la cealalt fereastr (cel pe care le deschis din Dreamweaver). Facei clic dreapta pe spaiul liber n acea fereastr i facei clic pe "Paste" din meniul care apare. Imagini pe care le anterior selectate vor fi copiate n folderul site-ul dvs. locale imaginile. Putei nchide acum aceste dou ferestre. Nu nchide n sine Dreamweaver. Avei n continuare nevoie de ea.

3.

Deschide pagina web

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

4.

tergei substituent Logo existente

Click dreapta pe "Insert_logo (20% x 90)" cutie dreptunghiular. Un meniu va aparea. Facei clic pe "Remove Tag <img>" element n acest meniu. Bloc dreptunghiular vor fi terse, dvs. i bara de sus antet orizontal se va prbui pentru a deveni o fie ngust n partea de sus. Daca priviti cu atentie, ar trebui s vedei, de asemenea, cursorul text clipitor de la marginea din stnga a acestei bar. Nu te misca cursorul de text. Nu facei clic oriunde n pagina dvs. web. Doar mergei 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 s apar. Undeva in mijlocul acelei ferestre, ar trebui s fie posibilitatea de a vedea dou dosare: "un _notes" folder i o "imagini" dosar. (Nu v ngrijorai dac nu vedei "_notes" folderul Este irelevant pentru scopurile noastre..) "Imagini" dosar este acelasi pe care l-ai creat mai devreme n acest capitol. DoubleClick acel folder (care este, mutai mouse-ul peste "imagini" cuvntul, i facei clic pe ea de dou ori n succesiune rapid), pentru ao deschide. Dreamweaver va afia, acum, toate imaginile din folderul pe care l-ai copiat mai devreme. Selectai imaginea pe care dorii s utilizai pentru logo-ul. Dac ai copiat anterior o multime de poze n acest dosar, i nu sunt sigur ce fiier conine imaginea pe care, se poate vedea o examinare a fiecrei imagini din "Image preview", spaiul de pe partea dreapt a casetei de dialog. Pur i simplu facei clic o dat pe fiecare filename pentru ao selecta, si Dreamweaver v va arta o previzualizare a imaginii, care n acel spaiu. Odat ce suntei mulumit de faptul c ai selectat corect de fiier pentru logo-ul, facei clic pe butonul "OK".

O caset de dialog intitulat "Tag Atributele Accesibilitate Image" va aprea. Introducei "[numele site-ului] e logo-ul" (n cazul n care "[numele siteul dvs.]" este numele site-ul dvs.) n "text alternativ" cmp. "Text alternativ" (de multe ori abreviat ca "alt text" de webmasteri) cmp este o scurt descriere a ceea ce conine imagini. Acesta este afiat de un browser web n cazul n care vizitatorul dezactiveaz ncrcarea toate elementele grafice n browser. De asemenea, este citit cu voce tare de ctre cititorii de ecran (folosit de ctre nevztori), i indexat de motoarele de cutare ca descrierea pentru acea imagine. Dei acest domeniu Text alternativ este opional, trebuie s completai ntotdeauna s fac site-ul dvs. accesibil nevztorilor . 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 a paginii web. Dac aceasta este prima ncercare, exist o ans, chiar c este "pentru mai ru", deoarece nu va trebui experientele anterioare pentru a v ghida. n cazul n care logo-ul este prea mare sau prea urt i vrei s scapi de el i ncepe peste tot din nou, facei clic dreapta pe logo-ul i facei clic pe "Remove Tag <img>" element. Not: dac utilizai Dreamweaver pentru a redimensiona imaginea ta n loc de un grup specializat n editor grafic , asigurai-v c facei clic dreapta pe imagine i selecteaz "Optimizarea ..." din meniul dup ce ai terminat redimensionare. Dreamweaver va face apoi dimensiunea schimbrilor permanente i a salva imaginea redimensionata peste fiierul existent. Personal, prefer s folosesc un editor de imagine buna chiar si atunci cand face lucruri cum ar fi imagini redimensionare.Editoarele de imagini tind pentru a v oferi mai mult control asupra imaginilor, dup toate, imaginile sunt lor 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 ezitai s 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 Properties Panel (imaginea de mai jos).

Uita-te pentru cmpul etichetat "W". Aceast rubric d dimensiunea real a limii imaginii. De exemplu, n cazul n care "W", spune cmpul "450", nseamn c imaginea este de 450 pixeli lime. Notai aceast valoare undeva (de exemplu, fie c memorarea sau bileel-l jos pe o bucat de hrtie). Vei avea nevoie de ea n scurt timp. Uita-te pentru "CSS STILURI" tab-ul in partea dreapta a ferestrei Dreamweaver. Ar trebui s fie o anumit distan de mai sus "FILES", panoul pe care ai folosit mai devreme pentru a crea folderul imagini. Ar trebui s existe 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 direct sub "stiluri CSS", aceasta nseamn c CSS STILURI fila nu a fost extins. DoubleClick CSS fila STILURI pentru ao extinde. Ar trebui s vedei acum "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 prbuit panoul, 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 faa locului un iconie cteva mici. Aceste butoane sunt de fapt face clic. Atunci cnd trecei cu mouse-ul peste una dintre aceste icoane, o fereastr va aprea vrful instrument de a v spune, n scopul de fiecare buton. ncercai s vedei ce vreau s spun, dar nu facei clic pe oricare buton n acest moment. Gsii pe pictograma care are o fereastr vrful instrument care spune: "New CSS Rule". Dac nu poate fi deranjat s trecei cu mouse-ul peste fiecare buton pentru a gsi, uita doar la imaginea de mai jos pentru a vedea despre ce vorbesc despre.

Facei clic pe pictograma care are "New articolul CSS" tooltip (pictograma care este incercuit in imaginea de mai sus). O caset de dialog cu un cmp titlu "New CSS articolul" va aprea. Cmpul Tip Selector este o caset drop-down care conin, probabil, o valoare implicit a "compus (n baza seleciei dumneavoastr)". Facei clic pe sgeata n jos din dreapta a casetei drop-down i selectai "Class (se poate aplica la orice element HTML)" linia. Cmpul Nume Selector de acum ar trebui s fie gol. Facei clic pe cmp pentru a plasa cursorul de text acolo, i de tip "logo-ul", fr ghilimele, i n ntregime cu litere mici (minuscule). Sub acest domeniu, un comentariu explicativ, "Acest nume selectorul se va aplica regula de la toate elementele HTML 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 n twoColLiqLtHdr.css.", Ar trebui s apar. Facei clic pe "Block" de linie n "categoria" coloana (coloana din stnga). Coninutul pe partea dreapt a casetei de dialog trebuie s se schimbe. Lng partea de jos din partea dreapta este o caset drop-down etichetate "Display". Facei clic pe sgeata n jos pentru acest cmp i selectai "bloc" element. Acum facei clic pe "Box" de linie n "Categorie", coloana pentru ao selecta. Introducei limea imaginii n "Lime" cmp i lsai cmpul de lng aceasta selectat la "px" (pixeli). Pentru cei care nu sunt siguri ce vorbesc despre, limea de imaginea ta este numrul ai notat mai devreme de la panoul de proprieti. Undeva mai jos "nlime" de cmp sunt dou coloane, dei nu apare ca 2 coloane. Coloana din stnga a de la rubrica "padding". Coloana din dreapta are 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 jos pentru "Dreapta" cmpul n care aceeai coloan, i selectai "auto". Faceti acelasi lucru pentru "stnga" n cmpul "Marja de" coloana: care este, facei clic pe sgeata n jos de lng acel cmp i selectai "auto". Dac gsii c att "stnga" i "Dreapta" cmpuri sunt dezactivate, nseamn c nu ai debifai "Same pentru toi" caseta. Va trebui s debifai caseta de faptul c nainte de a putea selecta "Auto".

Facei clic pe "OK". Asigurai-v c logo-ul dvs. este inca selectat. Dac nu suntei sigur, facei clic pe logo-ul o dat. Facei clic pe cmpul de clas n Properties Panel din partea de jos a ferestrei Dreamweaver. Acesta ar trebui s arate o list lung de 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 c am spus "Save All" nu "Save". Regulile CSS-ai adugat la centrul imaginii dvs. 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 n prezent. Pentru cei curiosi despre ceea ce "CSS" este, v rugm s consultai articolul Ce este HTML? Ce este CSS? Ce sunt JavaScript, PHP i Perl? 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. Din nou, atunci cnd Dreamweaver v ntreab dac dorii s punei fiierele dependente, 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 browser web. Dac avei orice probleme cu acest pas, i nu ai nceput aceast serie

de la capitolul 1 , v rugm s revenii la capitolul 1 pentru a citi informaii importante 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 de art, sau alte imagini pe care dorii s inserai n corpul principal al paginii web.Imaginile pot fi inserate fie ntre paragrafe de text, cum ar fi ceea ce vedei n multe dintre fotografiile mele de mai sus, sau cu textul curge n jurul valorii de aceasta, fie pe dreapta sau pe stnga, cum ar fi ceea ce vedei n poza mea de Ajutor Crearea / creeze un site: Ghidul incepatorului AZ carte. Derulai n sus pentru a vedea imagini diferite moduri poate fi introdus pentru a vedea ce vreau s spun. Setarea imagini de fundal , astfel nct acestea formeaza fundalul paginii web, vor fi predate ntr-un capitol ulterior . 1. Procesul pentru inserarea unei imagini ntr-o pagin web este cea mai mare parte aceeai ca i pentru adugarea logo-ul site-ului. Facei clic pe primul loc n pagina ta web n cazul n care dorii s mearg imaginea. De exemplu, dac dorii ca imaginea s apar n faa unui anumit paragraf 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 n acel folder, facei clic pe butonul Revocare, copiai de fiier grafic n acel folder, apoi ncercai din nou. 3. Introducei textul alternativ pentru acea imagine. De exemplu, n cazul n care imaginea este o fotografie dintr-o carte vindei, a pus titlul crii dvs. n "text alternativ" cmp. Daca este o fotografie de familie la un picnic, spune ceva de genul "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 ca incomode dup cum se arat n imaginea de mai jos.

Dac dorii ca imaginea s apar complet nainte de paragraf, facei clic oriunde ntr-un cuvnt n paragraful, i de a folosi cheia cursor pentru al muta de la inceputul acestui paragraf. Hit ENTER (sau RETURN) tasta. Pe de alt parte, dac dorii cuvintele sa curga la dreapta a imaginii, cu imaginea pe ea nsi din stnga, facei clic pe imagine o dat pentru ao selecta. Apoi, facei clic pe sgeata n jos de lng caseta derulant pentru "Alinierea" n panoul de proprieti. Selectai "Left" (din moment ce dorii ca imaginea 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 merge chiar pn la marginea de imagine (a se vedea captura de ecran de mai sus). Acest lucru nu este, de obicei, ceea ce majoritatea oamenilor doresc. Pentru a ajusta spaiul orizontal dintre imagine i cuvintele, introducei un numr n "Space H" cmp din panoul de proprieti. De exemplu, ncercai s tastai "5" (fr ghilimele) n acest domeniu i a lovit ENTER (sau RETURN) tasta. Dreamweaver va insera un pic de spaiu pe orizontal ntre

imaginea ta i cuvintele tale. Dac acest rezultat intr-un spatiu care este fie prea ngust sau prea mare, a mri sau micora numrul pn cnd obinei rezultate satisfctoare. Pentru a ajusta spaiul vertical ntre imaginea ta, iar cuvintele, utilizeaz "Space V" pe teren n acelai mod. 5. Salvai munca dumneavoastr cu "File | Salvare", publica, si testati-l ntr-un browser web. Felicitri. Ai acum lustruit pagina de web, astfel nct acesta conine acum un logo-ul site-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, se adaug 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 i Culori in Dreamweaver CS5

de Christopher Heng, thesitewizard.com Chiar daca site-ul dvs. este acoperit n grafic, poate n msura n care accentul su principal este grafica, va trebui n continuare s se ocupe cu text. i n orice moment avei nevoie pentru a manipula text, vei dori probabil s tie cum s fac lucruri cum ar fi dimensiunea fontului schimbare, pune cuvintele n aldine sau cursive, schimba culorile textului ("culori", n engleza american ), i chiar schimba fontul in sine . Acesta este subiectul acestui capitol din tutorial Dreamweaver CS5 . Pentru noul venit, care de-abia a ajuns la aceast pagin, poate dorii s ncep de la primul capitol al CS Dreamweaver 5 tutorial . Capitolul curent presupune c ai terminat 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-ul propriu: 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 aldine i cursive, si modifica dimensiunea i culoarea de continut text folosind Adobe Dreamweaver CS5 . Acest capitol, de asemenea, v introduce n Cascading Style Sheets ("CSS") i v arat cum putei profita de ea la stilul text.

Introducere n Cascading Style Sheets (CSS)

Ai ntlnit termenul de "CSS" n trecere nainte de, n primul rnd, atunci cnd a creat un site web coloana 2 de la unul din Dreamweaver pre-ambalate abloane , i apoi mai 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 bun pentru 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 o mulime de tehnic de nivel sczut chestii de genul CSS, HTML i alte mumbo jumbo astfel, un pic de cunotine despre ceea ce se ntmpl n spatele scenei n timp ce lucra 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 baz pe care Dreamweaver utilizeaz pentru a controla aspectul site-ul dumneavoastr. n timp 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 este automat inserat ntr-un fiier CSS numit "twoColLiqHdr.css" (dac ai utilizat numele implicit n capitolul 1) pentru tine. Acesta este motivul pentru care trebuie s v ntotdeauna-v c folosii "File | Save All" (introdus ultimul capitol), atunci cnd faci orice fel de schimbare vizuale la pagina ta web. n caz contrar, Dreamweaver va salva doar fiierul HTML (pagina web propriu-zis) esti lucreaz n prezent, i nu salvai fiierul CSS, de asemenea. De asemenea, este motivul pentru care avei nevoie s v asigurai c s facei clic pe butonul "Da" atunci cnd Dreamweaver v ntreab 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 pe site-ul dvs. nu vor fi publicate, astfel nct orice modificri la aspectul site-ul dvs., cu toate 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 s respecte 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 ordonat indirect browser-ul pentru a pune o sum egal cu de spaiu liber pe stnga i dreapta imaginii (punerea effectively imaginea dvs. n centrul paginii) . Regulile CSS pot fi aplicate la nimic pe pagina dvs. web. Pentru a face mai uor s aplice 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 la faptul c pur obiect specific de etichet n regul nostru CSS. Noi numim astfel de etichete " 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 a pune ceva etichetat "logo-ul", n centrul paginii. Sau, n limbajul tehnic mai precis, am

atribuit logo-ul site-ul unei clase de "logo", i a creat o regul CSS la centrul de orice imagine 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 clasei a logo-ul nostru real. De fapt, acest mod aparent pe spate de lucru, n cazul n care vom 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 principal pentru c face munca mai uoar. Apropo, "obiect" sau "element" pe care am menionat mai sus poate fi nimic care apar 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 putei aloca 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 clarifica dup cum am exercite n mod efectiv n procedura de mai jos. Am vrut doar s v dau o imagine de ansamblu a ceea ce suntem pe cale s fac, precum i o explicaie de ce facem ceea ce facem. Dac ai o durere de cap ncercnd s vizualizeze ceea ce tocmai am spus, nu te deranja (pentru a vizualiza). Doar trece la seciunea urmtoare.

Cum se modifica fonturile, dimensiunea textului i color, text in Dreamweaver CS5

Urmtorii pai se aplic dac dorii s modificai fonturile, pentru a regla dimensiunea textului, sau schimba culoarea de cuvintele tale. Reinei c aceti pai a face cu schimbarea de stilurile de text pe fragmente specifice de text sau paragrafe mari de text. Dac dorii s modificai fontul implicit utilizat pe pagina dvs. de Web ntreg, sau coloana din ntregul stnga sau la dreapta, vei gsi procedura ntr-o seciune ulterioar (de mai jos). Cu toate acestea, va trebui n continuare s citii aceast seciune, deoarece aceste seciuni nu ofer unele dintre cunotinele i abilitile eseniale de fond predate aici. (Sorry. Dar exist informaii doar prea mult pentru a repeta peste tot.) 1. Start up Dreamweaver i DoubleClick "index.html" filename n panoul de fisierele de pe dreapta. Aceasta deschide pagina de pornire pe care le au lucrat la in ultimele 2 capitole. 2. Facei clic pe "Format | Stiluri CSS valid | New ...". Dac v amintii convenie folosit aici, acest lucru nseamn s facei clic pe "Format" din bara de meniu. Apoi, atunci cnd un meniu vertical apare, facei clic pe "Stiluri CSS" element. Dup aceasta, facei clic pe "Nou ..." element din submeniul care apare. 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 "Type Selector".Facei acest lucru indiferent dac este sau nu este deja selectat.

4. Dac exist orice text existent n "Selector de Name" cmp, tergei-l. Pentru a face acest lucru, doar s facei clic o dat n domeniu, i de a folosi Backspace sau tasta DEL pentru a scapa de tot ceea ce n acea caset. Vom fi introducerea numelui unei clase n acest domeniu. Aceasta "clasa" este eticheta pe care am mentionat mai devreme. Este clasa care vom fi atribuirea buci de text pentru care dorii modificrile fcute fontului (dac este de a schimba fontul in sine, sau a modifica dimensiunea textului, etc). Pentru a face mai uor de neles despre ce vorbesc aici despre, haidei s presupunem c dorii s schimbai fontul pentru toate denumirile produselor dvs. s apar pe site-ul tau. Pentru a face acest lucru, avei posibilitatea s introducei o clasa (eticheta), cum ar fi "ProductName" (fr ghilimele) n acest domeniu. Mai trziu, v va atribui aceast "ProductName" clasa la fiecare instan de denumiri de produse pe site-ul tu. Cu alte cuvinte, numele pe care l introducei n acest domeniu este de fapt un cuvnt de alegerea ta. Va trebui s-l fac n sus singur. Numele clasei ar trebui s nceap cu o liter a alfabetului. Restul de nume poate conine litere i numere, dar nu trebuie s includ nici semnele de punctuaie sau spaii. De exemplu, "NumeProdus" i "welcomemessage" sunt nume acceptabile pentru clase, 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 putea decide c numele companiei nu ar trebui s apar n Arial, dar n Times New Roman. n orice caz, nu petrec prea mult timp incercand sa descopere un nume de clasa. Acesta este doar o etichet descriptiv pentru tine de a utiliza pentru a face modificri font i cum ar fi. Acesta nu este, de fapt afiat n browser-ul web, astfel nct nu avei nevoie de a veni cu ceva fantezie. Dac suntei ntradevr blocat i nu poate gndi la un nume, utilizai doar lucruri generice ca "subpoziii", "productnames", "productfeatures", "welcomemessage" (toate fr ghilimele) i altele asemenea. Odat ce te-ai decis pe numele unei clase, tastai-l n cmpul Nume Selector. 5. Facei clic pe butonul "OK". 6. O caset de dialog nou, cu un titlu de "Definiie articolul CSS pentru [numele clasei dvs.]. n twoColLiqLtHdr.css", va aprea, n cazul n care "[numele clasei]" este numele introdus n cmpul Nume Selector. Observai c partea dreapt a aceast caset de dialog v permite s modificai multe aspecte ale fonturilor pe pagina ta web. De exemplu, avei posibilitatea s selectai un font de la "font-family" caseta vertical, a modifica dimensiunea textului de la "font-size" cmpuri, pune textul n caractere aldine, utiliznd "Font-greutate" cmp, pune textul n caractere cursive prin "Font-

style" cmp, i schimba culoarea textului cu "Color" caseta. Voi discuta despre fiecare dintre aceste elemente separat la punctele de mai jos. Va rugam sa cititi ceea ce am de spus despre aceste domenii nainte de a merge slbatice pe o frenezie de personalizare.

Font-family: nelegerea Liste de fonturi

Cnd facei clic pe "font-family" caseta list vertical, vei observa c fiecare linie din lista conine mai multe fonturi, cum ar fi " Verdana, Georgia, sansserif ". Acestea sunt listate n acest fel, deoarece nu toate computerele au instalat aceleai fonturi. Dac selectai, s zicem, " Times New Roman, Times, serif ", browser-ul vizitatorului dvs. web va folosi Times New Roman pentru a afia textul dumneavoastr dac este disponibil pe acel computer. Dac Times New Roman nu este instalat n ei / lui de calculator, browser-ul va folosi fontul urmtoare figureaz n list, care, n acest caz, este Times. n cazul n care nu este de asemenea disponibil, browser-ul va folosi orice font serif se poate gsi pe calculator. Cu alte cuvinte, browsere web vor merge n jos lista, dnd prioritate primul font, i utiliznd urmtoarea pe list numai n cazul n care fontul anterior enumerate nu este disponibil. Din acest motiv, dac dorii de fapt pagina web pentru a fi afiate folosind (s zicem), Times New Roman, trebuie s selectai linia "Times New Roman, Times, serif", nu i linia "Georgia, Times New Roman, Times, serif "chiar dac Times New Roman este listat n ambele serii. n caz contrar, pagina dvs. poate ajunge s fie afiat folosind Georgia pe majoritatea computerelor vizitatorilor dvs. (care nu a fost intentia ta). Dreamweaver enumer doar o serie de cteva fonturi n lista implicit. Avei posibilitatea s adugai noi elemente n list, dac dorii, prin selectarea "Editare List Font ...", dei ar trebui s reinei c n cazul n care fontul pe care dorii nu este gsit n lista de Dreamweaver lui, exist o ans de puternic ca multe din vizitatorii dvs. nu va avea o pe computerele lor. ntr-un astfel de caz, site-ul tau va arata bine doar pe propriul computer, dar va aprea urt pe sistemul de oricine altcineva. De exemplu, dac ai primit de la fontul meu gratuit ce Fonturi pagina, este puin probabil ca majoritatea vizitatorilor vor avea acelai font pe computerele lor. Pentru a afla mai multe despre alegerea fonturi pentru site-ul dvs., precum i ceea ce "serif" i "sans serif" nseamn, v rugm s consultai Ce font trebuie s folosesc pentru Page My Web? Sfaturi privind alegerea Fonturi pentru site-ul tau . Pentru curios, din moment ce esti utiliznd cele dou coloane de lichid ablon, seria Fontul implicit utilizat pentru pagina ta web este "Verdana, Arial, Helvetica, sans-serif". i, astfel nct s nu trebuie s scrie s m ntrebe, thesitewizard.com foloseste in prezent "Arial, Helvetica, sans-serif". Ambele

seturi de fonturi sunt considerate de multi webmasteri ca pariurile sigure, deoarece fonturile listate se gasesc practic peste tot.

Font-size
Pentru a modifica dimensiunea textului, introducei un numr n "font-size" cmp. De exemplu, avei posibilitatea s introducei "120" (fr ghilimele). Cmpul adiacent din dreapta va fi activat imediat. Facei clic pe csua drop-down pentru acel cmp i selectai unitatea de msur adecvat pentru mrimea font nou, de exemplu, "%" pentru sut. Introducerea "120%" n acest fel nseamn c textul va aprea acum cu 20% mai mare dect dimensiunea existente. Dei avei posibilitatea s utilizeze alte uniti de msur n afar de "%", pentru lucruri cum ar fi paginile web, cel mai bine este s rmnem la utiliznd fie "%" (procente) sau "em". Lucruri de genul "pt" (punct), pe care ai putea fi familiar din utilizarea wordprocessors cum ar fi Microsoft Word, sunt mai potrivite pentru mediul de imprimare dect la monitorul computerului. n caz c v ntrebai, dimensiunea textul actual este considerat ca fiind de 100%. Setarea se la 90%, nseamn c el devine cu 10% mai mic dect dimensiunea sa actual. n schimb, setarea este cu 110% nseamn c acesta devine 10% mai mare.

Schimbarea Culoare Text

Dac dorii s schimbai culoarea textului, facei clic pe caseta ptrat de lng cuvntul "Color". Aceast caset este de fapt un buton clickable. O fereastra Alegere culoare va aprea, permindu-v s alegei o nou culoare pentru text.

Sublinia
Dei putei sublinia orice text dorii, bifnd caseta de aici, este, n general, mai bine s nu pentru a sublinia textul obinuit pe pagina ta web. Prin convenie, a subliniat textul de pe paginile web este aproape universal folosit doar pentru link-uri, i v va induce n eroare utilizatorii dumneavoastr dac subliniaz lucruri pentru accent.Utilizai aldine sau cursive pentru a crea un accent n schimb.

Bold si Italic
Nu avei de a crea o nou regul CSS doar pentru a pune cuvintele izolate n aldine sau cursive. Opiunile aldine i cursive n "Font-greutate" i "Font-style" cmpuri sunt destinate pentru cazuri n care l solicitai alte modificri stilistice la text, de asemenea. De exemplu, este util dac v schimbai fonturile pentru rubricile de punctul dvs. i dorii s facei textul aldin, n acelai timp. Dac dorii doar s pun anumite cuvinte la punctele dumneavoastr n

aldine sau cursive pentru a accentua aceste cuvinte ntr-o propoziie, ca aceasta , citii seciunea intitulat Cum s faci Text One-Off Bold si Italic de mai jos n mod special care se ocup cu asta. 7. Cnd ai terminat cu schimbarea stilului de text, facei clic pe butonul "OK". Aceasta respinge caseta de dialog, dar nimic nu va fi schimbat n pagina dvs. web. Acest lucru se datoreaz faptului c nu ai atribuit clasa la orice bucat de text nc. 8. Acum, selectai textul dorit modificat. O modalitate de a face acest lucru este pentru a trage mouse-ul peste cuvintele pentru ao evidenia. 9. n panoul IMOBILIARE din partea de jos a ferestrei Dreamweaver, facei clic pe csua drop-down de lng "clasa". Va aprea o caseta, lista cu toate clasele diferite care au fost create pn n prezent. Ar trebui s fie n stare s gseasc clasa l-ai creat undeva n list. (Poate fi necesar s defilai n sus sau n jos lista pentru a gsi clasa nou.) Facei clic pe numele clasei. Aceasta atribuie clasa ai creat pentru a fragment de text selectat. Schimba fontul pe pagina dvs. de web ar trebui s fie imediat, dei n cazul n care modificrile sunt foarte mici (de exemplu, mrirea dimensiunii textului la 101% din valoarea implicit de 100%), acestea nu pot fi suficient de distincte pentru tine de a observa nici o diferen. 10. Repetai cu orice alte piese de text pe care dorii s-l aib aceeai clas (i, prin urmare, de asemenea, stilul de acelai text). Asta este, evideniai un alt fragment de text pe care dorii s-l aib aceleai modificri font aplicate, i selectai numele aceeai clas din "clasa" n caseta Properties Panel. Avei posibilitatea s atribuii aceeai clas ca multe piese de text pe pagina web dup cum dorii. De exemplu, dac dorii ca fiecare instan a numelui companiei dvs. pe pagina dvs. de web pentru a avea clasa "NumeFirm" (cu ei, s zicem, font Courier New setare), apoi, unul cte unul, a evidenia numele companiei i atribui NumeFirm " "clasa de la fragment. Repetai pentru urmtoarea apariie a numelui companiei dvs. pn la fiecare instan a "NumeFirm" de clas. Fiecare bucat de text care are aceast denumire de clas care i sunt atribuite vor mprti aceleai modificri font (sau modificri dimensiune sau modificri de culoare sau orice altceva) pe care le-ai fcut pentru aceast clas.
11. Dac dorii un stil de text diferit pentru anumite alte bloc de text, va trebui s

creeze o noua clasa pentru el. Asta este, du-te napoi la pasul n cazul n care ai folosit "Format | Stiluri CSS valid | New ..." i face o noua clasa cu diferite setri stilul de text (fonturi, culori, dimensiuni, indiferent).

Ce se ntmpl dac m rzgndesc Despre un font, sau Text Size, Culoare text, etc?

Ce se ntmpl dac, dup ce faci cele de mai sus, avei o schimbare a inimii despre opiunile de stilul de text care le-ai folosit pentru pagina ta? De exemplu, dac v decidei c Comic Sans nu a fost o alegere buna pentru numele firmei dvs. la urma urmei, i dorii Times New Roman n loc? 1. Pentru a modifica setrile le-ai fcut mai devreme, facei clic pe undeva n mijlocul unui bloc de text care a fost anterior atribuit clasei l-ai creat mai devreme. Nu selectai textul - doar s facei clic pentru a pune cursorul undeva n mijlocul acelui bloc. ncercai s nu pentru a pune cursorul la caracterul foarte n primul rnd, n cazul n care avei loc accidental n afara blocului. Putei verifica dac cursorul se afl n faa locului de ctre corecta uitat n jos de la panoul de proprieti. Dac o faci corect, "clasa", domeniu n care panoul va afia numele clasei pe care dorii s o modificai. 2. Acum uita-te la partea dreapta de Dreamweaver, la panoul de STILURI CSS (vezi imaginea). Localizai parte din seciunea STYLE CSS care spune " Properties pentru "[numele clasei]." "n cazul n care" [numele clasei] "este numele real al clasei l-ai creat. Dac fereastra Dreamweaver (sau monitor de calculator) este prea mic care nu le putei vedea ntr-adevr o mare parte din acea parte, facei clic pe bara de defilare de la marginea c " Properties pentru "[numele dvs. de clas]." "pentru a muta coninutul su n sus i n jos . (Not: dac fereastra este suficient de mare, astfel c "ntregul Properties pentru ". [numele clasei dvs.]" . "sectiune este indicat, nu va fi nici o bar de defilare, deoarece nu este nimic mai mult pentru a vedea) Dac ai efectuat o modificare de font pentru aceast clas, ar trebui s fie posibilitatea de a vedea o linie sub care spune c "font-family", urmat de numele fontului setat mai devreme. Dac ai fcut alte modificri, ar trebui s fie n msur pentru a vedea alte proprieti ai stabilit n aceast seciune, cum ar fi font-size, etc Pentru a modifica aceste cmpuri, facei clic pe poriunea valoarea de aceste domenii. De exemplu, dac ai setat Comic Sans MS pentru clasa ta, i-au schimbat acum mintea ta, facei clic pe cuvnt Comic Sans MS s-l transforme ntr-o cutie drop-down pe care le putei modifica. De fapt, avei posibilitatea s facei dublu, de asemenea, cuvntul "font-family", pentru a crea n acelai sens.Not: utilizarea mea de "font-family" aici (ca i n imagine), este doar un

exemplu. Dac nu ai schimba fontul, dar au schimbat dimensiunea fontului n schimb, vei vedea "font-size", n aceast seciune, care se poate DoubleClick pentru a face modificabil.

Cum se modific fontul pentru ntregi pagini Web

Dac dorii s modificai fontul pentru pagina dvs. de pe ntregul Web, nu avei pentru a crea o noua clasa doar pentru acest scop. Deoarece pagina dvs. se bazeaz pe unul dintre Dreamweaver pre-ambalate abloane, avei posibilitatea s utilizai clas care Dreamweaver are deja pre-alocate pentru coninutul paginii dvs. ntregi. Tot ce trebuie sa faci este de a modifica aceast clas existent pentru a utiliza noul font. 1. Cel mai simplu mod de a face acest lucru este s facei clic pe "Format | Font" i selectai noul font pe care dorii. 2. n "New articolul CSS" caseta de dialog care apare, selectai "Clasa A (se poate aplica la orice element HTML)" pentru cmpul Tip Selector. 3. ndeprtai orice text existent n cmpul Nume Selector de prin eliminarea aceasta. Apoi introducei "container" (fr ghilimele) n acest domeniu. (Da, numele clasei pre-alocate este "container".) 4. Facei clic pe butonul "OK". 5. Pagina dvs. ar trebui s reflecte ntregul Web schimbe imediat.

Cum se modific fontul pentru coloane ntregi stnga sau dreapta

Dac dorii s modificai fontul pentru coloanele ntregul stnga sau la dreapta, procedai n felul urmtor. Vom profita de faptul c Dreamweaver a atribuit deja clasa "sidebar1" pentru coloana din stnga, i clasa de "coninut" pentru coloana din dreapta, pentru paginile bazate pe ablon special, pe care l utilizai n prezent. 1. Facei clic pe "Format | Font" i selectai seria de font pe care dorii s o utilizai. 2. Selectai "Clasa A (se poate aplica la orice element HTML)" pentru cmpul Tip Selector. 3. tergei orice text existent n cmpul Nume Selector. Introducei "sidebar1" (fr ghilimele), dac dorii s modificai fontul urmeaz s fie aplicat n coloana din stnga ntregul. Alternativ, introducei "coninut" (fr ghilimele) n cazul n care dorii s-l fi aplicat la intreaga coloana din dreapta. 4. Facei clic pe butonul "OK". 5. Pagina dvs. ar trebui s reflecte ntregul Web schimbe imediat.

Cum sa faci Text One-Off Bold si Italic

Uneori, poate dorii s subliniez un cuvnt sau o expresie n coninut. Nu avei de a crea o ntreag clas doar pentru a face acest lucru.

Pur si simplu a evidenia cuvntul, fraza sau tez pe care dorii s pun n aldine sau cursive. Ca i nainte, putei face acest lucru fie prin glisarea mouse-ul peste textul pe care l dorii, sau innd apsat tasta SHIFT i se deplaseaz tastele sgeat. Uit-te la Properties Panel din partea de jos a ferestrei Dreamweaver. Observai c exist 2 caractere, " B "i" eu ", doar pentru partea dreapt a cmpurilor de clas.Acestea sunt de fapt butoane clic. Dac dorii ca textul selectat ntr-un font aldin, facei clic pe " B ", buton pe acel panou. Dac dorii ca textul n caractere cursive, facei clic pe " I "buton. Modificrile ar trebui s fie imediat. Not: dac suntei un utilizator experimentat wordprocessor, aceleai scurtturi de la tastatur care se utilizeaz pentru a face textul aldin sau pune-l n caractere cursive (Ctrl + B si Ctrl + I n Windows), de asemenea, de lucru n Dreamweaver. Dac nu inteleg acest alineat, nu v facei griji: stick doar la clic pe butonul "B" i "I" butoanele de mai sus.

Salvarea, Edituri si Incercari pagina dvs. Web

Salvai pagina dvs. de Web i asociate acesteia CSS fiier cu "File | Save All". (Not utilizarea "Save All" n loc de "Salvare".) Apoi publicai-l pe site-ul dvs., cu "site-ului | Pune". Amintii-v ce am spus despre importana de a da click "Da", atunci cnd solicit Dreamweaver despre fiiere dependente. Apoi verificati pagina de start ntrun browser web. Felicitri! Pagina dvs. de pornire, acum cu ambele grafice i textul Coafura caz, este bine pe cale de a fi finalizate. Nu v facei griji, stiu ca nu e terminat nc. Dar este deja n curs de dezvoltare n ceva ce poate fi mndru de. n capitolul urmtor, vei nva cum s modificai fundalul pagina ta web . Aceasta include schimbarea culorile de fundal sau folosind o imagine ca fundal sale. 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 Pentru a modifica fundalul de site-ul tau in Dreamweaver CS5

de Christopher Heng, thesitewizard.com Excepia cazului n care iti place culoarea de fundal curent ("culoare", n englez SUA ) paginii web, sau se potriveste deja schema de culori a imaginilor existente pe pagina dvs., sunt anse ca tu vei vrea, fie pentru a schimba culoarea sau utilizai o imagini ca fundal. Acest capitol v arat cum putei face acest lucru. Dac avei abia ajuns la aceast pagin, i sunt un nou venit pentru Dreamweaver CS5, poate dorii s ncepei cu capitolul 1 din Tutorial Dreamweaver CS5 . Acest

capitol se bazeaz pe lucrurile predate n capitolele anterioare, i, astfel, glose peste foarte multe lucruri (att teoretice i practice), deja am menionat mai devreme. De fapt, dac sunt complet noi pentru crearea de site-uri web, i sunt aici pentru ca esti curios despre ce este vorba, putei gsi articol Cum de a crea / Set Up Your Own Website: Ghidul incepatorului AZ un punct de plecare mai.

Scopul acestui capitol

Pn la sfritul acestui capitol, va fi capabil de a schimba culorile de fundal a diferitelor pri ale paginii web. Vei fi, de asemenea, posibilitatea de a folosi o imagine pentru a forma fundalul paginii web dac dorii.

Aspecte preliminare: Terminologie

Pagina web pe care suntei n prezent proiectarea, creat n capitolul 1, pe baza Dreamweaver lui "lichid coloana 2, bara lateral stnga, antet i subsol" ablon, prevede mai multe sectii diferite, care se pot particulariza. n timp ce aceasta crete posibilitile de proiectare pentru tine, de asemenea, face foarte dificil pentru mine s se refere la diferite pri ale paginii web ntr-un mod lipsit de ambiguitate. Ca atare, pentru a se asigura c ai neles exact care parte a paginii web vorbesc despre, v rugm s folosii urmtorul tablou ca referin.

tiu c, de acum, pagina de web, probabil, arat diferit de ceea ce vedei n imagine, din moment ce s-ar fi schimbat textul, folosit logo-ul propriu, etc, ca urmare a urma trei capitole precedente. Cu toate acestea, aspectul de baz ar trebui s fie n continuare identic, fcnd posibil pentru tine pentru a gsi seciunile pe site-ul dvs. corespund cu cele menionate aici. Am etichetat anumite pri ale paginii web din imagine, cu cuvintele scrise pe vertical (perpendicular pe cuvintele din coninutul principal). Eticheta " organism "se refer la modificarea fundalului din spatele 2 coloane a paginii web. De fond de coloana stng este etichetat " sidebar1 ", iar coloana din dreapta" coninut ". Fundal pentru bara orizontal din partea de sus a paginii care

conine logo-ul site-ul dvs. este etichetat " antet ". Dei nu se arat n imaginea de mai sus, pe fondul bara orizontal de jos, indicnd, probabil, dumneavoastr privind drepturile de autor n acest moment, este etichetat " subsol ". V rugm s facei o not mental a acestor etichete menionate mai sus (inclusiv "footer" eticheta de fapt nu se arat n imagine). Vom fi le folosesti pentru a personaliza fundalul diferitelor seciuni. Din moment ce deja au nvat despre clase CSS n capitolul privind modificarea fonturi i alte stiluri de text , vei nelege, probabil, m cnd spun c aceste etichete corespund la numele Dreamweaver clase a alocat pentru acele pri ale paginii web. Da, am folosit numele nu sunt arbitrare. Le-am ales pentru c acestea sunt, de asemenea, numele clasei a acestor seciuni. (Reinei, ns, c "corpul" nu este de fapt numele unei clase, ci n sensul prezentului capitol, c eticheta va lucra n acelai mod.) Oricum, nu este nevoie s memoreze nimic. Dac uitai ce nume care se refer la aceast seciune, alegei-v din nou la aceast seciune i s verificai imagine. Pentru cititorul atent, care poate c ai observat c nu am dat nici o etichet la meniul de navigare (partea care spune "Link unu", "Link doi", etc), v rugm s reinei c toate personalizari referitoare la faptul c meniul vor fi predate n capitolul care se ocup cu ea.

Cum de a schimba culoare Background sau Utilizai o imagine de fundal pentru diferite parti ale paginii web 1. Invoca articolul Definiie CSS Caseta de dialog
Ce vei face n aceast seciune este de a invoca articolul Definiie CSS caseta de dialog pentru fiecare seciune a paginii de web pe care dorii s o personalizai.ntruct Dreamweaver a creat deja toate clasele necesare pentru diferite seciuni, truc este de a obtine editor web pentru a afia Definiie CSS fereastr articolul pentru seciunea de ne-o dorim. S presupunem c dorii s modificai fundalul pentru o parte din pagina ta web etichetate "organism" n poza mea. Facei clic undeva n spaiul liber la stnga a coloanei din stnga, n partea a paginii am etichetat "trup". Face acest lucru, chiar dac nu dorii de fapt, pentru a schimba fundalul pentru aceast seciune, n caz contrar nu vei ti ce vorbesc despre n paragraful urmtor. (Nu v facei griji, nu trebuie s schimbe ceva mai trziu, dac nu dorii s putei lovi ntotdeauna tasta ESC pentru a iei din casetele de dialog pe care o invoca din greeal..) Uit-te la panoul de CSS STILURI din dreapta a ferestrei Dreamweaver (vezi imaginea de mai jos). "Reguli" seciunea de panou care ar trebui s aib 2 linii: prima linie spunnd: " <body> corp ", iar al doilea," <div> container. ". De fapt, nu ne pas ce a doua linie spune. Partea important este linia pe care scrie " <body> trup"din moment ce este" corpul "pe care

vrem s o personalizai. DoubleClick c " <body> organism "linia. Nu are importan dac v facei dublu " organism ", cuvant sau" <body> "porie.

CSS caseta de dialog Regul Definition pentru "organism" va aprea. Putei verifica faptul c aceast fereastr special CSS Definiie articolul este pentru "organism", seciunea citind titlul ntregul din caseta de dialog: "CSS Definiie articolul pentru organism n twoColLiqHdr.css "(sublinierea mea). Dac dorii cu adevrat s configurai fundal pentru organism, lsai aceast caset de dialog deschis, astfel nct l putei folosi n pasul urmtor. n caz contrar, facei clic pe "Anulare" sau apasati tasta ESC de pe tastatur pentru a iei. Practic, trebuie s faci acelai lucru pentru seciunea paginii web de fapt dorii s le modificai. De exemplu, pentru a configura "sidebar1" poriune, facei clic pe undeva n coloana din stnga (dar nu n partea meniul de butoane, care este, nu n partea cu cuvintele "Link unu", "Link doi", etc). Panoul Stiluri CSS ar trebui s arate "sidebar1 <div> "ca fiind una dintre liniile din seciunea de Reguli. DoubleClick l pentru a ajunge Definiie CSS articolul caseta de dialog pentru "sidebar1". Pentru a v asigura c ai fcut clic ntr-adevr la locul potrivit, verificai ntotdeauna de titlu a casetei de dialog pentru a v asigura c normele sunt pentru clasa corect. n cazul n care coloana din stnga, titlul ar trebui s spun c este "pentru sidebar1 ".

De dragul celor care nu sunt siguri c acestea vor facei clic pe locul dreapta pe pagina, voi meniona doar pe scurt n cazul n care s facei clic pentru a obine intrrile corecte n "Regulile" din panoul de CSS stiluri. Pentru a configura antet, facei clic pe logo-ul site-ului o singur dat. Apoi, DoubleClick " . antet <div> "de intrare n regulament. Pentru a schimba subsol, facei clic pe undeva n cadrul cuvintele din subsolul dvs., apoi DoubleClick " <div> subsol. ", n Regulamentul.Coloana din dreapta poate fi configurat printr-un simplu clic pe undeva intr-unul din Exemple n coninutul dvs. principal, i doubleclicking " coninut <div>. "linie n regulament. n toate cazurile, trebuie s obinei un Definiie CSS articolul caseta de dialog, i putei, dac dorii, asigurai-v c ai fcut clic pe locul potrivit prin verificarea titlu.

2.

Selectai "Background"

Facei clic pe "Background" linia n coloana din stnga a articolului caseta de dialog Definiie CSS. Coninutul de partea dreapt a casetei de dialog trebuie s se schimbe.

3.

Modificarea culorii de fundal

Dac dorii s utilizai o imagine de fundal n loc de a schimba culoarea de fundal, srii la pasul urmtor. Altfel, citii mai departe. Not: poi s faci att, dac dorii: care este, putei schimba culoarea de fundal i a utiliza o imagine de fundal. ntr-un astfel de caz, s efectueze procedura n ambele aceti pai. Pentru a schimba culoarea de fundal, facei clic pe caseta de lng ptrat "background-color". Aceasta invoc selectorul de culoare pe care le-ai ntlnit deja ncapitolul 3 . Alege o culoare nou din selecie oferite.

4.

Utilizai o imagine de fundal

Dac vrut doar pentru a schimba culoarea de fundal i nu dorii s adugai o imagine de fundal, sri doar la pasul urmtor. Pe de alt parte, dac intenionai s setai o imagine de fundal, copie care imaginea n dosarul imagini ale site-ul dvs. aa cum ai fcut n capitolul 2. Dac nu tii ce vorbesc despre aici, sau ai uitat cum se face, v rugm s revenii la acest capitol pentru a remprospta memoria. Nu sari peste aceasta parte. Apoi facei clic pe "Browse ..." butonul "Background-image" cmp i selectai fiierul. Facei clic pe sgeata vertical pentru "background-repeat" cmp. Vei avea nevoie pentru a selecta una dintre opiunile diferitelor dat aici. Browsere vizitatori dvs. de web va utiliza opiunea selectat n cazul n care imaginea

este mai mic dect cantitatea de spaiu disponibil pentru fundal. Dac alegei "nu-repeta", imaginea va fi plasat pe pagina web ca atare. Opiunea "repeta" va cauza duplicate de imaginea ta pentru a umple de fundal (cum ar fi placi ceramice pe podea). Selectai "repeta-x" sau "repeta-y", dac dorii doar imaginea de igl orizontal sau vertical, respectiv. i nainte de a v ntreb, nu exist nici o "intindere" opiune pentru a face imaginea dvs. umple ntreaga fereastr. 5. Facei clic pe butonul "OK" pentru a accepta modificrile. 6. Salvai modificrile cu "File | Save All" i s le publice pe site-ul tau. Ca ntotdeauna, asigurai-v c modificrile de testare cu un browser web. De altfel, dac dup testare, v decidei c dorii o schema de culori diferite sau unii alt imagine ca imagine de fundal, pur si simplu returnati la articolul caseta de dialog Definiie CSS acelai mod n care acesta a invocat, n primul rnd. Asta este, doar repeta procedura de mai sus si alegeti unele alt culoare sau o imagine. Dac ai avut anterior stabilit o imagine ca fundal i nu-l vrea nici mai mult, a reveni la articolul caseta de dialog Definiie CSS i s tergei numele fiierului n "background-image" cmp.Dac dorii, putei terge, de asemenea, selecia n "background-repeat" cmp. n ambele cazuri, atunci cnd spun terge, vreau sa spun de a utiliza DEL sau tasta Backspace, gsite pe tastatur, cu privire la coninutul acestor cmpuri.

Despre modul n spaiul de mai jos coninut i Sidebar-ul?

Dac ai configurat culorile "coninut" sau "sidebar1" coloanele, este posibil s fi observat c fondul de mai jos acele coloane continu s rmn alb. Reinei c eu nu vorbesc despre partea cu eticheta "organism" n figura mea. Dac nu tii ce vreau s spun, derulai n jos n pagina dvs. Dreamweaver dup ce ai stabilit culorile. Doar de mai sus bara de subsol i sub coloanele din stnga i dreapta este un interval de spaiu alb. Este aceast poriune a paginii dvs. pe care m refer la. Pentru a obine Definiie CSS articolul caseta de dialog pentru aceast regiune, facei clic pe undeva n acel spaiu. Apoi, DoubleClick " . container "<div> "de linie n seciunea de Reguli CSS a panoului Stiluri, i continuai aa cum ai fcut de mai sus pentru a seta culorile sau de a folosi o imagine de fundal. Reinei c, dac nu ai setat anterior o culoare pentru "coninut", seciunea i setai acum una pentru "container", de culoare pentru "container" va sngera pn la punctul dvs. de coninut. Pentru a rezolva faptul c, n mod explicit stabilit o culoare pentru "coninut", chiar dac acea culoare este alba.

Cum pentru a face imaginile i textul n link-uri face clic cu Dreamweaver CS5
de Christopher Heng, thesitewizard.com Hyperlink-uri, sau "link-uri" pe scurt, sunt una dintre trsturile caracteristice ale unui site web. Ei sunt motivul pentru care toate site-urile din lume sunt denumite colectiv

n continuare "World Wide Web", deoarece n mod direct sau indirect, toate site-urile legtur ntr-altul, cum ar fi firele o pnz de pianjen. n acest capitol din tutorial Dreamweaver CS5 , vei nva cum se fac fotografiile i textul n link-uri clickable. Reinei c acest tutorial presupune c ai finalizat capitolele anterioare de tutoriale Dreamweaver. Dac acest lucru nu este adevrat, i nu avei experien vast nainte de Dreamweaver, poate dorii s ncepei cu capitolul 1 . De fapt, dac suntei complet nou, la crearea de site-uri web, putei gsi articol Cum sa faci / Crearea unui Website: Ghidul incepatorului AZ un punct de plecare mai.

Scopul acestui capitol

Pn la sfritul acestui capitol, vei fi nvat cum s fac orice imagine sau un ir de text ntr-un link clickable.

Ce este un URL? Introducere n URL-uri absolute i relative

Dac privire n sus la bara de locaie a browser-ul dvs., ar trebui s fie posibilitatea de a vedea un ir de text pe care scrie "http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-5.shtml ". Aceast adres de web este cunoscut ca un URL, pentru scurt Uniform Resource Locator. "Http" Partea din URL-ul indic faptul c acest articol este de a fi accesate folosind o procedura de comunicaii (punct de vedere tehnic menionat ca un "protocol de comunicaii"), denumit "HTTP". URL-uri pentru paginile dvs. de web poate fi specificat fie ca URL-uri absolute i URL-uri relative. URL-urile absolute sunt adrese ca http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial5.shtml . Ele contin toti bitii necesar a informaiilor, astfel nct un browser web tie unde i cum pentru a prelua o pagin web special. "Http://" parte spune un browser care are nevoie pentru a utiliza HTTP protocol de comunicaii."Www.thesitewizard.com" component se spune c documentul se doreste poate fi gsit (vag vorbind) ntr-un domeniu numit "www.thesitewizard.com". n cele din urm, "dreamweaver/dreamweaver-cs5-tutorial5.shtml" parte se spune c pagina web are un nume de "Dreamweaver-CS5-tutorial5.shtml" i pot fi gsite n "Dreamweaver" dosar de care domeniu. Specificarea un URL absolut este ca da prietenul tau adresa ta de acas pe deplin n lumea real, spunndu-i ei / lui nu doar strada i numrul casei, dar i oraul, de stat i de ar. URL-urile relative , pe de alt parte, sunt adrese de web scurt formular ca " index.shtml ", n cazul n care nici protocolul (" http:// "parte) i nici nu este specificat numele de domeniu. Acesta poate fi utilizat numai n cazul n care browserul web tiu deja ce protocol sau nume de domeniu de utilizare. Este ca si cum ai

spune cuiva adresa ta de acas numai prin menionarea numelui strzii i numrul casei. Este sens doar dac ambii se ntmpl s fie n acelai ora, de stat i de ar, i c persoana va interpreta adresa de acest fel. De exemplu, dac am legtur ntr-o pagin Web utiliznd un URL relativ de " index.shtml "de la pagina pe care o lectur n acest moment foarte, browser-ul web va ncerca s construiasc un URL absolut pentru aceast adres parial. n primul rnd se va benzi departe numele de fiier de aceast pagin de URL-ul complet. Acest lucru ofera browser-ul web o adresa ca http://www.thesitewizard.com/dreamweaver/ . Se adaug apoi numele de fiier nou index.shtml la ceea ce ramane, oferind un URL finalhttp://www.thesitewizard.com/dreamweaver/index.shtml . Acesta va folosi aceast adres URL reasamblate pentru a prelua ceea ce a fost legat de. Avnd n vedere acest lucru, puteti folosi doar URL relativ pentru a legtur ntrpagini n termen de propriul dvs. site. De exemplu, eu nu pot pune un link cu un URL relativ de "newpage.html" i sperm c browsere web va citi mintea mea i dau seama c vorbesc despre "http://www.example.com/newpage.html "nu i site-ul meu propriu. Orice legtur ntr-indic spre pagini din afara site-ul dvs. trebuie s fie specificat n forma complet, utiliznd o adres URL absolut. Pagini n termen de propriul dvs. site, pe de alt parte, pot fi legate la folosind fie un URL relativ sau o adres URL absolut. Este pn la tine, care s le utilizai.

Cum sa faci imagini, inclusiv sigla site-ul dvs., n Link-uri poate face clic
Dac trecei cu mouse-ul peste logo-ul thesitewizard.com 's, n colul din stnga sus a acestei pagini, vei gsi c este de fapt un link. (Du-te i mutai mouse-ul peste logo-ul acum, pentru a vedea ce vreau s spun.), Facei clic pe ea v va duce la pagina de casa mea. Aceast practic de a face logo-ul site-ului indic un hyperlink la o pagin site-ului principal nu este unic pentru thesitewizard.com. Multe, cele mai multe dac nu, site-uri face acest lucru. Din moment ce este o astfel de practic comun, utilizatorii experimentati de pe Internet au ajuns s se atepte c orice moment au nevoie de o comand rapid la pagina principal a site-ului, ei pot pur i simplu facei clic pe logo-ul siteului. Deoarece, aa cum webmasteri, dorim s facem site-urile noastre ca utilizabile posibil, astfel nct vizitatorii se pare uor pentru a ajunge la n cazul n care doresc s mearg pe site-urile noastre, este o idee bun pentru a aduga aceast facilitate a site-ul dvs., de asemenea. Reinei c, dei am spus logo-ul site-urilor n paii de mai jos, aceeai metod poate fi utilizat pentru orice imagine pe site-ul dumneavoastr. 1. Start up Dreamweaver i deschide pagina de web. 2. Facei clic o dat pe logo-ul site-ul dvs., sau orice alt imagine pe care dorii s fac ntr-un link, pentru ao selecta.

3. Uit-te la Properties Panel de la partea de jos a ferestrei Dreamweaver (vezi imaginea).

Dac dorii s utilizai o adres URL absolut pentru link-ul, introducei URL-ul manual n cmpul Link. De exemplu, n cazul n care pagina principal a siteului dvs. poate fi gsit la "www.example.com" i imaginea pe care dorii dumneavoastr s legtur ntr-o, de tip " http://www.example.com/ "(fr ghilimele) n acest domeniu i apsai tasta ENTER (sau tasta de returnare dac utilizai un Mac). Dac ai uitat ce nseamn un URL absolut, v rugm s revenii la seciunea privind URL-urile absolute i relative . Pe de alt parte, dac dorii s utilizai un URL relativ pentru link-ul, facei clic pe pictograma care arat ca un folder de lng cmpul URL. (Este de fapt un buton clickable.) O caseta de dialog intitulat "File Select" va aprea. Selectai fiierul pe care dorii s legtur ntr-, i facei clic pe butonul "OK". Dup cum este evident din aceast caset de dialog, avei posibilitatea s utilizai aceast metod numai pentru paginile web pe care le-ai creat deja, i care se afl pe site-ul dvs. propriu. Aa cum am menionat mai devreme, dac suntei conectarea la unele site-ul alt parte, va trebui s utilizai o adres URL absolut. 4. Introducei "0" (zero, fr ghilimele) n "Border" domeniul Properties Panel. Dac nu facei acest lucru, unele browsere va afia un contur albastru n jurul valorii de imaginea ta pentru a indica faptul c este un link. Prin introducerea "0", v dau de frontier cu o lime de la zero, mod eficient eliminarea. Asta e tot. Imaginea ta este acum un link.

Cum sa faci fragmente de text n Link-uri poate face clic

Aceeai metod este utilizat pentru efectuarea cuvinte, fraze, Exemple sau alte piese de text n link-uri. 1. Selectai textul pe care dorii s-l fac ntr-o legtur. Putei face acest lucru prin glisarea mouse-ul peste text pentru ao evidenia. 2. Fie tastai URL-ul absolut n "Link" cmpul din panoul Properties (i a lovit tasta Enter sau Return), sau facei clic pe pictograma folder n apropierea acestui cmp pentru a selecta fiierul (i facei clic pe butonul OK). Dac nu suntei sigur ce vorbesc despre aici, v rugm s mergei napoi i s citii seciunea de mai sus pentru a face o imagine ntr-un link.

Cuvintele tale ar trebui sa apara acum ca text subliniat n Dreamweaver.

Edituri i Testarea site-ul dvs.

Publicarea site-ul dvs. i testai-l n browser-ul dvs. ca i nainte. Dac primii un " fiier 404 Not Found ", mesaj de eroare cnd ncercare link-ul de pe pagina dvs., nseamn c v-ai legat la o pagin inexistent. Dac ai intenionat legtur ntr-ul de la punctul la pagina de pornire (care ar trebui s existe n mod evident, din moment ce este foarte pagina face legatura), aceasta nseamn, probabil c ai ncercat s utilizai o adres URL absolut i le-ai fcut erori de tastare n adresa dumneavoastr. Desigur, dac n mod deliberat legat la o pagin care nu ai creat nc (dar intenioneaz n viitor), apoi eroare 404 a avut loc, deoarece nu ai creat pagina nc. ntr-un astfel de caz, nu va faceti griji, eroarea va disparea, atunci cnd creai de fapt pagina. Pe de alt parte, dac v-ai conectat la un alt site-ul (nu proprii), i ai o eroare 404, aceasta nseamn, probabil c ai tastat greit link-ul.

Cum s Personalizai Bar site-ul dvs. de navigare meniu cu Dreamweaver CS5

de Christopher Heng, thesitewizard.com Multe site-uri au un set comun de link-uri pe fiecare pagina in principalele seciuni ale site-ul lor. Aceste link-uri ofer vizitatorilor o modalitate rapid de a accesa alte pri ale site-ului. Ele sunt de obicei poziionate ntr-un loc standard, pe o pagin web, i sunt uneori mbrcat pentru a arata ca butoanele clickable. Prin convenie, acest set de link-uri este numit de ctre webmasteri ca un "meniu de navigare". Acest capitol a CS5 Dreamweaver Tutorial v arat cum putei personaliza meniul de navigare pe site-ul tau. Reinei c voi asuma n acest articol c ai fost n urma capitolele anterioare de tutorial. Dac acest lucru nu este adevrat, poate dorii s ncepei cu capitolul 1 . De fapt, dac sunt complet noi pentru site-uri web crearea, cei mai multi oameni afla articol Cum sa faceti / Creare site-ul propriu: Ghidul incepatorului AZ un punct de plecare mai.

Scopul acestui capitol

Pn la sfritul acestui capitol, vei ti cum s adugai i elimina elemente din meniul de navigare, modificai textul din meniul de butoane n clickable, i personaliza culorile ("personaliza culorile", dac utilizai o varianta alte de limba englez ) a butonul de meniu. Acest capitol discut, de asemenea, cteva modaliti de a rezolva problema de coloane inegale pe pagina ta web.

Cum se modific Butoane n meniul de navigare

Aa cum am Sunt sigur c v-ai dat seama deja, pagina web pe care l lucreaz n prezent, derivate din ablon Dreamweaver CS5 lui coloana doi, are deja scheletul unui meniu de navigare construit n coloana din stnga acestuia. Este de fapt functii oarecum ca meniul thesitewizard.com 's, pe care o putei gsi n coloana din stnga a acestei pagini, care suntei lectur, n care ori de cte ori tu hover mouse-ul peste un buton, acesta i schimb culoarea. Singurul motiv pentru care meniul nu apare pentru a lucra n acest moment este c nu am artat, de fapt, "Link unu", "Link doi", etc, butoane pentru a oriunde utile. 1. Start up Dreamweaver i deschidei "index.html" pagina. 2. Selectai cuvintele "Link unu" prin glisarea mouse-ul peste ele, i "Home" de tip (fr ghilimele). Acest lucru va nlocui cuvintele existente. Alternativ, avei posibilitatea s facei clic pe mouse-ul undeva, n aceste cuvinte i de a folosi DEL-ul sau tasta Backspace pentru a elimina cuvinte existente, i s le nlocuii cu "Home". Lsai cursorul text n acel buton. Nu facei clic n alt parte. n panoul IMOBILIARE din partea de jos a ferestrei Dreamweaver, nlocuii hash ("#") mrcii n "Link" cmpul cu URL-ul paginii dvs. de origine. Dac nu suntei sigur ce vreau s spun, v rugm s revenii la Capitolul 5: Cum sa faci imagini i textul n link-uri face clic cu Dreamweaver CS5 . Singura diferen ntre ceea ce descriu eu aici i ce ai fcut n ultimul capitol este faptul c, aici, le-ai luat pentru a terge "#" marca prima. Avei acum o "Acasa" buton ca butonul de top din meniul de navigare, ce indic spre site-ul dvs. de start, initiala lui. Cu alte cuvinte, exist acum 2 linkuri pe pagina dvs. web la acest aspect la pagina dvs.: logo-ul site-ul i "Acas" butonul de meniu de navigare. Aceasta este o practic standard pe multe siteuri. 3. Acum modifica alte butoane, astfel incat sa obtii cu urmtorul text (n orice ordine dorii): o Faceti o "Harta site-ului" buton cu un link ce indic spre " sitemap.html "(fr ghilimele). Dac preferai URL-urile absolute (explicate n capitolul 5 ), face punctul de legtur ntr-" http://www.example.com/sitemap.html "(fr ghilimele). Ar trebui, desigur, nlocuii " www.example.com "cu adresa ta de web real. Not: tiu c nu avei o pagin numit "sitemap.html" nc. Vei fi aceasta crearea n capitolul urmtor. Din moment ce nu exist n acest moment, dac utilizai URL-uri relative, evident nu va fi capabil s facei clic pe butonul dosarul pentru a selecta un fiier, astfel nct doar tastai " sitemap.html "(fr ghilimele) n cmp Link, nlocuind "#" semn.
o

Faceti o "Feedback" buton cu un link ce indic spre " feedback.html "(fr ghilimele). Dac nu v place cuvntul "Feedback", utilizarea "Contact", "Formular de contact" sau "Support",

sau ceva de genul asta. Ca i nainte, dac preferai s utilizai URL-uri absolute, punctul de legtur ntr-"http://www.example.com/feedback.html "in loc. Din nou, nlocuii www.example.com cu URL-ul real. Important: chiar dac v creai un buton numit "Formular de contact" sau "Support", sau un alt lucru, link-ul trebuie s punctul de la " feedback.html "(sau versiunea URL-ul absolut al" http://www.example.com/ feedback.html "). Acest lucru se datoreaz faptului c vom crea o forma de feedback cu un nume de fiier de feedback.html pentru site-ul dvs. n capitolul 8, i dac i schimbi link-ul de aici, butonul va duce la o fiier 404 Not Found eroare. Permitei-mi s spun c din nou: schimba eticheta vizual pe buton pentru a orice cuvant (sau cuvinte) iti place. Dar numele de fiier trebuie s rmnfeedback.html (sau versiunea URL absolut).
o

Opional: Dac dorii, putei face, de asemenea, un "Despre noi" buton cu un link ce indic spre " about.html "(fr ghilimele). Ca i nainte, putei utiliza un URL absolut n cazul n care este ceea ce ai fost utilizai de mai sus. Un "Despre noi", pagina este folosit de unele site-uri, n special cele comerciale, pentru a oferi vizitatorilor unele informaii despre persoanele sau compania din spatele site-ul web. Pentru site-uri personale, unii webmasteri locul CV-ul lor sau un curriculum vitae aici, probabil pentru a atrage potentialii angajatori. Acesta este un buton opional. Nu trebuie s legtur ntr-o "Despre noi", pagina dac nu avei n plan pentru a crea o astfel de pagin mai trziu.

n funcie de dac ai creat "Despre noi", buton sau nu, avei fie un singur buton neutilizate (cu cuvintele "Link patru") sau nu mai multe butoane din stnga. Nu intrai n panic.Doar citii mai departe. Seciunile urmtoare v vor arta cum s adugai butoane noi i terge butoanele din meniul tau.

Cum s adugai butoane suplimentare la meniul de navigare

Pentru multi webmasteri, patru butoane nu sunt suficiente pentru a conine toate linkurile importante pe care le dorii s plasai n meniul lor de navigare. Pentru a aduga butoane suplimentare n meniul dumneavoastr, procedai n felul urmtor. 1. Pune cursorul de text n ultimul buton din meniul de navigare, fcnd clic pe mouse-ul undeva acolo. Utilizai tastele sgeat de pe tastatur pentru a muta cursorul la sfritul cuvntului (sau cuvinte), n acel buton.

2. Hit tasta ENTER (sau RETURN tasta pe un Mac). Un buton nou va fi creat. Cu toate acestea, acest buton pe noi nu va avea aspectul de cele precedente. Nu v facei griji. Citete mai departe. 3. Tastai cuvntul sau cuvintele pe care dorii s apar pe acel buton. De exemplu, dac avei un "Pret" pagina, de tip "Lista de preturi" (fr ghilimele) n acel spaiu. Da, tiu c cuvintele nu va fi centrat ("centrat"), pe pagina i culoarea de fundal este n continuare greit. Acest lucru se va schimba n pasul urmtor. 4. Selectai cuvintele pe care tocmai ai tastat. Din nou, un mod de a face acest lucru este de a trage mouse-ul peste aceste cuvinte. Lsai aceste cuvinte selectate i du-te imediat la pasul urmtor. 5. Introducei URL-ul (dac absolut sau relativ) de faptul c, n pagina "Link" cmpul din panoul PROPRIETI. (Doar facei clic pentru a plasa cursorul text n "Link" cmp i tastai adresa paginii pe care dorii s o legtur.) Dac v simii un sentiment de deja-vu aici, e pentru c este exact aceeai procedur utilizat pentru a crea dvs. Alte link-uri text n capitolul anterior. Cnd ai terminat de scris URL-ul dvs., apsai tasta ENTER (sau RETURN tasta pe un Mac). Aspectul a butonului se va schimba imediat pentru a se potrivi cu cele ale celorlalte butoane furnizate de Dreamweaver. Paii de mai sus pot fi repetate pentru a crea butoane ct mai multe dup cum dorii.

Cum Pentru a terge un buton din meniul de navigare

Dac ai creat una prea multe butoane, i dorii s eliminai unul dintre ei, aici e un mod de a face asta. 1. Selectai textul de pe butonul pe care dorii s o tergei. De exemplu, putei face acest lucru prin glisarea mouse-ul peste cuvintele pe buton pentru ao evidenia. 2. Apasati tasta DEL. Astfel, se elimin cuvintele, dar las un decalaj ngust orizontal n meniul dumneavoastr. 3. Mutai indicatorul mouse-ului astfel nct s fie n mod direct peste spaiul ngust n acest decalaj. Facei clic pe butonul mouse-ului dreapta. 4. Un meniu pop-up ar trebui s apar. Facei clic pe "Remove Tag <li>", articol de pe acel meniu. Butonul dvs. ar trebui s dispar.

Cum s Modificarea de culoare a butoanelor de meniu de navigare

Butoanele de meniu nu sunt exact la fel ca i alte texte n pagina dvs. web. Aa cum am Sunt sigur c tii deja c atunci cnd ai testat site-ul dvs. n capitolele anterioare, atunci cnd mutai mouse-ul peste aceste butoane ntr-un browser web, schimba culoarea butoanelor. (Nu vei putea vedea care schimba culoarea in Dreamweaver, deoarece este un editor web , nu, un navigator de web real.)

Avnd n vedere acest lucru, dac dorii s modificai culoarea de butoane de meniu, exist dou seturi de culori pe care le putei juca i cu. Culoarea normala a butonului mouse-ului atunci cnd nu este plutind peste ea, i culoarea a butonului mouse-ului atunci cnd o mut peste el. Important: paii de mai jos presupune c suntei familiarizai cu procedura predate n capitolul 4 pe Cum Pentru a modifica fundalul de site-ul tau in Dreamweaver CS5 . Este exact aceeai procedur. Este posibil s dorii s revizuiasc acest capitol, dac ai uitat-o. 1. Plasai cursorul de text ntr-unul dintre butoanele de meniu de navigare. O modalitate de a face acest lucru este s facei clic undeva n "Acas" buton. De fapt, nu conteaz cu adevrat n cazul n care terenurile cursorul pe textul, atta timp ct este ntr-unul dintre butoane. 2. Uit-te n panoul CSS STILURI pe partea dreapta a ferestrei Dreamweaver. Observai urmtoarele dou rnduri n seciunea de Reguli: o Linia " ul.nav a, ul.nav a: visited <A> "este linia de a DoubleClick dac dorii s configurai culoarea butonului normal (atunci cnd mouse-ul este nusitundu-se peste ea). o Linia " ul.nav a: hover, ul.nav ... <A> "este linia de a DoubleClick dac dorii s configurai culoarea buton cnd indicatorul mouse-ului este plutind peste el.(Uita-te pentru cuvntul "hover", n linia dac avei probleme cu diferena ntre cele dou linii.) Asigurai-v c DoubleClick doar una dintre cele de mai sus dou linii. Nu DoubleClick " a: hover, a: active, a: f. .. <a> "linia. Aceasta este pentru link-uri normale de pe pagina dvs. web. Linia pe care l cutai trebuie s nceap cu textul " ul.nav ". (Dac nu putei localiza aceste dou linii, asigurai-v c ai fcut clic undeva intr-unul din butoanele de meniu pe care ar putea avea, de asemenea, pentru a defila n jos seciunea de Reguli.. Dac nu putei gsi chiar i seciunea de Reguli, v rugm s remprosptare Dvs. de memorie uitandu-se la capitolul 4 din nou.) 3. CSS Definiie articolul caseta de dialog care suntei, probabil, familiarizat cu de acum va aprea. Facei clic pe linia de fundal n coloana din stnga. Coninutul de partea dreapt a casetei de dialog trebuie s se schimbe. 4. Facei clic pe caseta Alegere culoare de lng "background-color" cmp pentru a schimba culoarea. 5. Cnd ai terminat, nu uitai s facei clic pe "OK" buton de pe articolul caseta de dialog Definiie CSS.

Curarea ocupa restul din coloana stanga

n acest moment, pagina dvs. de pornire este aproape complet. Tot ceea ce rmne este de a terge textul substituent n meniul de navigare de utilizator (presupunnd c nu ai fcut deja acest lucru). Acesta este textul manechinului care ncepe "link-uri de mai sus demonstreaz o structur de baz de navigaie ..." (Etc). Textul poate fi eliminat n acelai mod de a terge orice alt text pe pagina dvs. de web, care este, fcnd clic pe butonul pentru a pune cursorul de text undeva printre cuvintele i folosind DEL sau tasta Backspace. Cnd ai fcut asta, iti vei da seama, probabil, c ai creat o noua problema. Coloana din stanga este acum n mod substanial mai mic dect coloana din dreapta. (Bine, nu ai creat de fapt aceast problem. A fost acolo tot timpul, deghizat numai de textul substituent Dreamweaver pus n acea coloan n orice caz, nu putei lsa exact textul substituent acolo, n site-ul dvs...)

Cum Pentru a rezolva problema a Coloane inegale pe pagina Web

n funcie de schema de culori i ct de mult textul ai plasat n coloana din dreapta, coloana din stnga scurt pe pagina de web poate fi fie un spin n ochi ngrozitor sau nici macar notabile. Dac nu suntei sigur ce vorbesc despre aici, aceasta nseamn, probabil, c n conformitate cu rezoluia ecranului curent, coloana din dreapta este de aproximativ aceeai lungime ca i coloana din stnga. O alt posibilitate este c ai setat aceeasi culoare pentru ambele coloane dumneavoastr, precum i pentru spaiul din spatele celor dou coloane. n caz contrar, vei avea observat probabil ca coloana din stanga opriri scurte la jumtatea de jos a paginii, deoarece coloana din stanga, dup toate probabilitile, este mai mic dect coloana din dreapta. i este vizibil tot mai mult, deoarece, n mod implicit, aceasta are un fundal non-alb, n contrast cu coloana din dreapta i de spaiul din spatele celor dou coloane. Exist dou modaliti de rezolvare a acestei probleme.

Vioar cu Culori Context: De exemplu, Set color aceeai pentru ambele coloane i spaiul din spatele

Cel mai simplu mod n jurul valorii de acest lucru este pentru a seta culoarea de fundal aceeai pentru coloanele din stnga i dreapta, precum i pentru spaiul din spatele lor. Aceasta este soluia-am adoptat pentru thesitewizard.com. Trebuie doar s te uii la pagina pe care o lectur pentru a vedea ce vreau s spun. Coloana din stnga este de fapt foarte mult mai scurt dect coloana din dreapta. Dac am stabilit o culoare de fundal diferite pentru acea coloan, vei observa imediat c acesta nu se extinde tot drumul n jos a paginii. Dar din moment ce nu am, doar coloana din stnga arat ca un plasture de spaiu gol n cazul n care am past meniul meu de navigare i alte materiale. Cu alte cuvinte, nu arata cu adevarat ca o coloan.

Dac dorii s luai aceast abordare, a reveni la capitolul privind stabilirea culorile de fundal n Dreamweaver CS5 pentru a schimba culorile celor trei seciuni. Reinei c fundalul pagina web nu trebuie s fie a mea alb ca pentru aceasta s funcioneze. Daca esti creativ, poi s te joci n continuare n jurul valorii de cu culori i / sau imagini de fundal, astfel nct s ofere site-ul dvs. cu un aspect unic.

Adaug Lines Blank la coloana stng

O alt modalitate este de a aduga linii necompletate n coloana din stnga. Pentru a face acest lucru, doar s facei clic undeva in spatiul de sub meniul de navigare (n cazul n care ai ters doar textul lui Dreamweaver substituent). Apoi a lovit ENTER (sau RETURN) ori tasta de mai multe pn cnd coloana are lungimea dorii. Acest lucru nu este cu adevrat o metod foarte simplu de manevrat, deoarece browserele web va redimensiona coloanele dumneavoastr pagin Web pentru a se potrivi monitoarele vizitatorilor dvs. calculator. Ce ar putea s apar pe computerul dvs. ca coloanele perfect echilibrat ar putea s apar peo fereastr de browser mari sau mai mici ca inegal ntr-un fel. Cel mai bun poti sa faci in acest caz este de a testa n cadrul rezoluii de ecran comune i asigurai-v c site-ul dvs. arat bine n mod rezonabil n conformitate cu cele mai comune. De altfel, capacitatea de pagina dvs. de web a se adapta la dimensiunile ferestrelor de diferite marimi si monitor este consecina de a folosi un "lichid" aspect (din pagina dvs. se bazeaz pe cele dou Dreamweaver aspect lichid coloan). Dac suntei interesat de a ti mai multe despre acest lucru, v rugm s citii Care este diferena dintre lichid, elastic, relativ, Aspecte Fluid, flexibile i fixe? Acest articol a precedat toate acestea Dreamweaver CS5, i astfel se refer la abloane suplimentare utiliznd "elastic" i " Hybrid "aspecte. Aceste aspecte nu mai exist n CS5, probabil pentru c ele sunt de prisos i, n opinia mea, nu, de fapt, utile n viaa real.

Salvarea, Edituri i Testare

Dup ce ai terminat de configurat, salvai lucrul cu "File | Save All" (nu "File | Save" dac s-au schimbat culorile). Apoi public i de ncercare site-ul dvs. la fel ca nainte. Acum, c pagina dvs. de pornire este complet, trebuie s luai timp pentru a verifica site-ul dvs. n conformitate cu rezolutii diferite. Nu trebuie s cumpere mai multe computere pentru a face acest lucru. Redimensiona Pur i simplu browser-ul web. Dac utilizai Windows, un mod de a face acest lucru este de a utiliza metoda am menionat n articolul meu modul de a testa site-ul dvs. n conformitate cu rezoluiile de ecran sub Windows Easy Way . Alternativ (dac utilizai Windows, Mac,

Linux sau FreeBSD), descrca i instala gratuit Opera browser-ul, mergei la ei "Tools | Preferences" meniu, facei clic pe fila Complex, selectai linia Navigare n coloana din stnga, i s verificai caseta "Web Afiare dimensiuni de pagin n bara de titlu". Folositi Opera pentru a ncrca site-ul dvs., redimensiona fereastra la anumite rezoluii de ecran comune cum ar fi 1024x768, 1280x800, 1366x768, 1680x1050 i aa mai departe. Uit-te la partea de sus a ferestrei Opera (n bara de titlu), n timp ce redimensionai, astfel nct putei obine limea ecranului dorit. inei cont de faptul ca voi testa meniul de navigare pe pagina de acas pe care nu ai creat de fapt, la oricare dintre alte pagini link-urile dvs. de meniu pentru a (altele dect Pagina principala). Ca rezultat, vei primi, probabil, 404 Fiier negsit erori atunci cnd facei clic pe butoane, altele dect "Acas" buton. Acest lucru este normal asa ca nu intra in panica atunci cnd se ntmpl. Vom stabili cele mai multe dintre aceste fiiere nu a fost gasit erori n capitolul urmtor. (Desigur, dac avei un fiier nu au gsit de eroare cnd facei clic pe butonul Home, atunci ai nevoie pentru a stabili link-ul la pagina de pornire, dat fiind c deja exist.) Dac totul funcioneaz, felicitri sunt n ordine. Ati terminat pagina site-ului dvs. acas.

Cum de a gestiona i Auto-Update mai multor pagini pe site-ul dvs., cu sistem Format Dreamweaver CS5 lui
de Christopher Heng, thesitewizard.com Aproape toate site-urile au mai mult de o pagin. Crearea de mai multe pagini pentru un site web este o sarcin relativ simplu; lucrurile devin o problem numai atunci cnd dorii s facei o schimbare de design care afecteaz toate paginile siteului. Imaginai-v c pentru a merge prin fiecare pagin pe un site cu sute de pagini, doar pentru (s zicem) a aduga un nou buton la meniul de navigare dumneavoastr. Iat n cazul n care Dreamweaver CS5 strlucete n ajutndu-v s automatizai sarcina de crearea i meninerea unui site web cu mai multe pagini. Din moment ce acest lucru este capitolul 7 din Tutorial Dreamweaver CS5 serie, va trebui probabil s nceap cu capitolul 1 , dac nu sunt deja foarte familiarizai cu Dreamweaver CS5. Eu va asuma cunoatere a tuturor lucrurilor le-am menionat n capitolele anterioare. n plus, pentru cei care sunt complet noi pentru a face un site web, am recomandm insistent s citii Cum sa faceti / Creare site-ul propriu: Ghidul incepatorului AZ primul.

Scopul acestui capitol

Pn la sfritul acestui capitol, va trebui creat aproape toate paginile site-ului. Vei nva, de asemenea, cum s foloseasc sistemul Dreamweaver CS5 de ablon pentru a crea noi pagini pe baza de design personalizat i aspectul c ai fost de lucru privind n capitolele anterioare, precum i pentru a automatiza actualizarea toate paginile site-ului dumneavoastr cnd efectuai un design schimbare. n cele

din urm, vei nva cum s obinei de asemenea, Dreamweaver pentru a determina automat pe care paginile din site-ul dvs. pentru a ncrca, fr a fi nevoie s v deschidei manual si upload fiecare dintre ele.

Introducere n facilitii Format Dreamweaver lui

Dac ne uitm la toate paginile de pe thesitewizard.com, va trebui observat probabil ca, practic, fiecare pagin mprtete acelai aspect de baz. Exist un logo i un meniu de navigare n coloana din stnga, i specifice de coninut pentru fiecare pagin este gzduit n coloana din dreapta. Acest design comun este rezultatul meu bazndu toate paginile mele pe un ablon care conine toate elementele de mai sus (logo-ul, meniul de navigare, 2 aspect coloana, etc). Utilizarea unui ablon face treaba de a aduga noi pagini la thesitewizard.com mult mai uor dect ar fi fost altfel: n orice moment Doresc s adaug un nou articol, tot ce trebuie s facei este s utilizeze aceast ablon particularizat i inserai coninutul meu articol n coloana din dreapta. Nu numai Dreamweaver v permite s creai un astfel de personalizat ("personalizate", n celelalte variante de limba englez template) pentru site-ul dvs., sistemul de template include, de asemenea caracteristici suplimentare menit s fac un webmaster de sarcini tipic mai productive. n special, dac v decidei vreodat s modificai proiectarea de site-ul dvs., tot ce trebuie sa faceti este de a modifica ablonul, Dreamweaver i va actualiza automat toate paginile de pe site-ul dvs. derivate din acest ablon. Nu avei nevoie pentru a merge manual pe fiecare pagin pentru a face aceste modificri de proiectare. Pentru a facilita aceast caracteristic de actualizare automat, Dreamweaver v cere s indicai care portiuni din pagina dumneavoastr constituie partea fix a design-ul i care conin poriuni de coninut care variaz de la o pagin la alta. Vom face acest lucru de mai jos.

Cum sa creezi un ablon n Dreamweaver CS5

1. Start up Dreamweaver CS5 i deschidei "index.html" fiier pe care ai fost de lucru privind n capitolele anterioare. Pentru cei care au uitat cum se face acest lucru, DoubleClick "index.html" de linie n panoul de fisiere (gsite pe partea dreapta a ferestrei Dreamweaver). 2. Facei clic pe "File | Salvare ca ablon ...". Dup cum vei aminti, aceasta este prescurtarea pentru notaia meu fcnd clic pe butonul "File" articol de pe bara de meniu, i atunci cnd meniul drop-down apare, facei clic pe "Salvare ca ablon ..." element n acest meniu. 3. O caset de dialog intitulat "Salvare ca ablon" va aprea. Facei clic pe butonul "Salvare". 4. Un alt caseta de dialog declarnd c "legturile de actualizare?" ar trebui s pop-up. Facei clic pe butonul "Yes". 5. Cnd facei acest lucru, Dreamweaver va crea un subfolder nou, numit "abloane", n directorul site-ul dumneavoastr. Tu ar trebui s poat vedea

acest nou dosar n panoul de fiierele. Pagina vedei afiat n Dreamweaver este, de asemenea, nu mai este " index.html ", ci un fisier numit" index.dwt ". Acesta este fiierul ablon.Se pare ca exact de start, initiala dvs. la momentul deoarece ai utilizat pagina dvs. de acas ca baz pentru acest ablon (prin intermediul "Fiier | Salvare ca ablon ..."), dar putei verifica dac avei ntr-adevr, nu mai lucreaz la dumneavoastr" index.html "fiier de uita n sus la tab-ul sub bara de meniu in Dreamweaver (lng partea de sus a ferestrei Dreamweaver). Fila ar trebui s spun index.dwt n loc de index.html . Acum va trebui s decid care parte a paginii web va fi invariant pe site-ul dvs., i care va conine poriuni de coninut care va fi diferit de la pagina la pagina. Pe cele mai multe site-uri, logo-ul site-ului si coloana din stnga (care conine meniul de navigare) sunt de obicei considerate parte a proiectului stabilit pentru site-ul web.(Dac nu suntei sigur ce vreau s spun, aruncai o privire la o parte din coloana thesitewizard.com e stnga conine logo-ul siteul, cmpul de cutare i meniul de navigare Este exact aceeai pe fiecare pagin a site-ului..) Este, de obicei, doar coloana din dreapta care are un coninut variabil. n mod implicit, Dreamweaver ceea ce privete ntregul ablon, ca parte a design-ul fix. Dac dorii ca orice parte a paginii dvs. s conin informaii diferite de ceea ce vedei n ablonul dvs. acum, vei avea nevoie pentru a marca faptul c poriunea ca "editabile". Putei avea ct mai multe regiuni editabile n ablonul dvs. aa cum dorii, i regiuni editabile dvs. pot fi intercalate cu coninut invariante. Regiunea dvs. editabile poate fi la fel de mici ca un singur cuvnt pe pagina dvs. (sau chiar o scrisoare sau cifr, dac dorii), sau la fel de mari ca i coninut al intregii coloane (probabil chiar toat pagina, dar c va nvinge ntregul scop de a folosi un ablon). Cu alte cuvinte, este de pn la tine pentru a decide ce s fac i ceea ce editabile s plece ct mai fixe. Pentru a v asigura c suntei clar despre ce vorbesc aici despre, permitei-mi s scoat implicaiile regiunilor imobilizate si editabile n ablonul dvs.. Cnd v decidei c o seciune a paginii web este de a rmne parte a proiectului fixe, Dreamweaver nu te va lasa sa schimba faptul c poriunea n paginile web individuale, care sunt derivate din acest ablon (din moment ce ar trebui sa fie fix). Dar tu eti nc n controlul aici. n orice moment dorii, putei modifica n continuare de proiectare a poriunii fixe n cadrul ablonului . Dac faci asta, Dreamweaver va presupune c dorii s schimbai aspectul site-ul dvs. ntregi, i procedeaz pentru a merge prin fiecare pagina web bazate pe acest ablon i actualizeaz-l la design-ul nou. Ca atare, dac dorii s pun coninut unic n anumite seciuni ale paginii web, vei avea nevoie pentru a marca aceste seciuni ca "editabile". Permitei-mi s sugerez c aceasta se numr, probabil, imense din coloana dreapta, i

poriunea data (sau mai exact, anul) a privind drepturile de autor din subsol dumneavoastr. 6. Pentru a marca o zon ca editabil, tragei mouse-ul peste zona respectiv pentru ao selecta. Aa cum am spus mai devreme, nu esti limitat in ceea ce puteti selecta.Dac dorii, putei chiar s selectai toate titlurile, sub-headers, i punctele n coloana din dreapta ntr-un du-te. 7. Facei clic pe "Inserare | Obiecte Template | Regiune Editable" din meniu. 8. O caset de dialog, intitulat "Regiunea New editabile", va aprea, cerndu-v pentru a numi aceast regiune editabile. Aceasta este doar o etichet intern de referin pentru dvs. personal: numele pe care il dau, nu vor fi afiate n partea vizibil a site-ului dvs. real. n timp ce poate accepta numele implicit dat de Dreamweaver (probabil unele nume cum ar fi nefolositoare "EditRegion3" sau altele similare), n cazul n care v putei gndi la un nume mai semnificativ, c n loc s utilizai. Exemple de nume de utile: "Titlul paginii", "Coninut pagin", "Anul Drepturi de autor", "Descriere produs", "Nume produs", etc Oricum, este doar o etichet intern, aa c nu pierde somn peste el. Chiar dac l-ai eticheta cu unele nume criptice cum ar fi "Seciunea 1", este puin probabil s v mpiedice n nici un fel n viitor. Cele mai multe webmasterii stiu ce vor diverselor poriuni ale paginii web lor pentru a conine, indiferent dac au sau nu o etichet cu un nume relevant. 9. Facei clic pe butonul "OK". Seciune marcat va fi acum subliniate ntr-o caset albastr, i o etichet mici care conin numele l-ai dat va aparea pe partea din stnga sus de acea caset. Nu v facei griji. Aa cum am spus mai devreme, vei vedea numai aceast caset i eticheta n cadrul Dreamweaver sine. (E menit s v ajute s gsii toate regiunile editabile.), Nu vor aprea cnd vor vedea site-ul dvs. ntr-un browser web. 10. Du-te i repetai paii de mai sus pentru orice alta regiune a paginii web pe care dorii s facei editabil, oferind fiecare regiune un alt nume. Regiunile nu trebuie s fie nvecinate sau ceva de genul asta. 11. Cnd ai terminat marcarea regiuni editabile a ablonului dvs., facei clic pe "File | Salvare". n funcie de ce ai ales cnd ai creat dvs. regiuni editabile, putei obine o caset de dialog care apare cu un mesaj de genul "ai plasat regiunea editabil" [Unele nume-sau-alte] "in interiorul unui tag bloc. Utilizatorii din acest ablon, nu va fi capabil s creeze blocuri noi n aceast regiune. Mutai n afara regiunii tag-ul blocului dac dorii ca utilizatorii s fie capabil s fac acest lucru. " n cazul n care [Unele-name-sau-alte] este numele uneia dintre regiunile editabile. Doar facei clic pe butonul "OK".

Cum sa asociat pagina de start cu dvs. de abloane

Acum, c ai creat un ablon pentru site-ul dvs., putei crea cu uurin noi pagini web pentru site-ul dvs., fr a fi nevoie s treac prin tot ceea ce ai fcut dumneavoastr n capitolele 1 - 6 peste tot din nou. Cu toate acestea, nainte de a v

face asta, va trebui s se asocieze pagina dvs. de pornire cu acest nou ablon le-ai fcut. Amintii-v c pagina dvs. de pornire a fost creat nainte de a le-ai fcut acest ablon. Ca atare, n acest moment, dac modificai de design n ablonul dvs., Dreamweaver nu se va actualiza pagina dvs. de pornire, deoarece nu vor da seama c cele dou sunt conectate n nici un fel. Exist mai multe moduri de a face acest lucru, dar modul cel suparatoare este pur i simplu pentru a suprascrie vechiul "index.html" fiier cu o nou pagin de la ablonul creat. Din moment ce nu au modificat de fapt, ablonul dvs. n nici un fel (altele dect pentru a aduga regiuni editabil), vei termina cu o nou "index.html", care va aprea identic cu vechi "index.html", ci unul care Dreamweaver va considera ca fiind derivate din ablonul. 1. nchidei toate fiierele fcnd clic pe butonul "File | Close All". Dei acest pas nu este strict necesar, experiena mea de lucru cu noii venii este c, dac nu face acest lucru, poate ajunge accidental n sus de lucru cu privire la dosar greit mai trziu, dac facei clic pe ceva gresit de accident. 2. Facei clic pe "File | New". Vei fi ntmpinai de ctre familiar vechiul caseta "document nou", dialog care v ntlnit n capitolul 1. 3. Uit-te n coloana din stnga de care caseta de dialog i facei clic pe linia "de la pagina Format". 4. Ar trebui s vedei acum numele de site-ul dvs. n "Site-ul" coloana, i numele de "index" n adiacente "ablon pentru site-ul" [ta-site-name] "," coloana. O imagine miniatur a ablonului dvs. ar trebui s apar, de asemenea, pe partea dreapta a paginii. (Nu v facei griji n cazul n care imaginea miniatur nu este foarte precis n reprezentarea sa din site-ul tu.) Asigurai-v c caseta "Actualizare pagin atunci cnd se schimb ablonul" este verificat. (Ar trebui s fie n mod implicit, dar asigurai-v c oricum.) Facei clic pe "Create" buton. 5. Ar trebui s vedei acum o pagin identic cu pagina de domiciliu. Facei clic pe "File | Save As ...". 6. "Save As" caseta de dialog ar trebui s apar. Facei clic pe "index.html" filename n fereastr pentru ao selecta. Filename "index.html" (fr ghilimele), ar trebui s apar n "File name" cmp. Facei clic pe butonul "Salvare". 7. O caset de mesaj cu textul "fiier ai selectat exist deja Dorii s suprascriei acest fiier?". va aprea. Facei clic pe "Da". Pagina dvs. de pornire original a fost acum suprascris cu o versiune mai nou. n timp ce aceast nou versiune pare identic cu cel vechi ntr-un browser web, care conine de fapt unor markeri invizibile, care va permite Dreamweaver s actualizeze automat dac ai face vreodat o schimbare de design din ablonul dvs..

Cum sa faci o pagin nou de la dvs. ablon Dreamweaver CS5

n acest moment, suntei gata s creai alte pagini pe site-ul tau. Ar trebui cel puin s creeze "Harta site-ului", pagina pe care anterior ai legat la meniul de navigare dumneavoastr. Dac ai creat, de asemenea, un buton ce indic spre dvs. "Despre noi" pagin, vei avea nevoie pentru a crea acea pagin prea.

Cum de a crea o harta site-ului

O harta site-ului este un sistem complet (sau poate chiar exhaustiv) lista cu toate paginile de pe site-ul dvs.. 1. Dac pagina dvs. de pornire este nc deschis, nchidei-l, fcnd clic pe "File | Close All". Din nou, acest lucru este optional, dar e bine sa o faci pentru a evita greelile neglijent mai trziu. 2. Facei clic pe "File | New ..." din nou, i selectai "de la pagina Format", n coloana din stnga, dac nu este deja selectat. 3. Asigurai-v c "index" ablon pentru site-ul dvs. este selectat, i "pagina de actualizare atunci cnd schimbrile ablon" este bifat caseta. Apoi facei clic pe "Create" buton. 4. Modificai cmpul Titlu n fereastra Dreamweaver pentru "Harta site-ului" sau "Harta site-ului - Exemplu Co" (n cazul n care "Co Exemplu" este numele site-ului dvs.).Pentru cei care au uitat unde cmpul titlu este, v rugm s consultai imaginea de mai jos, luate de la capitolul 1.

Vei avea nevoie s v amintii s schimbe acest domeniu titlu de fiecare dat cnd creai o pagin nou din ablonul dvs., sau toate paginile dvs. de web va avea acelai titlu. Nu v facei griji c nu ai marca acest domeniu titlu ca editabile n ablonul dvs.. Cmpul Titlul este considerat ntotdeauna un cmp editabil de Dreamweaver.
5. nlocui acum coninutul regiunea dumneavoastr editabil (e) de pe pagina cu o

lista de link-uri ctre toate paginile de pe site-ul dvs.. De exemplu, facei clic pentru a pune cursorul text n una din regiunile editabil, i de a folosi DEL sau tasta Backspace pentru a elimina coninutul existent. Apoi, tastai numele fiecrei pagini de pe site-ul dvs. pe o linie separat, i se face o legtur modul n care au fost predate n capitolul 5 .

Pentru cei care nu sunt sigur ce o harta site-ului arata ca, verificai thesitewizard.com e Harta site-ului . Este practic doar o list de link-uri ctre toate paginile de pe site-ul meu. (Nu fi distrai de utilizare meu din 3 coloane pe acea pagina Motivul pentru care am folosit 3 coloane nu exist pentru c am att de multe pagini pe thesitewizard.com c, dac am folosi aspectul meu implicit, c pagina va fi excesiv de lunga..) mi dau seama c, la acest moment, site-ul dvs. conine pagini att de puine pe care le simi, probabil, crearea prostesc o harta site-ului. Cu toate acestea, harta site-ului dvs. va deveni util, n timp, ca site-ul dvs. crete. Harta site-ului are un dublu scop de a mbunti gradul de utilizare a site-ul dvs., precum i contribuind la motoarele de cutare localizeze toate paginile de pe site-ul dvs.. Este posibil s dorii s citii articolul meu pe Aspect, Usability si Vizibilitate Motor de Cautare in Web Designdac nu eti convins. Dac gsii c lovind ENTER (sau RETURN) tasta creeaz prea mult spaiu gol ntre fiecare linie, i va prefera ca liniile s fie mai strns la distane mici, face acest lucru n loc de apsarea tastei ENTER. Dup ce tastai o linie, spune cuvntul "Home", facei clic pe "Inserare | HTML | Caractere speciale | Break Line" din meniu.(Dac utilizai Windows, avei posibilitatea s inei apsat tasta Shift i apsai tasta ENTER pentru a realiza acelasi lucru.) Nimic nu va aprea s se ntmple punct de vedere vizual, dar dac v imediat de tip "Feedback", dup care, vei vedea c " Feedback "este plasat ntr-o noua linie de mai jos" Acas ", fr o linie goal intervenie. Pentru curiosi, motivul pentru aceasta este faptul c tasta ENTER creeaz un nou alineat, prin urmare, linia suplimentare necompletate, n timp ce "sfrit de linie" se mut pur i simplu ceea ce urmeaz la linia de mai jos.
6. Facei clic pe "File | Save As ..." i de tip "sitemap.html" (fr ghilimele) n "File

name" cmpul din caseta de dialog care apare. Nu utilizati litere de capital (majuscule), se introduce spaii sau n alt mod care schimba numele fiierului. Dac vei face, nume dat de dumneavoastr nu se va potrivi URL-ul ai configurat anterior n meniul de navigare, i vei obine un fiier 404 Not Found eroare atunci cnd facei clic pe butonul Harta site-ului mai trziu. (Eu sunt presupunnd c aici, desigur, c ai urmat instruciunile mele de fapt, la capitolul 6 i a creat un buton pentru "Harta site-ului", artnd spre "sitemap.html" sau echivalentul su URL-ul absolut.) 7. Facei clic pe butonul "Salvare". Amintii-v pentru a reveni la Harta site-ului dvs. pentru a aduga o legtur ntr-o pagin nou care le creai pentru site-ul dumneavoastra. Aceasta include paginile pe care le creai mai trziu n acest capitol.

Cum de a crea o pagin Despre noi (opional)

Dac nu ai creat un buton la un "Despre noi", pagina n capitolul 6, nu ezitai s srii peste aceast seciune. Acesta este destinat numai pentru cei care doresc o pagina Despre noi. 1. Pn acum, ar trebui s fie destul de familiarizat cu crearea de pagini noi de la ablonul dvs., avnd n creat deja dou. Creai un alt unul acum. 2. nlocuii "Titlu", domeniu n noua pagin cu ceva de genul "Despre noi: Exemplu Co", unde "Co Exemplu" este numele site-ului. Alternativ, avei posibilitatea s utilizai "Despre Co Exemplu", "About Me" sau "Despre [Numele tau]", dac dorii. (De fapt, avei posibilitatea s utilizai orice titlu pe care dorii Nu exista reguli fixe despre titluri pagina ta.. Eu dau doar sugestii.) 3. nlocuii coninutul paginii dvs. cu orice doriti pentru a dezvlui despre compania dvs. sau pe tine nsui. Ca cu toate lucrurile pe Internet, s fie avizat cu privire la ceea ce spui, deoarece informaiile vor fi accesibile publicului. Nu tii cine va fi lectur site-ul dvs.: ea poate fi un viitor angajator, sau unele care triesc manivela n vecintatea dumneavoastr. 4. Salvai pagina ca "about.html" (fr ghilimele), din nou, presupunnd c ai folosit numele de fiier am sugerat n capitolul 6 pentru butonul de meniu de navigare.

Crearea Alte Pagini Web

Creai celelalte pagini ale site-ului dvs. n acelai mod. Atunci cnd dau nume de fiiere n paginile dvs. noi, este mai bine sa utilizati litere mici (minuscule) pentru toate numele de fiiere, fr spaii ntre ele, pentru a evita problemele. V rugm s consultai articolul Cum de a crea Numele Fiierelor bun pentru paginile dvs. de web pentru mai multe informaii. Nu , nu creai Formularul de feedback (sau formularul de contact) pagina nc. Vei face acest lucru n capitolul urmtor. Exist mai mult implicate n crearea-o form mult proiectarea doar o pagina web obinuit. Pentru paginile de important, poate dorii, de asemenea, modifica meniul de navigare pentru a aduga butoane pentru a le. Ceea ce constituie o pagin de important? Aceasta depinde de natura a site-ului. Dac vindei lucruri pe site-ul dvs., "Ordinul" sau "Cumpara acum", pagina (n cazul n care clienii dumneavoastr pot plasa o comanda), "List de preuri", pagina (n cazul n care v lista preurile produselor tale), i "Produse "pagina (n cazul n care v lista cu toate produsele pe care le vindei) ar trebui s fie considerate mai importante pagini. Acestea ar trebui s fie ntotdeauna n meniul de navigare dumneavoastr. A se vedea articolul meu este design-ul site-ului web alungarea Clienii dvs.? Unele sfaturi de baz la utilizare pentru site-urile comerciale pentru o discuie de acest lucru dac suntei crea un astfel de site. Pe de alt parte, dac suntei crearea unui site personal, pune orice crezi c vizitatorii vor dori s acceseze n acest meniu.

Din meniul de navigare nu este, probabil, ntr-o regiune editabil paginii web, va trebui s modificai ablonul pentru a include aceste butoane noi. Ceea ce ne aduce la subiectul din seciunea urmtoare.

Cum se modifica Format tau in Dreamweaver CS5

Dac gsii c avei nevoie s schimbai ceva n partea fix de site-ul dvs., de exemplu, pentru a modifica un buton existent sau pentru a aduga un nou buton la meniul de navigare, efectuai urmtoarele: 1. nchidei toate fiierele folosind "File | Close All". (Aceasta este doar o msur de precauie, se poate lsa de fapt, s le deschidei, dac tii ce faci..) 2. Deschidei ablonul. Pentru a face acest lucru, DoubleClick "abloane" dosar din panoul dvs. de fiiere (pe partea dreapta a ferestrei Dreamweaver). Acest lucru va extinde dosarul i s v arate "index.dwt" fiier. Dac doubleclicking cauzele dosarul abloane pentru a restrnge i a ascunde fiiere n loc, doar DoubleClick-l din nou. DoubleClick "index.dwt" fiier din acel folder. 3. Modifica ablonul aa cum ar fi orice pagina web obinuite. Asta este, tot ceea ce ai nvat n capitolele anterioare cu privire la editarea unei pagini web se aplic ablonul. 4. Cnd ai terminat modificrile, facei clic pe "File | Salvare". 5. Aceeai caset de dialog care v spune c ai pus unele regiuni editabile n interiorul unui bloc de etichet poate aprea din nou. Doar facei clic pe butonul "OK" pentru a-l demite. 6. O caset de dialog nou, intitulat "Actualizare fiiere ablon", va aprea. Caseta de dialog va lista toate paginile web derivate din acest ablon i s v ntreb dac Dreamweaver ar trebui s actualizeze toate aceste fiiere. Facei clic pe butonul "Actualizai". Aceasta va actualiza toate paginile web individuale cu modificrile pe care le-ai realizat-o. 7. Un alt caseta de dialog, intitulat "Pagini Update", va aprea. n momentul n care le vedei aceast caset de dialog, va Dreamweaver au modificat deja toate celelalte pagini de web pentru a include modificrile efectuate n ablonul. Mesajul este afiat numai pentru a raporta c locul de munc se face. Dac dorii s vedei o list de fiiere care aceasta actualizare, a pus un control n "Afiare jurnal" caseta fcnd clic pe ea. Cnd ai terminat, facei clic pe butonul "Close" pentru respingerea caseta de dialog. 8. Acum, facei clic pe "File | nchide" pentru a nchide ablonul. (Acest lucru este de a v proteja de la accidental de lucru pe ablon atunci cnd vrei s spui de a lucra pe unele pagini web individuale, putei s deschidei ntotdeauna din nou ntr-un moment mai trziu, atunci cnd cu adevrat nseamn a schimba ceva n ablonul..)

tiu c Sun ca un casetofon rupt, repetnd acelasi lucru vechi iar si iar, dar nu vor crede numrul de mesaje e-mail I primesc de la utilizatori se confrunt cu probleme, deoarece au ncercat s editai ablonul, atunci cnd menite s edit o pagin individual, sau invers. Acum, c ai nvat cum s editai att template-uri i pagini web normale, i avei mai mult de o pagin web pentru a gestiona, uita-te mereu la fila sub bara de meniu pentru a v asigura c suntei editarea lucru dreapta. Fiier ablon curent are un nume de fisier de "index.dwt". Dac vedei c pe fila activ actual, nseamn c suntei de editare ablonul. Dac fila prezinta un nume de fiier care se termin n "html"., Pe care le editai o pagin web normal. (i dac nu tii ce vreau s spun printr-un "tab", DoubleClick "index.html" fiier n panoul dumneavoastr FILES pentru ao deschide. Tu ar trebui s poat vedea un "index.html" tab-ul, mpreun cu o "x" pentru a nchide fila, chiar sub bara de meniu din partea de sus a ferestrei Dreamweaver.) Orice dat cnd vedei multe tab-uri n partea de sus, nseamn c avei cteva fiiere deschise n acelai timp. nva s recunoasc culoarea fila activ, cea care indic faptul c suntei pe care fiier care lucreaz n prezent. n acest fel, nu va modifica accidental fiierul greit. Nu e nimic in neregula cu avnd mai multe fiiere deschise, n acelai timp, majoritatea dintre noi fac asta tot timpul. Trebuie doar s fie atent la ceea ce suntei de editare, mai ales atunci cnd suntei nou de a lucra n acest fel.

Cum se public mai multe pagini Web Simplu Way cu Dreamweaver CS5: Utilizarea site-ului | Sincronizare
Acum, c site-ul dvs. are mai multe pagini, nu e mai eficient de a folosi "site-ului | Pune" pentru a ncrca site-ul tu. Aceast metod a fost util atunci cnd a avut o singur pagin pentru a publica. Cu mai multe pagini pentru a uploada, ceea ce ne dorim este o modalitate de a obine Dreamweaver pentru a descoperi care pagini au fost modificate (sau care sunt noi), precum i ncrca automat aceste fiiere modificate, noi sau. 1. Facei clic pe "site-ului | Sincronizare Sitewide ...". 2. O caset de dialog, "sincronizarea fiierelor", va aprea. Lsai opiunile implicite de "Sincronizare: ntregul" [-site-ul tau-Name] 'Site-ul "" Direcie: Pune fiiere noi de la distan "i, i facei clic pe" Anun ... " buton. Dreamweaver se va conecta apoi la site-ul dvs. pentru a afla ce fiiere au fost publicate anterior (i, probabil, de asemenea, data lor de publicare). Atunci cnd se face, vei vedea o caset de dialog nou, "Sincronizare", cu o list de fiiere care trebuie s fie ncrcat pe site-ul tau.

3. n mod implicit, Dreamweaver va publica, de asemenea, fiierul ablon, "abloane / index.dwt". Acest fiier nu este de fapt necesar pentru site-ul dvs. s funcioneze corect, iar dac nu dorii ca acesta s fie ncrcat, facei clic dreapta pe linia care conin aceast fiier (care este, mutai indicatorul mouseului peste faptul c numele fiierului i facei clic pe butonul mouse-ului dreapta) . n meniul care apare, facei clic pe "Ignorai de selecie" element. Cnd facei acest lucru, "de aciune" coloan va afia n "ignor" n loc de "Pune" pentru "Templates / index.dwt".

Ar trebui s ncrcai fiierul de ablon Dreamweaver?

Fiier ablon Dreamweaver nu face de fapt parte din site-ul dumneavoastr. Ea nu este legat de la oricare dintre paginile dvs. de web (i nici nu ar trebui s fie), nici nu servere de web necesita sau va asteptati sa fie prezente pe un site web. Dac ncrcai ablonul dvs., vizitatorii dvs. va fi capabil pentru a prelua ablonul dumneavoastr tastnd " http://www.example.com/Templates/index.dwt "n browser-ul lor, n cazul n care www.example.com se nlocuiete cu tau real domeniu nume . Acest lucru poate sau nu poate fi ceea ce vrei. n ceea ce eu pot spune, de la testarea mea limitat, fiierul ablon nu pare s conin informaii secrete ca parola FTP sau numele de utilizator FTP. Chiar i aa, Nu-mi place personal gndul de a avea fiiere strine care nu fac parte din site-ul meu ntr-o zon public a site-ului. ntr-adevr, din moment ce nu pot controla formatul de fiier al ablonului Dreamweaver, chiar dac fiierul apare inofensiv n acest moment, nu tiu dac dezvoltatorii Dreamweaver se va schimba formatul n viitor i s includ lucruri pe care ar putea s nu dorii dezvluit lumii. Deci, nu exist nici un motiv ntemeiat pentru a permite Dreamweaver ncrca fiierul la toate? Unii webmasteri nu face de fapt o copie de rezerv computerele lor(care este, face o copie a coninutului de computer i se pune ntr-un loc sigur). Ca urmare, atunci cnd sistemul lor descompune sau devine corupt prost cu un virus sau ceva de genul asta, pierd totul, inclusiv copia lor locale de site-ul lor. ntr-o astfel de situaie, ei recurg adesea la utilizarea instruciunile mele pentru Cum pot importa un site existent in Dreamweaver pentru a obine versiunea on-line a site-ului lor napoi n Dreamweaver. Cred ca poti vedea, probabil, n cazul n care am de gnd cu asta. Daca nu incarca dosarul lor ablon pentru site-ul lor, ei pot recupera doar propriile pagini web de site-ul lor online. Paginile web nu va mai fi asociat cu orice ablon, deoarece acestea nu vor avea o copie a ablonului. Dac dorii ca opinia mea personal n aceast privin, cea mai bun soluie este s ntr-adevr napoi la computerul dvs. n mod regulat, n loc s se bazeze pe un fiier ablon fac obiectul unui dumping pe site-ul dvs. public ca

un fel de a doua rat de backup. Mi se pare a fi aproape ca depozitarea lenjeriei murdare n public (dac a putea s li se permit s mangle o metafor). Exist multe programe gratuite hard disc de rezerv n jurul valorii, astfel nct, chiar dac nu v putei permite s cumpere un program comercial de a face locul de munc, exist puine scuza de a nu pstra o copie de rezerv up-to-data de munca ta tine. 4. Facei clic pe butonul "OK" pentru a permite Dreamweaver "put" fiierele pe care le consider a avea schimbat. Cnd sa terminat totul ncrcarea, caseta de dialog va disprea din oficiu.

Testarea site-ul dvs.

ncrcai site-ul dvs. n browser. Acum, c site-ul dvs. este practic complet, ar trebui s verificai totul pe site-ul dvs. pentru a v asigura c funcioneaz. Facei clic pe link-uri pe paginile dvs. pentru a le testa, nu uitai s verificai, de asemenea, cele din meniul de navigare dvs., precum i cele n Harta site-ului dumneavoastr. Dac totul merge bine, felicitri! Nu ati terminat doar cele mai multe dintre dvs. multipagina web (doar formularul de feedback rmne), dar ati invatat, de asemenea, cele mai multe dintre caracteristicile comune ale Dreamweaver, care de obicei are nevoie de un webmaster pentru proiectarea si mentinerea unui site web.

Cum de a aduga un formular de feedback pentru siteul dvs. cu Dreamweaver CS5

de Christopher Heng, thesitewizard.com Un formular de feedback, de asemenea, numit un formular de contact, permite vizitatorilor dvs. pentru a trimite un mesaj dintr-un formular web-based. Mesajul va fi livrat la tine prin e-mail obinuite. n acest capitol final al Tutorial Dreamweaver CS5 , vei aduga un formular de feedback pe site-ul dvs., astfel el de completare. Ca i n cazul celorlalte capitole din aceasta serie Dreamweaver tutorial, acest articol presupune c ai terminat capitolele anterioare, i, astfel, face referire la concepte i tehnici de predate acolo. Dac nu suntei un utilizator experimentat de Dreamweaver CS5, poate dorii s ncepe cu capitolul 1 . De fapt, dac suntei nou la web design, cel mai bine este s ncepem cu nceputul reale, cu ghidul de Cum sa faci / Creare site-ul dvs. proprii .

Scopul acestui capitol

Pn la sfritul acestui capitol, va trebui adugat un formular de feedback pe site-ul tau. De fapt, va trebui finalizat, de asemenea, site-ul dvs., i au un sistem complet funcional mai multe pagini web. n plus, vei fi nvat cele mai frecvent utilizate competenelor necesare pentru a crea i menine un site web folosind Dreamweaver CS5, i s fie capabil de a crea alte site-uri n orice moment dorii.

nainte de a ncepe
Vei gsi mult mai uor s neleag acest capitol, dac avei ceva experien, utiliznd un formular de feedback ca un utilizator obinuit. Ca atare, v rugm s vizitai site-ului Demo Feedback Form i utilizeaz formularul. Nu v facei griji: formularul de pe site-ul este doar un demo, astfel nct s putei testa la inima ta de coninut fr ca cineva spam. Mesajele trimise merge ntr-o gaur neagr. Chiar dac suntei un utilizator condimentat de formulare web, v rugm s vizitai site-ul i de a folosi formularul de acolo cel puin o dat. n acest fel, m pot referi la elemente de care se formeaza in acest tutorial, fr ntrebam dac nelegi ce vreau s vorbesc despre. Formularul v creai n acest capitol se va baza pe tehnologia exact aceeasi forma ca demo-ul folosete. Asa ca te rog nu-l acum nainte de a continua.

Cerine speciale
Vei avea nevoie de urmtoarele. Aceast list nu este opional. Trebuie s aib urmtorul text sau formular nu va funciona.

O gazda web care v permite s executai script-uri care trimit e-mail

Site-ul dumneavoastr trebuie s fie gzduit pe o gazda web care v permite s rulai scripturi (programe de calculator) de pe computerul lor. Nu numai c, acestea trebuie s permit scripturi dvs. pentru a trimite e-mail. Cele mai multe (dac nu toate) gazdele web comerciale , inclusiv cel pe care l folosesc n prezent , permite acest lucru. Dac nu suntei de plat pentru gazduire web, de exemplu, dac utilizai o gazda web gratuit, sau pe care l utilizai gratuit ce gazduieste care vine cu conexiune de band larg tale, sau esti utiliznd una dintre aceste Starter "liber site-uri "ca unii registratori de domenii va da atunci cnd v cumprai un nume de domeniu , sunt anse ca lucrurile descrise n acest capitol nu va lucra pentru tine . Dac nu suntei sigur, adresai-v dvs. de web gazd.

Gazd trebuie s accepte dvs. web PHP 4.2 i mai sus

Scriptul formularul de feedback (program de calculator), necesit o tehnologie denumit PHP care urmeaz s fie instalat pe serverul de web site-ul tau. A se vedea articolul Ce este PHP? pentru o explicaie clar a ceea ce n englez "PHP" nseamn. Nu avei nevoie ntr-adevr s-l citii dac v simii lene, dar vom ajuta s nelegei lucrurile un pic mai bine dac faci. Pentru cei cu ajutorul unui web gazd pltit care v permite s rulai scripturi, este probabil c vei avea deja PHP disponibile pentru utilizarea site-ului

dumneavoastra.PHP trebuie s fie de cel puin versiunea 4.2. (nainte de a v ntreb, PHP 5 sau orice numr mai mare este prea bine.)

Pri ale sistemului formularul de feedback

Dup cum vei fi observat atunci cnd ai ncercat formularul de feedback demo , vi se va crea urmtoarele componente:

Formularul de Feedback

Aceasta este forma n sine. l vei crea cu ajutorul thesitewizard.com e Script gratuit ce Feedback Form Wizard , i, opional, personaliza ("personaliza", n englez SUA), aparitia sa in Dreamweaver. Form, n sine, nu face nimic. Vizitatorii dvs. pot face clic pe "Send Feedback" butonul pn acestea sunt de culoare albastru in fata, si nimic nu va fi trimis. De locuri de munc reale de a trimite e-mail se face prin componenta urmtoare.

Feedback Form Script

Scriptul formularul de feedback este un program de calculator care s ia indiferent de vizitatorii dvs. trimitei prin forma i o transform ntr-un mesaj email. Se trece apoi mesajul de pe la sistemul de e-mail instalat pe calculatorul dvs. de web gazd. Sistemul dvs. de web gazd de e-mail nu, atunci activitatea de transmitere de fapt mesajul la contul de e-mail. (E un pic mai complicate dect att, dar asta e esenta.) Ca form, vei fi folosind gratuit ce Script Feedback Form Wizard pentru a crea o versiune personalizat a acestui script. Nu v facei griji. Totul e gratuit.

Page Thank You

Dup mesajul de script-ul trece la sistemul de e-mail dvs. de web gazd, se va spune browser-ul vizitatorului dvs. pentru a prelua "Thank You" de pe pagina site-ul tu.Aceasta este doar o simpl pagin web care spune vizitatorilor ca mesajul lor a fost trimis. Vei fi proiectarea aceast pagin v n Dreamweaver.

Pagin de eroare

"Eroare", pagina va fi indicat pentru vizitatorii dumneavoastra, n cazul n care nu reuesc s intre unele informaii eseniale ntr-o form feedback-ul dumneavoastr. Ca si "Thank You", pagina, aceasta este doar o pagin web ordinare pe care le va proiecta folosind Dreamweaver.

Cum de a aduga un Formular de contact pentru site-ul tau in Dreamweaver CS5 1. Generai formularul de feedback i Script
o

Primul lucru pe care va trebui s facei este s mearg la Expertul formularului de feedback i de a genera formularul de feedback-ul personalizat i script-ul.Expertul poate fi gsit la http://www.thesitewizard.com/wizards/feedbackform.shtml Citii pagina introductiv a expertului, alegei opiunea de a crea un script PHP formularul de feedback, i facei clic pe "Du-te la Pasul 2" buton. La pasul 2, introducei informaiile solicitate de formular: E-mail: Introducei adresa de e-mail la care dorii s primii e-mail de la vizitatorii site-ului dumneavoastra. URL-ul de formularul de feedback: http://www.example.com/feedback.html URL-ul "Thank You" Pagina: http://www.example.com/thankyou.html URL-ul de "eroare" Page: http://www.example.com/error.html Ar trebui s nlocuiasc, desigur, www.example.com partea cu adresa real a site-ului dumneavoastra. Cu toate acestea, nu NU schimba numele de, mai ales c de feedback.html din moment ce au folosit acest nume n meniul de navigare n capitolele anterioare. Dac schimbai numele acum, buton pe meniul de navigare (precum i orice alte link-uri ce indic spre formularul de contact de dvs.) se va rupe. n plus, dac v displace numele i-am dat mai sus, att de mult nct avei de gnd s le modifica, asigurai-v c pentru a citi articolul Cum de a crea Numele Fiierelor bun pentru paginile dvs. Web , astfel nct s nu creai numele de problematic faptul c va provoca necazuri.

o o

Citii acordul de licen. Dac suntei de acord cu termenii, se indic n forma i facei clic pe "Generate script" pentru a continua. O pagin nou, cu un coninut personalizat versiuni ale formularul de contact si script-ul, va aprea. Nu NU nchide aceast pagin. Lsai-l deschis n timp ce efectua urmtorii pai puine n Dreamweaver. Vom avea nevoie de codul generat de ctre expertul pentru site-ul dvs..

2.
o

Cum s Salvai formularul Script Feedback Calea incorect

Start up Dreamweaver i facei clic pe "File | New ..." din meniu. Dac v vei aminti din capitolele precedente, acest lucru nseamn s facei clic pe "File" element din bara de meniu, i apoi "New ..." element din meniul derulant care apare. Facei clic pe "pagin goal", n coloana din stnga. Observai cu atenie i c i-am spus facei clic pe "pagin goal", i nu ablonul. n "Tip de pagin" coloana, facei clic pe linia pe care scrie "PHP". Facei clic pe "Create" buton.

o o o

O pagina care arata goale vor aprea. Din pcate, aceast pagin nu este de fapt gol, i avem nevoie s tergei gunoi invizibile care Dreamweaver insereaz atunci cnd a creat pagina. (Not: dac nu vedei o pagin goal, c este, o pagin care este complet alb, dar vezi dvs. 2 web design coloan, nseamn c nu a urmat instruciunile mele de mai sus a nchide pagina fr al salva i a reveni. la nceputul acestei seciuni . De aceast dat, asigurai-v c facei clic pe "pagin goal", dup cum am menionat.) FOARTE IMPORTANT : facei clic pe "View | Codul" din meniu. Ar trebui s vedei acum codul HTML pe care Dreamweaver inserat n pagina dvs. PHP.Selectai tot pe acea pagina. Dac utilizai Windows, o modalitate simpl de a selecta tot ce este de a folosi Ctrl + A, care este, inei apsat tasta Ctrl i de tip "A". (Cred c Mac OS X foloseste Ctrl + O n loc de Ctrl + A.) n mod alternativ, avei posibilitatea s glisai, de asemenea, mouse-ul peste tot pentru ao evidenia.Dac utilizai metoda de mouse-ul, asigurai-v c ai selectat ntr-adevr totul. Apoi a lovit tasta DEL. Fereastra dvs. ar trebui s fie acum gol.

Comutai napoi la browser-ul dumneavoastr, fr a renunti Dreamweaver. Prima seciune pe pagina de web ar trebui s aib o poziie "Script formularul de feedback". Observai c exist o caset n care seciune. Aceast caset conine script-ul dvs. formularul de feedback. Selectai totul in acea cutie. Cel mai bun mod de a face acest lucru este s facei clic pe mouse-ul undeva, n caseta pentru a pune cursorul de text acolo. Apoi a lovit Ctrl + A (Command probabil + A pe un Mac), aa cum ai fcut mai devreme. Acest lucru ar trebui s evidenieze totul n caseta, dar nu i pe restul paginii web. (Not: pentru majoritatea oamenilor, pur i simplu facei clic undeva n caseta ar trebui s determine n mod automat tot coninutul su s fie selectat Dac acesta este cazul pentru tine, nu este nevoie de a folosi Ctrl + A pentru a selecta totul, dei acest lucru va face nici un ru. .)

A copia textul selectat n clipboard. Cel mai simplu mod de a face acest lucru n Windows este s tastai Ctrl + C (inei apsat tasta Ctrl, i de tip "C"). Alternativ, avei posibilitatea s facei clic pe butonul mouseului dreapta (n timp ce indicatorul mouse-ului este n caseta) i selectai "Copiere" din meniul care apare. Comutai napoi la Dreamweaver. NU nchidei browserul web. Suntem nc nu se face cu ea nc.

Facei clic pe "Editare | Lipire" din meniu. ntregul script generat de ctre expertul formularul de feedback ar trebui s apar n document necompletat. Ultima linie din fereastra ar trebui s fie un rou " >? ". De mai sus c linia, ar trebui s vedei linii n diferite culori, i anume rou, albastru, verde, violet i, n cazul n care ecranul este destul de mare, unele portocaliu. Dac nu vedei lucrurile pe care le-am menionat mai sus, nchidei aceast fereastr Dreamweaver (folosind "File | nchide"), fr a salva nimic. Apoi, du-te napoi la nceputul acestei seciuni (facei clic pe linkul pentru a gsi locul exact pentru a merge la) i refacei totul. AVERTISMENT: nu NU schimba nimic n aceast fereastr. Las totul aa cum este. Nu este nimic care ar trebui s fie personalizarea aici: n ciuda cuvintele din limba englez n unele pri din dosar, acest lucru nu este o pagina web pe care le cautati la. Acesta este un program de calculator. Ea nu se afieaz pentru vizitatori. Modificarea ceva aici poate provoca formular de feedback pentru a nu reuesc s funcioneze corect. Permitei-mi s-l spun din nou: nu se adun, se scad sau modifica nimic. Nu chiar aduga linii necompletate.

Facei clic pe "File | Save As ...". Atunci cnd "Save As" apare caseta de dialog, de tip " feedback.php "(fr ghilimele) n" File name "cmp. Nu utilizai nici un alt nume. Nu adugai spaii la numele. Nu utilizai de capital (majuscule) litere. Numele trebuie s fie exact aa cum am spus. Facei clic pe butonul "Salvare". Facei clic pe "View | Design" din meniu. Ar trebui s vedei o pagin goal. Nu tastai nimic aici. Eti nc uita la script-ul formularul de feedback, dei n vizualizarea Proiectare. Facei clic pe "File | Close" din meniul imediat pentru a nchide fereastra nainte de a aduga accidental sau schimba ceva aici.

3.

Cum de a crea formularul de feedback

Veti crea acum pagina web care conine formular de feedback. Aceast pagin web este doar o pagina de web obinuit, cum ar fi cele care le-ai creat n capitolele anterioare ale acestui tutorial Dreamweaver serie.
o o

Facei clic pe "File | New ..." din meniul Dreamweaver lui. Facei clic pe "Pagina de la ablon" n coloana din stnga i selectai ablonul pe care ai proiectat n capitolul 7 . Deoarece formularul de feedback-ul este o parte din site-ul dvs., ar trebui s aib, probabil, acelai aspect si design care le-ai dat restul de site-ul tu. Facei clic pe "Create" buton. Ar trebui s fie acum din nou n teritoriu familiar. Ca de obicei, nu uitai s schimbai "Titlu" cmpul de mai sus pagina ta web la un titlu adecvat, de exemplu, "Form Feedback", "Contact", "Formular de

o o

contact" sau "Support" (sau orice altceva iti place). Adaug o vizibil rubrica "Formular de feedback" (sau orice altceva) n poriunea editabile a paginii dvs. de web, i s tergei coninutul substituent din ablonul dvs. editabile regiuni (dac este cazul). Comutai napoi la browser-ul dvs., i cutai seciunea intitulat "HTML Code" (defilai n jos a paginii pentru a gsi). Ca i mai nainte, ar trebui s existe o caset n care seciune. Selectai totul n care caseta i copiai-l n clipboard. Dac ai uitat cum sa o faci, du-te napoi la seciunea de mai sus pentru a remprospta memoria. Comutai napoi la Dreamweaver. Click aici pentru a pune cursorul text n faa locului, pe pagina de web acolo unde dorii s apar cmpurile de formular. Reinei c cursorul ar trebui s fie pe o linie goal. Dac nu avei o linie necompletat, face o apsnd tasta ENTER (sau tasta RETURN de pe un Mac). Facei clic pe "View | Codul" din meniu. Dreamweaver va afia codul de baz pentru pagina ta web. Cursorul text trebuie s fie poziionat undeva ntr-o linie care spune " <p> <p> ". ntr-adevr, s fie specifice, cursorul trebuie s fie dup primul " <p> "i nainte de" <p> ". Utilizai tastele sgeat de pe tastatur pentru a muta cursorul de text la sfritul liniei, care este, de imediat dup " <p> <p> ", pe aceeai linie.

o o

Facei clic pe "Editare | Lipire" din meniul de paste codul HTML ai copiat n clipboard din browser-ul dvs. mai devreme. Facei clic pe "View | Design" pentru a reveni la modul de proiectare Dreamweaver lui. Ar trebui s fie acum posibilitatea de a vedea forma.

4.

Cum s Personalizai formularul de feedback

Aceast seciune se refer la modul n care se poate particulariza aspectul vizual al formularul de feedback. Nu avei nimic de a personaliza n cazul n care formularul deja arata bine pentru tine. Dac nu dorii s schimbai ceva, doar pentru a trece la pasul urmtor. Altfel, citii mai departe. Formularul se supune acelorai reguli CSS ca restul de pagina ta web. Ca atare, putei utiliza tehnici predate n capitolul 3 pentru a modifica fonturile, dimensiunea textului i culori , dac dorii. Nu voi trece prin aceste etape din nou de mai jos. n schimb, m voi ocupa cu lucruri pe care nu au nvat nc n capitolele anterioare, i anume, cu modul de a schimba limile de diverse domenii de activitate n formular. nainte de a ncepe, totui, trebuie s menionez faptul c, probabil, limea i nlimea diverse domenii de activitate nu afecteaz ct de multe informaii vizitatorii s poat intra n formular. E doar un truc vizual. Chiar dac v creai un domeniu foarte ngust, vizitatorii pot intra n continuare nume foarte lung,

adrese de e-mail sau comentarii. Browser-ul web va defila pur i simplu pentru a le permite s continuai tastarea tot ce dorii s tastai. Acestea fiind spuse, este nc util s fie capabil de a schimba dimensiunile diverse domenii de activitate, astfel nct formularul se potrivete mai bine n design vizual al paginii web.
o

Cum de a lrgi Numele si Domenii Adresa de email

Pentru a crete limea de "Nume" sau "adres de e-mail" cmpurile, facei clic pe cmpul pe care dorii s o modificai pentru ao selecta. n panoul IMOBILIARE din partea de jos a ferestrei Dreamweaver, modificai numrul din "Char limea" cmp la orice numar de alegerea ta. Limea implicit este "25". Dac aceasta este prea ngust, schimbati-l la un numar mai mare (de exemplu, "30", fr ghilimele) i apsai tasta ENTER. n cazul n care rezultatele nu sunt nc pe placul dumneavoastr, se modifica din nou pana te faci limea dorit.

Cum Pentru a extinde limea i nlimea de cmp Comentarii

o

Pentru a modifica fie limea sau nlimea, sau ambele, de pe cmp Comentarii, facei clic pe caseta de sub "Observaii" pentru ao selecta. Uit-te la Properties Panel din partea de jos a ferestrei Dreamweaver. "Char lime" cmp, cu implicit de 45 de ani, controleaz limea casetei, n timp ce "Num linii" de cmp, cu implicit de 15, controalele de nlime. Simii-v liber pentru a schimba aceste numere pentru a crea o lime i nlime care se potrivete designul site-ului dumneavoastra. Din nou, amintii-v c nu avei pentru a crea o cutie foarte mare doar pentru a permite vizitatorilor dvs. pentru a trimite mesaje lungi. Browser-ul web va derula atunci cnd este necesar.
o

Cum s Modificarea buton Feedback Trimite o cerere

Pentru a modifica textul care figureaz pe "Send Feedback" buton, facei clic pe butonul o dat pentru ao selecta. Modificarea cuvintele "Trimitei feedback", n "valoare" n cmpul Properties Panel de Dreamweaver.

Ce altceva avei posibilitatea s modificai, i ceea ce nu ar trebui modificat

o

Formularul de feedback i formularul de feedback-ul script-ul au fost create pentru a funciona cu fiecare. Script-ul depinde de anumite lucruri n forma fiind lsate la valoarea sa iniial, i dac i schimbi aceste lucruri, formularul poate s nu funcioneze corect. Ca atare, permitei-mi s menionez lucrurile pe care le pot schimba n form, i lucrurile pe care le nu trebuie s i schimbe . Regul general de degetul mare este c singurele lucruri care apar (care este, sunt vizibile), pe pagina web pot fi modificate. Asta este, avei posibilitatea s modificai cuvintele "Nume:" i "Email address:" care apar alturi de numele i cmpurile adres de email. Avei posibilitatea s modificai cuvntul "Comentarii" care apar de mai sus caseta de comentarii. Avei posibilitatea s modificai limile i nlimile din diverse domenii de activitate. Avei posibilitatea s modificai textul "Send Feedback", care apare pe buton. De asemenea, putei schimba culorile primare de text i fundal (astfel cum a nvat n capitolele anterioare). n afar de cele de mai sus, nu se schimba nimic altceva. De exemplu, nu se schimba nimic, altele dect "lime Char" i "linii Num" n Properties Panel pentru 3 domenii. Nu schimba nimic, altele dect "Value" pentru cmpul "Send Feedback" buton. tiu Properties Panel prevede alte domenii care ar putea tenta tantalic customisers compulsive dintre voi s o modificai. Mai exact, nu se schimba cuvintele "fullname", "e-mail", "comentarii", n "textfield" Dulapuri din panoul PROPRIETI. Cuvintele din acele "textfield" Dulapuri nu sunt afiate pe pagina web, astfel nct s nu trebuie s v facei griji despre ei. Ele sunt pentru uz intern de ctre script-ul.

5.

Salvarea formularul de feedback

Cnd ai terminat de particularizat formular, facei clic pe "File | Save As ..." i de tip " feedback.html "(fr ghilimele) n" File name "domeniul" Save As "caseta de dialog. Ca de obicei, nu folosesc nici un alt nume, nu-i schimb capitalizare (cazul) a numelui i a nu aduga spaii n nume. Utilizai numele exact aa cum i-am dat.Acest lucru este important, deoarece ai introdus acest nume de fiier la Form Wizard Feedback mai devreme, i ncorporate n numele script-ul. Dac-l modificai acum, s-ar putea pierde o parte din funcionalitatea de script-ul. nchidei formularul de feedback-ul cu "File | nchide".

6.

Crearea "Thank You" si "Eroare" Pagini

Vei avea nevoie pentru a crea 2 pagini web suplimentare pentru sistemul de feedback-ul s funcioneze n mod corespunztor. Acestea sunt doar pagini de web obinuite, astfel nct ar trebui s fie n msur s le crea singur, fara

ajutor. La urma urmei, ai creat deja pagini de web att de multe n ultimii doi capitole. Prima pagin este de a crea "Thank You" pagina. Aceast pagin este afiat pentru vizitatorii dumneavoastra, dup scenariul formularul de feedback trece cu succes mesajul lor la sistemul de e-mail dvs. de web gazd. Scopul principal al acestei pagini este de a lasa vizitatorii stiu ca mesajul lor a fost trimis. Cele mai multe site-uri web profite de aceast ocazie pentru a mulumi, de asemenea, vizitatorii lor, pentru comentariile lor. Creai pagina de modul n care a fcut celelalte pagini ale site-ului dvs. (cum ar fi pagina dvs. de pornire, site map, etc), bazate pe ablonul site-ul dvs. particularizat.Amintii-v s nlocuiasc "titlul" de cmp cu ceva semnificativ ca "Feedback Sent", "Mesaj trimis cu succes", "Thank You" sau un alt expresie de alegerea dumneavoastr. n seciunea coninutul principal al paginii dvs. de web, spune ce vrei pentru vizitatori. Pentru cei care nu sunt sigur ce s spun, aici este o posibilitate:

Mesaj trimis
Mesajul dvs. a fost trimis la webmaster. V mulumesc pentru comentariile dumneavoastr. Dac se execut o afacere, poate dorii s dea un mesaj mai client-friendly, cum ar fi:

Va multumim pentru sugestiile dvs.

V mulumesc pentru comentariile dumneavoastr. Dac mesajul necesit un rspuns, am rspuns de obicei, n termen de 24 de ore de la primirea mesajului. Dup ce ai terminat pagina, salvai-l cu un nume de " thankyou.html "(fr ghilimele). Acesta este numele pe care il furnizate Form Wizard Feedback mai devreme, iar numele este ncorporat n script formularul de feedback. Dac utilizai un nume diferit, trece de la litere sau adugare n spaiile, vizitatorii vor fi ntmpinai cu un neprietenos fiier 404 Not Found eroare atunci cnd prezint mesajul lor. Pagina alte de care ai nevoie pentru a crea este "Error" pagina. Aceast pagin este afiat pentru vizitatorii dvs. atunci cnd ele nu reuesc s furnizeze lor adres e-mail, nume sau un mesaj. Deoarece aceste informaii sunt necesare pentru script pentru a crea un mesaj e-mail-format n mod corespunztor de la depunerea formularului, script-ul (implicit) afieaz "Error" pagina dac oricare dintre aceste domenii sunt goale.

Ca si "Thank You" pagin, nu ezitai s scrie tot ce vrei. O posibilitate este aceea de a spune:

Trimiterea Mesaj de eroare

V rugm s completai toate cmpurile din formular nainte de clic pe butonul "Send Feedback" buton. Facei clic pe butonul "napoi" din browser-ul pentru a reveni la forma pentru a remedia eroarea. Ca i mai nainte, nu uitai s introducei ceva semnificativ n "titlul" cmpul a paginii. De exemplu, putei folosi "Error" sau "informaiile care lipsesc" (fr ghilimele), ca titlu. Cnd ai terminat cu pagina, salvai-l cu un nume de " error.html "(fr ghilimele). Din nou, nu se schimba numele n nici un fel, nici chiar capitalizarea (caz). Numele de fiier trebuie s fie identice cu ceea ce amenajate Form Wizard Feedback mai devreme, sau vizitatorii dvs. va primi un fisier nu a fost gasit eroare in loc.

7.

Publica paginile

Publica site-ul dvs., cu "site-ului | Sincronizare Sitewide ..." aa cum ai fcut n capitolul 7. Pagina dvs. de form, forma script feedback-ul, v mulumesc i paginile de eroare ar trebui s apar n lista Dreamweaver de fiiere care urmeaz s fie publicate.

Testarea formularul de feedback

Pentru a testa formular de feedback, se conecteze la site-ul dvs. ntr-un browser web. Asigurai-v c testul cu urmtorul text:

1. Verificai dac numele dumneavoastr "Eroare" pagina corect

Pentru a verifica dac ai numit fiier de eroare corect, i c numele potrivete cu ceea ce ai dat expertul, nu introduci adresa ta de email pentru primul test de formular.De fapt, nu deranjez s introducei nimic la toate. Doar facei clic pe "Send Feedback" buton. Ar trebui s te pagina dvs. de eroare. Dac nu, i vei obine un fiier nu a fost gasit de eroare atunci cnd ai trimis formularul , aceasta nseamn, probabil, c exist o nepotrivire nume: numele (sau adresa de web), l-ai dat expertul nu este acelai ca numele (sau adresa web) a fiierului de eroare de fapt creat. O alt posibilitate este c nu a reuit s publicai pagina de eroare sau salvat n dosarul greit.

2. Verificai dac numele dumneavoastr "Thank You" pagina corect

Pentru a verifica dac ai numit dumneavoastr "Thank You", pagina corect i salvate la locul potrivit, a scrie un mesaj pentru a v care utilizeaz aceast form.Asigurai-v c ai completat toate cmpurile n mod corespunztor. Dac avei un 404 sau Fiier negsit eroare atunci cnd ai trimis formularul , din nou, nseamn c exist un nume sau o adresa de web asimetrie de undeva. Fie le-ai salvat "Thank You", pagina cu un nume diferit de ceea ce ai mobilate Expertul formularul de feedback, sau l-ai salvat pagina dvs. n folderul greit, sau nu ai reuit s ncrcai pagina.

3. Verificai dac sistemul dvs. de web gazd de e-mail a emis mesajul

Dup ce obinei dvs. "Thank You" pagin, trebuie s v conectai la contul dumneavoastr de email i a vedea dac ai primit e-mail. Dac nu, du-te prin lista de verificare de lucruri de fcut atunci cnd nu primii un e-mail . Dac avei n alte probleme de testare a script-ul, v rugm s consultai ntrebri frecvente (FAQ) despre Expertul de formularul de feedback . Ai putea dori, de asemenea, s recitesc acest capitol pentru a v asigura c nu pierdei nimic esenial.

Felicitri i n cazul n care pentru a merge de aici

Felicitri! Ai fcut-o! Nu ai creat numai un sistem complet funcional mai multe pagini site-ul, ai nvat, de asemenea, toate competenele de baz necesare pentru a proiecta un site web folosind Dreamweaver CS5. Pentru cei care doresc sa exploreze mai departe Dreamweaver, putei gsi tutoriale privind realizarea sarcinilor specifice cu Dreamweaver n mea Lista de Tutoriale Dreamweaver . Acestea includ sarcini care nu sunt acoperite n acest tutorial serie principal, deoarece nu toat lumea trebuie s le fac. n plus, dup cum probabil tii deja, Dreamweaver se include, de asemenea, un sistem de ajutor de la care putei gsi alte informaii. Stiu ca unii dintre voi nu a utilizat sistemul de ajutor pentru c nu ai neles ce a spus. Cu toate acestea, acum c ai creat cu succes un site de la inceput pana la sfarsit cu ajutorul Dreamweaver, putei gsi c lucrurile pe care nu ai putut nelege nainte de acum sunt de fapt destul de uor de neles. Exist, de asemenea, alte aspecte la care ruleaz un site web pe langa partea de design vizual. Este posibil s dorii pentru a reveni la Cum sa faci / Creare site-ul propriu: Ghidul nceptorului AZ pentru a citi o imagine de ansamblu a restului de lucruri pe care ar trebui s fac, probabil. n cele din urm, a dori s ntreb care v amintii thesitewizard.com chiar i atunci cnd ai terminat site-ul tu. Legtur ntr-o recomanda si altora. (Thanks!) Toate cele bune pentru site-ul dvs.!