,

, , ,

, ...... ...,, 1.1. 1.1.2..
(...).

A
1
................................................................................1
1.1 ...............................................................................3
1.2 ................................................................................7
1.2.1 .......................................................................................................7
1.2.2 .........................................................................................................7
1.2.3 ..........................................................................................................10
1.2.4 ........................................................................................................13
1.2.5 (animation) ..................................................................15
1.3 ..............................................................................17
1.4 ...................................................................................20

..............................................................................21
2.1 .................................23
2.2 .....24
2.2.1 ...............................................................................24
2.2.2 ...................................................................................................25
2.2.3 ......................................................29
2.2.4 ...............................................................................................31
2.3 .......................................33

3 E Flash
..............................................................................33
....................................................................................................................34
3.1 Flash............................................................35
3.2 Flash Animation ....................................................................................40
3.3 Flash ................................................................................50
3.4 Flash ActionScript.............................54
3.5 Flash.................................................................58
.......................................................................60

 4 ,

..............................................................................69
4.1 .............................................................................71
4.2 .................................................................................81
4.3 Video ...............................................................................87
....................................................................................................................96

5 HTML
..............................................................................99
5.1 ...................................................................................101
5.2 HTML................................................................103
5.3 .......................................................................109
5.4 .................................119

6 Front page Dreamweaver

............................................................................125
5.1 FrontPage ............................................................................................127
5.2 Dreamweaver 8 ...................................................................................138

............................................................................151
7.1 FrontPage ............................................................................................153
7.2 Dreamweaver 8 ...................................................................................162

8 Web Publishing
............................................................................173
8.1 ............................................................................175
8.2 (Web Publishing)...............177
..................................................................................................................187
..............................................................................................................189
....................................................................................................193
...........................................................................................................195
ii

:
,
.
, ,
, (animation).
.
.

 1.1
: / :
, , (), , . , , , .. . , , ,
.
. .

:

(animation)

. , , ..
(user interface).

1.1.

 1.1: ,

. ,
. .
, . .
, . .
, (multimedia),
(interactive multimedia) (hypermedia).
,
.
1.1
.
, .
4

 .
. .
..
.

1. 2: .

.
. .

.
1. 3: .

.
.

 1.2
, .
, ,
. ,
o , ,
.

1.2.1
,
. ,
. .
:

, , .

, :

(optical character recognition-OCR) .

(speech recognition)
.

1.2.2
,
(scanner), (download) Internet
(CD, DVD).
, Photoshop,
.
7

 ,
:
1. RGB (Red, Green, Blue)
.
, , .
RGB (Red, Green, Blue)
.
2. T CMYK (Cyan), (Magenta), (Yellow)
(black).

1.4: RGB CMYK

(bitmaps) (vertical),
.

bits (), (pixels).
pixel pixels
.
pixels
(width) (height), (image resolution)
pixels .
, dots per
inch (dpi) pixels per inch (ppi).
.
8

 pixels , pixels
. , ,
.
(color depth pixel depth
bit resolution). (pixel)
bits .
,
. . ,
Photoshop
PhotoCD
(formats) :

TIFF

.IF

format

Mac/DOS-

WINDOWS/Unix.
GIF

.GIF

format

browsers WEB.

PNG

.PNG

Mac/DOS-WINDOWS/Unix.

BMP

.BMP

DOS-Windows.

TARGA

.TGA

Mac/DOS-WINDOWS/UNIX.

JPEG

.JPG/.JPEG

format
web.

(object oriented vector graphics) Illustrator Adobe CorelDRAW
Corel. , . ,
, (x,
y) .


, .

. , .
(formats) :

WMF (Windows Metafile)

.WMF

Microsoft,
.

AI (Adobe Illustrator)

.AI

Illustrator Adobe.
CDR (CorelDRAW)

.CDR

Corel Draw.

PICT

.PCT

Macintosh.

1.2.3
, . .
, ,
, ..,
. .
:

, .
.

.
10

(CD, DVD).
(audio extraction) . ,
4 .

, . (sampling)
.

ADC (Analog to Digital Converter),
DAC(Digital to Analog Converter).
(line) ADC. ADC
:

. (sampling rate),
( KHz), .
ADC

.
11 KHz, 22,050 KHz 44,100 KHz. , 44.1 KHz
1/44100 .

.
(sample width).
.
. ,
16 bit 65536 . .

, 44.1KHz/16bit
22KHz/8bit. 44.1KHz/16bit 44.1KHz 65536 .
11

 1. 5:
) 44,1 KHz ) 22,05 KHz

1.4 .
.
,
.
.
MIDI
MIDI Musical
Instrument Digital Interface 1982
.
, .
.
MIDI ,
, , , .. , 12

 . MIDI .
(formats) :

AIF/AIFF

.AIFF

Audio Interchange File Format.

.

MPEG-1 Layer III

.MP3

MPEG-1 Layer III.

WAVE

.WAV

Windows.

MIDI
MIDI

.MID

MIDI.

RMI

.RMI

MIDI.

1.2.4
.
, ,
, , ,
. . .
.
, , , . ,
, ..
( , ), ,
.
:

, .
13

.
,
.
,
.
.
, :
MJPEG: JPEG,
. Motion JPEG (M-JPEG).
MPEG: MPEG
. MPEG .

MPEG-1: 1992 , CD.

MPEG-2: 1994 MPEG-1

.

MPEG-4: 1993 MPEG-1

MPEG-2, ,
.

(formats) :

Audio Video Interleavead

.AVI

Microsoft .

QuickTime

.Move

Apple , Midi.

MPEG

.MPG/ .MPEG

MPEG.

14

1.2.5 (animation)
(animation)
. .
(2D) (3D).
( ) . ,
.
Animation 2D
(.. ) ,

.
.

.
.

, . , ,

.
Animation 3D
( ), :

, .

.
3D -
(keyframes)
(tweening).
15



- (morphing).
animation :
* .FLI,
animation. (temporal compression)
RLE, .
320 X 200 pixels.
* .FLC, FLI animation 640 X 480.

16

 1.3

.
, :

RAM .

. :
:

, ( ), ,
.

, .

I (trackball).

(digitizer).

(Joystick).

(touch screen).

.
.

,
.

( ).

( )
.

17

 :
, .. , :

(plotter).

:
.
, .
250, 300, 400 500 GBs 750 GB. ,
. , RAM
( Buffer) 16 32 MB, (RPM) 7.200 10.000 RPM.
Buffer
.
CD-ROM DVD-ROM,
, 700 4.7 GB,
(single layer). ROM .

DVDs CDs . ,
DVD +. DVD-R DVD-RW. DVD-R , DVD-RW
, (
1000). + DVD DVD+R
DVD+RW, DVD+R DVD+RW . , 5 DVDs DVD-RAM DVD-RW DVD+RW . DVD-RAM
100.000
.
(DVD drive). ,
combo drives,
5 formats .
DVDs
. 4.7 GB DVD-5 8.5 GB, DVD-9 DL (Dual Layer). ,
DVD-10 DVD-18 18

 ,
.
, .
.
formats DVD, Blue-ray
HD DVD. Blue Ray 25 GB 50 GB. HD DVD 15 GB
30 GB. formats DVD, Blue-ray
HD DVD .
:
, :

PSTN ISDN .

Asymmetric Digital Subscriber Line (ADSL) .

ADSL
OTE,
download. , download
uploads. ADSL 8 Mbit/s 1 Mbit/s download upload . ,
ADSL ADSL2 ADSL2+
.

Ethernet ( ).

WLAN (Wireless LAN).

19

 1.4

, , , ..
, ,
,
, , (simulators), .., .
, , ..,
.

.

, .
, , ..
,
,

.

20

:
.

.
,
.

21

22

 2.1
,

. , , ,
video .
, , , ,
. ,
, .

, . ,
.. , ' .

. ,
, , , , ,
, , .
,
, , .
.

&

2.1:
23

 2.2
2.2.1

, .
.
:

,
.
, , . .


.
.

Magenta 1.2.

