다섯째날 : 자바와 게시판,css등 홈제작의 노하우를 익히자

1) 테이블을 이용해서 정리한 방법.

 

문서의 제목을 적어준다

<----가운데 정렬,배경색깔 청록색,제목셀로

    위 제목 문서의 부메뉴(1)
    위 제목 문서의 부메뉴(2)
    위 제목 문서의 부메뉴(3)

<---- 클립아트삽입,부메뉴별로 하이퍼링크시키기

 

그리고 위 표의 "선 테두리 두께=0" "셀 안쪽의 여백=3""선간격= 3"으로 조절하면 아래와 같이 됩니다.

 

문서의 제목을 적어준다

<-----가운데 정렬,배경색깔 청록색,제목셀로 

    위 제목 문서의 부메뉴(1)
    위 제목 문서의 부메뉴(2)
    위 제목 문서의 부메뉴(3)

<-----클립아트 삽입 

하나의 셀만을 수식했지만 많은 정보를 담고 있는 홈페이지를 만들고 싶다면 이와 같이 테이블을 이용해서 정보가 어디있는지 알기 쉬운 홈페이지를 꾸밀 수가 있습니다. 각 주메뉴.부메뉴 마다 하이퍼 링크를 걸어서 방문자들이 쉽게 원하는 정보를 찾아가게 하면은 되겠죠

 

2) 수평선(라인) 넣기

홈페이지의 문서를 수식할 때 문서의양이 많아지거나 어느 정도선에서 구별지어야 할 필요성을 느끼게 됩니다. 그렇지 않다면 가장 문서의 마지막에는 자기의 이름과 업데이트 날짜 등을 적기 위해서 라도 라인의 필요성을 느끼게 됩니다.이럴 때에 효과적으로 사용할 수 있는 도구가 "수평선 넣기" 입니다. 한번 눌러 보시면 아래와 같이 수평선이 삽입 됩니다.

이렇게 삽입된 수평선 역시 수평선 위에 마우스 오른쪽 버튼을 놓으면  "수평선 속성"이 나타나 수평선을 꾸밀 수 있습니다. 

"크기" 메뉴는 수평석의 폭과 높이를 정할 수 있습니다.

"정렬"은 수평선이 웹사이트에서 어떻게 정렬되어 보여지는 가를 결정합니다.

"속이 찬 선(S)"은 수평선의 가운데가 비어있는 것을 막아주어 그늘이 져있는 수평선의 모습을 꽉찬 모습으로 바꾸어 줍니다

수평선 넣기로 문서의 단락을 구별할 수도 있지만  나모에 있는 클립아트에서 제공하는 분리선이나 라인을 이용하면 칼라풀한 구분선을 넣을 수도 있습니다. 웹서핑을 하면서 꾸준히 클립아트와 아이콘,라인등을 모아두는 노력도 해야겠죠.

 

3) 링크된 곳에 색깔변하는 스타일 시트 사용하기

지금까지 공부하시면서 각 환경설정하는 옵션들을 만날 때마다 "스타일"이란 버튼을 보셨을 것입니다. 스타일이란 브라우저의 사용환경마다 웹페이지가 틀려보일 수밖에 없는 것을 일정하게 보여주는 역할을 하는 것입니다. 예를 들어 영문 넷스케이프에선 굴림체가 제대로 지원이 안되죠. 스타일 시트를 사용하면 비슷하게는 볼 수가 있습니다. 스타일 시트의 중요성을 아시겠죠. 방문자가 어떤 환경이라도 일정한 모양으로 여러분이 만든 홈페이지의 모양 그대로를 보여줄 수가 있는 것입니다. 단 스타일 시트는 넷4.0과 익스4.0에서 완벽하게 동작한답니다.

가장 간단한 스타일 시트의 사용예인 글자가 링크된 곳에 마우스를 가져 가면 선택된 링크의 색깔이 변하는 사용법을 한번 살펴 볼까요.

