넷째날 : 테이블과 프레임셋으로 세련된 웹페이지 만들기

1) 프레임을 나누는 이유

프레임이 없는 평면 페이지는 목차 이상의 설명과 기능을 하기에는 화면을 세분화 시키고 그에 따르는 그래픽 실력과 시간이 상당히 소요 됩니다. 그러나 프레임으로 나눈 페이지는 차례의 기능과 설명의 기능을 한 화면에 효과적으로 구현할 수 있습니다. 가령 수직으로 프레임을 나누어 왼쪽에는 목차의 형식으로 오른쪽 페이지에는 목차에 대한 설명을 한다면 방문자들이 좀더 이해가 빠르게 여러분의 홈페이지를 감상할 수가 있을 것입니다. 그렇지 않다면 인트로 페이지는 그림이나 자바 스크립트. 애플릿등을 이용해 처리하고 인트로 페이지 다음의 메인 페이지에는 효과적인 프레임으로 나누어 설명을 한다면 편할 것입니다. 만드는 사람보다 보는 사람을 위해 홈페이지를 제작해야 한다는 사실을 잊지 마세요.

나모에서는 프레임을 쉽게 나눌 수가 있습니다.첫째날에서 배웠던 새글의 형식에서도 프레임셋으로된 웹 페이지를 열 수도 있고 메뉴바에 있는 프레임(R)에서도 수직 또는 수평으로 프레임을 쉽게 나눌 수가 있습니다.

 

2) 프레임 나누고 프레임 문서 저장하기

프레임으로 일단 나누어 보죠. 꼭 따라해 보세요.!! 메뉴바의 프레임(R)을 클릭해 보세요.
"새 프레임셋" 에는 새글에서 열었던 것과 마찬가지로 여러 가지의 프레임으로 나눈 샘플문서들이 보이죠. 여기서 여러분이 원하는 프레임 형태를 정해서 열어 보세요. 해당 프레임셋의 기능과 미리보기와 설명도 더불어 나와서 초보분들이라도 어떤 프레임 형식이 어떤때에 필요한지 쉽게 알 게 해주죠.

그렇지 않으면 여러분이 직접 나누어 보세요. "새 프레임셋" 이후에 활성화 되어 있는 메뉴중에 화면을 세로로 나누고 싶으면 "수직으로 프레임 나누기(Z)"을 선택하시면 되고 수평으로 웹페이지를 나누고 싶으시면 "수평으로 프레임 나누기(T)"를 선택하시면 되겠죠.그럼 여러분 마음대로 프레임 기둥을 드래그해서 웹 페이지를 나눌 수가 있습니다.

그럼 프레임 셋을 나누어 봤으면 프레임문서를 저장해야겠죠. 일반 문서와는 저장하는 것이 조금 틀리죠.일단 프레임으로 나눈 문서는 나눈 부분이 각각 한 문서가 되는 것입니다. 가령 수직으로 프레임을 나누었다면 외쪽의 문서도 하나의 페이지 오른쪽의 페이지도 하나의 페이지가 되고 그렇게 나뉘어진 프레임의 밑바탕 문서도 있습니다. 그것이 최종 프레임 문서입니다.  한번만 프레임으로 나누었다면 웹문서는 총3개가 되는 것입니다. 여러분께서 직접 프레임을 나누고 "닫기"를 눌러 보세요

그리고 원하는 부분에다 마우스를 놓고 다른 "프레임으로 저장"이나 툴박스의 디스켓 모양의 버튼을 누르면 프레임으로 나뉜 문서의 이름을 다르게 지정해서 저장할 수도 있습니다.

 

3) 프레임 속성 첫번째

프레임으로 나눈 문서의 속성을 결정하는 것이죠. 여러분이 지금까지 그림 삽입등에서 보셨던 인터페이스를 유지하기 때문에 낯설지는 않을 것입니다.

먼저 마우스 커서를  수직으로 프레임을 나누었다면 오른쪽 문서든지 왼쪽에 위치한 문서이든지 나뉘어진 프레임 문서에 정확히 위치 시키세요. 마우스 커서가 위치한 페이지의 프레임 속성이 결정되는 것이니까요.
마우스 오른쪽 버튼에서 선택하셔도 되고 프레임(R)메뉴에서도 선택하셔도 됩니다.

옆에서 보이는 그림은 프레임 속성의 윗부분이죠. "소스(S)"는 여러분의 마우스 커서가 위치한 문서 즉 여러분이 선택한 프레임으로 나뉜 문서를 말하죠. "이름(N)"은 프레임으로 나뉜 문서를 링크하기 쉽게 파일명이 아닌 별명처럼 사용자 정의를 해주는 것입니다.
"기본대상 프레임(F)"은 하이퍼 링크에서 설명을 드렸죠. 그리고 여러분께서 이름을 설정하셨다면 기본대상 프레임에도 그 "이름(N)"에서 설정한 이름이 보일것입니다. 

 

4) 프레임 속성 메뉴 두 번째

이번에는 프레임 속성의 아래쪽 메뉴이죠.프레임 문서의 중요 속성을 여기서 결정합니다.

크기는 각 나뉜 문서의 크기를 결정하죠 "폭"을 선택하신 다면 원하는 크기만큼 픽셀.%등의 비율로 나눌 수가 있죠.프레임 문서를 동일하게 여러장 만든다면 폭의 크기를 마우스 드래그 만으로 조절할 수 없고 크기에서 "폭"을 정확하게 알아야겠죠.

"여백"에서는 한글에서 편집할 때 편집 용지와 같은 것이죠. 프레임 문서의 여백의 크기를 폭과 높이로써 지정해 줍니다.

