Sunteți pe pagina 1din 16

Studiul de caz 01

Crearea primului site


Dreamweaver MX 2004
Etapa 1 –Crearea site-ului
Etapa 2 –Organizarea site-ului:creare a fol
d e r
e
lo

ia
fi
şierelor
Etapa 3 –Definirea parametrilor paginii
Etapa 4 –Introducerea ş if o
r
m atare
a textului
Etapa 5 –Inserarea şi f
o rm a
tare aimaginii
Etapa 6 –Inse r
a r
ea legă t
u r
i
ihipertext
Studiu de caz –crearea primului site
01 Dreamweaver MX 2004
Site-ulp e care văinv i
tăm să-l creaţiîn
acest studiu de caz este foarte simplu.
El conţin e o pagi
n ă W eb î
n care vi se
ce r
e să inseraţi
:u n text, o im a
g ineşi o
l
e gă t
ură hi
pe r
textc ătre s i
te-ul I.N.D.E.
Ploieşt
i (inde.upg-ploiesti.ro).

P
or
ni
n
ddel
ael
e
men
t
el
epr
ez
e
nt
at

na
ce
st
st
ud
i
udec
az
,c
re

in
ou
ls
it
e
,
p
ar
c
ur

ndu
r
măt
or
i
ip

i:
1. C
r
ear
e
aşi
or
ga
ni
z
ar
ea
si
t
e-ului.
2. Definirea parametrilor paginii.
3. In
t
ro
du
ce
r
eaş
if
or
ma
trea textului: „
a I
.N
.D
.E
.Pl
o
ie
şt

, un deceniu de
e
xi
s
te

ă
!”
.
4. I
n
se
ra
r
eaş
if
or
ma
ta
r
eai
ma
gi
n
ii
,c
ar
er
ep
r
ez
in
t
ălo
g-ul site-ului I.N.D.E.
o
P
l
oi

t
i.
5. I
n
se
ra
r
eal
e

tu
r
ii
hi
p
er
te
xt
.

Etapa 1. Crearea site-ului

EXERCI
ŢI
U
CREAREA UNUI NOU SITE
2 C
r
eaţ
i
uns
it
esub Dreamweaver MX 2004, numit Primul site, î
nmo
dl
oc
al
c
ume
to
da
el
em entară(Basic).
MENIUL SITE, MANAGE SITES..., NEW, SITE
1. Î
nme
ni
u
lSite execut
a
ţi
cl
i
cp
eManage Sites...NewSite.

R
em
ar

.S
ea
fi
ş
ea

ca
se
t
ade
di
al
o
gSite Definition for....

2. În c aset
ad
edi
a
lo
gSite Definition
for... ac
t
iv

iz
on
a Basic (modul
Basic c e
r
e m
aip

ine i
n f
o rm a ţ
ii
teh niced
ec
ât
mod
ulAdvanced).

3. T astaţ
inu
me
les
i-ului Primul
t
e
site, i
a
r a
po
iex
ec
ut
aţi cl
ic p
e

butonul .

4. Î
nca
se
t
a d
edi
al
o
g u
r
mătoa
re
,
Studii de caz
a
ct
i
va
ţ
ibut
o
nulr
a
di
oNo („
Do
you want to work with a server
technology such as ColdFusion,
A SP.
NE T,ASP ,JSPor PHP?”), iar
apoi ex
ec
ut
a
ţic
l
icp
ebu
t
onu
l

. 3
5. În no uaferea st
r
ă ,a ct
ivaţiprimu l
bu t
o n r
adio,iarap oiexe c
utaţicli
c
pe butonul (folder) pentru a
selecta folder-u
l rădăc i
nă local
(D:\Primul site\). D acăa cest
folder nu a f
o stcreat, puteţ
i să-l
creaţi î
na cest mom ent. Executaţi

clic pe butonul .

6. În m
en
iu
ld
er
ul
an
td
inc
as
et
a de
d i
alo
gur
măt
o
ar
e,a
le
ge
ţ
iNone,
iar a
po
ie
xe
cu
ta
ţi
cl
i
cpeb
ut
onul

