Вы находитесь на странице: 1из 112

-

.. , ..

HTML-
Adobe Dreamweaver CS3

-
2007

681.3
.., .. HTML- Adobe
Dreamweaver CS3. - . , 2007.
112 .

: .. , ..., , . .
.. , ..., .

-

,


-.

ISBN 5-7577-0092-0

-
,
, 2007


1.
2.

.............................................................................................................. 5
HTML- Adobe Dreamweaver............................................................ 9
2.1 .................................... 9
2.2

3.

4.

5.

6.

Dreamweaver ..................................... 11

Dreamweaver....................... 15
3.1 web- ................................. 15
3.2

.................................. 17

3.3

............................................................................. 21

........................................................................ 23
4.1 ............................................................. 23
4.2

............................................................... 23

4.3

.......................................................... 28

4.4

............................................................................ 29

4.5

...................................................... 34

HTML-: ................ 36
5.1 .......................................................... 36
5.2

..................................................... 38

5.3

........................................................ 39

5.4

................................................................................... 41

5.5

.................................................... 42

5.6

CSS................................................ 46

5.7

HTML ............................................................ 51

................................................. 54
6.1 ............................................. 54
6.2

............................................. 55

6.3

................................................. 56

6.4

.................................. 57

6.5

Flash- ............................................................................. 61

6.6

.............................................. 63

7.
CourseBuilder ............................................................................................................ 65
7.1 CourseBuilder ......................................................... 65
7.2

.................................. 67
3

7.3

.................................. 72

7.4

............. 75

7.5
.................................................................................................. 79
7.6

............................... 80

7.7

...................................... 82

. HTML .............................. 86
HTML............................................................................ 86
HTML.............................................................................................. 86
. .................................... 102
.............................................................................................................. 109

1.



Internet.
: ( , ),
.
Internet WWW ( . World Wide Web
),
.

, HTML. HTML (
. HyperText Markup Language, )
, web-. HTML ASCII-.
,
.
.
, ,
( , Java ..) , ,
Internet.
HTML, Web,
World Wide Web (W3C).
,
http://www.3w.org. ,

.
""
.

web-.
HTML-
.
, HTML-
. ,

. ,
HTML
. web-,
, .

.
,
HTML.
,
.
5

HTML- web-,
,

. ,
,
( , )
web-.
,
HTML.
,
.
web-
HTML- WYSIWYG ( . what you see is what you get, ,
) , ,
.
, HTML-
.

HTML. HTML ,
.

HTML-, , .
,
, .
,
.
,
, , ,
HTML. , ,
,
.
HTML
, ,
web- HTML,
WYSIWYG-.

.
HTML web-
Internet-.

. ,
, .
Dreamweaver Adobe.

6

web-. ,
, HTML.
Dreamweaver
web-, .
HTML-,
, . Dreamweaver

web-.
, . ,
Dreamweaver ,
, .
web-,
.
2 Adobe Dreamweaver.

.
3.
HTML-
Dreamweaver ,
.

, , ,
4.
,
, .

HTML-
5.
.
CSS.
HTML (
Microsoft Word).
6 ,
Internet-,
. HTML- Dreamweaver
,
HTML-. , JavaScript, ,
.
web- Adobe
CourseBuilder for Dreamweaver. 7

CourseBuilder.

HTML.
HTML. , ,
7

,
,
,
Internet.

2. HTML- Adobe Dreamweaver


Dreamweaver
, HTML,
.
Adobe Dreamweaver CS3. ,
,
.
, .
web-,
,
.
2.1

Windows. Dreamweaver
.

. 2.1. Dreamweaver

Open a Recent Item ,


( ).
Create New (HTML, PHP, CSS, JavaScript ..)
Create from Samples
.
9

HTML-. HTML-
.
.

. 2.2. Dreamweaver
(A. , B. , C. , D.
, E. HTML-, F. , G. )

2.1 . ,
-

. :
. ,
, c,
.
,
.
,
.
Dreamweaver, HTML-,
,

.

HTML-
.
10

2.1.
Code ;
Split / ( );
Design .
HTML-
. ,
HTML-
.
Insert (. 2.1). , ,
(, , Flash) .
HTML-
, , , .
(, ),
, ,
.
Properties (. 2.1).


.

History (. 2.1). ,
, (
50 ). History,
, , .
Windows,

, .
, .
,
.
2.2 Dreamweaver
, ,
.
, Edit,
Preferences (Edit=>Preferences)

(. 2.2).
, .

11

. 2.2.
Dreamweaver

General .
Code Colors, Code Format, Code Rewriting ,
HTML-.
CSS Styles.
File Types / Editors
.
Use CSS instead of HTML tags
CSS HTML.
, .
, ,
Dreamweaver .
,
.
Internet .
,
.
,
.
, ,
.
. -
,
.
HTML- , .
Dreamweaver ,
. ,
HTML, Preferences (. 2.3) New
Document.
12

. 2.3.
Dreamweaver

Default encoding -
. (KOI8-R)
(Windows). ,
HTML-. ,
, (Windows).
Use when opening existing files that don't specify an encoding,
. Dreamweaver
Default encoding
Web-,
. , Fonts Setting Fonts ,
.

. 2.3.
Dreamweaver

HTML- .
HTML-
.
13

HTML Modify=>Page Properties.


(. 2.4).

. 2.4.
( Title/Encoding)

Title/Encoding Encoding
Reload, .
, ,
, . ,
.
. ,
(KOI8-R) (Windows)
,
(KOI8-R) .
Preferences (. 2.2) Category
, .
Highlighting Invisible Elements ,
,
HTML-.
AP Elements,
Layout Layout Mode.
HTML-
Preview
in Browser.

Site.
, Status Bar.
Dreamweaver
.
HTML-
.

14

3. Dreamweaver
3.1 web-
HTML-
Dreamweaver

