 |
 |
HOME > 호스팅 > 아사프로2.0 > 만들기 > 스킨만들기 > 설문조사스킨 |
|
|
|
설문조사는 웹페이지에서 고객들의 다양한 의견을 수렴하기 위해 사용되는 기능입니다.
기본적으로 제공되는 스킨을 이용하여 웹페이지를 구성할 수도 있으나 아사프로 설문조사는 기본으로 제공하는 형식 외에 사용자가 스킨을 제작하여 추가할 수 있습니다.
스킨은 투표하기스킨, 개별결과보기스킨, 전체결과보기스킨 총 3페이지를 제작하여 추가하면 됩니다. |
| 1. 디자인하기 |
| 새로운 스킨을 제작하기 위해 샘플 파일을 다운로드 받습니다. |
| 다운로드 받은 파일을 원하는 디자인으로 수정합니다. |
| 스킨 샘플은 스킨이미지목록페이지에서 다운로드 받을 수 있습니다. |
| 2. HTML 코딩 및 적용 |
| (1) 투표하기 코딩 |
| 투표하기 코딩페이지는 설문 조사 제목과 설문 항목을 사용자에게 보여주고 선택할 수 있는 기능을 제공합니다. |
 |
<style type='text/css'>
#maintb22 {background:#FFFFFF;}
#subject{font-size:12px;color:#5e6882;font-weight:bold;}
#item{font-size:12px;color:#5e6882;}
#etc{font-size:12px;color:#5e6882;}
</style>
<table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_BlueLeft.png') no-repeat" width="5" height="26"></td>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_BlueBg.png') repeat-x 0 0;" align="center">
<img src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_QueTit.png" border="0" alt=""></td>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_BlueRight.png') no-repeat" width="5" height="26"></td></tr>
<tr>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/border_line.gif') repeat-y 0 0;"></td>
<td>
<table id="maintb22" width='<?=$widths?>' cellpadding="0" cellspacing="0" border='0' >
<tr>
<td valign='top'>
<table border="0" width="100%" cellpadding="0" cellspacing="0" bordercolorlight="black" bordercolordark="white" >
<tr>
<td colspan="2">
<table width="100%" height="20" align="center">
<tr height="3"><td></td></tr>
<tr><td id="subject"><?=$registry_col1[subject]?></td></tr>
</table>
</td></tr>
<?
echo $itemshow;
?>
<?
echo $etcyn;
?>
<tr>
<td height="5" width="100%" align="center" colspan="2"></td></tr>
<tr>
<td align="center" colspan="2">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<input type="image" onclick="aa()" src='<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_Titbtn1.png' <?=$onclick_submit?> >
</td>
<td width="2"></td>
<td>
<img src='<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_Titbtn2.png' border="0" <?=$onclick_result?> style="cursor:hand;">
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</td>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/border_line.gif') repeat-y 4 0;"></td></tr>
<tr>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bg_left_bottom.gif') no-repeat" width="5" height="5"></td>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/border_line.gif') repeat-x 0 4;"></td>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bg_right_bottom.gif') no-repeat" width="5" height="5"></td></tr>
</table>
|
|
| 변수 |
설명 |
| $widths |
전체 테이블의 가로폭을 설정하는 변수 |
| $col_num1 |
설문물음에 따라 colspan해야 할 개수 |
| $registry_col1[subject] |
설문조사 제목 출력 |
| $itemshow |
설문조사 항목 출력 |
| $etcyn |
설문조사 기타의견 내용 |
| $onclick_submit |
설문조사 투표하기 버튼 |
| $onclick_result |
설설문조사 결과보기 버튼 |
|
위의 프로그램 소스에서 빨간색으로 표시된 부분은 코딩을 하면서 꼭 필요한 요소입니다.
항목에 대한 글자색이나 크기를 변경하고 싶다면 #item{font-size:12px;color:#5e6882;}를 이용하여 변경하시면 됩니다. |
| $etcyn는 설문조사 항목에서 기타 의견을 출력하는 변수입니다. |
| (2) 개별결과보기 코딩 |
| 현재 진행되고 있는 설문조사 결과 및 현황을 볼 수 있는 기능입니다. |
 |
