.


:

:



,



( , )

:

































 

 

 

 
FAQ

Web-.

⇐ 123



1. Photoshop ImageReady

 

2. Photoshop ImageReady

 

3. ,

4. Slice Tool, . , . , . , . .:

Rollover.

1. Slice select tool - , Web Content. Layers. , !

 

2. Web Content Add Rollover State => Over. Over Layers .

\

.

3. , , ... .

7.1.6 .

1. , ( ). . jpg , gif

2. ϳ File> Save optimized as. hmtl .

 

7.1.7 : 2.

leafs.png, pixelated_blue_rectangle.png

1.

(Ctrl + N) 1200750 px. Gradient Tool (G) 䳺 # 792700 # 000000.

 

2

, Brush Tool (), ' 300 px . , . color".

3

³ . Convert to Smart Object. Filter> Artistic> Film Grain, , . Filter> Pixelate> Mosaic. Difference, opacity 30% "texture".

 

4

, Rounded Rectangle Tool (U), 3 . Drop Shadow, . opacity 70% "black shape".

 

 

5

. "background".

 

 

6

"home". "home" "logo".

 

7

"logo". Type Tool (T) ( # f4f4f4). , . ( # eeeeee).

 

 

8.

, "Sign up | Login". Rounded Rectangle Tool (U) . , . foreground Type Tool (T) "Sign up | Login". opacity 75%.

 

 

9

"Navigation". , Single Row Marquee Tool 1 px. # 406f94 , , Rectangular Marquee Tool (M). opacity 40% "Line".

 

10

. Rectangular Marquee Tool (M) (: ). ³ Gradient Tool (G) 䳺 # 35423e . . Filter> Noise> Add Noise , . "gradient" 䳺 1 px

 

 

11

Type Tool (T) . , . Greyscale Basic.

 

 

12

, Single Column Marquee Tool . Rectangular Marquee Tool (M), "Intersect with selection" . , .

 

 

 

13

, , , . "line 1".

 

 

14

"line 1" "line 2". Move Tool (V) , 1 . , , .

 

 

15

"line 1" "line 2", Convert to Smart Object. ' "separator".

16

"separator". Rectangular Marquee Tool (M), , # 35423e . Convert to Smart Object. Filter> Blur> Gaussian Blur, Filter> Noise> Add Noise ( , ). opacity 60% "highlight".

 

 

 

 

17

"separator", Layer> Layer Mask> Reveal All. Gradient Tool (G) 䳺 .

 

18

"separator" "highlight". Move Tool (V), Alt Shift, . ﳿ . Move Tool (V) . , .

 

 

19

"separator" "highlight" . "separators".

 

20

Rectangle Tool (U) . . Gradient Overlay. "active menu", opacity 50%.

 

21

, "search" "navigation". Rounded Rectangle Tool (U), 3 , ( # 104f59 ). "text field" opacity 80%.

\

22

Rectangle Tool (U) . . , . Create Clipping Mask.

 

 

23

Type Tool (T) "search" . opacity 75%.

 

 

24

Line Tool (U) ( # 123036). "line", "button" Move Tool (V) .

 

 

25

"Showcase". "background". Rectangle Tool (U) ( # 219aad). 983 , 273 . opacity 55% "bg4".

 

 

26

³ , "bg4". opacity 55%, "bg3".

 

 

27

Ctrl, "bg4", , Gradient Tool (G) 䳺 # 56b8e5 . .

 

28

, Rectangular Marquee Tool (M) . ³ Gradient Tool (G) 䳺 # 0f2b42 # 2a607f. "bg1".

 

29

"sign up button". Rounded Rectangle Tool (U), 2 . , . Type Tool (T) "sign up" .

 

 

30

, "learn more". , Custom Shape Tool (U) .

 

 

31

"left arrow". Ellipse Tool (U) # 406f94. .

 

32

, Custom Shape Tool (U) . , . opacity 50%.

 

 

33

.

 

 

34

"image". "image". .

 

35

Layer> Layer Style> Create Layer, Layer> Layer Mask> Reveal All. Gradient Tool (G) 䳺 . "shadow".

 

 

36

, Type Tool (T) . "text".

 

37

"content". "shadows". Rectangle Tool (U) . "white shape" opacity 90%.

 

 

38

Ctrl, "white shape". , Gradient Tool (G) 䳺 # 8f8f8f . opacity 50% "top shadow". Move Tool (V) "".

 

 

39

. Rectangular Marquee Tool (M) . Gradient Tool (G), 䳺 # 8f8f8f . . opacity 30% "vertical shadow 1". , "vertical shadow 2" .

 

 

40

Line Tool (U) 1 ( # aebcc7). "line".

 

41

Type Tool (T) . .

 

42

"footer". , Rectangular Marquee Tool (M) . foreground # 555555, ' . opacity 50% "gradient".

 

43

, Single Row Marquee Tool . , . Layer> Layer Mask> Reveal All, ' . opacity 15% "line".

 

 

44

Type Tool (T) .

 

 

 

 

1. Web- , .

2. , Web- .

7.3

1. ?

2. .

3. Rollover?

4. ?

 

8

: JavaScript

: JavaScript

 

8.1

JavaScript

JavaScript "" - . . JavaScript- - HTML - .

JavaScript , - .

Java, JavaScript . Java - Java- , JavaScript . , JavaScript C + + Java.

 

8.1.2 C

JavaScript , <SCRIPT> </ SCRIPT>:

HTML-

<SCRIPT>

</ SCRIPT>

HTML-

 

8.1.3

JavaScript - : , , , ', , " " null NaN, .̳ JavaScript var. , ,

var selected = " first item "

' selected " first item ". . , . , ' rating, , 512.5:

rating = 512.5;

 

8.1.4 '

JavaScript , C + + Java. , . , JavaScript, '. ' .' ( ' ) . ', . ' , , -, HTML - , , . JavaScript ', .

, JavaScript ', ' HTML - . , '. ' , , .

', , , - ' document, HTML , . - , , 䳿 .

<HTML>

<D>

<IL> JavaScript</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

document.write(" JavaScript");

</SCRIPT>

</BODY>

</HTML>

, ' Document, JavaScript .

JavaScript - ', HTML- , ..

8.1.5

JavaScript, + +. "+".

JavaScript "+" , .

, ,

sum = 47 + 21;

sum 68,

sum = " 1" + " 2";

sum " 1 2". :

<HTML>

<BODY>

<H2> </H2><BR>

<SCRIPT LANGUAGE="JavaScript">

 

var a = 3;

var b = 8;

var c = " ";

 

document.write("a+b="); document.write(a + b);

document.write("<BR>");

document.write("a + = "); document.write(a+c);

document.write("<BR>");

document.write("c + a = "); document.write (c + a);

document.write ("<BR>");

document.write ("a + b + = "); document.write(a + b + c);

document.write("<BR>");

document.write("c + a + b = "); document.write(c + a + b);

document.write("<BR>");

 

</SCRIPT>

</BODY>

</HTML>

HTML- ,

 

, - . , JavaScript , , . , JavaScript , .

 

8.1.6

, + +, JavaScript.

JavaScript , + +, : for... in with.

- .

<html>

<body>

<table>

<script language="JavaScript">

document.write("<tr><td> </td>");

for (i = 1; i < 10; i++) document.write("<td>"+i+" </td>");

document.write("</tr>");

for (i = 1; i < 10; i++)

{

document.write("<tr><td>" + i + " </td>");

for (j = 1; j < 10; j++)

{

document.write("<td bgcolor='#00ffa0'>" + (i*j) + " </td>");}

document.write("</tr>");

}

</script>

</table>

</body>

</html>

new. , ' , ' . ' ', . ' new, :

= new _ ' ()

8.1.7

 

:

function ' ([ ])

function. , ', , . , , . :

_ ([ ]);

= ' ([ ]);

, , .

 

8.1.8.

.

var, , , .

, , . , .

, , . - .

, " " .

, var, , - .

 

HTML DOM

DOM (Document Object Model) - W3C HTML XML. - - , , . 3 :

Core DOM - -

XML DOM - XML

HTML DOM - HTML DOM ' () .

HTML DOM ' HTML () . , HTML DOM , , HTML .

DOM , HTML - . HTML , , .

8.1. HTML

 

' 12 ':

1. Document - HTML.

2. Event - , .

3. History - , 볺 .

4. Location - .

5. MimeType - MIME.

6. Navigator - .

7. Selection - .

8. Style - .

9. TextRange - , HTML.

10. Screen - , 볺.

11. Window - , 䳿, ' .

12. StyleSheet - .

JavaScript.

' ' :

- '. : . , '. object.methodname

䳿 - ' , . : .

- '. : ' .

8.1.10 ³ . '

 

Window- .

:

window.open (" URL URI ", " ' ", " ") , http://www.microsoft.ua:

window.open (" http://www.microsoft.ua ")

', - nuftWindow, / target .

window.open (" http://www.microsoft.ua ", " newWindow ")

' . ' ', .

, / height / width, / toolbar, / location field / scrollbars.

, :

window.open (" http://www.microsoft.ua ", " wwwWindow ", " toolbar = no, scrollbars = yes ")

:

directories - yes, , What's New What's Cool.

height - .

innerHeight - . height, .

innerWidth - . width, .

location - yes,

Location.menubar - yes, .

outerHeight - .

resizable - yes, screenX - , .

screenY - , .

scrollbars - yes, , .

status - yes, .

titlebar - yes, .toolbar - yes, , Back Forward width - .

, onClick ' Document.

:

³

<a href =""

onClick="window.open(http://www.microsoft.ua,'nuftWindow','left=300,top=300,width=200,hight=400,toolbar=no,menubar=no,location=no,directories=no')"> ³

</ a>

:

<input type = "button" value = "³ " onClick="window.open('http://www.microsoft.ua','kstuWindow','left=300,top=300,width=200,hight=400,toolbar=no,menubar=no,location=no,directories=no')">

 

.

: window.close ()

HTML .

³ DOM:

;

HTML ;

HTML ;

HTML ;

.

<html>

<head>

<title>HTML </title>

</head>

<body>

<h1> </h1>

<p> </p>

</body>

</html>

<html>. <html>.

: <head> <body>.

<head> <title>, <body> <h1> <p>

, , . <title> HTML </ title > <title> " HTML ", " HTML " <title>. , HTML DOM innerHTML.

HTML , , . . , . , ( ).

³ :

;

, , ;

- ;

ʳ ; .

 

8.1.11. HTML DOM

DOM HTML '. JavaScript . DOM . (, <h1>), - 䳿 (, <a>).

DOM :

x.innerHTML - HTML x;

x. nodeName - ' x;

x.nodeValue - x;

x.parentNode - x;

x.childNodes - x;

x.attributes - x.

', HTML :

x.getElementById (id) - id;

x.getElementsByTagName (name) - ' (name);

x.appendChild (node) - x; x.removeChild (node) - x.

. <p> id "demo" HTML :

txt = document.getElementById ("demo"). innerHTML

-:

txt = document.getElementById ("demo"). childNodes [0]. nodeValue

DOM 3 :

1. getElementById (ID). ID.

2. getElementsByTagName (name). ' ( ). .

3. . length.

x = document.getElementsByTagName("p");

for (i = 0; i < x.length; i++)

{

document.write(x[i].innerHTML);

document.write("<br/>");

}

HTML <p>.

:

parentNode;

firstChild;

lastChild.

2 :

document.documentElement - ;

document.body - <body>.

8.1.12

HTML DOM ', () . :

nodeName;

nodeValue;

nodeType.

nodeName ' . :

nodeName ;

nodeName ;

nodeName ;

nodeName # text

nodeName # document

: nodeName ' HTML . nodeValue . :

nodeValue ;

nodeValue ;

nodeValue .

nodeType . : :

 

Element  
Attribute  
Text  
Comment  
Document  

 

8.1.13. HTML

HTML JavaScript, HTML DOM . , <p>:

<html>

<body>

<p id="p1">Hello World!</p>

<script type="text/javascript">

document.getElementById("p1").innerHTML="New text!";

</script>

</body>

</html>

 

8.1.14 ij

JavaScript :

1. Alert. , -.: alert ("");

2. Confirm. " / ͳ". ³ Confirm true / false. :confirm (" ");

3. Prompt. . " OK " , " Cancel" null.:prompt (" / ", " ");

-,

<html>

<body>

//

<div id="c" style="color:blue"> : </div>

 

<script language="JavaScript">

//

var tcolor = prompt(" : red, blue, green, yellow, black","black");

//

document.getElementById("c").innerHTML = " : " + tcolor;

//

document.getElementById("c").style.color = tcolor;

 

</script>

</body>

</html>

1.

.

<!-- -->

<HTML>

<HEAD>

<TITLE> </TITLE>

<script language="JavaScript">

function invert(obj)

{

var a = Number(obj.num1.value);

obj.res.value = -a

}

</script>

</HEAD>

<BODY bgcolor="#FFFFCC">

<H4> </H4>

<FORM name="form1">

: <input type="text" size=8 name="num1"><hr>

<input type="button" value= onClick="invert(form1)">

<input type="text" size=8 name="res"><hr>

<input type="reset">

</FORM>

</BODY>

</HTML>

2.

6 . 1 ,

1) .

2) .

3) 䒺

4) ?

