이 포스트는 월간 마이크로소프트웨어에 기고한 원고를 재편집한 포스트입니다. 그러므로, 본의 아니게 반말로 진행되고 있습니다. 원래 싸가지가 없어서 그런 것이 아니니 무한 용서를... ^^;;
또한, .NET Framework 3.5 SP1이 적용되기 이전의 소스이므로, 현재의 개발 환경과 다를 수 있습니다. 마소에 제출한 블로그 소스는 블로그 소스 다운로드에서 다운로드하실 수있습니다.
또한, .NET Framework 3.5 SP1이 적용되기 이전의 소스이므로, 현재의 개발 환경과 다를 수 있습니다. 마소에 제출한 블로그 소스는 블로그 소스 다운로드에서 다운로드하실 수있습니다.
블로그 웹 사이트 구성
블로그에 적용할 디자인을 선택하였으므로, 이제부터 실제적으로 블로그를 만들어 보도록 하겠다. Visual Studio 2008을 실행시킨 후, 새 웹사이트 생성 메뉴를 이용하여 <화면 3>과 같이 “BlogProgramming"라는 이름의 새로운 웹 사이트를 만든다.
<화면 3> 새로운 웹 사이트의 생성
새로운 웹 사이트를 생성하였으면, 블로그에 사용할 스타일시트 파일 및 이미지 파일을 웹 사이트로 추가하여야 한다. 우선, "Img"라는 이름의 폴더를 새로 웹 사이트에 추가 후, 웹 사이트 이름에서 우측 마우스를 클릭하여 "기존 항목 추가(Add Existing Item...)" 메뉴를 선택하여, 이전에 다운로드 받은 블로그 디자인에 사용되는 Shades of Gray 폴더의 Img 폴더 아래에 위치한 이미지 파일들을 웹 사이트로 추가한다. 또한, 같은 방법으로 Shades of Gray 폴더의 default.css 스타일시트 파일을 웹 사이트로 추가한다. 그 후 default.css 스타일 시트 파일명을 “BlogStyleSheet.css”로 변경한다. <화면 4>는 현재까지 작업한 “BlogProgramming" 웹 사이트의 구조이다.
<화면 4> “BlogProgramming" 웹 사이트의 구조
<그림 1>에서 설명한 것과 같이 필자가 만드려고 하는 블로그는 4단 분류를 채택하고 있다. 이 중, <그림 2>와 같이 ① 상단 메뉴 영역, ② 우측 메뉴 영역, 그리고 ④ 하단 컨텐츠 영역은 모든 페이지에 공통적으로 적용되는 부분이므로, 마스터 페이지(MasterPage)를 이용하는 것이 블로그를 만드는데에 있어 효과적이라고 할 수 있겠다. 웹 사이트 이름에서 우측 마우스를 클릭하여 “새 항목 추가(Add New Item...)" 메뉴를 선택하여, 블로그에서 사용할 ”BlogMasterPage.master“라는 이름의 마스터 페이지를 생성하도록 한다.
<그림 2> 마스터 페이지의 적용 영역
생성된 ”BlogMasterPage.master“ 마스터 페이지에 블로그 디자인에 사용되는 Shades of Gray 폴더에 포함되어 있는 Index.html 파일의 소스 중 필요한 부분을 복사하도록 한다. <리스트 1>은 ”BlogMasterPage.master“ 마스터 페이지의 전체 소스이다.
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="BlogMasterPage.master.cs" Inherits="BlogMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="BlogStyleSheet.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="margin: 0 12%">
<form id="form1" runat="server">
<div class="container">
<div class="header">
<a href="Default.aspx"><span>Neostyx's Blog</span></a>
</div>
<div class="stripes"><span></span></div>
<div class="nav">
<a href="Default.aspx">HOME</a>
<a href="About.aspx">ABOUT</a>
<a href="Tag.aspx">TAG</a>
<a href="Rss.aspx">RSS</a>
<a href="Search.aspx">SEARCH</a>
<a href="GuestBook.aspx">GUESTBOOK</a>
<a href="Login.aspx">LOGIN</a>
<a href="Admin.aspx">ADMIN</a>
<div class="clearer"><span></span></div>
</div>
<div class="stripes"><span></span></div>
<div class="main">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<div class="right">
<div class="subnav">
<h1>Notices</h1>
<ul>
<li><a href="#">공지</a></li>
</ul>
<h1>Categories</h1>
<ul>
<li><a href="#">카테고리</a></li>
</ul>
<h1>Archives</h1>
<ul>
<li><a href="#">2008-02</a></li>
</ul>
<h1>Licently Posts</h1>
<ul>
<li><a href="#">최근포스트</a></li>
</ul>
<h1>Licently Comments</h1>
<ul>
<li><a href="#">최근댓글</a></li>
</ul>
<h1>Favorite Links</h1>
<ul>
<li><a href="#">즐겨찾기</a></li>
</ul>
</div>
</div>
<div class="clearer"><span></span></div>
</div>
<div class="footer">
<div class="bottom">
<span class="left">© 2008 <a href
="http://www.neostyx.net">Neostyx.net</a>.</span>
<span class="right">Template design by
<a href="http://templates.arcsin.se">Arcsin</a></span>
<div class="clearer"><span></span></div>
</div>
</div>
</div>
</form>
</body>
</html>
<리스트 1> BlogMasterPage.master 마스터 페이지의 소스
블로그 디자인의 수정을 위해, 앞에서 생성한 “BlogStyleSheet.css” 스타일 시트 파일에 정의된 스타일 중 <리스트 2>에 표시된 스타일들을 수정한다.
.header {
background: #111;
border-bottom: 1px solid #333;
font: normal 2em sans-serif;
height: 70px;
}.header a {
color: #888;
display: block;
line-height: 60px;
text-decoration: none;
width: 100%;
}.subnav h1 {
padding-top: 8px;
background: url(img/bgh1.gif) repeat-x left bottom;
margin-bottom: 10px;
padding: 10px 0 4px;
}.footer {
background: #191919;
border-top: 1px solid #444;
color: #999;
padding: 3% 3% 3%;
}<리스트 2> 스타일의 수정
마스터 페이지만으로는 별도의 디자인을 웹에서 볼 수 없으므로, 웹 사이트 생성시에 기본적으로 생성되는 “Default.aspx" 웹 페이지를 삭제 후, 웹 사이트 이름에서 우측 마우스를 클릭하여 “새 항목 추가(Add New Item...)" 메뉴를 선택하여, 새로운 웹 폼을 추가하도록 한다. 새로운 웹 폼명은 ”Default.aspx"이며, 새로운 웹 폼을 생성 시 “마스터 페이지 선택” 항목을 체크하여, <화면 5>와 같이 마스터 페이지 선택 시 “BlogMasterPage.master”를 선택하도록 한다.
<화면 5> 마스터 페이지 선택 화면
새로운 웹 폼이 생성되었으면, “BlogMasterPage.master” 마스터 페이지에 적용되어 있는 디자인을 보기 위하여, CTRL+F5키 또는 디버그 메뉴의 디버깅하지 않고 시작 메뉴를 선택한다. “BlogMasterPage.master” 마스터 페이지의 화면은 <화면 6>과 같다.
<화면 6> “BlogMasterPage.master” 마스터 페이지의 화면
이제, 각 메뉴를 클릭 시에 이동할 페이지들을 미리 생성한다, 기본 페이지인 “Default.aspx" 페이지는 이미 생성했으므로, ”Default.aspx" 페이지를 생성할 때와 마찬가지의 방법으로 “About.aspx", "Tag.aspx", "Rss.aspx", "Search.aspx", "GuestBook.aspx", "Login.aspx", "Admin.aspx" 등의 7개 웹 페이지를 생성하도록 한다. <화면 7>은 현재까지 작업한 웹 사이트의 구조를 보여준다.
<화면 7> 웹 사이트의 구조
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
'Program > ASP.NET' 카테고리의 다른 글
| VS 2008을 이용한 블로그 프로그래밍 - Part4 (0) | 2009.06.16 |
|---|---|
| VS 2008을 이용한 블로그 프로그래밍 - Part3 (0) | 2009.06.16 |
| VS 2008을 이용한 블로그 프로그래밍 - Part1 (0) | 2009.06.16 |
| ASP.NET AJAX로 만드는 RSS Viewer - Part3 [ASP.NET] (0) | 2009.06.16 |
| ASP.NET AJAX로 만드는 RSS Viewer - Part2 [ASP.NET] (0) | 2009.06.16 |