연습 1.4: 웹 사이트의 룩앤필 디자인

데모 보기

웹 사이트 디자인을 시작하기 전에 연습 1.3: 웹 사이트를 웹 페이지로 채우기를 완료하십시오.

구성 단위로서, 웹 사이트를 구성하는 웹 페이지는 서로 유사한 비주얼 디자인 및 레이아웃을 가지고 있어야 합니다. 개별 페이지는 서로 관련되어 있어야 완전한 하나의 웹 사이트가 됩니다. 따라서 프로젝트를 시작하는 데 있어 먼저 웹 사이트 디자인을 고려한 후 개별 웹 페이지를 작성하는 것이 바람직합니다. 그렇지 않으면 구성 또는 뚜렷한 비주얼 관계도 없는 몇 개의 결합되지 않은 웹 페이지만으로 웹 사이트가 구축될 수 있습니다.

웹 사이트에 대해 공통의 룩앤필을 작성하기 위한 최상의 방법은 페이지 템플리트를 사용하는 것입니다. 페이지 템플리트는 사이트에 있는 모든 페이지에서 공통 요소를 제어하기 위해 사용할 수 있는 단일 파일입니다. 페이지에 템플리트를 적용하고 나면, 템플리트에서 변경을 한 번만 수행하여 나중에 디자인 변경을 위한 노력을 최소화할 수 있습니다. 변경사항은 해당 템플리트를 사용하는 모든 페이지에 적용됩니다.

페이지 템플리트는 공통 영역 및 컨텐츠 영역을 갖도록 디자인되어 있습니다. 공통 영역은 페이지 템플리트를 사용하는 모든 페이지에 공통되는 공유 영역이므로, 사이트 배너와 탐색 영역과 같이 모든 페이지에 동일한 요소에 유용합니다. 컨텐츠 영역은 페이지마다 다릅니다. 개별 페이지에 템플리트를 적용하고 나면, 해당 페이지에서 컨텐츠 영역을 편집하여 페이지에 특정한 정보를 추가할 수 있습니다. 특정 페이지에 고유한 텍스트 및 이미지와 같은 페이지 요소는 페이지 템플리트의 컨텐츠 영역으로 이동하는 요소의 유형입니다. 템플리트에서 원하는 만큼 많은 컨텐츠 영역 및 공통 영역을 작성할 수 있습니다.

페이지 템플리트는 스타일시트를 사용할 경우와 아주 다른 방법으로 사이트 레이아웃의 룩앤필을 제어합니다. 자세한 정보는 페이지 템플리트 및 스타일시트에 대한 추가 학습을 참조하십시오.

이 학습서에서는 전체 안내 광고 사이트에 대해 일관성 있는 룩앤필을 디자인하기 위해 페이지 템플리트를 작성하고 일부 컨텐츠 및 공통 영역을 정의합니다. 이 페이지 템플리트는 각 페이지 룩앤필이 다음 디자인과 유사하도록 합니다.

기본 사이트 레이아웃

페이지 템플리트 새로 작성

  1. 프로젝트 탐색기 보기에서 프로젝트 이름 ClassifiedsTutorial을 마우스 오른쪽 단추로 클릭하십시오.
  2. 팝업 메뉴에서 새로 작성 > 페이지 템플리트 파일을 선택하십시오. 새 페이지 템플리트 파일 마법사가 열립니다.
  3. 기본 폴더(/ClassifiedsTutorial/WebContent)를 사용하십시오. 이 폴더는 템플리트 파일이 작성된 후 위치하는 곳입니다.
  4. 파일 이름 필드에 템플리트 파일의 이름을 입력하십시오. 이 학습서의 경우, 파일 이름으로 template를 지정하십시오. 결과 파일의 전체 이름은 template.jtpl이 됩니다.
  5. 마크업 언어로 HTML이 선택되어 있는지 확인하십시오.
  6. 모델JSP를 포함하는 템플리트를 선택하십시오.
  7. 고급 옵션 구성 선택란은 선택 표시가 지워진 상태로 두십시오.
  8. 완료를 클릭하십시오. Page Designer에 새 템플리트가 열립니다. 공백 템플리트가 열리면, 최소 하나의 컨텐츠 영역을 템플리트에 추가해야 한다는 내용이 대화 상자에 표시됩니다. 확인을 클릭하여 대화 상자를 닫으십시오.

