Crearea unui sit de web

Program utilizat: Macromedia Dreamweaver

Capitolul 1. Crearea unui sit simplu Etapa 1a

1. Planificarea sitului 1.1 Proiectarea structurii de principiu a sitului (sistem de foldere similar cu structura arborescenta a sitului) - vezi structura de foldere Etapa-1a 1.2 Definirea sitului (Set up a local site) a) (Meniu) Site > New Site. Apare caseta de dialog Site Definition. Utilizati sectiunea Basic (nu Advanced). Nume sit: Venetia b) Click Next c) Nu se foloseste "server technology", deoarece este un sit "static", f\r\ pagini dinamice (adic\ Macromedia ColdFusion, Microsoft Active Server Pages (ASP), Microsoft ASP.NET, Sun JavaServer Pages (JSP), or PHP: Hypertext Preprocessor (PHP)). d) Next e) ~ntrebare: Cum se va lucra cu fi[ierele pe durata dezvolt\rii sitului ? Se alege prima op]iune (Editare local\ pe calculator [i apoi `nc\rcare pe server -upload- atunci c^nd este gata). Edit local copies on my machine, then upload to server when ready (recommended). Amplasarea pe calculatorul "local", `n cazul lucrului `n re]eaua de calculatoare a Laboratorului, se face, de fapt, `n contul utilizatorului !!! ~n cazului utiliz\rii unui calculator individual, acesta va fi cel "local". Celelalte alternative se refer\ la dezvoltarea sitului direct pe serverul final, fie prin re]eaua local\, fie prin transfer de fi[iere (proceduri mai complicate [i care necesit\ acces la server). f) Se define[te folderul ce va con]ine situl, pe perioada dezvolt\rii (`n contul utilizatorului !!!): (cont_utilizator) /web-design / Venetia Folderul poate fi creat anterior (cu Windows explorer), sau se creaz\ `n acest moment. Click Next. g) ~ntrebare: cum se va face conectarea la server ? (How do you connect to the remote server ?) Se alege "Local/Network" [i folderul (cont_utilizator)/web-design/ Click Next. h) la "Sharing files" (partajare fi[iere cu al]i membri ai echipei) se alege "No" Click Done (terminat). 1.3. ~n acest moment se poate crea un folder separat cu elemente componente (assets): text, imagini, etc. ~n cazul nostru, elementele vor fi pozi]ionate direct `n structura de foldere, prin preluare din folderul Didactic, pentru a nu `nc\rca inutil conturile utilizatorilor.

Etapa a2a
1.4 Crearea [i salvarea unei pagini noi a) (Meniu) File > New. Apare fereastra de dialog New Document cu sec]iunea General.

