Web Design Book

Web Design
Book

. ,
,
.
.

3
(Photoshop, Corel Draw, Pagemaker)
Web Design- .
, , CD-ROM- .
,
,
.
,
,
.
.
.
,
, .
.
. , ,
,
.
.
.
.

,
,
.

Mouse () -
- 01
?
- 02
- 04
- 05
HTML-2
HTML-3
- 07
- 08
- 10

- 13

- 03
Internet Explore
HTML-1
- 06
Dreamweaver ?
- 09
Dreamweaver
.
- 11
- 12
- 14
Link ()
- 15
Hotspot, Anchor
Rollover Image
- 16
Frame-
- 17
- 18
Animation GIF ( )
Upload ( )
Mouse () -
......Click
......Double
Click
......
Click
....Drag
.....Press
Mouse () - .
- 01
1. ?
.

.
.
.
.
. :
-
-
- ,

- .
2. ?
.
.
- 02
Internet Explore
Internet Explore
...
1. Internet Explore
2. Internet Explore
kimi-Lessons /web design / WD-Lesson02-Internet
index.html- .
File>Open...
- !
- 03
HTML-1
1. HTML ?
HTML .
Note pad .
2. Notepad
[Start] -[Programs] -[Accessories]-Notepad- .
Notepad .
3. HTML -
Note pad .
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
<...></...> Tag .
<HTML> .... </HTML>
HTML- . .
<HEAD> .... </HEAD>
.
<HTML>
<HEAD>
<TITLE>HTML Web Page</TITLE>
</HEAD>
<BODY>
Welcome to HTML Web Page!
</BODY>
</HTML>
<TITLE> .... </TITLE> .

 .... 
File>Save As...
OOO.html
4. HTML - Internet Explore .

Internet Explore File>Open...
.
- 04
HTML-2
1. .
<HTML>
<HEAD>
</HEAD>
<BODY>
Welcome to HTML Web Page!
Welcome to HTML Web Page!
Welcome to HTML Web Page!
</BODY>
</HTML>
....
....
Notepad
(OOO.html .)
Internet Explore .
2. .
<HTML>
<HEAD>
</HEAD>
<BODY>
Text size change 
Text size change 2
Text color change 
Text color change 2
Text font and size change 
Text strong 
Text EM 
</BODY>
</HTML>
....
....
....
....
....
....
---Bold
---Italic
---Underline
3. .
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD> . </TD>
<TD> </TD> </TR>
<TR>
<TD> 2- . </TD>
<TD> 2- 2- </TD> </TR>
</TABLE>
</BODY>
</HTML>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

------- .
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
<TABLE border="">
<TABLE width=" ">
<TABLE height=" ">
<TABLE bgcolor=" ">
<TD bgcolor=" ">
10
- 05
HTML-3
1. .
<HTML>
<HEAD>
<TITLE>Modern Art in Mongolia</TITLE>
</HEAD>
<BODY bgcolor="red">
Modern Art in Mongolia 
<IMG src="art1.jpg">
<HR size="4">
</BODY>
</HTML>
<BODY bgcolor=" ">
<IMG src=" ">
..
<HR size=" ">
File>Save As...
top.html
kimi-Lessons/ Web Design/ WD-Lesson05-HTML3
.
top.html
2. Link () .
.
<HTML>
<HEAD>
</HEAD>
<BODY background="stone.gif">
<HR size="4">
<HR size="4">
<A href="top.html">Back</A>
</BODY>
</HTML>
<BODY background=" "> .

