홈페이지 마법사 CMS 교육자료
30
- 1 - 홈페이지 마법사 CMS 교육자료 1. 홈페이지 만들기 2. 관리자 메뉴 3. 메뉴구성변경 4. 기능관리 5. 웹에디터(CODY)를 이용한 내용 편집 6. CMS홈페이지 제작/운영 TIP …(2page ) …(4page ) …(5page ) …(9page ) …(19page ) …(25page ) 정보전산부 전산운영팀
-
Upload
khangminh22 -
Category
Documents
-
view
4 -
download
0
Transcript of 홈페이지 마법사 CMS 교육자료
- 1 -
홈페이지 마법사
CMS 교육자료
1. 홈페이지 만들기
2. 관리자 메뉴
3. 메뉴구성변경
4. 기능관리
5. 웹에디터(CODY)를 이용한 내용 편집
6. CMS홈페이지 제작/운영 TIP
… (2page)
… (4page)
… (5page)
… (9page)
… (19page)
… (25page)
정보전산부 전산운영팀
- 2 -
1. 홈페이지 만들기 : CMS 홈페이지(http://cms.kmu.ac.kr)의 [신청 및 이용안내] 내용 참고
가. 온라인 신청
1) CMS 홈페이지에 인사번호(교원/직원만 신청 가능)로 로그인 합니다.
2) 아래 그림과 같이 홈페이지 만들기를 선택하여 온라인 신청합니다.
나. 신청서(승인 요청) 제출
1) 온라인 신청이 끝나면 신청서를 제출하여 승인을 받습니다.
(이용 용도에 적합한 경우 신청서 접수 후 바로 승인 됩니다)
2) 신청서 다운로드 : CMS 홈페이지(http://cms.kmu.ac.kr) - [신청 및 이용안내]
3) 제출 : 전자문서시스템 [게시판 - 교내게시판 - 홈페이지서버사용신청]에 게시
다. 승인 후 절차
1) CMS 홈페이지에 로그인 후 [홈페이지 바로가기]에서 신청한 홈페이지를 선택
→ 초급자용(템플릿 이용)으로 홈페이지 생성
- 3 -
라. 템플릿 선택
1) [템플릿사용-초급자용]은 이미 각 대학, 학과, 부서 등에 맞는 형식으로 홈페이지가 만
들어진 형태(템플릿)를 선택하여 손쉽게 홈페이지 개설을 도와줍니다.
2) CMS 홈페이지의 좌측 하단에 [홈페이지 디렉터리]를 보면 [템플릿] 분류가 있습니다.
해당 분류에는 현재 존재하는 템플릿의 모든 예시가 미리 만들어져 있음으로, 분류와
해당 템플릿의 형태를 참고한 후 신중하게 템플릿을 선택하십시오.
3) 템플릿 선택 후 변경이 어렵기 때문에 최초 신중하게 선택하시기 바랍니다.
(생성된 홈페이지는 해당 그룹에서만 변경이 되거나, 변경이 불가능함)
- 4 -
2. 관리자 메뉴
관리자로 로그인하면 홈페이지 하단에 위와 같은 [관리자 메뉴]가 나타납니다.
가. HOME : 해당 홈페이지의 첫 화면으로 이동합니다.
나. 템플릿선택
1) 초급자용(템플릿 사용)으로 만든 홈페이지의 템플릿이 변경 가능합니다.
2) 하지만, 그룹별 제약이나 변경 불가능한 부분이 있으며,
3) 운영 중인 홈페이지의 템플릿을 변경하면 기존 자료가 다 소실되므로 위험합니다.
4) 권장 : 이 기능의 사용을 자제하십시오.
다. 프레임사이즈변경
1) 위 이미지의 파란색 선을 기준으로 한 전체 홈페이지의 프레임 사이즈를 변경합니다.
2) 초급자용(템플릿 사용)으로 만든 홈페이지의 경우 이미 프레인 사이즈가 템플릿의 형태
에 맞게 정해져 있는 부분이므로 특별한 경우 외에는 이 기능의 사용을 자제하십시오.
라. 메뉴구성변경 : <3. 메뉴구성변경>에서 설명(5Page)
마. 사용언어선택 : CMS의 기능적인 부분의 언어 변경. 한글(기본)↔ 영어
바. 기능관리 : <4. 기능관리>에서 설명(9Page)
사. 사이트 정보
1) 사이트 정보변경 : 홈페이지 제목, 설명, 분류 등에 대한 수정 가능.
2) 회원관리 : 기능관리의 회원관리 부분과 동일(17Page)
3) 백업관리 : 홈페이지 전체를 현재 시점으로 백업(데이타 제외). 상시 활용 필요.
아. 파일관리
1) 웹서버와 파일을 주고받는 부분으로 폴더/파일명은 항상 영문(또는 숫자)이어야 함.
2) 주의 : 기본 폴더와 파일을 임의로 삭제하거나 변경하시면 오류가 생길 수 있습니다.
- 5 -
3. 메뉴구성변경
가. 메뉴추가하기
1) 메뉴를 생성하기 위해서는 반드시 생성할 메뉴의 상위경로를 선택합니다.
(1단계 메뉴생성을 하기위한 상위경로는 Site Root부분입니다.)
- 6 -
나. 메뉴추가 → 생성할 메뉴 설정
1) 메뉴 항목 이름 : 추가할 메뉴의 이름을 입력 (실제 메뉴에 나타나는 명칭)
2) 메뉴 파일 이름 : 추가할 메뉴의 생성될 파일명을 입력
(모든 파일 명칭은 영문, 숫자, 기호_ 만 허용되며,
한글/특수문자/기타기호/공백은 사용하시면 안됩니다.)
3) Link 주소
가) 페이지 템플릿 : 준비된 페이지템플릿 선택 (항목 2)에서 생성한 파일 사용)
나) 기존문서 활용 : 이미 생성된 html 문서를 선택하여 링크
다) Target : 메뉴를 선택할 때 페이지가 보이는 형태 (기본:메인)
메인 : 홈페이지 내 특정 영역 안에서만 페이지가 나옴
새창 : 브라우저가 새로 열리고 나서 페이지가 나옴
Top : 기존 페이지 위에 전체 페이지가 나오면서 주소가 바뀜
index_frame : 기존 페이지 위에 전체 페이지가 나오나 주소는 바뀌지 않음
라) 메인 메뉴 사용 유무
- 보이기 : 홈페이지에 메뉴가 나타남
- 감추기 : 홈페이지 상에서 메뉴가 숨겨짐
(메뉴(파일)을 삭제하지 않고 홈페이지 상에서 감출 때 사용)
다. 확인(생성완료)
라. 참고
1) 메뉴를 추가(생성)는
가) 상단 메뉴와 좌측 서브 메뉴에 자동으로 메뉴가 생성되고,
나) 해당하는 메뉴에 들어가는 실제 html문서 파일이 생성되며,
다) 해당 메뉴와 생성되는 html문서나 기타 Link를 연결하는 과정입니다.
마. 메뉴수정하기
1) 원하는 메뉴를 선택하여 [선택한 메뉴수정]을 클릭하여 수정 가능.
2) 메뉴수정은 메뉴추가의 항목 설정과 내용이 동일합니다.
바. 메뉴삭제 : 해당 메뉴와 파일은 삭제
- 7 -
사. 편집하기 : 해당 메뉴를 편집합니다. (뒤쪽 웹에디터(CODY) 편집기 사용방법에서 설명)
아. 메뉴 위치 변경 : [선택한메뉴를 위로], [선택한메뉴를 아래로] 메뉴 이동
자. 메뉴배열설정
1) 홈페이지의 메뉴 구성 형태를 정합니다.
2) 템플릿으로 만들어진 홈페이지는 별도로 메뉴배열설정을 하지 않으셔도 됩니다.
차. 메뉴속성설정
1) 1차 메뉴 속성설정
가) Out 이미지 : 마우스가 메뉴 밖에 있을 때 사용되는 이미지
나) Over 이미지 : 마우스가 메뉴 위에 있을 때 사용되는 이미지
다) 텍스트메뉴로변경 ↔ 이미지메뉴로변경 : 메뉴를 텍스트 ↔ 이미지로 변경합니다.
- 8 -
2) 2차 메뉴 속성설정
가) 타이틀 이미지 : 좌측에 나타나는 2차 메뉴의 이미지
나) 1차 메뉴와 동일하게 텍스트 ↔ 이미지 형태로 변경 가능
3) 3차 메뉴 속성설정
- 9 -
4. 기능관리
가. 게시판 : [기능관리-게시판]
1) 게시판 생성하기
- 10 -
2) 기본설정
가) 게시판제목 : 게시판의 이름
나) 게시판유형 : 일반 게시판 형태와 앨범 형태 두 가지를 지원하며, 최초 선택하여 생
성하면 변경이 불가능합니다.
다) 기타설정
1) 카테고리기능 : 상단의 [분류설정]과 함께 게시판 하나에 여러 분류로 나누어진 용
도로 사용할 수 있습니다.
2) 익명사용기능 : 게시판 글작성 시 작성자 이름을 변경가능. (기본:변경불가)
가) 사용 예시 : 공지사항, 새소식, FAQ 등 관리자가 작성하는 게시판
나) 사용하지 않아야 하는 경우 : 자유게시판, Q&A 등 학생들이 사용하는 용도의
실명이 필요한 게시판
3) 첨부파일용량제한 : 글작성 시 업로드 할 수 있는 용량 제한
4) 휴지통 사용 여부 : 해당 게시판에 글을 삭제하였을 때 게시판에서는 삭제되어지고
게시판관리 우측 상단의 [휴지통관리]로 삭제된 게시물이 이동
되어, 향후에 해당 게시물을 복구/완전삭제 하는 기능.
5) 한줄답변 : 게시물 내용보기(읽기) 화면 내에 댓글을 다는 기능.
6) 비밀글기능 : 글작성 시 비밀번호를 입력받고, 게시물을 읽을 때 암호를 묻는 방식
으로 관리자와 작성자만 볼 수 있는 게시판으로 활용.
!주의 : 비밀번호를 입력 후 마우스로 확인 버튼을 클릭하여 주십시오. (엔터 키 안 먹힘)!주의 : 비밀글 설정 전에 공지사항을 먼저 입력 하십시오.!주의 : 비밀글기능을 해제하면 모든 게시물이 일반게시물로 변하고 되돌릴 수 없습니다.
7) 저작권 복제방지 사용 : 게시물의 복사 금지 기능
8) 글 등록시 알림 : 글 [작성하기]를 누르면 작성하는 폼을 나타내기 전에 해당 알림
메시지를 먼저 보여주도록 하는 기능.
- 11 -
라) 권한설정
1) 관리자가 사용하는 게시판의 예
2) 일반 사용자가 사용하는 게시판의 예
마) 항목관리
1) 글을 작성할 때 이름, 제목 등과 같이 본문 외에 추가로 입력받을 항목을 생성.
2) CMS 교육신청 게시판에 항목을 추가한 예
- 12 -
3) 항목 입력화면의 예
4) 목록설정 : 게시판 목록에서 보여줄 내용을 지정합니다.
마) 분류설정
!주의 : 생성한 분류의 명칭 변경은 가능하나,
분류의 순서는 수정이 안되므로
분류 생성시 참고하시기 바랍니다.
1) [기본설정의 카테고리기능 사용]과 함께 게시판 분류를 나타냄
2) 분류는 3단까지 구성할 수 있으며, 하위 분류를 생성하기 위해 상단 분류를 클릭
후 [추가하기]버튼을 이용하시면 됩니다.
바) 스킨설정
1) 게시판스킨 : 일반 게시판의 모양(형태)을 선택
2) 미니 게시판 스킨 : 초기화면 출력 형태의 모양(형태)를 선택
사) 휴지통관리
1) [기본설정의 휴지통 기능]을 사용하면 삭제된 게시물들이 휴지통 관리에 나타남.
- 13 -
나. 과제관리 : [기능관리-과제관리]
1) 과제관리는 관리자가 특정 과제에 대하여 마감일을 지정하여 과제를 만들고,
수강생들은 온라인으로 과제를 제출할 수 있는 용도로 게시판의 또 다른 형태입니다.
2) 사용방법은 게시판과 흡사하므로 아래 예시 화면으로 대신합니다.
가) 과제게시판을 생성하여 관리자가 A라는 과제를 생성한 예
나) 수강생이 A과제를 선택하여 과제를 제출하는 예
- 14 -
다. 로그인 스킨관리 : [기능관리-로그인]
1) 로그인 기능의 디자인을 이미 만들어진 모양을 선택하여 사용할 수 있습니다.
2) 로그인 스킨의 예
다. 배너관리 : [기능관리-배너관리]
1) 홈페이지에 배너링크를 구현할 수 있는 기능입니다.
2) 취업진로지원실 홈페이지(http://jobs.kmu.ac.kr)의 하단에 사용 예시가 있습니다.
3) 참고 : 배너이름에 들어가는 글자수는 한글 10자 정도로 제한이 있습니다.
등록한 배너는 수정이 되지 않고, 삭제만 가능합니다.
- 15 -
라. 설문조사 : [기능관리-설문조사, 설문조사2]
1) 설문조사 : 총 5개의 항목 내에 간단한 투표식 설문을 만들 수 있습니다.
2) 설문조사2 : 다수의 항목으로 참여자의 정보(성별,결혼유무,연령대)와 의견을 수렴할 수
있는 설문을 만들 수 있습니다.
마. 이벤트 관리(팝업관리) : [기능관리-이벤트]
1) 이벤트 등록하기
가) 이벤트제목 : 팝업의 상단 창에 나타나는 이름
나) 행사기간 : 팝업 등록 기간
다) 이벤트창크기 : 팝업창의 가로x세로 사이즈
라) 이벤트창위치 : 화면의 좌측상단(0, 0)을 기준으로 팝업창의 좌측 상단 위치
마) 이벤트내용 : 팝업창 내에 들어갈 이미지, 내용 구성
2) 이벤트 하나를 구성한 예
3) 이벤트는 여러 개를 등록하여 원하는 이벤트만 홈페이지에서 출력할 수 있음
4) 취업진로지원실 홈페이지(http://jobs.kmu.ac.kr)에서 팝업창의 예시를 볼 수 있습니다.
- 16 -
바. 인물소개 : [기능관리-인물소개]
1) 인물소개는 교수소개, 직원소개, 학생회 소개 등 인물을 소개하는 화면을 손쉽게 구성
할 수 있는 기능입니다.
2) 예시 : 식품가공학과 홈페이지(http://web.kmu.ac.kr/foodscience)
3) 인물소개관리 설정화면
- 17 -
사. 일정관리 : [기능관리-일정관리]
<일반적인 형태의 일정관리>
<초기화면출력용 일정관리>
<일정관리 작성화면>
1) 일정관리는 달력형태의 게시판으로 학사일정 등을 입력하거나, 부서의 업무, 행사 등을
관리 할 수 있는 기능입니다.
2) 일정관리는 다른 기능들과는 달리 구성되어져 있는 하나의 기능만 사용가능합니다.
3) 관리화면에서 초기화면용 일정관리 화면의 스킨(디자인)을 변경할 수 있습니다.
4) 일정관리는 [회원] 그룹 이상만 작성 가능합니다.(준회원 작성 불가)
5) 일정관리에는 [개인일정]과 [공통일정]이 있습니다.
- 개인일정 : 게시한 자신에게만 나타남.
- 공통일정 : 모든 사람들이 볼 수 있도록 공지 됨.
(일정관리를 이용한 일정을 공지할 때는 항상 공통일정을 선택)
6) 일정관리의 수정/삭제는 작성자 본인만 가능합니다
(관리자는 모든 일정을 관리 할 수 있음.)
아. 토론방 : [기능관리-토론방]
1) 토론을 할 수 있는 게시판 형태입니다.
- 18 -
자. 회원관리 : [기능관리-회원관리] 또는 [사이트 정보-회원관리]
1) 기본그룹
가) 관리자 : 홈페이지 관리(기능관리, 편집 등)를 할 수 있는 그룹.
나) 회원 : 관리자가 권한을 부여한 그룹.
다) 준회원 : 로그인 한 후에 [회원가입]을 한 번 클릭한 회원.
(홈페이지에 글을 작성할 수 있는 기본 회원)
라) 비회원 : 비로그인 또는 로그인 하였으나 해당 사이트에 [회원가입]되지 않은 회원.
2) 그룹관리 : 그룹을 추가로 새로 만들거나 해당 그룹을 수정/삭제합니다.
3) 회원그룹변경
가) 회원을 그룹을 변경하여 해당 그룹의 권한을 부여할 수 있습니다.
나) 여러 명의 관리자를 지정할 수 있습니다.
다) 변경방법 : 그룹을 변경할 회원을 선택(v체크) → 변경할 그룹을 선택(관리자/회원/
준회원/비회원) → [선택한 그룹으로 이동]
4) 회원삭제
가) 회원을 해당 사이트에서 탈퇴 시킵니다.
나) 삭제방법 : 삭제할 회원을 선택(v체크) → [내 홈페이지에서 삭제]
5) 회원검색
가) 사이트에 가입된 회원을 검색합니다.
나) 검색조건 : 그룹별, 아이디, 이름, 검색어
차. 스킨 관리 : [기능관리-스킨 관리]
1) 메인 스킨 관리 / 서브 스킨 관리 : 초급자용(템플릿 이용)으로 만들어진 홈페이지는 수
정하지 않는 것을 권장합니다.
2) 로그인 / 일정 스킨 : 각 기능의 디자인을 선택하여 바꿀 수 있음.
- 19 -
5. 웹에디터(CODY)를 이용한 내용 편집
※ 웹에디터(CODY) 실행화면
관리자 권한을 가진 계정으로 로그인하여
각 프레임 화면의 [편집] 버튼을 눌러
웹에디터(CODY)를 불러와 내용을 추가/수정 가능합니다.
※ [편집]창은 각 프레임의 좌측 상단에 위치하고 있습니다.
※ 웹에디터를 이용하여 각 페이지에 기능(게시판, 배너, 일정관리 등)을 붙이고,
내용을 구성하여 페이지를 완성할 수 있습니다.
웹에디터(CODY) 실행화면
- 20 -
가. 웹에디터(CODY) 인터페이스
1) 기능 가져오기 : 기능관리에서 미리 생성한 각 기능들을 편집 중인 페이지 가져옵니다.
가) 불러올 수 있는 기능 목록 : 게시판, 로그인, 메뉴-메인, 메뉴-서브,
배너관리, 복수일정, 사이트맵, 설문조사, 이벤트,
쪽지, 카운터
2) 페이지 템플릿 선택 : 페이지의 용도에 맞는 템플릿을 클릭하시면 화면에 적용됩니다.
3) 이미지 가져오기
가) 현재 홈페이지에서 사용하고 있거나 등록되어 있는 이미지(서버에 저장되어 있는 이
- 21 -
기본 기능
글꼴변경하고자 하는 영역을 선택하고 글꼴 콤보박스에서 원하시는 글꼴을 선택하시면 해당
글꼴로 변경됩니다.
글 크기 변경하고자 하는 영역을 선택하고 글 크기 콤보박스에서 원하시는 크기를 선택하시면
해당 크기로 변경됩니다.
굵게변경하고자 하는 영역을 선택하고 굵게 버튼을 선택하시면 글이 굵게 변경됩니다.
이미 글이 굵게 되어있는 경우 굵게 버튼을 다시 선택하시면 원래 상태로 변경됩니다.
기울림꼴
변경하고자 하는 영역을 선택하고 기울림꼴 버튼을 선택하시면 글이 기울림꼴로 변경됩
니다.
이미 글이 기울림꼴로 되어있는 경우 기울림꼴 버튼을 다시 선택하시면 원래 상태로 변
경됩니다.
밑줄
변경하고자 하는 영역을 선택하고 밑줄 버튼을 선택하시면 글이 밑줄이 적용되어 변경됩
니다. 이미 글이 밑줄이 적용되어 있는 경우 밑줄 버튼을 다시 선택하시면 원래 상태로
변경됩니다.
전경색변경하고자 하는 영역을 선택하고 전경색 드랍다운 버튼을 선택하시어 원하시는 색상을
선택하면 글의 전경색이 선택된 색상으로 적용됩니다.
배경색변경하고자 하는 영역을 선택하고 배경색 드랍다운 버튼을 선택하시어 원하시는 색상을
선택하면 글의 배경색이 선택된 색상으로 적용됩니다.
왼쪽 맞춤을 적용하고자 하는 영역을 선택하고 왼쪽 맞춤 버튼을 선택하시면 글의 왼쪽 맞춤
미지)를 페이지로 불러옵니다.
나) 이미지셋 추가 / 등록을 이용하여 이미지를 추가 하실 수 있습니다.
다) 참고 : PC에서 바로 페이지에 삽입할 이미지는 이미지 가져오기 하단 툴바의
그림 삽입하기를 이용하시면 됩니다.
4) 코디히스토리
가) 페이지 편집 후 [전송]버튼을 누르면 페이지가 저장되고 적용 됩니다.
나) 이 때 코디히스토리는 최근 10개의 전송된 페이지를 저장하며, 편집 중의 실수 등
으로 인하여 기존 페이지를 불러와 되돌릴 수 있습니다.
5) 툴바 : 개별 기능들을 가진 아이콘 모음으로 html문서를 편집하기 위해 다양하게 활용
됩니다.(상세 기능은 다음 페이지 추가 설명)
6) 전송 : 페이지 편집 후 저장하여 반영하는 기능(코디히스토리에 기록 됨)
7) 종료 : 웹에디터(CODY)를 종료합니다.(편집중인 내용이 있다면 저장여부를 물어봄)
나. 웹에디터(CODY) 툴바
1) 기본기능
- 22 -
맞춤 이 적용되어 변경됩니다.
가운데
맞춤
맞춤을 적용하고자 하는 영역을 선택하고 가운데 맞춤 버튼을 선택하시면 글의 가운데
맞춤이 적용되어 변경됩니다.
오른쪽
맞춤
맞춤을 적용하고자 하는 영역을 선택하고 오른쪽 맞춤 버튼을 선택하시면 글의 오른쪽
맞춤이 적용되어 변경됩니다.
번호
매기기
글의 앞 부분에 자동으로 글 번호가 생성되도록 하고자 하는 경우 해당 영역을 선택하고
번호매기기 버튼을 선택하시면 글의 앞부분에 자동으로 글 번호가 적용됩니다. 이미 번
호매기기가 적용되어 있는 경우 번호매기기 버튼을 다시 선택하시면 원래 상태로 변경됩
니다.
글머리
기호
글의 앞 부분에 자동으로 글 머리기호가 생성되도록 하고자 하는 경우 해당 영역을 선택
하고 글머리기호 버튼을 선택하시면 글의 앞부분에 자동으로 글머리기호가 적용됩니다.
이미 글머리기호가 적용되어 있는 경우 글머리기호 버튼을 다시 선택하시면 원래 상태로
변경됩니다.
글 간격변경하고자 하는 영역을 선택하고 글간격 드랍다운 버튼을 선택하시어 원하시는 글간격
을 선택하면 글의 간격이 선택된 간격으로 적용됩니다.
줄 간격변경하고자 하는 영역을 선택하고 줄간격 드랍다운 버튼을 선택하시어 원하시는 줄간격
을 선택하면 줄의 간격이 선택된 간격으로 적용됩니다.
취소선
변경하고자 하는 영역을 선택하고 취소선 버튼을 선택하시면 글의 중간부분에 밑줄이 생
성되는 취소선이 적용됩니다.
이미 글이 취소선이 적용되어 있는 경우 취소선 버튼을 다시 선택하시면 원래 상태로 변
경됩니다.
아래첨자
변경하고자 하는 영역을 선택하고 아래첨자 버튼을 선택하시면 글의 하단부분에 첨자가
생성되는 아래첨자가 적용됩니다. 이미 글이 아래첨자가 적용되어 있는 경우 아래첨자
버튼을 다시 선택하시면 원래 상태로 변경됩니다.
위첨자
변경하고자 하는 영역을 선택하고 위첨자 버튼을 선택하시면 글의 상단부분에 첨자가 생
성되는 위첨자가 적용됩니다. 이미 글이 위첨자가 적용되어 있는 경우 위첨자 버튼을 다
시 선택하시면 원래 상태로 변경됩니다.
내어쓰기변경하고자 하는 영역을 선택하고 내어쓰기 버튼을 선택하시면 글 라인의 앞 부분에 여
백없이 글이 적용됩니다.
들여쓰기변경하고자 하는 영역을 선택하고 들여쓰기 버튼을 선택하시면 글 라인의 앞 부분에 여
백이 발생하여 글이 적용됩니다.
표 기능
표 생성
표생성 드랍다운 버튼을 선택하시면 테이블 행X열을 선택하는 창이 나타나며 마우스로 원하
는 행열의 위치로
이동 후 선택하면 편집창에 테이블이 생성됩니다.
행 추가
표의 단일 셀 또는 단일 행, 다중 행 전체를 선택하면 행 추가 버튼이 활성화되며, 행 추가
버튼을 선택하면
이전에 선택된 영역 위 부분에 선택된 행의 갯수만큼 행이 추가됩니다.
행 삭제
표의 단일 행, 다중 행 전체를 선택하면 행 삭제 버튼이 활성화되며, 행 삭제 버튼을 선택
하면 선택된 영역이
삭제됩니다.
열 추가
표의 단일 셀 또는 단일 열, 다중 열 전체를 선택하면 열 추가 버튼이 활성화되며, 열 추가
버튼을 선택하면
이전에 선택된 영역 왼쪽 부분에 선택된 열의 갯수만큼 열이 추가됩니다.
열 삭제
표의 단일 열, 다중 열 전체를 선택하면 열 삭제 버튼이 활성화되며, 열 삭제 버튼을 선택
하면 선택된 영역이
삭제됩니다.
셀 병합 표의 다중 셀을 선택하면 셀 병합 버튼이 활성화되며, 셀 병합 버튼을 선택하면 이전에 선
택된 영역 부분이 병합됩니다.
행 분할
표의 다중 셀을 선택한 후 행 분할이 가능한 상태이면 행 분할 버튼이 활성화되며, 행 분할
버튼을 선택하면
이전에 선택된 영역 부분의 행이 분할됩니다.
열 분할
표의 다중 셀을 선택한 후 열 분할이 가능한 상태이면 열 분할 버튼이 활성화되며, 열 분할
버튼을 선택하면
이전에 선택된 영역 부분의 열이 분할됩니다.
2) 표 기능
- 23 -
표
템플릿생성하고자 하는 표 템플릿을 선택하면 해당 스타일의 표가 생성됩니다.
표 속성 개요
표안의 셀 일부를 선택하고 메뉴 또는 팝업메뉴에서 테이블 속성을 선택하면 세부 속성을
설정할 수 있는 팝업창이
생성되며, 팝업창에서 각각의 속성에 따른 세부 설정을 지정 및 미리보기를 통하여 확인 후
적용합니다.
표 속성 세부
(1) - 테이블
테두리 적용 설
정
테두리 합치기 부분과 셀 동시 적용 여부를 설정합니다.
표 속성 세부
(2) - 테이블
테두리 설정
테이블 테두리의 형태, 크기, 색상 및 Left, Top, Right, Bottom 개별 적용 여부를 설정합
니다.
표 속성 세부
(3) - 테이블
하이라이트색 /
그림자색 설정
테이블 테두리의 하이라이트색, 그림자색을 설정합니다.
테이블의 형태가 설정되어 있는 경우 형태와 색상을 제거한 후 하이라이트색, 그림자색을
설정하면 표시됩니다.
표 속성 세부
(4) - 테이블
셀 간격/여백
설정
테이블 셀 간격/여백을 설정합니다.(셀 간격 - cellspacing, 셀 여백 - cellpadding)
외곽선 합치기 여부와 테이블 테두리를 제거여부 등에 따라 다양한 형태를 표시합니다.
셀 속성 개요 -
테두리/색상
표안의 셀 일부를 선택하고 메뉴 또는 팝업메뉴에서 셀 속성을 선택하면 세부 속성을 설정
할 수 있는 팝업창이
생성되며, 팝업창에서 각각의 속성에 따른 세부 설정을 지정 및 미리보기를 통하여 확인 후
적용합니다.
셀 속성 세부
(1) - 테두리
설정
선택된 셀에 대하여 테두리의 형태, 크기, 색상, 표시여부를 각각 설정합니다.
셀 속성 개요
(2) - 크기/정
렬
표안의 셀 일부를 선택하고 메뉴 또는 팝업메뉴에서 셀 속성을 선택하면 세부 속성을 설정
할 수 있는 팝업창이
생성되며, 팝업창 우측 상단의 크기/정렬 버튼을 선택하면 크기와 레이아웃을 설정할 수 있
는 세부 설정창이
표시됩니다.
편집 기능
잘라내기잘라내기를 하고자 하는 영역을 선택하시고 메뉴의 편집->잘라내기, 키보드(Ctrl+X) 또는
팝업메뉴에서 잘라내기를 선택하면 이전에 선택된 영역이 잘라내기가 실행됩니다.
복사복사를 하고자 하는 영역을 선택하시고 메뉴의 편집->복사, 키보드(Ctrl+C) 또는 팝업메뉴
에서 복사를 선택하면 이전에 선택된 영역이 복사가 실행됩니다.
붙여넣기붙여넣기를 하고자 하는 영역을 선택하시고 메뉴의 편집->붙여넣기, 키보드(Ctrl+V) 또는
팝업메뉴에서 붙여넣기를 선택하면 이전에 선택된 영역에 붙여넣기가 실행됩니다.
삭제삭제를 하고자 하는 영역을 선택하시고 메뉴의 편집->삭제 또는 키보드(Delete)를 선택하면
이전에 선택된 영역에 삭제가 실행됩니다.
전체 선택전체 영역을 선택하고자 할 때 메뉴의 편집->전체 선택 또는 키보드(Ctrl+A)를 선택하면
전체 영역이 선택됩니다.
부가 기능
하이퍼링크
연결
하이퍼링크를 하고자 하는 영역을 선택하시고 하이퍼링크 연결 버튼을 선택하시면
하이퍼링크 연결 속성창이 팝업으로 생성되고, 연결 내용 정보를 입력 후 확인을 선택하
면 링크 연결이 생성됩니다.
=> 주소(필수 입력사항) : 링크 연결 주소
=> 연결방식(선택 입력사항) : 새창, 부모창, 현재창, 최상위창
=> 풍선도움말(선택 입력사항) : 링크 연결된 곳에 마우스를 움직이면 나타나는 풍선형태
3) 편집 기능
4) 부가 기능
- 24 -
의 툴팁 도움말
하이퍼링크
제거
하이퍼링크를 설정된 곳 일부분 또는 전체를 선택하면 하이퍼링크 제거 버튼이 활성화되
며,
하이퍼링크 제거 버튼을 선택하면 기존에 설정된 연결 정보가 제거됩니다.
이미지
삽입
이미지(jpg, gif, png 파일)를 삽입하고자 하는 영역을 선택하시고 이미지 삽입/속성 버
튼을 선택하시어
업로드를 진행 후 완료가 되면 편집창에 해당 이미지가 삽입됩니다.
(이미지를 선택하시고 이미지 삽입/속성 버튼을 선택하시면 이미지 속성창 팝업이 생성됩
니다)
이미지
속성
이미지를 선택하시고 이미지 삽입/속성 버튼을 선택하시면 이미지 속성창 팝업이 생성됩
니다
생성된 팝업창에서 이미지의 크기,높이,테두리 등의 속성을 설정하실 수 있습니다
=> 주소URL(필수 입력사항) : 이미지 연결 주소
=> 풍선도움말(선택 입력사항) : 이미지에 마우스를 움직이면 나타나는 풍선형태의 툴팁
도움말
=> 크기,높이,테두리 설정(선택 입력사항)
플래시
삽입
플래시(swf 파일)를 삽입하고자 하는 영역을 선택하시고 플래시 삽입/속성 버튼을 선택
하시어
업로드를 진행 후 완료가 되면 편집창에 해당 플래시가 삽입됩니다.
(플래시를 선택하시고 플래시 삽입/속성 버튼을 선택하시면 플래시 속성창 팝업이 생성됩
니다)
플래시
속성
플래시를 선택하시고 플래시 삽입/속성 버튼을 선택하시면 플래시 속성창 팝업이 생성됩
니다
생성된 팝업창에서 플래시의 너비,높이,테두리 등의 속성을 설정하실 수 있습니다
=> 주소URL(필수 입력사항) : 플래시 연결 주소
=> 너비,높이(선택 입력사항)
=> 정렬방식(선택 입력사항) : 플래시가 설정된 위치에서 왼쪽, 가운데, 오른쪽 등 정렬
방식 설정
=> 테두리,수평/수직 간격(선택 입력사항) : 수평/수직은 여백 공간의 설정
동영상
삽입
동영상(wmv 파일)를 삽입하고자 하는 영역을 선택하시고 동영상 삽입/속성 버튼을 선택
하시어
업로드를 진행 후 완료가 되면 편집창에 해당 동영상이 삽입됩니다.
(동영상를 선택하시고 동영상 삽입/속성 버튼을 선택하시면 동영상 속성창 팝업이 생성됩
니다)
동영상
속성
동영상을 선택하시고 동영상 삽입/속성 버튼을 선택하시면 동영상 속성창 팝업이 생성됩
니다
생성된 팝업창에서 동영상의 너비,높이,플레이어 속성 등을 설정하실 수 있습니다
=> 주소URL(필수 입력사항) : 동영상 연결 주소
=> 너비,높이(선택 입력사항)
=> 플레이어 속성(선택 입력사항) : 도구바 보이기 여부, 재생 상태 보이기 여부
특수문자특수문자를 삽입하고자 하는 영역을 선택하고 특수문자 드랍다운 버튼을 선택하시어 원하
시는 특수문자를 선택하면 해당 영역에 특수문자가 삽입됩니다.
문서
배경색
편집영역에 배경색을 적용하고자 하는 경우 문서배경색 드랍다운 버튼을 선택하시어 원하
시는 색상을 선택하면 편집영역에 배경색이 적용됩니다.
문서
배경이미지
편집영역에 배경 이미지를 적용하고자 하는 경우 배경이미지 버튼을 선택하여 해당 내용
을 적용합니다.
문서
템플릿
문서 템플릿을 삽입하고자 하는 영역을 선택하고 문서템플릿 버튼을 선택하여 해당 내용
을 적용합니다.
- 25 -
6. CMS 홈페이지 제작/운영 TIP
가. 여러 명의 홈페이지 관리자 두기
1) CMS의 개설자(소유자) 외에 관리그룹에 등록하는 방법으로 여러 명이 함께 홈페이지
를 제작/운영 가능합니다.
2) 조건. 대상자 : 해당 홈페이지에 준회원 이상으로 등록되어 있어야 함.
3) 방법. 관리자 : [회원관리]메뉴에서 해당 회원을 관리자 그룹으로 이동합니다.
나. 홈페이지 소유권 이양
1) 개설자(소유자)가 인사이동하거나, 홈페이지 담당자(교직원)가 바뀔 경우 소유권을 이양
할 수 있습니다.
2) 조건. 대상자 : 해당 홈페이지에 준회원 이상으로 등록되어 있어야 함.
(교수 또는 직원만 가능)
3) 방법. 관리자 : [회원관리]메뉴에서 해당 회원을 선택하여 “선택한 회원에게 사이트 생
성자(관리자) 권한을 이양”을 클릭합니다.
다. 새로운 메뉴 / 페이지 만들기(다른 페이지와 동일한 형태의 페이지 구성하기)
1) 메뉴구성변경에서 새로운 메뉴를 만들어 html파일을 생성합니다.
2) 해당 페이지의 상단 배경을 다른 페이지에서 가져온 뒤 내부 화면을 구성합니다.
(다른 페이지 편집화면에서 Ctrl+A(전체선택) → Ctrl+C(복사) 후 창을 닫고,
새로 만든 메뉴의 편집화면에서 Ctrl+V(붙여넣기)를 하면 동일한 화면이 복사되고,
불필요한 구성요소를 삭제하여 동일한 틀을 만들어 줍니다.
복사가 원활하게 되지 않는 경우, 웹에디터에서 소스보기에서 기능에서 소스를 복사하
여 붙여 넣습니다.)
라. 상단 1차 메뉴 이미지 수정하기(포토샵 스킬 필요)
1) 상단의 1차 메뉴는 마우스가 위에 있을 때, 벗어났을 때의 2가지 이미지로 구성되어
있습니다.
2) 상단의 1차 메뉴 명칭을 변경하거나, 새로운 메뉴를 추가하기 위해서는 해당하는 새로
운 이미지를 만들어 등록하여야 합니다.(포토샵 등의 이미지 작업 필요)
3) [메뉴구성변경-메뉴속성설정]에서 원하는 1차 메뉴를 선택하고, 새로 만든 Out이미지
(마우스가 벗어났을 때)와 Over이미지(마우스가 위에 있을 때)를 [가져오기]버튼을 이
용하여 등록합니다.
마. 웹에디터(CODY)를 이용한 표 만들기
1) 웹에디터의 툴바에 있는 표 만들기 기능을 이용하여 표를 만들면, 향후 표를 합치거나,
나누는 작업 등이 편리합니다.
2) 기타 문서(한글, 엑셀 등)에서 가져온 표 또는 별도의 HTML코드로 작성된 표는 웹에디
터 기능에서 표를 수정하는데 제약이 있습니다.
(각 문서 형태에서 사용하는 내부 코드가 다르므로 일부 호환되지 않습니다.)
- 26 -
바. 기타(웹에디터 기능의 표가 아닌) 표의 행 또는 열 추가 수정하기(간단한 HTML소스)
1) 웹에디터의 표가 아닌 다른 표 형태를 가져왔을 경우 웹에디터 상에서 행 또는 열을
추가/수정 하는 등의 표 편집 작업이 어렵습니다.
2) 기본적인 표 작성 html소스의 예
A
<table> <tbody> <tr> <td> A </td> </tr> </tbody></table>
A B C
<table> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </tbody></table>
A<table> <tbody> <tr> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> </tbody></table>
B
C
A
<table> <tbody> <tr> <td>A</td> </tr> <tr> <td>B1</td> <td>B2</td> </tr> <tr> <td>C1</td> <td>C2</td> </tr> </tbody></table>
B1 B2
C1 C2
사. 백업의 이해(사이트 백업, 코디히스토리)
1) 사이트 백업
- 메뉴위치 : 하단 관리자 메뉴의 [사이트 정보] → 하단 [사이트 백업관리]
- [백업하기]를 누르시면 해당 홈페이지의 파일 정보가 현재 시점으로 저장됩니다.
- 백업파일은 누적되어 관리되므로 사이트 용량을 판단하여 개수를 관리합니다.
- [복구]를 선택하여 해당 시점으로 파일 정보를 되돌릴 수 있으며,
- [삭제]를 선택하여 해당 백업 파일을 모두 삭제합니다.
2) 코디히스토리
- 웹에디터(CODY)에서 [전송]을 선택하면 작성된 내용이 반영되면서 자동 저장되며,
- 최대 10번의 이전 기록을 코디히스토리가 갖게 됩니다.
- 코디히스토리는 해당 페이지의 손쉬운 되돌리기가 가능하지만 개수에 유의하십시오.
3) 홈페이지 수정 작업 전/후로 사이트 백업을 1회씩 하시길 권장하며,
사용하지 않는 기존 백업은 삭제하여 용량 관리에도 주의가 필요합니다.
- 27 -
아. 붙여넣기의 한계(한글, 엑셀 등에서 복사하여 붙여넣기)
1) 외부문서(한글, 엑셀 문서 등)에서 복사하여 붙여 넣는 경우 웹문서(HTML코드)와 호환
이 안 되는 부분이 많습니다.
※ 한글이나 엑셀 등의 문서 프로그램은 보이지 않는 각각의 코드들로 글자의 색상, 크기,
표의 형태들을 나타내고 있음으로 기본적으로 이 부분이 웹문서와 호환되지는 않으나
일부는 복사를 통하여 유사한 형태를 나타낼 수 있습니다.
특히, 표 등을 옮겨오면 사이즈 조절이나 기타 편집이 거의 불가능합니다.
2) 외부 문서에 있는 자료를 가져올 경우
- 글자 사이즈와 화면 폭 등을 고려하여 외부문서에서 편집을 완료 한 후 가져옵니다.
- (권장) 외부 문서에 있는 자료를 메모장(시작-프로그램-보조프로그램-메모장)에 복사
한 후 다시 웹에디터로 텍스트를 가져옵니다.
(메모장에서는 보이지 않는 편집코드들을 제외하고 텍스트만 남기게 됩니다.)
표를 가져올 때는 웹에디터의 표 기능을 사용하여 틀을 만든 후 내용을 위와
같은 방법으로 가져옵니다.
자. 특정 메뉴로 이동하는 하이퍼링크 주소 만들기
1) 활용 방법
가) 페이지 내에 글자 또는 그림에서 특정 메뉴로 이동하는 링크 만들기
나) 메뉴에서는 보이지 않지만(메뉴구성에서 감추기) 본문에서 연결하는 페이지 구성
2) 메뉴 링크주소 생성방법
가) 방법 : http://cms.kmu.ac.kr/golink.jsp?url=http://cms.kmu.ac.kr + 페이지주소
1) 페이지 주소 가져오기
하위 메뉴에서 마우스우클릭 후 [속성]선택
주소 복사
2) 가져온 주소에서 필요한 페이지 주소 뽑아내기
- 페이지 주소 : javascript:menu_move('/servlet/wizard.servlet.template.
ServerIndexServlet?command=subPage&cody_menu_seq=7
&client_id=kmuit&menu_type=T&parm_value1=1&parm_value2=A
&link_url=1_1.html&main_frame=right','index_frame')
- 28 -
차. 대학 메인 홈페이지(www.kmu.ac.kr)에서 각 학과의 교육과정, 교수소개 가져오기
1) 교육과정 : 해당 학과의 교육과정의 주소를 메뉴 또는 원하는 부분에 하이퍼링크 시킴.
2) 교수소개 : 해당 학과의 교수소개의 주소를 메뉴 또는 원하는 부분에 하이퍼링크 시킴.
카. 대학 메인 홈페이지(www.kmu.ac.kr)에서 각 대학의 행정실 직원 소개 가져오기
1) 해당 대학의 직원소개 부분의 주소를 메뉴 또는 원하는 부분에 하이퍼링크 시킴.
(기타 행정부서 등에서도 동일한 방법으로 가져올 수 있습니다.)
타. 웹에디터(CODY)를 불러오는 다양한 방법
1) 웹 페이지 내부의 [편집]을 클릭
2) 하단 관리자 메뉴 중 [메뉴구성변경]에서 원하는 메뉴를 선택한 후 [편집하기]를 클릭
- 29 -
3) 하단 관리자 메뉴 중 [파일관리]에서 원하는 파일을 선택한 후 [파일편집]을 클릭
파. 홈페이지별 로그인 후 회원가입?!
1) 회원관리 기능 설명(18page) 부분에서 보신 바와 같이 홈페이지를 사용할 수 있는 기
본적인 회원인 준회원은 아래 그림과 같이 로그인 후 [회원가입]을 한 번 해주어야 합
니다.
2) 인사번호 / 학번(졸업생도 가능)으로 모든 CMS사이트에 별도의 회원정보를 입력하는 가
입 단계를 거치지 않고 로그인을 할 수 있으나, 각 사이트를 이용하기 위한 회원가입은
별도로 필요합니다.
3) 이는 마치 포털사이트(네이버, 다음 등)에 계정이 있어 로그인 하였으나, 포털사이트에
서 사용자들이 만든 카페 등을 이용하기 위하여 해당 카페에 회원가입을 하는 것과 동
일합니다.
4) 교내 구성원이 아닌 외부인이 CMS사이트를 이용하기 위해서는 로그인 전에 별도의 회
원가입을 통하여 두 가지 방법으로 회원정보를 등록하여 모든 CMS사이트에서 이용할
수 있습니다.
- 일반 회원가입 : 개인을 식별할 수 있는 회원 정보를 CMS사이트에 등록하는 방식
- 공공I-PIN가입 : 정부에서 운영하는 공공 I-PIN의 인증 정보를 이용하여 CMS사이트
에는 개인정보를 남기지 않고 로그인하는 방식
- 30 -
하. CMS 홈페이지의 제작 → 오픈 / 운영
1) 제작 : 업무별 홈페이지 개설신청은 신청절차(2page)에 따라 신청하시면 홈페이지 제
작을 할 수 있도록 승인해 드립니다.
2) 오픈 : 홈페이지를 완성하고 오픈하여 사용하는 것은 아래와 같습니다.
- 대학 메인 홈페이지에 각 해당 페이지 별로 홈페이지 주소가 연결된 부서 및 대학,
대학원, 학과 등은 해당 주소를 수정 요청하여야 합니다.
→ [전자문서시스템-게시판-교내게시판-홈페이지업무요청]으로 상세수정내용을 요청
(메뉴 위치, 수정할 부분, 수정 내용(예:주소변경) 등 상세히 작성)
- 추가로 각 학과 및 연구소, 부속기관에서는 상위부서(단과대학, 산학협력단 등)의 홈
페이지에도 개별적으로 요청하시어 주소를 변경하셔야 합니다.
갸. CMS 홈페이지의 주소
1) 기본 주소 : http://cms.kmu.ac.kr/user/사이트주소
2) 단축 주소 : http://web.kmu.ac.kr/사이트주소
※ 위 두 주소 중에 어느 것을 사용하셔도 됩니다.
