Studiul de caz 01

Crearea primului site Dreamweaver MX 2004

Etapa 1 – Crearea site-ului Etapa 2 – Organizarea site-ului: crearea folderelor şi a

fişierelor Etapa 3 – Definirea parametrilor paginii

Etapa 4 – Introducerea şi formatarea textului

Etapa 5 – Inserarea şi formatarea imaginii Etapa 6 – Inserarea legăturii hipertext

2

01 Studiu de caz – crearea primului site Dreamweaver MX 2004

Site-ul pe care vă invităm să-l creaţi în

acest studiu de caz este foarte simplu. El conţine o pagină Web în care vi se cere să inseraţi: un text, o imagine şi o legătură hipertext către site-ul I.N.D.E. Ploieşti (inde.upg-ploiesti.ro). Pornind de la elementele prezentate în acest studiu de caz, creaţi noul site, parcurgând următorii paşi:

1. Crearea şi organizarea site-ului.

2. Definirea parametrilor paginii.

3. Introducerea şi formatarea textului: „I.N.D.E. Ploieşti ®, un deceniu de existenţă!”.

4. Inserarea şi formatarea imaginii, care reprezintă logo-ul site-ului I.N.D.E. Ploieşti.

5. Inserarea legăturii hipertext.

Etapa 1. Crearea site-ului

EXERCIŢIU

CREAREA UNUI NOU SITE

Creaţi un site sub Dreamweaver MX 2004, numit Primul site, în mod local cu metoda elementară (Basic).

3

Stud

ii d

e ca

z

MENIUL SITE, MANAGE SITES..., NEW, SITE

1. În meniul Site executaţi clic pe Manage Sites...NewSite. Remarcă. Se afişează caseta de dialog Site Definition for....

2. În caseta de dialog Site Definition for... activaţi zona Basic (modul Basic cere mai puţine informaţii tehnice decât modul Advanced).

3. Tastaţi numele site-ului Primul site, iar apoi executaţi clic pe

butonul .

4. În caseta de dialog următoare, activaţi butonul radio No („Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP or PHP?”), iar apoi executaţi clic pe butonul

.

4

5. În noua fereastră, activaţi primul buton radio, iar apoi executaţi clic

pe butonul (folder) pentru a selecta folder-ul rădăcină local (D:\Primul site\). Dacă acest folder nu a fost creat, puteţi să-l creaţi în acest moment. Executaţi

clic pe butonul .

6. În meniul derulant din caseta de dialog următoare, alegeţi None, iar apoi executaţi clic pe butonul

.

Remarcă. Dreamweaver MX 2004 afişează un rezumat al tuturor parametrilor site-ului dumneavoastră.

7. Executaţi clic pe butonul

.

5

Stud

ii d

e ca

z

Etapa 2. Organizarea site-ului: crearea folderelor şi a fişierelor

EXERCIŢIU

CREAREA FOLDERELOR

Creaţi folderele html şi imagini.

PANOUL FILES, NEW FOLDER

1. În panoul Files, executaţi clic cu butonul din dreapta al mouse-ului pe site-ul Primul site. În meniul contextual, executaţi clic pe New Folder.

2. Înlocuiţi untitled cu html.

3. Repetaţi paşii 1 şi 2 pentru a

crea folder-ul imagini.

______________________________________________________________

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

6

EXERCIŢIU

CREAREA FIŞIERULUI INDEX.HTML ŞI SALVAREA

FIŞIERULUI INDEPLOIESTI.GIF Creaţi în folder-ul html, fişierul index.html (pagina de index a site-ului),

iar în folder-ul imagini salvaţi fişierul indeploiesti.gif (logo-ul site-ului I.N.D.E. Ploieşti).

NEW FILE

1. Executaţi clic cu butonul din dreapta al mouse-ului pe folder-ul html, iar apoi executaţi clic pe New file.

2. Tastaţi numele fişierului, index.html.

3. Salvaţi imaginea care reprezintă logo-ul site-ului I.N.D.E. Ploieşti în folder-ul imagini sub numele indeploiesti.gif.

Remarci: Observaţi structura arborescentă a celor două foldere.

Pentru moment pagina dumneavoastră Web nu conţine nimic, tot ceea ce am realizat a fost organizarea site-ului în foldere şi în fişiere.

Urmează ca în etapele următoare să vă preocupaţi de inserarea elementelor paginii.

______________________________________________________________

_________________________________________________________________

__________________________________________________________________________________________________________________________________

7

Stud

ii d

e ca

z

Etapa 3. Definirea parametrilor paginii

EXERCIŢIU

PARAMETRIZAREA PAGINII Folosiţi categoria Appearance (caseta de dialog Page Properties) pentru a definii următorii parametrii ai paginii index.htm: Page font: Verdana, Arial; Size: 24 pixels; Background: #FFFF00.

MENIUL MODIFY, PAGE PROPERTIES, CATEGORIA

APPEARANCE

1. Deschideţi documentul index.html via WindowFiles.

2. În pagina index.html executaţi clic pe butonul .

3. Afişaţi caseta de dialog Page Properties, via Meniul ModifyPage Properties.

4. În caseta de dialog Page Properties, categoria Appearance definiţi parametrii

paginii.

8

EXERCIŢIU

ATRIBUIREA UNUI TITLU PAGINII

Atribuiţi paginii dumneavoastră (index.html) titlul: Zece ani. Folosiţi una