<style type='text/css'>
#maintb22 {background:FFFFFF;}
#subject{font-size:12px;color:#5e6882;font-weight:bold;}
#item{font-size:12px;color:#5e6882;}
#etcitem{font-size:12px;color:#5e6882}
#etctitle{font-size:12px;color:#5e6882;text-align:center;}
#etctext{font-size:12px;color:#5e6882;}
#total{font-size:12px;color:#5e6882;text-align:right;}
#ImgSrc1 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar1.gif");}
#ImgSrc2 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar2.gif");}
#ImgSrc3 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar3.gif");}
#ImgSrc4 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar36.gif");}
#etc {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar25.gif");}
#ImgSrc5 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar28.gif");}
#ImgSrc6 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar24.gif");}
#ImgSrc7 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar23.gif");}
#ImgSrc8 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar22.gif");}
#ImgSrc9 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar1.gif");}
#ImgSrc10 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar30.gif");}
#ImgSrc11 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar19.gif");}
#ImgSrc12 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar18.gif");}
#ImgSrc13 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar17.gif");}
#ImgSrc14 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar16.gif");}
#ImgSrc15 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar15.gif");}
#ImgSrc16 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar14.gif");}
#ImgSrc17 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar13.gif");}
#ImgSrc18 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar10.gif");}
#ImgSrc19 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar11.gif");}
#ImgSrc20 {text:expression(src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bar12.gif");}
</style>
<table <?=$mainyn?> border="0" cellpadding="0" cellspacing="0" width="<?=$widths?>" align="left">
<tr>
<td width="<?=$widths?>">
<table cellspacing="0" cellpadding="0" border="0" width="<?=$widths?>">
<tr>
<td><img src='<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_BlueLeft.png'></td>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_BlueBg.png') repeat-x 0 0;" align="center"><img src="<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_ResTit.png" border="0" alt=""></td>
<td><img src='<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_BlueRight.png'></td></tr>
<tr>
<td width='5'style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/border_line.gif') repeat-y 0 0;"><img src='<?=$POLL_MODULE_URL?>/skin/POLL_22/image/border_line.gif'></td>
<td>
<table id='maintb22' border="0" bordercolor="white" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr height="25">
<td id="subject"> <?=$registry_col1[subject]?></td></tr>
<tr>
<td align="center">
<table border="0" width="100%" cellpadding="3" cellspacing="0" bordercolorlight="black" bordercolordark="white" >
<?=$itemcontent?>
<?=$etcshow?>
</table>
</td></tr>
<tr>
<td align="center">
<?=$etcview?>
</td></tr>
<tr height="15">
<td id="total"><b> - 총 투표수 : <?=$item_total?>표 -</b></td></tr>
</table>
</td>
<td width='5'height='100%'>
<table cellpadding="0" cellspacing="0" height='100%'>
<tr>
<td width='4'></td>
<td width='1'style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/border_line.gif') repeat-y 0 0;"><img src='<?=$POLL_MODULE_URL?>/skin/POLL_22/image/border_line.gif'width='1' border='0'></td></tr>
</table>
</td></tr>
<tr>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bg_left_bottom.gif') no-repeat" width="5" height="5"></td>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/border_line.gif') repeat-x 0 4;"></td>
<td style="background:url('<?=$POLL_MODULE_URL?>/skin/POLL_22/image/bg_right_bottom.gif') no-repeat" width="5" height="5"></td></tr>
</table>
<br />
<table width="<?=$widths?>" cellpadding="0" cellspacing="0">
<tr>
<td height="30" align="center" valign="middle">
<a href='<?=$PHP_SELF?>?asp_code=<?=$asp_code?>&asp_mode=normal&pc=<?=$pc?>&asp_act=result&category_code=<?=$category_code?>&basic_asp_code=<?=$basic_asp_code?>&target=<?=$target?>&pn=<?=$pn?>'><img src='<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_Resbtn1.png' valign="top" border=0></a>
<a href='<?=$PHP_SELF?>?asp_code=<?=$asp_code?>&asp_mode=normal&pc=<?=$pc?>&asp_act=list&category_code=<?=$category_code?>&basic_asp_code=<?=$basic_asp_code?>&target=<?=$target?>&pn=<?=$pn?>'><img src='<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_Resbtn2.png' border=0></a>
<a href='javascript:self.close();' <?=$close_display?>><img src='<?=$POLL_MODULE_URL?>/skin/POLL_22/image/kr_Resbtn3.png' border=0></a>
</td></tr>
</table>
</td></tr>
</table>
|
|
| 변수 |
설명 |
| $widths |
설문조사 테이블 넓이 |
| $item_total |
총 투표수 |
| $PHP_SELF |
현재페이지 경로 |
| $asp_code |
설문조사 개별코드 |
| $category_code |
설문조사 분류코드 |
| $etcyn1 |
기타의견 첫 번째 항목의 보임 숨김 처리 |
| $itemshow |
설문조사 항목 |
| $etcshow |
설문조사 기타 의견 그래프 |
| $etcview |
설문조사 기타 의견 내용 |
|
| (3) 전체결과보기 디자인 |
| 현재 진행되고 있는 설문조사만 아니라 이미 설문조사가 완료된 결과를 확인할 수 있습니다. |
 |