"선택사항"의 "크기재조절의 체크를 지운다면 프레임 막대를 마우스로 드래그해서 움직이지 못하게 고정을 시켜줍니다. 실수로 옮겨지는 것을 방지하겠죠.  "말림막대(C)"는 화면에 보여지는 문서가 길어질 때 마우스로 드래그 해서 프레임 문서를 뒤로 내려 주는 역할을 하는 것이죠 "예"를 선택한다면 밑으로 말림막대를 내릴 수 있게 되고 "아니오"를 선택하면 말림 막대가 고정되어 버립니다. "자동"을 선택한다면 여러분이 작업하면서 길어진 문서의 길이만큼 자동적으로 커서가 계속 밑으로 이동되어 집니다. 브라우저에서 확인해보세요.

"경계선 두께"는 프레임 기둥의 두께를 말하죠. 0으로 선택하여도 나모에서는 형태는 보입니다만 브라우저에서 확인하시면 두께가 없음을 느끼실 겁니다.

 

5) 테이블을 이용해서 정리하기

테이블(표)는 홈페이지 제작시 상당히 유용하게 쓰입니다. 신문사이트나 각 isp의 홈페이지에서 보셨겠지만 잘 정리된 화면들을 보셨죠.이런 것들 역시 테이블을 이용해서 정리한 것이고 그림 파일을 단순히 삽입하는 것이 아니라 테이블의 모양에 따라 여러 가지 모양으로 테이블을 이용해서 삽입할 수도 있습니다.

자바 애플릿이나 스크립트등을 삽입하게 될 때에도 표안에 삽입을 함으로써 이동.복사도 편하게 할뿐더러 많은 스크립트나 애플릿들이 표안에 삽입되어서 사용됩니다. html을 조금이라도 아시는 분들은 웹서핑 중에 html소스를 보셨다면 아실겁니다.

나모에서 표를 만드는 것은 워드에서 표를 만드는 것처럼 툴박스의 "표만들기"버튼을 이용해서 워드에서 처럼 드래그해서 만들 수도 있고 메뉴바의 "표(A)"에서도 새로운 표를 좀더 옵션을 정해서 만들 수도 있습니다. 툴박스에서 드래그 해서 만들어 보세요.

만들어진 표안에 마우스오른쪽 버튼을 눌러 보시면 해당 표에 대한 속성과 표안의 각 셀에 대한 속성이 나오죠 셀이란 표안에 있는 각각의 빈칸들을 말합니다.

다음장에는 테이블의 속성과 어떻게 쓰이는지 알아보겠습니다.

 

6) 테이블 속성

일단 표에 대한 전반적인 속성에 대해서 알아보도록 하겠습니다. "표속성"이 바로 전체 표에 대한 환경설을 할 수 있는 곳입니다.

 "셀크기"는 각 표속에 있는 셀들의 크기를 정하는 곳인데 이미 기본적인 크기가 정해져 있죠

"크기"는 "폭지정"과 "높이지정"에 체크를 하고 난 다음에는 숫자와 크기를 조절하여 표의 크기를 조절할 수가 있습니다. 마우스로 직접 표에서 적용할 수도 있습니다.

"모양"에서는 표안에 글자나 그림이 들어갈 때에 어떤 형식의 모양으로 들어 가는가를 결정합니다.

"테두리 선 두께"는 표의 가장 외곽선의 두께를 결정하는 곳입니다. "0"으로 한다면 외곽선이 보이지 않겠죠. 그래서 각각의 사이트에 외과선이 보이지 않게되는 겁니다. "셀 안쪽 여백"에는 셀의 여백을 결정하는 것입니다. 크기를 늘려주면 셀의 공간이 넓어집니다. " 선 간격"은 각 셀과 셀사이를 연결하는 선과 선의 간격을 넓혀 주는 것입니다. 이 값을 조절함으로 각 셀들끼리 거리감이 있게 정리된 모습으로 보여지게 됩니다.

"배경"은 표의 색깔과 그림을 넣게 해주는 곳입니다. "색깔"에서는 표속의 색깔을 지정해 줍니다. 기본적으로 하얀 기본색으로 설정되어 있지만 원하는 색깔을 넣어 표를 꾸며 홈 페이지를 더욱 깔끔하게 꾸밀 수 있습니다 " 그림"은 표속에 들어갈 그림을 지정해 주는 것입니다.당연히 클립아트 역시 삽입할 수 있습니다.

 

7) 표안의 셀을 이용하는 방법

표속성에 이어 셀속성에 대해서 알아봅니다. 셀이란 표속에 포함되어 있는 각각의 칸들을 말합니다. 이 셀들을 각각 꾸밀 수 있는 메뉴가 셀속성 메뉴입니다. 셀속성 메뉴는 표속성 메뉴와 상당히 유사합니다.

 

"정렬" 방식은 글자나 그림의 모습을 수직 수평 어느 방향으로 정령하고 맞추는가를 결정합니다. "크기"와 "배경"역시 표 속성에서 살펴보았던 것처럼 각 셀의 크기와 셀의 배경과 그림삽입을 결정하는 것입니다.

"모양"에서 "제목 셀로(D)" 를 체크하면 해당 셀의 수식이 제목 셀 형식으로 자동으로 꾸며지는 효과를 줍니다. "자동 줄바꿈 금지"는 각 셀의 영역이 끝나면 자동으로 셀안에서 줄이 바꾸어 지는 것이 아니라 옆에 셀까지 글자가 침범해서 적게 되는 기능입니다. 특별한 이유가 없다면 체크 안하는 것이 좋은 옵션입니다

 

테이블에 대해서 알아보았습니다. 테이블은 많은 자료와 부메뉴가 있을 때 상당히 방문자들이 해당 페이지의 구조를 가장 쉽게 보게 해줍니다. 예제는 다음장에서 공부하세요.