curs webdesign
Uploadarea fişierelor cu ajutorul FTP În acest tutorial veţi învăţa cum să vă uploadaţi site-ul pe server, utilizând Macromedia Dreamweaver. Vom presupune că deja v-aţi definit site-ul. Primul lucru pe care trebuie să-l faceţi este să deschideţi Dreamweaver şi să priviţi în partea dreaptă a monitorului unde se află fişierele obişnuite şi panoul Assets în care sunt afişate fişierele site-ului dvs. Dacă nu puteţi vedea aceste fişiere, accesaţi Window -> Files din meniul principal. Tot aici mai puteţi observa şi un meniu drop-down (priviţi în imaginea de mai jos).
Daţi dublu click pe numele site-ului (zona încercuită cu roşu din imaginea de mai sus), apoi daţi cu mouse-ul pe tab-ul Advanced. Ar trebui să vedeţi un panou ca cel din imaginea de pe pagina următoare.
1
curs webdesign
Selectaţi opţiunea Remote Info din partea stângă; aici veţi introduce datele pe care vi le-a oferit providerul de hosting. Când daţi click pe acest link, veţi vedea pagina de mai jos în care veţi insera următoarele informaţii: • • • • • •
Access: Selectaţi FTP FTP host: Adresa serverului de ftp (de obicei este ftp.adresasite.com sau chiar adresa site-ului www.adresasite.com). Host Directory: Directorul de pe server în care vor fi copiate fişierele. Login: Numele de autentificare, care ar fi trebuit să vă fi fost oferit de către providerul de hosting. Password: Parola contului de ftp, care ar fi trebuit să fi fost de asemenea furnizată de provider. Apăsaţi pe butonul Test: ar trebui sa vedeţi un mesaj de succes în cazul în care totul este în regulă, dacă nu, verificaţi încă o dată dacă aţi introdus corect toate datele.
Acum, dând click pe ok, ar trebui sa vedeţi din nou pagina principală Dreamweaver. În panoul Files, daţi click pe săgeata albastră cu tooltip-ul Put File(s). Dreamweaver va începe să uploadeze fişierele pe server. După ce termină, ar trebui să le puteţi vedea când tastaţi în browser adresa site-ului dvs. Observaţie: În cazul în care vreţi să accesaţi site-ul doar cu numele domeniului, trebuie ca în directorul principal de pe server să definiţi o pagină index.html sau index.php ce reprezintă prima pagina a site-ului dvs. În cazul în care nu aţi definit un site, Dreamweaver vă oferă posibilitatea de a lucra direct pe un server remote. Pentru aceasta, în panoul Files, daţi click dreapta pe FTP & RDS Servers şi alegeţi opţiunea Add FTP Server. Ar trebui sa vedeţi o fereastre asemenetoare cu cea de pe pagina următoare:
2
curs webdesign
Setările sunt asemănătoare cu cele prezentate mai sus: • • • • •
Name: Numele conexiunii, pentru care puteţi utiliza orice valoare doriţi. FTP host: Adresa contului de ftp (ftp.adresasite.com, www.adresasite.com) Host Directory: Directorul de pe server în care vor fi copiate fişierele. Login si Password: Datele de autentificare. URL prefix: Adresa unde poate fi accesat site-ul.
Folosirea hărţii site-ului Vizualizarea unui director local în Dreamweaver ca hartă vizuală (visual map) poate fi utilă pentru operaţiile de adăugare fişiere noi pentru site, dar şi pentru a adăuga/şterge link-uri în cadrul aceluiasi site. Harta prezintă structura siteului pe 2 nivele, începând cu pagina principală (home page). Paginile secundare sunt identificate prin simboluri iar link-urile sunt afişate în ordinea în care sunt întâlnite în codul sursă. Pentru a afişa harta site-ului trebuie mai înainte definită pagina principală. De fiecare dată ea (pagina principală) reprezintă punctul de pornire al hărţii şi poate direcţiona către orice altă pagină din cadrul site-ului. Puteţi schimba pagina principală, numărul de coloane afişate, dacă etichetele simbol afişează numele fişierului sau titlul paginii şi dacă afişaţi sau nu fişiere ascunse sau dependente. (Un fişier dependent este o imagine sau alt tip de conţinut (diferit de HTML) pe care browserul este capabil să îl încarce). Lucrul cu o hartă a site-ului, este foarte facil: puteţi selecta pagini, deschide pagini pentru editare, puteţi adăuga noi pagini la site, puteţi crea link-uri între fişiere şi schimba titlul paginilor. Notă: Harta site-ului se aplică numai la site-urile locale. Pentru a crea o hartă pentru un site nelocal (remote site), copiaţi conţinutul site-ului nelocal într-un folder de pe hard disk, apoi folosiţi comanda "Manage Sites" pentru a defini site-ul ca site local.
3
curs webdesign Definirea sau schimbarea paginii principale a site-ului: 1. "Window>Files" şi selectaţi din meniul pop-up un site. 2. Click-dreapta (Windows) sau Ctrl-click (Macintosh) pe fişierul pe care doriţi să îl setaţi ca pagină principală şi selectaţi "Set as Home Page". Nota: puteţi seta pagina principală şi prin opţiunile "Site Map Layout" din căsuţa de dialog "Site Definition". 3. Pentru a schimba pagina principală, repetaţi pasul 2. Vizualizarea hartii site-ului: 1. "Window->Files", apoi executaţi una din următoarele acţiuni: - în panoul "collapsed Files" selectaţi "Site View->Map View".
- în panoul "Expanded Files", click pe butonul "Site Map" din toolbar şi selectaţi "Map Only" (hartă site fără structura de fişiere locale) sau "Map And Files" (include structura locală de fişiere).
Notă: Dacă nu aţi definit pagina principală sau dacă Dreamweaver nu poate găsi un fişier index.html în site-ul curent, Dreamweaver vă atenţionează să selectaţi o pagină principală. 2. Click pe semnele plus (+) şi minus (-) de lângă numele unui fişier pentru a afişa sau a ascunde paginile de sub nivelul doi. - textul afişat cu roşu indică un link invalid (broken link). - textul afişat cu albastru şi marcat cu o icoană rotundă indică un fişier pe un alt site sau un link special (e-mail sau script), - un checkbox verde indică un fişier verificat de dvs, - un checkbox indică un fişier verificat de altcineva, - un simbol "lock" indică un fişier care poate fi doar citit (read-only) (Windows) sau blocat (Macintosh). Folosiţi opţiunile "Site Map Layout" pentru a modifica înfăţişarea hărţii site-ului: 1. Deschide căsuţa de dialog "Site Definition" folosind una din variantele: - "Site->Manage Sites", alege site-ul şi apăsaţi "Edit"; - "Files->Manage Sites", selectaţi site-ul şi apăsaţi "Edit". 2. În căsuţa de dialog "Site Definitions" selectaţi din lista "Category Site", "Map Layout" şi setaţi opţiunile: - Number Of Columns - setează numărul de pagini afişate pe fiecare rând în fereastra cu harta site-ului. - Column Width - seteaza lăţimea, în pixeli, a coloanelor hărţii site-ului. - Icon Labels - selectează dacă numele afişat lângă simbolul documentelor în harta site-ului sunt reprezentate ca nume de fişier sau titlu de pagină. - Display Files Marked As Hidden - afişează fişierele HTML pe care le-aţi marcat ca ascunse în harta site-ului. - Display Dependent Files - afişează toate fişierele dependente în ierarhia site-ului. 3. Apasa OK şi apoi Done.
4
curs webdesign Modificarea titlului paginii in harta site-ului: 1. Afişaţi titlurile paginilor cu un click pe meniul de opţiuni din colţul dreapta-sus al panoului "Files" şi selectaţi "Rename View->Show Page Titles".
2. Selectaţi un fişier din harta site-ului şi execută una din următoarele acţiuni: - click pe titlu pentru a introduce un nou titlu - click pe meniul de opţiuni din colţul dreapta-sus şi selectează "File->Rename". 3. Tipăriţi un nou nume si apasa "Enter" (Windows) sau "Return" (Mac). Nota: Când lucraţi în panoul "Files", Dreamweaver updatează toate link-urile la fişierele pe care le-aţi redenumit. Puteţi sa atrageţi atentia asupra unei secţiuni a site-ului prin evidenţierea acesteia în harta site-ului: 1. Selectaţi pagina pe care vreţi să o vizualizaţi. 2. Executaţi una din următoarele acţiuni: - click dreapta (Windows) sau Control-click (Machintosh) în harta site-ului şi selectaţi "View as Root". - în panoul "Files" (Window->Files) click pe meniul de opţiuni din colţul dreapta-sus, apoi selectaţi "View->View Map Options->View As Root".
TEMĂ Încercaţi să vă definitivaţi site-ul în Dreamweaver, să definiţi pagina principală index.html şi să vă alegeţi un domeniu unde să îl publicaţi. Dacă aţi ales domeniul, încercaţi să publicaţi paginile site-ului pe acel server.
5