Re m arcă
. D r
e am w eaver MX 20 0 4 afişează
un rezumat al tuturor parametrilor site-ului
dum neavoastră.
7. E
xe
cu
t

icl
i
cpeb
ut
on
ul

4
Etapa 2. Organizarea site-u
l
ui
:c
r
ea
re
af
ol
d
er
el
o

ia
fi
şier
elor

EXERCI
ŢI
U

CREAREA FOLDERELOR
C
r
eaţ
i
fo
ld
er
el
ehtml ş
iimagini.

PANOUL FILES, NEW FOLDER


1. În pa noul Files,exe cuta
ţicli
c cu
butonul din dreapta al mouse-ului
pe site-ul Primul site. Î
n m eniul
contex t
u al
, e xec
utaţ icli
cpe New
Folder.

2. Î
n
lo
cu
i
ţuntitled cu html.
i
3. Re petaţi pa şii 1 şi 2 pentru a Studii de caz
crea folder-ul imagini.

______________________________________________________________ 5
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
EXERCI
ŢI
U

CREAREA FIŞI
ERULUI INDEX.HTML Ş
I SALVAREA
F
IŞI
ERUL
UIINDEPLOIESTI.GIF

C
r
eaţ

nf
ol
der-ul html, f
i
şi
e
ru
lindex.html (pagina de index a site-ului),
i
a

n f
ol
d
e-ul imagini s
r al
v

i fi
şi
erul indeploiesti.gif (logo-ul site-ului
I
.
N.
D.
E.
Pl
oi
eşti
).

NEW FILE
1. Exec u
t

ic
lc cu butonul din dreapta al mouse-ului pe folder-ul html, iar
i
apoi e
xe
cu
t
aţicli
c peNew file.
2. T
as
t

in
ume
l
ef

i
er
ul
u
i, index.html.
3. Sa l
vaţi im a
gine a care r
e pre z
intă l
o go -ul site-ului I
.
N.
D.
E
. P
l
oi

t
iîn
folder-ul imagini sub numele indeploiesti.gif.

Remarci:
 O b s
erv aţ
i structura arborescentă a
c e l
o
rd o uă fol
d er
e .
 Pentru moment pagina
d u m
n e avoastrăW ebn uc o nţi
n e
nimic, tot ceea ce am realizat a fost
organizarea site-u l
uiîn foldere ş iîn
fiş i
e
re.
 U r m
ea z ă ca în e t
ape l
e u rm ătoa r
e s
ăvăp
re
oc
up

id
ei
ns
er
a
re
ael
e
men
t
el
or
paginii.

6 ______________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
Etapa 3. Definirea parametrilor paginii

EXERCI
ŢI
U

PARAMETRIZAREA PAGINII
F
ol
o
si
ţi c
a tegoria Appearance (caseta de dialog Page Properties) pentru a
d
ef
i
ni
iu rm ăt
o ri
i para m
etri
iai p ag
ini
i index.htm:
 Page font: Verdana, Arial;
 Size: 24 pixels;
 Background: #FFFF00.

MENIUL MODIFY, PAGE PROPERTIES, CATEGORIA


APPEARANCE
1. D
es
ch
i
de
ţi
do
cu
me
nt
uindex.html via WindowFiles.
l

2. Î
np
ag
i
naindex.html e
xe
cu
t

ic
l
i
cpe
but
o
nul .
3. A
f


ic
as
et
aded
ia
l
ogPage Properties, via Meniul ModifyPage
Properties.
4. Înca se t
ad
ed
ia
l
ogPage Properties, categoria Appearance d
ef
i
ni
ţ
ip
ar
am
et
ri
i
paginii.
Studii de caz

7
EXERCI
ŢI
U

ATRIBUIREA UNUI TITLU PAGINII


Atrib
uiţ
i paginiidum neavoa stră (index.html) titlul: Zece ani. F
ol
o
si
ţ
i un a
din metodele: Page Properties / Bara de instrumente ale documentului /
C
od
ul
su
r
săH
TML.

PAGE PROPERTIES, CATEGORIA TITLE/ENCODING (1)


