웹페이지를 생생하게 만들어보세요

저자：Eve Cole 업데이트 시간：2009-06-20 17:01:07

W3C 조직( www.w3c.org )에서 정의한 새로운 HTML 4.0 사양은 모든 웹 디자이너에게 더 강력한 도구를 제공합니다. 이는 과거에 많은 사람들이 생각했던 동적 효과에 영향을 미치는 변화입니다. 상상할 수 없는 일이 이제 DHTML과 CSS의 도움으로 쉽게 달성될 수 있습니다. 다음은 웹 페이지 편집 프로세스 중 일부 효과 구현에 대한 자세한 설명입니다. 이를 사용하여 웹 페이지에 활력을 불어넣을 수 있기를 바랍니다.

* 메뉴 기술

Microsoft 및 Macromedia 사이트를 방문한 사람들은 메뉴 기술을 분명히 발견할 것입니다. 클릭하면 하위 메뉴가 표시되고 다시 클릭하면 하위 메뉴가 숨겨집니다. 저자는 이 두 페이지를 각각 다운로드했는데, 소스 코드를 분석한 결과 동일한 방법을 사용하지 않았으며 두 방법 모두 각각의 장단점이 어떻게 구현되어 있는지 살펴보겠습니다.

Macromedia는 다중 페이지 기술을 사용합니다. 즉, 먼저 확장된 항목 없이 기본 메뉴 페이지를 만든 다음, 확장된 각 기본 메뉴 항목에 대한 페이지를 만드는 것입니다. 기본 메뉴의 항목 수에 해당하는 데 필요한 하위 페이지 수입니다. 설명하기 위해 간단한 예를 들어보겠습니다.

<html>

<head>

</head>

<a href="menu_2.htm#abc"><b>여기를 클릭하세요!</b></a>

</body>

</html >

<html>

<head>

</head>

<b>여기를 클릭하세요!</b></a > </p>

목록 1

목록 2

목록 3

</body>

</html>

그림 1에서 Click here!를 클릭하면 그림 2의 효과가 나타납니다. 구체적인 구현 과정에서 <a name=" "> 태그의 정의와 사용에 주의를 기울여야 하며 일대일 대응을 달성해야 합니다. 그렇지 않으면 혼란스러울 것입니다. 또한, 메뉴 항목이 많을 경우에는 현재 나열된 하위 메뉴만 <a name=" ">으로 정의하고, 다른 주 메뉴 항목은 해당 확장 페이지로 연결해야 한다는 점을 기억하세요.

이 방법은 구현이 매우 간단하고 일반 사람들이 빠르게 익힐 수 있으며 모든 브라우저에서 지원될 수 있지만 단점도 분명합니다. 우선 속도가 느리고, 페이지를 왔다 갔다 하면 필연적으로 오랜 시간이 걸릴 수밖에 없습니다. , 하나씩 생산하는 것이 조금 번거롭습니다. 따라서 이 기술에는 여전히 특정 제한 사항이 있습니다.

Microsoft는 DHTML 기술을 사용합니다. DHTML은 비교적 새로운 기술이므로 일부 "오래된" 브라우저의 경우 이 메뉴 구현 방법은 쓸모가 없습니다.

설명하기 위해 예를 들어 보겠습니다.

그림 3과 같이 Product & Services를 클릭하면 바로 아래와 같은 메뉴가 나타나며, 다시 클릭하면 사라집니다. Macromedia와 동일하지만 소스코드가 훨씬 빨라진 것 같습니다. .

<html>

<head>

<title>Microsoft 홈페이지에 오신 것을 환영합니다</title>

.NV1 {font-family:Arial;font-weight:bold;font-size:.9em;cursor:hand;margin-top:10;text-indent: -14;margin -왼쪽: 14;}

.NV2 {위치:상대적;글꼴 크기:.9em;글꼴 무게:일반;}

</style>

</head>

<본문>

<스크립트 TYPE="텍스트/자바스크립트">

