ADOBE DREAMWEAVER CS3

13 -
:
( , , 2.3, 2.3.2)
/

DREAMWEAVER

1. HTML ................................................ 5
1........................................................................................................ 7
2........................................................................................................ 9
3...................................................................................................... 12
4...................................................................................................... 14
5...................................................................................................... 15
6...................................................................................................... 16
2. ........................... 19
1...................................................................................................... 21
2...................................................................................................... 22
3...................................................................................................... 23
4...................................................................................................... 25
5...................................................................................................... 26
6...................................................................................................... 27
7...................................................................................................... 28
3. HTML ........................ 30
1...................................................................................................... 31
2...................................................................................................... 33
3...................................................................................................... 33
4...................................................................................................... 34
5...................................................................................................... 35
4. ..................................................... 36
1...................................................................................................... 38
2...................................................................................................... 39
3...................................................................................................... 39
4...................................................................................................... 41
5...................................................................................................... 41
5. ............................................................................ 43
1...................................................................................................... 45
2...................................................................................................... 45
3...................................................................................................... 46
4...................................................................................................... 47
5...................................................................................................... 47
6. ............................................................................ 50
1...................................................................................................... 51
2...................................................................................................... 52
3...................................................................................................... 54
4...................................................................................................... 55
7. ......................................................................... 57
1...................................................................................................... 58
2...................................................................................................... 59
3...................................................................................................... 60
4...................................................................................................... 61
5...................................................................................................... 62
6...................................................................................................... 64
8. HTML SCRIPT ............................. 65

CONCEPTUM AE

DREAMWEAVER

1...................................................................................................... 66
2...................................................................................................... 67
3...................................................................................................... 68
4...................................................................................................... 68
5...................................................................................................... 69
9. Project .................................................... 72
1...................................................................................................... 73
2...................................................................................................... 74
3...................................................................................................... 75
4...................................................................................................... 76
5...................................................................................................... 77
10. Java HTML APPLET ....................... 81
1...................................................................................................... 82
2...................................................................................................... 83
3...................................................................................................... 85
4...................................................................................................... 86
5...................................................................................................... 86

CONCEPTUM AE

DREAMWEAVER

1. HTML

(2-3 )
.

.
.

Dreamweaver ,
.

:
:

- /

:
:

2-3 .

.

:

HTML .

CONCEPTUM AE

DREAMWEAVER

Dreamweaver
.

,
, HTML
HTML
Dreamweaver

HTML
Dreamweaver.

- .
(2 3 )
.
,
,
.

Internet Explorer

Dreamweaver

( .htm
_files).

CONCEPTUM AE

DREAMWEAVER

,
HTML.
, Dreamweaver

.

.

1
(internet)
Dreamweaver ,
, .

, HTML,
. ,
File Page Internet Explorer
(web browser) - Save as,
Save as Type : ,
(Webpage, Complete) (. 1)

CONCEPTUM AE

DREAMWEAVER

1. Internet Explorer
HTML(
HTML),

.
Dreamweaver
File Open(. 2).

2. Dreamweaver