먼저 서식 메뉴의 스타일 시트를 열어 보세요. <!--   --> 이 부분이 나오죠. 괄호 사이에 A:hover {color:669966} 이라는 것을 복사 해서 지금 넣어 보세요.그리고 여러분이 작업하는 문서에 하이퍼 링크를 만들어 보세요. 마우스를 갖다 대시면 링크된 부분이 연두색으로 변하죠. "669966" 란 숫자가 그림 색깔을 말하는 것이겠죠. 여러분 입맛대로 RGB 코드를 자료실에서 받아서 확인 해보세요. 그리고 "스타일 시트" 메뉴의 편집을 눌러 보시면 아래와 같이 더 자세하게 옵션을 주어서 꾸며 줄 수가 있는 것입니다.

클래스는 현재 미리 만들어져 있는 클래스를 선택하여 스타일을 지정합니다.글꼴은글자 모양및 크기, 장평등을 지정합니다. 색깔은 글자색, 배경색등을 설정하거나 글자의 배경이미지를 일관되게 지정하여 보여주게 합니다.내용은 문단 내용의 정렬 방식과 들여쓰기 내여쓰기 및 줄간격 글자 간격등을 지정합니다.상자바깥 여백 및 안쪽 여백을 통일시켜 보여줍니다. 테두리문단이나 쪽의 테두리 테이블의 테두리,그림파일의 테두리를 설정합니다. 테두리 두께 및 색상을 같이 지정할 수 있으며 상하 좌우각기 다른 스타일의 테두리선을 쓸수도 있습니다.

나모에서는 가급적 옵션중에서 글꼴에서는 underline와 테두리 부분의 옵션도 기본적인 것만 쓰도록 권하고 있습니다.나모 사이트(http://www.namo.co.kr)에서 자세한 것을 보도록 하세요.

 

4) 마우스가 손가락 모양으로 바뀌는 스타일 시트사용법

여러분도 많이 보셨겟지만 링크된 곳에 마우스 커서를 위치시키면 마우스 커서가 화살표 모양이 아니라 "손가락 모양"이라던지 "이동하는 모양"과 "물음표가 보이는 모습" 등의 모습으로 바꿀 수 있는 스타일 시트입니다. 가장 간단하게 하는 방법입니다. "서식"에서 "스타일 시트"를 열으신 다음에 A {cursor: hand} 를 지금 복사해서 <!-- 이곳에 복사해서 붙이세요--> 지금 붙여 넣어 보세요. 그리고 하이퍼 링크를 연습삼아 아무데나 한번 만들어 보시구 다시 브라우저에서 확인 해보세요. 마우스 커서가 링크된 곳에 갖다데면 손가락 모양으로 바뀌죠.

이것은 링크가 걸려진 모든 텍스트의 마우스 포인터를 한꺼번에 바꾸어 준답니다. 위 정의에서도 자세한 옵션들로 꾸며지진 않았죠. 간단하게 "링크된 곳에 마우스를 갖다 대면 손가락으로 바뀌어라" 라는 명령뿐이니까요.  그렇지만 간단한 명령줄 하나로 남들과 틀린 홈을 만들 수 있겠죠. 그리고 "hand" 대신에 help,move,ne-resize 로 바꾸어서 넣어 보세요. 그럼 마우스가 윈도우에서 사용하는 창크기를 줄이는 모양(move)등으로 각각 바뀌는 모습을 보실수 있습니다 지금 한번 hand옵션 말고도 다른 세 개의 옵션으로 각각 스타일 시트 메뉴에 복사해서 연습해보세요. 나만의 팁이 홈페이지에 삽입된 것 같아서 기분이 좋아 지실겁니다.

 
 
5) 페이지 전체 이동할 때 멋지고 다양한 효과(dhtml)
 
 

이것은 익스플로러 4.0 이상에서만 작용하는 dhtml소스입니다. 넷스케이프가 한글지원이 늦어지고 자바에러등으로 많은 네티즌들이 익스플로러로 기본 사용브라우저를 바꾸었죠.

