Layout Project ver 1.4

답변이 많이 늦어져서 죄송합니다.

헤더 부분 전체에 이미지를 넣는 방법은 간단합니다. 배포된 스킨의 전체 가로 사이즈가 800px입니다. 즉 이미지 가로 사이즈도 800px로 맞춰 제작하시면 됩니다.

먼저 html/css편집 메뉴의 html에 해당하는 창에서 <!-- header -->라고 표시된 부분을 찾으신 후 header-alpha와 header-beta로 되어 있는 부분은 싹 지우시면 됩니다. 그리고 이미지 링크를 해주면 되겠지요. 아래와 같습니다.

<!-- header -->
    <div id="header">
    <div id="header-inner">

<img src="./image/lifeisfun.jpg" width="800px" />

    </div>
    </div>

지우시면 되는 부분
더보기
 
이미지 링크를 보시면 "./image/...jpg" 처럼 되어있는데요. html/css편집 메뉴의 오른쪽에 이미지 업로드 하는 곳이 있습니다. 스킨에 해당되는 이미지를 업로드하실 수 있습니다.

옆의 width="800px"는 옵션입니다. ^^ 이미지 사이즈가 800px라면 없어도 됩니다. 다만 사이즈가 조금 작을 경우 가로로 강제적으로 800px로 늘려라 하는 html 사용방법입니다.



만약 헤더의 전체에 큰 이미지를 넣는게 아니라 텍스트로 블로그 명칭은 그대로 두되, alpha 영역에만 이미지를 넣고 싶다면 <!-- header-alpha --> 부분의 <p>.</p> 대신에 <img src="./image/...jpg" /> 헤더 이미지 링크로 변경해주시면 됩니다.  alpha 영역의 사이즈는 560px로 설정되어 있습니다.

또한 이미지를 누르면 블로그 홈으로 링크를 걸고 싶으시다면 다음과 같이 하시면 됩니다.

<a href="http://your-site.com"><img src="./image/...jpg" /></a>


주의하실 점은 header-alpha는  css에 visibility:hidden; 속성을 넣어두었습니다. header-beta에는 블로그 명칭이 출력되지만 alpha에는 무엇을 하든 감추어지는 속성이지요. 때문에 html/css편집 메뉴의 style.css에서 아래와 같이 #header-alpha-inner { ... } 부분을 찾으세요.

#header-alpha-inner {
    width:560px;
    visibility:hidden;
}

그리고 visibillity:hidden; 을 삭제하시면 됩니다.

^^