8

Frame

Frame
1

3

.html 1
(Frame)
.html 3 3 (Frameset)
.html 1 3

3 html 4 (Frameset 1 , Frame 3 = 4 )

E-Learning

Scrollbar

)
(

(Mind Mapping)

5.
6.

4.

3.

Frame
Frame
1.

2. Frame Frameset

278

1. Frame
2. Frameset
3.
4.

5.

6.

7.

279

(Frame)

1. Frame



(Frame)


HTML

HTML

(Frameset) HTML

HTML

8.1

Frame Set
1

8.1

280

2. Frame Frameset
(Frameset)


(Frame)


( 8.15)

E-Learning ()

(Scrollbar)

Code HTML

Dreamweaver 8.0 2
1.
2.

1.
2

1.1 File 8.2

1. File > New

2. New Document General Framesets

Framesets
Preview
Category
Create
3. 3
Properties Inspector

Properties HTML

281

Properties

3
8.2 File > New

1.2 Layout 8.3

1. Layout Insert Bar
2. Standard Mode
3. Frame

4.

282

8.3 Frame Layout

8.4 1. 2.
5.

3.

(Target)

MainFrame OK Frameset

(Document)

8.4 Frame Layout

283

2.

8.5 8.6

1. HTML File > New HTML

HTML
Modify
2. Frameset
3. Split Frame Up Split Frame Down
Split Frame Up
2

2
Split Frame Down

(2 )

8.5
4. 8.5 Split Frame Up 2 8.6 1
2 3

284

8.6

5.
8.7

1 > Alt +

() 2 >
3

8.7

285

3.

.html

.html 1

1
Home page
index.html default.html ( index
)

default

8.8
Folder

Drive C: D: (
)

1.
Frame
1.
2. Properties Frameset
3. Save all File > Save all

8.8

286

4.
> Folder
> 1.
project

(
2) 1 index.html >
(
2. index.html

Save all)
2

Menu.html 3

Save .html 4

8.9

8.9

5.

3 index.html 1

4 8.10

287

8.10


main1.html, menu.html top.html index.html

4.

.html index.html

HTML
8.11

1. File Folder

288

2. Frame

3 index.html >
main1.html I-beem I
MainFrame 4
Frame

3.

Properties 5

8.11 Frame

8.12 1

2
.html

Frame
Properties

Border
=

Border Color =

Border Width =

Scroll
=
Scroll Bar

289

8.12


index.html

(Border)

Visual Aids View > Visual Aids > Frame Borders 8.13

8.13

290

5.
2

1.


2.


1 Photoshop

Story Board
(_bank)

MainFrame

Photoshop
8.14

4 1.main.html
1. Layout

2. top.html 3. menu.html footer.html

4 Photoshop
8.14

291

3


2.

Photoshop
Slices
(

Slices ) Slice
top.html , menu.html
footer.html main.html

(mainframe

4 8.11)

8.15 3 Slices

Slice Tool .html
Slice 8.16

292

Slice Tool
1.

8.16

top.html
2. File > Save for Web > 1. > 2.
PNG-8 > 3. Save 8.17

8.17 top.html

293

> 1. > 2. Save as type: HTML and Images

3.

Folder Images
.html

Folder Folder project HTML

Folder Images > 3. Default Setting > 4. All Slices > 5. Save > 6. .html
8.18
> 7. Folder Images

8.18 HTML and Images

4. HTML

Photoshop
( 8.15) 8.19

294

8.19
.html
TopFrame > 1. TopFrame Frame >

2. Properties
Src Project >
3. Folder > 4. > 5. OK top.html TopFrame
main.html


8.20, 8.21



Save all
HTML

Photoshop index.html


main.html

295

8.20 HTML

296

4


Preview in Browser
8.21

8.21
4

6.
Frameset

index.html

MaimFrame
8.21

1

1. Object > 2. Link url >
3. Target 8.22
_bank

_parent

_self
_bank

297

Target

mainframe
MainFrame

topframe
TopFrame

leftframe
LeftFrame

8.22

(Target) mainframe 8.23

8.23

298

1 iframe
Iframe :
1 HTML
Scrollbar
iframe
Tage Table TD
<td ><iframe src="file:///D:/webpage/index2.html width="350"
height="300" scrolling="yes" /></td>

Scrollbar

)
E-learning

.........................................................................................................

299

1.
............................................................................................................................................................
............................................................................................................................................................
2.

..
3. Dreamweaver
..........................................................................................................................................................
..
)
4. ( 3
..........................................................................................................................................................
..........................................................................................................................................................

5.
..
..
6. link Target
2
.........................................................................................................................................................
..........................................................................................................................................................

7.
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................

300

, Dream weaver MX 2004, ,

, Dream weaver CS3, ;

,2551.
, , :Info press.
, Dreamweaver 8.0 , : .

, , ; Success Media.
:

http://www.nectect.or.th
http://www.webthaidd.com/dreamweaver/news.php?id=445
http://cannot.info/page?p=1310520034773
http://www.pyayam.com/article/show.php?Category=webpage&No=67