여러분께서도 간단한 자바 스크립트로 페이지가 이동한다던지 배경색이 바뀐다던지 하는 스크립트는 자주 보셨을 것입니다. 지금 하는 것은 고전적인 스크립트가 아니라 페이지 전체가 이동할 때 페이지가 모자이크가 나서 이동하게 된다던지 한쪽에서 커텐을 열 듯이 움직이고 페이지전체가 깨지면서 이동하게 되는 것등입니다.

페이지이동 사이에 변환속도도 엄청 빠르며 방문자들도 페이지 간을 이동할 때 다양한 멀티미디어 효과를 경험하게 되는 것이죠.이것은 절대로 어려운 것이 아닙니다.

메타태그 사이에 아래의 소스를 넣어 주시면 됩니다. 메타태그에는 홈페이지 제작자.사용된툴, 해당페이지에 대한 제목과 설명이 들어 있는 헤드태그안에 들어가는 것이지요.자세한 설명은 다음에서 설명하고 있습니다

아래의 소스를 meta소스 사이에다 붙여넣기를 해보세요. 그리고 브라우제에서 해당페이지를 이동시키거나 돌아오시면 다양한 효과를 체험하게 된답니다 

<META http-equiv="page-enter" content="revealtrans (duration=3, transition=23)">
<META http-equiv="page-exit" content="rezvaltrans (duration=3, transition=23)">

여기서 23이라는 것은 23세 번의 변화가 있다는 뜻입니다. 그리고 이값이 최대값이기도 합니다. 다이나믹html과 스타일시트.html 4.0을 잘알고 계신다면 포토샵 같은 그래픽 툴에서 보여지는 그래픽 효과보다 훨씬 다양한 효과를 빠르게 구현할 수 있습니다 

 

6) 웹페이지의 제목,설명,제작자 이름을 넣자

아주 중요한 것이죠. 홈페이지를 보시면 브라우저의 가장위에 그 홈에 대한 제목이 있는 것과 Untitled로만 되어 있는 홈도 보셨을 것입니다. 그리고 검색엔진에 등록을 하여도 html태그중 meta태그까지 검색결과를 보여주는 검색엔진 들도 많이 있어서 여러분이 만든 홈에도 이런 검색엔진이 서치를 잘 할 수 있게 핵심단어를 나열시켜 놓으면 좋습니다.

이런 환경설정은 마우스 오른쪽 단추의 "문서 속성"에서 첫 번째 탭은 "정보"탭에서 결정할 수 있습니다. 문서속성에서 "정보"탭을 선택해보세요

"위치"라는 것은 해당 문서의 현재 파일명을 말합니다. "글제목"이 브라우저 상단에 홈페이지의 제목으로 나오는 것입니다. "지은이"는 여러분의 이름이 되겠죠. 브라우저에서 직접 보이지는 않지만 html소스를 본다면 지은이의 이름이 분명히 나와있습니다. 방문자들이 잘만들어진 홈페이지의 주인장이 누구인지 알겠죠. "설명"은 브라우저 상단의 제목 말고도 간단한 설명을 나열하는 것입니다."핵심어"는 meta태그에 해당하는 것으로 여러분의 웹페이지에 담고 있는 중요한 정보의 핵심어를 적어 두세요. 그럼 검색엔진에 등록했을 때 알아서 메타태그까지 검색해서 서치하므로 여러분의 홈에 담겨진 정보를 조금이라도 더 잘 홍보할 수가 있는 것입니다.

"모양" , "고급"탭에서는 현재 페이지가 어떻게 구성되어져 있는지를 한꺼번에 볼 수가 있죠. 어떤 에디터를 사용했고 문자 코딩방식은 어떤 것이고 현재 페이지내의 <head>안에 어떤 스크립트가 삽입되어 있고 수정도 할 수 있는 "스크립트"(나모 2.1에서만 있음)탭도 있죠. 여러분이 만든 홈페이지에 여러분이 이름인 제작자가 당연히 들어 가야겠지요. 이건 여러분의 홈을 방문한 분들을 위한 예의 라고도 볼 수 있습니다. "아 이홈을 만든 사람은 누구구나"라고 알 수 있게 해줘야 합니다. 그리고 이것이외에 "보기"메뉴의 "문서정보"도 있습니다. 이것역시 꼭 공부하셔야 할 메뉴들입니다. 여섯째날에서 설명해 놓았습니다

 

