You are on page 1of 80

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>
<P>Welcome to HTML Web Page!</P>
</BODY>
</HTML>

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


<P> .... </P>

File>Save As...
OOO.html

4. HTML - Internet Explore .


Internet Explore File>Open...
.

- 04

HTML-2

1. .
<HTML>
<HEAD>
<TITLE>HTML Web Page</TITLE>
</HEAD>
<BODY>
<P>Welcome to HTML Web Page!</P>
<P align="center">Welcome to HTML Web Page!</P>
<P align="right">Welcome to HTML Web Page!</P>
</BODY>
</HTML>
<P align="center">....</P>
<P align="right">....</P>

Notepad
(OOO.html .)
Internet Explore .

2. .
<HTML>
<HEAD>
<TITLE>HTML Web Page</TITLE>
</HEAD>
<BODY>
<P><FONT size="6">Text size change </FONT>
<P><FONT size="-2">Text size change 2</FONT>
<P><FONT color="blue">Text color change </FONT>
<P><FONT color="#0000FF">Text color change 2</FONT>
<P><FONT size="6" face="Times New Roman">Text font and size change </FONT>
<P><FONT size="6" face="Times New Roman"><STRONG>Text strong</STRONG> </FONT>
<P><FONT size="7" face="Arial"><EM>Text EM</EM> </FONT>
</BODY>
</HTML>

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

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

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

<STRONG>....</STRONG>
<EM>....</EM>
<U>....</U>

---Bold

---Italic
---Underline

3. .
<HTML>
<HEAD>
<TITLE>HTML Web Page</TITLE>
<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">
<P align="center"><FONT size="6">Modern Art in Mongolia </FONT></P>
<P align="center"><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
.
Internet Explore File>Open...

top.html

2. Link () .
.
<HTML>
<HEAD>
<TITLE>Modern Art in Mongolia</TITLE>
</HEAD>
<BODY background="stone.gif">
<P align="center"><IMG src="art2.jpg">
<HR size="4">
<P align="center"><IMG src="art3.jpg">
<HR size="4">
<P align="center"><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>
<TITLE>Modern Art in Mongolia</TITLE>
</HEAD>
<BODY bgcolor="red">
<P align="center"><FONT size="6">Modern Art in Mongolia </FONT></P>
<P align="center"><IMG src="art1.jpg">
<HR size="4">
<P align="center"><A href="page-2.html">Enter</A>
</BODY>
</HTML>

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

Internet Explore File>Open...

- .

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 .

Kimi-Lesson/ My Works/ .

File>New>Folder
.

Site Window- .

3. .
File>Save As... top-text.html
Folder .

Windows Explore- .
Dreamweaver- .

22

Size- 6 .

4.Page Property-
Modify>Page Properties...
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- .
Kimi-Lesson/ My Works/ .
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 .

File>Save for Web...


JPEG Medium - OK- .
Site Window- .

13. .
File>Save As... index.html
Folder .

14.Page Property-
Modify>Page Properties...
Title :
Document Encoding-
Cylilic(windows-1251) .

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-
Modify>Page Properties...
Title
Document Encoding-
Cylilic(windows-1251) .

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- .


File>Save for Web...
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-
Modify>Page Properties...
Title
.

.
File>Save for Web...
GIF 32 Ditherd - .

:
Document Encoding-
Cylilic(windows-1251) .

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...
File>Save for Web...
GIF 32 Ditherd - .
Matte- Other...
.

55

OK- .

.
Image>Adjust>Varietions...

OK-
.

Rollover Image- .
4. Dreamweaver- .
Site>New Site...
-
.

File>Save for Web...


GIF 32 Ditherd - .

Site .

5. .
File>Save As... rollover-page.html
.

56

6.Page Property-

7. .

Modify>Page Properties...
Title
.

- .

:
Document Encoding-
Cylilic(windows-1251) .

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-
Modify>Page Properties...
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
.

Modify>Page Properties...
Title .

64

Modify>Page Properties...

8. Main-Frame .
Main-Frame - .

0 .

File>Open in frame...
mongol-tuhai.html .

Frameset-
.

File>Save Frame .

File>Save frameset

65

Link
Modify>Page Properties...
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-
Modify>Page Properties...
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