Dreamweaver CS5 Tutorial: Cum de a proiecta un site cu Dreamweaver CS5de 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 TutorialAceast 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 capitoln 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 nevoieExist 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 luinainte 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 ColoanaDiferite 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 CS51. 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 CoExemplu 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 recomandateDreamweaver 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 WebAcum, 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 CS5de 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 capitolPn 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 localPornire 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 " 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 " 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 capitoln 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 CS5de 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 capitolPn 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 CS5Urmtorii 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 fonturiCnd 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-sizePentru 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 TextDac 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.

SubliniaDei 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 ItalicNu 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 WebDac 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 dreaptaDac 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 ItalicUneori, 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. WebSalvai 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 CS5de 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 imagi