WEB builder 홈페이지매뉴얼 - CKUcms.cku.ac.kr/manual.pdf · 2000-10-20 · 8. 코디 -...

Copyright© 2006 K2WebTech Inc. All Right Reserved | Creative Corporation K2WebTec

이용안내서

1

WEB builder

홈페이지 매뉴얼K2 Web TECH


이용안내서

2

1. 홈페이지 생성 마법사

학교홈페이지를 생성하고 재 생성하는 페이지 입니다.

① 관리자 툴 메뉴의 ‘홈페이지 생성 마법사’ 버튼을 클릭 합니다.

② ‘템플릿으로 생성’ 버튼을 클릭 합니다.

③ 원하는 템플릿을 보기 위하여 대분류를 클릭합니다.

④ 템플릿을 선택한 후 ‘선택완료’ 버튼을 클릭하면 홈페이지가 생성 됩니다.

①

②

③

④


이용안내서

3

학교홈페이지에서 변경할 프레임 선택하는 페이지입니다.

① 원하는 프레임을 선택후 프레임선택을 누르면 프레임이 적용 됩니다.

2. 프레임 선택

②


이용안내서

4

템플릿을 변경하는 화면

3. 템플릿 선택

①

① 메인 홈페이지의 템플릿을 변경 시에 사용합니다. 기존 자료 및 컨텐츠 들은 변하지 않으며 템플릿만 변경이 됩니다. 템플릿 변경 시 템플릿을 변경할 것인지를 묻는 창이 뜨게 됩니다.


이용안내서

5

프레임 사이즈를 변경하는 화면

4. 프레임 사이즈 변경

홈페이지 프레임의 크기를 상, 하, 좌, 우 마우스로 드래그 앤 드롭 하여 사이즈를 조절할 수 있으며 숫자로도 기입이 가능합니다.

①. TopSize : 상하프레임 크기를 숫자를 기입하여 설정할 수 있습니다.

②. LeftSize : 좌우프레임 크기를 숫자를 기입하여 설정할 수 있습니다.

③. 화면크기 : 홈페이지 디자인의 테이블 크기를 조절할 수 있습니다.

④. 정렬 : 모니터 화면에 보여지는 정렬방식을 정할 수 있습니다.

① ② ③ ④


이용안내서

6

메뉴를 추가 및 삭제하는 화면

5. 메뉴 구성 변경 - 메뉴 구성 변경

①

① 메뉴 추가및 수정 삭제하는 버튼입니다.

② 메뉴의 순서를 설정하고 바꾸는 버튼입니다. 메뉴를 선택한 후에 버튼을 클릭하면 순서가 바꾸어 집니다.

②


이용안내서

7

어떻한 스타일로 메뉴를 설정할 것인지를 나타내는 페이지

5. 메뉴 구성 변경 – 메뉴 배열 설정

원하시는 메뉴 배열을 설정하신 후 하단에 버튼을 클릭하면 적용됩니다.


이용안내서

8

메뉴의 이미지 및 글자 굵기 배경 이미지를 변경하는 화면

5. 메뉴 구성 변경 – 메뉴 속성 변경

①

① 주 메뉴를 클릭하면 빨간색 테두리가 나오며 ② 화면에 설정하는 페이지가 나옵니다.② 메뉴에 따른 설정 화면 입니다.③ 서브메뉴를 클릭하면 빨간색 테두리가 나오며 ② 화면에 설정하는 페이지가 나옵니다

.④ 버튼을 클릭하면 메뉴에 적용이 됩니다.

②

④

③


이용안내서

9

게시판을 추가 및 디자인을 변경하는 화면

6. 기능관리 - 게시판

①

③

③ 디자인 화면

① 게시판이름을 등록한후 게시판 추가를 클릭하면 게시판이 추가됩니다.

② 게시판의 권한을 설정하는 메뉴입니다.

③ 게시판의 디자인을 설정하는 화면입니다.( 디자인 화면에서 설정)

④ 설정완료 버튼 클릭시 적용이 됩니다.

②

④


이용안내서

10

일정관리 디자인 변경화면

6. 기능관리 - 일정관리

①

③

① 일정관리의 스킨을 변경합니다.

②


이용안내서

11

설문조사를 새로이 등록하고 디자인 변경을 할 수 있는 화면

6. 기능관리 – 투표관리(설문조사)

①

① 설문조사등록 : 제목, 기간, 항목을 입력한 후 확인 버튼을 누릅니다.

② 스킨변경 : 설문조사 디자인을 변경할 수 있습니다.

③ 리스트 : 설문조사 리스트 및 최신 보기 페이지 입니다.

① ②

③


