3.3 웹메일 구성

1) 웹메일 기본 구성문서

맨위로

$#m.composesize#;

$#m.signature0#;

$#m.signature1#;

$#m.name#;

$#m.mboxusage#;

$#m.mboxdata#;

$#m.diskquota#;

→ 사용자의 첫 번째 서명을 표시합니다.

→ 사용자의 두 번째 서명을 표시합니다.

→ 메일서비스의 구체적 이름표시(보낸편지함, 편지쓰기, ... 등)

→ 메일서비스 사용 용량 비율 (%)

→ 메일서비스 사용 용량

→ 사용자에게 허가된 디스크 용량

$#m.mboxselect#;

$#m.mails#;

$#m.newmail#;

$#m.id#;

$#m.data#;

$#m.pages#;

$#m.pageno#;

$#m.totalmails#;

→ 현재 목록에 표시된 메일 수

→ 읽지 않은 메일 수

→ 현재 열린 편지함의 아이디

→ 편지함의 용량

→ 편지함 목록의 페이지 수

→ 현재 페이지 번호

→ 편지함의 전체 메일 수

$#m.querybox#;

$#m.queryfield#;

$#m.m_seek#;

$#m.m_move#;

$#m.m_remove#;

$#m.m_allread#;

$#m.list#;

$#m.ltop#;

$#m.lbody#;

$#m.pagemenu#;

→ 검색 필드 선택창

→ 찾기 메뉴버튼

→ 옮기기 메뉴버튼 $#m.boxselect#; 의 선택창에서 고른 편지함으로 이동

→ 삭제하기 메뉴버튼

→'모두 읽은 것으로 처리'메뉴버튼   ex)$#m.m_allread#,모두 읽음으로;

→ 편지함 편지 목록의 헤드라인과 목록을 동시에 표시

→ 편지함 편지 목록의 헤드라인만 표시

→ 편지함 편지 목록만 표시

→ 편지함 페이지 메뉴표시

$#m.mailno#;

$#m.art_up#;

$#m.art_dn#;

$#m.to#;

$#m.cc#;

$#m.bcc#;

$#m.from#;

$#m.m_reply#;

$#m.m_forward#;

$#m.m_print#;

$#m.m_up#;

$#m.m_down#;

$#m.m_del#;

$#m.subject#;

$#m.ctype#;

$#m.charset#;

$#m.date#;

$#m.time#;

$#m.context#;

$#m.file#;

$#m.received#;

$#m.mailname#;

→ 윗 편지 읽기 메뉴

→ 아래편지 읽기 메뉴

→ 수신 주소

→ 참조 주소

→ 숨은 참조 주소

→ 보낸이 주소

→ 답변달기 메뉴버튼

→ 포워딩 메뉴버튼

→ 인쇄하기 메뉴버튼

→ 윗 편지 읽기 메뉴버튼 → 아래 글 읽기 메뉴버튼

→ 지우기 메뉴버튼

→ 제목 표시

→ 컨텐츠 타입 표시

→ 문자셋 표시

→ 작성일자 표시

→ 작성시간 표시

→ 본문 표시

→ 첨부파일 표시

→ 수신 경로 정보 표시

→ 편지작성 이름표시 (개인마다 환경설정에서 지정함)

형식) $#load,'#mail?cmd=brief&opt="[OPTION]"'#;

    OPTI0N = [편지함예약어],style=[목록표시스타일],l=[목록수],lh=[목록의 tr 높이]

예) $#load,'#mail?cmd=brief&opt='inbox,style="file:Title///50:Date//35:mailto",l=5,lh=25'#;

   → 받은편지함

1. 각 <td>~</td> 값은 콜론(":")으로 구분합니다.    LIST_TD1: LIST_TD2:

2. 각 td 셀의 특성치는 다음 순서에 의해 슬래시(/)로 구분하여 정리합니다.

 필드네임/헤드라인이름/가로넓이가중치(100이하)/문자길이제한.

 * 없는 항목에 대해서는 연속으로 슬래시(/)를 입력합니다.

3. 예) file:Title///50:Date//35:mailto

   기본):title

필드네임

넓이 가중치

제한문자열

정렬방식

설명

비고

title

100

30

제목

date

 30

center

작성일시

file

 15

center

첨부파일 (파일아이콘)

from

 50

30

발신자 주소

mailto

 50

30

발신/수신 주소