2. 1: , Magenta.
24

.
.

, () :

<50 Kb.
windows, Macintosh Solaris.

.
,
. . ,
, .
,
.

2.2.2

, . . ,
. .

25

2.2:

. ( )
.
,
.
:

:
.
: .

:
:
.

26

 .
:
. () , () .
. .
: . ,
. / .
: ,

.

.

.

,
. :

. (, , ).
27

 .
, . , ,
.

. ,
.
:

.
.
.

, .

, .

,
.

,
.

,
.

,

.
, ,
.

28



. ,
,
.
:

.
o ,
.
o .
o .
o .
o .

,

.

2.2.3

. .
.

.

. , . :
1. visual c++, visual basic, Delphi .
2. (Authoring tool) Authorware Pro, Diretor .
.
(interface),
.
29

 ,
, , , :
. ,

.
(multimedia authoring systems).
,
. ,
(.. Video, image editing), .

:

, , .
, .
.
Asymetrix Multimedia Toolbook
Windows.

. .
, , . Macromedia
Authorware, Macintosh Windows.
. Macromedia Director,
Windows, Macintosh.
, ,
.
'', (look and feel).
C++ Java.
formats video.
30

2.2.4

, , :

,
.
,
, . .
, .
,
.

, , cd dvd .

31

 2.3
,

,
.
, ,
. .
:

(Project Manager): O
, .
(Production Manager):

.
: .
, .
video: , video. video
animation.
:
. ,
(user
interface), .
:
. .
: .
:
,

.
: .
(. visual basic).
32

 3
E

Flash

,
Flash.

:
Flash
(stage), (frame), (timeline), (layers).
Flash.
animations tween.
(buttons) , .
(actions) script Flash ActionScript.
Flash HTML .

33

 Flash Macromedia Adobe

animation. Flash WEB,
Flash . Flash (vector graphic). (bitmap graphics)
pixel , 1 .
Flash
(. ).
. Flash
(movies) .fla, Flash, Internet
, .swf.

34

 3.1 Flash

Flash .
.
:
Open a Recent Item: . (Open File dialog box)
Open.
Create New:
Flash. Flash documents ActionScript files.

.
Flash document.
Create from Template: (templates) Flash .
Extend: website Adobe,
, .
Flash.
.
Flash
Dont Show Again.
Create New Flash document
Flash.

Flash
Flash : (stage),
, (properties panel),

(timeline), .
Flash

. flash 8
3.1.

35

 3.1: flash 8 professional.

: Flash ( 3.1)

(Stage)
. , frame ( ). ,
.
, . Flash
. , Scene1, , .

36

 (timeline)
Flash
.
:

3.2: (timeline) flash.

I. (Layers)
timeline Flash
. . Flash Layer 1,
Layer 2 , .
:
1.
( 3.2).

1.
.
2. , ( 3.2).

1. .
2. .
3. Enter .

.
.

37


1.

.
2. .
II. (Frames)
Flash (layers)
(timeline).
Flash . (frames),
. Flash
(frames), . ,
.
- (keyframes), (event).
(animation). - .
Flash Layer Layer 1 Timeline
( ) - (blank keyframe) 3.2 .

.
keyframe:
1.
.
2. keyframe Insert keyframe.

(Properties Panel)
( 3.1)
. . . Frame Frame.
.
:

movies size ( )

background colour ( )
38

frame rate ( ), .
. 12
Frames ,
720 frames 1 .
(.
, trailer ) frame rate

( , ).

, ( 3.1) Flash. Frame Layer.
.
-
Flash. :
Flash (scenes) , (Layer). (frames). timeline Layer
.

39

 3.2 Flash Animation

Flash
web.
tags HTML (animation) .
, Flash , .
Flash
animations . Flash
animation -. Tween animation Frame by Frame.

.
tween between . .

, Flash
. Tween
().
, 1
20
. ( ) , tween Flash

.
Flash
frames. animation keyFrames (frames ). keyFrames
Flash, Frames
, ,
, , .
Tween
animation 200 frames
Frames
Flash ! , Frame by
Frame, animation frames
, animation.
40

 Flash Tween animation Shape Tween Motion

Tween. shape tween ,
motion tween (symbols) .
,
animation, Shape Motion .

3.1
tween
animation
.

1. Frame 1 Layer 1

.
2. flash (oval tool). shift .

3.3: flash.

3. ,
(selection tool)

. , .

Tween animation ,
-
flash. .
:
1.
.
41

2. convert to symbol ( ) . . my_circle

Type Graphic. OK .

3.4: , .

3. frame 1 . (library) Flash. Windows --> Library

. . ,
Flash . (scaner) , .
Motion Tween
Tween animation Flash .
Frame 1,
frame 35
.
1. frame 35 keyframe.
2. Frame 35 keyframe, keyframe ( Frame 1 keyframe)
frame
. ,
frame 1 shift .
3. frame
frames 1 frame 35,
Create Motion Tween.

42

 3.5

4. timeline
3.6.

3.6: T motion tween

keyframes
Keyframes ,
.

animation, . (keyfarmes) Motion Tween flash animation .
Control --> test Movie
Flash. Flash .swf
Macromedia Player. , Ctrl +
Enter .
, .
main menu file --> save.
3.2
Shape tween.
.
Shape tween , Motion Tween, flash
.

1. Shape Tween animation. Frame 1 Layer 1

. flash (rectangle tool).

43

 3. 7

2. frame 30 Timeline keyframe.

frame 60 keyframe. Frames 1
60 ( 3.8),
animation .

3.8

3.
frame 30 .
frame 30
shift
. Frame 30
:

3.9: .

4. frame frame 2 29
. (Property window) Tween, none ( Tween).
Shape.

44

 3.10: frame, .

5. keyframe frame 31
frame Frames 32 59
Tween Shape.
6. timeline

3.11: T shape tween.

.
7. animation, Control --> test Movie
Flash .
keyframe 30
.

3.3
Tween Flash, Motion Shape ,
animations, , animation
frames animation ;
-;
, flash
frame frame animation
.
animation . .
frame frame,

animation . Path animation 45

 .
.

1. layer 1 .
Add Motion Guide.

3.12

2. flash
layer layer 1 Guide: Layer 1,
layer layer 1.

3.13

3. layer . Guide Layer .

3.14

4. pencil tool flash

. :

46

 3.15: Pencil,
.

5. , . frame 1 layer 1 . layer

. , , (oval tool)
, :

3.16

6. motion tween .
Convert To Symbol.
Type graphic, . my_circle
name OK.
7. frames frame 30 layer timeline. frame 1
guide layer 30
30 frames layer.

3.17: frames timeline Flash.

47

8.
frames. Insert Frame.

3.18

9. frames layers frame 1 layer 1 .

3.19

10. (selection tool)

. flash .

3.20: ,
.

11. frame 30 layer 1 keyframe.

frame 30 Insert keyframe.
12.
, :

48

 3.21: .

13. Motion Tween . frame

2 29 layer 1. layer animation. (Properties Windows) Tween Motion.

3.22

14. , , 3.23. orient to path.

. orient to path.

3.23: Orient to path.

15. , Control --> test Movie Flash

.

49

 3.3 Flash

(buttons) . To Flash, Graphic Movie Clip. .
(action) (movie).
, Flash
.
Windows --> Common
Libraries --> Buttons.
Flash
frames. frames
, frame
, hot area ( ). frames
:
1. Up:
. .
2. Over:
.
3. Down: .
4. Hit: Over Down
.

3.4
Flash.

1. flash File --> New

Flash Document.
2.
(oval tool).

50

 3.24: flash.

3. (Properties window) (fill) (stroke) .

3.25

4. Shift :

3.26: .

5. (selective tool) Flash

.

3.27: ,
.
51

6. Convert to Symbol.
Convert to Symbol.
my_button Behavior () Button OK

3.28: flash.

7. .
. ,
(symbol edit mode).

.
.

3.29: flash.

8. Over timeline. keyframe frame.

( F6).
9. Over frame
(Properties window).

