|
출처: 사랑방카페 원문보기 글쓴이: ♤은행나무
◎ 05/29 11 주차
□ 쇼핑몰 홈페이지를 만들려면
1) 다양한 builder를 선택하고 활용할 줄 알아야 한다.
2) 홈페이지의 전체 레이아웃(판짜기) 방법을 알아야 한다.
3) 사이트의 성격에 맞는 게시판을 생성하고 다양한 활용 방법을 알아야 한다.
- 내 빌더 접속 http://mhstory.net/builder > Enter > 로그인
□ 커뮤니티 자유게시판을 웹에디터에서 "다기능 게시판"으로 수정하고 입사지원 게시판으로 만들기
- 커뮤니티 > 자유게시판 > 우측마우스 자식셀 > 셀 모듈 삭제 > 확인
※ 여기에서 삭제하더라도 웹에디터 자유게시판은 그대로 내장되어 있다.
- 우측마우스 > 자식셀 > 셀 모듈 등록 > 오른쪽 모듈 리스트 창 맨 위 게시판 >
- 오른쪽 모듈 리스트 창 일곱 번째 ⊙ 다기능 게시판에 체크 > 다음 단계
1) [스타일] → 그대로 둔다.
- 리스트헤더 배경, 리스트항목 배경, 카테고리, 리스트 구분선... 등 모두 기본으로 설정
2) [일반사항]
① 언어 : Korean
② 시간차 설정 : 0 → 사용하지 않는다는 의미
- 리스트화면
③ 페이지당 글 수 : 10 → 1 페이지 당 글 목록 수
④ 썸네일 크기 : 180px * 135 → 글쓴이의 사진 등 작은 이미지
⑤ 정렬 순서 : 기본 순서대로
⑥ 제목 글자 제한 : 60자
⑦ 최근 글 설정 : 24시간에서 72시간 → 새글에 빨강글씨 New 생성되는 시간
⑧ 검색 기능 : □ 체크 → 단 모든 게시판에 전부 적용할 필요는 없다.
⑨ 로그인 버튼 : □ → 체크하지 않는 게 좋다.
⑩ 클릭 방지 : □ → 체크하지 않는 게 좋다.
⑪ 회원정보 숨기기 : □ → 체크하지 않는 게 좋다.
- 읽기 화면
① 리스트 출력 : ⊙ 글 내용 볼 때 아래에 전체리스트 출력에 체크
② 번호형식 : ⊙ 순차적인 번호로 보여줌에 체크
③ IP 보여주기 : □ 글 등록 시 등록자의 인터넷주소를 보여줍니다(관리자는 항상 볼수 있습니다.) → 체크하지 않는다.
④ 그림 클릭금지 : □ 첨부 이미지 클릭시 새로운 창으로 원본을 보여주는 기능을 사용하지 않습니다. → 체크하지 않는다.
⑤ 추천기능 사용 : □ → 체크하지 않는다.
⑥ 이름 숨기기 : □ 글쓴이의 이름을 보여주는 대신 아이디를 보여줍니다. → 체크하지 않는다.
⑦ 스크랩기능 사용 : □ → 체크
- 등록화면
① 자료실 기능 : 2 MB로 업로드 제한 (최고한도::20Mb)
□ 멀티미디어자료(이미지,동영상,플래시) 자동으로 보여주기 → 체크 □ 동영상 자동플레이 → 체크
② 첨부사진 최대넓이 : 698px (해당 넓이보다 큰 이미지는 자동으로 해당넓이로 줄입니다. 0 : 사용안함) → 게시판 넓이(700px)보다 2px 정도 작게 설정해 준다.
③ 댓글 기능 : □ 댓글 기능 사용 → 체크
④ 도배 금지 기능 : 30초 (지정된 시간내에 같은 IP에서 등록시 거부,0:사용안함)
⑤ 글쓴이 수정여부 : □ 글 등록시 회원의 이름 항목을 수정가능하게 합니다. → 체크하지 않는다.
⑥ 투표기능 : □ 글등록시 간단한 설문조사도 할 수 있습니다. → 체크하지 않는다.
⑦ 1:1상담기능 : □ 본인이 등록한 글은 본인과 관리자만 볼 수 있는 기능입니다. → 체크하지 않는다.
⑧ 수신회원지정 : □ [1:1상담기능]을 사용하는경우 관리자가 특정 회원에게만 등록글을 보도록 지정할 수 있습니다. → 체크하지 않는다.
⑨ 약관 사용 : □ 사용 ⊙ 상단 ○ 하단 → 체크하지 않는다. 단 사용할 경우에는 상단에 체크하고 약관 파일 URL을 찾아 넣고, 약관 높이 : 200px로 설정한다.
3) [권한 설정]
① 관리 계정 :
② 관리자 메일 : "choemh@hanmail.net" 입력,
□ 글 등록시 해당메일로 발송 → 체크
□ 댓글 등록시 해당메일로 발송 → 체크
③ 글읽기 권한 [손님]
④ 글작성 권한 [손님] → 완성 후에 [정회원]으로 수정
⑤ 답글작성 권한 [운영자] → 완성 후에 [정회원]으로 수정
⑥ 댓글작성 권한 [손님] → 완성 후에 [정회원]으로 수정
4) [카테고리]
카테고리 사용 : □ 자유게시판이나 입사지원 게시판에서는 사용하지 않는다.
단, 음악감상실이나 스위시 작품방의 경우 → 영화음악, Pop Song, 국내가요, 외국민요 등등으로 카테고리(분류)에 등록하여 사용하면 편리하다.
5) [항목설정] 연습
※ 자유게시판에는 실제로 필요하지 않지만 항목설정 방법을 익히기 위해서 연습해 본다. 예를 들어 입사지원서 게시판을 만들어 본다.
① 항목이름 : "가족관계" 입력
② 항목 변수명 : "abcdef" 입력
③ 입력형식 : ▽ 옵션 버튼 눌러서 [radio] 여러 개 중 한 개 지정 선택
- 옵션 중 [radio] 여러 개 중 한 개 지정 → ○ ⊙
- 옵션 중 [checkbox] 체크박스 → □ □
④ 필수 입력 : ⊙ 예 ○ 아니오 → 예 체크
⑤ 기본 입력값 : 생년월일 반드시 주민등록번호와 일치해야
6) 폼디자인
※ 폼 디자인은 기본적으로 태그와 명령어에 대한 개념과 지식이 있어야 적절하게 활용할 수 있다. 하지만 여기에서는 태그를 모른다고 하더라도 복사하고 붙여넣기 해서 활용하는 방법을 배우기로 한다. → 지금까지 한 작업을 일단 저장한 다음 적당하게 수정하기로 한다.
7) 모듈설명 : "입사지원게시판" 입력 > 하단에 완료 버튼
8) 폼디자인 수정하기
① 작업페이지: 메인메뉴/자유게시판에서 글쓰기 클릭 - 주민등록번호가 중복되어 있다. > 하단에 취소
② 작업페이지 우측마우스 > 자식셀 > 셀 모듈 환경설정 > 폼디자인
③ 리스트 헤더
<tr bgcolor='#ffffff' align='center'>
<td width=30 height=25 style='border:solid 1px #000000'>번호</td>
<td style='border:solid 1px #000000'>이름</td>
<td style='border:solid 1px #000000'>직업</td>
<td style='border:solid 1px #000000'>E mail</td>
<td style='border:solid 1px #000000'>등록일</td>
</tr>
※ 위 리스트 헤더에서 휴대폰을 "E mail"로 바꾼다. 즉
<tr bgcolor='#ffffff' align='center'>
<td width=30 height=25 style='border:solid 1px #000000'>번호</td>
<td style='border:solid 1px #000000'>이름</td>
<td style='border:solid 1px #000000'>직업</td>
<td style='border:solid 1px #000000'>E mail</td>
<td style='border:solid 1px #000000'>등록일</td>
</tr>
④ 리스트 내용
<tr align='center'>
<td height=22>{sn}</td>
<td>{name}</td>
<td align='left'> {subject}</td>
<td>{mobile}</td>
<td>{reg_date}</td>
</tr>
<tr><td colspan=5 bgcolor='#dddddd' height=1><img src='/cgi_bank/lib/ images/dummy.gif' alt='' height=1></td></tr>
※ 위 리스트 내용에서 5번째 줄 {mobile}을 {abcdef}로 바꾼다. 즉
<tr align='center'>
<td height=22>{sn}</td>
<td>{name}</td>
<td align='left'> {subject}</td>
<td>{abcdef}</td>
<td>{reg_date}</td>
</tr>
<tr><td colspan=5 bgcolor='#dddddd' height=1><img src='/cgi_bank/lib/images/dummy.gif' alt='' height=1></td></tr>
⑤ 하단 완료 > 확인하기 위해서 작업페이지 글쓰기 > 확인 - 취소
⑥ 다시 수정하기 위해서 작업페이지 우측 마우스 > 자식셀 > 셀 모듈 환경설정 > 항목설정 -
- 항목 이름 : 결혼유무
- 항목 변수명 : abcd
- 입력 형식 : [checkbox] 체크박스 선택
- 선택 항목값 : 기혼,미혼 → 붙여쓰기 하고 반드시 콤마,로 연결한다.
- 항목 이름 위에 등록 버튼 클릭
⑦ - 항목 이름 : 출신학교
- 항목 변수명 : bcd
- 입력 형식 : [text] 한줄 입력 선택
- 필수 입력 : ⊙ 예
- 기본 이름값 : 학교 이름
- 항목 이름 위에 등록 버튼 클릭
⑧ 폼디자인 > 리스트 내용에서 5번째 줄 {abcdef}를 {abcd}로 바꾼다. > 하단 완료 > 확인하기 위해서 작업페이지 글쓰기 > 확인
※ 여기에서 홈페이지 항목은 한 줄에 1개가 들어가고 이름과 메일 주소는 같은 줄에 2개가 들어가도록 수정하기 위해서 > 하단 취소 버튼 클릭
⑨ 작업페이지 우측마우스 > 자식셀 > 셀 모듈 환경설정 > 폼디자인 - 등록 및 수정화면 4,5 번째 줄 <tr bgcolor='#eeeeee'><td>이름</td><td bgcolor='#ffffff'> {name} </td><td>메일주소</td><td bgcolor='#ffffff'>{email}</td></tr> 블록 잡고 우측마우스 > 복사
⑩ 11번 째 줄 끝을 클릭 - 마우스 커서를 놓고 Enter > 행이 바뀌고 맨 앞 마우스 커서에서 우측마우스 > 붙여넣기 - "이름"을 "결혼유무"로, {name}을 {abcd}로, "메일주소"를 "출신학교"로 바꾸고 > 완료 버튼을 클릭하면 다음과 같이 된다.
<table border=0 cellspacing=1 cellpadding=3 bgcolor='#cccccc' width='100%' style='table-layout:fixed; line-height:22px'>
<col width=80 align='center'><col bgcolor='#ffffff'><col width=80 align='center'><col bgcolor='#ffffff'>
<tr bgcolor='#eeeeee'><td>이름</td><td bgcolor='#ffffff'>{name}</td><td>메일주소</td><td bgcolor='#ffffff'>{email}</td></tr>
<tr bgcolor='#eeeeee'><td>주민등록번호</td><td bgcolor='#ffffff'>{juminid}</td><td>주민등록번호</td><td bgcolor='#ffffff'>{birth}</td></tr>
<tr bgcolor='#eeeeee'><td>휴대폰</td><td bgcolor='#ffffff'>{mobile}</td><td>전화번호</td><td bgcolor='#ffffff'>{tel}</td></tr>
<tr bgcolor='#eeeeee'><td>성별</td><td bgcolor='#ffffff' colspan=3>{sex}</td></tr>
<tr bgcolor='#eeeeee'><td>홈페이지</td><td bgcolor='#ffffff' colspan=3>{homepage}</td></tr>
<tr bgcolor='#eeeeee'><td>결혼유무</td><td bgcolor='#ffffff'>{abcd}</td><td>출신학교</td><td bgcolor='#ffffff'>{email}</td></tr>
<tr bgcolor='#eeeeee'><td>직업</td><td bgcolor='#ffffff'>{subject}</td><td>취미</td><td bgcolor='#ffffff'>{hobby}</td></tr>
<tr bgcolor='#eeeeee'><td>자기소개</td><td bgcolor='#ffffff' colspan=3>{profile style="width:100%"}</td></tr>
<tr bgcolor='#eeeeee'><td>비밀번호</td><td bgcolor='#ffffff' colspan=3>{password}</td></tr>
</table>
⑪ 확인하기 위해서 작업페이지 글쓰기 > 확인 - 취소
⑫ 작업페이지 우측마우스 > 자식셀 > 셀 모듈 환경설정 > 항목설정
- 우측창에서 결혼유무 선택 > 왼쪽창에서 입력형식 옵션을 [radio] 여러개 중의 하나 선택 > 완료
⑬ 작업페이지 우측마우스 > 자식셀 > 셀 모듈 환경설정 > 폼디자인 > 리스트 내용 5번째 줄 {abcd}를 {bcd}로 (→ 출신학교)
- 리스트 헤더에서 5번째 줄 휴대폰을 출신학교로 수정하고 > 완료
□ 저장하기
- 작업메뉴 > 홈페이지 다른이름으로 저장하기 > 맨 위 sub2 저장일자 선택 > 갱신하기 > 확인
|
출처: 사랑방카페 원문보기 글쓴이: ♤은행나무