7) 상태바에 흐르는 스크립트 삽입하기(예제1)

스크립트를 삽입하는 것을 어렵게 생각하지 마세요.그냥 소스를 복사해서 여러분이 만들거나 만들고 싶은 웹 페이지에 복사해서 넣으시면 됩니다.간단한 html은 알고 계신다면 상당히 편합니다. 익스플로러에서 최적화 됐으니 익스로 확인하시길 바랍니다.

소스입니다 :

onLoad="timeONE=window.setTimeout('scrollit_r2l(100)',500);"

여러분이 만드신 웹페이지에는<body>태그가 시작하는 부분에 <bodybgcolor=뭐뭐뭐...text=머머머....>이렇게 시작하는 글이 있을 것입니다, 글이 끝나는 위치에 > 가 끝나지 않는 마지막 부분에 위 소스를 복사해서 붙이세요 그리고 쉼표라던지 < , > 등의 괄호 같은 것도 유심히 살펴보셔야 합니다. 모두 자바스크립트에서 필요한 것들입니다.

그리고 아래의 소스를 위에 글이 끝나는 위치에 복사해서 같다 붙이세요...

나모에서는 안타깝께도 html소스보기에서 복사,붙여넣기가 지원이 안됩니다. 제가 제일 아쉬워 하는 부분이기도 합니다.그러니 메모장에서 여러분이 작성하신 html문서를 열어서 복사,붙여넣기 작업을 하셔야 합니다. 약간 귀찮더라고 일일이 저런 영타를 치는 것보단 낫죠..아님 브라우저에서 html소스를 따와서 쓰시던지요.제일 쉽게 스크립트 넣는 방법이라고 생가합니다.처음에 태그의 복잡함 때문에 망설이시지 말고 천천히 따라해보세요 한두 번만 스크립트를 넣을 수 있다면 개념은 자연히 알아가니까요.

꼭 이소스 말고도 각 스크롤 되는 속도나 해당 값들은 value라는 곳이던지 숫자가 적힌 곳을 어는 값들을 변경해야 하는지 스크립트 환경설정을 하실수 있을 것입니다. 가령 time 같은 경우에는 글자가 흐르는 시간을 조절하는 값이겠죠. 이 값을 변경해 준다면 글자가 흐르면서 소요되는 시간에 맞출 수가 있죠.

소스입니다 :

