Основы работы с HTML-редактором Dreamweaver 5-7577-0092-0
Учебно-методическое пособие посвящено основам разработки Internet-ресурсов с использованием HTML-редактора Macromedia Dr
164 0 3MB
Russian Pages 106 Year 2002
Recommend Papers
File loading please wait...
Citation preview
( И
. . . .
-
, . . , . .
О HTML-
Уч
)
к
ы
ич к
-
2002
,
ы Dreamweaver
и
681.3 . ., . ., HTMLDreamweaver. ( ), 2002. - 104 .
И
:
. . . .
, . . ., , . . ., И
(
HTML, web“И
.
.,
. -
.
И Ц
И ,
InternetMacromedia Dreamweaver.
, ,
. ”,
ISBN 5-7577-0092-0
. –
Ц
, , )
“
.
И
-
.ru”.
(
), 2002
О ла ление
О ла ление 1. В
............................................................................................................. 5
2. HTML-
Macromedia Dreamweaver ................................................ 9
И
................................... 9
2.1. 2.2.
Dreamweaver
....................................... 11
3.
Dreamweaver........................ 15 3.1.
web-
................................... 15
3.2.
................................... 17
3.3.
.............................................................................. 20 я
4.
......................................................................... 22
4.1.
............................................................... 22
4.2.
................................................................ 22
4.3.
........................................................... 27
4.4.
.............................................................................. 29
4.5.
........................................................ 33
5.
HTML-
:
................. 35
5.1.
Э
........................................................... 35
5.2.
В
...................................................... 37
5.3.
.......................................................... 38
5.4.
..................................................................................... 40
5.5.
...................................................... 41
5.6.
CSS ................................................. 45
5.7.
И
HTML.............................................................. 51
6. В 6.1.
.................................................. 53 И
.............................................. 53
6.2. 6.3.
............................................... 54 В
................................................... 55
6.4.
................................... 56
6.5.
В
6.6.
И
Flash-
............................................................................... 60 ............................................... 62 3
О ла ление
7. Macromedia CourseBuilder .............................................................................. 64 7.1.
В
CourseBuilder ........................................................... 64
7.2.
.................................... 66
7.3.
................................... 72
7.4.
............... 74
7.5. ................................................................................ 79 7.6.
................................ 80
7.7.
....................................... 82 .
я
я
HTML................................. 85
.............................................................................................................. 101
4
1. Вв
1. Вв к
ни
ни
ь
е а
е ь Internet. :
(
,
–
. WWW (
Internet
), . World Wide Web –
), . , . HyperText Markup Language, ,
HTML. HTML ( ) web. HTMLASCII.
,
еги.
–
. ,
, , Java-
( . .)
,
, Internet. HTML,
Web, World Wide Web , http://www.3w.org.
(W3C). ,
. Э "
"
. web-
. HTML. ,
HTML.
.Э
, ”
“ , HTML
.
web-
,
,
.
. , HTML. , 5
1. Вв
ни
. HTML-
web,
,
.
,
, (
,
) web-
.
, HTML. , . HTML-
web. what you see is what you get, ,
WYSIWYG ( ) ,
,
. ,
HTML-
. И
HTML.
HTML-
, . – HTML-
,
,
.
, ,
. , . , , , ,
HTML.
, , ,
. HTML ,
,
web-
HTML, WYSIWYG-
.
. И HTML .
Internet. , 6
. Dreamweaver
web-
, Macromedia. Э
1. Вв
web-
.
ни
, ,
HTML. Dreamweaver webHTML-
,
. , ,
web-
. Dreamweaver
. ,
.
Dreamweaver
,
, ,
. web-
, .
2 Dreamweaver.
Macromedia . 3. HTML-
Dreamweaver
, . –
,
,
,
–
4. , ,–
. HTML-
5. . CSS. HTML
( Microsoft Word).
6 Internet-
, , . HTMLHTML-
,
.
,
Dreamweaver , JavaScript,
. webMacromedia CourseBuilder for Dreamweaver. 7 CourseBuilder. HTML. 7
1. Вв
ни
HTML. ,
,
, , ,
Internet.
8
2.1. И
2. HTML-р
я
ы
актор Macromedia Dreamweaver Dreamweaver ,
,
HTML-
. В Macromedia Dreamweaver 4. ,
,
.
. В
, web-
,
, . 2.1. И
ия и
ч
ы
В Windows. HTML-
Dreamweaver HTML-
.
.
.
. 2.1.
Dreamweaver
2.1
. -
,
– 9
2. HTML-
Macromedia Dreamweaver
.
: . ,
c
,
,
.
– ,
. В , . Dreamweaver,
HTML-
, ,
. HTML-
: – – –
В
; /
(
);
. HTML.
,
HTML. Objects (
. 2.1).
,
,
(
Flash-
) HTML-
,
,
. ,
,
. В ),
, (
,
,
, . Properties (
. 2.1). В
– . History (
. 2.1). В
, ,
,
В (
). И
50 ,
. 2.1). .
( History, .
/ Windows, –
,
. ,
10
.
2.1. И
я
ы
, . 2.2. П
Dreamweaver ,
, . , Preferences… (Edit=>Preferences…)
( ,
. 2.2). В –
. 2.2. Д
В Code Colors,
В
Internet
Edit,
.
я Dreamweaver
ы
General Code Format,
.В Code
Rewriting
File Types / Editors . , Dreamweaver , .
, HTML. CSS Styles. В , .
. 11
2. HTML-
Macromedia Dreamweaver
,
–
. т .А
иц
–
одиро и.
–
,
,
,
.
, .
HTML-
,
.
Dreamweaver
, .
, HTML-
, Fonts/Encoding.
Preferences (
. 2.3. Д
В
ы
Default Encoding
я Dreamweaver
Cyrillic (KOI8-R)
1251). HTML. Cyrillic (KOI8-R) , 12
. 2.3)
Cyrillic . Cyrillic (Windows, , Dreamweaver 4
2.2.
(
Dreamweaver
,
(Windows-1251). В
alt,
). Cyrillic
, ,
Fonts Setting . Cyrillic.
HTML-
HTML-
. Modify=>Page . 2.4).
(
. 2.4. Д
И
ы
Document Encoding Reload, , .
,
HTMLProperties.
. , , .
Cyrillic (KOI8-R) , (KOI8-R)
Highlighting
. Cyrillic (Windows-1251) Western (Latin1)
. Preferences ( , Invisible Elements
. 2.2)
, Cyrillic
Category . В , ,
HTML-
. 13
2. HTML-
Macromedia Dreamweaver
Layers,
Layout View. В
Layout –
Panels .
HTMLHTML-
in Browser, Tag Editor.
–
Site. И , .А HTML.
14
Status Bar. Dreamweaver
Preview Quick
3.1.
3.
ав
web-
а
ва
3.1.
а
а Dreamweaver
webHTML-
Dreamweaver
. Э
HTML. . Dreamweaver Site=>Define Site. (
. 3.1).
. 3.1. Д
я
я
я
New… ( Edit... ,
. 3.2), Duplicate... Remove
.
.
. 3.2. Д
, (
. 3.2).
Local Info
15
3. У
Dreamweaver
(Site Name), , (Local Root Folder),
.
. 3.3. Д
( .
я
Remote Info ( . 3.3) Internet. Access)
– FTP , Host Directory ( ).
FTP.
(
. 3.4. Д
16
,– FTP Host).
, Login ,
.
,
, Password FTP-
3.1.
web-
Site Map Layout ( ( Home Page). , Define Sites. ( . 3.5).
. 3.4) . OK Done
Site Manager
ь
3.2.
Site Manager ( 3.5).
.
Site Files ,
. .
Site Map ,
.
Site,
Connects to remote host
, .
,
Refresh . Put Get Г ав
а а
, а в
–
. ю
Па
в
а
щ
. 3.5. Д
Site Manager : ,
,
а
а а
Site Manager
,
. Site Manager, .
,
, 17
3. У
Dreamweaver
. .
,
,
. . Edit=>Find and Replace. ( . 3.6) Find In Document –
,
,
. (Current
,
, Folder – , (Source Code –
, Entire Local Site – , Selected Files in Site – ). HTMLHTML, Text – , Text (Advanced) –
Search For
HTML, Specific Tag –
HTML). .
, ,
Replace With .
. 3.6. Д
,
Find Next , . , Find All
. , . ,
.И ,
18
Replace , .
Replace All
3.2.
( KOI8-R).
,
HTMLwindows-1251
, -
(
Dreamweaver ,
,
). HTML (Source Code) (Entire Local Site). “windows-1251” “KOI8-R”.
, Dreamweaver . . Internet,
“
”
, . .
,
. •
: index.html, (
• •
)
; ( (
, JavaScript,
,
images);
CSS,
•
Flash), ; ,
, •
,
; , ,
. .(
,
, , links.html, page1.html, background.gif Untitled1.htm Movie1.swf). , , HTML ( , Flash-
). ,
, Site=>Put, . (
HTML-
,
. 3.7), (
,
,
).
19
3. У
Dreamweaver
. 3.7 З
, Site=>Synchronize… ( . 3.8).
.
. 3.8. Д
,
Synchronize – ‘
’ Site) Direction
(Entire (Selected Local Files Only). : (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 20
Site Manager (
. 3.5).
ш
3.4.
. 3.9). Э
(
, ,
. 3.9. Д
я
.
Site Manager
,
. ( . .
)
, "+",
(
"–" ). . ( ,
,
,
. .), ,
. HTML . .–
. Э , . .
, ,
Dreamweaver JavaScript, Flash
.
21
4.
я
4. Реа
ац я
4.1. С
ш
ы а
а
web. ,
,
. , ,
URL
. ( ). . . ,
(
UNIX,
web.
) ,
,
,
Windows, .
, web-
.
,
. .
Internet. URL,
, . ,
, , .
URL .
,
.
.К
, URL
, .
4.2. С
ы ,
, , ,
,
. ,
File 22
, , Site Manager.
Dreamweaver web. .Э File=>New
4.2.
– (
,
. .
).
, index.html (
– index.htm).
, .
(
)
. Modify=>Page Properties…. ( . 4.1), Title. ,
–
,
,
. ,
, . .
. 4.1. Д
К : • Background Image – ( Browse…); • Background / Text –
, , , (
, ); • Links / Visited Links / Active Links – / ;
, /
23
4.
я
• Left Margin / Top Margin / Margin Width / Margin Height – ( ) (Left Top Margin Internet Explorer, Margin Width Height Netscape Navigator, ); • Document Encoding – ( 2.2.) HTML. – . Ф , HTML. , – " Internet". , , Dreamweaver. ,
View=>Visual Aids=>Frame
Borders. Frames
Objects ( ,
. 4.2). К
,
Insert=>Frames.
. 4.2. Frames
Objects
Modify=>Frameset=>Split Frame Left, Right, Up , ,
24
Down – . .
4.2.
К
HTML,
,
. Э
, ,
Frames ( Window=>Frames).
. 4.3.
.
. 4.3 –
Frames
. File=>Save Frame .
File=>Save Frame As File=>Save Frameset File=>Save All Frames .
File=>Save Frameset As. К
Frames
Alt . (
Properties . 4.4).
,
, .
я
. 4.4.
Frame Name • Src –
. К
, ,
: ,
;
25
4.
я
• Scroll –
( : Yes –
, No –
Default – • No resize – • Borders –
, Auto –
,
,
Auto); ; (Yes – , Default – Yes). Э ; .Э ; (
, No – • Border Color –
• Margin Width / Margin Height –
,
) /
. . Frames. (
. 4.5)
: • Borders –
(Yes –
, No – • Border Width – • Border Color –
, Default – ; .
я
. 4.5.
,
–
.
,
". К
"
•
,
: (
) –
. •
(
,
); – (
•
100%).
; – . (
26
);
. ,
4.2.
). Ф
,
. , ( . 4.5) . Units (Pixels – ).
, , , Percent –
, Relative – Value.
4.3. С ,
,
,
,
web-
. "
Internet-
".
Navigation Bar,
. Э , .
Images=>Navigation
(
Bar.
.
Insert=>Interactive 4.6)
, . , . Nav Bar Elements. , . . , , : • Element Name – • Up Image –
; ,
• Over Image –
; ,
• Down Image –
; ,
• Over While Down Image –
; ,
;
27
4.
я
• When Clicked, Go To URL –
Internet-
,
.
. 4.6. Д
я
Navigation Bar
Preload Images,
HTML-
Ф
. Show “Down Image” Initially HTML-
.
, ,
Up. Down. Insert
, (
).
Use Tables, . , , .
28
,
4.4.
4.4. П
ш . Dreamweaver (Library). К Dreamweaver
(Templates) ,
, , .
,
, .
,
,
,
,
,
, .
,
Dreamweaver .
, , ,
, ,
. . HTML-
, .
(
, , File=>Save as Template. , Save As).
, . 4.7) (
Site),
. 4.7. Д
(
я
.
,
,
,
,
“
”,
. ,
, .
, 29
я
4.
(editable region) Modify=>Templates=>New Editable Region. ( . 4.8)
. ,
,
. .
. 4.8. Д
я
Dreamweaver , ,
,
,
,
.
HTML-
:
HTMLDreamweaver
, . .
, HTML-
.
. Modify=>Templates=>Remove Editable Region. ( . 4.9), , .
. 4.9. Д
30
я
4.4.
К
, .
, , ,
. File=>New From
Template. Select Template ( Ф
. 4.10)
(Templates), Update Page when Template Changes ,
. Э
.
.
. 4.10. Д
я
, .
HTML-
HTML-
.
,
,
,
.
,
, . .
. Э Modify=>Templates=>Detach from Template. Dreamweaver ,
. .
(
, , Dreamweaver
). ,
. ,
, Attached Template. , Dreamweaver
Modify=>Templates=>Open Dreamweaver . Templates , . 31
я
4.
. Э
, ,
. ,
Modify=>Templates=>Update Pages.
. 4.11. Д
я
Update Pages ( : ,
Site), Use…). (
,
. 4.11)
, (Entire (Files That
Look in
. 4.12).
. 4.12.
. , , Modify=>Templates=>Update Current Page. , 32
.
4.4.
, ,
, -
.
. Modify=>Templates=>Apply Template to Page. Template , . Dreamweaver , . Templates (
Select
. 4.13).
. 4.13.
Templates
Dreamweaver
, , ,
,
.
4.5. П
э ,
(Library). Macromedia ,
. ,
( ),
,
,
. . 33
я
4.
, . Library ( . 4.14). HTML,
Library. Modify=>Library=>Add Object to
Library. . Э
Library .
. 4.14.
Library (Б
)
. ,
, .
Э
. .
. Detach from Original, ,
, .
“
” .
34
5.1. Э
5. Ф
а а ь
е
а
е HTML-
а
е
:
е
HTML , .
,
:
.
HTML,
,
. (
,
,
HTML-
, )
, (CSS – Cascading Style Sheets). HTML Dreamweaver.
5.1. Э .
,
, ,
–
: (
)
.
–
HTML
(
).
. . , . . : , . HTML ).
Enter.
( : . align ( . В
(
). . .
(
). , .
,
, ,
, , . ,
HTML-
, ,
( ). 35
5. Ф
HTML-
:
-
,
.
,
, .
Dreamweaver.
,
, ,
Enter.
HTML< >. Shift+Enter. ,
. Insert=>Special Characters=>Line Break. ,
. . ,
(
,
. 5.1). Window=>Properties. Text=>Paragraph ,
, ,
( Paragraph Format
Format
) .
. 5.1.
, Format. HTML ( (
: Paragraph – < >), Heading 1…6 – …), Preformatted ( ) None –
. Э Format.
– Text=>Paragraph
(
ID (
CLASS). Э ( ) , .
)
, . Dreamweaver , (
36
CSS ).
5.1. Э
, • • • • • • • • • •
:
– – – – – – – – – – , Dreamweaver, Text=>Style,
; ; ; ,
; ; ; ,
; ; ; .
.
5.2. В , . . Э
,
CSS, ,
.
,
. (
. 5.1).
,
Font.
,
Default Font
. ,
.Э
,
,
,
,
. . ,
,
.
(
)
, Edit Font List…,
.
,
Font Size ( Text=>Size Change
Size , 3).
"
Text=>Font. Text=>Size ). 1 7 ( " 20% 37
5. Ф
HTML-
:
. +7 -7.
7
1,
.
HTML ,
( CSS). Text Color ,
HTML#RRGGBB,
RR, GG
. ,
#
BB –
, (
00 .
“ 216
”
FF).
я webMacintosh
.
,
PC.
, . “ “
.Э
”, ” .
,
Default Color ,
. Bold /
Italic . Text=>Style
.
Style
Left .
Right Center Text=>Align
,
, .
Align
5.3. С . . ( (
HTML
. 5.1)
Dreamweaver ), URL ,
Link .
(
), Browse for File, .
, ,
.
, ( Э 38
, • _blank –
,
URL http://fio.ifmo.ru/index.html). , :
, Target . ;
5.3.
• _parent – • _self – • _top –
; ,
; ,
. ( _self). ( . .
, ),
.
Target
,
, .
, . ,
– я . Э Insert=>Invisible Tags=>Named Anchor Named Anchor Invisibles (
. 5.2. В
я
(
. , Insert . 5.2).
я
. 5.3)
Anchor Name
, .
Link #
( ,
, filename.html#part1). ( , #part1).
. 5.3. Д
я
. Email Link Insert=>Email Link.
я
я
Insert (
. 5.4)
39
5. Ф
HTML-
:
. 5.4. В
( ,
. 5.5)
Text E-Mail –
,
,
.
. 5.5. Д
я
я .
5.4. С HTML •
.
:
•
(
) –
(
) –
;
•
; ( Э
/
) –
.
). , :
.
,
. Dreamweaver ( . 5.6). Text=>List: Unordered – , Definition List –
40
.
, Ordered – .
5.4
–
Enter, .
Enter
. 5.6. К
я
я
– , ,
.
5.5. С HTML .
,
– ,
web-
.
, HTML. HTML,
– ,
( ,
)
,
,
,
. HTML
,
Dreamweaver –
,
. .
HTML ,
.
. 5.7. В
, Insert Table Insert=>Table.
. (
. 5.7). Insert Table ( . ,
Columns
. 5.8), Rows Width –
( 41
5. Ф
HTML-
).
:
Border . Cell Padding ( 1 (
.
, ),
Cell Spacing – 2 ).
. 5.8. Д
,
,
.
,
: ,
, .
,
, , .
Modify=>Table=>Select Table. 5.9. (Rows Cols), (CellPad CellSpace)
(W (Border).
H),
, (Align),
(Bg Color
Brdr Color),
(Bg Image).
. 5.9.
, ,
. , . (
Clear Row Heights 42
Clear Column Widths
, , . 4.9).
5.5.
. Table Widths to Percent
Convert Table Widths to Pixels
Convert
. ,
–
. (
( (Bg Bg.
Brdr , (
H
),
Horz
).
W ), Vert
. 5.10.
Merge . Split Cell… Merge Cells Table . Split Cell ( . 5.11), (Rows) (Columns)
. 5.10).
я
Split ,
, Modify=>Table
.
яя
. 5.11.
. ,
,
Modify=>Table
.
Table
Delete Row , ,
Delete Column , .
.
Delete. 43
5. Ф
HTML-
:
Insert Row Insert Column ( ). , ( – (Number of …). Selection)
. 5.12) (
(Below the Selection)
Insert Rows or Columns … , Insert) – (Above the .
. 5.12.
Dreamweaver . , Microsoft Excel)
(
, (
,
. .),
, HTML-
.
. 5.13. В
. Insert Tabular Data Insert=>Tabular Data. ( . 5.14) ( Data File). , . , ( , , Table Width : Fit to Data – , Set – 44
, (
Dreamweaver . 5.13)
Delimiters Other, ).
,
5.5.
.
Format Top Row : No , Italic –
Formatting –
, Bold – Bold Italic – Cell Padding, Cell Spacing Border .
. ,
. 5.14.
5.6. С
CSS
К
ц
web-
(CSS, Cascade Style Sheet) web. , . CSS . , CSS web,
.
. , : е е т
{
ав
:
аче
е;
ав
аче
:
е; …}
, . . , .
, –
,
(
, 45
5. Ф
HTML-
,
:
,
. .).
/
,
. sans-serif
14
. 1Verdana
,
.
H1 { font-size: 12pt; font-face: Verdana, sans-serif; color: red; } Dreamweaver ( . 5.15).
CSS
Styles
Window=>CSS .
Show CSS Styles
. 5.15.
CSS
Dreamweaver • ,
: HTML (
•
); . , , Microsoft Word).
(
– •
.
; New
. New Style
Style…
,
. ( –
. 5.16) Type. Make Custom Style (Class)
, .
Name (CLASS)
. . Redefine HTML Tag
46
, ,
5.6.
CSS
, Tag. Use CSS Selector . (ID).
Selector , , . (CLASS ).
. 5.16. Д
я
я
– Define In.
New Style Sheet File , (
-
, ).
. Э
, .
(This
Document
Only) ( ,
,
). ,
. ,
(
,
. 5.17).
Category ,
.
-
, . .
Type .
Font .
Size , (
– points).
– pixels ,
47
5. Ф
HTML-
:
.
. 5.17. Д
я
я
: , oblique –
Style normal –
( .
), italic – Line Height – (underline), (line-through),
overline),
.
Decoration ( (blink).
, None
. (
underline), . ,
,
(*),
Dreamweaver, . Weight
(
small-caps).
,
,
.
Varint
Case (capitalize – , uppercase –
, lowercase –
). .
Color "
"
Background Color 48
Background . ( Background Image
, ).
5.6.
CSS
.
, (repeat –
Repeat
).
, repeat-x – , no-repeat –
, repeat-у – Attachment Horizontal Position
,
( , scroll) Vertical Position
(fixed). ,
. Block . . Letter Spacing . Vertical Alignment . Text Align . Text Indent . Whitespace , ,
HTML ( ); nowrap – ,
. , Box . (**) Border . List Positioning . Internet Explorer. Extensions . , . . , ,
Word Spacing
, : normal – ; pre –
, .
. , , , , (none). . .
Attach Style Sheet . Edit Style Sheet…, ( . 5.18) 49
5. Ф
HTML-
:
. 5.18. Д
я
, ,
. .
Link… ( .
. 5.19)
File/URL Link, Import,
Add As .
.
. 5.19. Д
я
я
( Edit
New ( (
. 5.16).
. 5.17).
, (
. 5.18), .
Duplicate…
. Remove. Delete Style.
50
. 5.18)
5.7. И
5.7. И
HTML
HTML , web-
,
, . ,
webWindows.
Dreamweaver (
).
,
, ( (
). ,
, Copy
Edit,
Windows.
Ctrl+C). Dreamweaver, (Edit=>Paste
Ctrl+V). HTML. .).
(
(
,
,
,
. .). ,
HTML ( , , . .). Microsoft Word. Word HTML. , webFile=>Save as HTML… (
, ,
. Word 97).
, HTML-
,
, .
, ,
Microsoft, . Word 2000 ( 3-5
HTMLHTML). HTML-
"
, Word. Dreamweaver Microsoft Word HTML. File=>Import=>Import Word HTML . " HTML, Word. , Word.
, ,
51
5. Ф
HTML-
:
. 5.20. Д
"
" HTML
Word
,
Microsoft
Word, (
,
). Clean Up HTML from.
, Remove all Word Specific Markup HTML, Word. Detailed . Clean up CSS CSS, Word, -CSS . Clean up Tags , HTML. Set Background Color . Word , . Apply Source Formatting , . Show Log on Completion, , . . .
52
6.1. И
6. В
хэ
6.1. И
ч ,
HTML, . (
Insert Image Insert=>Image. (
GIF, JPEG
,
, . 6.1) PNG).
, , (
).
. 6.1. В
( ),
(
. 6.2).
. 6.2.
W
H
. (
),
W
H
. ,
.
,
, (
W
Reset Size. Src
: Browse for File
.
H)
, Align
. :
53
6. В
• Browser Default –
• Baseline
(
Bottom –
Baseline, ); )
(
• Top –
;
• Middle – • Text Top –
; ;
• Absolute Middle – ; • Absolute Bottom –
;
“
• Left –
”
; , .
• Right –
,
; , . ,
. V Space (
).
, H Space .
Link .
, .
Border (
0,
).
Alt
, .
, .
Dreamweaver KOI-8R .
,
4 altWindows-1251. Edit
,
Dreamweaver.
6.2. С . ,
– 54
(hotspot). ,
(
).
Dreamweaver .
6.2.
. ( Map Target
Link
6.3). , ,
,
. Alt –
,
. . , .
. 6.3.
: . – . .
.
Pointer Hotspot Tool
.
6.3. В , ,
Rollover Image. Insert=>Interactive
Images=>Rollover Image.
. 6.4. Д
Rollover Image
( Image –
. 6.4)
, : Original , Rollover Image – 55
6. В
,
, . (Image Name)
. , . HTML-
Preload Rollover Image, -
. , Internet-
Clicked, Go To URL
When
.
6.4. О HTML.
,
, . JavaScript. JavaScript HTML.
HTML,
, HTMLBehaviors
HTML, Dreamweaver
.
,
,
. Behaviors Window=>Behaviors HTML-
(
. 6.5. В
. 6.5).
Behaviors
, ,
Behaviors (
. 6.6)
,
(Actions) (Events).
, ,
Behaviors (
56
. 6.6). ,
HTML.
.
6.4.
, –
,
. .
. 6.6.
6.1.
, ,
6.2.
. 6.1
JavaScript
Call JavaScript Change Property Check Browser Check Plugin Drag Layer Go to URL Open Browser Window
Plugin
WebInternet-
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
HTMLHTML-
/
,
57
6. В 6.2
ы
я HTML-
onLoad onAbort onError onUnload ы
я
onResize onMove onScroll OnHelp
Help ы
я
OnKeyDown OnKeyUp OnKeyPress ы
я
ыш
OnClick OnDblClick OnMouseDown OnMouseUp OnMouseMove OnMouseOut OnMouseOver ы
я
я Reset
OnReset OnSubmit OnBlur OnFocus OnChange OnSelect Д
э
Э Э
Submit
Go To URL , Go To URL. , 6.7.
58
6.4.
. 6.7. Д
Go To URL
(
Open In Internet-
Main Window), , Д
,
URL.
Open Browser Window Open Browser Window
, Internet-
. 6.8.
. 6.8. Д
Open Browser Window
Internet-
URL to Display
( Window Width
Browse...).
, Window Height
. Attributes Toolbar), Bar). Ф
(Navigation Toolbar), (Menu Bar), (Scrollbar as Needed), Resize Handles . Windows Name .
(Location (Status
59
6. В
Д
Play Sound Play Sound (
. Play Sound
. 6.9)
. Browse...
. 6.9. Д
Д
Play Sound
Popup Message Popup Message.
. 6.10. Д
Popup Message
(
. 6.10)
,
Message . 6.5. В
FlashHTML-
Button
FlashInsert=>Interactive Images=>Flash
Insert Flash Button FlashStyle
Dreamweaver
, .
,
(
Button Text, Dreamweaver
). Font 60
Size
.
(
. . 6.11).
6.5. В
,
Flash-
.Ц
URL
Link
Bg Color.
. 6.11. Д
Flash-
,
,
,
Save As.
. 6.12.
Flash-
HTML-
Flash.
Edit , Text (
Insert Flash Text Flash.
. , Flash-
( . 6.12). Insert=>Interactive Images=>Flash ),
HTML-
61
6. В
,
web,
Macromedia: – Flash (
);
– Fireworks (
GIF, JPEG, PNG);
– Shockwave (
);
– Generator (
);
– Authorware (
).
6.6. И
ч Internet-
,
, . ,
,
,
, – . , .
, . HTML
. HTML,
.
. , юч
х
,
(plug-ins). Э
HTMLGIF
JPEG,
. : (
(
)
,
). .
HTML-
,
, . , , Flash-
62
,
6.6. И
VRML.
, , 6.3 Ф
6.3.
, (plug-ins)
А Ф
ы *.swf
ы Flash Player (Macromedia)
ы *.pdf *.doc, *.rtf
Acrobat Reader (Adobe) Word Viewer (Microsoft)
А
*.rpm *.aam, *.dir *.mp3, *.wav, *.mid *.mpeg, *.wav, *.mid, *.png, *.tiff, *.bmp, *.avi
я
ы RealPlayer (RealNetworks) Shockwave (Macromedia) Winamp MP3 Player (Nullsoft) QuickTime (Apple)
П *.pqf *.ppz, *.ppt, *.pps, *.pot ы *.vrml *.tar, *.gz, *.arj, *.zip, *.lha, *.taz HTML-
Corel Presentations Show It! (Corel) PowerPoint (Microsoft) ы я Cosmo Player (Silicon Graphics) Cortona (ParallelGraphics) Netzip Classic (RealNetworks)
Dreamweaver
HTML.
,
Insert=>Media=>Plugin.
63
7.
Macromedia CourseBuilder
7. С а в х а а Macromedia CourseBuilder JavaScriptHTMLHTML-
ва
Macromedia CourseBuilder Macromedia Dreamweaver
. “ Internet7.1. В
” а
а
CourseBuilder
, HTMLInteraction
CourseBuilder Insert=>CourseBuilder ( . 7.1).
,
. 7.1. В
CourseBuilder
CourseBuilder
HTMLCourseBuilder
.
About CourseBuilder, . .
CourseBuilder HTML-
,
. Ч ,
CourseBuilder,
,
, (
64
,
test).
7.1. В
CourseBuilder
CourseBuilder JavaScript. CourseBuilder ( . 7.2).
. 7.2. Д
OK , CourseBuilder CourseBuilder ( . 7.3),
: .
. 7.3. Д
CourseBuilder
“ ,
” ,
,
. 65
7.
Macromedia CourseBuilder
, , JavaScript-
. CourseBuilder Category
, •
• • • •
• • •
HTML-
Gallery.
. :
Multiple-choice Interactions –
, ; ,
Drag-and-drop Interactions – ; Explore Interactions – Button Interactions – Text entry Interactions –
; -
; , ;
Timer Interactions – Slider Interactions – Action Manager Interactions –
; ; .
CourseBuilder .
,
HTML-
, . CourseBuilder. 7.2. С
а
а а
я
а CourseBuilder
Multiple Choice. ,
Э
,
MultCh_ImageChkboxes (
. 7.4).
General, Choices, Action Mgr. ,
,
General ( (Interaction Name) CourseBuilder Ф
. 7.5). ,
. Э
,
. Question Text, .
66
я
7.2.
. 7.4. Д
CourseBuilder (
Gallery)
. 7.5. Д
CourseBuilder (
General)
,
Judge Interaction . ,
67
7.
Macromedia CourseBuilder
.
( (
“Submit”)
,“
”). ,
, .
, ,
.
Э
Correct When .
All Correct
and None Incorrect, ,
, Any
. Correct and None Incorrect, , ,
. ,
, .
Ф
,
Knowledge Track ,
А
(
Web-
, Lotus Pathware). , . (Unlimited). Tries Are
, Limited To, ( , 3). А . Limited To, ( , 180).
,
Time Is
, , Ф
. “
Reset
”
. . Layer,
“
”
.
Э
,
Choices (
. К JavaScript. Choices ,
68
. 7.6) (Name),
, –
.
я
7.2.
–
Add Delete, Up Down.
(
Choices, Text) Image File).
( Text,
Image File, ,
.
Place before text , , . Э
. , ,
Appearance .
Choice Is (Correct) (Incorrect). Not Judged, К (
, .
), . .
Score , ,
2.5, 5.
. 7.6. Д
CourseBuilder (
Choices)
69
7.
Macromedia CourseBuilder
, , Action Mgr (
, Action Mgr
. 7.7).
.
. 7.7. Д
Correctness),
CourseBuilder (
(Segment: (Segment: Check Tries) , Expand
(Segment: Check Time). Э .
Collapse
Action Mgr)
. К
,
Cut, Copy .
Paste
Add ,
.А
Edit...
Rename… .
, Action
Manager CourseBuilder. CourseBuilder .
, (Popup Message).
,
. Popup Message
70
я
7.2.
.
, Correctness
if Correct,
Popup Message : “Correct”. Popup Message Message “
“Correct” .А
” ,
Response” “
”, “
, , else if Unknown Response. Popup Message ”
Incorrect.
Edit…
else if ”, “Unknown
“
“
!”
. 7.8.
,
“ ,
OK. 7.8,
–
”
CourseBuilder 7.9.
. 7.9.
71
7.
Macromedia CourseBuilder
. (
,
. 7.8). Э
CourseBuilder.
Dreamweaver CourseBuilder, . (
Edit…
. 7.10. В
7.3. С
а
Properties
а а
я
. 7.10).
CourseBuilder
я
CourseBuilder
Text Entry ( ,
. 7.11). CourseBuilder,
(
). Э
General, Responses, Action Mgr.
. 7.11. Д
General (
CourseBuilder (
. 7.12) . Initial Text.
, 72
Gallery)
Question Text
я
7.3.
.
, .
.
.
, ”. Ф
, Initial Text
:“
.
. 7.12. Д
. 7.13. Д
CourseBuilder (
CourseBuilder (
General)
Responses)
73
7.
Macromedia CourseBuilder
Responses (
. 7.13)
.
.К JavaScript, . Possible Responses –
(Name), ,
.
, Delete.
Add
, Possible Responses, ( Must
Contain). Ф
case sensitive , ,
exact match required , ,
, , .
,
Match Is , (Incorrect)
(Correct), (Not Judged). CourseBuilder
, . Э
,
,
Any Other Response Is, : Correct ( ), Incorrect ( )
Not Judged ( ).
К (
Score ), .
7.4. С
а
а а
я
я
а
а ,
CourseBuilder CourseBuilder
(
.
(Drag-and-drop Interactions). Category Drag-and-drop. , .
7.14)
. Э General, Elements, Pairs, Action Mgr. General ( General 74
. 7.15) . ,
7.4.
Reaction.
я
я
Snap back if incorrect, .
. 7.14. Д
CourseBuilder (
Gallery)
. 7.15. Д
CourseBuilder (
General)
75
7.
Macromedia CourseBuilder
, . Ф
Snap back if not
,
dropped on target
. .
. 7.16. Д
CourseBuilder (
Ф
Elements)
, ,
. Elements ( .
. 7.16) Elements. Add (Name),
Delete. К JavaScript-
,
. . , Target –
,
Elements, (Element Is): Drag – Drag and Target,
( ). ,
-
,
(Image File) . , “ CourseBuilder
Browse... . 76
” ,
я
7.4.
я
,
Image File
.
. 7.17. Д
CourseBuilder (
Pairs (
Pairs)
. 7.17) . Add
,
Delete, , . Pairs,
.
. К Choice Is
Correct, ,
,
,–
Incorrect,
Not Judged,
. Pairs .
, .
Snap If Within ,
CourseBilder
,
75
,
. .
. ,
, . 77
7.
Macromedia CourseBuilder
Snap To , . . .Ч
, , (Left, Right, Top, Bottom) ,
,
,
. , (
. 7.18).
я
. 7.18.
, . ,
78
(
. 7.19).
я
7.4.
я
я
. 7.19.
,
, .
7.5. С
а
а
а а
я
а
а
а
(Drag-and-drop Interactions).
. 7.20.
79
7.
Macromedia CourseBuilder
, ( 7.6. С
а
а .
. 7.20)
. .
а а CourseBuilder . –
web-
. . К . . Go To URL (
Internet). ActionMgr CourseBuilder Go To URL.
Interaction , (
, . 7.21) ,
Add. , OK.
. 7.21. В
80
URL
я Go To URL
7.6.
.
, (
HTML-
JavaScript
). : ,
,
. , ,
.
–
.
, Layer
, (
, General.
.Ч . 7.22)
Vis
hidden.
я
. 7.22
. 7.23 В
я Show-Hide Layers
, .
,
, , 81
7.
Macromedia CourseBuilder
.
, , Hide ( – 7.7. О
а
а
я
Show-Hide Layers ( / ( . 7.23) Named Layers . ( . . ). Show ( а
а
).
), ).
а
, , . Multiple Choice – Responses;
Choices; Drag-and-Drop –
CourseBuilder. Manager ( . 7.24).
Category
. 7.24. Д
, , Score ( Text Entry – Pairs).
– Action
CourseBuilder (
Gallery)
General (
. 7.25) . when the user clicks a button labeled, ( , “ ”). . 82
HTML-
я
7.7.
, Mgr.
-
,
. Segment
. 7.25. Д
. 7.26. Д
Segment Name OK. А .
Action
CourseBuilder (
я
Add.
General)
я
Segment Editor ( . 7.26) ( , “Segment : Result”) , Popup Message ( . 7.27) Message
Add. . 83
7.
Macromedia CourseBuilder
,
, 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.
G02, G03, G04
{ }. G01, CourseBuilder,
G05 – ,
HTML-
. , ( ). G04.score
, G01.score, G05.score – .
,
CourseBuilder , . G02.score, G03.score, ,
я
. 7.28.
“ , 7.28.
84
”
К а
П
. К а ая р к • c • • ( К
ра
к
а
а
ая
а а
а
а я ы а HTML
я ы а HTML
а HTML HTML
:
,
HTML; );
( ,
).
,
. . , . , –
. ).
( ,
HTML:
HTML
З
HTML
,
, . я ыка HTML
– href.
Internet-
, ,
name .
.
title .
,
85
П
, Э . " " "Ф ", "HTTP", "URI".
, "GmbH", "M.", "Inc.", "etc.", "WWW", ,
, ,
, .
title .
. К
-
,
: , 197101, . , .14
. . (rect – ),
coord –
(
,
. URL
href shape , circle – ) .
, poly –
.
86
К а
ая
HTML
а а
, ,
а я ы а HTML
,
. .
URL. URL. URL
href .
.
. . . .
:
. .
text bgcolor background . link,
alink
vlink
, .
. ,
,
.
87
П
Э ,
, ,
.К name
. .
. ,
value
,
(submit – web-
,
JavaScript).
type
; reset – ; button –
.
.
.
88
:
К а
ая
а а
а я ы а HTML
( ). ), span align
)
( (
, .
,
. ,
valign – (
. ,
)
,
width.
. Э CSS
HTML.
().
,
.
, . ,
lang
. .
align
.
,
(
)
().
:
89
П
,
().
.
.
, ,
size
color. ( 1
size 3) face
7, .
( ).
.
.
HTML-
, .
URL method
action ,
HTTP (get
, .
post)
. HTML-
, name. (
1
). ( ). . 90
; no – noresize
bordercolor. yes ; auto –
src
. frameborder yes , 0 , scrolling ,
no
К а
ая
а а
а я ы а HTML
.
(
1
6).
align
. З З З
123-
. . .
.
. . .
.
91
П
HTML-
.
.
. width
. . . .
src height , align . (
alt )
,
,
border. .
usemap
, type: • button – • checkbox
; –
( ,
"
"
"
",
• file –
);
; • hidden –
,
( ,
• image –
, submit;
92
);
К а
• password –
ая
а а
– ,
• radio –
• submit
(
,
),
; -
• reset –
а я ы а HTML
,
checkbox
(
,
);
,
( -
–
);
,
• text – name
,
, ;
. ,
value
.
: 1 2
Ф : 1 2 3
Ф :
93
П
, (
).
.
.
К
.
for : .
id
).
Э
.
,
). Э
< >, ( .
. ,
name .
. ,
content .
name
.
94
.
К а
ая
а а
а я ы а HTML
,
,
.
web-
(
Flash,
, classid
. .). (
URL, ).
data .
URL, .
codebase,
height
width
.
,
start , :1–
(
1. ,A– ,i–
,I – ).
,а–
95
П
( ).
.
label
( selected
).
.
value
,
.
), center ( ).
left ), justify (
), right (
left.
.
.
, , .
.
. .
, ,
. ., .
96
К а
ая
а а
а я ы а HTML
: Hello!
. Э
. , multiple .
name . .К
1(
size ),
multiple ,
1 –
.
Э 1 Э 2 Э 3
.
.
, . ,
lang
. .
.
97
П
,
,
,
.
.
, .
, .
.
height
). ) ) 98
(
border .
.
width ( border =0 (
cellpadding ,
cellspacing –
К а
ая
а а
а я ы а HTML
. Ц bgcolor,
background.
З
З 1 З 2 З 1 1 2 3 4 5
. ,
.
width align
. .
bgcolor ,
colspan ,
height valign
. rowspan –
.
.
,
, . ,
name ,
rows
.
cols
. 99
П
. . ,
К ,
.
HTML
. .
З
. ( ).
Ф
,
( ).
.
,
.
type
. 100
К а
ая
а а
а я ы а HTML
: x=7
101
Ли ера
Ли ера “
ра
ра .Н ”, 2000, 448 . ., Х . HTML 3.2
Web.
. : BHV-
.:
, 1998,
1040 . . И .Э 2000, 528 .
HTML. . . .
: .
, 2000, 240 . , :
. . Macromedia Dreamweaver 3.
:
Х -
“
”, , 2001,
432 . . . Macromedia Dreamweaver 4. : Х , 2001, 560 . ., ., . Dreamweaver 3: . : , 2000, 320 . ., ., . Dreamveaver 4: . : , 2000, 352 . .В . : , 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 . Х . Dynamic HTML: . .: ь BHV, 2000, 400 . Э. Web: . : “ ”, 2001, 320 .
101
Ф
р ц яИ т р
тО р
2000
я
– « И
И
« » .ru» -
« «
» . . Ц
.ru» – . 2000 – 2004 .
.
50
«
300000
.ru»?
2000
«
.ru».
– .
И
50
-
,
, И
-
.
И
,
10
. я
я
? ,
, .
,
,
. я
И
я
я? , ,
, . я ,
я?
И
–
.
. –
–
. «
.ru» – ,
. ЮК
? .
– .
,
, .
Д я
Ф
я
я? «
И 2000
.ru» ,
. Ц
И
: , .
( И ) –
,
И
–
-
. яФ ,
-
. « И
–
. Ц
И
. 2,5–3
-
И
И -
И
.ru»
"
.
"
,
40
.
И
.
«
И -
И
»–
1000 .
Ц
4
2000
, – .
И -
(
( Ц
И
)
.
И
),
,
,
И
.
500 .
. .
х
х
ч ч
ч ч
HTML-
Уч
.
Ц 197101,
-
Dreamweaver
ч
№ 00408 05.11.1999 22.10.2001 . 300
.Ф.
.
№
, , , : (812) 233-46-69 Ф
, 14 : (812) 232-76-22