to

 50

30

수신자 대표주소

$#addr.query#;  → 검색 쿼리로 입력된 문자열;

      ex) <input name="query" value="$#addr.query#;" />

$#addr.m_seek#; → 검색 (아이콘 표시)

$#addr.name#;  → 주소록 폴더 이름 표시

$#addr.data[]#; → 주소 구성 데이터의 자바스크립트 배열(편집화면에서 사용함)

2) 웹메일 문서의 style 적용

맨위로

<tr>

<td class="cell4name">주소</td>

<td class="cell4input"><input class="inputcell" style="width:100%;" /></td>

클래스 네임

  용도설명

비고

cell4name

입력 폼에서 입력항목의 이름을 위치시키는 td

cell4value

편지읽기에서 "여름<summer@sm.kseek.com>" td

cell4input

입력을 위한 셀( input의 경계선은 none 임)

cell4textarea

편지쓰기에서 본문 편집을 위한 td

cell4list

편지, 주소록 등의 목록에서 일반 리스트 구성 td

cell4last

편지, 주소록 등의 목록에서 마지막 리스트에서의 td

cell4ltop

편지목록에서 항목 표시줄 구성 th

cell4headline

주소록 관리에서  목록의 헤드라인 구성 th

cell4pages

편지목록에서 Page 표시하는 셀

cell4title

cell4name보다 상위 개념의 이름을 위치시키는데 사용.

<style type="text/css">

.cell4name { border-style:outset; border-width:1px; padding:'0,3,1,3'; }

.cell4input{ border-style:inset; border-width:1px; padding:'0,0,0,0'; }

.inputcell { border-style:none; border-width:1px; padding:'0,0,0,0'; }

.cell4list { height:20;border-bottom:solid 1px; paddind:'0,4,1,4'; }

.cell4list { height:20;border-bottom:solid 3px #f0f0f0; }

</style>

3) 전자우편 편집화면

맨위로

var file_count=1;

function address_browser(){

  url='$#m.href.addr4mail#;';

  w=window.open(url,'address_win','width=600,height=400,scrollbar=1,resizable=0');

  return (false);

}

function set_rcpt(no, value){

  var ele=null;

  if(no==1)ele=document.getElementById('to');

  if(no==2)ele=document.getElementById('cc');

  if(no==3)ele=document.getElementById('bcc');

  if(ele!=null)ele.value=value;

}

function plus_filefield(form)

{

  if(file_count>5)return false;

  file_count++;

  str = '<br /><input type="file" name="file" style="width:99%" />';

  ffield=document.getElementById("filefield");

  ffield.innerHTML+=str;

  return false;

}

var html_mode =1;

function set_editor_init(hmode)

{

 c0ntext=document.getElementById("context");

 p_div=document.getElementById("editor_position_div");

 ctype=document.getElementById("ctype");

 if(!ctype||!p_div||!context)return false;

 p_div.innerHTML='<textarea name="context" id="context">' +context.value+'</textarea>';

 if(hmode){ 

  ctype.value="text/html";

  editor_init("context");

    } else { ctype.value="text/plain"; }

 return false;

}

function change_editor()

{

 html_mode=html_mode?0:1;

 set_editor_init(html_mode);

}

<html>

<head>

<title>SEGIO Webmail Service</title>

<link href="/segio/msg/mail.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">// 자바스크립트 영역 -- 위에서 소개되었음 ---</script>

<style>

#context { width:100%;height:400px;border: none 0;word-break:break-all; }

</style>

</head>

<body $#if i.htmlmail#;0nload="editor_init('context');"$#fi#;>

<form name="form" method="post" enctype="multipart/form-data" target="$#i.zeroid#;">

 $#m.name#;

수신(to)  <input name="to" id="to" value="$#m.to#;" />

 <img src="$#m.icon,m_getaddr.gif#;" 0nclick="return address_browser();"

  style="cursor:pointer;" />

참조(cc)  <input name="cc" id="cc" value="$#m.cc#;" />

숨은참조(bcc) <input name="bcc" id="bcc" value="$#m.bcc#;" />

편지제목  <input name="subject" value="$#m.subject#;" class="input" />

$#if i.htmlmail#;

편집형식

 Html<input type="radio" name="checktype" 0nclick="change_editor();" checked="true" />

 Text<input type="radio" name="checktype" 0nclick="change_editor();" />

