
|
본 미션을 수행하기전 자신에게 맞는 미션인지 확인 후 수행하시기 바랍니다.
[1세대 - 레이아웃선택 방식] ------------------------------------------------------------ A코스
우리 아람 솔루션은 지난 2006년부터 비공식 베타오픈 하였으며, 이때 당시 표준코딩이라는 작업방식이 존재하지 않았습니다.
그렇다 보니 2006~2009년사이에 구축된 모든 홈페이지 및 템플릿은 익스7,8에만 맞춰줘 있으며, 스마트폰이라는게 보급화되지 않았기 때문에 스마트폰에서는 일부 깨지는 현상이 발생되고 있습니다.
결국 2009년도 이하 제작된 템플릿은 PC전용 홈페이지이며, 스마트폰에서 사용시 별도 모바일웹을 구축해서 이를 보안해야 합니다.
이때 당시 제작된 모든 템플릿은 "레이아웃 선택방식 + 자바스크립트"로 제작되어 있으며, 사용방법을 익히시려면 미션 A코스를 수행하셔야 합니다.
왜 궂이 구버젼 템플릿을 사용하기 위해 사용방법을 익혀야 하냐구요?
이유는 간단합니다. 싸고 종류가 무려 200여종이나 되기 때문입니다.
[2세대 - 스킨 방식] ------------------------------------------------------------------- B코스
위 레이아웃 선택 방식의 문제점은 특정 레이아웃이 정해져있기때문에 좀 더 독특하고 다양한 디자인을 소화해내기에 한계가 있으며, 모바일웹 제작시 적합하지 않습니다.
이를 보안하기 위해 스킨제작 방식이 추가 되었으며, 사용방법은 미션 B코스를 수행하시면 됩니다.
스킨방식으로 제작된 템플릿은 2010~2012년 사이에 제작된 템플릿으로 약 200여종 됩니다.
[3세대 - PHPX 방식] ------------------------------------------------------------------ C코스
최근 IT급변화로 인해 홈페이지 하나 제작 하려면 많은것을 고려 해야 합니다.
스마트폰 및 테블릿 최적화, 장애인차별법 금지, 접근성, 웹표준등 신경써야할것들이 너무나 많아 졌습니다.
더군다나 반응형웹이라는 새로운 상품이 출시 되어 더욱더 복잡해져만 가고 있습니다.
아람 솔루션은 이를 보안하기 위해 PHPX 문법을 개발하고 반응협 템플릿을 출시하였습니다.
PHPX문법을 익히시려면 미션 C코스를 수행해야 합니다.
|

아람스쿨에서 회원가입 하신후 아래 주소에서 미션 전용 계정을 만듭니다.
http://www.aramschool.co.kr/shop_add_page/index.htm?page_code=sub2_1


http://계정ID.aramschool.co.kr/admin/ 으로 접속하여 운영관리자로그인을 합니다.
|
※ 운영관리자모드란?
홈페이지 제작완료 후 운영에 필요한 컨텐츠만 관리 할 수 있도록 되어 있습니다.
반면에 고급관리자 모드는 홈페이지 제작 및 컨텐츠 관리등 모든 기능이 포함 되어 있습니다.
|
고급관리자 모드로 로그인 하신 후 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성]에서 "DOCTYPE 선택" 에서 XHTML 1.0 Transitional 을 선택 해주세요.
참고로 HTML4.0은 구버젼이고 HTML5은 신버젼인데 이번 미션에서는 일반 표준코딩에 가장 많이 사용하는 XHTML 1.0 Transitional로 사용하고자 합니다.
그리고 레이아웃 선택 방식에서 부분 선택방식을 선택합니다.



고급관리자 모드로 로그인 하신 후 [디자인관리 》 고급 디자인 관리 》 메인 화면 디자인]에서 홈페이지 사이즈를 아래와 같이 설정 합니다.
1) 상단 디자인을 선택 후 가로 사이즈를 960 입력
2) 왼쪽 디자인을 선택 후 가로 사이즈를 220 입력
3) Body 디자인을 선택 후 가로 사이즈를 740 입력
4) 하단 디자인을 선택 후 가로 사이즈를 960 입력

|
※ 본 솔루션에서 사이즈를 설정 하지 않게 되면 기본 값은 100% 입니다.
※ 본 솔루션은 기본적으로 상단, 왼쪽, 본문, 하단으로 레이아웃이 짜여져 있습니다.
만약 자유로운 레이아웃이 필요한 경우, 초급미션 B코스로 진행하시기 바랍니다.
|