<script language="JavaScript">
<!--
function scrollit_r2l(seed) {
var m0 = "안녕하세요 현입니다..";
var m1 = "현이 홈페이지에 오신 것을 환영합니다";
var m2 = "이 글들 대신에 여러분이 원하시는 글을 적으세요.";
var m3 = " 그럼 안녕히.";
var msg=m0 + m1 + m2 + m3;
var out= " ";
var c = 1;
if (seed > 100)
{
seed--;
var cmd="scrollit_r2l(" + seed + ")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0)
{
for (c=0 ; c < seed ; c++)
{
out+=" ";
}
out+=msg;
seed--;
var cmd="scrollit_r2l(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0)
{
if (-seed < msg.length)
{
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scrollit_r2l(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else
{
window.status=" ";
timerTwo=window.setTimeout("scrollit_r2l(100)",75);
}
}
}
//-->
</script>

 

8) 상태바에서 반짝이는 스크립트 삽입하기

위에서 어떻게 복사하고 넣는 가는 아실 것이라 믿습니다.이번에는 <head>태그에도 삽입을 해서 스크립트 효과를 주는 것입니다. 방법은 똑 같습니다. 상태바에서 글자가 반짝이는 소스입니다.

소스입니다 :

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var message="정말 쉬운 자바..복사하기만 하면 됩니다!";
var speed=400;
var visible=0;
function Flash() {
if (visible == 0) {
window.status=message;
visible=1;
} else {
window.status="";
visible=0;
}
setTimeout('Flash()', speed);
}
// End -->
</SCRIPT>

위의 소스를 <HEAD> 밑에 아무곳에다 붙여 넣기를 하세요.아무곳이라고 해서 글(태그)의 중간에 하시라는 애기가 아니라 문장이 마치는 곳 아무곳이나 붙여 넣으세요 {var message="정말 쉬운 자바..복사하기만 하면 됩니다!";}여기에 있는 말을 여러분이 원하시는 문장을 적어주시면 되구요.

그리고 아래문단의 소스는 앞장 상태바에 흐르는 글자에서와 마찬가지로 만든 웹문서의 <body bgcolor=뭐뭐뭐... begcolor=머머머...test=머머머..등등(이렇게 끝난다면 이곳에 붙여 넣기를 하시면 됩니다)> 바로 빨간 글씨의 부분에 복사해서 넣으시면 됩니다.

소스입니다 : onLoad="Flash()"

 

9) 애플릿 삽입하기(불꽃글자)

글자가 불에 타면서 사라지는 얘플릿입니다. 보신분들도 계시지만 처음 보시는 분도 있을 것입니다.애플릿을 삽입하는 것은 해당 애플릿의 소스가 있는 경로와 매개변수를 지정하는 것으로 끝납니다.


다만 애플릿마다 그 애플릿을 변화시키는 매개변수가 다 똑같지는 않습니다. 많은 애플릿을 직접 삽입하시거나 소스들을 많이 웹서핑 중에 보셔야 합니다. 일단 자료실에 있는 불꽃 글자 애플릿을 먼저 받으세요 

먼저 "애플릿 삽입"버튼을 눌러서 클래스 파일의 위치를 지정해 주고 난 다음에 클래스 파일을 선택하고 난 다음 오른쪽 마우스 버튼을 클릭하면 아래와 같은 애플릿 속성이 나오죠..

"코드"는 역시 클래스 파일이 있는 위치를 말하죠. "매개변수"를 클릭해서애플릿에 대한 환경을 설정해 주면 됩니다.각 변수에 대한 환경설정을 추가,수정,삭제등으로 편집해 주면 됩니다.

 

"font" :는 말그대로 글꼴을 정해주는 옵션입니다

"link" : 는 그림을 클릭하였을 때 이동하는 하이퍼 링크를 말합니다

"text" : 불에 타는 메시지에 나오는 글자를 말합니다..

 

 

 

그리고 직접 html로 보기에서 작업을 하실려면 아래와 같은 태그를 복사하시면 됩니다

<applet code=flame.class width=300 height=110>
<param name="text" value="안녕하세요+현이 입니다+멋있죠">
<param name="font" value="Helvetica">
<param name="link" value="http://www.shinbiro.com/~the1st/">
</applet>

<applet code=flame.class width=300 height=110>

 애플릿의 폭과 넓이를 결정하는 것입니다

<param name="text" value="Welcome to+Webker JAVA+Good Luck!">

메시지를 보여지는 것을 + 로 연결하여 적어 줍니다 

<param name="font" value="Helvetica">

말그대로 폰트에 대한 것을 지정해 줍니다... 

<param name="link" value="http://www.shinbiro.com/~the1st">

링크가 되어 진다면 그 주소를 적어 주는 것입니다.. 

</applet>

10) 글자가 올라가는 creditroll 애플릿 삽입하기

그럼 역시 매개변수를 한번 살펴볼까요. 나모에서 애플릿을 선택하고 마우스 오른쪽 버튼을 누루시면 애플릿 속성이 나오죠.역시 우리가 처음 애프릿 삽입했던 메뉴와 같죠.

creditrool 의 매개변수는 아래와 같죠. 그 세세한 기능에 대해서 알아보죠.

BGCOLOR은 말드래도 백그라운드 색깔을 말하는 것인데 애플릿이 올라가면서 글자는 검은색이고 배경은 힌색이었죠.

힌색인지 어떻게 아냐면 HTML에서는 그림 색깔을 표현할 때 영문으로 WHITE로 표현하기도 하지만 이런 숫자 코드로 인식을 하게됩니다. 이런 색상표는 자바 인트로 페이지에 [색상표]메뉴가 있죠 이 색상표를 참고해서 앞으로 애플릿에서 색깔을 구별하고 원하는 색깔을 넣도록 하세요.

FADEZONE 은 여기서 그렇게 신경쓰시지 않으셔도 되구요

FONTSIZE는 글꼴크기를 지정해주는 것이구요.REPEAT는 원하는 문장을 계속해서 반복해서 보여준다는 옵션입니다. 한번 반복하게 할려면 "NO"를 입력하면 되겠죠.

SPEED는 글자가 올라가는 속도 조절입니다.

TEXT 는 글자가 올라가는 한문장.한문장을 말합니다. 처음 올라가는 문장은 TEXT1, 두 번째 올라가는 문장은 TEXT 2 가 되겠죠. 여러분이 원하는 문장의 길이가 얼마정도에 되느냐가 따라 TEXT다음에 오는 숫자가 증가하겟죠. 여기서 보여지는 것은 TEXT6까지 있는데 여러분이 원하는 문장은 가령 7줄까지 쓰고 싶다면 옆에 있는 "추가"버튼을 눌러서  "이름"에는 TEXT7을 넣고 값에는 여러분이 원하는 문장을 넣으면 되겠죠. 한번씩 지금 연습해보세요. 실전이 최고입니다.

TEXTCOLOR 은 말그대로 글자의 색깔을 말하는 것이죠. 이것을 변하게 하고 싶다면 색상표에서 색상코드를 참고 하셔서 편집해서 쓰시면 되겠죠.

VSPACE 는 문장과 문장사이의 간격을 조절하는 값입니다. 문장간격을 이값으로 조절하시면 되겠죠

그리고 아래는 매개변수에 대한 HTML소스입니다. 나모에서도 위에서와 같이 불러와서 편집하셔도 되지만 html을 직접 편집하셔도 됩니다.해당 값들은 나모에서와 같습니다.  html에서도 어떤값들이 어떻게 보여지는 가도 아는 것이 나중을 대비해서 좋습니다

<TD width="740"><P align="center"><APPLET code="CreditRoll.class" codebase="creditroll/" width="350" height="150" align="middle" style="text-align:right;">
<param name="BGCOLOR" value="ffffff">
<param name="FADEZONE" value="20">
<param name="FONTSIZE" value="12">
<param name="REPEAT" value="yes">
<param name="SPEED" value="35">
<param name="TEXT1" value="글자가 올라가는 애플릿입니다.">
<param name="TEXT2" value="나모에서 매개변수를 클릭하세요">
<param name="TEXT3" value="애플릿도 어렵진 않죠">
<param name="TEXT4" value="궁금하면 게시판에 적어주세요">
<param name="TEXT5" value=".">
<param name="TEXT6" value=".">
<param name="TEXTCOLOR" value="000000">
<param name="VSPACE" value="12">
</APPLET>
 </TD>

 

11) 자바애플릿 쉬운 삽입의 팁