1. Î
nca
s
et
aded
i
al
ogPage Properties, e
xe
cu
t

icl
i
cpec
at
e
gor
i
a
Title/Encoding.

2. Î
nz
on
aTitle i
n
tr
od
uc

i
:Zece ani.

8
R
em
ar

.T
i
tl
u
lp
ag
i
ni
is
ea
fi
ş
ea

în
bar
ad
et
it
l
uan
av
i
ga
to
r
ul
ui
.
BARA DE INSTRUMENTE (2)
1. E
xe
cu
t

ic
l
i
cpViewToolbarDocument (
e d
ac
ăt
oo
l
ba
r-u
ln
ues
t
eaf
i
şa
t
).
2. Î
nc
âm
puTitle i
l n
tr
od
uc

i
:Zece ani.

CODULSURSĂHTML (3)
1. E
xe
cu
t

ic
l
i
cpe
but
o
nul .
2. În el
em e ntu l
<title> d
i
nse

i
un
ea<head> î
n
lo
cu
i
ţUntitled Document
i
cu Zece ani.

C
ods
ur
s
ă
<!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"> Studii de caz
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
body {
background-color: #FFFF00;
}
--> 9
</style></head>

<body>
</body>
</html>
Etapa 4. Introducerea ş
if
o
rma
t
ar
ea
textului

EXERCI
ŢI
U

INTRODUCEREA UNUI TEXT


I
n
tr
od
uc


ndo
cu
men
t
ulindex.html,
del
at
as
t
at
ur
ăt
ex
t
ul
:„
I
.N
.D
.E
.
®
P
l
oi

t
i,un
dec
en
i
udee
xi
stenţă!”.

BARA INSERT, CATEGORIA TEXT, BUTONUL


1. Execut
aţic l
icî nf e
r
eas
t
ra
documentului index.html.
2. I
n
tr
od
uc

i
de la tastat
u
rătextul:

I
.N
.D
.E
.P
lo
i

ti
,und
ec
en
i
ude
e
xi
s
te

ă
!”lă

ndunb l
a
nc
î
n
ai
nt
ed
ev
ir
g
ul
ă.
3. E
xe
cu
t

ic
l
i

nl
o
cu

nc
ar
ed
or
i
ţi

in
se
r

ic
ar
a
ct
er
u
ls
pe
ci
a
l.

4. I
ns
er
a
ţi
caracterulspeci
a l® :
Î
nba
r
a Insert, categoria Text,
e
xe
cu
t

ic
li
cpeb
ut
onul 
.
10

R
ema
rc
ă.
Îns
pa
ţi
u
lde dinaintea virgulei
s
ea
fi
ş
ea

ca
ra
ct
e
ru
l®.
EXERCI
ŢI
U

APLICAREA ELEMENTULUI DE FORMATARE <SUP>


A
pl
i
ca
ţ
iel
e
m en
tulde f
o rmatare <sup> c
ar
a
ct
er
u
lu
is
pe
ci
a
l®f
o
lo
si
n
d
c
od
ul
su
rs
ăHTML/Quick Tag Editor.

CODULSURSĂHTML (1)
1. A
f


i
co
du
ls
ur
s
ăHTML ş
ia

ug

ie
l
eme
nt
ul
<sup>.

C
ods
ur
s
ă
<body>
I.N.D.E. Ploieşti<sup>&reg;</sup>, un deceniu de
existenţă!</body>

2. E
xe
cu
t

ic
l
i
cpe
ta
st
aF5 pentru a actualiza codul HTML.
3. Vizua
li
za ţip
ag
i
naW
ebî
n
tr
-un
Studii de caz
browser.

11
QUICK TAG EDITOR (2)
1. S
el
e
ct

i
ca
ra
ct
e
ru
ls
pe
ci
a
l®.
2. A
f


i
Qui
c
kTa
gEd
i
to
r.

3. T
as
t

isu ş
is
el
e
ct

i
<sup>.

4. A

i
on

it
a
st
aEnter pentru acceptarea elementului HTML.
5. A
na
l
iz
a
ţi
co
du
lH
TML
ge
ne
ra
t
.