.
HTML-
.
.
Dreamweaver
Site=>Manage Sites.
(. 3.1).

. 3.1.

New
Site. (.
3.2), .
Edit...
Duplicate ,
Remove .

. 3.2.

15

, (. 3.2)
Basic Advanced.
Basic,
Advanced
.
,
(. 3.2). Local Info
(Site name), ,
(Local root folder), .
, ,
(Default images
folder). ,
.

. 3.3.

Remote Info (. 3.3)


Internet.
( Access)
.
FTP. , ,
FTP , ( FTP host).
Host directory ,
( ,
). Login Password
, FTP. Save, Password.
, FTP-
16

. ,
.

. 3.4.

Site Map Layout (. 3.4)


( Home Page). .
, OK
Define Sites. Done
.
3.2

Dreamweaver Site Manager ( ).
Dreamweaver,
Files (. 3.5).

. 3.5. Files

17

, Site Manager,
Expand to show local and remote sites

Files.
Site Manager (.
3.6). Site Files

, .
Site Map
.
, Site,
. Connects to remote host
, ,
. Refresh

.
Put File(s)
Get File(s)

,
.

. 3.6. Site Manager

Site Manager
: , , .
Site Manager,

. ,
,
.
. , ,
.
.
Dreamweaver,
18


Collapse to show only local or remote sites
Edit=>Find and Replace. (. 3.7)
, , . Find In
, (Current Document
, Entire Current Local Site
, Selected Files in Site ,
Folder - ). Search ,
HTML- (Source Code
HTML, Text
, Text (Advanced)
HTML, Specific Tag
HTML). Find
, . Replace
, .

. 3.7.

Find Next ,
,
.
,
. Find All
,
.
,
. Replace Replace All
, ,
.

HTML (, windows-1251
KOI8-R). ,
- ( ,
Dreamweaver ).
, HTML (Source Code)
(Entire Local Site). windows-1251
KOI8-R.
19

, Dreamweaver
.

. ,
Internet, , .
.

.
:
index.html,

()

;
( images);
,
(, JavaScript, CSS, Flash),
;
,
,
, ;
, , ,
, links.html, page1.html, background.gif
.. ( , Untitled1.htm Movie1.swf).
,
, HTML
(, Flash-
).
, ,
Site=>Put,

. HTML-,
(. 3.8),
(, ,
).

. 3.8


,
. Site=>Synchronize
(. 3.9).
20

. 3.9.

Synchronize ,
(Entire
Site) (Selected Local Files Only).
Direction , :
(Put newer files to remote),
(Get newer files
from remote),
(Get and Put newer
files).
Delete remote files not on local drive,
, .
.
,

, .
Site Manager
.
,
.
3.3

Site Map Site Manager (. 3.6).
(. 3.10).
,
, .

21

. 3.10. Site Manager



, .
(.. ,
) "+",
( ""
).
.
(
, , , ..),
,
. ,
. , Dreamweaver
HTML , .. JavaScript, Flash
.. .

22

4.
4.1
web-
.
, ,
.
,
, URL
.
(
).
.
.
, (
UNIX, web) .
, , ,
Windows,
. ,
web-
. , -
.
.
Internet-
. ,
URL,
. ,
,
, URL .
.

, .

. , URL ,
.
4.2
, , Dreamweaver
, web-.
, , .
, .
, , File=>New
File Site Manager.
23


( ,
.. ).
,
index.html ( index.htm). ,
.
.
Modify=>Page Properties. ,
, ()
Title Title/Encoding (. 2.4). ,
,
.
, , ..

. 4.1.
( Appearance)

, Appearance (.
4.1), :
Background image ,
( ,
Browse);
Background / Text ,
( ,
, );
Links / Visited links / Active links /
/ ;
Left margin / Top margin / Margin width / Margin height
() (Left Top margin
Internet Explorer, Margin width height
Netscape Navigator,
).

24

HTML-
.
.
,
HTML-.
,

"
Internet-". ,
,
Dreamweaver.
,
, View=>Visual Aids=>Frame
Borders.

, Frames Layout Insert (. 4.2).
, ,
Insert=>HTML=>Frames.

. 4.2.
Frames Objects

Frame
Tag Accessibility Attributes, .
, OK.

Modify=>Frameset=>Split Frame Left, Right, Up Down
, , .
.
HTML-.
, ,
, .

, Frames (. 4.3
Window=>Frames).
25

. 4.3. Frames


.
File=>Save Frame
File=>Save Frame As .

File=>Save Frameset File=>Save Frameset As.
File=>Save All Frames
.

Frames Alt
. Properties
(. 4.4).
,
,
.

. 4.4.

Frame name ,
. ,
:
Src , ;
Scroll (
: Yes , No , Auto ,
Default , Auto);
No resize ;
Borders (Yes
, No , Default ,

26

Yes).
;
Border color .
;
Margin width / Margin height ( )
/
.

.
Frames.
(. 4.5)
:
Borders (Yes
, No , Default );
Border width ;
Border color .

. 4.5.

, .
.
, " ". ,
, :
( )
.
(, );

( 100%).
;

.
(
, ).
.
,

(. 4.5) ,
. Units ,
(Pixels , Percent , Relative
). Value.
27

4.3
, , ,
, web-
.
" Internet-".
Navigation Bar,
.
,
.

Insert=>Image Objects=>Navigation Bar. (. 4.6)
,
.
,

.
Nav bar elements.
,
.

.

,
,
:
Element name ;
Up image ,
;
Over image ,
;
Down image ,
;
Over while down image ,

;
When clicked, Go to URL Internet-,

.

28

. 4.6. Navigation Bar

Preload images, HTML-


.
Show Down image initially
HTML-.
,
Up. ,
Down.
Insert ,
(
). Use tables,
.
, ,
,

.
4.4

.
Dreamweaver ,
. ,
29

, Dreamweaver
.

