Dreamweaver는 웹 사이트를 시각적으로 제작 및 디자인할 수 있는 탁월한 프로그램입니다. 그러나 처음 실행하는 경우 어려워 보일 수 있는데, 수많은 기능들이 제공되기 때문입니다.

총 8장으로 구성된 이 튜토리얼 시리즈는 Dreamweaver 2015에서 간단하면서도 세련된 웹 사이트를 제작하는 방법을 살펴보기 위해 마련되었습니다. 이 튜토리얼 시리즈에서는 사이트를 정의하고, HTML(Hypertext Markup Language) 구조를 생성하고, 텍스트 및 이미지를 추가하고, CSS(Cascading Style Sheets)를 사용하여 페이지 스타일을 지정하는 방법을 살펴봅니다.

적절한 분량의 튜토리얼 시리즈를 제공하기 위해 웹 사이트 페이지는 2페이지로 국한했지만 이 튜토리얼을 모두 완료하면 더 많은 페이지를 직접 만들 수 있는 충분한 지식을 얻을 수 있습니다.

먼저 샘플 파일을 다운로드하여 완성된 프로젝트를 살펴봅니다.

1. part7 폴더를 열고 index.html을 브라우저로 드래그하여 봅니다. 완성된 프로젝트의 홈 페이지는 그림 2와 같이 표시됩니다.

1. 브라우저 측면 중 하나를 안쪽으로 드래그하여 브라우저 크기를 조정합니다. 뷰포트가 700px 미만인 경우 레이아웃은 2열에서 1열로 변경됩니다. 내비게이션 막대는 검정 배경의 MENU 로 교체됩니다. 그림 3과 같이 Golden Gate Bridge 이미지에서 상자 안에 있는 흰색 텍스트는 진한 분홍색으로 변하고 이미지 아래로 위치가 이동합니다.

1. MENU 를 클릭합니다. 반투명한 검정 배경에서 내비게이션 메뉴가 매끄럽게 내려옵니다(그림 4 참조).

지금까지 이 시리즈에서 Dreamweaver 2015를 사용하여 만들어 볼 웹 사이트의 완성된 버전을 살펴보았습니다. 이 시리즈를 진행하는 동안 살펴볼 내용은 다음과 같습니다.

이 과정에서 Dreamweaver 유저 인터페이스 중 가장 중요한 부분에 대해 살펴봅니다.

이 튜토리얼은 심층적인 내용을 다루므로 충분한 시간을 갖고 학습하시기 바랍니다. 각 장은 사용 방법뿐만 아니라 이유에 대한 설명이 포함된 간단한 섹션으로 구성되어 있습니다. 섹션이 끝날 때마다 잠시 시간을 갖고 해당 섹션에서 소개된 다양한 기법을 복습합니다.

참고: 이 튜토리얼 시리즈는 Dreamweaver 2015.2를 기반으로 작성되었으며, 이전 버전의 프로그램에서 제공되지 않는 기능을 사용합니다. 이전 버전의 Dreamweaver를 사용해도 동일한 웹 사이트를 제작할 수 있지만 이 튜토리얼에서는 Dreamweaver 2015.2를 사용할 것을 권장합니다. Creative Cloud를 아직 구독하지 않는 경우무료 체험판 을 사용할 수 있습니다.

초보자가 가장 많이 하는 실수는 사이트를 정의하지 않고 웹 페이지 작업을 시작하는 것입니다. 이러한 경우 이미지 및 스타일 시트와 같은 에셋의 링크가 생성되고, 이때 링크는 로컬 컴퓨터의 한 위치에 연결됩니다. 작업하는 데 아무런 문제는 없지만, 사이트를 원격 서버에 업로드할 때 문제가 발생합니다. 이때 모든 링크가 깨지므로 이 문제를 해결해야 합니다. 사이트를 항상 정의하면 이러한 문제를 미연에 방지할 수 있습니다. 사이트 정의는 신속하고 간편합니다.

Dreamweaver에서 사이트는 로컬 컴퓨터에 저장되어 있는 웹 사이트와 관련된 모든 문서를 구성하므로 링크를 추적 및 유지하고 파일을 관리하며 사이트 파일을 웹 서버로 전송할 수 있습니다. 일반적인 Dreamweaver 사이트는 최소 두 개의 파트로 구성됩니다.