<A href=" ">
File>Save As...
Click .
page-2.html .
11
File>Open... top.html
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="red">
Modern Art in Mongolia 
<HR size="4">
<A href="page-2.html">Enter</A>
</BODY>
</HTML>
<A href="page-2.html">Enter</A>
- .
top.html
Enter -
page-2.html .
Back -
top.html - .
12
- 06
Dreamweaver ?
1.Dreamweaver ?
Dreamweaver .
HTML- . .
2.Dreamweaver
[Start] -[Programs] -[Macromedia Dreamweaver4]- Dreamweaver4 .
3. -
Tool Bar
Object Panel
Document Window
Launcher Bar
Tag selecter
Property Inspector
13
4.
5.Object Panel
Click
Character
File>Open...
Visit Mongolia - Ulaanbaatar Tour.htm
Common
HTML-view
Forms
Frames
Head
Invisible
Special
HTML-view Design
5.Property Inspector
Design
Click
14
- 07
1.

. .
index(top)
news
info
mail
index(top)
link
news
1) (Web site) Image

. ,
,
.
info
mail
2)
.
2.
1) :
-
-
-
-
- ()

.

.
3.
,
, ,
.
Photoshop
.
Dreamweaver .
15
link
4. Local Site ( )-
Dreamweaver Site
.
5.

. index .
link () .
6.@y[WCAEg
6.
,
, , , .
7. Link ()
Link () .
8. Flash, , JavaScript-
Flash, , JavaScript- .
9.
.
- . (Internet Explore, Netscape Navigator...)
- , .
(Internet Explore, Netscape Navigator...)
- Windows Macintosh 2 .
10. Upload ( )
.
.
11.
.
.
16
- 08
Dreamweaver .
Modern Art in Mongolia

Dreamweaver .
1. Folder ()- .
Windows Explore- .
Kimi-Lesson/ Web Design/

WD-Lesson08-Modern Art/ .
Kimi-Lesson/ My Works/ .
5
Copy- .
File>New>Folder
.
Kimi-Lesson/ My Works/
Paste .
17
Windows Explore- .
2. Dreamweaver- .
OK- .
3. Local Site ( )-
Site>New Site... Site name

Local Root Folder -
.
OK- .
Local Site-
.
HTML
.
Site .
18
4.
7. .
File>Save As... top-page.html

.
- Click
art1.jpg .
5.Page Property-
Modify>Page Properties...
Title Background .
Enter- .
6.Word .
Modern Art in Mongolia
Font size : 6
8.
Enter- .
19
- . H=6 ()
9.Enter .
13.Modify>Page Properties...
Title
Background Image . stone.gif
10.File>Save
11. .
File>New...
14.
- .
art2.jpg, art3.jpg
15.Back .
12.File>Save As...
next-page.html
20
16.Link .
19.File>Save
Back
Link -
top-page.html .
20.Internet Explore .
F12
Internet Explore
.
17.File>Save
18.top-page.html Enter-
Link -
next-page.html .
21
- 09
1. Folder ()- .
Windows Explore- .
2.Dreamweaver SITE () -
Site>New Site...
Site name
Local Root Folder -
Folder .
File>New>Folder
.
Site Window- .
3. .
File>Save As... top-text.html
Folder .
Windows Explore- .
Dreamweaver- .
22
Size- 6 .
4.Page Property-
Title
Background .
- .
Shift +Enter
:
Document Encoding-
Cylilic(windows-1251) .
.
- .
Enter
.
5. .
6. .

23
-
.
- .
- .
24
7. .
File>Save
8.Internet Explore .
F12
Internet Explore
.
25
- 10
.
JPEG,GIF
.

JPEG (.jpg)
---- .
GIF (.gif)
256 ----, .
.
1.
.
[JPEG High ()]
1) Photoshop
File>Open...
Kimi-Lesson/Web Design/ Lesson10-Jpeg-Gif/
balloons.tif
JPEG-
JPEG-
JPEG-
;
JPEG-High
:
60 .
33.61KB
[JPEG Medium ( )]
[400*300 pixel 267KB]
2) File>Save for web...

Settings-
[JPEG High] .
:16.81KB
26
;
30 .
[JPEG Low ()]
2.Corel Draw

