티스토리 뷰

코딩

이벤트 페이지를 코딩해볼까?

Hello™ 2013. 7. 6. 11:30

도대체 어떻게 시작을 해야지 될지 너무나 막막한 내용이다.

코딩을 어떻게 하는 거에요? 개발을 어떻게 하는 거에요?

밥은 어떻게 먹는거에요? 랄까???


수저와, 포크, 밥그릇도 이야기 하지 않고 밥을 먹는 방법부터 이야기 해야지 되는것도 순서가 이상하고..등등.

하지만 마음 먹었으니 써야지.


요런건 알고있을테고.

<div class="bbsList mb_10">
     <table>
          <tbody>
               <tr>
                    <td style="width:450px;">나는 이미지</td>
                    <td style="width:230px;">나 컨텐츠</td>
               </tr>
          </tbody>

     </table>
</div>



이제 페이지를 볼 차례

디자이너가 이미지를 만들었음


이제 어떻게 잘라서 어떻게 코딩할지를 고민해야지 된다.


드래그 해서 파란색으로 하이라이트??

시켜봤음


이 페이지는 이렇게 잘렸네~


상단 큰 이미지

중앙에 탭으로 표시된 다른 카테고리들

하단에 내용, 스크립트...

이건 코딩화면
이것도 코딩화면



기본적인 사이트에 구조가 있을것이고.

그 부분에 코딩된 페이지를 넣는다.


보시라.



<div id="program_step1">

<span class="prev">

<img src="/images/event/201306/130626_english/btn_prev_off.gif" alt="이전" />

</span>

<ol>

<li>

<img src="/images/event/201306/130626_english/program_step1.jpg" alt="학습, 적용 단계" />

<span class="ttl">시작하기</span>

<span class="txt">강의 시작 전,<br />학습할 전략을 확인하기</span>

</li>

<li>

<img src="/images/event/201306/130626_english/program_step2.jpg" alt="학습, 적용 단계" />

<span class="ttl">이해하기(서현아)</span>

<span class="txt">강의를 통해<br />전략 학습하기</span>

</li>

<li>

<img src="/images/event/201306/130626_english/program_step3.jpg" alt="학습, 적용 단계" />

<span class="ttl">이해하기(최승규)</span>

<span class="txt">강의를 통해<br />전략 학습하기</span>

</li>

<li>

<img src="/images/event/201306/130626_english/program_step4.jpg" alt="학습, 적용 단계" />

<span class="ttl">적용하기</span>

<span class="txt">배운 전략을 학생 스스로<br />문제에 적용해서 풀어보기</span>

</li>

</ol>

<span class="next">

<img src="/images/event/201306/130626_english/btn_next_off.gif" class="cursor rollover" alt="다음" onclick="fn_previewChk(2);" />

</span>

</div>



이렇게 div class=이건스타일에 있겠지.~


* 이걸로 대강 어떻게 할 지에대한 구분이 들지 않을까?

제일 중요한 점은 어떻게 페이지를 자르고, 그걸 표한할까 이다.


이미지만 놓고 봤을때도 gif로 할지 jpg, png로 할지등등을 결정해야지 되고, 이미지를 통으로 잘라야지 될지, 하나하나 잘라서 붙여야지 될지등등을 디자인 페이지를 봤을때 생각을 해서 정해야지 된다.