최초 사이트 생성시 상단디자인은 "공란"으로 되어있습니다.
본 미션은 솔루션 교육 뿐만 아니라 기본적인 javascript와 html 을 같이 교육 하고 있습니다.
교육 차원에서 우리는 html편집기 모드 보다는 TEXT모드로 사용하시기 바랍니다.
TEXT모드로 설정 하였다면 아래와 같이 제목에는 "내가만든 상단 디자인" 이라고 입력하고 html 소스를 붙여넣으시기 바랍니다.

|
※ HTML 소스
<table width="960" border="1">
<tr>
<td><br>
<a href="/shop_main/main_body.htm">웹디모 초간단 홈페이지</a><br>
<br>
우리 홈피 메뉴 : ( 아직없음^^;;)<br>
<br>
</td>
</tr>
</table>
|
|
※ 위 소스에서 /shop_main/main_body.htm 은 메인으로 이동하는 링크이므로 꼭 기억해야 합니다.
(x)<a href='/'>메인으로 이동</a>
(x)<a href='http://내도메인'>메인으로 이동</a>
(o)<a href='/shop_main/main_body.htm '>메인으로 이동</a>
※ 본 솔루션은 일반 html 및 <div>표준 코딩 모두 적용 가능 합니다.
|


위와 같은 방식으로 왼쪽 디자인도 아래와 같이 수정 하시면 됩니다.

|
※ html 소스
<table width="200" border="1">
<tr>
<td>
<br>
<br>
로그인 박스<br>
<br>
<br>
배너1 <br>
배너2 <br>
배너3 <br>
배너4 <br>
</td>
</tr>
</table>
|


위와 같은 방식으로 BODY 디자인도 아래와 같이 수정 하시면 됩니다.

|
※ HTML 소스
<table width="740" border="1">
<tr>
<td>
<p><br>
안녕하세요 000 네 홈페이지 입니다.</p>
<p>(여기에 간단한 홈페이지 소개말입력해주세요 ^^)<br>
</p>
</td>
</tr>
</table>
|


위와 같은 방식으로 하단 디자인도 아래와 같이 수정 하시면 됩니다.

|
※ HTML 소스
<table width="960" border="1">
<tr>
<td width="200">
<p><br>
<a href='/shop_main/main_body.htm'> 하단 로고</a><br>
</p>
</td>
<td> <br>
홈페이지명 : 초급미션홈피<br>
운영자:웹돌이<br>
이메일주소 : aaaa@naver.com<br>
<br>
총방문자수 : 00 / 이달방문자수 : 00 / 오늘 방문자수 : 00 </td>
</tr>
</table>
|
방문자수는 다다다음 미션에서 프로그램을 입혀 보도록 하구요 우선임의로 00 입력하시면 됩니다.
|
※ 보통 본 미션을 수행하면서 아람솔루션이 상단,왼쪽,본문 하단이라는 틀안에서 html 소스가 삽입되는 방식인것을 알수 있습니다.
이렇게 상단,왼쪽,본문,하단을 나누어서 관리하게 되면, 유지보수면에서 빠르고 편리한 이점이 있지만 자유로운 레이아웃구성이 힘들수 있다라는 단점이 있습니다.
이와같이 분리되어 있는 레이아웃은 일반 홍보형홈페이지 또는 쇼핑몰인 경우 적합합니다.
여러분께서 자유로운 레이아웃이 필요하다면, 초급미션 B코스로 진행할 것을 권해드립니다.
혹시 본글을 읽고 다시 시작하기 위해 탈퇴하고 다시 회원가입하시려는 분들이 많은데. 그렇게 되면 일주일동안 재가입이 안되며, 같은 IP로 역시 재가입이 안되므로 회원가입이 어렵습니다. 그러므로 엎어서 새로 시작해도 무방하니 사용하던 계정으로 다시 시작하시기 바랍니다.
|
여기까지 잘 따라하셨다면 아래와 같이 완성되었을것 입니다.
완성화면 : http://uhkr01.aramschool.co.kr
완성하신 분은 다음 미션으로 고고씽~~~~ ^^
|
위 미션 수행 후 덧글에 소감 한마디 남겨주세요~~~~ ^0^
|