3.30: frame Over,

.

52

10. frame Down. Frame Down

keyframe. Frame Down

.

3.31: frame down,

.

11. ,
1 .
timeline scene 1.

3.32

.
.
Flash Control --> Test Movie.

.

53

 3.4 Flash ActionScript

, animations
. . Motion Tween animation
. animation; frame timeline ;
Flash
flash actionscript.
Actionscript .
(action) :
(Event Handler) (Event)

Flash . on (release)
Flash. .

- . Stop All sounds Flash

Actionscripts
:

Frame actions ( ): Frames. (playhead)

( Frame). 1.4.1 motion tween animation 35 .
.fla .swf 1 35
.
35 Stop
35.

Objects actions ( ): (. 1.5.1)

. .

54

3.5
3.1
.
.

1. .fla 3.1. Timeline

Flash 3.6.
2. 35 ( )
timeline Layer 1.
3. Actions. To .
script Script Assist ( ) :

3.323: .

4. script
. Global Functions
--> Timeline Control --> stop.
5. Stop .

3.34
55

6. ,
3.32.
7. 35
timeline 35.
Control --> test scene .fla
.swf. 3.1
.

3.6
3.4 , .

google.com.

1. .fla
3.3. , . .
.
2. To . script Script Assist (
3.32).
3. Global Functions -->
Browser/Network --> getURL.
4. getURL . URL
URL http://www.google.com Window _blank
Variables .

3.35
56

5. ,
3.32.

Flash
.
(browser)
google ( WEB).

57

 3.5 Flash
Flash
(browser) o Internet Explorer, Opera .
.fla Flash .swf
. Flash
WEB. Publish
HTML Flash .
3.7

Flash 3.1 .

File --> Publish Settings. Publish Settings ( 3.36).

tab Formats Flash

HTML. Flash Flash swf
HTML. To HTML swf
.

Publish Settings tab HTML Template Flash only.

58

 3.336: flash HTML .

HTML
SWF .

Publish .

, OK Publish Settings.

.fla .
HTML SWF. HTML
.
3.1 .

59


Flash (text).
Greece ()
.
Greece.
text
Flash, Breaking Text Apart -
Motion Tweening Greece. , animation Greece Movie clip
.

movie clip-Breaking Text Apart

1. flash 8. (stage).
,
Document Properties.

3.37: .

2. Document Properties
. 300 200 (width) (height)
. Frame Rate 25. Frame
Rate , 25
frame 50 2
60

 . OK .
3. (text).
(toolbox)
(Text Tool):

3.38: text flash.

4. o , .

.
5. Greece.
.
6. Greece . Properties panel.
,
(font), (font size),
.. , font size . 40.

3.39: (text).

7. main timeline scene 1.

movie clip
timeline movie clip. F8
Convert to Symbol.
Convert to Symbol . movie clip
OK:
61

8. movie clip, (library) ( window --> Library).

Edit in Place.
timeline movie clip
timeline scene 1.
clip
.
9. "Break Apart". :

3.40

10. Greece "Distribute to Layers." Timeline layer

Greece:

3.41

layers Timeline
Timeline
layers
layers 3.41.
,
movie clip. Greece,
-. layer
62

 (animation)
Greece.

Motion Tween animation

(Timeline). H Timeline Flash
: layers frames. animation frames layers.
.
1. layer G, Frame 10
layer, Insert keyframe:

3.42

2. keyframe Frame 10 G layer,

frame. click keyframe
Frame 1 G layer. G
.
3. G
G :

3.43: flash Greece G .

4. keyframe layer G Frame

10. Frame Movie Clip G
Greece.
63

 G
Frame 1 Frame 10 . smooth transition , Flash
Motion Tween. :
5. Frame keyFrames G layer.
Properties Tween Motion:

3.44

6. 10 frames G layer background

3.45

3.45 frame 5 Timeline

Slider. animation G,
Frame 1
Frame 10. G
.
7. Timeline .
frames layers .
frame 1 r layer
frame 9 e layer (
Greece).
frames 3.46.
frames "Insert Frame":

64

 3.46

frames layers, timeline

. ,
.
8. ,
G .
Frame 10 r layer.
Frames 10 layers r,e,e,c,e. frames Insert keyframe :

3.47

9. motion tween Frame 1

Frame 10 layer. motion tween layer G layer,
Frames r,e, e, c e layer frames
Create Motion Tween:

65

 3.48

Motion tween . Timeline ,

G . r,e,e,c e Frame 1
G.
10. Timeline Frame 1. r ( layer ).
, frame,
( )
:

3.49

11. . frame 1 layer.

:

66

 3.50

12. animation Ctrl +

Enter main menu Control --> Test Movie.
Greece ( frame 10)
Greece.

67

68

, . , .

:
, ,
Picture Manager Office Microsoft.

Photoshop Adobe.
ripping windows media player.
formats
.
movie
maker Microsoft.

69

70

 4.1
1.3
.
2.3.2 .
(image processing). freeware shareware.
freeware ,
Internet (download).
, : PhotoFiltre, FotoTagger, Rasterbator, Free Digital Photo Recovery.
, shareware
( 30
) . 2.3.2.
Microsoft Office Picture Manager Adobe Photoshop CS2.
Office Microsoft
. , Photoshop Adobe ,, .

Microsoft Office Picture Manager

Microsoft Picture Manager
WEB.
formats, , ,
, .

4.1
Picture Manager
. .

71


1. start --> All Programs--> Microsoft Office --> Microsoft Office Tools -->
Microsoft Office Pictures Manager :

4.1: Picture Manager office start.

2. Picture Manager , My
Pictures ( ) (thumbnail). Getting start ( 4.2)
.

4.2: Getting started Picture Manager

.

3. My pictures
Browse Add a new picture shortcut .
Add
.
72

4.
( 4.3).

4.3

5. ,
Edit Picture . ,
.

4.2
.

.

1. edit pictures .
73

2. (color), (brightness)
( contrast ) Auto Correct ( )
correct pictures automatically Edit Pictures ( 4.3).
,
.
.
.
3. Ctrl + Z Edit --> Undo Auto Correct
.

4.3

Picture Manager, ;
.
.

1. edit pictures

.
2. Brightness and Contrast
Edit using this tool ( 4.3),
4.4.
3.
,

.
4. ,

.

4.4:
74


Edit using these tools color ( 4.3).
(Hue) (Saturation) .
Picture Manager
. Ctrl +
Z ,
.

4.4

, cropping
word. :
1. , thumbnail,
. ;

Picture Manager

2.

cropping

cropping
4.5

.

1.

edit pictures

.

4. 5
75

2. Edit pictures tools Crop ( 4.3).

crop ,.
cropping.
3.
. 4.6 .

4.6

4. OK Crop,
. .
5. , Ctrl + S ( File --> Save) .
Photoshop
Picture Manager

Photoshop Adobe.

Photoshop
. Adobe
www.adobe.com Photoshop,
30 .
Photoshop
4.8.
Ferrari Photoshop
.

76

 4.8: Photoshop CS2

(Toolbar) . Photoshop
Flash .
(selections tools). Photoshop
.
Marquee

. ( )

, 4.9.

4.9

,

77

. , , , .

(layer). Photoshop

. , ,
.
layers ( 4.8). Ferrari
layer.

4.5
.
Photoshop clone stamp tool.

1. ,
Internet
2. Photoshop File --> Open.

Photoshop. ,

4.10

78

 Photoshop


3. clone stamp
Photoshop
. (
S)
.
4. .
4.11: . -

Photoshop CS 2.

. !
5.
Alt
. . Alt .
6.
. 5.
7. .
-
. 4.12.

4.12.
79


. Photoshop
, . ,

,
.

80

 4.2
1 ,
formats.

. Windows Media Player Movie Maker
windows
freeware
shareware.

.
.
.

Ripping
Ripping
multimedia . Ripping :
CD
, (tracks) format cda, - .cda. format MP3; MP3 MP3 player ;
.
.cda CD, CD-ROM.
CD ,
CD . , player.