C
ods
ur
s
ă
<body>
I.N.D.E. Ploieşti<sup>&reg;</sup>, un deceniu de
existenţă!
</body>

6. Vizua
li
za ţip
ag
i
naW
ebî
n
tr
-un
browser.

______________________________________________________________
_________________________________________________________________
12 _________________________________________________________________
_________________________________________________________________
Etapa 5. Inserarea ş
if
o
rma
t
ar
ea
imaginii

EXERCI
ŢI
U
INSERAREA ŞI
FORMAT
AREAUNEI IMAGINI

I
n
se
ra
ţ
ii
me
di
a
tdu
păt
e
xt
,d
i
nfolderul imagini, imaginea indeploiesti.gif.

MENIUL INSERT, COMANDA IMAGE


1. E
xe
cu
t

ic
l
icî
nl
o
cu

nc
ar
ed
or
i
ţi
săi
n
se
ra
ţ
ii
ma
gi
n
ea(
i
med
i
atd
up
ăl
i
ni
a
d
et
ex
ti
ns
er
a

).
2. A

i
on

it
a
st
aEnter.
3. Î
nme
ni
u
lInsert e
xe
cu
t

ic
l
i
cpe
co
ma
nd
aImage.

Rem
ar

.S
ea
fi
ş
ea

ca
se
t
ade
di
al
o
gSelect Image Source.

4. Î
nc
as
et
ad
edi
a
lo
gSelect Image Source, s e le
ct

if
ol
d
e-ul imagini, iar apoi
r
e
xe
cu
t

icl
i
cpef i
ş i
eru l indeploiesti.gif. Ex
ec
ut
a
ţi clicp eb utonul

. Studii de caz

13
5. C
en
tr
a
ţi
im
ag
in
ea
pe
nt
r
uaî
mb
un
ăt
ă
ţi
im
od
ul de prezentare.
5.1 S
el
e
ct

i
ima
gi
n
ea
.
5.2 Î
ni
ns
pe
ct
o
ru
lProperties,
ex
ec
ut
a
ţi
cl
i
cp
ebu
t
onl (Center).
u

6. Vizua
li
za ţip
ag
i
naWe
bîn
t
r-un
browser.

Etapa 6.
In
se
r
ar
ea
le

t
ur
ii hipertext

EXERCI
ŢI
U

TRANSFORMAREA UNEI IMAGINI Î


NTR-OL
EGĂT
URĂ
HIPERTEXT

A
t
ri
bu
i
ţi
i
mag
i
ni
ii
n
se
ra
t
el
eg
ăt
ur
ah
ip
er
t
ex
thttp://inde.upg-ploiesti.ro.
:

14
INSPECTORUL PROPERTIES
1. S
el
e
ct

i
ima
gi
n
ea
.
2. Î
nin
sp
ec
t
or
ulProperties, î
nzo
naLink i
n
tr
od
uc

iad
r
es
aWe
b:
http://inde.upg-ploiesti.ro.

3. S
al
v

ip
ag
i
naW
eb(
p
ri
ma
dum
ne
av
oa
st
r
ăpa
gi
n
ăWe
b!
)v
i
aFileSave.
4. A
na
l
iz
a
ţi
co
du
lH
TML
ge
ne
ra
t
.

C
ods
ur
s
ă
<p align="center">
<a href="http://inde.upg-ploiesti.ro">
<img src="../imagini/indeploiesti.gif" width="122"
height="69" border="0"></a>
</p>

5. Î
npa
nou
lFiles,î
nzo
naSite
v
i
zu
al
i
za
ţis truc
t
ur
ap r
i
mulu i
d
umn
ea
vo
as
tr
ă si
t
e.

6. Vizua
li
za ţip
ag
i
naWe
bîn
t
r-un Studii de caz
browser.

______________________________________________________________ 15
_________________________________________________________________
_________________________________________________________________
7. T
es
t

il
egă t
u
rah
i
pe
rt
e
xtp
ec
ar
e
a
ţ
ic
re
at
-o.

16