din metodele: Page Properties / Bara de instrumente ale documentului / Codul sursă HTML.

PAGE PROPERTIES, CATEGORIA TITLE/ENCODING (1)

1. În caseta de dialog Page Properties, executaţi clic pe categoria Title/Encoding.

2. În zona Title introduceţi: Zece ani.

Remarcă. Titlul paginii se afişează în bara de titlu a navigatorului.

9

Stud

ii d

e ca

z

BARA DE INSTRUMENTE (2)

1. Executaţi clic pe ViewToolbarDocument (dacă toolbar-ul nu este afişat).

2. În câmpul Title introduceţi: Zece ani.

CODUL SURSĂ HTML (3)

1. Executaţi clic pe butonul .

2. În elementul <title> din secţiunea <head> înlocuiţi Untitled Document

cu Zece ani.

Cod sursă <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-

8859-2">

<title>Zece ani</title>

<style type="text/css">

<!--

body,td,th {

font-family: Arial, Helvetica, sans-serif;

font-size: 24px;

}

body {

background-color: #FFFF00;

}

-->

</style></head>

<body>

</body>

</html>

10

Etapa 4. Introducerea şi formatarea textului

EXERCIŢIU

INTRODUCEREA UNUI TEXT

Introduceţi în documentul index.html, de la tastatură textul: „I.N.D.E. Ploieşti ®, un deceniu de existenţă!”.

BARA INSERT, CATEGORIA TEXT, BUTONUL

1. Executaţi clic în fereastra documentului index.html.

2. Introduceţi de la tastatură textul: „I.N.D.E. Ploieşti , un deceniu de existenţă!” lăsând un blanc înainte de virgulă.

3. Executaţi clic în locul în care doriţi să inseraţi caracterul special.

4. Inseraţi caracterul special ®: În bara Insert, categoria Text,

executaţi clic pe butonul

. Remarcă. În spaţiul de dinaintea virgulei se afişează caracterul ®.

11

Stud

ii d

e ca

z

EXERCIŢIU

APLICAREA ELEMENTULUI DE FORMATARE <SUP>

Aplicaţi elementul de formatare <sup> caracterului special ® folosind

codul sursă HTML/Quick Tag Editor.

CODUL SURSĂ HTML (1)

1. Afişaţi codul sursă HTML şi adăugaţi elementul <sup>.

Cod sursă <body>

I.N.D.E. Ploieşti^&reg;, un deceniu de

existenţă!</body>

2. Executaţi clic pe tasta F5 pentru a actualiza codul HTML.

3. Vizualizaţi pagina Web într-un browser.

QUICK TAG EDITOR (2) 1. Selectaţi caracterul special ®.

12

2. Afişaţi Quick Tag Editor.

3. Tastaţi su şi selectaţi <sup>.

4. Acţionaţi tasta Enter pentru acceptarea elementului HTML.

5. Analizaţi codul HTML generat.

Cod sursă <body>

I.N.D.E. Ploieşti^&reg;, un deceniu de

existenţă!

</body>

6. Vizualizaţi pagina Web într-un browser.

______________________________________________________________

___________________________________________________________________________________________________________________________________________________________________________________________________

13

Stud

ii d

e ca

z

Etapa 5. Inserarea şi formatarea imaginii

EXERCIŢIU

INSERAREA ŞI FORMATAREA UNEI IMAGINI

Inseraţi imediat după text, din folderul imagini, imaginea indeploiesti.gif.

MENIUL INSERT, COMANDA IMAGE

1. Executaţi clic în locul în care doriţi să inseraţi imaginea (imediat după linia de text inserată).

2. Acţionaţi tasta Enter.

3. În meniul Insert executaţi clic pe comanda Image. Remarcă. Se afişează caseta de dialog Select Image Source.

4. În caseta de dialog Select Image Source, selectaţi folder-ul imagini, iar apoi executaţi clic pe fişierul indeploiesti.gif. Executaţi clic pe butonul

.

14

5. Centraţi imaginea pentru a îmbunătăţii modul de prezentare.

5.1 Selectaţi imaginea.

5.2 În inspectorul Properties, executaţi clic pe butonul (Center).

6. Vizualizaţi pagina Web într-un browser.

Etapa 6. Inserarea legăturii hipertext

EXERCIŢIU

TRANSFORMAREA UNEI IMAGINI ÎNTR-O LEGĂTURĂ HIPERTEXT

Atribuiţi imaginii inserate legătura hipertext: http://inde.upg-ploiesti.ro.

INSPECTORUL PROPERTIES

1. Selectaţi imaginea.

15

Stud

ii d

e ca

z

2. În inspectorul Properties, în zona Link introduceţi adresa Web: http://inde.upg-ploiesti.ro.

3. Salvaţi pagina Web (prima dumneavoastră pagină Web!) via FileSave.

4. Analizaţi codul HTML generat.

Cod sursă <p align="center">

<a href="http://inde.upg-ploiesti.ro">

<img src="../imagini/indeploiesti.gif" width="122"

height="69" border="0"></a>

</p>

5. În panoul Files, în zona Site vizualizaţi structura primului dumneavoastră site.

6. Vizualizaţi pagina Web într-un browser.

______________________________________________________________

_________________________________________________________________

_________________________________________________________________

16

7. Testaţi legătura hipertext pe care aţi creat-o.