5) 䒺

6)

7) , 3

8)

9) 䒺

10) 䒺

11) ?

12) .

13)

14) 䒺

15) 䒺

16)

17)

18)

19) 䒺

20) .

21) 䒺

22) 䒺

23)

24)

25) , -10

26) 䒺

27)

28)

29) 䒺 ?

30) 䒺

31)

32) , 1

 

3.

, . bgcolor. RGB, : <td bgcolor="#c0a145">. ' Math :

color = Math.round(255.0*Math.random());

r = color.toString(16);

:

color = r + g + b;

:

 

( )

1. (4, 4), (5,4) ', (8, 8), (8, 9) '

2. (1, 7), (1,8) ', (8, 1), (9, 1) '

3. (2, 2), (2,3), (2, 4), (2,5) '

4. (3, 9), (4,9), (5, 9), (6,9) '

5. (3, 5), (4,5), (5, 5), (6,5) '

6. (6, 4), (7,4) ', (6, 7), (6, 8) '

7. (2, 7), (3,7) ', (1, 8), (1, 9) '

8. (3, 4), (4,4) ', (9, 1), (9, 2) '

9. (3, 3), (3,4), (3, 5), (3,6) '

0. (9, 8), (9,9) ', (1, 9), (1, 9) '

 


 

8.3