이용안내서

12

이벤트 팝업 창을 관리할 수 있는 화면

6. 기능관리 – 팝업관리(이벤트)

① 이벤트 편집 창 - 제목, 기간, 크기, 위치(홈페이지 상에서 실제 띄워질 위치)등을 입력한 후 K2 Web Cody 를 이용하여 이미지, 링크 등 이벤트 창 을 작성 후 ‘이벤트 등록’ 버튼을 누르면 이벤트 등록이 됩니다

①


이용안내서

13

학교홈페이지 회원을 관리하는 화면

6. 기능관리 - 회원관리

①

③

① 학교홈페이지내에 그룹을 추가하고 삭제하는 팝업창으로 뜨는 페이지입니다.

② 검색과 회원 리스트를 보여주는 목록입니다..

③ 그룹에 속한 회원을 이동하게 홈페이지에서 탈퇴시키는 기능입니다.

②


이용안내서

14

홈페이지를 관리하는 화면

7. 홈페이지 관리

학교 홈페이지의 기본 정보를 확인한다.

홈페이지의 기본 설정을 변경한다.

홈페이지 백업을 한다.

①홈페이지 정보 변경


이용안내서

15

관리자 툴 메뉴의 기능관리에는 없지만 K2 Web CODY 화면의 ‘기능 가져오기’ 의 기능관리에 있는 기타 기능관리 화면

8. 코디 – 기능 가져오기

기능관리 에 사용중인 기능으르 클릭하면 문서에 바로 사용할 수 있는 기능입니다.


이용안내서

16

페이지를 구성할 수 있는 화면

8. 코디 – 페이지템플릿 선택

페이지 템플릿 화면

코디를 클릭후 페이지 템플릿을 클릭하면 페이지 템플릿 화면이 출력된후 적당한 페이지 클리하면 페이지에 적용됩니다.


이용안내서

17

이미지를 가져오는 화면

8. 코디 – 이미지 가져오기

이미지를 삽입할 때 쓰입니다. 이미지 셋에 제공되는 이미지, 클립아트를 삽입할 수 있으며, 자신의 PC에 저장되어 있는 이미지도 삽입할 수 있습니다

이미지 셋 화면


이용안내서

18

8. 코디 – 이미지 가져오기 (계속)

이미지 추가 화면에 오른쪽 마우스를 클릭하여 ‘첨부파일 추가’ 버튼을 클릭한 후 열기 창에서 단수 또는 복수의 이미지를 선택, ‘열기’ 버튼을 누릅니다. ‘내 이미지 등록하기’ 버튼을 누르면 이미지가 업로드 됩니다.


이용안내서

19

기존의 데이터가 저장되어 있는 다운로드 리스트

8. 코디 - 히스토리

코디 히스토리 : 코디를 이용하여 수정하는 내역을 복원가능하도록 시간순으로 저장

저장 : 수정 후 전송 버튼을 누르면 자동으로 백업됩니다.

복원 : 코디 히스토리선택 버튼을 클릭 후 원하는 백업을 선택하면 코디창에 내용이 복원됩니다.


이용안내서

20

8. 웹 코디 메뉴

1. ToolBar Control : HTML 의 WISYWIG 편집을 가능하게 해주는 기능을 사용하 는 버튼 입니다. 버튼에 따라 기능별로 HTML 을 생성 가능하게 해줍니다.

2. 전송, 종료 버튼 : K2Web Cody 로 HTML 편집을 완료한 후 저장(전송), 또는 저장하지 않고 (종료) 작업을 끝낼 때 실행시키는 버튼 입니다.

3. Tab Control : 버튼을 누름에 따라 HTML편집창, HTML 소스보기 창, 미리보기창( 편집한 HTML 문서가 Web Browser 에서 보여지는 모습을 미리 보는 창) 을 볼

수 있는 기능을 제공 합니다.4. 내용 편집창 : 내용 편집창은 Tab Control 에 따라 HTML 편집창, HTML 소스

보기 창, 미리보기 창이 나타나는 곳으로서 HTML 문서 생성, 편집의 주 작업이 이 루어지는 공간입니다. HTML 편집창은 메뉴나 ToolBar Control 을 이용하여 HTML

에 대한 전문적인 지식 없이도 HTML 문서를 생성하고 편집할 수 있도록 도와주는공간입니다. HTML 소스보기창은 HTML 편집창에서 생성한 문서의 HTML 소스를

볼 수있는 공간입니다. 물론 HTML 소소브기창에서 삽입한 HTML 소스는 HTML 편 집창에 적용됩니다. 미리보기 창은 HTML 편집창이나 HTML 소스보기 창에서 생

