Dreamweaver를 사용하여 웹 개발

웹 개발의 첫 번째 단계는 잠재 고객의 욕구, 기술과 마케팅 요구 사항을 분석하는 기획 단계입니다. 또한 웹 사이트를 설계하고 게시하는 데 필요한 정보를 수집하고 다음과 같은 질문에 대한 답변을 얻게 됩니다.

• 웹 사이트 호스팅을 위해 어떤 서비스 공급업체를 선택합니까? 게시 서버로의 파일 업로드에 대한 권한을 가지고 있습니까?
• 웹 사이트에 어떤 도메인 이름이 사용됩니까?
• 기존의 웹 사이트를 Dreamweaver로 마이그레이션하는 경우 파일과 에셋은 현재 어디에 저장됩니까? 이 정보가 저장된 서버에 대한 액세스 권한이 있습니까?
• 동적 웹 사이트를 원할 경우 어떤 서버를 이용해 데이터가 동적으로 표시되는지를 테스트할 수 있습니까? 동적 데이터 로딩하는 데 사용하려는 웹 애플리케이션 서버의 세부 사항을 확인할 수 있습니까?
• 웹 사이트에 어떤 종류의 에셋이 필요합니까?
• 처음부터 디자인된 에셋이 됩니까? 에셋이 이미 사용 가능한 경우, 이에 대한 액세스 권한이 있습니까?
• 에셋을 디자인하는 데 어떤 앱을 사용고자 합니까?
• 반응형 웹 사이트를 제작할 계획이십니까? 

개발하고자 하는 웹 사이트와 호스팅하고자 하는 방법과 위치에 대해 명확하게 이해하며 웹 개발 과정에 Dreamweaver와 Creative Cloud가 선택되었다고 가정하고 다음 단계를 진행합니다.

웹 사이트에 필요한 모든 에셋이 있는지 확인하십시오. 로컬 폴더나 Adobe의 Creative Cloud Libraries에 이들 에셋을 수집하고 정리하십시오.

다음을 사용해 Dreamweaver에서 새 문서를 만듭니다.

• 비어 있는 새 문서
• Dreamweaver의 패키지로 제공되는 스타터 템플릿 
• 다른 사람이 제작한 템플릿 파일(*.dwt)

Dreamweaver 작업 영역에 익숙해지는 데 몇 분 정도 소요될 수 있습니다. 사용하기 편한 작업 영역을 찾은 다음 색상 테마 설정합니다. 자신에게 맞는 방법으로 다른 패널을 재구성합니다.

Dreamweaver에서 사이트 설정합니다. 파일 및 에셋이 있는 폴더 구조를 만듭니다. 정보를 구성하고 구조를 결정했으면 사이트 만들기를 시작할 수 있습니다. (자세한 내용은 Dreamweaver 사이트 정보를 참조하십시오.)

이 단계에서 원격 서버에 대한 연결을 설정하고 (동적 내용이 있는 경우) 테스트 서버를 설정하는 것이 좋습니다. 

코드 보기에서 웹 페이지 코딩을 시작하거나 디자인/라이브 뷰에서 웹 페이지를 디자인합니다.

Photoshop 구성 요소 사용하려면 Dreamweaver로 추출하여 작업할 수 있습니다. Photoshop 구성 요소를 사용하여 작업하는 방법에 대한 자세한 내용은 Dreamweaver의 Extract를 참조하십시오.

텍스트, 이미지, 롤오버 이미지, 이미지 맵, 색상, 동영상, 사운드, HTML 링크, 표 등의 디자인 요소를 추가합니다.

CSS를 사용하여 웹 페이지의 모양 스타일을 지정합니다. 

Dreamweaver에서 다양한 방법으로 CSS를 사용하여 작업할 수 있습니다.

• CSS를 하드 코딩할 수 있습니다. CSS 하드 코딩에 도움을 주는 Dreamweaver의 코딩 기능에 대한 자세한 내용은 Dreamweaver의 코딩 환경을 참조하십시오.
• CSS 페이지를 만드는 데 익숙하지 않은 경우 CSS를 만드는 데 도움을 주는 CSS Designer 패널을 사용할 수 있습니다. 자세한 내용은 CSS Designer를 사용하여 페이지 레이아웃 지정을 참조하십시오.
• Sass 및 Less 파일로 작업하기를 원할 경우 Dreamweaver는 이에 대한 옵션도 지원해 Dreamweaver 사이트 Sass 및 Less 파일을 가져와 작업할 수 있습니다. 그러면 Dreamweaver가 이를 자동 컴파일해 (또는 수동 컴파일을 선택할 수 있음) CSS 변경 사항에 대한 결과를 실시간으로 볼 수 있습니다. Dreamweaver에서 Sass 및 Less 파일 사용에 대한 자세한 내용은 CSS 프리프로세서를 참조하십시오.

다이내믹 콘텐츠 제작을 위해 웹 애플리케이션을 설정합니다.

대부분의 웹 사이트에는 동적 페이지가 있으며 이 페이지로 인해 방문자는 데이터베이스에 저장된 정보를 볼 수 있고, 일부 방문자는 데이터베이스에 새 정보를 추가하거나 정보를 편집할 수도 있습니다. 이와 같은 페이지를 만들려면 먼저 웹 서버와 애플리케이션 서버를 설정한 다음, Dreamweaver 사이트를 만들거나 수정한 후 데이터베이스에 연결해야 합니다. 자세한 내용은 동적 사이트, 페이지 및 웹 양식을 참조하십시오.

다이내믹 페이지를 제작합니다.

Dreamweaver에서는 데이터베이스, 양식 매개 변수, JavaBeans 구성 요소에서 추출한 레코드세트를 포함한 다양한 소스의 다이내믹 콘텐츠를 정의할 수 있습니다. 페이지에 다이내믹 콘텐츠를 추가하려면 다이내믹 콘텐츠를 페이지에 드래그하기만 하면 됩니다.

한 개의 레코드나 여러 레코드를 동시에 표시하도록 페이지를 설정하고 둘 이상의 레코드 페이지를 표시할 수 있으며 한 레코드 페이지에서 이전/다음으로 이동할 수 있는 특수 링크를 추가하고 사용자들이 레코드를 추적할 수 있도록 도와주는 레코드 카운터를 만들 수도 있습니다. 자세한 내용은 동적 사이트, 페이지 및 웹 양식을 참조하십시오.

웹 사이트를 테스트 및 미리보기 후 게시하십시오. 

페이지를 만들면서 웹 사이트가 디자인에 따라 어떻게 진행되는지 확인하기 위해 미리보기를 해야 합니다. 코드 보기 및 라이브 뷰를 나란히 유지하여 코딩을 분할 보기할 수 있습니다.

브라우저에서 실시간으로 웹 페이지를 미리 볼 수도 있습니다.

실시간 미리보기 환경이 필요하지 않은 경우 브라우저 환경에서 일반 미리보기를 사용할 수 있습니다.

이미 원격 서버에 대한 연결을 정의하여 웹 사이트를 게시한 경우 활성화할 원격 서버에 파일을 추가해야 합니다.