|
아무리 글자를 이용해 모양을 내고 화려한 이미지로 홈페이지를 구성하여도 너저분하게 나열된 홈페이지는 네티즌들의 시선을 끌 수 없으며, 그런 홈페이지는 머지않아 그 생명력을 잃게 됩니다. 따라서 원하는 위치에 텍스트나 이미지를 잘 정돈할 수 있는 일은 테이블의 기능을 이용해야 하며, 테이블을 잘 이용하는 것이 잘 구성된 홈페이지를 만들 수 있는 핵심입니다. 핵심이 된다는 말을 염두에 두시고 표의 활용에 대해 세심한 관심을 두시기 바랍니다.
표를 이용한 홈페이지 만들기 홈페이지를 만들기 위해서는 먼저 홈페이지의 전체적인 구성을 이해하는 것이 중요합니다. 아래 화면처럼 복잡한 이미지와 글씨들로 구성이 되어 있는 화면을 보기 좋게 배치하기 위해 테이블을 이용했습니다. 이처럼 표현하고 싶은 내용을 표로 먼저 레이아웃을 잡아 주는 것이 깔끔한 홈페이지를 만들수 있는 근본이 됩니다.
레이아웃(LayOut) 편집 디자인에서 많이 사용되는 용어로, 디자인을 표현하기 위해 어떻게 디자인을 구성할 것인가에 대한 개괄적인 스케치를 말합니다. 이것은 일반적으로 다단 구성으로 분류되는데, 특히 신문이나 잡지를 보면 다단 구성에 대해 쉽게 이해 할 수 있습니다. 다시 말해 우리들이 흔히 말하는 3단 구성, 4단 구성으로 짜여진 전체적인 편집 디자인의 구성을 레이아웃이라고 합니다.
표의 기본 구조
① 먼저 홈페이지를 어떻게 구성할 것인지 레이아웃을 생각합니다.
②
아이콘을 눌러 삽입하고자 하는 표의 줄과 칸을 마우스 끌기로 지정하면, 문서에 표가 삽입됩니다.
③ 마우스 왼쪽버튼을 누른 상태로 그림을 끌어 표의 왼쪽 셀로 이동시킵니다.
④ 먼저, 마우스 끌기로 문자열을 선택하고, 마우스 왼쪽버튼을 누른 상태로 문자열을 끌어 표의 오른쪽 셀로 이동시킵니다.
⑤ 표의 크기나 정렬, 배경색, 배경 이미지, 셀에 대한 설정을 지정하기 위해 표 위에서 마우스 오른쪽 버튼을 눌러 [표 등록 정보]를 선택합니다.
⑥ 표의 형태와 정렬, 표의 배경색 등을 지정하고 [확인]버튼을 누릅니다.
⑦ 셀의 크기나 정렬, 배경색, 배경 이미지 등을 지정하기 위해 해당 셀 위에서 마우스 오른쪽 버튼을 눌러 [셀 등록 정보]를 선택합니다. 셀 속의 문자나 이미지의 정렬방식, 셀의 배경색 등을 지정하고 [확인]버튼을 누릅니다. 이러한 셀 등록 정보는 하나의 셀에만 적용되므로 각각의 셀마다 배경색이나 정렬방식을 달리 할 수 있습니다.
표를 이용해서 자신을 소개하는 페이지 만들기
① 표를 이용해서 홈페이지에 나를 소개하는 페이지를 만들어 보겠습니다. 먼저 표를 어떻게 구성할 것인가를 생각하셔야 합니다. 아래와 같이 내 소개페이지를 만든다고 할 때 먼저 몇 줄, 몇 칸인지 계산해야 합니다. 줄과 칸을 계산할 때 가장 많은 줄이나 칸을 기준으로 계산하시기 바랍니다. 즉, 세로는 4칸이되고, 가로는 6줄이 됩니다.
여기서 주의하실게 있습니다. 사진이 들어갈 셀은 세 줄을 합쳐 놓은 것입니다. 이것을 [셀병합]했다고 합니다. 프론트페이지 익스프레스는 가로는 셀병합을 할 수 있는데, 세로는 셀병합을 할 수 없습니다. 따라서, 사진이 들어갈 셀처럼 세로로 병합되어야 할 경우에는 일단, ①②③ 세줄을 하나의 줄로 계산한 후 나중에 [셀나누기]로 이름, 생년월일, 연락처로 나누어 줍니다. 따라서, 지금과 같은 경우에는 4줄 4칸으로 먼저 표를 선택하시기 바랍니다.
② 프론트페이지 익스프레스를 실행해서 새로운 문서를 열고,
③ 표가 삽입되면 먼저, 이름, 생년월일, 연락처가 들어갈 세 줄을 만들어 주어야 합니다. 먼저, 마우스 끌기로 나누고자 하는 셀을 선택합니다. 그림처럼 셀이 검게 선택되고 커서가 마지막 셀에 위치하면 메뉴에서 [표]→[셀 나누기]를 선택합니다. 가로로 나눌거면 행으로 나누기를 선택하고 [행 수]를 나누고자 하는 숫자로 지정해 줍니다. 이 경우에는 3줄이 됩니다.
④ 이제 필요없는 셀을 병합해 하나의 셀로 만들 차례입니다. 셀 나누기와 마찬가지로 병합하고자 하는 셀을 마우스 끌기로 선택하고, [표] →[셀 병합]을 선택합니다. 셀병합을 이용해 표가 원하는 모양이 되도록 작성합니다.
표의 모양이 완성되면 글씨를 입력해야 합니다. 입력하고자 하는 셀을 마우스 왼쪽으로 선택하고, 커서가 위치하면 글씨를 입력합니다.
⑤ 각 셀위에서 마우스 오른쪽 버튼을 눌러 [셀 등록 정보]를 이용해 셀의 배경색이나 셀 속에 있는 이미지와 문자를 보기 좋게 정렬합니다.
프레임을 이용한 홈페이지 만들기 프레임이란, 하나의 브라우저 화면이 여러개로 나뉜 것을 의미합니다. 이렇게 나뉜 프레임으로 각각의 다른 HTML문서를 보여줄 수 있으므로 여러 개의 HTML문서를 동시에 보여줄 수 있습니다. 이렇게 여러 개의 HTML문서를 동시에 브라우저에 나타내는 것은 여러 가지 정보를 동시에 보여 주기 위해서이기도 하지만, 그 보다는 정보를 빠르고 정확하게 홈페이지 방문자에게 제공하려는 목적으로 더 많이 사용됩니다.
가장 대표적인 프레임의 예로 브라우저 화면을 둘로 나누어 왼쪽 프레임에는 메뉴목록이 표시된 HTML문서를 나타내고, 오른쪽에는 각각의 메뉴에 대한 내용을 보여 주고자 할 때 프레임은 필수적으로 사용됩니다. 프레임을 만들 때는 </head>와 <body> 태그 사이에 관련 태그를 넣어 주어야 합니다.
프레임의 기본구조 애석하게도 프론트페이지 익스프레스는 프레임 편집 기능이 없습니다. 따라서, 메모장에 직접 HTML태그를 입력하여 프레임을 이용한 홈페이지를 만들어 보도록 하겠습니다. 인터넷중급 사이버연수 주차별 학습목차 화면입니다. 하단에 있는 프레임에는 각종 메뉴로 구성이 되어 있고, 메뉴를 누르면 상단 프레임에 해당 내용을 보여주는 프레임 구조입니다.
<html>
<head>
<title>인터넷중급과정 학습일정안내</title>
<base target="content">
</head><frameset rows="*,32" border="1">
<frame name="main" src="main.htm">
<frame name="menu" src="menu.htm" noresize>
</frameset><body>
</body>
</html>
① 프레임 관련 태그는 브라우저의 화면을 분할하는 기능만을 지녔을 뿐 HTML문서의 본문내용과는 무관하기 때문에 </head><body>사이에 표현해야 합니다.② <frameset>으로 시작해서 </frameset>으로 끝납니다.
③ <frameset>과 </frameset>사이에 <frame>으로 프레임 이름, 프레임에 보여줄 HTML문서의 주소를 정의합니다.
<frameset rows="*,32" border="1">
프레임의 시작입니다. rows는 화면을 수평으로 분할하라는 의미입니다. 화면을 수직으로 분할하려면 cols라고 써줍니다. 따라서, rows="*,32"는 화면을 수평분할하는데 아래 프레임의 크기는 32픽셀(pixel)이고 위 프레임은 그 나머지의 크기를 갖습니다. 예를들어 내 컴퓨터의 해상도가 800X600이라면 아래 프레임은 32이고 위 프레임은 568이 됩니다. 화면을 3개로 분할하려면 rows="100,*,100"과 같이 적어 줍니다. 그러면 첫번째와 세번째 프레임의 높이는 100, 중간에 있는 프레임은 그 나머지인 400이 됩니다.
border="1"이라는 것은 프레임과 프레임사이의 구분선의 두께입니다. 구분선 없이 표시하려면 border="0"이라고 적어줍니다.
<frame name="main" src="main.htm">
<frame name="menu" src="menu.htm" noresize>실제 프레임에 대한 정의입니다. 위 <frameset rows="*,32 border="1">에서 수평으로 두개의 프레임을 지정했으므로 frame이 두번 정의되어야 합니다. name="main"은 해당 프레임의 이름입니다. src="main.htm"은 프레임에 표시해줄 HTML문서의 주소입니다.
noresize는 프레임의 크기를 조절할 수 없게 하는 옵션입니다.
내 홈페이지를 프레임으로... 이제 내 홈페이지를 프레임으로 바꿔 보겠습니다. 지금까지는 index.html에 어떤 내용이 들어 있었습니다. 하지만, 프레임으로 구성하려면 index.html이 프레임을 정의하는 파일이고, 지금까지 홈페이지였던 index.html을 다른 이름으로 바꾸고, 새로운 index.html에서 <frame...>으로 불러 주어야 합니다.
① 먼저, index.htm을 다른 이름으로 바꿉니다. index.html파일 위에서 마우스 오른쪽버튼을 눌러 [이름 바꾸기]를 선택합니다. 저는 main.htm으로 바꾸겠습니다.
② [시작]→[프로그램]→[보조프로그램]에서 메모장이나 워드패드를 실행해서 위에 있는 프레임 기본구조를 그대로 입력합니다. 화면을 수평으로 분할하는 것보다 보통은 수직으로 분할해서 좌측프레임은 메뉴, 우측 프레임은 메뉴를 눌렀을 때 나타나는 내용으로 구성합니다. 따라서, 먼저 <frameset rows="*,32" border="1"> 대신 <frameset cols="150,*" border="0">로 바꿔줍니다.
그리고, 프레임에 나타날 HTML문서는 좌측프레임은 menu.htm으로 하고, 우측은 지금까지 홈페이지였던 index.html의 이름을 바꾼 main.htm으로 지정해 줍니다.
수정이 되었으면, 메모장이나 워드패드이 [파일]→[다른 이름으로 저장]을 차례로 눌러 c:의 MyHomepage에 index.html로 저장합니다. 이제 이 HTML문서가 첫 페이지가 되는 것입니다.
③ 다음으로 좌측프레임에 보여줄 메뉴를 만들어야 합니다. 프론트페이지 익스프레스를 이용해 구성하고자 하는 메뉴항목을 만들고, 하이퍼링크로 각각 HTML문서로 연결시켜 줍니다. 여기서 아주 중요한 것이 있습니다. 좌측프레임의 메뉴에서 [내가 누굴까요?]를 눌렀을 때, 내 소개페이지가 표시되어야 하는데 아무것도 지정해 주지않으면 그대로 좌측프레임에 문서가 표시됩니다. 이때, 프레임을 지정할 때 <frame name="main" src="main.htm">에서 프레임의 이름을 준 기억이 나십니까? 바로 이 프레임의 이름을 지정해 주어야지만 우측프레임에 문서를 표시할 수 있습니다.
아이콘을 눌러 해당 경로로 적어주고 아래쪽에 [대상 프레임]에 어느 프레임에 문서를 표시할 건지 표시해 줍니다. 우측프레임의 이름은 main이었습니다.
⑤ story01.htm과 story02.htm의 제일 밑에 홈페이지로 돌아갈 수 있는 하이퍼링크를 지정한 것을 기억하십니까? 그 때 돌아갈 주소가 index.html이었습니다. 따라서, 홈페이지로 돌아가기를 누르면 main이라는 우측프레임에 다시 index.html을 표시하니 좌측프레임이 그림처럼 두개가 됩니다. 이것을 해결하기 위해서는 돌아갈 홈페이지가 index.html이 아니고 main.htm이 되어야지만 좌측프레임이 두번 표시되는 것을 막을 수 있습니다. story01.htm과 story02.htm의 홈페이지로 돌아가기 링크를 index.html이 아니라 main.htm으로... 잊지 마시기 바랍니다.
⑥ 이제, 모든 파일을 서버로 등록하고 프레임이 잘 표시되는지 확인하시기 바랍니다. 하이퍼링크 확인하는 것도 잊지 마세요. 홈페이지에 접속하면 index.html이 자동으로 두개의 프레임에 menu.htm과 main.htm을 표시해 줍니다.
|
|
|
|