1. JavaScript?

2. JavaScript.

3. JavaScript.

4. DOM?

5. JavaScript?

 

˲

 

1. Adobe Photoshop CS2: . . / . . , . .: , 2005. 480 .

2. , . HTML CSS. / . , . .: , 2007. 304.

3. , . JavaScript. . / - .: -, 2012. 1081.


 

̲

.. 3

, ̲, 4

1. 5

1.1 . 5

1.1.1 HTML-. 5

1.1.2 . 7

1.1.3 . 7

1.1.4 Escape- 7

1.1.5 , , . 8

1.1.6 9

1.1.7 10

1.1.8 10

1.1.9 . 11

1.1.10 <FONT>. 14

1.1.11 <BODY>. 16

1.1.12 . 18

1.1.13. 19

1.1.14 . 22

1.1.15 . 22

1.2. . 22

1.3 . 22

2. 23

2.1 . 23

2.1.1 . 23

2.1.2 . 24

2.1.3 . 24

2.1.4 . 24

2.1.5 . 25

2.1.6 . 25

2.1.7 . 25

2.1.8 . 25

2.1.9 . 26

2.1.10 , Web-. 26

2.1.11 , Web- . 27

2.1.12 ᒺ . 27

2.1.13 . 27

2.1.14 , . 27