팁: 여러 사이트를 작업할 경우 로컬 하드 드라이브에 폴더를 만들어 사이트를 저장하는 것이 좋습니다. Mac OS X의 경우 홈 폴더에는 이미 Sites라는 폴더가 포함되어 있습니다. Windows의 경우 C 드라이브의 최상위에 Sites라는 폴더가 설정되어 있습니다. 이 시리즈에서 보여지는 스크린샷은 Windows에서 만든 것이지만 키보드 단축키 및 일부 버튼의 레이블(모두 제공)을 제외한 나머지 지침 내용은 Mac OS X와 동일합니다.

먼저 사이트 이름을 입력하고 로컬 컴퓨터에 해당 파일을 저장할 위치를 지정합니다. 사이트를 인터넷상의 라이브 웹 서버에 업로드하기 전까지는 원격 폴더를 정의하지 않아도 됩니다.

1. 사이트 설정 대화 상자의 왼쪽에 있는 열에서 고급 설정 을 확장하고 로컬 정보 를 선택합니다.
   

2. 기본 이미지 폴더 필드의 오른쪽에 있는 폴더 아이콘을 클릭하여 이미지 폴더 선택 대화 상자를 엽니다.
   

3. 새 폴더 를 클릭합니다.(Windows의 경우 대화 상자 상단에 있고 Mac의 경우 하단에 있습니다.) 새 폴더 이미지 이름을 입력한 다음 선택하고 폴더 선택 (Windows) 또는 선택 (Mac)을 클릭합니다. 사이트 설정 대화 상자는 그림 7과 같이 표시됩니다.

이제 Dreamweaver의 파일 패널에 현 사이트의 새로운 로컬 루트 폴더가 표시됩니다(그림 8 참조). 파일 패널에 표시된 파일 목록은 파일 관리자 역할을 하므로 데스크탑에서 작업하는 것과 같이 파일을 복사, 붙여넣기, 삭제, 이동 및 열 수 있습니다.

일반적인 웹 사이트에는 수많은 파일과 폴더가 포함되어 있습니다. 간편하게 유지 관리하기 위해 이러한 파일과 폴더를 논리적으로 구성하는 것이 중요합니다. 이미지, 비디오, 스타일 시트 및 외부 JavaScript 파일마다 관련된 이름으로 별도의 폴더를 만듭니다. 다음 사항을 명심하고 폴더 이름을 만듭니다.

이 프로젝트의 이미지 및 색상 구성표는 공유Creative Cloud Libraries 에 온라인으로 저장됩니다. CC Libraries를 통해 언제 어디에서나 시각적 에셋에 액세스할 수 있으므로 다른 사람과 공동 작업할 때 특히 유용합니다. 예를 들어 시각적 에셋을 제작하는 사람과 실제 사이트를 제작하는 사람이 다를 수 있습니다. Dreamweaver에서 CC Libraries를 사용하는 방법에 대한 자세한 내용은 온라인 설명서를 참조하십시오.

공유 라이브러리에 있는 에셋을 직접 만든 라이브러리에 저장해야 합니다.

Bayside Beat 웹 사이트를 처음부터 만들어 봅니다. 다운로드한 샘플 파일에는 Microsoft Word 및 RTF 파일의 텍스트 콘텐츠, JavaScript 파일, 작업 중인 파일과 비교할 수 있는 각 단계의 프로젝트 사본이 포함되어 있습니다.

그러면 이제 사이트를 구성할 두 개의 HTML 페이지를 만들어 봅니다.

1. 왼쪽에 있는 열에서 새 문서 가 선택되고 문서 유형 은 HTML 로 설정되고 프레임워크 는 없음 으로 설정되어 있는지 확인합니다.
   

2. 제목 필드에 Bayside Beat: Cable Cars 를 입력합니다.
   

3. 문서 유형 은 기본적으로 HTML5 로 설정되어 있고 CSS 첨부 필드에는 아무것도 표시되지 않도록 합니다. CSS 첨부에 항목이 있는 경우 해당 항목을 선택한 다음 이 필드 오른쪽에 있는 휴지통 아이콘을 클릭합니다.
   

