Studiul de caz 01

Crearea unui album foto

Etapa 1 –Creare a şiorgan
iza rea sit
e -ului
Etapa 2 –Definirea parametrilor paginii
Etapa 3 –Crearea albumului foto
 01 Studiu de caz –
foto
crearea unui album

N
ou
ls
it
e
,pec
ar
ev
ă in vi
tăm s ă-l
crea ţ
i î
n ac
e st studiu de caz c
onţi
neo pag i
nă
d
epr
ez
en
ta
r
e,s
ub form a un ui al
bu mf o
to, a lucrări
lor apăr
u t
e în colecţi
a
I
.
N.
D.
E.
Pl
oi
eş
t
i(
înanii 2004, 2005). Albumul va fi compus din imagini (prima
c
op
er
t
ă)d
edi
men
si
un e şim ărime red use
, ara njate în coloan
e r
eprez entând
l
e
gă
tu
ri
că
tr
epa
gi
n
ile W eb ca r
e con ţi
n i
maginil
e cope r
ţi
lor ded i
men siuni mai
m
ar
iş
id
eî
na
lt
ăr
ez
oluţie.

2
Porn
ind de l
a element
elep rez
e nt
ateînace ststud
i
u de caz, c
reaţin
oul s
itecu
comanda Create Web Photo Album (meniul Commands din Dreamweaver MX
2004)
,pa r
curgân dur
m ăt
oriipaşi:
1. C
r
ear
e
aşi
or
ga
ni
z
ar
ea
si
t
e-ului.
2. Definirea parametrilor paginii.
3. Utilizarea comenzii Create Web Photo Album, via meniul Commands pentru
crearea albumului foto.

E
t
apa
1.C
r
ear
e
aşi
or
ga
ni
z
ar
ea
si
t
e-ului

EXERCI
ŢI
U

CREAREA UNUI NOU SITE

C r
eaţi uns i
te s
ub Drea m w eav
e r MX 200 4 ,
nu
mi
tC ol
e cţi
a IN
DE Ploi
es t
i
,
com pu sdin d ou
ă f
o l
de re: html şiimagini. Î
nf
ol
de
r-ul html c
r
ea ţifi
şi
er ul
index.htm, iar î
nfolder-ul imagini sa
lvaţi i
mag
in
i
lerep rez
en t
ând coperta
întâia l
ucrăril
o r
apă rut
e în Co
lecţi
a I.
N .
D .E .
Pl
oi
e
şt
i
,în ani
i2004, 2005.

METODA BASIC (ELEMENTARĂ), MENIUL FILE, NEW FILE

Studii de caz

În fi
gu ra a
l
ăt
ur
a
tăs
epr
e
zi
nt
ăpa
no
ul
Files ş i s
tr
uc
t
ur
aarb
or
es
c
ent
ăa
site-ului.

3
 Etapa 2. Definirea parametrilor paginii

EXERCI
ŢI
U

PARAMETRIZAREA PAGINII
D
ef
i
ni
ţi urm ă t
ori
ip ar a
m e
tr
iia ip agini
i index.htm:
 Title: Album foto;
 Page font: Verdana, Arial, Helvetica, sans-serif;
 Size: 24 pixels.

MENIUL MODIFY, PAGE PROPERTIES

1. D
es
ch
i
de
ţi
documentul index.htm.
2. A
f
iş
aţ
i
ca
se
t
ade
di
al
o
gPage Properties.
3. D
ef
i
ni
ţ
ip
ar
am
et
ri
i
pa
gi
n
ii
f
ol
os
i
ndc
at
e
gor
i
i
lAppearance ş
e iTitle/Encoding.

4
Etapa 3. Crearea albumului foto

EXERCI
ŢI
U

CREAREA UNUI ALBUM FOTO

