Dreamweaver를 통한 웹 개발

 

•  
•  

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

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

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

Dreamweaver를 통한 웹 개발

 

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

 

 

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

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

  참고:

  Dreamweaver에 익숙하지 않거나 웹 개발을 배우는 중이라면 웹 페이지를 디자인을 준비하고 실행하는 데 스타터 템플릿이 큰 도움이 됩니다.

  처음부터 시작하는 것을 계획하더라도 이 페이지를 살짝 참고해 좋은 웹 페이지 디자인의 요소를 이해하는 것이 좋습니다.

 

 

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

 

 

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

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

 

 

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

  Photoshop 구성 요소 사용하려면 Dreamweaver로 추출하여 작업할 수 있습니다. Photoshop 구성 요소를 사용하여 작업하는 방법에 대한 자세한 내용은 Dreamweaver CC의 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 구성 요소에서 추출한 레코드세트를 포함한 다양한 소스의 동적 내용을 정의할 수 있습니다. 페이지에 동적 내용을 추가하려면 동적 내용을 페이지에 드래그하기만 하면 됩니다.

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

 

 

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

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

  또한 디바이스에서(반응형 웹 페이지를 만드는 경우) 또는 브라우저에서 실시간으로 웹 페이지를 미리 볼 수 있습니다.

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

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