b) Se alege Page Designs. Apare o list\ de pagini [ablon din care se alege "Text: Article D with Navigation" (cu bar\ de navigare). {ablonul apare `n caseta de preview.

Butonul "Document" trebuie s\ fie activ (nu "Template" !). Click Create. c) Se salveaz\ pagina: (Meniu) > Save As se navigheaz\ spre folderul Venetia [i se salveaz\ `n interior fi[ierul, cu numele Venetia.htm
2

1.5 Eliminarea unor elemente ce nu sunt necesare (Meniu) > Layout > Standard view. {ablonul paginii (template) pe care `l edit\m con]ine regiuni, aranjate sub forma unui tabel format din celule. Unele celule pot con]ine `n interior alte celule de dimensiune mai mic\. Regiunile sunt delimitate printr-un border (contur ce apare cu linie punctat\). Prin deplasarea mousului peste regiuni [i contururi, pointer-ul ia forma de s\geat\ vertical\ sau cruciuli]\, iar prin clicare se selecteaz\ diverse regiuni (mai mici sau mai mari).

Figura. Selectarea unei celule cu pointerul mousului

Figura. Una din ipostazele pointerului de mouse.

Se selectraz\ `n pagin\ elementele ce trebuie `nl\turate (sunt celule `ntr-un tabel).

3

Selec]ia se face fie cu pointer-ul pe bordura tabelului, fie prin selectarea regiunii mai mari [i, apoi, clicare pe bara de jos ce con]ine codific\rile diverselor elemente ale tabelului.

Figura. Bara inferioar\ ce con]ine codurile literale ale elementelor de tabel Clica]i `n toat\ pagina [i observa]i cum se modific\ elementele de pe bara de jos. Deocamdat\ vom a[tepta crearea link-urilor [i definitivarea design-ului paginii, pentru a [terge `n final elementele aflate `n exces. Previzualizarea documentului (pagina de Internet creat\) `ntr-un browser (navigator de Interenet): - se clicheaz\ butonul cu simbol de glob terestru [i se alege Internet Explorer

Figura. Previzualizarea paginii editate Efectul modific\rilor realizate `n document se poate observa prin previzualizare `n browser. Nu totdeauna aspectul paginii, pe care `l observ\m `n editorul Macromedia Dreamweaver este cel real, care apare la navigare, deci previzualizarea cu browserul este important\.

1.6 Crearea celorlalte pagini ale sitului, pornind de la [abloanele oferite de c\tre Dreamweaver, conform cu con]inutul lor (Meniu) > File > New > General > Designs > Commerce. Product catalog A (pagin\ pentru Eminescu, o fotografie [i text) Document. Create. (Meniu) File > Save As (navigare spre folderul Eminescu) Eminescu.htm 1.7. (Meniu) > Window > Site -> se activeaz\ paleta "Site" `n care se poate observa structura sitului, se pot face transferuri de fi[iere [i va fi folosit\ pentru definirea rapid\ a link-urilor (este similar cu Windows Explorer, doar c\ de]ine calit\]i specifice pentru creare situri).
4

1.8 (Meniu) > File > New > General > Designs > Text. Article C (pagin\ pentru istoric, o fotografie [i text) Document. Create. (Meniu) File > Save As (navigare spre folderul Istoric, sau creare folder) Istoric.htm 1.9 (Meniu) > File > New > General > Designs > Image. Thumbnail grid (pagin\ pentru Turism, trei fotografii [i text) Document. Create. (Meniu) File > Save As (navigare spre folderul Turism, sau creare folder) Turism.htm 1.10 (Meniu) > File > New > General > Designs > Image. Thumbnail grid (pagin\ pentru Turism, trei fotografii [i text) Document. Create. (Meniu) File > Save As (navigare spre folderul Turism, sau creare folder) Turism.htm 1.11 (Meniu) > File > New > General > Designs > Commerce. Product catalog B Document. Create. (Meniu) File > Save As (navigare spre folderul Expozitii, sau creare folder) Expozitii.htm

1.12 (Meniu) > File > New > General > Designs > Data. Figures detail Document. Create. (Meniu) File > Save As (navigare spre folderul Turism) agentii.htm 1.13 (Meniu) > File > New > General > Designs > Images. Slide show (secven]\ de imagini) Document. Create. (Meniu) File > Save As (navigare spre folderul Turism) imagini.htm

Etapa a3a
1.14. Stabilirea parametrilor paginii Titlu: (Meniu) > Modify > Page Properties

Figura. Fereastra de setare a parametrilor paginii Parametrii paginii sunt; Titlul, Culorile (scris, link-uri, imaginea de fundal, tipul de codificare a paginii western sau Central European, margini, imagine de trasare [i transparen]a acesteia). 1.15. Crearea unor link-uri `n structura arborescent\ a sitului Varianta A) Se marcheaz\ unul din elementele meniului de linkuri (bar\ de navigare) [i se modific\ `n Istoric. Apoi, cu elementul Istoric marcat, se clicheaz\ cu mousul `n paleta Properties (Propriet\]i) `n dreptul zonei Link, pe cercul al\turat, ca `n figur\. F\r\ a eliobera butonul de mouse, se trage spre documentul c\tre care se dore[te a se crea o leg\tur\, `n paleta Site (aici, Istoric.htm).

Figura. Tragerea linkului din Paleta Propriet\]i spre documentul c\tre care se va face leg\tura, aflat `n paleta Site
6

Varianta B) (Meniu) > Insert > Hyperlink

Apare o caset\ de dialog care se completeaz\ (la Link se navigheaz\ c\tre fi[ierul ]int\, aflat `n structura de foldere a sitului).

Figura. Parametrii unui link Verificarea validit\]ii linkului: preview in browser.

Etapa a 4a
1.16. Imaginile se preg\tesc la parametrii necesari pentru introducere `n pagin\ (dimensiuni - `n func]ie de aria ocupat\, rezolu]ie, tip JPG, PNG, GIF) [i se aduc `n structura de foldere a sitului, fiecare `n folderul care va con]ine `ntreaga informa]ie referitoare la acea diviziune a sitului. Tipuri de imagine: pentru Internet, se utilizeaz\ imagini `n format JPEG, PNG sau GIF (care poate fi transparent sau animat). Rezolu]ia: la dimensiunea final\ (nu se recomand\ m\rirea suplimentar\ !) imaginea trebuie s\ fie la rezolu]ia de 72 96 pixeli/inch. Prelucrarea se face `n programul Adobe Photoshop, pornind, cel mai bine, de la imagini TIFF de rezolu]ie mare.
7

1.17. Introducerea imaginilor `n pagin\ Se clicheaz\ pe un Image Placeholder (container de imagine). Fie din Meniul principal: Insert > Image (apare o fereastr\ de dialog pentru navigare spre imaginea dorit\; op]iunile sunt File System [i Relative to Document. In orice celul\ a [ablonului paginii se poate introduce un Image Placeholder, care va con]ine imagine de anumite dimensiuni, exprimate `n pixeli. Alternate text se refer\ la textul care apare la navigare atunci c^nd pointerul mousului se afl\ deasupra acelei imagini.

Figura. Definirea unui Image Placeholder

Palete importante Paleta Site: prezint\ situl (format din foldere, fi[iere HTML, imagini, etc., pe m\sur\ ce se dezvolt\. Poate fi folosit\ similar cu un Windows Explorer.

Figura. Paleta Site Paleta Propriet\]i: afi[eaz\ ([i modific\) propriet\]ile obiectului selectat.

Figura. Paleta Properties, pentru Image Placeholder W: l\]ime, H: `n\l]ime, Src: fi[ier surs\ (se navigheaz\ spre locul [i numele fi[ierului sau se utilizeaz\ facilitatea de selec]ie cu mousul clicat pe cercul din dreapta c^mpului). Alt: text care apare atunci c^nd mousul se suprapune peste imagine. Link: adresa c\tre care se face leg\tura prin linkul curent (se completeaz\ la fel ca la Src). Map: hart\ de linkuri deocamdat\ nu se folose[te

Figura. Paleta Properties, pentru Image

Figura. Paleta Properties, pentru text Butoanele sunt sugestive: se pot modifica parametrii textului [i se prescrie linkul (dac\ textul, marcat `n prealabil, va avea func]ie de link). Exerci]ii: 1. Experimenta]i modificarea unor elemente (text, imagine, linkuri) [i observa]i efectele prin intermediul func]iei Preview in browser. 2. Crea]i o pagin\ alb\ cu ajutoru comenzii (Meniu) File > New > Basic Page - HTML

~ncerca]i s\ introduce]i elemente (text, linkuri, imagini) [i efectua]i previzualizarea. ~ncerca]i s\ crea]i tabele (cu Border 0, adic\ f\r\ a fi afi[abil\) pentru a realiza o organizare a paginii pe celule. Introduce]i `n celule diverse elemente (text, linkuri, imagini). 3. Exersa]i parametrii textului (modificare [i previzualizarea paginii). 4. Crea]i un sit dup\ re]eta expus\ `n acest curs.

======================================== Dic]ionar B browser = program de navigare pe net, ex: Internet Explorer, Netscape P preview = previzualizare pe calculatorul local, `ntr-un browser, a aspectului [i func]ionalit\]ii unei pagini de Internet aflat\ `n editare. I Image Placeholder = container pentru imagine, zon\ predefinit\ `n care se poate `nc\rca o imagine

10