(http://www.pischools.gr/).
Save as Type , (Webpage, Complete)
(. 1).
T
Dreamweaver;

CONCEPTUM AE

DREAMWEAVER

, (Webpage, Complete)
HTML
, .

2
,
Dreamweaver menu Start, windows. ,
Open menu File (. 2).
menu View Code, Design,
Code and Design HTML,
,
(. 3).
:

CONCEPTUM AE

DREAMWEAVER

3. & HTML


HTML ,
, web
browser.

,
.
.

CONCEPTUM AE

10

DREAMWEAVER

4. menu View.

, .htm
_files (


).
.htm
Dreamweaver.
HTML .
HTML
(. 5).
; ;

CONCEPTUM AE

11

DREAMWEAVER

5.
, ,
.
.

3
menu View Code (. 4)

HTML ( ),


Dreamweaver.

, .htm
_files (


).
.htm
Dreamweaver. HTML.

CONCEPTUM AE

12

DREAMWEAVER

( )
(tag) TITLE

F12
Internet Explorer.
;
web browser

,
HTML,
,
, (. 6)
HTML .

CONCEPTUM AE

13

DREAMWEAVER

6.
.

4

, .htm
_files (


).
.htm
Dreamweaver.
HTML.

,
.
HTML ;
F12
Internet Explorer.
1513 ( ),
HTML,
.

CONCEPTUM AE

14

DREAMWEAVER

HTML HTML ,
HTML Dreamweaver.

5
HTML :
<FONT>....</FONT>

<IMG>....</IMG>

<TABLE>...</TABLE>

<TR>....</TR>

<TD>....</TD>

CONCEPTUM AE

15

DREAMWEAVER

6
HTML
<IMG>...</IMG> . Dreamweaver
,
HTML.
O ( )
/, (Desktop)
(folder)
.
, , Image
menu Insert (. 7),
,
.

7. menu Insert
O Copy - Paste
DreamWeaver.

CONCEPTUM AE

16

DREAMWEAVER

Copy.

menu Edit (. 8)
Paste .

8. menu Edit

.

9. Menu

CONCEPTUM AE

17

DREAMWEAVER

menu
(. 9).

, .htm
_files (


).
.htm
Dreamweaver.
.

, ,

.
nter .
logo_sch.gif
_files.
Internet Explorer.

HTML. HTML
.

CONCEPTUM AE

18

DREAMWEAVER

2.

2-3

.
,
. ,

, ,
.
(
) ,
, ( ,
).


. , ,
. ,

Macromedia Dreamweaver .

:
:

CONCEPTUM AE

- /

19

DREAMWEAVER

:
:

2-3 .

.

:

Dreamweaver

Dreamweaver

2-3 .


.

CONCEPTUM AE

20

DREAMWEAVER

Internet Explorer

Dreamweaver

PROTYPA, ISTOSELIDA,

FOTOGRAFIES
ISTOSELIDA,

.
.
,
(search engines).
-
www.google.gr www.in.gr.
1

CONCEPTUM AE

21

DREAMWEAVER

1
2
3
4
5

1
2
3
4
5

2

, .

,
,
, menu

CONCEPTUM AE

22

DREAMWEAVER

,
(links) .
,
, .
.
3

, , video
.
. :

1.

, Dreamweaver.
Dreamweaver menu File
New. blank page, page type: HTML layout: none
CONCEPTUM AE

23

DREAMWEAVER

(. 1) Create.
Dreamweaver.

1. Menu New Document

menu Insert Table.
(Rows) (Columns) (.
2).

CONCEPTUM AE

24

DREAMWEAVER

2.

Ctrl +Alt + ( menu Modify>Table>Merge Cells)
. .

1.
page_protypo.html
PROTYPA .
4
,
(, )
.

.

CONCEPTUM AE

25

DREAMWEAVER

.

(..
)

FOTOGRAFIES
ISTOSELIDA
.
Dreamweaver page_protypo.html
PROTYPA.
HTML .

.
,
, o
, FOTOGRAFIES,
(..
1.jpg , 2.jpg, 3.jpg)
5

. Dreamweaver page_protypo.html
PROTYPA.
HTML
.

Copy-Paste .

FOTOGRAFIES ISTOSELIDA,

CONCEPTUM AE

26

DREAMWEAVER

:
HTML .
.
, Save As
menu File, ISTOSELIDA
first_page.html.
F12.
6

internet .
.
Dreamweaver
, 3.
Dreamweaver
.

link, Copy-Paste,
.
links.html ISTOSELIDA.
F12 web browser
.

Dreamweaver .

link, Copy-Paste,
.
links.html ISTOSELIDA.

CONCEPTUM AE

27

DREAMWEAVER

F12 web browser

.
7

.
:

2 2

Dreamweaver first_page.html
5.

.
Enter
.

CONCEPTUM AE

28

DREAMWEAVER

.
(

Link, links.html,
6,
.
Save menu
File F12

links.html.

first_page.html
links.html.
Link first_page.html.


.

CONCEPTUM AE

29

DREAMWEAVER

3. HTML

(tags)
HTML . (2 3 )

. , Macromedia
Dreamweaver - ,
,
HTML
. Dreamweaver ,
, HTML
. ,
(2) Macromedia
Dreamweaver , -
.

:
:

- /

:
CONCEPTUM AE

30

DREAMWEAVER
2

N HTML

Dreamweaver.

2-3 .

.

Internet Explorer

Dreamweaver

- .htm
- _files

1

, ,
.
.

CONCEPTUM AE

31

DREAMWEAVER

http://www.eot.gr
http://www.parliament.gr
http://www.hellenicnavy.gr
http://uoa.gr
http://www.culture.gr
http://www.eugenfound.edu.gr
http://www.segas.gr
http://www.eie.gr
http://www.hcmr.gr
http://www.thira.gr
http://www.gnhm.gr
http://www.ekt.gr
Dreamweaver
HTML
.
, HTML
.

. (. 1)

1. Dreamweaver

CONCEPTUM AE

32

DREAMWEAVER

2
,
- .htm
- _files (


).
Dreamweaver
HTML
.

HTML

http://www.ekt.gr/

http://uoa.gr/.

Refresh Link
.
F12.

.
<>
.

3
,
- .htm
- _files (


).
Dreamweaver
HTML
.

CONCEPTUM AE

33

DREAMWEAVER

(. 2)

2.
HTML <BR>
, .
F12
.
<BR>
.

4
,
- .htm
- _files (


).
Dreamweaver
HTML
.

(. 2)
HTML <h1>
!

CONCEPTUM AE

34

DREAMWEAVER

F12
. <h1>
.

5
,
- .htm
- _files (


).
Dreamweaver
HTML
.

password type. F12
.

type
<input> .
<input>
.

CONCEPTUM AE

35

DREAMWEAVER

4.

.


. Macromedia
Dreamweaver

.
,
. ,
, , flash
Dreamweaver .

:
:

- /

CONCEPTUM AE

36

DREAMWEAVER
2

Dreamweaver.

2-3 .

.

Internet Explorer

Dreamweaver

index.htm index_files (


).

CONCEPTUM AE

37

DREAMWEAVER

1

.

Dreamweaver

.

index.htm index_files (


).
Dreamweaver index.htm
index_files
HTML
.

menu

index.htm,

.
(
flash) Play
Stop . ,

Play. .
HTML .

CONCEPTUM AE

38

DREAMWEAVER

2


,
.
, Play .

Reset Size.

Quality
.
.

3

index_files (


).
Dreamweaver .

.

menu

Insert edia

Flash (. 1).

CONCEPTUM AE

39

DREAMWEAVER

1. enu Insert menu Media

, intro.swf
index_files. OK.

menu OK .

CONCEPTUM AE

40

DREAMWEAVER

4

video flash
,
enter,
HTML :
<object width="384" height="288">
<param name="movie" value="http://menoumellada.live24.gr/menoumellada/2006-5part2/350k/20060525-mythologiki-perihghsh-skopelos.wmv" />
<embed

src="http://menoumellada.live24.gr/menoumellada/2006-5-

part2/350k/20060525-mythologiki-perihghsh-skopelos.wmv"

width="384"

height="288" autostart=0 />

</object>
<P></P>
: http://www.ert.gr/menoumellada/

(<p> , </p>), HTML.

. video

W(Width),

H(Height)

F12.

5
video
. 4
.

:

CONCEPTUM AE

41

DREAMWEAVER

1
2
3
4
5

CONCEPTUM AE

42

DREAMWEAVER

5
5.

.
. ,

,
Macromedia Dreamweaver
. ,
Dreamweaver
,
,

.

.
,
Layout Macromedia Dreamweaver.

:
:

- /

CONCEPTUM AE

43

DREAMWEAVER

:
:

2-3 .

Internet Explorer

Dreamweaver

index.htm index_files (


).

CONCEPTUM AE

44

DREAMWEAVER

1
Dreamweaver ,
2, menu
Insert Table 3x3 (.
1).

1. menu
HTML
HTML <TABLE>.

HTML.

2

. , Border
2 bg color
.

CONCEPTUM AE

45

DREAMWEAVER

brdr
.

HTML.

3

Table
Merge Cells (. 2)
.

2. Merge Cells menu Table

CONCEPTUM AE

46

DREAMWEAVER

, (

CellSpace 10
.

HTML.

4
,
.

(
), split Cell.
Table Split Cell.

menu 2
.
,
F12 .

5
Dreamweaver
3x3.
, Excel

CONCEPTUM AE

47

DREAMWEAVER

. Save
As Text (Tab delimited) (. 3) data.txt

3. Excel txt (Tab delimited).

Dreamweaver menu Insert, Table Objects
Import Tabular Data data.txt.

CONCEPTUM AE

48

DREAMWEAVER

4 Menu .
. F12
.

CONCEPTUM AE

49

DREAMWEAVER

6.

.
,

Macromedia Dreamweaver. Dreamweaver,

. ,

( 2 3
)
.

:
:

- /

:
:

CONCEPTUM AE

50

DREAMWEAVER

2-3 .

.

.

Internet Explorer

Dreamweaver

1

. ,

Dreamweaver.
:
CONCEPTUM AE

51

DREAMWEAVER

http://www.ypes.gr/

http://www.uoa.gr/uoagr/uoaindex.htm 2
http://www.corfu.gr/gr.htm

. , ,
<FRAME> <FRAMESET>

2

2 :

Dreamweaver menu
Insert, menu HTML,
menu Frames Top (. 1).

CONCEPTUM AE

52

DREAMWEAVER

1.
(frames)
Yes Borders
,
Border
color rder width .
,
HTML
frame frameset, .
plaisio.html,
Save Frameset As menu File,
website .

CONCEPTUM AE

53

DREAMWEAVER

,
,
menu Insert Image.
titlos.html,
Save Frame As menu File,
website. .

kentriki_selida.html, Save Frame As menu
File, website
F12 web browser.

3

3 :

Dreamweaver (plaisio.html)
.
HTML
,
.

CONCEPTUM AE

54

DREAMWEAVER

,
. menu Insert,
menu HTML, menu Frames
Left.

.
menu
.


Yes Borders
,
Border
color rder width .
plaisio.html, Save
Frameset As menu File, website.


left_menu.html,
website .
F12 web browser.

4
Dreamweaver (plaisio.html)
.
HTML
.

. thema1.html
.

CONCEPTUM AE

55

DREAMWEAVER

menu ,
.

Hyperlink menu
Insert (. 2).

2. Menu

1. , Link
kentriki_selida.html
Target mainframe
2. Thema1, Link
thema1.html
Target mainframe.
,
,

,
left_menu.html, Save Frame
As menu File, website
F12 web browser.

CONCEPTUM AE

56

DREAMWEAVER

7
7.

Macromedia Dreamweaver HTML FORM.

FORM.

CGI/Java script
.
script Web,
Macromedia Dreamweaver

.

:
:

- /

:
:

CONCEPTUM AE

57

DREAMWEAVER

SCRIPT

2-3 .

.

Internet Explorer

Dreamweaver

1
,
,
Dreamweaver
<FORM> <INPUT> .
:
1 http://www.oasa.gr/index.asp?tml=1&pageid=126&menu=6&pg=1&asp=contact/complains.asp
2 http://www.mom.gr/Contact.asp?ITMID=80
3 http://www.fhw.gr/guestbook/stoixeia.php?lang=1

CONCEPTUM AE

58

DREAMWEAVER

2
Dreamweaver (plaisio.html)

website.
HTML .

website, epikoinonia.html.
,

Text Field menu Form
menu Insert (. 1)

1. menu Form

CONCEPTUM AE

59

DREAMWEAVER

menu Input Tag Accesibility Attributes Text Field

(. 2)
Label button OK . Add form
tag? Yes.

2. menu Text Field

HTML
<input>. F12
web browser.

3

. enter
.

. menu
CONCEPTUM AE

60

DREAMWEAVER

Input Tag Accesibility Attributes Text Field

Label e-mail.


extarea, menu Form menu
Insert, . menu
Input Tag Accesibility Attributes extarea
Label button OK .
HTML
<textarea>
F12
web browser.

4

.
Label: , 50 Char Width
50 Max chars, .
F12 web browser
.
Max chars
8.
8
Max
chars.
Wrap
Off Init val.

o

Init val .

CONCEPTUM AE

61

DREAMWEAVER

Wrap Physical,
.

5

CGI/Java script
. , ,
Web,
Macromedia Dreamweaver

.

button, java Script
. ,
, ,

enter. Button menu
Form menu Insert (. 1),
Button . button,
, value, menu
Tag-Inspectrors menu General,
Attributes (. 3), .

CONCEPTUM AE

62

DREAMWEAVER

3. Attributes
Button Java Script ,
Button
Behaviors (. 4) menu

Call

JavaScript processMyForm().

5. Behaviors
HTML HEAD
<script> :
function processMyForm()
{
alert(' !');
}

CONCEPTUM AE

63

DREAMWEAVER

.
Button.

6
Dreamweaver plaisio.html
website. HTML
.


, Link
epikoinonia.html Target
mainframe.
,
left_menu.html website F12
web browser.

CONCEPTUM AE

64

DREAMWEAVER

8. HTML SCRIPT

client-side scripts.
Macromedia Dreamweaver,

SCRIPT. ,

Dreamweaver
.

:
:

- /

:
:

CONCEPTUM AE

65

DREAMWEAVER

clientside script.

client-side script.

client-side script .

2-3 .

.

.

Internet Explorer

Dreamweaver

1
client-side script

client-side scripts
. ,
Dreamweaver,
HTML . ,
<script>
</script>. , .js

. :
http://www.pireasnet.gr/

CONCEPTUM AE

66

DREAMWEAVER

http://www.patras.gr/el/c1/index-c1.asp
http://www.kalymnos-isl.gr/portal/gr/index.php
http://www.cityofxanthi.gr/news2008.php
http://www.larissa-dimos.gr/larissa/city/index.shtm
http://www.thessalonikicity.gr/

2
Dreamweaver.
HTML
. HTML
<body> script:
<script type="text/javascript">
document.write(" script");
</script>
script
F12 .
HTML <h1>
:
<script type="text/javascript">
document.write(<h1> script</h1>");
</script>
<h1>, F12
.

CONCEPTUM AE

67

DREAMWEAVER

3
script
HTML.
<script type="text/javascript">
var name = prompt(" ", " ");
document.write(name);
</script>
script.
script ( )
:
<script type="text/javascript">
document.write("<h1> script</h1>");
var name = prompt(" ", " ");
document.write(name);
document.write("<p><h3>

:</h3></p>");
document.write(name.length);
</script>
script
F12 .

4

javascript. ,
CONCEPTUM AE

68

DREAMWEAVER

HEAD .
(
) :
<head>
<script type="text/javascript">
function message()
{
alert("H !");
}
</script>
</head>
......
<body>
<script type="text/javascript">
document.write("<h1> script</h1>");
var name = prompt(" ", " ");
document.write(name);
document.write("<p><h3>

:</h3></p>");
document.write(name.length);
alert(message());
</script>
</body>
script
F12 .

5
, javascripts
.
.

CONCEPTUM AE

69

DREAMWEAVER

Notepad script
script.js.
function go()
{
window.location=document.getElementById("menu").value;
}

Dreamweaver

HTML
. HTML
<head> </head> :
</script>
<script type="text/javascript" src="script1.js">
</script>
M <body> </body>
:
<form>
<select id="menu" onchange="go()">
<option>--Select a page--</option>
<option value="http://www.thessalonikicity.gr/"> </option>
<option value="http://www.pireasnet.gr/"> </option>
<option

value="http://www.kalymnos-isl.gr/portal/gr/index.php">

</option>
</select>
</form>
script
F12 .
CONCEPTUM AE

70

DREAMWEAVER

: script1.js
.

CONCEPTUM AE

71

DREAMWEAVER

9. Project

.

.
.

Macromedia

Dreamweaver

, , , .

/ .

Dreamweaver

web .

.

:
:

- /

CONCEPTUM AE

72

DREAMWEAVER

:
:

2-3 .

.

Internet Explorer

Dreamweaver

1

.
.
.
, , ,

CONCEPTUM AE

73

DREAMWEAVER

.
:
http://www.livepedia.gr/
http://www.wikipedia.org/
http://earth.google.com/
http://www.greek-language.gr/
http://www.kidsbiology.com

.

. .

.
.


:

4
2

3 1

2

,

CONCEPTUM AE

74

DREAMWEAVER

(download) (web
browser) .
:
-

.
, ,
.

( .jpg).

3

,

CONCEPTUM AE

75

DREAMWEAVER

MENU

MENU

4
.
,
:
-
-
- menu

CONCEPTUM AE

76

DREAMWEAVER

. ,
, client side scripts, ,
, , .

.

.

, ,

web

browser.

index.html

5
,
, ,
. menu Site ()
New Site (. 1).

CONCEPTUM AE

77

DREAMWEAVER

1. Menu Site
, Site internet.

/,

. (
) server, .
server,
/.

Site, Synchronize Sitewide menu
Site.
Site Preview
(. 2).

CONCEPTUM AE

78

DREAMWEAVER

2. Menu /
Server.

(. 3).

3. / Server

Server button OK
.

CONCEPTUM AE

79

DREAMWEAVER

Site
.

CONCEPTUM AE

80

DREAMWEAVER

10

10. Java HTML APPLET

Java.
Macromedia Dreamweaver

APPLET.

Dreamweaver

JAVA HTML .

:
:

- /

:
:

javascript
javascript

CONCEPTUM AE

81

DREAMWEAVER

APPLET

APPLET

2-3 .

Internet Explorer

Dreamweaver

1

javascripts. javascripts
,
. javascripts
:

http://www.javascriptkit.com/cutpastejava.shtml
http://webdeveloper.earthweb.com/webjs/
http://javascript.about.com/

CONCEPTUM AE

82

DREAMWEAVER

2
Dreamweaver
HTML <HEAD>
</HEAD>
<script type="text/javascript">
function convert(degree)
{
if (degree=="C")
{
F=document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value=Math.round(F);
}
else
{
C=(document.getElementById("f").value -32) * 5 / 9;
document.getElementById("c").value=Math.round(C);
}
}
</script>
, HTML <BODY> </BODY>
:
<p><b> :</b></p>
<form>
<input id="c" name="c" onkeyup="convert('C')"> Celsius<br />
equals<br />
<input id="f" name="f" onkeyup="convert('F')"> Fahrenheit
</form>
F12 script .
script

CONCEPTUM AE

83

DREAMWEAVER

.
. km miles
:
<HEAD> </HEAD>
<script type="text/javascript">
function convert(degree)
{
if (degree=="C")
{
F=document.getElementById("c").value * 1.61;
document.getElementById("f").value=F;
}
else
{
C=document.getElementById("f").value * 0.62;
document.getElementById("c").value=C;
}
}
</script>
, HTML <BODY> </BODY>
:
<p><b> :</b></p>
<form>
<input id="c" name="c" onkeyup="convert('C')"> miles<br />
equals<br />
<input id="f" name="f" onkeyup="convert('F')"> km
</form>
F12
.

CONCEPTUM AE

84

DREAMWEAVER

3
Dreamweaver
HTML <BODY>
</BODY>
<script type="text/javascript">
var arr = new Array(6);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";
arr[5] = "Tove";
document.write(arr + "<br />");
</script>
F12.
script
HTML.

:
<script type="text/javascript">
var arr = new Array(6);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";
arr[5] = "Tove";
CONCEPTUM AE

85

DREAMWEAVER

document.write(arr.sort());
</script>
F12
.

4
,
java applets.
<APPLET> </APPLET>.
applets
,
.
http://www.javascriptkit.com/java/java3.shtml
http://www.javascriptkit.com/java/java21.shtml
http://www.javascriptkit.com/java/java11.shtml
http://www.javascriptkit.com/java/java12.shtml
http://www.javascriptkit.com/java/java10.shtml
Dreamweaver
<APPLET> </APPLET>. ,
applets.

5
6.html
6 APPLET.
Dreamweaver ,
HTML
.
CONCEPTUM AE

86

DREAMWEAVER

HTML
<BODY> </BODY>, java applet ripple
.
<APPLET CODE="ripple" width=384 height=288>
<param name="image" value="SHIP.JPG">
<param name="period" value="5">
<param name="frames" value="25">
<img src="SHIP.JPG" width=384 height=288>
</applet>

F12.
M applet .

period

CONCEPTUM AE

87