이 튜토리얼에서는 간략하게 Dreamweaver CC 시작 템플릿에 대해 살펴보겠습니다.
먼저 디자인 작업 영역으로 전환해보죠.
시작 템플릿을 사용하여 새 파일을 만들 수 있는데 다른 새 파일을 만드는 것과 동일합니다.
파일 > 새 파일을 선택한 다음 새 문서 대화 상자에서 왼쪽에 있는 시작 템플릿 옵션을 선택합니다.
반응형 스타터 폴더에는 5개의 템플릿 옵션이 포함되어 있는데요.
페이지 정보, 블로그 포스트, 전자 상거래, 이메일, 포트폴리오입니다.
폴더 이름을 보면 알 수 있듯이 각 시작 템플릿에는 의미론적 HTML로 제작된 반응형 디자인이 포함되어 있습니다.
템플릿을 클릭하면 오른쪽에 미리 보기와 설명이 표시됩니다.
페이지 정보 템플릿을 선택한 다음 만들기 버튼을 클릭하여 페이지를 만들겠습니다.
새 웹 페이지를 저장할 위치를 묻는 팝업 창이 나타나는데 파일을 Project 폴더에 저장하고 이름은 "about.html"이라고 해보죠.
종속 파일을 저장할지 묻는 메시지가 표시되면 복사를 클릭합니다.
이제 파일 패널을 살펴보면 Project 폴더에 사이트가 이미 설정되어 있는데요.
이 사이트에는 "about.html" 페이지와 지원 파일이 포함되어 있습니다.
페이지 정보는 분할 뷰에서도 볼 수 있는데요.
코드 뷰에서 템플릿 코드를 살펴보죠.
스크롤해 보면 이 구조는 표준 HTML5 마크업으로 되어 있습니다.
라이브 뷰로 이동하고 디자인 요소를 선택하면 코드 뷰가 업데이트됩니다.
템플릿을 구성하는 HTML 블록을 사용하여 손쉽게 작업할 수 있습니다.
요소를 추가, 제거, 복제할 수 있죠.
마지막으로 .css 파일을 선택하여 페이지 스타일과 미디어 쿼리를 보겠습니다.
상단의 스타일은 레이아웃의 기초를 정의하고 아래에 있는 미디어 쿼리 섹션은 다른 화면 크기에 따라 변경되는 스타일을 정의합니다.
파일 > 브라우저에서 미리보기를 선택하면 반응형 템플릿 디자인이 이렇게 화면의 폭에 맞게 조정됩니다.
시작 템플릿을 사용자 정의하는 것은 간단합니다.
Dreamweaver CC 코딩과 시각적 툴을 사용하면 됩니다.
CSS 디자이너에 있는 소스 영역에서 "aboutPageStyle.css"를 선택하고 선택기 영역에서 body 태그를 선택한 다음 속성 영역에서 배경 아이콘을 클릭합니다.
배경색을 검은색으로 변경한 다음 타일 이미지를 추가하고 배경을 고정하겠습니다.
라이브 뷰에서 텍스트 요소를 선택하고 CSS 디자이너에서 색상을 흰색으로 변경하겠습니다.
동일한 방식으로 모든 텍스트 속성을 변경할 수 있습니다.
이처럼 프로세스는 간단합니다.
CSS 디자이너에서 시각적으로 스타일을 지정하거나 코드 뷰에서 바로 코드를 작성하면 됩니다.
이미지를 교체하려면 라이브 뷰에서 이미지를 선택한 다음 HTML 속성 팝업 창이 표시되면 새 이미지를 찾습니다.
Project 폴더에 이미 여러 이미지가 있는데 "feature_259x259.png" 파일을 선택해보죠.
그러면 이렇게 새 디자인으로 변경됩니다.
텍스트 작업 시에는 콘텐츠를 복사하고 붙여넣거나 라이브 뷰 또는 코드 뷰에서 바로 입력하면 되고 요소를 추가하거나 제거할 수도 있습니다.
템플릿은 HTML 블록을 시작점으로 사용하기 위해 만들어졌습니다.
여기에서부터 편집해 나가면서 디자인을 완성할 수 있습니다.
최종 디자인을 보면 기존 템플릿에 있는 많은 HTML 블록을 삭제하고 디자인에 필요한 요소만 사용했습니다.
브라우저에서 미리보기를 선택하여 작업을 다시 살펴보면 이렇게 화면의 크기에 맞게 조정됩니다.
이처럼 시작 템플릿을 사용하면 웹 페이지를 간편하게 만들 수 있습니다.
각 시작 템플릿을 살펴보고 용도에 맞게 원하는 방식으로 사용해 보시기 바랍니다.
직접 경험해보고 디자인을 빠르게 시작하십시오.