, ,
. , ,
, , ,
,
. ,
Dreamweaver ,
.
,
, ,
, .
.
HTML-
,
. ,
,
, File=>Save as Template.
(. 4.7) , (
Site), ( Save as).

. 4.7.


. , ,
, , ,
.
, ,
. ,
(editable region)
Insert=>Template Objects=>Editable Region.
(. 4.8) .
, .
30


, .

. 4.8.

Dreamweaver
,
, HTML- :
<!-- TemplateBeginEditable name="Title" -->
Title
<!-- TemplateEndEditable -->
HTML-
, Dreamweaver
.
. ,
HTML- .

.
,
Modify=>Templates=>Remove Template Markup.
,
. ,
,
, .
File=>New.
New Document (. 4.9) Page
from Template (Template for Site),
. Update page when template changes
. ,

.

31

. 4.9.

,
. HTML- .
HTML- , ,
, . ,
,
.
.
.
Modify=>Templates=>Detach from Template.
Dreamweaver .
,
.

( , ).
, Dreamweaver
, .
,
, Modify=>Templates=>Open
Attached Template. Dreamweaver
, .
Templates ,
Dreamweaver .

, .
32

, .

Modify=>Templates=>Update Pages.

. 4.11. ,

Update Pages (. 4.11) Look in


, :
(Entire Site), ,
(Files That Use).
(. 4.12).

. 4.12.

.
, ,
Modify=>Templates=>Update Current Page.

, .
,
, ,
33

- .

.

Modify=>Templates=>Apply Template to Page. Select


Template ,
. Dreamweaver
,
.

Templates Files (. 4.13).

. 4.13. Templates

Dreamweaver ,
,
,
, .
4.5

, (Library).
Adobe
, .
(,
, , ),
34

.
.
,
.

Library Files (. 4.14).
HTML-
Library.

Modify=>Library=>Add Object to Library.



. Library
.

. 4.14. Library ()


.
, ,
.

.
. .
Detach from Original,
, ,
.

.

35

5. HTML-:

HTML
,
. ,
: . HTML-
,
, .
( ,
, , , )
(CSS Cascading Style Sheets).
HTML

HTML- Dreamweaver.
5.1
. ,
, -
, . HTML
: <H1>
( ) <H6> (
). .
.
,
.
.
:
,
.
Enter. HTML
<P> ( ).
-
( ).
.
.
<BR> ( ).
,
. , ,
<BR>, ,
,
.
, HTML-
, (
, ).
36

- <PRE>. ,
, ,
.

Dreamweaver. , ,
, Enter.
HTML-
<>.
Shift+Enter.
<BR>. ,
Insert=>HTML=>Special Characters=>Line Break.
,
.
.
, (. 5.1).
, , Window=>Properties.
, () Text=>Paragraph
Format Paragraph Format ,
.

. 5.1.

,
Format.
HTML : Paragraph
( <>), Heading 16
( <1><H6>), Preformatted
( <PRE>) None
. Text=>Paragraph
Format.

<SPAN> <DIV> ( ID CLASS).
( <SPAN>)
( <DIV>) ,
.
,
.
Dreamweaver
, CSS
( ).

37


,
:
<EM> ;
<STRONG> ;
<CITE> ;
<DFN> , ;
<CODE> ;
<SAMP> ;
<KBD> , ;
<VAR> ;
<ABBR> ;
<ACRONYM> .
,
Dreamweaver,
Text=>Style, .
5.2
,
.

. , CSS,
,
. ,

.

(. 5.1).
, Font. Default Font ,
.
,
, . ,
, ,
.
.
, ,
. (,
) Edit Font List,
. ,
Font Text=>Font.
Size ( Text=>Size
Text=>Size Change Size ).
, 1 7 (
3). "" 20%
.
38

4.5.
+7
-7. 7 1,
. HTML
,
(
CSS).
Text Color
, HTML-.
#RRGGBB, # ,
RR, GG BB ,
( 00 FF).
.

. web-
216 , Macintosh PC.
,
.
, .

. Default Color ,
, .
Bold
Italic

/ .
Text=>Style
Style .
Left,
. ,
Center, Right Justify
Text=>Align Align .
5.3