.
1) Corel Draw
File>Open...
Kimi-Lesson/Web Design/Lesson10-Jpeg-Gif/
Miat-logo.cdr
:10.68KB
;
10 .

.
.

.
.
?
.

OK-
.
2) File>Export...
File of type- EPS
[Selected only]( ) .
27
Export-
( Resolution 72dpi)
Ok- .
3) Photoshop .
File>Open...
OK- .
2) File>Save for web...

Settings-
[GIF 32 Ditherd] .
[Transparency]-
.
Resolution : 72 Pixel/inch (dpi- )

OK- .
Image>Adjust>Hue/Saturation
.
28
GIF-
.
Photoshop .
GIF-
:
33.61KB
GIF-

GIF
.
Color Picker
[Only Web Colors]

( ) .
OK- .
.

( : #FF0000)
,
GIF- Matt: - Other...

.
Matt: -
.
29
- 11
30
3) Edit>Paste (Ctr+V)
1. Internet Explore-
.
4)
- .
1) Internet Explore- .

PrtSc .
5)
-
Delete .
2) Photoshop- .
File>New...
31
6) Layer>Flatten Image
9)
-
- Ctr+Alt+Shift
Drag .
7) Image>Canvas Size...
.
10) File>Save As...

IE-image
JPEG- .
32
IE-image.jpg
.
2. Folder ()- .
Internet Explore
.
Windows Explore- .
File>New>Folder
.
.
4.File>Import...
Kimi-Lesson / Web Design / Lesson11-Magic/
Mongol-clipart.cdr
3.Corel Draw- .
5. .
A3 .
File>Import... IE-image .
33
5.File>Import...
kharakorm.JPG
OK- .
7. -
File>Export...
EPS- .
6.Mongol-Clipart-
File>Export...
File of type- EPS

[Selected only]( ) .
8. Photoshop- .
File>Open...
.
34
Resolution : 72 Pixel/inch (dpi- )

OK-
10.File>Save for Web...

GIF 32 Ditherd -
9.
.
Matte- white OK-
.
Image>Adjust>Hue/Saturation...
10.
File>Save for Web...
GIF 32 Ditherd - .
35
11. .
12. Dreamweaver- .
SITE () -
Site>New Site...
Site name
Local Root Folder - Folder .

JPEG Medium - OK- .
Site Window- .
13. .
File>Save As... index.html
Folder .
14.Page Property-
Title :
Document Encoding-
OK- .
36
15. .
Size 4, Bold,
16. .
Enter
17. .
18.File>Save
19.F12
Internet Explore
.
37
- 12
Link ()
1. Copy .
Property
Windows Explore- .
Kimi-Lesson/Web Design/ WD-Lesson12-Link/

4 Copy
10
Paste .
about Mongol -
mongol-tuhai.html .
Link .
2.Dreamweaver 10
index.html .
File>Open
2.Link () .
Link
.
38
Link
3.Internet Explore
.
Link File>Save
Property
F12
Internet Explore
.
index.html .
File>Save
Ulaanbaatar.html, Map.html, Link.html
.
3. Link .
Link
File>Open... mongol-tuhai.html
3. Internet Explore
.
F12 .
39
- 13
40
1. Folder ()- .
Windows Explore- .
Kimi-Lesson/ My Works/
.
Kimi-Lesson/Web Design/ WD-Lesson13Table-Page/ about-mongol
Copy .
3. .
File>Save As... about-Page.html
Folder .

Paste .
4.Page Property-
Title
Document Encoding-
2. Dreamweaver- .
SITE () -
Site>New Site...
Site name
Local Root Folder - .
5. .
41
- .
- Click .
,
- : 6 .
:
6. .
Enter
.
- Click .
42
7. .
- .
Enter
- Click .

Cell Space: 0
Border : 1
.
43
- .
8.Internet Explore
.
F12 .
- .
44
- 14
Hotspot, Anchor
45
1. Copy .
3.Corel Draw .
Windows Explore- .
-
.
Kimi-Lesson/Web Design/ WD-Lesson14Hotspot/ map

