디자이너를 위한 asp.net 페이지 만들기

닷넷 홈페이지 및 웹사이트를 개발하기 위한 툴은 따로 있긴합니다.

이툴은 아래와 같이 한번에 여러개의 브라우저를 테스트를 할수도 있습니다. 근데 써보니깐
드림위버보다 훨씬 못하다는 느낌입니다. ㅋ

http://www.microsoft.com/expression/products/Web_Overview.aspx

이툴은 아래와 같이 한번에 여러개의 브라우저를 테스트 할 수 있다

 

여기서는 그냥 비주얼 스튜디오로 하는 방법을 소개.

트라이얼 버전을 다운받거나 무료버전인 비주얼 스튜디오2010 익스프레션 버전을 받을 수 있습니다.

비주얼 스튜디오 다운받기
http://www.microsoft.com/web/downloads/platform.aspx

Microsoft Web Platform Installer 3.0
Microsoft Web Platform Installer 3.0은 Internet Information Services (IIS), SQL Server Express, .NET Framework와 Visual Web Developer와 같은 마이크로소프트 웹 플랫폼의 최신 콤포넌트를 무료로 쉽게 다운로드하고 설치합니다. 또한 Web PI는 Windows Web Application Gallery에 내장된 블로그를 위한 웹 어플리케이션과 컨텐츠 관리도구 등을 보다 쉽고 편리하게 설치하고 실행하도록 도와줍니다.

 

또는 아래의 사이트로 이동해서 평가판을 다운로드 합니다.

http://www.microsoft.com/downloads/ko-kr/details.aspx?FamilyID=26bae65f-b0df-4081-ae6e-1d828993d4d0

 

보통은 프로그래머가 구성을 해줄텐데 일단 이런게 있다는것만 알고 넘어갑시다 ㅎ
웹사이트와 웹응용프로그램의 차이

• 디버깅 세션을 중지하지 않고 코드를 편집할 수 있도록 하려는 경우

• ASP.NET 페이지와 연결된 클래스 파일에 있는 코드에 대한 단위 테스트를 실행하려는 경우

• 독립 실행형 클래스의 사용자 정의 컨트롤 및 페이지와 연결된 클래스를 참조하려는 경우

• 여러 웹 프로젝트 간에 프로젝트 종속성을 설정하려는 경우.

• 컴파일러에서 전체 사이트에 대해 단일 어셈블리를 만들고자 하는 경우.

• 사이트에 대해 생성되는 어셈블리 이름과 버전 번호를 제어하려는 경우.

• MSBuild 또는 팀 빌드를 사용하여 프로젝트를 컴파일하려는 경우.예를 들어 빌드 전 단계와 빌드 후 단계를 추가할 수 있습니다.

• 프로덕션 서버에 소스 코드를 저장하지 않으려는 경우

• Visual Studio 2010에서 사용할 수 있는 자동 배포 도구를 사용하려는 경우

• C# 및 Visual Basic 코드를 단일 웹 프로젝트에 포함하려는 경우.기본적으로 웹 응용 프로그램은 프로젝트 파일의 언어 설정에 따라 컴파일됩니다.예외를 만들 수 있지만 예외를 만들기는 비교적 어렵습니다.

• Visual Studio에서 프로덕션 사이트를 열고 FTP를 사용하여 실시간으로 업데이트하려는 경우

• 프로젝트를 배포하기 위해 프로젝트를 명시적으로 컴파일할 필요가 없도록 하려는 경우

• 사이트를 미리 컴파일할 때 컴파일러에서 페이지 또는 사용자 정의 컨트롤당 하나의 어셈블리를 포함하거나 폴더당 하나 이상의 어셈블리를 포함할 수 있는 사이트에 대해 여러 어셈블리를 만들도록 하려는 경우

• 프로덕션 환경에서 프로덕션 서버에 새 버전을 복사하거나 프로덕션 서버에서 직접 파일을 편집하여 개별 파일을 업데이트할 수 있게 하려는 경우.

• 사이트를 미리 컴파일할 때 전체 웹 사이트를 다시 컴파일할 필요 없이 개별 ASP.NET 웹 페이지(.aspx 파일)를 업데이트할 수 있도록 하려는 경우

• 추가 백업 복사본으로 사용할 수 있도록 프로덕션 서버에 소스 코드를 저장하려는 경우

 

여기서 부터 디자이너가 알면되는  asp.net 페이지 구성하기

들어가기전에 크게 3가지 정도만 알면됩니다.

.aspx 일반적인 컨텐츠 페이지 (내용페이지  asp로 치면 .asp )
.master 일관성있는 레이아웃  구성을 위한 마스터페이지
.ascx 유저컨트롤 페이지 (주로 메뉴 로그인 창 등등 asp로 치면 inc 파일 정도 )

사이트 만들어보기

회원가입 레이아웃은 아래와 같이 페이지를 구성을 할껍니다.

asp는 회원가입.asp 정보입력.asp 등이 있다면 회원가입.asp 에 메뉴 menu.inc(또는 menu.asp) , leftMenu.inc(또는 leftMenu.asp) 등 이렇게 삽입 했을 껍니다.

asp.net 에서는 menu.inc (닷넷에서는 menu.ascx) leftMenu.inc(또는 leftMenu.ascx) 등을 포함한 마스터페이지를 만들어 이 마스터 페이지를 이용해서 컨텐츠 페이지를 생성합니다.

asp.net 으로 구성해 본다면 대략 아래 처럼 됩니다.

웹사이트 프로젝트를 생성합니다.

 

우선 각각의 파일을 만들어 줍니다.

 

 

 

마스터페이지에 대략적인 윤각을 잡아줍니다.
ASP PHP에는 없는 개념인데 asp는 페이지에 메뉴를 인쿠르드 한다면 마스터페이지를 가지고 컨텐츠페이지를 만든다고 생각하시면됩니다.

 

MasterPage.master

마스터 페이지를 만들고 이 마스터페이지를 기준으로 컨텐츠 페이지를 넣을껍니다. 회원가입 컨텐츠 페이지 비밀번호찾기 컨텐츠 페이지등등 이때 컨텐츠를 넣을수 있는 영역이 ContentPlaceHolder 부분입니다.

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
이 영역안에 컨텐츠가 들어갑니다. (회원가입으로 치면 약관동의 등등)
</asp:ContentPlaceHolder>

생성한 Menu.ascx / TopMnu.ascx 파일을 끌어서 마스터 페이지에 넣습니다.

이렇게 되면 우선 마스터 페이지의 구성이 완료되었습니다.

마스터페이지를 가지고 컨텐츠 페이지를 만듭니다.

만들어진 컨텐츠 페이지에서는 ContentPlaceHolder  영역 이외는 수정 할 수가 없습니다.

ContentPlaceHolder  에다가 컨텐츠 내용을 삽입합니다.

(ContentPlaceHolder 는 두개 이상 마스터페이지에 삽입 가능합니다.)

브라우저에서 보기로 컨텐츠를 확인합니다.

비주얼 스튜디오 자체가 IIS를 구동 할 수 있어서 바로 확인이 가능합니다.

잘나온다!

이런씩으로 주요 카테고리마다 마스터페이지를 잡아 컨텐츠 페이지를 구성하면됩니다.

끗

참고로 마스터안에 마스터를 넣을수도 있고 ContentPlaceHolder에 Menu.ascx를 넣어서 컨텐츠 페이지마다 바꿔끼울수도 있습니다.