. HTML
<A>. Dreamweaver
( ),
(. 5.1) Link URL ,
. (
),
Browse for File,
, .
, .
, URL ,
(, http://spb.fio.ru/). Target ,
, .
:
_blank ;
_parent ;
39

_self , ;
_top ,
.
(
_self).
(.. ,
), Target
. , ,
. ,
.
,
.
. ,
Insert=>Named Anchor Named Anchor
Common (. 5.2).

. 5.2.

(. 5.3) Anchor name


,
/ .
Link #
(, filename.html#part1).
, (, #part1).

. 5.3.


. Email
Link Common (. 5.4)
Insert=>Email Link.

. 5.4.

40

(. 5.5) Text
, , E-Mail
, .

. 5.5.
.

5.4
HTML
. :
( <UL>)
;
( <OL>)
;
( <DL>)
/.

<LI> ( ).
,
: .
<DT>, <DD>.
Dreamweaver .

(. 5.6).
Text=>List: Unordered , Ordered
, Definition List .
Enter,
Enter .

. 5.6.

41


,
, .
5.5
HTML
. ,
,
web-. ,
HTML.
HTML- (,
, , , , ,
) .
HTML ,

.
. HTML
,
.

. 5.7.

Dreamweaver ,
, .
Insert Table (. 5.7).
Insert=>Table.
Insert Table (. 5.8),
. Table
size, Rows Columns
, Table width (
). Border
thickness
. , .
Cell padding
( 1 ), Cell spacing
( 2 ).
Header ""
. None ( "",
), Left ( ),
("") Both ( "", ).

42

, "" ,
, , ,
.
Accessibility Caption .
.
Align caption
. :
default ( ) Web-,

;
top ;
bottom ;
left ;
right .

. 5.8.

, , .
, :
, ,
, . ,
,
.
Modify=>Table=>Select Table (
).
43

5.9.
(Rows Cols), (W),
(CellPad CellSpace) (Border). ,

(Align), (Bg color Brdr color),
(Bg Image).

. 5.9.

(. 4.9). Clear Row Heights


Clear Column Widths
. Convert Table Widths
Convert Table Widths to Percent

to Pixels

.

, .
(. 5.10).
( W H ),
(Bg Brdr ),
Bg. ,
( Vert Horz ).

. 5.10.

, ,
. ,
, .
Merge Split

. , , Split Cell
Merge Cells Modify=>Table Table
. Split Cell

44

(.
5.11),

(Rows) (Columns) .

. 5.11.

. ,
, Modify=>Table
Table .

Delete Row Delete Column .
, ,
, .
Delete.
Insert Row
Insert Column (
).
, Insert Rows or Columns
(. 5.12) ,
( Insert)
(Number of ). (Above the
Selection) (Below the Selection) .

. 5.12.

Dreamweaver
. ,
(, Microsoft Excel)
( , ,
..), HTML-.
45

. 5.13.

. , Dreamweaver
Import Tabular Data Data (.
5.13) Insert=>Table Objects=>Import Tabular Data.
(. 5.14)
( Data file). Delimiters ,
. Other,
(,
, ). Table width

: Fit to Data
, , Set

. Format Top Row
: No Formatting
, Bold , Italic
Bold Italic . Cell Padding, Cell
Spacing Border , .

. 5.14.

5.6 CSS
(CSS, Cascade Style Sheet)
web-.
,
46


web-.
CSS
.
,
CSS
web-.
,
.
,
:
{: ; : ; }
,
.
.
, ,
. , (,
, , ..).
/, .
1-
. 14 , Verdana
sans-serif .
H1 { font-size: 14pt;
font-face: Verdana, sans-serif;
color: red;
}
Dreamweaver CSS
(. 5.15). Window=>CSS
Styles.

. 5.15. CSS

47

Dreamweaver :
, HTML (
);
.
,
(, Microsoft Word).
.

;

-.
New CSS Rule
New ,
.
(. 5.16)
Selector Type. Class
,
.
Name ,
(CLASS) . ,
. Tag
,
Tag. Advanced
.
Selector (ID).
,
, .

(CLASS ).

. 5.16.


Define in. New Style Sheet File
,
(
- ,
48

).
. ,
.
(This document only)
(, ,
). ,
.
, ,

(. 5.17). Category
, . -
,
.
Type .
Font . Size
. ,
(
pixels
points). ,

.

. 5.17.

Style :
normal ( ), italic , oblique
. Line height
49

. Decoration
(underline), ( ,
overline), (line-through), (blink). none
.
( underline),
.
,
Dreamweaver, .
Weight , , . Varint

( small-caps). Case
(capitalize
, uppercase
, lowercase ).
Color .
Background ,
"" .
( ).
Background color Background image
. ,
Repeat (repeat
, repeat-x , repeat-
, no-repeat , ).
Attachment
( , scroll) (fixed).
Horizontal position Vertical position
,
.
Block
. Word spacing
. Letter spacing
. Vertical alignment
. Text align .
Text indent
. Whitespace ,
, : normal
, ; pre <pre>
HTML ( );
nowrap ,
<br>.
, Box
.
Border
.
List .
50

Positioning
. ,
Internet Explorer.
Extensions ,
.
, ,
.
. ,
, (none).
, .

.
Attach Style Sheet

.

CSS Edit Style,
(. 5.17).
Delete
.
Delete CSS Rule.
5.7 HTML
,
web-, ,
.
,
web-
Windows. Dreamweaver
( ).
, ,
( ).
, ,
( Copy Edit, Ctrl+C).

Windows. Dreamweaver,
(Edit=>Paste
Ctrl+V).
HTML- ( ,
..).

(, , ..).
,
HTML ,
( , ,
51

, ..).
Microsoft Word.
Dreamweaver ,
Microsoft Word HTML-.
File=>Import=>Import Word HTML ,
. Word
HTML. ,
web-.
=> Web-. , HTML-,
,
. ,
,
Microsoft, HTML-
.
Word 2000 ( HTML-
3-5 ).
HTML-
, Word. ""
Commands=>Clean Up Word HTML.

""
HTML,
Word.
, Word.

. 5.20. "" , Microsoft


Word HTML

52

Word,
( ,
). ,
Clean up HTML from. Remove all word specific markup
HTML, Word.
Detailed .
Clean up CSS CSS,
Word, -CSS . Clean up <font> tags
, HTML.
Set background color . Word
,
. Apply source
formatting ,
. Show log on completion,
,
.

.

.

53

6.
6.1
, HTML,
. ,
,
Images Image (. 6.1)
Insert=>Image.
( GIF, JPEG PNG).
,
,
( ).

. 6.1.

(
), (. 6.2).

. 6.2.

W H
.
( ), W H
.
, .
, ,
( W H)
Reset Size.
Src :
,
Browse for File
. Align
54


. :
Browser Default ( Baseline,
);
Baseline Bottom ( )
;
Top
;
Middle ;
Text Top
;
Absolute Middle
;
Absolute Bottom
;
Left ,
.
, ;
Right ,
.
, .
V Space
( ). , H Space
.
Link
. ,
.
Border ( 0, ). Alt
,

. ,
.
Edit
, Dreamweaver.
6.2

.
, ( ).

(hotspot). Dreamweaver
,
.

.
( 6.3).
55

Map , .
Link Target , , , Alt
.
.
,
.

. 6.3.

:
.

.
. -
. Pointer Hotspot Tool .
6.3
,
, Rollover Image.
Images
Rollover Image (. 6.1)
Insert=>Image Objects=>Rollover Image.

. 6.4. Rollover Image

(. 6.4) ,
: Original
image , Rollover image
56

, ,
.
(Image name)
.
,
.
Preload rollover image, HTML-
.
, When
clicked, Go to URL Internet-.
6.4
HTML-
. , ,
-
.
JavaScript.
HTML, JavaScript
HTML-.
,
HTML-, .
HTML- Dreamweaver
Behaviors
, ,
.
Behaviors
Window=>Behaviors.
,
, Behaviors (. 6.5) ,
(Actions)
(Events). ,
, HTML.

Behaviors (. 6.5).
, .
,

.
,
.

57

. 6.5.


6.1. ,
, 6.2.
.
6.1

Call JavaScript
Change Property
Check Browser
Check Plugin
Drag Layer
Go to URL
Open Browser Window
Play Sound
Popup Message
Preload Images
Set Nav Bar Image
Set Text of Frame
Set Text of Layer
Set Text of Status Bar
Set Text of Text Field
Show-Hide Layers
Swap Image
Swap Image Restore
Validate Form
58

JavaScript


Plugin Web-

Internet-





HTML-
HTML-

6.2

onLoad
onAbort
onError
onUnload

HTML-



onResize
onMove
onScroll
OnHelp





Help

OnKeyDown
OnKeyUp
OnKeyPress



OnClick

OnDblClick
OnMouseDown

OnMouseUp
OnMouseMove

OnMouseOut
OnMouseOver
OnReset
OnSubmit
OnBlur
OnFocus
OnChange
OnSelect


Reset

Submit



Go To URL
,
Go To URL.
,
6.6.

59

. 6.6. Go To URL

Open in (
Main window), Internet-,
, URL.
Open Browser Window
Open Browser Window ,
Internet-.
6.7.

. 6.7. Open Browser Window

URL to display Internet- ,


(
Browse...). Window width Window height
.
Attributes
(Navigation toolbar), (Menu bar), (Location
toolbar), (Scrollbar as needed), (Status bar).
Resize handles
60

. Windows name
.
Play Sound
Play Sound .
(. 6.8) Play sound
.
Browse...

. 6.8. Play Sound

Popup Message

Popup Message.

. 6.9. Popup Message

(. 6.9) Message
,
.
6.5 Flash-
HTML- Flash Insert=>Media=>Flash Button.
Flash- (. 6.10).
Style
Dreamweaver ,
. , Button text,
( Dreamweaver
61

).
Font Size .
, Link URL
.
Bg color.

. 6.10. Flash-

, , ,
Save as.

. 6.11. Flash-

.
HTML- Flash-,
62

. Flash-
Edit (. 6.11).
, Insert=>Media=>Flash Text, HTML Flash-.
, web

,

Adobe, :
Flash ( );
Shockwave ( ).
6.6
Internet-,
,
.
, , ,
,

.
,
. ,
.
HTML
.
HTML- .
,

.
,
,
(plug-ins). HTML GIF JPEG,
.
: ( )
(, ).
. ,
HTML- ,
.

,
, ,
Flash-
VRML. ,
, 6.3.
63

6.3 ,
(plug-ins)


*.swf
Flash Player (Adobe)

*.pdf
Acrobat Reader (Adobe)
*.doc, *.rtf
Word Viewer (Microsoft)
-
*.rpm
RealPlayer (RealNetworks)
*.aam, *.dir
Shockwave (Adobe)
*.mp3, *.wav,
Winamp MP3 Player (Nullsoft)
*.mid
*.mpeg, *.wav,
QuickTime (Apple)
*.mid, *.png,
*.tiff, *.bmp,
*.avi
*.pqf
*.ppz, *.ppt,
*.pps, *.pot

Corel Presentations Show It! (Corel)


PowerPoint (Microsoft)


*.vrml
Cosmo Player (Silicon Graphics)
Cortona (ParallelGraphics)
*.tar, *.gz,
Netzip Classic (RealNetworks)
*.arj, *.zip,
*.lha, *.taz
HTML- Dreamweaver HTML- ,
.
Insert=>Media=>Plugin.

64

7.

CourseBuilder

JavaScript- CourseBuilder HTML Dreamweaver HTML-


.

Internet-.
7.1 CourseBuilder
, CourseBuilder
HTML-, Insert=>CourseBuilder
Interaction CourseBuilder
Interaction (. 7.1).

. 7.1. CourseBuilder

CourseBuilder
HTML-. HTML- ,
CourseBuilder .
,
CourseBuilder, , ,
(, test).
CourseBuilder
JavaScript-. CourseBuilder
(. 7.2).

. 7.2.

65

OK
, CourseBuilder :
CourseBuilder (. 7.3),
.

. 7.3. CourseBuilder


, , ,
.
,
,
JavaScript-.
CourseBuilder Gallery.
Category

, HTML-.
:
Multiple-choice Interactions ,
;
Drag-and-drop Interactions ,

;
Explore Interactions ;
Button Interactions -;
Text entry Interactions ,
;
66

Timer Interactions -;
Slider Interactions -;
Action Manager Interactions .

CourseBuilder
. , HTML-
,
.

CourseBuilder.
7.2
CourseBuilder
Multiple Choice. ,

, MultCh_ImageChkboxes (. 7.4).

General, Choices, Action Mgr.

. 7.4. CourseBuilder ( Gallery)

, ,
General (. 7.5).
(Interaction Name) CourseBuilder ,
.
, .
Question Text,
.
67

. 7.5. CourseBuilder ( General)

Judge Interaction ,
.
,
. ( Submit)
(, ).
, ,
. ,
,
.
Correct When
. All Correct
and None Incorrect,
, ,
. Any
Correct and None Incorrect,
,
, .
, ,
.
Knowledge Track ,

, Web (, Lotus Pathware).
,
.
68

(Unlimited). ,
, Tries Are
Limited To,
(, 3).
. Time Is
Limited To,
(, 180).
,
,
.
Reset
.
.
Layer,
.
, Choices (. 7.6)

. (Name),
JavaScript-,
. Choices
, .

Add Delete,
Up Down.

. 7.6. CourseBuilder ( Choices)

69


Choices, (
Text) (
Image File). Text, Image File,
,
. Place before text
. ,
, , .
Appearance ,
.
Choice Is
(Correct)
(Incorrect).
Not Judged, ,
.

(),
. Score
. ,
,
2.5,
5.
,
, ,
Action Mgr (. 7.7). Action Mgr
.

. 7.7. CourseBuilder ( Action Mgr)

70


(Segment:
Correctness), (Segment: Check Tries)
(Segment: Check Time). ,
Expand
Collapse .
.
, Cut, Copy Paste
. Add
,
. Edit... Rename
. , Action
Manager
CourseBuilder.
CourseBuilder
. ,

(Popup Message).
, .
Popup Message
. ,
Correctness
if Correct, Popup Message
: Correct.
Popup Message Edit
Message
Correct ,
.
, , else if
Incorrect. , ,
else if Unknown Response. Unknown
Response Popup Message

!
,
, CourseBuilder
OK.
7.8, 7.9.

,
.
(. 7.8).

CourseBuilder. Dreamweaver
CourseBuilder,
71

.
Edit (. 7.10).

. 7.8.

. 7.9.

. 7.10. Properties CourseBuilder

7.3

CourseBuilder Text Entry (. 7.11).
, CourseBuilder,
(
).
General, Responses, Action Mgr.

72

. 7.11. CourseBuilder ( Gallery)

General (. 7.12)
. Question Text
Initial Text.
,
. ,
. ,
- , Initial Text :
...
.

. 7.12. CourseBuilder ( General)

73

. 7.13. CourseBuilder ( Responses)

Responses (. 7.13) .

.
(Name), JavaScript-,
. Possible Responses
, .
, ,
Add Delete.
Possible Responses,
( Must
Contain). case sensitive
, exact match required
, , ,
, ,
.
Match Is ,
,
(Correct), (Incorrect)
(Not Judged). ,
CourseBuilder ,
, .
Any Other Response Is,
: Correct (
), Incorrect (
74

) Not Judged (
).
Score
(),
.
7.4

,
(Drag-and-drop Interactions).
Category
CourseBuilder (. 7.14) Drag-and-drop.
CourseBuilder ,
.


.
General, Elements, Pairs, Action Mgr.
General (. 7.15)
.
General ,
Reaction. Snap back if incorrect,

.

. 7.14. CourseBuilder ( Gallery)

75

. 7.15. CourseBuilder ( General)

,

. Snap back if not
dropped on target ,
.
.

. 7.16. CourseBuilder ( Elements)

76

,
, .
Elements (. 7.16)
. Elements.
Add
Delete. (Name),
JavaScript-,
. Elements,
. -, (Element Is): Drag
, Target Drag and Target,
(
). -, (Image File)
,
.
,
Browse...
CourseBuilder ,
.
, Image File
.

. 7.17. CourseBuilder ( Pairs)

Pairs (. 7.17)
.
Add Delete, ,
,
.
77

Pairs,
. ,
.
Choice Is Correct,
, Incorrect,
, Not Judged, .
Pairs
, .

. Snap If Within
, .
CourseBilder , 75 .

, .
, ,
.
Snap To
,
.
.
,
. ,
(Left, Right, Top, Bottom) ,
, ,
.

.
,
(. 7.18).

. 7.18.

78

,
,
(. 7.19).

. 7.19.


, ,
.
7.5


(Drag-and-drop
Interactions).

79

. 7.20.

,
(. 7.20) ..
7.6

. CourseBuilder
.

web- .

.

.

.

Go To URL ( Internet-).
ActionMgr CourseBuilder
Interaction Go To URL.
,
, Add. URL
(. 7.21) ,
, OK.

80

. 7.21. Go To URL


. ,
( HTML-
JavaScript ).
:
, ,
.
, .

, . , ,
Layer General.
, .
(. 7.22) Vis
hidden.

. 7.22

81

. 7.23 Show-Hide Layers

,
. , ,
,
.
Show-Hide Layers (/ ).
(. 7.23) Named Layers
, .
, (.. ),
Hide ().
Show ().
7.7
,
, ,
. ,
Score (
Multiple Choice Choices; Text Entry
Responses; Drag-and-Drop Pairs). HTML
CourseBuilder. Category Action
Manager (. 7.24).

82

. 7.24. CourseBuilder ( Gallery)

General (. 7.25)
.
when the user clicks a button labeled,
(, ).
.

. 7.25. CourseBuilder ( General)

83


, Action
Mgr. -, .
Segment Add.
Segment Editor (. 7.26)
Segment Name (, Segment : Result)
OK.

. 7.26.

-,
.
Popup Message Add.
(. 7.27) Message
.
, ,
5 , Message :

{G01.score+G02.score+G03.score+G04.score+G05.score}
,
{(G01.score+G02.score+G03.score+G04.score+G05.score)*
100/25} %.

. 7.27.

{ }. G01,
G02, G03, G04 G05 CourseBuilder,
, HTML-, .
CourseBuilder ,
, . (). ,

G01.score, G02.score, G03.score, G04.score G05.score ,


.

. 7.28.


,
7.28.

85

. HTML
HTML
HTML :
c, HTML;
( <HEAD>);
, (
<BODY> <FRAMESET>).
, <HTML>.
.
,
.
,
.
( <FRAMESET>).
, HTML:
<html>
<head>
<title> HTML-</title>
</head>
<body text="#0000ff" bgcolor="#ffffff">
<h1> </h1>
<p> </p>
</body>
</html>
HTML ,
,
.
HTML
<a>
Internet-,
href. name ,
.
. title
.
, <a href="http://spb.fio.ru/"
name="link" title=" "></a>

<abbr>, <acronym>

. , "GmbH",
"" "", "M.", "Inc.", "etc.", "WWW",
"HTTP", "URI".
, ,
, ,
. title
.
<address>
.
: <address>, 197101,
-, ., .14</address>

<area>
.
<MAP>. href URL
. shape
(rect , circle , poly
), coord ( )
, .
<img src="images/arrow.gif" width="65"
height="46" usemap="#Navigation" border="0">
<map name="Navigation">
<area shape="rect" coords="44,16,64,48"
href="page4.html" alt=" "
title=" ">
</map>

<b>
.
<b></b>

87

<base>
HTML , ,
, .. URL.
URL.
<BASE> href URL
.
<big>
.
<big></big>

<blockquote>
.
.
.
.
<p> :</p>
<blockquote>
<blockquote> </blockquote>
</blockquote>

<body>
. text
. bgcolor background
. link, alink vlink
,
.
<br>
. ,
, .
<p> <br>
</p>

<button>
,
, <INPUT>,
.
. name
. value .
type (submit ,
, web-; reset
; button
, JavaScript).
<form name="test_form" method="post" action=
"cgi-bin/action.cgi">
<button type="button" name="Message" onClick=
"alert('')"><img src="images/msg.gif"
width="42" height="42" border="0"></button>
<button type="submit" name="Submit">
</button>
<button type="reset" name="Reset">
</button>
</form>

<caption>
.
<cite>

.
<cite></cite>

<code>

.
:<code>
&lt;b&gt;&lt;/b&gt; </code>

89

<col>
( ) (
<COLGROUP>). (,
), .
span , <COL>.
align , valign
. ( ,
) , <COL>
width.
<colgroup>
.
CSS HTML.
<dd>
(<DL>).
<dfn>
, .
<dfn></dfn>

<div>
,
.
, lang .. align
.
<p>
<div class="caption"> </div>

<dl>
, ( <DT>)
(<DD>).
<p> :</p>
<dl>
<dt></dt>
<dd></dd>
</dl>

<dt>
, (<DL>).
<em>

.
<em> </em>.

<font>
,
size , color.
size ( 1 7,
3) .
face (
).
<font face="Arial, Helvetica, sans-serif"
size="4" color="#0000FF"> </font>.

<form>
. HTML-
,
. action URL ,
, method
HTTP (get post) .
<frame>
<FRAMESET>. src
HTML-, .
name. frameborder
( 1 yes , 0 no
). ,
bordercolor. scrolling
( yes ,
; no ; auto
). noresize
.
91

<frameset>

.
<frameset cols="30%,*" rows="*" frameborder =
"YES">
<frame src="menu.htm">
<frameset rows="60%,*" frameborder="NO"
border="0" framespacing="0" cols="*">
<frame name="topFrame" scrolling="NO"
src="top_menu.htm" >
<frame src="page1.htm">
</frameset>
</frameset>

<h1h6>

( 1 6). align
.
<h1> 1- .</h1>
<h2> 2- .</h2>
<h3> 3- .</h3>

<head>
.
<hr>
.
.
.
<hr>
.

<html>
HTML-.
<i>
.
<i></i>

<img>
. src
. width height
. ,
. align
. alt
. ( ) ,
, border.
usemap .
<a href="index.html"><img src="images/hhome.gif"
width="42" height="42" alt=" "
border="0" align="left"></a>

<input>
,
type:
button ;
checkbox (
, "" "",
);
file
;
hidden , (
,
, );
image
submit;
93

password
, (,
), ;
radio -, checkbox

( , );
reset , (
-);
submit , ,
, ;
text .
name , value
.
<form name="test" method="post" action="cgibin/script.cgi">
<p><input type="hidden" name="hiddenField"
value="mail@mail.ru">
: <input type="text"
name="textfield"><br>
: <input type="radio" name=
"radiobutton" value="radiobutton" checked> 1
<input type="radio" name="radiobutton" value=
"radiobutton"> 2<br>
: <input type="checkbox" name=
"checkbox" value="checkbox" checked> 1
<input type="checkbox" name="checkbox2"
value="checkbox"> 2
<input type="checkbox" name="checkbox3"
value="checkbox"> 3<br>
: <input type="file" name="file"><br>
<input type="image" border="0" name=
"imageField" src="images/msg.gif" width="18"
height="12" alt="">
<input type="submit" name="Submit"
value="Submit">
<input type="reset" name="Reset"
value="Reset"></p>
</form>

<kbd>
,
( ). .
<kbd></kbd>

<label>
.
<LABEL>
. for
:
id .
<li>
( <OL>
<UL>).
<link>
. <>,
<HEAD> (
). , .
<link rel="stylesheet" href="css/styles.css"
type="text/css">
<map>
.
name ,
<IMG>.
<meta>
.
content ,
name .
<meta http-equiv="Content-Type" content=
"text/html; charset=windows-1251">
<nobr>
.
<nobr> .</nobr>

95

<noframes>
, ,
.

<object>
web- (,
Flash, ..). classid URL,
(). data
.
URL,
codebase, . height width
.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000" codebase= "http://
download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=4,0,2,0" width="100"
height="22">
<param name=movie value="flash/button1.swf">
<param name=quality value=high>
</object>

<ol>
,
<LI>. start
, 1.
( : 1 , A ,
, I , i
).
<ol>
<li> </li>
<li> </li>
<li> </li>
</ol>

<optgroup>
<OPTION> (
). label .

<option>
(
). selected
. value
<OPTION>
, .
<p>
.
align left
( ), center ( ), right ( ), justify (
).
left.
<p> .</p>
<p align="center"> .</p>

<param>
<APPLET> <OBJECT>.
<pre>
,
,
.
<pre>

.</pre>

<q>
.
.
<samp>
,
, ..,
.
: <samp>Hello!</samp>

97

<script>
(),
.
type (, "text/javascript"). src
.
<script language="JavaScript" src="js/script.js">
</script>
<select>

. <OPTION>.
name ,
. multiple
. size
. 1 ( multiple ),
, 1

.
<select name="select" size="2">
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
</select>

<small>
.
<small></small> .

<span>
,
.
, lang ..
<span class="selection"></span>.

<strong>
, ,
, .

<strong></strong> .

<style>
<HEAD>
. type
(, "text/css").

, <STYLE>.
<style type="text/css">
<!-.selection { font-family: Arial, Helvetica,
sans-serif; font-style: italic; color: #00CCFF}
-->
</style>
<sub>
,
.
<sub></sub>

<sup>
,
.
<sup></sup>

<table>
. height width
(
). border (
) . border =0
. cellpadding (
) , cellspacing
.
bgcolor, background.
<table width="80%" border="1" cellspacing="0"
cellpadding="2">
<caption> </caption>
<tr>
99

<th width="250"> 1</th>


<th> 2</th>
<th> 1</th>
</tr>
<tr>
<td rowspan="2"> 1</td>
<td align="center" bgcolor="#00CC99">
2</td>
<td> 3</td>
</tr>
<tr>
<td height="50" valign="top"> 4</td>
<td height="50"> 5</td>
</tr>
</table>

<td>
.
, . width height
. align valign

. bgcolor .
colspan , rowspan
, .
<textarea>
. ,
<TEXTAREA>,
. name
, , .
rows cols

.
<textarea name="textfield" cols="30" rows="2">
</textarea>

<th>
.
.
, <TD>.
<title>
HTML <TITLE>
<HEAD>, .
.
<title> </title>

<tr>
. ,
(<TD>).
<tt>
(
).
<tt></tt> .

<ul>
,
<LI>. type .
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>

<var>

.
: <var>x=7</var>

101

.
Dreamweaver
1. Dreamweaver,
Web-.
2.
.
3. HTML- ,
:

HTML- Dreamweaver
,

Dreamweaver
, HTML-,
.
Adobe Dreamweaver
CS3. ,
.
web-, ,
.

:
index.html,

() ;
( images);
,
(, JavaScript, CSS, Flash),
;
,
, ,
;
, , ,
, links.html, page1.html, background.gif .. ( ,
Untitled1.htm Movie1.swf).

4. ,
(, text.htm).
5. HTML- ,
:

1 ..
Macromedia Dreamweaver 8
2 .
-
3 .
HTML
4 ., . Dreamweaver MX 2004 ""
5 .
Web-:

6. ,
(, table.htm).
7. C
(, ).
.
8. HTML- ,
:
(. Lagomorpha) -
.



.

,

,
-


, ,

.
- ,
, . .
, , , .
.


, ,
. :
, Leporidae. .
, Ochotonidae. .

9. ,
(, picture.htm).
10. HTML- ,
:

103

11. web-, -
(, http://spb.fio.ru).
12. web- .
13. web-,
HTML-.
14. ,
.
15. ,
(, links.htm).
16. HTML- ,
:

17.
(index.htm, page1.htm, page2.htm . .)
18. , 1, 2, 3 ..
.
19.
. -
.
20. Web- FTP-,
Internet Explorer .
21. .
Dreamweaver ( )
1. Dreamweaver,
Web-.
2.
.

3. HTML- ,
:

( )



o
o
o
o
o

( )
1.
2.
3.
1.
2.
3.
4.
5.

4. .

:
(O, x1, x2) (x1)2+(x2)2=R2
R x1=0, x2=0.
4. ,
:

1
1
1
1
2
2
2
2
3
3
3
3
4
4
4
4

5
5
5
5
5.
.
6. Go To URL HTML-
-.
7. Go To URL HTML-

.
8. Open Browser Window HTML-
,
200x100 px,
.
9. Open Browser Window HTML-
105

, 600x400 px, (
) .
, CSS-, HTML-
1. Dreamweaver,
Web-.
2.
.
3. CSS- HTML-
, (
,
; ,
):

4. Play Sound HTML-


.
5. Play Sound HTML-

.
6. Popup Message HTML-

.
7. Set Text of Text Field HTML-


.
8.
.
9. Notepad ()

HTML-

,
(
,
):


CourseBuilder
1. , 5
.
HTML-, .
.
.
2. , 5
.
HTML-, .
.
.
3. , 5
.
HTML-, .
.
.
4. , 5
.
HTML-.
.
:
107

,
,
.
5. , 5
.
, .
.
.


. Web-. .:
- , 2000, 448 .
., . HTML 3.2 . : BHV-, 1998,
1040 .
.., .., .., ..
HTML- Dreamweaver. - .
.: (), 2002. - 104 .
. HTML. : , 2000, 240 .
. . . . . , :
, 2000, 528 .
.. Macromedia Dreamweaver 8. .: ., 2006 - 320 .
. -. : -, 1999, 376 .
., . . . : -
, 2000, 560 .
., . -: "
!" : -, 2001, 195 .
.., .., .. HTML 4.0 . :
-, 2000, 672 .
. JavaScript: . .: BHV, 1997,
512 .
.., ., ., .., . . WEB
UNIX. : - , 1998, 560 .
. Web- . : - ,
2001, 576 .
. -. : -, 2000, 450 .
. HTML. .: - , 1999, 364 .
.., ..
. .: - , 2000, 528 .
., . . 2- . :
-, 2001, 608 .
., . Dreamweaver MX 2004 "". .:
"", 2004, 352 .
. Dynamic HTML: . .:
BHV, 2000, 400 .
. Web-: . : - ,
2001, 320 .

109

111

HTML-
Macromedia Dreamweaver CS3


.. , ..
-
. ..
00408 05.11.99

100 .

.