자바 애플릿 삽입하는데 가장 중요한 것은 역시 클래스 파일의 경로와 해당 클래스 파일의 매개변수에 대한 이해가 필요로 합니다.계속 반복하는 길이 최선의 길이죠

나모 2.1판이 발표 되면서 아래와 같은 버그들은 다 고쳐졌습니다. 그러나 2.02버전을 쓰고 계시는 분들은 이렇게 하실수밖에 없습니다.

일단 초보이신 분들은 웹서핑을 하시면서 여러분이 갖고 싶은 애플릿이 있다면 익스플로러에서 "html소스보기"를 하시고 메모장에서 열린 html소스를 다른이름으로 여러분의 하드에 저장하시구요. 저장된 html파일을 나모에서 열어보세요. 소스를 따온 페이지의 그림들은 보이지 않겠죠. 우리가 필요한건 애플릿이니 애플릿과 상관없는 그림이나 글자들은 지우거나 편집하세요. 그럼 테이블 안에 있는 애플릿만 남아 있겠죠. 그렇지만 아직 클래스 파일의 경로를 지정해 준 것이 아니니 브라우저에서도 에러가 나겠죠.

김호영님의 홈 와우맨님의 홈에 가시면 웬만한 소스들은 다 구할 수가 있습니다. 애플릿 등은 해당 애플릿의 모양이나 제작자이름등으로 애플릿 이름이 만들어 지니까 쉽게 따온 소스의 애플릿이 어떤 것인지 알겁니다. 위 두 개의 홈에서 여러분이 따온 애플릿소스를 다운받으시고 html소스를 따와서 작업하는 애플릿에 대한 클래스 파일의 경로를 지정해 주면 되겠죠. 그럼 일단 매개변수등은 소스 따온 곳에서 지정되어 있을 것이니 여러분은 그 매개변수들을 입맛대로 수정하셔서 사용하시면 되겠죠.