, CD
format .cda.

81

4.6
Windows Media Player Ripping
, Format ( ),
playlist CD . . MP3 player
format MP3
MP3 Player.
, Ripping.

1. CD ( DVD)
ripping.
2. , CD DVD Media Player.
,
CD, Media Player.
3. Media Player . Stop .

4.13: Media player.

4.
Rip,

.
4.14.

4.14:

.
82

 ,
15 . ,
( Ripping). .
5. , tools->options tabs Rip music ripping
. 4.15. ,
.
6. :
I. Rip music to this location
.
II. Rip settings format
, format

. Media Player format WMA
MP3 Format . WAV ripping.
III. ,
ripping . OK
.
ripping .
.
7. music rip ripping. . (DVD-ROM CD-ROM)
.
8. ,
.

83

 4.15: Media player.

Formats

. format
; player
format. ;
Player ; ,
formats , converter Internet. , formats
.
1 formats
. (ISO) , -

84

 . formats :

loss-less formats
.

lossy formats , -.

lossy formats . ,

formats.

loosless formats loosy loosless .

, loosy formats ( loos-less

loosy) . format
-
.

, , MP3
Audio Cd ( format cda ) Hi-Fi .

4.7
formats. my song
mp3 wave. ;

1. . , internet . formats
,
google search ()
: mp2wave. mp3
wave, 2 = . , web,
. dBpowerAmp 11.5.

85

http://www.download.com/dBpowerAmp-Music-Converter/3000-2140_410440846.html?tag=pdp_pro.
,
.
2. . mp3.

Files of types formats . Open, 4.16 .

4.16: formats dBpowerAMP,

.

3.

Converting 1 File to

,

mp3 wave.


( Wave),
( 4.17).

4. Output to wave ,
Same Folder
as Original.

4.17:

formats

dBpowerAMP

5. , Convert to --> .

86

 4.3 Video
video,
Premiere Adobe,
windows XP windows movie maker Microsoft.
,
. windows
movie maker .
movie maker
T firewire.
videos .
.
windows, ,
Movie maker :
1. start-->All Programs-->Windows Movie Maker.

4.18 Movie maker.

2.
4.17.
, Movie maker 2.1.
87

 4.19: movie maker 2.1.

Movie maker

, 3 Flash.
.

Capture: ,
(.
, )
. capture Movie maker ( ).

Clip: ,
movie maker .

.
,
(format) 2. clips
. clip frames ( 3)
. , frames ,
Frame per second,
(Movie).
88

Collection (): movie maker clips. Movie maker , collection

. , : Clips,
, ,
.

Project (): Movie maker , .MSWMM.

.
collection
.

Movie file ( ): . .wmv (windows media player video). windows

video . ,
1 . .avi, .mpeg
. movie maker
format .wmv,
Movie maker windows media player ,
Player . ,
formats. ,
(converter)
format .
, 4.2.

4.7
(Project) movie maker.
- clip. clip , , .
.wmv.

clip
1. Movie maker, , ,
.
89

2. , collections,
clips .
file --> Import into collections windows
.

4.20: movie maker.

. Movie
maker ,
Files of types. ,
my videos my documents
Windows Movie Maker Sample File.wmv.
windows.
Create clips for Video files. ( 4.20) clips.
.
import
-clip .
3. collection
. .
.
Player windows media player.
90


play player.
clip
clip Movie maker
trimming.
. movie maker clip
,
100% :
4. clip, player pause
player
( ).
clip clips, clip
- 1. , clip Windows Movie Maker
Sample File (1). clip,
2 . clips
pause player
frame
.
5. , clips
clip
.
clip Windows Movie Maker Sample File.

4.21: clip,
,
. Del.
91

6. File --> Save Project ( ctrl + s)

. .
.

clip,
.
storyboard :

4.22: storyboard,
.

, show
Timeline. show Storyboard,

4.23: imeline
.

clip.
clip
4.22 4.23. clip
:
7. clip
storyboard
video. movie
+ ( 4.24).

92

 4.24: clip storyboard.

, clip .
8. , File-->Save
Movie File , My
computer, , . (DVD CD) Recordable CD. next.
9. . , , my videos .
next.
10.
-, setting details ( 4.23),
WMV video . frame per second, .
next.

4.25: .

11. , clips storyboard video. .

4.8
clip clip storyboard
,
clip. ,
clips . ,
clip
, Movie maker transition effect .
93


1. .
.wmv .MSWMM.
2. clip , video internet , .
3. , clip
clip. clip storyboard clip .
4. stoyboard
storyboard ( )
play player
clips.
storyboard frame clips
, timeline Flash.
5. clip
. clips
. collections Video Transitions.
movie maker.

4.26: movie maker.

6.
, player Movie maker.
7. clips Storyboard
Show Timeline . 4.25.
94

 4.27: timeline clips.

8.
clips. 4.26.

4.28: timeline clips .

9. .
Ctrl + S
Ctrl + P .

95



.
1. .
2. ;
.
3. bits pixels
:
#bytes = x x
1024x768 24 1024x768 16.
bytes
;
4. :
-
.

-
.

1 -
.

dpi 72 dpi
300.

72 dpi 5.184 pixels -

.

5. .
.
6. 2
.
.

96

7.
.

.
8.
.

www.youtube.com.
9. flash :
a. ,
.
b.
.
c. ,
. .
d. , flash .
10. Picture manager
Office , :

saturation ( ).

saturation.

Hue ( ).

picture manager
;
; .

11. :

CD.

windows media player

ripping CD.

97

12. :

CD -
CD . A copy &
paste CD, player.

format mp3 format -

.

loosy formats
.

CD format .mp3.

13. movie maker .

7 . (transition effect) movie maker .

98

HTML

Web HTML .

:
Web, WEB (server),
URL.
.

.
.

99

100

 5.1
World Wide Web
World Wide Web (WWW) (hypertext).
online
,
(hypertext). :
, , (links) .

,
.
Web HTML (HyperText Markup Language)
.
WWW ,
. Web , .
Web :
Internet Web browser
( Internet), Firefox Mozilla, Internet Explorer
Microsoft, Opera ..
Web .
Web (Web site). Web site Web
. , Web Browser
Web site .
Web
browser Web . Web site
. Uniform Resource Locator ( )
URL.
Web HTTP (Servers)
Web
browser, Web
Web server.
WWW Web
Server. Web Server Web site browsers.
101

 browser site : HTTP Web Server. server ,

. browser server .
(URL)
URL Web.
URLs Internet HTTP, FTP .. URL
server 4
:
server (HTTP,

FTP ..)
domain name (host name) Web server
port number server,

browser . port HTTP 80.

, server.

URL :
http://www.address.edu/path/dir/file.html
URL http:
Internet Protocol ( file.html).
//www.address.edu/ server (domain name) file.html.
(path) file.html
server, path/dir/file.html.

102

 5.2 HTML
HTML
HTML HyperText Markup Language (
),
. (elements) , , ..
HTML (
ASCII), HTML
Notepad Microsoft, HTML
HTML (
6 )
HTML :

Tags () HTML.

tags HTML :
<Tag> </Tag>
tag
. tags HTML tag tag .
tags tags.
tag tag
/. tag <2>
2, </H2> .
:
<H2> : </H2>
: browser 2.
tags HTML . tags tag <BR> (break line)
HTML.
tags HTML
, , . tags <TITLE>, <title>, <TiTle> .
tags. tags (..
<TITLE>). .
tags (attributes) (values).
tag <1>:
103

<H1 ALIGN="center"> </H1>

ALIGN 1 browser. attribute ALIGN RIGHT, CENTER, LEFT. LEFT.

5.1
HTML

1. , Windows notepad wordpad ,

tags , .
<HTML>
<HEAD>
<title> </title>
</HEAD>
<BODY>
<H1 ALIGN="center"> </H1>
<P> <B> HTML!! </B> <BR> <BR>

.
!

tags HTML,



<H2>
<UL>
<LI>
<LI>
<LI>
<LI>

: </H2>
O
O
Fight Club