C
r
eaţ
iu
nal
bu
mfot
oca
r
e s
ăco
nţ
i
năi
mag
in
ic
u pr
im a cop e
r
tăa
l
u
cr
ăr
i
l
ora
pă
ru
t
eîCo
n l
e
cţ
i
aI.
N.
D.
E
.Pl
o
ie
şt
i
,î
na
ni
i2004, 2005.

Studii de caz

MENIUL COMMANDS, CREATE WEB PHOTO ALBUM

1. E
xe
cu
t
aţ
ic
l
i
cî
nf
er
e
as
tr
ad
oc
um
en
tu
l
u(index.htm).
i
2. Î
nme
ni
u
lCommands, e
xe
cu
t
aţ
ic
l
i
cpCreate Web Photo Album.
e 5
R
em
ar
că
.S
ea
fi
ş
ea
ză
ca
se
t
ade
di
al
o
gCreate Web Photo Album.
 3. Î
ncaseta de dialog Create Web Photo Album e
f
ec
tu
aţ
iu
rm
ăt
oa
r
el
e
o
pe
raţ
ii
:
3.1. Î
nc
âm
puPhoto album title: i
l n
tr
odu
ce
ţ
iCo
l
ec
ţi
aI
.
N.
D.
E.
Pl
oi
e
şt
i
.
3.2. Î
ncâ
mp
ul Subheading info: intr
o
duc
eţ
iE
di
t
ur
a U
ni
ve
r
si
t
ăţ
i
idi
n
P
l
oi
eş
t
i.
3.3. Î
nc
âm
puOther info: i
l n
tr
od
uc
eţ
i
al
te
in
fo
r
maţ
i
ir
ef
e
ri
t
oa
re
laa
l
bu
mul
foto.
3.4. Î
nc
âm
puSource images folder: i
l n
tr
od
uc
eţ
i
ca
le
ac
ăt
r
ef
ol
d
er
-ul care
c
on
ţ
in
ei
ma
gi
n
il
e(imagini).
3.5. Î
ncâ
mp
ulDestination folder: int
r
od
uc
eţ
if
ol
d
er
-ul î
nc
ar
evo
rf
i
salvate paginile (html).
3.6. D i
n l
ist
a der ul
a ntă Thumbnail size: a
l
eg
eţ
id
i
men
si
u
ne
ai
ma
gi
n
il
o
r
din albumul foto (200x200).
3.7. Înc â
m pu l Columns:
i
n tr
oduce ţinu m ă r
ulde
coloan
e î
n ca r
e do
riţ
i
să f ie o rg a
ni
zat
albumul foto (3).
3.8. D acăbifaţ
icase
ta
de
validare Show
filenames, vafi
af
i
şa
t
în al
bum ş
inu m
el
e
fişier
uluiimagin
e.
3.9. C
âmp
ur
i
l
eThumbnail format: ş
iPhoto format: v ăpe rmits
ăst
a
bi
l
iţ
i
c
al
i
t
at
eai
magi
ni
l
or d in alb
u m u
l f
o to. În câm pulScale: i
n
tr
od
uc
eţ
i
d
i
men
si
un
ea(î
nprocente) a imaginilor Photo format.
3.10. B
i
fa
ţi
op
ţi
u
ne
aCreate navigation page for each photo pentru a crea
c
ât
eop
ag
i
năs
e
par
a
tăp
en
tr
uf
i
ec
ar
ei
ma
gi
n
edi
na
l
bu
mul
f
ot
o.

4. E
xe
cu
t
aţ
ic
l
i
cpe
but
o
nul .

R e
m arcă .Au tomat se va d
es
ch
i
dea
pl
i
ca
ţ
iMacromedia Fireworks care va formata fiecare
a
imagine din albumul foto.

6 5. E
xe
cu
t
aţ
icl
i
cpeb
ut
on
ul

din fereastra
Macromedia Dreamweaver MX
2004, care s-a deschis.
6. Vizua
li
za ţip
ag
i
naW
ebî
n
tr
-un
browser.