2.1.15 , . . 28

2.1.16 , . 28

2.1.17 . 28

2.1.18 , FTP. 28

2.1.19 ³ Web- . 29

2.1.20 . 29

2.1.21 ó . 29

2.1.22 . 30

2.1.23 . 30

2.1.24 ᒺ. 30

2.1.25 . 31

2.1.26 ᒺ . 32

2.2 . 32

2.3 . 33

3. 33

3.1 . 33

3.1.1 HTML. 33

3.1.2 34

3.1.3 . 34

3.1.4 34

3.1.5 35

3.1.6 35

3.1.7 37

3.1.8 38

3.1.9 38

3.1.10 38

3.1.11 38

3.1.12 39

3.1.13 ³ 39

3.1.14 40

3.1.15 . 40

3.1.16 . 40

3.2 . 41

3.3 . 41

4. 41

4.1 . 42

4.1.1 . 42

4.1.2 ³ ᒺ . 43

4.1.3 . 45

4.2 . 45

4.3 . 46

5. 46

5.1 . 46

5.1.1 . 46

5.1.2 <INPUT>. 47

5.1.3 <SELECT>: 49

5.1.4 <TEXTAREA>. 50

5.2.1 1. 51

5.2.2 2. 52

5.3 . 52

6. 52

6.1 . 52

6.1.1 . 52

6.1.2 (DIV) CSS. 54

6.1.3 CSS. 57

6.1.4 CSS. 59

6.2.1 1. 61

6.2.2 2. 61

6.2.3 3. 61

6.3 . 61

7. 62

7.1 . 62

7.1.1 : 1. 62

7.1.2 . 67

7.1.3 Rollover. ϳ. 68

7.1.4. Web-. 69

7.1.5 Rollover. 70

7.1.6 . 72

7.1.7 : 2. 72

7.2 . 118

7.3 . 118

8. 118

8.1 . 118

8.1.1 JavaScript 118

8.1.2 C .. 119

8.1.3 119

8.1.4 '. 119

8.1.5 120

8.1.6 121

8.1.9.HTML DOM.. 123

8.1.10 ³ . '. 124

8.1.11. HTML DOM.. 127

8.1.12 . 128

8.1.13. HTML . 129

8.1.14 ij . 129

8.2.1 1. 130

8.2.2 2. 130

8.2.3 3. 131

8.3 . 133

˲.. 133

 

⇐ 123


:

: 2016-12-04; !; : 474 |

:

:

,
==> ...

1768 - | 1640 -


© 2015-2024 lektsii.org - -

: 0.674 .