Copy .

Paste .
File>Import...Kimi-Lesson/Web Design/
WD-Lesson14-Hotspot/
Mongol-map.cdr .
2.Corel Draw- .
A3 .
File>Import...Kimi-Lesson/Web Design/
WD-Lesson14-Hotspot/
IE-image .
46

File>Export.... map-title
EPS- .
4. Photoshop- .
File>Open...
.
OK- .
72 pixel/inch, RGB color OK- .

GIF 32 Ditherd - .
.
File>Export.... mon-map
EPS- .
47
Matte- Other...
5. Dreamweaver- .
Site>Open Site...
Site
.
Site>New Site... - .

. OK .
6. .
File>Save As... mon-map.html
Folder .
Folder Copy map folder

.
14.Page Property-
Title
.
.
GIF 32 Ditherd - .
:
Document Encoding-
48
Enter
.

- .
7. .

.

- .
Enter
49
8.
(Anchor)- .
Object Panel- Invisibles .
(Anchor)-

-
fubus .
TOP .
50
9. Hotspot .
.
TOP
Link #top .
- Link (Hotspot)-
.
(Anchor), , TOP
Copy (Ctrl-C) .
Link #fubus .
(Anchor)-
top .
51
, ,
(Anchor)- otgon f.

- Link (Hotspot)-
.
Link #otgon .
anchor Hotspot .
10.Internet Explore
.
F12 .
52
- 15
Rollover Image
1. .
3. .
Windows Explore- .
Corel Draw- .
File>Open...Kimi-Lesson/Web Design/
WD-Lesson15- Rollover/ step-1.cdr
Kimi-Lesson/My works/
.
File>New>Folder
- .
2. Copy .
Kimi-Lesson/Web Design/ WD-Lesson15Rollover/ 5
Copy .
.

Paste .
53
EPS- .
OK- .
Photoshop- .
File>Open...
.

File>Export...
kimi005
54
OK- .
Layer- .
Layer>Effects>Bevel and Emboss
.
Image>Hue/Saturation...
GIF 32 Ditherd - .
Matte- Other...
.
55
OK- .
.
Image>Adjust>Varietions...
OK-
.
Rollover Image- .
4. Dreamweaver- .
Site>New Site...
-
.

GIF 32 Ditherd - .
Site .
5. .
File>Save As... rollover-page.html
.
56
6.Page Property-
7. .
Title
.
- .
:
Document Encoding-
8. .
-
- .
57
9. .
Vert- TOP
.

- .
10. .
-
.
- .
58
Original Image-
about.gif .
Rollover Image-
about2.gif .
When Click...-
mongol-thuhai.htm .
59
10.Internet Explore
.
F12 .
60
- 16
Frame-
61
1. .
3. Dreamweaver- .
Windows Explore- .
Site>New Site...
-
.
Kimi-Lesson/My works/
.
File>New>Folder
2. Copy .
Kimi-Lesson/Web Design/ WD-Lesson15-Frame/
5
Copy .
Site .
4.Frame- .
Objects Frames .

Paste .
- .
62
Top-Frame .
File>Save Frame as...
top-frame
.
Frameset
top-frame
side
-frame
main-frame
Page Property-
Title
.
5.Frameset - .
File>Save Frameset as...
.
Objects Common .
6.Top-Frame .
Top-Frame .
- .
63
- .
- .
Frame-Image .
.
File>Save Frame .
7. Side-Frame .
Side-Frame .
20 pixel .
Side-Frame .
File>Save Frame as...
side-frame
.
Title .
64
8. Main-Frame .
Main-Frame - .
0 .
File>Open in frame...
mongol-tuhai.html .
Frameset-
.
File>Save Frame .
File>Save frameset
65
Link
Links- .
9. Link () .
Link () .
Link -
-
.
Frame- .
File>Save All Frame
10.Internet Explore
.
Target -
F12 .
mainFrame .
Link .
66
- 17
Animation GIF ( )
67
2. .
Image>Adjust>Hue/Saturation
1. Adobe ImageReady- .
3. .
- .
Layer>Duplicate Layer..
File>Open...
Kimi-Lesson/Web Design/ WD-Lesson17Animation-GIF/ morin.eps
OK .
-
Ctrl-T .
68
Animation
.
Layer Layer 1 copy -
Layer 1 - .
Ctrl-T .
Animation 1-
Layer Layer 1 copy - .
- Play .
69
Matte- None .
Forever - .
File>Save Optimized as...