7. D a
că e xecuta
ţi cl
ic pe un a d i
n
imagini, automat se va deschide
o al
tă p agi
n ăW eb care conţine
imagine a l
a di
me nsi
unil
e ini
ţial
e.
Aceastăp agi
nă,c on ţ
ined e
asem en eaş iu nm eniud e
navi
g areî na l
bu mulf oto
(Previous, Home, Next).

R em arcă . Î
n f
old e-ul html al site-ului
r
dum ne avoa st
ră(D:\Colectia INDE Ploiesti \)
Dreamweaver MX 2004 a creat trei
subfoldere: images, pages, thumbnails.

Studii de caz
8. A
na
l
iz
aţ
i
co
du
lH
TML
ge
ne
ra
t
.

C
ods
ur
s
ă
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Colectia I.N.D.E. Ploiesti</title> 7
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-2">
</head>
<body bgcolor="#FFFFFF">
<center>
 <table bgcolor="lightgrey" border="0">
<tr><td><h1>Colectia I.N.D.E. Ploiesti</h1></td></tr>
<tr><td><h4>Editura Universitatii din Ploiesti</h4></td></tr>
</table><br>
<table align="center" border="0" cellspacing="10">
<tr valign="bottom"><td align="center"><a href="pages/Analiza si
Proiectarea Orientata Obiect a Sistemelor Informatice cu
UML_jpg.htm"><img src="thumbnails/Analiza si Proiectarea Orientata
Obiect a Sistemelor Informatice cu UML_jpg.jpg" border="0"></a>
<br>Analiza si Proiectarea Orientata Obiect a Sistemelor
Informatice cu UML.jpg</td>
<td align="center"><a href="pages/Crearea site-urilor Web cu
Dreamweaver MX 2004_jpg.htm"><img src="thumbnails/Crearea site-
urilor Web cu Dreamweaver MX 2004_jpg.jpg" border="0"></a>
<br>Crearea site-urilor Web cu Dreamweaver MX 2004.jpg</td>
<td align="center"><a href="pages/Economie Comparata_jpg.htm"><img
src="thumbnails/Economie Comparata_jpg.jpg" border="0"></a>
<br>Economie Comparata.jpg</td></tr>
<tr valign="bottom"><td align="center"><a href="pages/Managementul
Inovatiei_jpg.htm"><img src="thumbnails/Managementul
Inovatiei_jpg.jpg" border="0"></a>
<br>Managementul Inovatiei.jpg</td>
<td align="center"><a href="pages/Managementul
Organizatiei_jpg.htm"><img src="thumbnails/Managementul
Organizatiei_jpg.jpg" border="0"></a>
<br>Managementul Organizatiei.jpg</td>
<td align="center"><a href="pages/Managementul
Proiectelor_jpg.htm"><img src="thumbnails/Managementul
Proiectelor_jpg.jpg" border="0"></a>
<br>Managementul Proiectelor.jpg</td></tr>
<tr valign="bottom"><td align="center"><a href="pages/Managementul
Resurselor Umane_jpg.htm"><img src="thumbnails/Managementul
Resurselor Umane_jpg.jpg" border="0"></a>
<br>Managementul Resurselor Umane.jpg</td>
<td align="center"><a href="pages/Mediul International de
Afaceri_jpg.htm"><img src="thumbnails/Mediul International de
Afaceri_jpg.jpg" border="0"></a>
<br>Mediul International de Afaceri.jpg</td>
<td align="center"><a href="pages/Studii de caz si Exercitii
Rezolvate pentru crearea site-urilor Web cu Dreamweaver MX
2004_jpg.htm"><img src="thumbnails/Studii de caz si Exercitii
Rezolvate pentru crearea site-urilor Web cu Dreamweaver MX
2004_jpg.jpg" border="0"></a>
<br>Studii de caz si Exercitii Rezolvate pentru crearea site-
urilor Web cu Dreamweaver MX 2004.jpg</td>
8 </tr>
</table>
</center>
</body>
</html>