104

</UL>
<P> HTML
,<BR>



<HR>
<P>
,

</BODY>
</HTML>
2.
.html .htm.
3. , browser
, 1.1.

5.1
105

 tag HTML
tag <HTML>. tag HTML .
tags tags <HTML> </HTML>.
tag browser
HTML tag.
To tag HEAD
tag <HTML> tag <HEAD>. <HEAD> HTML
( ). tags tags <HEAD> </HEAD>.
To tag TITLE
tags <TITLE> tags <HEAD>
.
,
tags .
.
tag BODY
tag <HEAD> BODY.
.
1.1 browser
tags <BODY> </BODY>.
HTML
tags tags,
tag
. HTML :
<HTML>
<HEAD> <TITLE> </TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
(<H1> . </H1>)
tags , . HTML
106

 H1 H6 H1 H6 .
(<P>)
tag <P>. . browser HTML
tag <P> ,
. tag <P> </P>
tag .
.
(<BR>)
browser tag
<BR>. browser tag
HTML .

browser HTML ,
, ,
... .
tags HTML. :
<H1 ALIGN="center"> </H1>
<H1 ALIGN="center">

</H1>
<H1 ALIGN="center">

</H1>
-
tags <PRE> . </PRE>. tags
browser.

HTML ,
(Ordered List) (Unordered List).
tags <UL> </UL>
(item) tag <LI>. tag <LI>
107

 <BR> , <LI>
.
tags . tag <UL> TYPE.

. TYPE :
disc: (),
square:
circle: disk -

tags <OL> </OL> tag <LI>.
tag <OL> TYPE

TYPE :
1: -

1,2,3
A: A, B , C,
a: a, b, c,
I: , , , V,
i: i, ii, iii, iv

:
<OL>
<LI>
<LI>
<UL>
<LI>

<LI>

</UL>
</OL>
(Horizontal Rules)
tag tag <HR>.
,
.
108

 5.3
HTML ,
URL
1.1,
.
;

URL. ,
HTML ,
URL, .
wikipedia
URL http://el.wikipedia.org/wiki/
HTML :
1. URL
.
2. browser
.
tag HTML <A> </A>.
<A> HREF (Hypertext Reference)
.
tags <> </A>
browser
HREF.
:

URL .

5.2
HTML, index.html 1.1, deerHunter.html. index.html
deerHunter.html. 109

 deerHunter . , deerHunter.html
. ,
Web Server .

1. index.html.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER> </H1>
<P>

cinema .




video club
<B> !!! </B>
<2> </2>
<OL TYPE="I">
<LI> <A HREF="deerHunter.html"> </A>
<LI>
<LI> Fight Club
<LI>
</OL>
<HR>
</BODY>
</HTML>

110

 1.1,
. :
<LI> <A HREF="deerHunter.html"> </A>
2. , HTML
deerHunter.html
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER> (the deer hunter) </H1>
<H4> </H4>
<P> 1978 178' <BR>
, <BR>
, , ,
<BR>
, PITERZINER
<BR>
, , ,
<BR>

<HR>
<H4> </H4>
<P> ,


,
.

...
<HR>
<P> <A HREF="index.html">
<A>
</BODY>
</HTML>

111

 ,
:
<P> <A HREF="index.html">
<A>
tag <> index.html

, index.html.
3. browser
index.html. internet explorer

5.2

<< >> ,
,
browser .
4. deerHunter.html ,
1.3

112

 5.3

5. , <<
>> .

browser , HREF tag <>
. HREF
. HREF. browser .
, .
HREF tag <>
(path)
. deerHunter.html
index.html
:
<A> <HREF=../deerHunter.html> </A>
, .

113

5.3

HTML 1.1 WEB. ,
deerHunter URL:
http://movies.yahoo.com/shop?d=hv&cf=info&id=1800055909 .

. Internet.

1. </BODY> deerHunter.html :
<P><A
HREF="http://movies.yahoo.com/shop?d=hv&cf=info&id=18000559
09"> Web
</A>
2. deerhunter.html browser,
, Web o browser .

5.4

114

3. Internet << Web>> ,

internet, .

5.5

. .

.
HTML : (anchor)
tag <A> tag
<A> ,
.
NAME
. 115

 .
5 :
< =PART 5> 5 </>
PART 5. HREF tag <>
:
<A HREF=#PART5> 5 </>

#. browser
. # browser
.

5.4
,
.

1. ,
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<H1> </H1>
<A HREF="# "> </A> |
<A HREF="# "> </A> |
<A HREF="#"> </A> |
<A HREF="# "> </A> |
<2>< =" "> </></2>
<P> .

:
<UL>
<LI> Turing
<LI>
<LI> NP-complete
</UL>
116

<H2><A NAME=" "> </A><2>

<UL>
<LI>lesson_1
<LI>lesson_2
<LI>lesson_3
<LI>lesson_4
</UL>
<H2><A NAME=""></A></H2>
<UL>
<LI> exercise_1
<LI> exercise_2
</UL>
<H2><A NAME=" "> <A></H2>
<P>
14:00-17:00
</BODY>
</HTML>

4 :
.
.
.
.

2. , browser
1.5.

5.6
117

3.
( 1.5).
, browser
.

.
4. , back
( ) browser.

118

 5.4


(background). Web :
(inline images)

(external images) Web -

Web .

HTML GIF
JPEG. HTML .html .htm
. GIF .gif JPEG .jpeg jpg.

HTML . tag <IMG>. tag . SRC
URL . my_home.gif tag:
<IMG SRC=my_home.gif>
HREF tag <A>.

5.5

A1 ,
. , internet.

1. ,

119

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>

<BODY BACKGROUND="images/bacg2.jpg">
<H1> : </H1>
<UL>
<LI> <IMG BORDER="1" ALIGN="middle" SRC=images/panathinaikos.gif
width="50" height="50">
<LI> <IMG BORDER="1" ALIGN="middle" SRC="images/panionios.jpg"
width="50" height="50">
<LI> <IMG BORDER="1" ALIGN="middle" SRC="images/osfp.gif" width="50"
height="50">
<LI> <IMG BORDER="1" ALIGN="middle" SRC="images/aris.gif" width="50"
height="50">
<LI> <IMG BORDER="1" ALIGN="middle" SRC="images/aek.jpg" width="50"
height="50">
<LI> <IMG BORDER="1" ALIGN="middle" SRC="images/paok.gif" width="50"
height="50">
</UL>
</BODY>
</HTML>

.
tag <IMG> :
BORDER: BORDER = 0

, .
ALIGN: ,

TOP, MIDDLE, BOTTOM,LEFT,RIGHT

WIDTH, HEIGHT o pixels

BORDER=1, ALIGN=MIDDLE
WIDTH=50 HEIGHT=50.
, SRC
. images.
internet explorer
background tag <BODY> . BACKGROUND ,
120

 bacg2.jpg.
:

1.7

. <IMG> tags <A> </A>.
tag
.

Web site . :
<LI> <IMG BORDER="1" ALIGN="middle" SRC="images/osfp.gif"
width="50" height="50">
:
<LI> <A HREF=http://www.olympiakos.gr>
<IMG BORDER="1" ALIGN="middle" SRC="images/osfp.gif" width="50" height="50">
</A>
121


Web
thumbnails (). . Web


.

5.6

, .
frog.jpg,
78 KB.
small_frog.jpg 970 bytes.

1. ,
:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<H1> </H1>
<A HREF="images/frog.jpg">
<IMG SRC="images/small_frog.jpg" WIDTH="48" HEIGHT="31" BORDER="1"
>
</A>
</BODY>
</HTML>

2. ,
.html.
3. , browser
:

122

 5.8

4. ,

5.9

123

124

 6


Front page
Dreamweaver

,
FrontPage

.
Dreamweaver
. ,
(Website)
Dreamweaver, , , (links), , - (metadata)
.

:
FrontPage Dreamweaver.
Website FrontPage 2003 Dreamweaver 8.
.
, .
- (Metadata) web site.
.