공백 템플리트에 일부 요소 추가

템플리트를 작성했으므로 공백 템플리트에 요소를 추가해야 합니다.
  1. 텍스트 여기에 컨텐츠 배치를 삭제하여 시작하십시오.
  2. 페이지 템플리트 구조를 레이아웃하기 위한 가장 쉬운 방법 중 하나는 보이지 않는 테이블을 사용하는 것입니다. 이 방법을 사용하면 여러 방식으로 사용할 페이지 섹션을 지정하고 페이지에서 오브젝트 배치를 제어할 수 있습니다.
    1. 팔레트 보기에서 HTML 태그 드로어를 클릭하여 펼치십시오.
    2. 팔레트에서 공백 템플리트로 테이블 구성요소를 끌어 오십시오. 테이블 삽입 대화 상자가 열립니다.
    3. 이 템플리트의 경우에는 세 개의 행과 하나의 열이 필요합니다. 필드에 3을 입력하고 필드에 1을 입력하십시오.
    4. 그런 다음 확인을 클릭하십시오. 테이블이 템플리트 페이지에 표시됩니다.
  3. 처음에는 테이블이 아주 작게 표시됩니다. 테이블 속성을 편집하여 테이블의 크기 및 구조를 조정해야 합니다.
    1. 테이블을 마우스 오른쪽 단추로 클릭하고 특성을 선택하여 특성 보기를 여십시오.
    2. 특성 보기에서 테이블 탭을 클릭하십시오.
    3. 맞추기 필드에서 가운데를 선택하십시오. 그러면 페이지 가운데에 테이블이 위치합니다.
    4. 페이지가 표시되는 화면의 크기에 따라 템플리트 구조가 확장되도록 테이블의 전체 크기를 늘려야 합니다. 그렇지 않으면 페이지 디자인이 고정 크기로 표시되어 작은 화면에 너무 크게 표시되거나 큰 화면에 너무 작게 표시될 수 있습니다. 테이블 너비테이블 높이 필드에서 90을 입력하고 백분율(%) 부호를 선택하십시오.
    5. 테이블 아웃라인을 실제로 페이지에 표시할 것이 아니므로, 경계0픽셀로 설정해야 합니다. Page Designer는 보이지 않는 테이블 테두리를 점선으로 표시합니다.
  4. 웹 사이트 이름과 비주얼을 알리는 모든 페이지의 맨 위에 있는 배너가 사이트를 함께 연결되도록, 이 레이아웃 테이블에서 배너를 위한 영역을 형식화해야 합니다. 또한 그래픽 디자이너가 사용자 사이트의 로고나 배너 이미지를 작성하도록 하겠지만, 이 템플리트에서 배너에 대한 위치 표시기로 텍스트를 추가할 수 있습니다.
    1. 테이블에서 맨 위 셀을 선택하십시오.
    2. 이 셀을 선택한 상태에서, 특성 보기의 TD 탭에서 높이70픽셀을 지정하십시오. 그래픽 디자이너가 작성 중인 배너 그래픽을 수용하는 데 필요한 템플리트를 작성하고 있는 중인 경우, 이 셀이 배너 그래픽과 정확히 같은 크기가 되도록 지정할 수 있습니다.
    3. 또한 특성 보기의 TD 탭 풀다운 메뉴에서 색상회색으로 설정하십시오. 다른 색상을 사용하기 위해 화면의 어느 곳에서나 색상을 선택할 수 있는 점안기 모양의 도구를 사용하거나 필드에 RGB 값(예: 회색의 경우 #808080)을 입력할 수 있습니다.
    4. 맨 위 행을 클릭하고 안내 광고 환영!을 입력하십시오.
    5. 기본 텍스트는 작아서 보기가 힘들기 때문에, 글꼴 크기를 늘려야 합니다. 전체 구문을 선택하고 형식 > 글꼴을 클릭하십시오.
    6. 사이트가 신문 느낌을 갖도록 하려면 글꼴Courier로 선택하십시오. 크기6을 선택하고 색상으로 흰색을 선택하여 해당 셀의 회색 배경에 비해 두드러지도록 하십시오.
    7. 그런 다음 확인을 클릭하십시오.
    8. 배너 텍스트를 가운데에 놓으려면 다시 텍스트를 선택하고 형식 > 맞추기 > 가로 가운데를 클릭하십시오.
  5. 사용자가 다른 페이지로 이동할 수 있도록 하려면 배너 밑에 링크 행이 있어야 합니다. 나중에 탐색을 위한 탭을 추가할 예정이므로, 지금은 단추를 위한 여유 공간을 남겨두기 위해 두 번째 행을 형식화하십시오.
    1. 테이블에서 두 번째 셀을 선택하십시오.
    2. 특성 보기의 TD 탭에서 높이70픽셀을 입력하여 배너 셀과 같은 크기로 이 셀을 설정하십시오.
  6. 세 번째 행은 컨텐츠가 위치할 곳입니다. 컨텐츠가 행의 맨 위에 맞춰서 정렬되는지 확인하십시오.
    1. 테이블에서 세 번째 행을 선택하십시오.
    2. 특성 보기의 TD 탭에서 세로 맞추기에 대해 맨 위를 선택하십시오.

컨텐츠 영역 추가

각 페이지의 특정사항을 표시할 수 있는 템플리트 영역이 필요합니다(예: filtered_records 페이지의 검색 결과 또는 new_record 페이지에서 새로운 게시에서 채울 양식). 지금까지 사이트에 대해 공통 구조 및 색상 설계를 정의했으므로, 이제 컨텐츠 영역을 추가할 수 있습니다.
  1. 팔레트 보기에서 페이지 템플리트 드로어를 클릭하십시오.
  2. 세 번째 행으로 컨텐츠 영역 구성요소를 끌어 오십시오. 이 구성요소는 개별 페이지가 특정 컨텐츠를 제공할 곳입니다. 페이지 템플리트에 대한 컨텐츠 영역 삽입 마법사가 열립니다.
  3. 확인을 클릭하여 컨텐츠 영역 이름 기본값인 bodyarea를 사용할 수 있습니다. 컨텐츠 영역 이름에서는 조직 목적에 따라 서로 다른 컨텐츠 영역에 다른 이름을 지정할 수 있습니다. 예를 들어, 모든 페이지에 항상 두 개의 컨텐츠 영역이 있는 사이트를 디자인할 경우, 기본 컨텐츠로 채워지는 영역에는 bodyarea라는 이름을, 검색 결과로 채워지는 영역에는 searcharea라는 이름을 지정할 수 있습니다. 이렇게 하면 이미 존재하는 페이지에 페이지 템플리트를 적용할 때 도움이 됩니다. 템플리트의 특정 컨텐츠 영역을 채우기 위해 마크업 태그로 기존 페이지 영역을 지정할 수 있기 때문입니다. 컨텐츠 영역에 테이블 셀이 삽입됩니다.
  4. 페이지 템플리트의 변경사항을 저장하십시오.

이제 기본 템플리트 구조는 다음 샘플과 유사해야 합니다.

기본 페이지 템플리트

지금까지 웹 사이트에 대해 공통 영역과 및 컨텐츠 영역이 정의된 페이지 템플리트를 작성했습니다. 이제 연습 1.5: 웹 사이트에 페이지 템플리트 적용을 시작할 수 있습니다.

이용약관 | 피드백

(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.