function clikker(a,b) {

if (a.style.display ==') {

a.style.display = 'none'

b.src='usm.gif'

}

else {

a.style.display='; ;

b.src='dsmh.gif';

}

</script>

제품 및 서비스

<div CLASS="NV2" ID="BB1" STYLE ="display:';"

onclick="window.event.cancelBubble = true;">

</div>

</dd>

</div>

</body>

</html>

소스 코드에서 .NV1 및 .NV2는 CSS 글꼴 정의이며 clikker 기능은 메뉴 항목의 표시 및 숨기기를 제어합니다. 변수 a는 텍스트를 제어하고 변수 b는 이미지를 제어합니다(다운로드가 완료되지 않아 그림에는 표시되지 않음). 실제 적용 시 div에서 정의한 범위에 주의하시고 클릭 시 다른 메인 메뉴 항목을 숨기지 마십시오.

Microsoft의 구현 방법은 상대적으로 영리하고 빠르고 생성이 상대적으로 간단하며 한 페이지만 필요합니다. 단점은 최소한 IE 4.0 또는 NN 4.0 이상의 지원이 필요하다는 것입니다.

두 가지 방법 모두 장단점이 있습니다. 어떤 방법을 선택하느냐는 홈페이지와 브라우저 지원의 성격에 따라 달라집니다.

* 텍스트 색상 변경

이는 웹에서 가장 일반적인 기술입니다. 마우스를 요소 위로 이동하면 해당 요소의 색상이 즉시 변경되고 때로는 멀티미디어 교육 소프트웨어처럼 소리가 납니다. 색상을 잘 혼합하면 페이지가 눈에 매우 즐거워질 것입니다.

텍스트 색상을 변경하는 방법에는 여러 가지가 있습니다. 여기서는 그 중 두 가지만 간략하게 소개합니다.

첫 번째 방법은 단순히 CSS 기술을 사용하는 것입니다. 현재 IE 4.0만이 이 기술을 지원합니다. 샘플 코드는 다음과 같습니다.

<html>

<head>

BODY { background: white }

A:link { color: red }

A:visited { color: maroon }

A: 활성 { 색상: 자홍색 }

A:hover {color:blue}

</style>

</head>

<body>

이는 CSS 기술을 사용하여 텍스트 색상을 제어하는 가장 간단한 예입니다.</a></p>

</body>

</html>

이 예에서 링크 텍스트는 처음에는 빨간색으로 표시되고, 텍스트 위에 마우스를 올리면 파란색으로 바뀌고, 클릭하여 액세스하면 자홍색으로 바뀌고, 액세스한 후에는 적갈색으로 변합니다. 넷스케이프는 아직 링크, 방문, 호버 등의 CSS 속성을 지원하지 않으므로 커뮤니케이터를 사용하면 이러한 효과를 볼 수 없습니다.

두 번째 방법은 JavaScript를 사용하여 실행할 작은 스크립트 프로그램을 작성하여 색상 변경 목적을 달성하는 것입니다. 샘플 코드는 다음과 같습니다.

<html>

<head>

<!--

.css1 { 글꼴-가족: "Courier New", 글꼴-크기: 14pt; 글꼴-스타일: 일반; 무게: 굵게; 색상: 파란색}

-->

</style>

function MM_changeProp(objStrNS,objStrIE,theProp,theValue) {

var theObj = eval((navigator.appName == 'Netscape')?objStrNS:objStrIE)

if ((theObj != null) && (theProp.indexOf("style.") != 0 &&

theObj.style != null))

eval(((navigator.appName == 'Netscape')?objStrNS:objStrIE)+'.'+theProp + '=" '+theValue+''"');

}

</script>

</head>

<span class="css1" ID="x"

onmouseover="MM_changeProp(','document.all [ 'x']','style.color','red','SPAN')" onmouseout="MM_changeProp(','document.all['x']','style.color', ' blue','SPAN')">

텍스트 색상을 변경합니다.</span>

</body>

</html>

IE 4.0과 NN 4.0은 객체에 대한 제어 메커니즘이 다르기 때문에 먼저 브라우저를 확인한 후 해당 거래. MM_changeProp() 함수는 이 텍스트 색상 변경 방법을 구현합니다. 이 방법을 사용하려면 ID를 범위로 정의하고 변경해야 하는 모든 곳에 onmouseover 및 onmouseout을 추가해야 하는데, 이는 첫 번째 방법보다 훨씬 더 번거롭습니다. 따라서 Microsoft에 대해 강한 의견이 없다면 첫 번째 방법을 사용하는 것이 좋습니다.

* 동적 단추

여기의 동적 단추는 .gif 애니메이션도 아니고 FrontPage에서 제공하는 다양한 특수 효과 단추도 아닙니다. 나는 여러분이 이런 상황에 직면했음에 틀림없다고 생각합니다. 마우스가 특정 버튼 위로 움직일 때 갑자기 움직여서 클릭하고 싶은 유혹을 느끼게 됩니다. 흥미롭지 않습니까? 아래에서 구현해 보겠습니다.

우선, 두 장의 사진을 준비해야 합니다. 버튼이므로 너무 클 필요도 없고 색상도 너무 화려할 필요는 없습니다. 이동 후 보이지 않도록 사진 두 장. 아래는 제가 만든 사진 두 장입니다.

다음으로 동적 효과가 어떻게 달성되는지 살펴보겠습니다. 그 소스코드는 다음과 같습니다.

<html>

<head>

</head>

<!--

versionButton = 1

browserName = navigator.appName

browserVer =parseInt(navigator.appVersion; );

if ( browserVer >= 3)

versionButton = "3";

if (versionButton == "3")

{

toc1on = new Image(42, 197);

toc1on.src

"on.home.gif";

이미지(42, 197);

toc1off.src = "home.gif"

}

function img_act(imgName)

{

if (versionButton == "3")

{

imgOn = eval(imgName + "on.src");

document [imgName].src = imgOn

}

function img_inact(imgName)

{

if (versionButton == "3")

{

imgOff = eval(imgName + "off.src");

document [imgName].src = imgOff

}

// -->

</script>

< a href=http://www.microsoft.com

onMouseover = "img_act('toc1')"

onMouseout = "img_inact('toc1')"><img src=home.gif

너비=100 높이=50 테두리=0 이름 ="toc1"></a>

</body>

</html>

주의해야 할 두 가지 사항이 있습니다.

1. img에 이름을 할당한 다음 소스 이미지 정의에 이 이름을 적용합니다.

2. 소스 파일의 다양한 기호, 특히 따옴표에 주의하고, 소스 이미지 파일의 경로에도 주의하세요. 업로드 후 사이트가 제대로 표시되지 않도록 하려면 상대 경로를 사용하는 것이 가장 좋습니다. 물론, 이 이미지 교환 방법도 브라우저 버전 4.0 이상의 지원이 필요합니다. 아직 브라우저 버전 3.0을 사용하고 있다면 최대한 빨리 업그레이드하세요!

* 프롬프트가 표시되면

사진 위에 마우스를 올려놓으면 기능 프롬프트를 제공하는 많은 소프트웨어의 버튼과 마찬가지로 프롬프트 정보가 나타납니다. 이 기능은 웹 페이지 편집 시 쉽게 구현 가능하며 그 효과를 살펴보겠습니다.

이 효과를 얻는 것은 쉽습니다. 소스 코드를 살펴보세요.

......

<tr>

<td WIDTH="57"><a HREF="who.html" TARGET="main"

ONMOUSEOVER="img_act('who')"

ONMOUSEOUT="img_inact('who') "><img

SRC="../images/button_who0.gif" NAME="who"

title="Zhou Huajian의 개인 프로필" ALT="나는 누구입니까"

BORDER="0" WIDTH="113" HEIGHT="45 "></a>

</a></td>

< /tr>

...

코드에서 밑줄 친 부분이 이를 수행하는 방법입니다. Title 속성은 매우 유용합니다! BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE 및 TITLE을 제외한 모든 요소에서 마우스가 지나갈 때 프롬프트 정보를 정의하는 데 사용할 수 있습니다.

위에서 우리는 웹페이지 편집 과정에 대한 몇 가지 팁을 자세히 논의했습니다. 웹에는 아름답게 디자인되고 기술적으로 진보된 페이지가 많이 있으며, 해당 페이지의 소스 코드를 분석하는 것은 학습을 위한 좋은 방법입니다. 컴퓨터 기술은 끊임없이 발전하고 있습니다. DHTML, CSS, XML... 우리는 어려움에 직면하고, 이를 마스터하고, 웹 페이지를 더욱 활성화하기 위해 웹 페이지에 적용할 수 있습니다.

(천진계현관광국 301900 자허징)