GIF - .
Optimize - GIF 32 Ditherd
4. .
File>New...
70
-
.
- Layer- .
Layer 3 .
Layer
.
Layer
.
- Layer-
Layer 2 .
71
Image>Adjust>Hue/saturation

.
- Layer-
MONGOL .
Animation 1-
Layer Layer 1 - .
Layer>Duplicate Layer
Layer 8 copy .
72
Animation
.
Animation 7-
.
Layer Layer 2- .
Animation
.
Layer Layer 3 - .
73
8- Layer 8 - .
10- Layer 8 - .
11- Layer 8 copy -

.
9- Layer 8 copy -
.
- Play .
74
7- .
File>Save Optimized as...

GIF - .
0.5 .
5. Dreamweaver- .
-
Optimize - GIF 32 Ditherd
Site>New Site...
.
Matte- None .
File>Save as...
.
75
Page Property-
Title .
6.Internet Explore
.
F12 .
- .
76
- 18
Upload ( )
3. Dreamweaver- .
SITE () -
Site>Open Site...

.
1. .
HTTP Adress: -
http://kimi.k-free.net - .
2.Internet Provider (
)
-URL ( )
-FTP server name
-User ID
-Password
.
Remote Info
Access- FTP .
FTP Host: -
ftp.kimi.k-free.net - .
Login: -
kimi
Password: -
******** .
URL:
http://kimi.k-free.net
FTP server name:
ftp.kimi.k-free.net
User ID:kimi
Password:********
Ok- .
77
4. .

index.htm index.html .
7.
8.Internet Explore
.
URL- .
5.
6.
78

4 - Web Design
:

:
., ., .,
., ., .,
., .
.-, .,.

2002

, .
79

Web Design Book

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Web Design Book

Hochgeladen von

Copyright:

Verfügbare Formate

Web Design

<HEAD> .... </HEAD>

<TITLE> .... </TITLE> .

4. HTML - Internet Explore .

<FONT size=" ">....</FONT>

<FONT color=" ">....</FONT>

<FONT face=" ">....</FONT>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<BODY bgcolor=" ">

<IMG src=" ">

<HR size=" ">

<BODY background=" "> .

<P align="center"><A href="page-2.html">Enter</A>

Internet Explore File>Open...

1) (Web site) Image

Modern Art in Mongolia

Kimi-Lesson/ Web Design/

Site>New Site... Site name

File>Save As... top-page.html

[JPEG High ()]

2) File>Save for web...

[JPEG Low ()]

Resolution : 72 Pixel/inch (dpi- )

GIF- Matt: - Other...

10) File>Save As...

File of type- EPS

Resolution : 72 Pixel/inch (dpi- )

10.File>Save for Web...

File>Save for Web...

Kimi-Lesson/Web Design/ WD-Lesson12-Link/

Kimi-Lesson/Web Design/ WD-Lesson14Hotspot/ map

72 pixel/inch, RGB color OK- .

Folder Copy map folder

Object Panel- Invisibles .

File>Save for Web...

File>Save Optimized as...

Optimize - GIF 32 Ditherd

11- Layer 8 copy -

File>Save Optimized as...

Optimize - GIF 32 Ditherd

Das könnte Ihnen auch gefallen