성, 편집한 HTML 문서가 실제적인 Web Browserdptj 어떻게 보여지는지를 볼 수 있는 공간입니다. 이와같은 세가지의 창(Window) 이 유기적으로 연결되어 HTML

페이지 작업을 효율적으로 만들어 줍니다.

① ②

③

④


이용안내서

21

8. 웹 코디 메뉴 – 전체 메뉴 구성

메뉴는 ToolBar Control 좌측 상단 첫 번째 버튼을 클릭하여 사용할 수 있습니다.

메뉴버튼을 클릭하면 다음과 같은 메뉴들을 보실 수 있습니다.

파일파일(F)(F)기능기능 편집편집(E)(E)기능기능 삽입삽입(I)(I)기능기능

표표(A)(A)기능기능 서식서식(O)(O)기능기능 레이어레이어(I)(I)기능기능


이용안내서

22

8. 웹 코디 메뉴 – 파일 기능 설명

파일파일(F)(F)기능기능

새 문서 : 현재 작업하던 HTML 문서를 모두 지우고 새로운 문서 작성

을 시작할 때 사용하는 기능입니다. 이 기능을 사용할 경우 작업하던

HTML 문서는 모두 지워집니다.

내 문서 불러오기 : 현재 작업하던 HTML 문서를 지우고 기존에 Cody 또는 OfflineEditor 로 작성을 해놓았던 HTML 문서를 불러올 때 사용하는

기능입니다. 새 문서 기능과 같이 작업하던 HTML 문서는 지워지고 불러 오는 HTML 문서로 대체됩니다.

내 피씨로 저장하기 : 작성한 HTML 문서를 자신의 PC 원하는 곳에 저

장할 때 사용합니다. 서버에 저장 되어있는 HTML 문서를 편집, 수정할 때

Back Up 용으로, 혹은 자신의 PC 가 아닌 곳에 있는 HTML 페이지를 자신

의 컴퓨터 원하는 곳에 저장을 하려고 할 때 사용되는 기능입니다.

서버로 전송하기 : 서버에 새로운 HTML 문서를 생성하여 작업을 마친후, 또는 기존에 있는 HTML 페이지를 Load 하여 편집작업을 마친 후 서