2.1판에서 고쳐진 내용은 여러 가지가 있는데 일단 html보기에서 복사 붙여 넣기가 가능해져서 소스 수정이 획기적으로 쉬워졌습니다. 여러분이 서핑중에 마음에 드는 홈이 있다면 웹마스터의 허락하에 충분히 소스를 수정해서 쓰시면 되겠죠. 그리고 애플릿 삽입하는데 있어서<applet>태그가 변환되지 않는 것을 고쳤으며 헤드태그에 들어가는 스크립트삽입이 쉬워졌구요. 사이트 매니저의 기능도 훨씬 좋아졌다는 것 이외에도 상당한 기능개선이 이루어졌습니다. 

 

12) 카운터,게시판,방명록 삽입하기

직업 여러분이 cgi소스를 편집하거나 따와서 쓰실수도 있겟지만 웹에선 공짜가 많죠. 카운터등도 공짜로 주는 곳이 많습니다. 제가 추천하는 곳은 http://www.cgiserver.net입니다. 가장 오류가 적은 것은 물론이고 가장 많은 사용자를 확보하고 있습니다.

여기서 게시판이나 방명록, 카운터 무료사용 신청을 하세요.그러면 소스 코드를 보여줍니다. 이것을 여러분의 홈에 삽입하시면 됩니다.쉽게 삽입하는 방법이 있습니다. 제가 카운터 단 소스를 예로 들어 보겠습니다.

예제 소스]

http://www.cgiserver.net/cgi-bin/counter/CrazyCounter.cgi?display=counter|ft=3|md=6|dd=A|df=여러분신청아이디.dat

라는 카운터 소스를 받으셨을겁니다. 그럼 카운터를 삽입하시고 싶은 곳에 일단 툴박스에서 그림 삽입하기를 선택하세요.그럼 소스부분이 나오죠. 우리가 직접 그림 파일을 삽입할 때는 "소스"부분이 경로가 되었던 것처럼 카운터 삽입할 때는 바로 위에 있는 소스가 그림소스가 되는 것입니다. 위의 카운터 소스를 그림삽입하기의 "소스"부분의 빈칸에 복사사해서 붙이면 되죠.간단하죠.

카운터와 같이 게시판도 쉽게 달 수가 있습니다. 게시판은 여러분의 계정에 있는 것이 아니가 http://www.cgiserver.net의 서버에 게시판이 존재하는 것입니다. 그러니 카운터에서와 달리 게시판으로 연결되고자 하는 낱말이나 그림등에 하이퍼 링크를 걸어서 http://www.cgiserver.net 의 서버에 존재하는 여러분의 게시판으로 연결되어지게 하면 되는 것입니다.

게시판 소스를 하이퍼 링크로 연결시키면 됩니다.가령 [게시판]이라는 여러분의 홈 메뉴가있다면 [게시판]을 드래그 하여 블록을 설정하고 "하이퍼 링크만들기"를 선택하고 난 다음에 여러분이 무료게시판 신청하고 받은 소스를 하이퍼 링크 주소에 복사해서 붙이시면 여러분만의 게시판도 탄생하는 것입니다. 다른 cgi소스도 이렇게 쉽게 사용할 수가 있습니다.