<style type='text/css'>
#itemtb1 {background:FFFFFF;}
#itemtb2 {background:#FFFFFF;}
#itemtb3 {background:#FFFFFF;}
#itemtb4 {background:#FFFFFF;}
#itemtb1 tr td {font-size:12px;color:#5e6882;}
#itemtb2 tr td {font-size:12px;color:#5e6882;}
#itemtb3 tr td {font-size:12px;color:#5e6882;}
#itemtb4 tr td {font-size:12px;color:#5e6882;}
#leftbg1 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/kr_BlueLeft.png") no-repeat;}
#rightbg1 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/kr_BlueRight.png") no-repeat;}
#imgbg1 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/kr_BlueBg.png") repeat-x 0 0;}
#rightline1 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/border_line.gif") repeat-y 4 0;}
#left_bottom_line1 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/bg_left_bottom.gif") repeat-x 0 0;}
#left_border_line1 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/border_line.gif") repeat-y 0 0;}
#bottomline1 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/border_line.gif") repeat-x 0 0;}
#right_bottom_line1 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/bg_right_bottom.gif") repeat-x 0 0;}
#leftbg2 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/kr_BlueLeft.png") no-repeat;}
#rightbg2 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/kr_BlueRight.png") no-repeat;}
#imgbg2 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/kr_BlueBg.png") repeat-x 0 0;}
#rightline2 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/border_line.gif") repeat-y 4 0;}
#left_bottom_line2 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/bg_left_bottom.gif") repeat-x 0 0;}
#left_border_line2 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/border_line.gif") repeat-y 0 0;}
#bottomline2 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/border_line.gif") repeat-x 0 0;}
#right_bottom_line2 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/bg_right_bottom.gif") repeat-x 0 0;}
#leftbg3 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/kr_BlueLeft.png") no-repeat;}
#rightbg3 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/kr_BlueRight.png") no-repeat;}
#imgbg3 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/kr_BlueBg.png") repeat-x 0 0;}
#rightline3 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/border_line.gif") repeat-y 4 0;}
#left_bottom_line3 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/bg_left_bottom.gif") repeat-x 0 0;}
#left_border_line3 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/border_line.gif") repeat-y 0 0;}
#bottomline3 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/border_line.gif") repeat-x 0 0;}
#right_bottom_line3 {background:url("/~AsaProgram/module/poll/skin/POLL_22/image/bg_right_bottom.gif") repeat-x 0 0;}
#ImgSrc1 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar1.gif");}
#ImgSrc2 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar2.gif");}
#ImgSrc3 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar3.gif");}
#ImgSrc4 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar36.gif");}
#ImgSrc5 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar28.gif");}
#ImgSrc6 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar24.gif");}
#ImgSrc7 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar23.gif");}
#ImgSrc8 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar22.gif");}
#ImgSrc9 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar21.gif");}
#ImgSrc10 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar30.gif");}
#ImgSrc11 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar19.gif");}
#ImgSrc12 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar18.gif");}
#ImgSrc13 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar17.gif");}
#ImgSrc14 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar16.gif");}
#ImgSrc15 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar15.gif");}
#ImgSrc16 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar14.gif");}
#ImgSrc17 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar13.gif");}
#ImgSrc18 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar10.gif");}
#ImgSrc19 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar11.gif");}
#ImgSrc20 {text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar12.gif");}
#etcimgsrc{text:expression(src="/~AsaProgram/module/poll/skin/POLL_22/image/bar25.gif");}
</style>
<?
$imageTAG='/~AsaProgram/module/poll/skin/POLL_22/image/kr_ResTit.png';
$contents->pollcontent('진행률','투표수','표','총투표수','기타','2',$imageTAG);//항목내용?>
<table <?=$pstyle?> width='100%' cellpadding='0' cellspacing='0' >
<tr>
<td width='100%' align='center'>
<?
$paging->Link($page,$record,$link,$linking,$url_file,$url_parameter,$search_chk,$search_parameter);?></td>
</tr>
</table>
<table width='100%' cellpadding='0' cellspacing='0' border="0">
<tr>
<td align='center' valign='middle' width='<?=$widths?>'>
<a href='<?=$PHP_SELF?>?asp_code=<?=$asp_code?>&asp_mode=normal&pc=<?=$pc?>&asp_act=result&category_code=<?=$category_code?>&basic_asp_code=<?=$basic_asp_code?>&target=<?=$target?>&pn=<?=$pn?>'><img src='/~AsaProgram/module/poll/skin/POLL_22/image/kr_Resbtn1.png' valign="top" border=0></a>
<a href='<?=$PHP_SELF?>?asp_code=<?=$asp_code?>&asp_mode=normal&pc=<?=$pc?>&asp_act=list&category_code=<?=$category_code?>&basic_asp_code=<?=$basic_asp_code?>&target=<?=$target?>&pn=<?=$pn?>'><img src='/~AsaProgram/module/poll/skin/POLL_22/image/kr_Resbtn2.png' border=0></a>
<a href='javascript:self.close();'
<?=$close_display?>><img src='/~AsaProgram/module/poll/skin/POLL_22/image/kr_Resbtn3.png' border=0></a>
</td></tr>
</table>
|
|
| 변수 |
설명 |
| $imageLeft |
설문조사 왼쪽 테두리 이미지 |
| $imageRight |
설문조사 오른쪽 테두리 이미지 |
| $imageBG |
설문조사 타이들 이미지 |
| $imageTAG |
설문조사 타이틀의 글씨 이미지 |
| $contents->pollcontent('진행률','투표수','표','총투표수','기타','2',$imageLeft,$imageBG,$imageRight,$imageTAG); | |
설문조사 제목 및 항목 |
| $paging->Link($page,$record,$link,$linking,$url_file,$url_parameter,$search_chk,$search_parameter); | |
페이지 나누기 |
| $widths |
테이블 너비 지정 |
| $PHP_SELF |
현재 페이지 경로 |
| $asp_code |
설문조사 코드 |
| $category_code |
설문조사 분류코드 |
| $pn |
설문조사 그룹명 |
| $close_display |
투표/결과창 띄움울 때 나오는 닫기버튼 페이지로 넘김때는 숨김처리 함. |
|
| 그래프의 이미지를 변경하고 싶다면 CSS를 이용하여 이미지를 변경할 수 있습니다. |