4. 만들기 를 클릭합니다. 문서 창에 빈 HTML 페이지가 생성됩니다.
   

5. 필요한 경우 문서 창의 왼족 상단에 있는 분할 버튼(그림 11 참조)을 선택하여 현재 HTML 마크업을 표시합니다.

1. 문서 창(또는 라이브 뷰)은 비어 있지만 그림 12와 같이 코드 뷰에는 기본 HTML 구조가 표시되어 있습니다.

1. 파일 > 저장 을 선택하거나 키보드 단축키 Ctrl+S(Windows) 또는 Command+S(Mac)를 사용하여 파일을 저장합니다.
   

2. 다른 이름으로 저장 대화 상자에서 bayside 로컬 사이트 폴더를 선택한 상태에서 index.html 파일 이름을 입력하고 저장 을 클릭합니다.

3. 새 HTML 파일을 만듭니다. 시작 화면은 더 이상 표시되지 않으므로 메뉴 옵션 파일 > 새로 만들기 를 사용하여 새 문서 대화 상자를 엽니다. 또는 Ctrl+N(Windows) 또는 Command+N(Mac)을 누릅니다.
   

4. 앞서 2단계에서 사용한 동일한 옵션을 선택합니다. 그러나 이번에는 제목 필드는 비워 두고 만들기 를 클릭합니다.
   

5. 이 파일을 사이트 루트 폴더 안에 sights.html 로 저장합니다.
   

6. 분할 뷰에서 5번 줄의

   이 값은 브라우저 탭 또는 제목 막대에 표시되고 검색 엔진에서도 식별됩니다. 초보자는 이 값을 변경하지 않고 그대로 두는 실수를 하는 경우가 많습니다.

   이 값을 변경하는 두 가지 방법은 다음과 같습니다.

   • 코드 뷰에서 여는 HTML 태그와 닫는 HTML 태그를 그대로 둔 채 직접 변경합니다.
     

   • Dreamweaver의 속성 관리자를 사용합니다. 이 기법을 사용해 봅니다.

7. 속성 관리자는 디자인 작업 영역에서 문서 창의 하단에 있는 큰 가로 패널입니다. 필요한 경우 속성 탭을 클릭하여 앞으로 가져옵니다.(처음에는 출력 패널 뒤에 숨어 있습니다.)

8. 변경 내용을 적용하려면 Tab 키 또는 Enter/Return을 누릅니다. 문서 제목 필드에 입력된 값은 HTML 코드의 5번 줄에 있는 무제 문서 를 대체합니다(그림 13 참조).

Dreamweaver에서 HTML 마크업이 자동으로 생성되지만 웹 페이지를 만드는 동안 대부분 분할 뷰를 열어놓고 작업하는 것이 좋습니다. 분할 뷰를 통해 변경 내용이 올바로 적용되었는지 확인할 수 있습니다. 그렇다고 Dreamweaver가 안정성이 없다는 말은 아닙니다. 특수한 상황을 제외하고 정확하게 변경 내용이 적용됩니다. 그러나 문서의 어떤 부분을 작업하고 있는지 이해하는 것이 중요합니다. 삽입점을 잘못 추가한 경우 새 코드가 추가됩니다. 이때 주의하지 않으면 나중에 해결하지 못하는 문제에 봉착할 수 있습니다. 튜토리얼 시리즈의 다음 장에서 사용할 DOM 패널도 페이지 구조를 추적하는 데 유용할 수 있습니다.

팁: 페이지의 시각적 모양과 함께 현재 코드를 확인하려면 보기 > 수직 분할 을 선택합니다. 문서 창을 다시 수평으로 분할하려면 동일한 옵션을 다시 선택합니다. 보기 메뉴에서는 라이브 뷰를 어느 쪽으로 표시할지 선택할 수 있습니다. 코드 뷰와 라이브 뷰를 분할하는 막대를 드래그하여 각 뷰의 크기를 조정합니다. Dreamweaver는 이 설정을 자동으로 인식합니다.

사이트 정의를 완료하고 두 개의 빈 웹 페이지를 만들었다면 콘텐츠를 추가할 수 있습니다.