125

 HTML Notepad Word Office.

. .
tags
HTML , .. .
WYSIWYG (What You See Is What You Get)
,
. FrontPage Microsoft
Office Dreamweaver
Macromedia Adobe. FrontPage
Dreamweaver.

126

 6.1 FrontPage
FrontPage 2003
1. Start, All Programs --> Microsoft Office --> Microsoft Office FrontPage
2003.

(Design View), , (editor)

. 4 (tabs) :

Design: , , , .

Split: HTML
Design. , Design HTML.

Code: HTML . HTML,

. .

Preview:
.
.

2. tab Code HTML HTML.

charset=windows-1253
charset=utf-8 .

6.1

3. , tab Design
FrontPage.
127

 FrontPage

6.2:

FrontPage 2003 :
1. Standard Menu Main Menu ( ):
Microsoft Office.

2. Dockable Toolbars ( ):
workspace
website.
Office.
3. Folder List Window ( ):
website .
4. Main View Window ( ):
.
5. Site Page tabs ( sites):
websites
.
6. Task Panes ( ):
,
, , .
128

7. View Buttons ( ):

views.
8. Download Time ( ):
browser ,
Internet.
9. Page Size ( ): pixels.
10. Default Custom Settings ( ):
.

website. (Web site) (Web pages), ,
, , zip,
(links). Frontpage, website web.
web.

1. standard toolbar
New Web site. .

6.3

2. , website -

. One Page Web Site, Empty Web

Site Personal Web Site. Personal
Web Site ( ).

6.4: website.
129

3.
website.
website browse . FrontPage
web.

6.5

4. FrontPage View Folder List

website. ,
aboutme, favourite, feedback, index, interest, photo,
images, photogalleries _
.
.
5. .
Design Tab
Page Properties,
background . index.html
Website
!, .

6.6

130

6. index.html F12. FrontPage

index.html, interests.html, photo.html, feedback.html, favourite.html
aboutme.html Personal Web Site, :

6.7

web servers websites

index.html .
Web Site, Frontpage index.html. website, standard toolbar (New
Page) , , View --> Folder List.
6.8

(Toolbars)
Standard Toolbar . , ( ):

New Page: .
Open: .
Save: .
Find: task pane.
Publish Web: web server .
Toggle Pane: (panes)
.
Print: .
131

Preview in Browser: Browser.

Spelling: .
Cut, Copy, Paste: , .
Format Painter: HTML text.
Undo: .
Redo: undo.
Web Component: (components)
FrontPage.
Insert Table: .
Insert Layer: (layers).
Insert Picture From File: /.
Drawing: toolbar .
Hyperlink: (link).
Refresh: .
Stop: Preview Mode.
Show All: (formats).
Show Layer Anchors: layers.
FrontPage Help: Help Menu FrontPage.
Formatting Toolbar
( ).

Style: drop down menu . heading styles 1-6, , .

Font: . PC
Macintosh
.
Font Size: .
Bold, Italic, Underline: , ,
.
Alignment: , , , .
Text Direction:
.
Increase Font, Decrease Font: .
Numbering: .
132

Bullets: ( , ).
Decrease Indent, Increase Indent: .
Highlight Color: (background) .
Font Color: .

. formatting toolbar,
styles . ,
Increase Indent, Decrease Indent .

6.9

bulleted , bullets formatting

toolbar. bullets Enter bullet. bullets, Enter. .

6.10

Insert-->Picture-->From File Insert Picture From
File standard toolbar.

6.11

. Picture
Properties, ,
, , , .
, Insert-->Picture->Video (Video dialog box). .
.
133

 6.12

, background . Page Properties,

tab Background.
Formatting
.
.
, website Personal
Web Site, FrontPage website .
(theme) website ,
, , , , . ( ) . ,

( standard toolbar).

6.13

index.html.
.
,

. , , . ,
.

134


1. Welcome to my web site
!. ,
website !
website FrontPage.
, , ..
2. bold, ,
10pt .
3. Favourite Links
100x50 pixels, 3 .
4. Weather

2.
5.
, , , , , .
bold,
.
:

6.14

135

Links E-mail
website, .
FrontPage HTML
1.

, 4 links index.html. interests.html, www.in.gr, e-mail

e-mail FrontPage 2003. Links 1.

1.

, Hyperlink.

6.14

2. link Address
().
website , website Internet.
interests.html, .

6.15: Link

3. internet,
Browsed Pages Web
. Link
. , Browse the web

URL. link www.in.gr,
o Browsed Pages
. ,
Address http://www.in.gr .
136

 6.16: Internet link.

4. links
Link, Place In This Document.

6.17: link .

5. e-mails
link.
e-mail,
Hyperlink.
, E-mail Address
,
. (subject)
FrontPage 2003 (E-mail Address) e-mail
. FrontPage mailto:
o e-mail .

6.18: Link e-mail.

137

 6.2 Dreamweaver 8
Dreamweaver 8 .
HTML 1, WYSIWYG (What You See Is What You Get)
. , Dreamweaver Flash

flash. Dreamweaver websites
.
(interface)

6.19: Dreamweaver 8.

(panels)
Window, (Toolbars) View->Toolbars. , interface Dreamweaver :
1. Insert Bar ( ): . pop-up
menu .

138

2. Document Tabs ( ):
.
document tab .
3. Toolbars ( ): toolbars
. - View-->Toolbars.
() Style Rendering toolbar ( ) :
.
() Document toolbar ( ) : , , .
() Standard Toolbar ( ) : , , .
4. Code View ( ): .
5. Design View ( ):
.
6. Status Bar ( ):
, tags HTML, .
7. Properties Inspector ( ):
.
8. Panels ( ): (Panels) .
(Workspace)

Dreamweaver 8,
(workspace)
. : designer layout ( ) workspace
panels . To coder
layout ( )
panels
code.
(layout), Window->Layout layout . ,
layouts, .

6.20

139

 website
, , ,
( , ,
). website
website .

website Dreamweaver. .

1. Dreamweaver 8 Start --> All Programs --> Macromedia --> Macromedia Dreamweaver 8, , .
2. website Sites --> New Site .
Advanced ( ) site (site name)
site Dreamweaver!.

6.21: website

3. , (1) website, (2)

website (3) Upload () website.
4. , website,
(network administrator). 140

 index.html home.html.
, Sites-->Manage Sites .
5. (Local root folder) / ,
Links Relative To site Root . !

File --> New
(templates). ( ,,
, )
.
, Basic Page
Category HTML Basic Page Create.

6.22: .

,
. , , :

, , (-) underscores (_)
.
, .htm .html

6.23: .
141


4 ( 4 File-->New Basic Page
HTML) site index.html, profile.html, page1.html page2.html.

6.24: 4 .

website , , , zip,
, Dreamweaver
.
Link .
,

( )
. , , , ,
File Panel. , Dreamweaver
.
, Update.

6.25: links .
142


website , . ,
, , , . ,
, . headings, .
Headings

Property Inspector, Format pop-up heading .
Paragraph.

6.26: Heading.

HTML , ,
, ,
(Bullets). , Property Inspector.

. index.html headings
bullets. :

143

 6.27

, . :
: Property Inspector Text-->Font.
: Property Inspector , Bold , Italic Property Inspector, Text-->Style.
Property Inspector, Text-->Size
Text-->Size Change.
: Pop-up

, Text-->Color.

.
index.html.

1. , ,
.
144

2. font
Arial,Helvetica,Sans-Serif, bold .
3.
! ,
24 .
4. :

6.28

(Links)
Dreamweaver links,
HTML ( 1) FrontPage ( 2). links
sites,
Properties Inspector ( Design View), URL
Enter.

6.29: link website.

links website , :
1. Browse for file link

2. link,
.
3. Insert --> Hyperlink.
, named anchors ( ), :
145

1.
2.
3.
4.

Link.
Insert-->Named Anchor.
link .
link #
, #named_anchor.
anchors , Preferences --> Invisible Elements.

index.html. , , bullets .