$#fi#;

  <select name="charset">

  <opti0n value="EUC-KR">EUC-KR</option>  <opti0n value="UTF-8">UTF-8</option>

  <opti0n value="EUC-JP">EUC-JP</option>  <opti0n value="ISO-2022-JP">ISO-2022-JP</option>

  </select>

<input name="mailname" value="$#m.mailname#;" /> &lt;$#u.id#;@$#i.id#;&gt;

<input name="save2sentbox" type="checkbox" value="ON" checked="true" /> 보낸편지저장

<input name="ctype" id="ctype" type="hidden" value="$#if

 i.htmlmail#;text/html$#else#;text/plain$#fi#;" />

<div id="editor_position_div">

<textarea name="context" id="context">$#m.context#;</textarea>

</div>

서명  <pre>$#m.signature0#;<hr />$#m.signature1#;</pre>

첨부($#m.composesize#;MB) <div id="filefield" name="filefield">

<input type="file" name="file" style="width:99%;" />

<input name="button" 0nClick="plus_filefield(this.form)" value=" + " />

<input type="submit" value="지금보내기" class="button" name="act_send " />

<input type="reset" value="다시쓰기" class="button">

</form>

</body>

</html>

4) 전자우편 목록화면

맨위로

<script type="text/javascript">

function reverse_check(tform) {

  var i,j;

  var checked=tform.reverse_ck.checked;

  for(i=1,j=tform.elements.length;i<j;i++){

    var ele=tform.elements[i];

    if(ele.name=="normal_ck"){ele.checked = checked?!ele.checked:checked;}

  }

  return;

}

</script>

<html>

<head>

<title>SEGIO Webmail Service</title>

<link href="/segio/msg/mail.css" rel="stylesheet" type="text/css" />

<script type="text/javascript"> //자바스크립트 -- 앞에서 설명된 부분 --</script>

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<form method="post" enctype="multipart/form-data" target="$#i.zeroid#;">

<img src="/segio/msg/ic_mail.gif" /> $#m.name#;

$#m.m_remove#;   $#m.mboxselect#;  $#m.m_move#; Mail:$#m.mails#;  $#m.m_list#;

<div>$#m.list,style=""#;</div>

$#m.pagemenu#;

$#m.m_remove#; $#m.mboxselect#;  $#m.m_move#; Mail:$#m.mails#;  $#m.m_list#;

</form>

</body>

</html>

$#m.list,style="no/번호/20:file/파일:title/편지제목//35:readck/읽음:from/발신:to/수신:size/용량:date/일시"#;

5) 전자우편 읽기 구성문서

맨위로

<html>

<head>

<title>SEGIO Webmail Service</title>

<link href="/segio/msg/mail.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form method="post" target="$#i.zeroid#;" enctype="multipart/form-data" style="margin:0;">

<img src="/segio/msg/ic_mail.gif" />

$#m.name#; <img src="/segio/msg/segio_logo.gif" />

$#m.m_del#; $#m.mboxselect#; $#m.m_move#; $#m.m_reply,답장#; $#m.m_forward#;

$#m.m_print,인쇄#; $#m.m_down#; $#m.m_list#; $#m.m_up#;

Subject:  $#m.subject#;

From: $#m.from#;

To:  $#m.to#;

Cc:  $#m.cc#;

Bcc: $#m.bcc#;

<b>Properties:

<div class="cell4value" id="property_view">

  본문 Content-type: $#m.ctype#;;Charset=$#m.charset#;&nbsp; Date:$#m.date#;

</div>

Disposition: $#m.file#;

<div id="context_view" class="cell4context"> $#m.context#;</div>

$#m.m_del#; $#m.mboxselect#; $#m.m_move#; $#m.m_reply,답장쓰기#;

$#m.m_forward#; $#m.m_print,인쇄#; $#m.m_down#; $#m.m_list#; $#m.m_up#;

</form>

</body>

</html>

$#if l.webmaster#;

<script>

vis=false;

function received_view()

{

 rec=document.getElelmentById("div_received");

    view=document.getElelmentById("property_view");

    if(view&&rec)view.innerHTML='<br />'+rec.innerHTML;

    return;

}

</script>

<a href="#" 0nclick="received_view();return(false);">경로</a>

<div id="div_received" style="visibility:hidden;position:absolute;">$#m.received#;</div>

$#fi#;

6) 주소록 검색하기

맨위로