• 10. 이중 프레임셋 사용하여 인덱스 페이지 만들기
  • [레벨:18]Zappy (IP: *.140.105.100)
    조회 수: 15811, 2010-05-11 13:06:33(2010-05-10)
  •  이중 프레임셋 사용하여 인덱스 페이지 만들기

        홈페이지에 프레임을 사용할 때의 단점중 하나는 해상도에 따라 홈페이지가 달라 보일수 있다는 점입니다. 하지만 프레임 설정을 잘 해주면 어느 해상도든지 똑같이 나오게 할 수 있습니다. 이제 zappy의 태극기 휘날리며 사이트의 첫 화면을 만들것입니다.

       

      열려있는 문서를 모두 닫고 파일->새글을 실행합니다.
    프레임 셋으로 들어가서 두 번째 프레임셋을 클릭하고 확인을 클릭합니다.
      반씩 쪼개진 화면을 볼수 있을 겁니다. 왼쪽 문서에 커서를 위치시키고 마우스 오른쪽키->프레임 속성으로 들어갑니다

      지금부터 잘 따라하세요. 네모칸 친부분을 클릭합니다.

      (왼쪽에 있는 마우스 그림이 잘못되어 있습니다. 오른쪽 클릭이 아니라 왼쪽클릭입니다. 죄송합니다 ㅡㅡ;;)

      전에 그림파일을 링크걸었었기 때문에 모든파일을 보게 되어 있습니다. 웹문서 파일로 고쳐놓습니다.

      html 폴더를 찾아 들어갑니다.

      frame1 문서를 선택하고 열기 합니다.

      그림과 같이 설정해주고 확인을 누릅니다. ^^;;
      반쪽으로 나누어진 화면의 오른쪽에 커서를 위치시킨뒤 마찬가지로 프레임 속성으로 들어갑니다.

      프레임 너비를 상대적 으로 선택합니다. 아까와 다르게 스크롤 막대 표시를 아니오로 하고 확인합니다.

      프레임 너비를 상대적으로 한 것은 해상도가 다른 사용자를 위한 것입니다.

     우리가 지금 만드는 홈페이지의 최저지원 해상도는 800*600입니다. (요즘 홈페이지들 대부분이 최저 해상도를 1024*768 로 설정하고 있습니다. 상식으로 알아두세요.)

      이번에는 마우스 오른쪽키를 클릭하여 문서속성으로 들어갑니다.

      배경색을 그림과 같이 CCCCCC로 설정합니다.

      설정했으면 확인을 클릭합니다. 지금 배경설정한 문서를 저장하겠습니다.

      커서가 오른쪽 프레임에 있는 상태에서 저장하기를 실행하고 right 이름으로 저장합니다.
      그림과 같이 마우스 오른쪽 클릭으로 닫기 실행을 합니다.
     menu1 문서는 frame1 프레임셋의 윗부분 문서입니다. 그림과 같은 메시지가 나오면 아니오를 클릭합니다.

     왼쪽 그림과 같이 나오면 예를 클릭합니다.

    여기서 말하는 frame1.htm 문서는 홈페이지/html 폴더에 있는 frame1.htm 문서가 아닙니다. 지금 우리가 새로 생성한 프레임셋을 말하는 겁니다. (프레임셋 만들기 했을 때 임의의 이름인 frame1이 주어짐)

      홈페이지 폴더로 이동해서 index 이름으로 저장합니다. 왼쪽 그림과 같은상황인지 확인하세요. html 폴더에 저장하는 것이 아닙니다.

     index 문서는 홈페이지의 처음화면을 결정하므로 항상 가장 상위 폴더에 위치되어야 합니다.

      화면이 썰렁해졌을 겁니다. 열기를 합니다.
      방금 저장했던 index 문서를 열기하여 불러옵니다.
      첫화면에 제목을 넣어주겠습니다. 나모 하단에 있는 프레임셋 소스 부분을 클릭합니다.
     왼쪽 메시지가 나오면 예를 클릭합니다.
      골치아픈 태그들이 나옵니다. title 부분을 그림과 똑같이 zappy의 태극기 휘날리며로 수정합니다.
      다시 작업화면으로 나오겠습니다. 나모 왼쪽 하단의 '편집'을 클릭합니다.
      외관상 바뀐게 없습니다. 나모메뉴에서 파일-> 모두 저장하기를 실행합니다.

    인터넷 익스플로러로 보기를 실행합니다. 왼쪽그림은 익스플로러 브라우저로 보기 했을 때의 장면입니다.

      창 제목에 zappy의 태극기 휘날리며가 들어가 있습니다. 아랫쪽에 주소부분은 C:\홈페이지\index.htm 으로 되어 있습니다. 이것이 우리가 만들려고 하는 홈페이지의 첫 화면입니다.

      여기까지 해서 브라우저로 확인해보시면 알겠지만 왼쪽 메뉴에 아무런 링크가 걸려있지 않습니다. 이제 왼쪽 메뉴 부분에 링크를 걸 것이고 메뉴에 마우스를 가져가면 그림이 바뀌는 롤오버 기능을 사용할 것입니다. 무료 게시판도 만들어서 링크할 것이고요.

       

    <-이전단계로           다음단계로->

     

     

댓글 0

번호 제목 닉네임 조회  등록일 
notice [레벨:18]Zappy 20777 2010-05-10
[레벨:18]Zappy 15811 2010-05-10
5 [레벨:18]Zappy 14897 2010-05-10
4 [레벨:18]Zappy 17823 2010-05-10
3 [레벨:18]Zappy 14477 2010-05-10
2 [레벨:18]Zappy 22360 2010-05-10
1 [레벨:18]Zappy 16725 2010-05-10
XE Login