1. index.html Dreamweaver 8 .
2. 4 Links : bold. bullets
Properties Inspector.
3. Link profile profile.html.
4. page1
page2.
5. Link www.in.gr
website www.in.gr.
:

6.30
146


1 tag <IMG>.
Dreamweaver .
,
Insert --> Image.
browsers . ,
Alt. Properties Panel.
.

6.31: .

rollover images . rollover images , :

website .
rollover image,
, Insert --> Image Objects --> Rollover Image
(Image).

6.32: rollover image.

Image maps ( ) hotspots

hotspot , ,
. Image map -

147

 Internet hotspots
hotspot .
image map,
Property Inspector .
. ,
hotspot
hotspot . , Property Inspector
(Link) , (Target).
hotspots , ,
. ,
.
hotspot ,
Property Inspector hotspot, .

6.33

,
rollover image
index.html.

1. index.html
.
2. rollover image.
.
3. www.in.gr,
www.out.gr.
4. F12
.
5.
rollover image,
rollover image.
, , website.

6.34
148


(layout), . 2x2 layout ,
,
,
. ,
layout, .
, Insert --> Table
.

6.35: .

, , , ,
Properties Inspector.

6.36: .

.
Layout website .
149


4 3 , 100 Pixels, (cell padding) 3 header both. A, B,
C, D, G J (bold) both header.
,
, , .

6.37

150

FrontPage
2003 Dreamweaver 8 .

:
, (thumbnails),
FrontPage 2003.
CSS Dreamweaver 8.
multimedia (navigation bars) Dreamweaver 8.

151

152

 7.1 FrontPage
(Page Templates)
Page Templates website
. website
template . template, File --> New New Task Pane . More Page Templates
templates. website,
Personal Web Site,
site , One Page Web Site, .
description template.

7.1

, . (, , ) .
, Table --> Insert --> Table
Main Menu, Insert Table standard toolbar.

7.2: .

, ,
, (border), (background), .
. , Table Insert --> Rows or Columns.

.
153

, , , , ,
, , , .

7.3:

7.4:

(Thumbnails)
thumbnails, 1 ,
Links .
FrontPage 2003
Auto Thumbnail. , Auto Thumbnail,
.

7.5: .

, Design View, . Main Menu Tools --> Auto Thumbnail. thumbnail.

154


, 3x3.
. , Auto Thumbnail
.
,
( Auto Thumbnail) .
, .

1. photo.html .
My Photo Gallery
.
2. 3x3 .

(cell spacing).
3. thumbnail.
4. F12.
:

7.6
155


. FrontPage 2003.
, , .
(Hit Counter)
hit counter website .
site :
1. Design View,
. Insert
Main Menu Web
Component
2. Hit Counter
.
Reset Counter
7.7
To
.
website server ( ).

7.8: .

.
.
. .
site .
, :
1. Design View,
. Insert Main Menu Web
Component
156

2. Dynamic Effects
Marquee .
3.
, , , , , .

7.9: .

Internet sites
.
www.in.gr Google.
site , , ( mona_lisa-da_vinci.jpg) , , site
. :
1. Design View,
, Insert Main Menu Web
Component
2. Web Search
Current Web Finish.
3.
, (
)
.

Hit Counter,
...,

157

7.10

(forms)
,
website, tests (, Q )
, :
1. File --> New New Task Pane
More Page Templates Form Page Wizard.
2.
Main Menu, Insert --> Form
. Option Buttons,
Check Boxes, Textbox, text Area, Drop-Down Box, Push Buttons, , .

