안녕하세요.
이 비디오에서는 Dreamweaver에서 사이트를 정의하는 방법을 살펴보겠습니다.
Dreamweaver에서 프로젝트를 시작할 때 가장 먼저 하는 작업이 바로 사이트 정의입니다.
모든 웹 사이트의 파일은 한 곳에서 관리하는 것이 좋습니다.
그러면 이 사이트 정의를 예로 들어 보겠습니다.
열려 있는 뷰에 따라 다른데 저는 지금 표준 뷰에 있습니다.
개발자 모드의 경우 파일 메뉴가 여기에 있고, 표준 모드의 경우 메뉴가 오른쪽에 있습니다.
어디에서도 사이트 정의 설정을 찾을 수 없다면 윈도우 메뉴에서 파일을 선택하면 됩니다.
화면에 보이는 이 사이트 정의는 제가 미리 만들어 놓은 것입니다.
이것은 바탕 화면에 있는 Rendered라는 폴더와 동기화됩니다.
이 폴더 안에는 HTML 파일, CSS 파일이 있고 JavaScript, 이미지, 비디오가 포함된 폴더가 있습니다.
바탕 화면에 있는 이 폴더를 확인해 보겠습니다.
여기 바탕 화면에서 이 폴더를 보면 앞서 본 폴더와 동일합니다.
HTML 파일, CSS 파일, 이미지 폴더가 있습니다.
사이트 정의는 이러한 두 개의 폴더를 연결해주는 역할을 합니다.
그러면 사이트를 정의해 보겠습니다.
Dreamweaver의 화면 맨 위에 있는 사이트 메뉴에서 새 사이트를 선택합니다.
여기 있는 사이트 이름에서는 사이트 이름을 입력할 수 있습니다.
이 경우 참조용이므로 아무 이름이나 간단히 입력하겠습니다.
My Portfolio라고 해보죠.
이때 단어 사이에 공백을 추가해도 괜찮습니다.
중요한 것은 이 로컬 사이트 폴더입니다.
이 설정을 통해 Dreamweaver에서 웹 사이트를 유지하도록 하는 것입니다.
이제 폴더 검색 버튼을 클릭하고 바탕 화면으로 이동합니다.
바탕 화면에서 새 폴더를 만들고 이 폴더의 이름을 my_portfolio라고 입력합니다.
폴더 이름을 지정할 때는 공백을 사용하지 않습니다.
대신 하이픈이나 밑줄을 사용합니다.
만들기를 클릭한 다음 선택을 클릭합니다.
이제 Dreamweaver는 사이트의 모든 파일이 포함된 위치를 인지합니다.
그 다음에는 모든 이미지를 추가할 위치를 지정합니다.
이를 위해 고급 설정 > 로컬 정보를 선택합니다.
그런 다음 화면 상단에 있는 기본 이미지 폴더 설정에서 폴더 검색을 클릭하고 새 폴더를 클릭한 다음 images를 입력합니다.
그런 다음 만들기를 클릭하고 선택을 클릭하면 이제 웹 사이트에 이미지를 추가할 수 있습니다.
하드 드라이브의 여러 위치에 저장된 이미지를 추가하면 Dreamweaver는 알아서 이러한 이미지를 이 images 폴더로 가져오게 됩니다.
이때 명심해야 할 점은 모든 것이 이 폴더에 포함되어 있어야 한다는 것입니다.
이렇게 사이트 정의가 완료되었으니 저장을 클릭합니다.
이번에는 바탕 화면에 있는 이 폴더를 잠시 살펴보면서 이 폴더의 구성을 확인해 보겠습니다.
여기 my_portfolio 폴더가 있는데 이 폴더를 열면 이미지 폴더가 있습니다.
흥미로운 파일이 많지는 않지만 웹 사이트의 모든 것이 이 폴더 안에 포함되어 있어야 합니다.
다시 Dreamweaver로 돌아가 예제 파일을 만들어 보겠습니다.
여기 오른쪽에는 로컬 사이트가 있고 images 폴더가 있습니다.
이제 여기를 클릭해 HTML 문서를 만듭니다.
이 페이지는 아무것도 작성하지 않고 그대로 저장을 누릅니다.
이 페이지를 index.html이라고 입력합니다.
저장을 클릭합니다.
그러면 자동으로 이 폴더에 포함됩니다.
바탕 화면을 확인하면 여기에 index 파일이 있습니다.
이것이 바로 사이트 정의를 설정한 이유입니다.
모든 파일이 제 위치에 있도록 하기 위함입니다.
그러면 이제 Dreamweaver에서 사이트 정의를 사용할 때 편리한 점을 몇 가지 살펴보겠습니다.
우선 여기 Dreamweaver를 보시면 사이트 정의를 이미 설정해 두었습니다.
여기에는 HTML도 있고 이미지도 있으며 CSS 파일도 있습니다.
이외에도 다양한 파일이 있습니다.
이제 이 index 파일을 두 번 클릭하여 파일을 엽니다.
그러면 이렇게 왼쪽에 표시됩니다.
현재 코드 뷰로 되어 있는데, 여러분은 분할 뷰 또는 라이브 뷰일 수도 있습니다.
개발자 모드로 전환할 수도 있습니다.
여기 제가 만든 index.html도 있고 이 images 폴더도 있습니다. images 폴더는 이 사이트에서 자주 참조됩니다.
여기를 보면 images/menu-hamburger.png가 있습니다.
이 이미지는 사이트 전체에서 사용되는 이미지입니다.
이미지는 여기에도 있고 여기에도 있으며 여기에도 있습니다.
이 사이트에는 이미지가 상당히 많이 사용됩니다.
그러면 이미지가 어떻게 표시되는지 브라우저에서 미리 보겠습니다.
먼저 파일 메뉴에서 실시간 미리보기를 선택하고 Google Chrome을 클릭합니다.
이렇게 사이트가 표시되며 멋진 비디오가 배경에서 실행되고 있습니다.
이 이미지도 이렇게 표시됩니다.
작은 이미지를 비롯해 많은 이미지가 있습니다.
여기에도 있고 여기에도 있고 아주 많습니다.
이미지가 이 사이트에서 자주 참조되고 있죠.
다시 Dreamweaver로 돌아와 이번에는 파일 이름을 변경해 보겠습니다.
바탕 화면에 있는 이 폴더의 이름을 img로 변경해 보겠습니다. img는 일반적으로 이미지를 지칭하는 단어입니다.
그렇지만 Dreamweaver 밖에서 이름을 변경하면 즉, Dreamweaver를 거치지 않고 폴더 이름을 변경하면 Dreamweaver는 여전히 images라는 폴더를 참조하게 됩니다.
그래서 다시 웹 사이트를 미리 보면 이미지가 모두 로드되지 않습니다.
따라서 파일 내용을 변경하거나 폴더의 파일 이름을 변경하려면 파일 패널을 통해서 해야 합니다.
이렇게 원래 이름으로 다시 변경하고 다시 Dreamweaver로 돌아가 이름을 변경해 봅니다.
마우스 오른쪽 버튼으로 클릭한 다음 편집을 선택하고 이름 변경을 선택한 다음 img로 변경합니다.
좋습니다.
그러면 이제 화면에 "다음 파일들의 링크를 업데이트하시겠습니까?"
라는 메시지가 표시되면 업데이트를 클릭하여 모두 업데이트합니다.
그러면 img로 변경되면서 img 폴더를 참조하는 이미지의 경로가 모두 자동으로 변경됩니다.
이 경우 다시 미리 보면 모든 이미지는 이전과 동일하지만 이미지가 있는 폴더 이름만 변경된 것입니다.
이름을 변경하는 모든 경우가 마찬가지입니다.
예를 들어 스타일 메뉴나 다른 페이지의 이름을 변경하는 경우 파일 패널에서 이름을 변경해야 합니다.
그러면 Dreamweaver에서 해당 코드를 업데이트하므로 훨씬 수월하게 작업할 수 있습니다.
지금까지 사이트를 처음 시작할 때의 기본 사항을 살펴보았습니다.
이번에는 좀 더 깊이 들어가 사이트 정의를 조정해 보겠습니다.
그러면 먼저 사이트 메뉴를 클릭하고 새 사이트가 아닌 사이트 관리를 선택합니다.
여기에 모든 사이트 정의가 표시됩니다.
앞서 만들어 놓은 My Portfolio 폴더를 열어 보겠습니다.
이 폴더를 두 번 클릭합니다.
이곳에서 사이트 이름을 변경할 수 있고 파일을 다른 위치로 이동한 경우 로컬 사이트 폴더를 변경할 수 있습니다.
또 다른 중요한 탭은 서버 탭입니다.
서버 탭에서는 원격 호스팅 사이트 또는 테스트 사이트로 연결할 수 있습니다.
사이트를 인터넷에 게시하는 방법이죠.
이제 + 버튼을 클릭하고 이 창에서 호스팅 세부 정보를 입력합니다.
보통 호스팅 업체가 이메일로 전송해주는 세부 정보를 여기에 채워 넣으면 됩니다.
모든 단계를 하나씩 살펴보지는 않겠습니다.
서버 정의에 대한 튜토리얼 비디오가 따로 있으므로 참조하시기 바랍니다.
일단 저장을 클릭하고 다시 한 번 저장을 클릭합니다.
확인을 클릭합니다.
사이트 관리의 뛰어난 기능을 또 하나 소개해 드리겠습니다.
My Portfolio 폴더에 대한 사이트 정의를 설정한 다음 이에 대한 로컬 폴더도 만들었는데 원격 사이트를 정의하고 호스팅 계정에 연결했습니다.
다른 사람과 파일을 공유해야 하는 경우 이들도 동일한 웹 사이트에 연결할 수 있어야 합니다.
또는 노트북에서 데스크탑으로 컴퓨터를 변경하는 경우도 있을 것입니다.
이러한 경우에는 세부 정보를 다시 입력할 필요 없이 이것을 클릭하고 내보내기를 클릭한 다음 확인을 클릭하면 생성되는 STE 파일을 이용하면 됩니다.
다른 사람에게도 이메일을 통해 공유할 수 있습니다.
다시 말해 다른 사람들도...
일단 취소합니다.
다른 사람들도 여기에서 사이트 > 사이트 관리를 선택한 다음 가져오기를 클릭하면 세부 정보가 이미 채워져 있으므로 바로 작업을 시작할 수 있습니다.
또한 이 - 버튼을 클릭하면 여기에서 삭제할 수 있습니다.
이렇게 선택한 다음 - 버튼을 클릭합니다.
여기 한 가지 주목할 것이 있습니다. - 버튼을 클릭하고 사이트 정의를 삭제한 다음 나타나는 확인 창에서 예를 클릭합니다.
이때 확인 > 완료를 클릭하고 바탕 화면으로 돌아오면 포트폴리오 사이트도 있고 제가 만든 모든 파일도 있는데 시스템에서 파일이 삭제된 것이 아니라 사이트 정의가 삭제된 것입니다.
지금까지 로컬 사이트를 정의하고 서버로 연결했고 파일 패널을 이용해 몇 가지 간편한 방법을 살펴보았습니다.
마지막으로 살펴볼 작업은 첫 번째 사이트에서 첫 번째 페이지의 작동 방식을 설정하는 방법입니다. index.html이라는 페이지가 있는데 첫 번째 사이트의 첫 번째 페이지를 만들 때마다 최소한 하나의 index.html 파일이 필요합니다.
왜 그럴까요?
index 파일은 브라우저에서 우선적으로 표시하는 페이지입니다.
표시되지는 않지만 홈 페이지이고 모든 웹 사이트에는 최소한 하나의 index 파일이 필요합니다.
다른 페이지의 이름은 원하는 대로 지정할 수 있지만 이 index 파일의 경우 이렇게 입력해야 합니다.
브라우저에서 확인해 보겠습니다.
예를 들어 adobe.com에서 index.html을 입력하고 Return을 클릭하면 브라우저는 페이지를 표시하지만 index.html이라는 주소는 숨겨진 상태로 유지하게 됩니다.
1,000개의 페이지로 된 사이트를 구축해도 index 페이지가 없으면 사이트는 로드되지 않고 오류 메시지만 표시됩니다.
이번 튜토리얼에서 마지막으로 Dreamweaver 외부에서 파일을 추가할 때 업데이트하는 방법을 살펴보겠습니다.
여기에 있는 images 폴더를 보면 이미지가 많이 포함되어 있습니다.
Dreamweaver 외부에서 작업해볼 텐데 Finder에서 추가할 이미지가 포함된 이미지 폴더를 찾습니다.
이 파일을 추가해 보겠습니다.
여기로 드래그하면 아주 빠르게 업데이트할 수 있습니다.
새로 고침 버튼을 누르지 않고도 업데이트되어 아주 신속하게 추가됩니다.
만약 업데이트되지 않으면 새로 고침을 누르면 됩니다.
그러면 확인 작업이 수행됩니다.
좋습니다.
지금까지 사이트 정의에 대해 살펴보았습니다.
사이트 정의를 이용하여 바탕 화면에 있는 폴더에 연결하는 방법을 살펴보았고 웹 사이트의 모든 파일은 폴더 하나에 포함해야 한다는 것을 배웠습니다.
또한 사이트 정의를 이용하여 호스팅 업체의 원격 서버로 연결하는 것도 알았습니다.
효율적인 작업을 위해 파일 메뉴를 이용해 파일의 이름을 변경하면 코드가 자동으로 업데이트된다는 사실도 확인했습니다.
마지막으로 반드시 index.html 페이지를 지정해야 합니다.
그렇지 않으면 페이지가 로드되지 않습니다.
지금까지 Dreamweaver에서 사이트를 정의해 보았습니다.