버에 저장하기 위해 사용하는 기능 입니다. 전송 버튼을 누르게 되면 작업 하던 HTML 문서는 서버에 바로 저장이 되고, 이 작업 결과는` 바로 서버에

적용되어 Web Brows er 의 웹 페이지를 열어 확인 할 수 있습니다.

서버로 전송하기 : 서버에 있는 HTML 페이지 작업을 할 때, 현재까지 작업한 내용이 있다면 그 문서를 전송한 후 에디터를 종료합니다. 작업을

한 내용이 없다면 저장하지 않고 바로 Cody 를 종료합니다.

다른 이름으로 저장 : HTML 문서를 다른 이름으로 자신의 PC 에 저장할 때 쓰입니다. 템플릿 불러오기 : 홈페이지 관리자가 설정해 놓은 작성된 HTML 페이지를 불러

와서 그 페이지에 추가로 작업을 할 경우에 사용합니다.

기타 파일메뉴 기능 설명


이용안내서

23

8. 웹 코디 메뉴 – 편집 기능 설명

편집편집(E)(E)기능기능

되돌리기(Undo) : HTML 페이지 작업을 하는 도중 작업을 잘못 했을 경우 이전 상태로 되돌리기 위해서 이 기능을 사용 합니다. 여러 번의 되

돌리기가 가능합니다.

되돌리기 취소 : 되돌리기 기능과는 반대로 작업을 다시 실행 시킬 때사용됩니다.

잘라내기 : 선택된 부분의 Text 나 이미지, 동영상, 표 등의 객체들을 잘라내기 할 때 사용하는 기능입니다. 선택된 객체는 화면에서 사라지고

그 사라진 부분은 컴퓨터내의 Clip Board 라는 곳에 임시적으로 저장되어있습니다. 복사하기 : 선택된 부분의 Text 나 이미지, 동영상, 표 등의 객체들을

복사할 때 사용하는 기능입니다. 잘라내기 와는 달리 선택된 객체는 그대 로 보존이 되면서 Clip Board 에 임시적으로 저장이 됩니다.

붙여넣기 : 잘라내거나 복사된 Text 나 이미지, 동영상, 표 등의 객체들 을 붙여 넣을 때 사용하는 기능입니다. 잘라내거나 복사하기를 한 개체를

다른 곳에 이전과 똑같은 모습으로 객체를 생성할 수 있습니다.

줄간격 조절 : 테이블 안의 Text 줄과 줄 사이의 간격을 조절하는 기능입니다.

찾기 : 문서 편집 창에서 원하는 문자열을 찾을 때 사용하는 기능입니다. “ ” 아래의 창이 뜬 후 찾을 문자열 칸에 원하는 문자열을 입력한 후 다

음 찾기를 클릭 하면 원하는 문자열을 찾을 수 있습니다. 찾을 방향의 옵 션에 따라서 현재 커서의 위치로부터 위쪽 혹은 아래쪽으로 검색을 할 수

있습니다. 또한 영문자의 대소문자 구분과 단어 단위의 검색이 가능 합니다.


이용안내서

24

8. 웹 코디 메뉴 – 편집 기능 설명 (계속)

바꾸기 : 찾기의 기능을 포함하면서 찾은 문자열을 다른 문자열로 대 치시킬 수 있는 기능입니다. 아래의 창( 다음 페이지) ‘ 이 뜬 후 찾을 문자열

’ ‘ ’ 칸에 바꾸기를 원하는 문자열 입력한 후 바꿀 문자열칸에 찾은 문자열 ‘ ’ 을 바꾸길 원하는 문자열을 입력한 후 다음 찾기 -> ‘ ’ 바꾸기 순서로 한

‘ ’ 문자열씩 바꾸거나 모두 바꾸기 버튼으로 문서 안의 모든 문자열을 원하 는 문자열로 바꿀 수 있습니다.

HTML 소스보기 : 편집화면에서 HTML 소스를 볼 수 있으며 직접 수정이가능합니다.




이용안내서

25

8. 웹 코디 메뉴 – 편집 기능 설명 (계속)

페이지 등록정보 : 현재 편집중인 문서의 전체적인 기본 설정을 하는곳입니다. 메뉴에서 뿐만 아니라 편집 문서의 페이지 내에서 마우스 오른

“ ” 쪽 버튼을 누르면 페이지 등록정보 메뉴가 보이고 이를 클릭하면 다음 과 같은 창이 보입니다.


1) 위쪽 여백 : 전체 문서의 위쪽 여백 설정합니다.(픽셀단위)

2) 왼쪽 여백 : 전체 문서의 왼쪽 여백 설정합니다. (픽셀단위)

3) 배경 색 : 전체 문서의 배경 색을 설정합니다.

4) 글씨 색 : 전체 문서의 글씨 색을 설정합니다.

5) 하이퍼링크 색 지정 : 하이퍼 링크가 지정되어 있는 부분 텍스트의 글자의 색을

설정합니다.

6) 열었던 하이퍼링크 색 지정 : 하이퍼 링크가 지정되어 있는 텍스트 부분에서 이미

한번 이상 열었던 링크의 글자 색을 설정합니다.

7) 열고 있는 하이퍼링크 색 지정 : 하이퍼 링크가 지정되어 있는 텍스트 부분을 클

릭하는 순간의 글자의 색을 설정합니다.

8) 배경그림 : 문서의 배경그림을 설정합니다.

9) 배경그림 고정 : 문서의 배경 그림이 마우스 스크롤과 관계없이 항상 같은 위치에

고정 되도록 하는 기능 입니다.

10) 배경그림 반복 안함 : ‘ 배경그림이 바둑판 형식으로 반복되지 않고 배경그림 반

’ 복 안함 체크박스의 우측 콤보 박스에서 선택한 위치에 배경그림을 위치 시킵니다.

11) 배경음악사용 : 문서의 배경음악을 설정하기를 원할 때 체크를 켜고 원하는 음

악의 위치를 지정한 후 배경음악의 반복 회수를 설정합니다.



이용안내서

26

8. 웹 코디 메뉴 – 삽입 기능 설명

삽입삽입(I)(I)기능기능

동영상 삽입하기 : 현재 편집하는 문서의 커서 위치에 여러 종류의 멀

티미디어 파일을 삽입하고자 할 때 사용하는 기능입니다.

하이퍼 링크 : 현재 문서에서 선택된 문자열에 다른 페이지로의 하이 퍼링크를 설정할 때 사용합니다. 텍스트 뿐만 아니라 이미지에도 하이퍼

링크를 설정할 수 있습니다.

1) 책갈피 : 문서내의 특정 위치로의 하이퍼링크를 걸 때 사용합니다.2) 대상 : 하이퍼링크로 연 대상 페이지나 프레임을 설정합니다. 직접 대상 프레임의 이

름을 입력 할 수 있으며 아래의 옵션 중의 하나를 선택 할 수 있습니다. • 기본값 (없음) : 기본값으로 아무 옵션 없이 하이퍼 링크를 설정합니다. 이 옵션을

사용할 경우 같은 프레임과 동일하게 자기 자신의 페이지에서 링크문서가 열리게 됩니다. • 같은 프레임 (_self) : 현재 프레임( 자기자신의 페이지) 에서 링크된 문서가 열립니다. • 전체 페이지 (_top) : 편집하고 있는 HTML 페이지가 프레임으로 나누어져 있을 경

우에 전체 브라우져 화면으로 링크된 문서가 열립니다. 만약에 프레임으로 나누어져 있지 않을 경우 자기자신의 페이지에서 링크가 되어 문서가 열립니다.

• 새 창 (_blank) : 새 창(New Web Browser) 이 뜨면서 링크된 문서가 새로 띄워진 창에 열립니다.

• 상위 프레임 (_parent) : 현재 프레임의 상위 프레임에서 링크된 문서가 열립니다. ( 현재 편집중인 HTML 문서가 프레임으로 나누어져 있을 경우에만 해당됩니다)

기호넣기 : 특수문자나 기호 등을 넣을 수 있는 기능입니다.


이용안내서

27

8. 웹 코디 메뉴 – 삽입 기능 설명(계속)

선 그리기 : 현재 편집하는 문서의 커서 위치에 가로선을 그려서 문서간

의 구분을 하거나 시각적인 효과를 나타내고 싶을 때 사용하는 기능입니다.

1) 선위치 : 선의 정렬 위치를 선택합니다. (왼쪽, 가운데, 오른쪽)2) 선길이 : 선의 길이를 설정합니다. (단위:퍼센트(%))3) 선색상 : 선의 색을 설정합니다.

한 줄 글 상자 : 현재 편집하는 문서의 커서 위치에 사용자의 입력을

받기 위한 한 줄 글 상자 양식을 삽입할 때 사용하는 기능입니다.

1) 이름 : 문서 내에서의 글 상자의 식별 이름을 설정합니다. ( 보여지는 부분과는 상관이 없습니다.)2) 초기값 : 화면 상에서 한 줄 글 상자 안에 들어갈 초

기값을 설정합니다. 이 값은 HTML 문서 상에서 한 줄 글 상자의 텍스트 부분에 그대로 보여집니다.

1) 이름 : 문서 내에서의 버튼의 식별 이름을 설정합니다. ( 보여지는 부분과는 상관이 없습니다.)2) 초기값 : 화면상에서 버튼 안에 들어갈 버튼 이름을정합니다.


3) 폭 글자수 : 입력 받을 한 줄 글 상자의 길이를 설정합니다.4) 최대 길이 : 최대 입력 글자수의 한계를 설정합니다.5) 유형 • 일반 : 일반적인 한 줄 글 상자를 삽입할 때 사용합니다. • 암호 : 사용자의 입력내용이 보이지 않고 ‘*’로 대체되어 나타납니다. • 파일 : 첨부파일 등의 파일 경로를 찾을 때 사용합니다.

버 튼 : 현재 편집중인 문서의 커서 위치에 사용자의 선택을 결정할 수

있도록 하는 버튼을 삽입할 때 사용하는 기능입니다.

3) 버튼유형 • 일반 : 일반적인 버튼을 삽입할 때 사용합니다. 일반적으로 버튼을 눌렀을 때 페이지를 이동하는 하이퍼 링크 등의 기능에 사용합니다. • 제출 : 사용자가 입력한 내용을 제출하는 버튼을 삽입할 때 사용합니다. 일반적으로 웹 페이지에서의 로그인 정보나 회원가입 등에서 이용하는 Form 전송에 사용 합니다. • 내용 취소 : 사용자가 입력한 내용을 지우거나 초기값으로 되돌릴 때 사용합니다.


이용안내서

28


확인단추 : 현재의 커서 위치에 사용자가 선택할 부분을 도와줄 확인상자

를 삽입할 때 사용합니다.1) 이름 : 문서 내에서의 확인 상자의 식별 이름을 설정합니다.( 보여지는 부분과는 상관이 없습니다.)2) 값 : 화면 상에서 확인 상자 안에 들어갈 초기값을 설정합니다. 이 값은 HTML 문서 상에 그대로 보여집니다.3) 시작상태 • 선택된 상태 : 체크된 상태로 삽입할 때 사용합니다. • 선택 안 된 상태 : 체크되지 않은 상태로 삽입 할 때 사용 합니다.

라디오단추 : 현재의 커서 위치에 사용자가 선택할 부분을 도와줄 확인상

자를 삽입할 때 사용합니다.

1) 이름 : 문서 내에서의 확인 상자의 식별 이름을 설정합니다.( 보여지는 부분과는 상관이 없습니다.)2) 값 : 화면 상에서 확인 상자 안에 들어갈 초기값을 설정합니다. 이 값은 HTML 문서 상에 그대로 보여집니다.

글 상자 : 사용자가 선택한 부분에 글 상자를 만들 때 사용합니다.

1) 이름 : 문서 내에서의 글 상자의 식별 이름을 설정합니다.( 보여지는 부분과는 상관이 없습니다.)2) 초기 값 : 글 상자 안에 들어갈 초기값을 설정합니다. 이 값은 HTML 문서 상에 그대로 보여집니다.3) 폭 글자수 : 글 상자의 넓이(폭) 을 설정합니다.4) 줄 수 : 글 상자의 내용 줄 수를 설정합니다.

예) ’ ’ 테스트라는 이름의 글 상자에 폭40, 10 줄의 값을 넣어 만든 글 상자 모습



이용안내서

29


글 상자 : 사용자가 선택한 부분에 글 상자를 만들 때 사용합니다.

1) 이름 : 문서 안에서의 식별 이름을 설정합니다. ( 보여지는 부분과는 상관이 없습니다.)2) 추가/수정/삭제 : 선택여부/항목이름/ 초기값을 설정하

여 상자의 항목들을 추가/수정/ 삭제 할 때 쓰이는 단추입니다. 추가 버튼을 클릭하면 아래의 창이 뜨고 HTML

페이지에 선택상자의 항목으로 넣고 싶은 내용을 생성합니다. 수정 버튼을 이용하여 이전에 넣었던 항목을

수정할 수 있고, 삭제 버튼을 이용하여 이전에 입력했던 항목을 삭제 할 수 있습니다.

3) 줄 수 : 선택 상자의 높이를 결정할 줄 수. 이 설정에 따라 한번에 볼 수 있는 항목의 수가 달라 집니다.

4) 다중 선택 허용 : 사용자가 항목 중 2 개 이상의 항목을 선택할 수 있도록 할 것인지 여부를 설정하는 항목 입

니다. 다중선택을 허용하게 되면 사용자가 여러 가지 항목을 한꺼번에 선택할 수 있습니다.

그림 삽입하기 : 그림을 삽입할 때 쓰이는 기능입니다. 이미지 가져오 기 버튼을 클릭하여 제공된 이미지 또는 자신의 PC 의 이미지를 가져와 등 록 후에 삽입할 수 있습니다

기타 삽입메뉴 기능 설명

1) 이미지 폴더 : 이미지들이 들어있는 각각의 이미 지 폴더 들의 화면입니다.

2) 내 이미지 추가 화면 : 자신의 PC 에 있는 로컬 이미지 복수로 선택해서 올릴 수 있는 화면입니다.

3) 미리 보기 화면 : 업로드 한 이미지나 각각의 이 미지 폴더에 들어 있는 이미지들을 미리 볼 수 있는

미리보기 화면입니다.4) 파일명 : 이미지 폴더를 선택하면 나타나는 이미

지 파일명을 볼 수 있으며 선택하여 이미지를 삽입 할 수 있습니다.



이용안내서

30

8. 웹 코디 메뉴 – 표 기능 설명

표표(A)(A)기능기능


이용안내서

31

8. 웹 코디 메뉴 – 표 기능 설명(계속)

1) 크기 : 전체 표의 크기를 나타냅니다. • 행 : 표에서 세로부분의 셀의 수를 가리키는 속성입니다. • 열 : 표에서 가로부분의 셀의 수를 가리키는 속성입니다.

행

열2) 레이아웃

• 테두리 크기 : 표 전체의 테두리의 두께를 나타내는 속성입니다.

단위-픽셀(Pixel)

테두리 크기 : 1 Pixel 테두리 크기 : 3 Pixel

• 셀 안쪽 여백 : 셀 안쪽의 가장자리 부분의 여백부분의 정도를 나타내

는 속성입니다. 단위-픽셀(Pixel)

셀 안쪽 여백 : 1 Pixel 셀 안쪽 여백 : 3 Pixel

• 셀 간격 : 셀 사이의 간격을 나타내는 속성입니다. 단위-픽셀(Pixel)

셀 간격 : 1 Pixel 셀 간격 : 3 Pixel

3) 셀 크기

• 너비지정 : 셀 하나의 너비를 지정하는 속성 입니다. 단위-픽셀(Pixel)

• 높이지정 : 셀 하나의 높이를 지정하는 속성 입니다. 단위-픽셀(Pixel)



이용안내서

32


표 외곽선 보이기 : “표의 속성에서 테두리의 크기가 0” 인 경우 실제Web Browser 상에서 또는 문서 편집 창에서도 표의 테두리가 전혀 보이

지 않습니다. 그러나 표 외곽선 보이기 기능을 사용하면 편집 시에 편집의 편리함을 위해서 표의 외곽선(테두리선) 을 보이도록 설정 할 수 있습니다.

문서의 편집상으로는 아무런 영향을 끼치지 않으면서 문서 편집 창에서 표의 모양을 육안으로 관찰할 수 있도록 하기 위해서 사용하는 기능입니

다. K2 Web Cody 의 경우 문서 편집을 시작할 때 이 기능이 활성화 되어있습니다.

K2 Web Cody 는 Default 값으로 지정이 되어 있습니다.

표 편집하기

표를 생성한 뒤 표에 포커스를 놓고 마우스 오른쪽 버튼을 클릭하면 표 편집에 관련된 context 메뉴가 나타납니다. ( 표의 상태에 따라 메뉴 마나 활성화 혹은

비활성화 되어 있을 수 있습니다.)



이용안내서

33

8. 코디 - 히스토리

1) 잘라 내기/복사/ 붙여 넣기 : 표 안에 마우스에 의해 선택 되어진 Text 나 Image 등을 편집할 수 있습니다. 또한 표 이

외의 다른 곳에서 복사하거나 잘라낸 Text 나 Image 등을 셀 안에 붙여 넣기 할 수 있습니다.

2) 글꼴 : 선택한 셀 안의 글자 속성을 설정할 수 있습니다.3) 서식 없앰 : 글꼴에서 설정한 글자 속성을 원 상태로 되돌립니다.4) 하이퍼 링크 : 선택한 셀 안의 Text, Image 에 하이퍼 링크

를 겁니다.5) HTML 소스 보기 : 편집중인 HTML 소스를 볼 수 있습니다. 6) 행 삽입/ 행 삭제 : 셀 안에 커서를 옮겨 놓은 후 행 삽입,

행 삭제를 할 수 있습니다.7) 열 삽입/ 열 삭제 : 셀 안에 커서를 옮겨 놓은 후 열 삽입,

열 삭제를 할 수 있습니다.8) 셀 나누기/ 셀 합치기 : 선택한 셀을 나누거나 합칠 수 있습니다.9) 셀 등록 정보 : 편집중인 셀의 등록정보 입니다.10) 표 등록 정보 : 편집중인 표의 등록정보 입니다.2) 글꼴 : Text 의 글꼴, 종류, 크기, 효과, 색상 등 속성을 설정할 수 있습니다.

6) 행 삽입/ 행 삭제 : 셀 안에 커서를 옮겨 놓은 후 행 삽입 또는 삭제를 합니다.

삽입하고자 하는 셀 위치에 커서를 놓습니다. 새로 삽입된 행

표 편집하기



이용안내서

34


삽입하고자 하는 셀 위치에 커서를 놓습니다. 새로 삽입된 열

표 편집하기



이용안내서

35


9) 셀 등록 정보 : 표 안에 있는 각각의 셀마다 속성을 지정할 수 있는 창 입니다.

표 편집하기

• 레이아웃

- 가로맞춤 : 셀의 내용을 가로 방향으로 정렬 합니다. - 세로맞춤 : 셀의 내용을 세로 방향으로 정렬 합니다. - 너비 지정: 셀의 너비를 지정 합니다. - 높이 지정: 셀의 높이를 지정 합니다. • 테두리 - 색: 셀의 테두리 색을 설정합니다 - 옅은 테두리: 셀의 왼쪽과 위쪽 테두리 색을 설정합니다. - 짙은 테두리: 셀의 오른쪽과 아래쪽 테두리 색을 설정합 니다. • 배경 - 색 : 셀의 배경색을 설정합니다. - 배경그림사용 : 셀의 배경으로 그림을 삽입합니다.

10) 표 등록 정보 : 표 전체에 관련 된 속성을 지정할 수 있는 창입니다.

• 레이아웃

- 배치 : 표의 배치를 설정 합니다.(왼쪽, 가운데, 오른쪽) - 셀 안쪽 여백 : 셀의 안쪽여백을 설정합니다. - 셀 간격 : 셀과 셀 사이의 간격을 설정합니다. - 너비 지정 : 표의 너비를 지정합니다. - 높이 지정 : 표의 높이를 지정합니다. • 테두리 - 두께 : 표의 외곽선 두께를 설정합니다. - 색 : 테두리 색을 설정합니다. - 옅은 테두리 : 표의 왼쪽과 위쪽의 테두리 색을 설정합니다. - 짙은 테두리 : 표의 오른쪽과 아래쪽 테두리 색을 설정합니다. • 배경 - 색 : 표의 배경색을 설정합니다. - 배경그림사용 : 표의 배경으로 그림을 삽입합니다.



이용안내서

36


표 편집하기



이용안내서

37

8. 웹 코디 메뉴 – 서식 기능 설명

서식서식(O)(O)기능기능

탭 늘이기 : HTML 문서의 Text 단락별로 왼쪽에 공백을 두길 원하는

문자열 그룹에 탭을 넣습니다.

탭 줄이기 : HTML 문서의 Text 단락별로 왼쪽에 탭 늘이기 기능이 설 정 되어 있는 Text 그룹의 탭을 제거하기 위하여 필요한 기능입니다.

왼쪽 정렬 : Text 단락별로 Text 의 정렬을 왼쪽으로 정렬 시킵니다.

K2Web Cody 는 기본적으로 Text 의 경우 왼쪽 정렬의 서식이 적용되어 있습

니다.

탭 늘이기 탭 줄이기

가운데 정렬 : Text 단락별로 Text 의 정렬을 가운데로 정렬 시킵니다.

오른쪽 정렬 : Text 단락별로 Text 의 정렬을 오른쪽으로 정렬 시킵니

다.

숫자 목록 : Text 단락별로 숫자 목록을 만들기 위해 사용하는 기능입

니다.

기호 목록 : Text 단락별로 기호 목록을 만들기 위해 사용하는 기능입

니다.


이용안내서

38

8. 웹 코디 메뉴 – 레이어 기능 설명

레이어레이어(I)(I)기능기능

절대 위치로 지정 : 그림이나 표, 동영상 등의 Object 객체를 자유롭게

이동하고 싶을 때 사용하는 기능입니다. 원래의 Object 객체를 선택했을

때와 선택되어져 있는 모습은 같지만, 기능을 실행 시키기 이전과는 달리

마우스를 이용하여 객체를 자유롭게 움직일 수 있습니다. 이 기능을 사용

하여 객체의 위치를 변화시킨 후 위치 고정 기능을 실행 하는 것이 좋습니

다

위치 고정 : 절대위치로 고정 기능을 사용한 객체를 현재 위치되어 있 는 위치에 고정시키기 위하여 사용하는 기능입니다. 이 기능을 사용하면

객체를 선택한 모습이 평상시 모습이나 절대위치 지정 기능을 사용했을 때의 선택모습과는 다른 모습이 됩니다.

절대 위치로 지정 후 이동 이동된 Object 객체

위치 고정 모습


이용안내서

39

8. 웹 코디 메뉴 – 레이어 기능 설명(계속)

레이어 순서, 겹치기 : 표, 이미지, 동영상 등의 두 객체가 겹쳤을 때 객체의 우선순위를 두어 어떤 객체가 위로 얹어질 것인지를 결정하게 해

주는 기능입니다.1) 맨 앞으로 가져오기 : 표, 이미지, 동영상 등의 여러 개의 개체가(3 개이상) 겹쳐 있을 경우 겹치는 부분에 보이고 싶은 객체를 선택하고 이 기

능을 실행시키면 그 객체를 가장 앞으로 가져와서 겹쳐진 부분에 그 객체 를 보여줄 수 있도록 하는 기능입니다.

2) 맨 뒤로 보내기 : 표, 이미지, 동영상 등의 여러 개의 개체가(3 개 이상) 겹쳐 있을 경우 특정 객체를 가장 뒤로 보내 겹치는 부분은 보이지 않도록 하기 위하여 사용하는 기능입니다.

3) 텍스트의 위로 : 텍스트의 밑에 객체가 있을 경우 객체를 텍스트의 앞 으로 가져 와서 겹치는 부분에 있어 텍스트보다 객체가 우선적으로 보이 도록 합니다. 이 기능을 사용하면 겹치는 부분의 텍스트는 보이지 않고 객 체는 완전한 모습으로 보입니다.

4) 텍스트의 밑으로 : 텍스트의 위에 객체가 있을 경우 객체를 텍스트의 뒤로 보내 겹치는 부분에 있어 객체보다 텍스트가 객체보다 우선적으로

보이도록 합니다. 이 기능을 사용하면 겹치는 부분의 객체는 보이지 않습니다.

레이어레이어(I)(I)기능기능

WEB builder 홈페이지매뉴얼 - CKUcms.cku.ac.kr/manual.pdf · 2000-10-20 · 8. 코디 -...

Documents

Transcript of WEB builder 홈페이지매뉴얼 - CKUcms.cku.ac.kr/manual.pdf · 2000-10-20 · 8. 코디 -...