(Option Buttons

, Multiple-Choice.

(Check Boxes

158

(Textbox

,
, , e-mail .

(ext Area

.
website .

(Drop-Down Box

. .

(Push Buttons

. ( Submit ),
( Reset/Clear ), .

:
1. Main Menu, Insert --> Form Form
, Submit Reset. ,
, Insert --> Form
. .
2. ,
Design View Form Properties.

Submit, , .
, , F12
. e-mail
,
, From Properties ,
Send To, E-mail Address
.

159

 7.11: e-mail .

Option Button Checkbox ,

Form Field Properties.
, /,
.

7.12

.
( textbox), ( textbox), e-mail ( textbox), ( option button),
( drop-down list) ( textarea). e-mail .

7.13
160

7.14

161

 7.2 Dreamweaver 8
CSS (Cascading Style Sheets)
CSS
website.
. ,
Tahoma, , CSS .

(heading) 3. CSS
. , CSS
, , . , CSS HTML.
CSS, Styles Panel
(Window --> CSS Styles), Attach Style Sheet

CSS, URL .
CSS
Code View, Styles Panel, style Edit Style Sheet
. CSS
,
CSS style Styles pop-up menu Properties Inspector.

7.15

162

 CSS , CSS (CSS selectors). selectors selectors HTML, p,h1,h2,strong,ul,

selectors links, a:link, a:visited, a:hover, a:active, selectors selectors , p, ul, table, ..

7.16

CSS .

1. CSS, Styles Panel (Window --> CSS

Styles), New CSS Style
selector .

, css1

7.17: CSS.

2. CSS (
mycss) Pop-up , CSS .

7.18: CSS.
163

: Georgia

Size: 16

Weight: bolder

Style: italic

Variant: normal

Color: #0000FF ( )

background color ( Background) #FF0000 ()

3. , css . :

7.19

Dreamweaver css droplist styles .

(Behaviors)
, rollover images Common Insert
Bar. rollover
images. (behavior) image. Behavior Panel. rollover.
, behaviors .

164

Rollover Images
1. 4 (navigation images) Properties
Inspector.
/ ( about.gif about, foto.gif
foto ...).
.
2.

Links, about, Tag Inspector

panel Behaviors.

3. (+) Swap Image Actions.

4. , ( Browse)
. , rollover
image .
behavior , (action)
(event).
. , Dreamweaver
Behavior Panel. Actions Menu

7.20

.
. ,
,
(onMouseOver).
5. checkboxes Preload images Restore images onMouseOut
.
6. (F12).
(Status Bar Message)

.

URL ( ).
, Internet Explorer.
( )

165

 :
1. Link profile.html.
2. (+) Panel Behaviors Set Text --> Set Text Of Status
Bar Add Behaviors.
3. ,
status bar . ,
(behavior) behaviors
.
4. .

link profile.html behavior Status bar !. :

7.21

browser

.
. behaviors
/
.
,
.
.
166

 website , :
1. (, , ) (+)
(Behavior Panel) behavior
Open Browser Window .
2. , .
3. ( (window width), (window height) ),
(window name)
(attributes) , status bar,
scrollbars ( - -),
(resize), . .
4. Behavior Panel onFocus OnClick.

behavior.

( tab) Browser.
5.
.

behavior

profile.html 400 x 400, PROFILE,
.
7.21:
:

7.22: behavior. .

167

7.23

Multimedia
(Player) (
web plug-ins). To Dreamweaver plug-ins
, multimedia site .
multimedia , (
). multimedia
, flash .
Dreamweaver :
1. multimedia .
, play, pause
stop.
2. Common Insert Bar.
168

3. Media Common Insert Bar Plugin (

). , Insert --> Media -> Plugin.
.
. ,
multimedia .
,
Properties Inspector.
Preview
browser multimedia .
autoplay.

. , mp3
midi. . . Plugins
multimedia .

7.24

7.25: multimedia .

multimedia , . , HTML
multimedia .
169


1. HTML, Multimedia
.
2. behaviour Open Browser Window pop-up .
3. link multimedia , link. links video
link
.
4. , Properties Inspector ,
Browse multimedia Link. .
Preview
.

multimedia
multimedia Properties
Inspector. :
: .
W (Width) : pixels.
H (Height) : pixels.
Source : . multimedia.
Plg URL : URL plug-in
.
Align : .
Class : style sheet.
Play Button : Play preview
multimedia.

V Space : ( pixels) .
H Space : ( pixels) .
Border : .
Parameters : Multimedia .

170


Multimedia
:

7.26

(Navigation Bars)

.

. links .
, Modify
Navigation Bar. ,
links, ,
, .
Navigation Bar

. , :
1. Insert --> Image Objects --> Navigation Bar
2. Common Insert Bar Images Insert
Navigation Bar.
3. , .
Navigation Bar
Navigation Bar,
Modify Navigation Bar. Navigation Bar , Modify --> Navigation Bar dialog box
.
, Help.

navigation bar.
navigation bar.
171

172

Web
Publishing

, .

:
FTP, Netscape Composer ( ), Frontpage.
- .

173

174

8.1
html FrontPage. ,
(links) .,
.
.
, , . (server) . internet (ISP) . . (web publishing).
(Web server)
(clients)
.
.

,
.
' ISP ( Internet) Web server ISP, e-mail server
ISP, news server,
DNS server IP URLs ..
(server) .
. , , , videos
. sites .
site . site internet .

www.free.prohosting.com
www.icestorm.com
www.aboveworld.com
175

FTP (File Transfer Protocol)

FTP
Internet
(, , .) Web server. FTP
(username password) Web server (upload)
Web server (download).
FTP CuteFTP WinSCP.

internet. WinSCP http://winscp.net/eng/index.php. Windows , , . FTP . Internet Explorer,
FTP server, ftp://username@ftp.ucl.ac.uk,
. '
Windows , .

176

8.2 (Web Publishing)

web publishing.
. Web publishing Internet
FTP , upload () html Web server ,
. , Web server , download ().

Web server:
server.
server, username server
server.
server. public_html upload .
index.html
site .

(Itnernet Connection : (server) internet,

. PSTN, ISDN, ADSL .

FTP software : server FTP. FTP . . (web server). -

.
FTP client .

177

 1
FTP. ftp
.

1. server (,
) html . internet.
2. ftp
WinSCP.
.

8.4 login WinSCP

3.
. (host name), user
name (password).
login . .

178

 8.5 .
.

4.
server.
.
.
index.html.
public_html .
, videos

index_html. ( . . ) .

179

5. ,
. internet explorer, site
(work offline). www.cs.uoi.gr/~csst0041 .

8.6

.
site links
. , internet
.
2
NETSCAPE
COMPOSER. .

180


1. . .

8.7

2. . Composer Publish. :

8.8 nescape composer .

181

3.
. ,
server HTML
. .
settings .

8.9

4. ftp http
http://www.cs.uoi.gr/~css02113, username
. publish .

8.10

5. 5. 1.
www.cs.uoi.gr/~csst0041 www.cs.uoi.gr/~css02113
.
3
FRONTPAGE.
.
182


1. .
.

8.11: .

2. , . menu File Publish Web. :

8.12: Frontpage .
183

3. .
( server)
. : ftp://cs.uoi.gr/.
: Publish changed pages only & Publish all
pages, overwriting any already on the destination.

. server
.
server , , Publish changed pages
only. publish .
4. server
username password :

8.13

username password .
6. E .
(promotion)
, . ,
. ,
web site
. "", web site ""
.

.
.
184

Linking
. ,

,
(browser). , , (.. www.giorgos.gr). .
. .
site .
.

(search engines)
(Directory Services)
site
(guest book)
(illegal activities)

(search engines)
internet . . links.
.
(Directory Services)
. Yahoo. Yahoo . , . , site , .
site

. (e-mail)

.
.

185

 (guest book)
. site
site.
site .
(illegal activities)
. , cracks
, serial numbers
, mp3 ..
.
. internet
, .
.

186


.
1. HTML; HTML
HTML.
2. tags HTML : , , .
3. formats web
HTML;
4.
,
Windows Picture and Fax Viewer windows
XP.
.
.
.
,
.
Frontpage 2003.
:

WEB SITE index.htm .

photo.htm 30
50 . .
Auto Thumbnail . , .

web site (Hit Counter) .

,
.

Frontpage
. http://freegreece.net.

187

5. Dreamweaver. , winscp
.

188



Actionscript

Flash

Animations.

AI

format Illustrator Adobe

.

Animation

Animation
.

AVI

Microsoft .

BMP

DOS-Windows.

Flash

Adobe
Animation.

Freeware

GIF

browsers WEB.

JPEG

browsers WEB.

Loss-less

formats .
Lossy formats ( Loosy).

Lossy

Formats
, (MP3).

MIDI

1982

.

MOVE

Format Apple , Midi.

MP3

Format MPEG-1 Layer III.

MPG (MPEG)

Format
MPEG.

Photoshop

Picture
ager
PNG

Man- Microsoft
office.
Format Mac/DOS-WINDOWS/Linux.
189

Ripping

.
ripping. Media player Windows,
DVD Fab

Shareware

( 30 )
.

, .

Stamp tool

Photoshop .

TIF

format
Mac/DOS-WINDOWS/Linux.

WAV

Windows.

Windows Me-
dia player
Windows.
ripping, internet streaming .
Windows
Movie Maker

Windows.

Flash
, (layers) (frames).

(Timeline)

,
, .

(Lay- Flash ers)

.
.
(Frame)

. (Animation).

Flash
(keyframes)
. . - Flash
.
190

. .

-
(<100) MAC Windows XP.

(multimedia)

: , , , , .

(Stage)

Flash .
.

ween

Flash animations.

bits,

(pixels). pixel

pixels
.

WEB

O .

Uniform Resource Locator (URL)

WEB site.

WEB site

WEB
URL .

Opera

Browser
HTML .

Internet Explorer (IE)

O browser Windows
WEB.

Firefox

Browser Mozilla.

WEB server

HTML
.

HTTP server

WEB server.

Tag

HTML tags.
191

WYSIWYG

HTML.

Page Template
(Thumbnails)

web
site.

(Hit counter)

HTML

1.

Rollover images

File Transfer Protocol (FTP)

HyperText Transfer Protocol (HTTP)

HTML WEB

CuteFTP

FTP client

FTP server

WinSCP

Freeware FTP client

FTP server

CSS

website.
.

Arial.

WEB publishing

WEB.

192


..., Multimedia:
, . ., , 1996.
http://dide.flo.sch.gr/Plinet/plinet.html, .. . .
http://www.kirupa.com/developer/index.htm/
http://tutorialoutpost.com/tutorials/flash/
http://www.mightycoach.com/articles/mm2/index.html/
http://www.sketchpad.net/photoshp.htm/
www.frontpage2002.com/
library.loyno.edu/LI/handouts/frontpageintro.pdf
http://www.frontpage2002.com/frontpage_2002_tutorial_guide.htm
faculty.pingry.org/gcirino/Linked%20Files/FrontPage/FrontPageIntro.pdf
www.trainingtools.com/online/dreamweaver3/index.htm
http://www.webucator.com/Macromedia/DRW101.cfm
http://www.webucator.com/Macromedia/DRW101.cfm

193

194



Actionscript

35, 54

Animation

15-16, 32, 34, 38, 40-45, 49, 54 ,60 63-64,

67

Frame

Freeware

71, 81

keyframes

Layers

37-38, 48, 62-65, 78, 132

Loss-less

85

Lossy

85

MIDI

12-14, 169

Ripping

81-83, 97

Shareware

71, 81

Stage

Stamp tool

78

Timeline

Windows Media player

81-82, 89-90, 97

Windows Movie Maker

81, 87-91, 93-94

30, 35, 37-39, 43-45, 47, 52-54, 63, 65, 92,

94

7, 9-10

. Layers

14-15, 38-39

15, 38, 40, 43

25

25

35-36, 44

ween

15, 40-43, 54

8, 9

195


CSS

162-164

FTP

102, 173, 176-177

HTTP

101

Rollover images

147, 164-165

Tag
<A>

109

<Body>

106

<BR>

103, 107

<H1>

106

<HEAD>

106

<HR>

108

<IMG>

119-121

<P>

107

<TITLE>

103, 106

URL

101-102, 109, 119, 145, 162, 165

WEB publishing

175, 177

WYSIWYG

126, 138

(Thumbnails)

72, 122, 154-155, 187

(Behaviors)

164

196