홈페이지 제작 과정 강사: 정희영.

홈페이지 제작 과정 강사: 정희영

오리엔테이션 본 강의에서는 HTML과 나모웹에디터5를 사용하여 수업을 진해하지만 나모웹에디터2006을 가지고 진행과정을 한 것을 기록해 놓았습니다. 본문의 내용 중 최신버전이라고 기록해 놓은 것은 나모웹에디터2006 입니다.

1차 홈페이지 제작 과정 홈페이지 작업환경 강사: 정희영

홈페이지 작업환경 홈페이지 개요 및 유용성 관련 용어 정리 홈페이지 구축 절차와 제작 준비물 홈페이지 고려사항
스토리보드 만들기(1) 계정 받기

1. 홈페이지의 개요 및 유용성 홈페이지란 무엇인가
마우스를 클릭했을 때에 관련 있는 정보가 나타날 수 있도록 일정한 규칙에 따라 작성한 문서를 하이퍼텍스트(Hypertext)라고 하는데, 이들의 집합체를 홈페이지라고 합니다 홈페이지를 만들 때 상용되는 기본언어가 HTML(Hypertext Markup Language)입니다. 인터넷=텍스트(PC통신) WWW(web)=그림,소리,동영상=하이퍼링크

1. 웹 서비스의 개요 및 유용성 홈페이지의 종류 검색사이트 – 야후코리아, 네이버, 엠파스, 한미르 등
포탈사이트 – 드림위즈, 다음 등 인터넷 쇼핑몰 – 농협하나로클럽, e-LGshop 등 인터넷 방송국 – 청소년방송국 등 인터넷 신문사 – 오마이뉴스, 딴지일보 등 인터넷 만화방 – 라이코스 만화체널 등 인터넷 뱅킹 – 하나은행, 국민은행 등 인터넷 전화국 – 다이얼패드, 와우콜 등 인터넷 정당 – 정정당당, 개혁국민정당 인터넷 서점 – 교보문고, yes24 등 사이버 아카데미 – 시사영어, 캠퍼스21 등 웹진 – 네이버 매거진 등 자료실 – 엣 파일, 심파일 등 개인홈페이지

1. 웹 서비스의 개요 및 유용성 홈페이지의 유용성 기업의 홍보효과 기대 수익 창출의 도구 개인 정보 교류의 장
새로운 개념의 직종 및 직업 창출 web pc: 컨탠츠 기획 web master: 시스템의 운영에서부터 전반적인 부분을 다룸

2. 관련 용어 정리 서버(Server)정보제공 / 클라이언트(Client)정보를 제공받음
TCP/IP: 인터넷 기본 프로토콜(통신규약) 페킷 TCP나눔 IP전송 TCP복원 하이퍼링크(Hyperlink) / 하이퍼텍스트(Hypertext) HTML(Hypertext Markup Language) HTTP(Hypertext Transfer Protocol)=하이퍼텍스트송수신프로토콜 FTP(File Transfer Protocol)=정보를 파일형태로 송수신하는 프로토콜 ISP(Internet Service Provider)=인터넷제공업체 WSP(Web-hosting Service Provider)=서버임대업체 CP(Contents Provider)=유료정보제공 IP(Information Provider)=PC통신망의 유료정보제공 응용 -tcp: 나누고 -> ip: 전송 -> tcp: 합침 제공자

2. 관련 용어 정리 웹사이트(Web site) ①홈페이지 ②웹서버 웹페이지(Web page) =하이퍼텍스트
홈페이지(Homepage): 하이퍼링크로 설정된 하이퍼텍스트의 집합체 도메인 네임(Domain Name)-문자로 된 주소로 사람이 좋아함 IP Address-숫자로 된 주소로 기계가 좋아함 DNS(Domain Name System) 문자를 숫자로 숫자를 문자로 변환하는 역할을 함 web 주소

3. 구축절차 및 제작 준비물 구축 절차 컨셉 정하기 레이아웃 잡기 자료 수집 및 분석하기
디자인과 프로그래밍하기 통일성과 주목성을 고려 서버에 업로드하고 시험운영하기 모니터요원사용 유지보수하기

3. 구축절차 및 제작 준비물 제작을 위한 준비물 컴퓨터와 인터넷 환경 인터넷 주소와 계정 웹문서를 만드는 프로그램
586 이상의 컴퓨터와 ADSL 이상의 인터넷 환경 제공 인터넷 주소와 계정 무료 계정(서버이용권), 웹호스팅서비스, 자체 서버운용(독립도매인) 웹문서를 만드는 프로그램 나모 웹에디터, 프론트폐이지, 드림위버 등 이미지를 편집하는 프로그램 포토샵, 애니메이션 샵, 플래시 등 파일전송 프로그램 서버컴퓨터와 클라이언트컴퓨터간의 데이터송수신에 필요 Cute_FTP, WS_FTP, AL_FTP

4. 홈페이지 구축 시 고려사항 주제가 명확해야 한다 (예: 로례알) 방문자 환경을 고려하여 제작한다 (예: MS)
효과적인 네비게이션을 구성한다 (예: HP) 업데이트를 고려해 디자인 한다 첫 폐이지는 홈페이지의 얼굴이다 (예: 난타) 이미지로 인해 로딩이 느림 이미지는 통일성과 주목성을 유지한다 (예: 바니스뉴욕) 게시판과 이벤트를 활용한다 (예: SK) 방문자수의 증가

5. 스토리보드 만들기(1) 홈페이지 구성방식 정하기 선형: 직선처럼 연결되어 순차적으로 정보를 보게 되는 형태
계층형: 여러가지 메뉴 중 하나를 클릭하면 그에 관한 것이 나오는 형태 복합형: 선형과 계층형의 복합적인 것이다 인덱스 폐이지 메뉴 폐이지 첫인사 폐이지 자기소개 공지사항 추천사이트 처음으로

5. 스토리보드 만들기(1) 폐이지 레이아웃 정하기
매인 폐이지를 만들고 각 메뉴를 클릭하였을 때 나오는 폐이지를 만들어 링크로 연결한다 homepage-day01-05동영상에 자세히 있음

5. 스토리보드 만들기(1) 저장할 폴더 구조 만들기
이미지파일과 HTML파일을 분리하여 놓고 홈페이지의 구조와 비슷하게 해 놓는 것이 좋음 homepage-day01-05동영상에 자세히 있음

6. 계정 받기 무료 계정 이용하기 웹호스팅 서비스이용하기 자체 서비스 운용하기 드림위즈에 가입하여 계정을 만들면.
홈페이지주소 FTP 주소 ftp://ftp.dreamwiz.com 웹호스팅 서비스이용하기 자체 서비스 운용하기

학습 정리 홈페이지란 관련성 있는 정보를 상호 연결해 둔 문서의 집합체입니다.
홈페이지는 기업이 홍보효과와 수익을 창출할 수 있는 새로운 도구이며, 개인이 자신을 알리고 정보를 공유할 수 있는 또 다른 교류의 장이 됩니다. 홈페이지를 구축할 때에는 (1)주제의 명확성, (2)방문자의 인터넷 환경, (3)네비게이션의 효율성, (4)전달력 있는 디자인, (5)운영방안 등을 고려해야 합니다.

HTML 태그 및 기본태그 익히기 강사: 정희영
2차 홈페이지 제작 과정 HTML 태그 및 기본태그 익히기 강사: 정희영

HTML 태그 및 기본태그 익히기 HTML의 특성 및 기본구조 메모장에서 HTML 문서 만들기 문자 서식 바꾸기
문단 서식 바꾸기 문서 속성 지정하기

1. HTML의 특성 및 기본구조 HTML의 특성 HTML의 각 명령어들을 태그(tag)라고 한다.
각 태그들은 ‘<’와 ‘>’로 열고 닫습니다. 대부분의 태그들은 여는 태그와 닫는 태그로 구성됩니다. 태그는 대소문자를 구분하지 않습니다. 두 칸 이상의 공백문자는 한 .칸으로 처리됩니다. 확장 자는 HTM과 HTML을 모두 사용할 수 있습니다.

1. HTML의 특성 및 기본구조 HTML의 기본구조 <html> <head>
<title>홈페이지에 오신 여러분을 환영합니다.</title> <body> WooHaha’s Homepage~ </body> </html> 문서의 주제나 제목, 키워드를 정의하는 부분이다. 이 부분에 표시된 내용은 웹브라우저에 표시 되지 않음. 방문자에게 전달하고자 하는 내용이 표시 되는 부분이다. 웹브라우저의 주요화에 표시되는 부분이다.

2. 메모장에서 HTML 문서 만들기 HTML 문서 만들기 주의: 저장할 때는 반드시 파일 이름에 HTM 또는
여야 합니다. (예: welcome.html)

2. 메모장에서 HTML 문서 만들기 HTML 문서 수정하기 소스 창 불러오기 변경된 내용 확인하기
[보기]-[소스보기] 메뉴 선택 [소스보기] 단축메뉴 선택 변경된 내용 확인하기 [새로 고침] 아이콘 [F5] 키 사용

<hn>표현내용</hn>
3. 문자 서식 바꾸기 제목글자의 크기 지정하기 표현내용을 단독문단으로 처리 N은 1부터 6까지의 숫자 <h1>이 가장 큰 글자, <h6>은 가장 작은 글자 <hn>표현내용</hn>

<hn align=“정렬방식”>표현내용</hn>
3. 문자 서식 바꾸기 제목글자의 정렬방식 지정하기 Align 속성 사용 속성값은 left, center, right 속성값이 문자인 경우에는 큰따옴표(“”) 사용 <hn align=“정렬방식”>표현내용</hn>

<font size=n> 표현내용 </font>
3. 문자 서식 바꾸기 본문글자의 크기 지정하기 size 속성 사용 속성값은 1부터 7까지의 숫자 사용 size=1 가장 작은 글자이고, size=7 가장 큰 글자 <font size=n> 표현내용 </font>

<font color=“색상값”> 표현내용 </font>
3. 문자 서식 바꾸기 본문글자의 색상 지정하기 color 속성 사용 속성값은 색 이름(sky blue)이나 색상코드(#0099ff)사용 두 개 이상의 속성을 사용하는 경우에는 속성 사이를 공백으로 구분. 속성 나열 순서 없음 <font color=“색상값”> 표현내용 </font>

<font face=“글꼴 이름”> 표현내용 </font>
3. 문자 서식 바꾸기 본문글자의 서체 바꾸기 face 속성 사용 속성값은 글꼴 이름 사용 글꼴 이름을 정할 때는 서버컴퓨터에 있는 글꼴을 입력하는 것이 아니라 방문자 컴퓨터에 있을만한 글꼴을 선택해야 한다. <font face=“글꼴 이름”> 표현내용 </font>

4. 문단 서식 바꾸기 줄 바꾸기 행 나누기 닫는 태그없이 단독으로 사용 여러 번 반복 사용 가능 표현내용 <br>

<p>표현내용 </p>
4. 문단 서식 바꾸기 문단 나누기 한 줄 띄어쓰기 여러 번 반복사용 효과 없음 <p>표현내용 </p> <p>표현내용

4. 문단 서식 바꾸기 정렬 방식 지정하기 정렬방식: left, center, right
<p align=“정렬방식”>표현내용 </p> <center>표현내용 </center>

<body text=“색상값”>표현내용 </body>
5. 문서 속성 지정하기 문서의 기본 글자 색 지정하기 text 속성 사용 속성값으로 색 이름이나 색상코드 사용 <font> 태그의 color 속성보다 우선 순위 낮음 <body text=“색상값”>표현내용 </body>

<body bgcolor=“색상값”>표현내용 </body>
5. 문서 속성 지정하기 배경색 지정하기 bgcolor 속성 사용 속성값은 색 이름이나 색상코드 사용 <body bgcolor=“색상값”>표현내용 </body>

<body background=“그림의 위치값”>표현내용 </body>
5. 문서 속성 지정하기 배경 그림 지정하기 background 속성 사용 속성값으로 배경 그림의 경로 입력 <body background=“그림의 위치값”>표현내용 </body>

학습 정리 HTML 문서는 문서의 정보를 정의하는 <head>... </head> 영역과 웹 브라우저의 주요 화면에서 보여주는 문서의 전달 내용을 정의하는 <body>....</body> 영역으로 나뉘어 집니다. 메모자(notepad.exe)을 이용하여 HTML 문서를 작성할 때에는 문서저장과정에서 확장자(*.html 또는 *htm)를 붙여 주어야 합니다. HTML 문서에서 사용하는 명령어를 태그(teg)라고 하며, 명령을 좀 더 구체화하려면 태그 안에 추가하는 부명령어를 속성(attribute)하고 합니다. 문자 서식을 저장하는 태그로는 <h>...</h>와 <font>...</font> 등이 있습니다. 문단 서식을 저장하는 태그로는 <br>와 <p>...</p>, <center>...</center> 등이 있습니다. 문서속성을 저장하려면, <body> 태그 안에 text, bgcolor, background 등의 속성을 사용해야 합니다.

3차 홈페이지 제작 과정 개체 삽입하기 강사: 정희영

개체 삽입하기 개체의 위치값 지정하기 이미지 삽입하기 개체 삽입하기

1. 개체의 위치값 지정하기 절대번지 작업 문서가 저장될 서버를 기준으로 개체가 서버 내부에 존재한다면 상대번지로 위치 경로를 지정하고, 외부 서버에 존재한다면 절대번지로 위치 경로를 지정합니다. 절대번지로 위치 경로를 지정할 때는 루트(root)부터 파일형식까지 개체의 위치와 관련된 모든 정보를 나열해야 합니다. 프로토콜://도메인네임/디렉토리1/++＋/디렉토리n/파일이름.확장자

1. 개체의 위치값 지정하기 상대번지 작업 문서가 저장될 서버를 기준으로 개체가 서버 내부에 존재한다면 상대번지로 위치를 지정해야 합니다. 상대번지로 위치 경로를 지정할 때는 작업 문서와 같은 위치 정보는 생략하고 다른 위치 정보만 표시합니다. 같은 폴더인 경우 : 파일이름.확장자 abc.gif 하위 폴더인 경우 : 하위폴더 명/파일이름.확장자 img/abc.gif 상위 폴더인 경우 : ../파일이름.확장자 /abc.gif

<img src=“그림의 위치값”>
2. 이미지 삽입하기 이미지 삽입하기 <img> 태그 단독으로 사용 src 속성으로 삽입할 그림 지정 이미지 파일로는 GIF, JPG, PNG 등 사용 <img src=“그림의 위치값”>

<img src=“그림의 위치값” width=“가로폭” height=“세로폭”>
2. 이미지 삽입하기 이미지 크기 조절하기 Width, height 속성 사용 속성값은 픽셀(pixel)이나 퍼센트(%) 단위의 숫자 지정 <img src=“그림의 위치값” width=“가로폭” height=“세로폭”>

<img src=“그림의 위치값” align=“정렬방식”
2. 이미지 삽입하기 이미지 정렬방식 지정하기 Align 속성 사용 속성값은 left, right, top, middle, bottom 사용 <img src=“그림의 위치값” align=“정렬방식”

<img src=“그림의 위치값” border=“테두리굵기”
2. 이미지 삽입하기 이미지테두리 지정하기 border 속성 사용 속성값은 픽셀(pixel) 단위의 숫자 사용 <img src=“그림의 위치값” border=“테두리굵기”

3. 개체 삽입하기 사운드 삽입하기 사운드 파일로 MIDI, RA, WAV 등 사용
Loop=“infinite” 으로 지정하면 무한대 반복실행 Autostart=“true” 로 지정하면 자동실행 <bgsound src=“사운드파일의 위치” loop=“반복횟수” autostart=“true/false”>

3. 개체 삽입하기 동영상 삽입하기 동영상 파일로 avi, mov, asf 등 사용
플러그인(plug=in) 프로그램 설치되어야 실행 <enbed src=“동영상파일의 위치” loop=“반복횟수” autostart=“true/false”> </enbed>

3. 개체 삽입하기 다른 문서 삽입하기 HTML문서 안에 또 다른 HTML문서를 보여주는 것이다. Src 속성 사용 frameborda 테두리를 지정할 것인지 선택하는 것이다. scrolling은 스크롤 막대를 만들 것인지 정하는 것이다. <iframe src=“문서의 위치값” width=“가로폭” hight=“세로폭” frameborda=“yes/no” scrolling=“auto/no”> </iframe>

학습 정리 작업 문서가 저장될 서버를 기준으로 개체가 서버 내부에 존재한다면 상대번지(relative path)로 위치 경로를 지정하고, 외부 서버에 존재한다면 절대번지(absolute path)로 위치 경로 지정합니다. 이미지를 삽입할 때는 <img> 태그를 사용하며, 태그 안에는 src, wictr, height, align 등과 같은 속성을 사용할 수 있습니다. 배경 음악을 삽입할 때는 <bgsound> 태그를 사용하며, 태그 안에는 src, loop, autostart 등을 사용할 수 있습니다. 다양한 멀티미디어 개체를 삽입할 때는 <embed>....</embed> 태그를 사용하며, 태그 안에는 src, loop, autostart 등을 사용할 수 있습니다. HTML문서 안에 또 다른 문서를 삽입할 때는 <frame>….</frame> 태그를 사용하며, 태그 안에는 src, width, height, frameborder, scrolling 등과 같은 속성을 사용할 수 있습니다.

4차 홈페이지 제작 과정 표 삽입 및 편집 강사: 정희영

표 삽입 및 편집 표 삽입하기 표 편집하기 셀 편집하기

1. 표 삽입하기 표 삽입하기 표의 시작과 끝 표시: <table>...</table> 태그
행 표시: <tr>...</tr> 태그 셀 표시: <td>...</td> 태그 표의 태두리 선 표시: <table> 태그 안에 border 속성 사용 속성값으로 픽셀(pixel) 단위의 숫자 입력 <table border=“선굵기” > <tr> <td>표현내용</td> </tr> </table>

1. 표 삽입하기 표 크기 지정하기 width와 height 속성 사용
속성값으로 픽셀(pixel)이나 퍼센트(%) 단위의 숫자 입력 <table border=“선굵기” width=“가로푝 height=“세로폭”> <tr> <td>표현내용</td> </tr> </table>

1. 표 삽입하기 안보이는 표 만들기 border 속성값을 없애거나 0으로 지정 <table border=0>
<tr> <td>표현내용</td> </tr> </table>

2. 표 편집하기 표 배경색 지정하기 bgcolor 속성 사용 속성값으로는 색상이름이나 색상코드 사용
<table border=“선굵기” bgcolor=“색상값”> <tr> <td>표현내용</td> </tr> </table>

2. 표 편집하기 표 배경그림 지정하기 Background 속성 사용 속성값으로 배경그림의 위치 경로 지정
<table border=“선굵기” background=“그림의 위치값”> <tr> <td>표현내용</td> </tr> </table>

2. 표 편집하기 정렬방식 지정하기 align 속성 사용 속성값으로 left, center, right 사용
<table border=“선굵기” align=”정렬방식”> <tr> <td>표현내용</td> </tr> </table>

2. 표 편집하기 여백 지정하기 Cellpadding, cellspacing 속성 사용
속성값으로 픽셀(pixel) 단위의 숫자 사용 Cellpadding는 셀과 데이터간의 간격 Cellspacing는 셀과 <table border=“선굵기” cellpadding=“숫자” cellspacing=“숫자”> <tr> <td>표현내용</td> </tr> </table>

3. 셀 편집하기 제목 셀로 지정하기 <th>...</th> 태그 사용
셀 안의 데이터 가운데 정렬, 글자모양 굵게 표시 <table border=“선굵기”> <tr> <th>표현내용</th> </tr> </table>

3. 셀 편집하기 셀의 배경색 지정하기 bgcolor 속성사용 속성값으로는 색상이름이나 색상코드 사용
<tr bgcolor=“색상값”> <td bgcolor=“색상값”>표현내용</td> </tr>

3. 셀 편집하기 셀의 배경그림 지정하기 Background 속성 사용 속성값으로 배경그림의 위치 경로 지정
배경그림의 적용범위에 때라 <tr>이나 <td> 안에 사용 <tr backgroudn=“그림의 위치값”> <td bgcolor=“그림의 위치값”>표현내용</td> </tr>

3. 셀 편집하기 정렬방식 지정하기 Align, valign 속성 사용 Align은 데이터의 수평방향 정렬방식 지정
속성값으로 align=“left/center/right” vlign=“top/middle/bottom” 사용 <tr> <td align=“수평정렬방식” valign=“수직정렬방식”>표현내용</td> </tr>

3. 셀 편집하기 셀 합치기 셀 합치기에 결과를 얻는 확장 속성인 colspan, rowspan 사용
속성값으로 확장되어 셀 합치기 되는 셀의 개수 <tr> <td colspan=“셀의 개수” rowspan=“셀의 개수”>표현내용</td> </tr>

3. 셀 편집하기 셀 크기 지정하기 width, height 속성 사용 속성값으로 픽셀이나 퍼센트 단위의 숫자 입력
<tr width=“가로폭” height”세로폭”> <td width=“가로폭” height”세로폭”>표현내용</td> </tr>

학습 정리 HTML문서에서 표는 문자나 숫자를 선택하여 나열하는 용도 이외에서 문서의 레이아웃을 다양하게 구현할 때 사용합니다. 문서에 표를 삽입하려면 표의 시작과 끝을 구분하는 <table>...</table> 태그와 행을 구분하는 <tr>...</tr> 태그와 셀을 표시하는 <td>...</td> 태그를 사용해야 합니다. <table> 태그 안에는 표의 태두리 선을 나타내기 위해 기본적으로 border 속성을 사용합니다. 표를 편집할 때에 <table> 태그 안에 border, background, align, cellpadding, cellspacing 등의 속성을 사용합니다. 셀을 편집할 때에는 <tr>이나 <td>, <th> 태그 안에 bgcolor, background, align, valign, colspan, rowspan 등의 속성을 사용합니다.

5차 홈페이지 제작 과정 프레임과 하이퍼링크 강사: 정희영

프레임과 하이퍼링크 프레임 셋과 프레임 하이퍼링크

1. 프레임 셋과 프레임 프레임 셋(frameset) 이해하기 <frameset> <frame>
cols, rows, border 속성 사용 cols(열 방향)와 rows (행 방향) 는 분할하는 방향과 크기를 지정하는 속성, border는 경계선 두께를 지정하는 속성 방문자의 웹브라우저 환경 고려로 <noframes>…</noframes> 태그 사용 <frameset>...</frameset> 태그는 영역을 나누고 크기를 조절하는 기능을 한다 <frame> 태그는 나누어진 영역의 이름, 표시될 내용을 보여주는 태그이다. <frameset> <frame> </frameset> 20% 80% 100픽셀 나머지 120 필셀 나머지 80필셀

1. 프레임 셋과 프레임 프레임(frame) 이해하기 Src, rome, scrolling, noresize 속성 사용
Name 속성은 프레임 이름을 제작자가 임의로 정의 Scrolling 속성은 프레임에 스크롤 막대 표시여부 지정 Noresize 속성은 프레임 크기 고정 <frame src=“파일위치값” name=“사용자정의” scrolling=”auto” noresize>

1. 프레임 셋과 프레임 프레임 셋 문서 만들기 내용 문서파일 미리 작성해 두어야 함
프레임 셋 문서에는 <body>…</body> 태그 사용 금지

2. 하이퍼링크 하이퍼링크(Hyperlink) 이해하기 <a>...</a> 태그 사용
Href 속성은 연결 대상 지정, target 속성은 보여주는 방법 지정 연결대상: 웹사이트, 웹문서, 문서 내의 특정부분, 이매일주소(mailto:이매일주소), 일부자료파일 보여주는 방법: _blank(새창), _top(현재창), _self(현재영역), _parent(상위영역), 특정프레임(에서 보여줌) <a href=“연결대상” target=“보여주는 방법”> 링크가 설정되는 내용 </a>

2. 하이퍼링크 웹사이트 연결하기 Href 속성값으로 웹사이트의 주소를 절대번지 형식으로 입력
<a href=“프로토콜://도메인네임/디렉토리1/.../디렉토리n/파일명” target=“보여주는 방법”> 링크가 설정되는 내용 </a>

2. 하이퍼링크 웹문서 연결하기 href 속성값으로 웹문서의 위치 경로 지정
웹문서가 같은 서버에 있을 때는 상대번지로 하고, 다른 서버에 있을 때는 절대번지로 한다. 상대번지: ①같은 폴더: 파일명 ②하위폴더: 하위폴더/파일명 절대번지: 프로토콜://도메인네임/디렉토리1/.../디렉토리n/파일명 <a href=“웹문서의 위치값” target=“보여주는 방법”> 링크가 설정되는 내용 </a>

2. 하이퍼링크 문서 내의 특정부분 연결하기 1단계:영역이름 정의하기 2단계: 하이퍼링크 설정하기
<a name=“영역이름”> 영역의 내용 <a href=“#영역이름” > 링크가 설정되는 내용 </a>

2. 하이퍼링크 메일 수신 링크 만들기 메일 수신 링크: 메일을 이용하여 방문자가 문의사항이나 불편사항 등을 홈페이지 관리자에게 전달할 수 있도록 하이퍼링크를 설정한 이미지나 텍스트 href 속성값으로 프로토콜인 mailto의 구분자인 콜론(:)에 이어 관리자의 이메일 주소 입력 <a href=“mailto:받는 사람의 이메일 주소” > 링크가 설정되는 내용 </a>

2. 하이퍼링크 일반 자료 파일 연결하기 일반 자료 파일: HWP, XLS, PPT, ZIP, EXE 등등
href 속성값으로 자료 파일의 위치 경로 지정 다운로드 형태로 자료 제공 <a href=“자료 파일의 위치값” > 링크가 설정되는 내용 </a>

학습 정리 화면을 두 개 이상의 영역으로 분할할 때에는 <frameset>...</frameset> 태그와 <frame> 태그를 사용합니다. <frameset>...</frameset> 태그는 화면을 분할하는 방향이나 크기 등의 화면 구조에 대해서 정의하고, <frame> 태그는 나누어진 영역의 이름이나 내용파일 등을 지정합니다. 두 개의 영역으로 구성된 한 화면은 세 개의 파일로 구성됩니다. 이는 화면을 분할하는 방향이나 크리 등을 정의 한 프레임셋 파일 한 개와 각각의 영역에서 보여주는 내용파일 두 개를 말한 것입니다. <frameset> 태그 안에는 cols, rows, border 등의 속성을 사용할 수 있고, <frame> 태그 안에서는 src, name, scrolling, noresize 등의 속성을 사용할 수 있습니다. 하이퍼링크(Hyperlink)는 관련성 있는 정보를 연결하는 개념입니다. 하이퍼링크를 설정하려면 <a>...</a> 태그를 사용해야 합니다. <a> 태그 안에는 연결대상을 지정하기 위해 href 연결대상을 보여주는 방법을 지정하기 위해 target 속성을 사용할 수 있습니다. href 속성값으로 웹사이트, 웹문서, 문서 내의 특정부분, 이매일주소, 일부자료파일 등을 설정할 수 있고 target 속성값으로는 _blank, _top, _self, _parent, 특정프레임 등을 지정할 수 있습니다.

6차 홈페이지 제작 과정 재미있는 태그 익히기 강사: 정희영

재미있는 태그 익히기 주석태그 살펴보기 <meta>태그로 문서정보 정의하기
<marquee>태그로 움직임 설정하기 특수문자 표시하기

1. 주석태그 살펴보기 주석태그 이해하기 <!—와--> 태그 사용
본인이나 타인이 작성한 소스를 이해하는데 도움을 줌 본문에 영향주지 않음 웹 브라우저를 통해서는 볼 수 없으며 소스 코드를 볼 때만 주석 내용 확인 가능 주석 태그는 한 줄 단위로 처리 여러 줄의 내용은 각 줄마다 주석 태그를 사용해야 함

2. <meta>태그로 문서정보 정의하기
<head>...</head> 태그 사이에 사용 </meta> 태그없이 단독으로 사용 문서에 관한 정보를 서버와 클라이언트에 제공 로봇검색 방식의 엔진에 정보 제공 http-equiv, content, name 속성 사용 http-equiv: HTTP방식으로 전송할 정보 타입 지정 content 속성: 정보의 내용 입력 name 속성: 정보의 이름 지정 <meta http-equiv=“항목명” content=“정보값” name=“정보이름”>

자동으로 움직이는 웹페이지 만들기 일정 시간이 지나면 특정 페이지를 자동으로 읽어 들이는 설정 http-equiv=“refresh” 는 다시 읽어 들이는 정보 타입 지정 content=“시간” 은 현제 문서를 초 단위의 시간마다 다시 읽어 들임 content=“시간;url=이동위치” 는 초 단위늬 시간이 지나면 이동위치의 문서를 읽어 들임. <meta http-equiv=“refresh” content=“시간”> <meta http-equiv=“refresh” content=“시간;url=이동위치”>

컨텐츠 정보 정의하기 <meta name=“description” contint=“요약설명문”> <meta name=“keywords” content=“키워드1,키워드2,...,키워드n”> <meta http=equiv=“content-type” content=“text/html;charset=euc-kr”>

3. <marquee>태그로 움직임 설정하기
텍스트나 이미지에 운동성을 설정하는 태그 <marquee> 움직임이 설정되는 내용 </marquee>

움직임 방향과 영역의 크기 지정하기 direction 속성: 움직이는 방향지정 direction 속성값으로 up, down, left, right지정 width, height 속성: 움직이는 영역의 크기 지정 width, height 속성값으로 픽셀이나 퍼센트 단위의 숫자 <marquee direction=“움직이는 방향” width=“가로폭” height=“세로폭”> 움직임이 설정되는 내용 </marquee>ㅊ

움직임 속도 제어하기 scrollamount 속성: 한 번에 움직이는 폭 지정 scrollamount 속성값은 픽셀 단위의 숫자로 지정, 숫자가 커지면 커질수록 움직이는 속도 빨라짐 scrolldelay 속성: 움직인 후에 머무는 시간 지정 scrolldelay 속성값으로 1/100초 단위의 숫자로 지정, 숫자가 커지면 커질수록 움직이는 속도 느려짐 <marquee scrollamount=“거리” scrolldelay=“시간”> 움직임이 설정되는 내용 </marquee>ㅊ

움직임 모양 지정하기 behavior 속성 사용 속성값으로 slide, scroll, alternate 사용 behavior-slide: 자연스럽게 흘러 개체가 영역 끝부분에 닿으면 멈춤 behavior-scroll: 개체의 앞부분이 화면 끝에 닿는 순간 화면에서 개체가 사라지고 다시 반대편에서 개체가 흘러나옴 behavior-alternate: 개체의 앞부분이 화면 끝에 닿는 순간 움직이는 방향이 바뀌어 흘러감 <marquee behavior=“움직이는 모양”> 움직임이 설정되는 내용 </marquee>ㅊ

배경색 지정하기 bgcolor 속성 사용 속성값으로 색상이름이나 색상코드 사용 <marquee bgcolor=“색상값”> 움직임이 설정되는 내용 </marquee>ㅊ

4. 특수문자 표시하기 특수문자 삽입 HTML 코드로 삽입 윈도우 특수문 삽입 특수문자 소스코드 “ &quou; "
< < &60; & & & > > > 공백 ⓒ © ©

학습 정리 주석 태그를 사용하여 참고할 내용이나 부연 설명 등의 주석 문을 설정해두면 소스코드의 내용을 쉽게 이해할 수 있습니다. 주석 태그는 소스 코드에만 표시되며 웹브라우저에는 표시되지 않습니다. <meta>태그를 사용하면 문서의 주제 문이나 키워드, 재전송 시간이나 대상 등의 기본적인 정보를 정의할 수 있습니다. <marquee>…</marquee> 태그를 사용하면 텍스트나 이미지에 움직임을 설정할 수 있습니다. <marquee> 태그 안에는 width, height, direction, behavior, scrollamount, scrolldelay, bgcolor 등의 속성을 사용할 수 있습니다. HTML 문서에 특수문자를 표시하는 방법은 두 가지입니다. 하나는 HTML 문서에서 제공하는 특수문자 코드를 사용하는 방법이고 다른 하나는 윈도우에서 제공하는 특수문자를 입력하는 방법입니다.

7차 홈페이지 제작 과정 인터넷에 홈페이지 올리기 강사: 정희영

인터넷에 홈페이지 올리기 웹브라우저에서 출판하기 AL_FTP에서 출판하기

1. 웹브라우저에서 출판하기 웹브라우저에서 FTP 서버에 접속하기 공개형: 예)ftp://ftp.microsoft.com
배공개형: ID와 PS 필요(드림위즈) ftp://ftp 서버의 도매인 네임 서버의 도매인 네임 서버의 도매인 네임

1. 웹브라우저에서 출판하기 FTP 서버에 데이터 전송하기 업로드(Up-lood)하기 다운로드(Down-lood)하기
클라이언트 창에서 서버 창 쪽으로 드래그 다운로드(Down-lood)하기 서버 창에서 [폴더에 복사] 단축메뉴 사용

2. AL_FTP에서 출판하기 AL_FTP 설치하기 공개자료실에서 프로그램 구하기 프로그램 설치하기
에서 다운로드 프로그램 설치하기 설치파일 (alftp 311.exe) 실행

2. AL_FTP에서 출판하기 AL_FTP에서 FTP 서버에 접속하기 접속할 서버 정보 설정하기 서버에 접속하기
‘사이트 맵’에 등록 서버에 접속하기

2. AL_FTP에서 출판하기 FTP 서버에 데이터 전송하기 서버로 업로드하기 서버에서 다운로드하기

학습 정리 제작한 홈페이지를 인터넷에 공개하려면 홈페이지 구성 파일로 서버에 업로드 해야 합니다.
파일의 형태로 데이터를 송수신하는 FTP 서버는 누구나 이용할 수 있는 공개형 FTP 서버와 서버 이용 허가를 받은 사람들만 사용할 수 있는 비공개형 FTP 서버가 있습니다. 우리가 사용하는 드림위즈 서버는 비공개형 FTP 서버입니다. 홈페이지를 서버에 업로드하는 방법은 웹브라우저를 이용하는 방법과 AL_FTP와 같은 전용 프로그램을 사용하는 방법, 두 가지가 있습니다. 웹브라우저를 이용하여 서버에 접속할 때에는 서버주소를 입력해야 합니다. 전용 프로그램을 사용하여 서버에 접속할 때에는 FTP 서버 주소나 아이디, 비밀번호 등 서버에 관한 정보를 설정한 다음 접속을 시도해야 한다. 서버 정보는 1회 설정 후에 계속적으로 사용할 수 있습니다.

8차 홈페이지 제작 과정 나모웹에디터 소개하기 강사: 정희영

나모 웹에디터 소개하기 나모 웹에디터 설치하기 팻치 파일로 업그레이드하기 나모 웹에디터 둘러보기

1. 나모 웹에디터 설치하기 나모 웹에디터의 특징 한글을 완벽하게 지원 우지윅(WYSIWYG) 방식의 작업 환경
초보자와 전문가에게 모두 적합한 환경 제공 편리한 설치 환경 제공

2. 팻치 파일로 업그레이드하기 팻치 파일 다운로드하기 팻치 파일 설치하기
나모인터랙터사의 홈페이지( 다운로드 정품 설치자만 다운로드 가능 팻치 파일 설치하기 WE51_50Patch_magic....exe 파일 설치 여부 확인: [도움말]-[나모 웹에디터 정보] 메뉴

3. 나모 웹에디터 둘러보기 화면 구성 살펴보기 제목표시줄: 프로그램의 이름과 현재 편집중인 문서의 이름
제목표시줄: 프로그램의 이름과 현재 편집중인 문서의 이름 메뉴표시줄: 모든 기능이 체계적으로 정리 되어 있음 기본도구 막대: 파일관리를 위한 기 본적인 아이콘 서식도구막대: 문서를 꾸미는 서식 아이콘으로 구성 문서 탭: 열어 놓은 문서를 보여주며 해당 문서를 클릭하면 해당 내용을 보여 줌 수직수평이동 줄: 문서의 내용이 많으 면 생성되어 이동하며 볼 수 있게 함 상황선: 개체나 하이퍼링크의 정보를 보여줌 편집 탭: 작업영역 HTML탭: 편집 탭의 내용을 소스코드로 보여줌. 미리보기 탭: 웹브라우저에서 보는 것과 같이 보여줌

3. 나모 웹에디터 둘러보기 편집 화면 설정하기 부호 보이기/감추기: [보기]-[부호]-[문단부호,빈칸,표]
그림 보이기/감추기: [보기]-[그림]-[그림메뉴] 문서탭 설정하기: [보기]-[도구막대]-[문서탭] 상황선 설정하기: [보기]-[도구막대]-[상황선]

3. 나모 웹에디터 둘러보기 편집 도구 설정하기 눈금자 설정하기: [보기]-[눈금자] 그리드 설정하기: [보기]-[그리드]
가이드 설정하기: [보기]-[가이드]

3. 나모 웹에디터 둘러보기 도구막대 관리하기 도구막대 보이기/감추기: [보기]-[도구막대]
도구막대 이동하기: 마우스로 드래그

학습 정리 나모 웹에디터를 설치할 때에는 [지금설치]를 선택하여 표준 설치를 하며, ‘클립아트 설치’ 옵션을 선택합니다 설치가 완료되면 재부팅 하여 안정된 시스템 환경을 유지하고 나모 웹에디터를 실행시켜 이름, 소속, 일련번호, CD키 등의 사용자 정보를 등록합니다. 나모 웹에디터를 업그레이드해주는 팻치 파일은 나모 홈페이지에서 다운로드 해야 하며, 팻치 파일을 설치한 후에는 [나모 웹에디터 정보] 창에서 업그레이드가 제대로 되었는지를 확인합니다. 나모 웹에디터는 제목표시줄, 메뉴표시줄, 기본 도구막대, 서식 도구막대, 문서 탭, 이동줄, 상황선, 편집영역, HTML 영역, 미리보기 영역으로 구성되어 있습니다. 편집화면이나 편집도구, 도구막대 등은 [보기]메뉴에서 일괄적으로 관리할 수 있으며, 이를 이용하여 기본적인 작업 환경을 사용자에게 적합하도록 바꿀수 있습니다.

9차 홈페이지 제작 과정 강사: 정희영

단숨에 홈페이지 만들기 사이트 마법사로 웹사이트 만들기 알맞은 내용으로 꾸미기 인터넷에 출판하기

1. 사이트 마법사로 웹사이트 만들기 사이트 마법사 소개받기
템플릿 방식으로 웹사이트의 주제, 사이트 구조, 기본 문서 모양을 제공 내용과 그림 등의 기본 정보만 입력하면 홈페이지 완성 사이트의 구조나 구성 파일 변경 가능 네비게이션 바가 삽입되어 웹사이트의 메뉴 자동 생성

1. 사이트 마법사로 웹사이트 만들기 사이트 마법사로 홈페이지 만들기 사이트 마법사로 웹사이트 만드는 과정
구 조: 사이트의 구조를 결정합니다. 테 마: 테마를 선택합니다. 정 보: 사이트 정보를 입력합니다. 출판하기: 출판정보를 지정합니다.

2. 알맞은 내용으로 꾸미기 파일 관리하기 새 문서 열기: , [파일]-[새 글] 기존 문서 열기: , [파일]-[열기]
새 문서 열기: , [파일]-[새 글] 기존 문서 열기: , [파일]-[열기] 문서 저장하기: , [파일]-[저장하기] 문서 닫기: [파일]-[닫기], [닫기] 단축메뉴

2. 알맞은 내용으로 꾸미기 이미지 삽입하기 클립아트 삽입하기 일반 그림 파일 삽입하기

2. 알맞은 내용으로 꾸미기 내용 입력하기 홈페이지 제목 수정하기: 영역에서 더블클릭
내용 입력하기: ‘내용을 넣으십시오’ 메시지 영역에 입력 불필요한 구성요소 삭제하기: <Delete>키

3. 인터넷에 출판하기 드림위즈 서버에 올리기 [파일]-[출판하기]-[출판하기] 메뉴 이용
site.wej=업로드 목록에서 제외 site.wej=사이트 관리 파일

학습 정리 사이트 마법사를 이용하면 초보자라도 빠르고 간편하게 홈페이지를 만들 수 있습니다. 사이트마법사에서는 주제에 따라 다양한 구조를 제공하며, 구조는 이용자가 임으로 변경할 수 있습니다 뿐만 아니라 태마를 선택하여 홈페이지의 구성요소를 일괄적으로 만들 수 있고, 자주 사용하는 FTP 서버 목록이 제공되어 출판정보를 쉽게 설정할 수 있습니다. 새로운 문서를 열 때는 [파일]-[새 글]메뉴를 이용하고, 기존 문서를 불러올 때는 [파일]-[열기] 메뉴를 이용합니다. 편집한 후에 문서를 저장할 때는 [파일]-[저장하기/모두저장하기] 메뉴를 이용하고, 문서를 닫을 때에는 [파일]-[닫기/모두 닫기] 메뉴를 이용합니다. 이미지 등의 개체를 삽입한 문서를 저장하면 [삽입한 파일 복사하기] 창이 나타나는데, 이것은 개체파일의 저장위치를 확인하는 창입니다. 개체파일의 저장위치를 정확하게 지정해 주어야 하며, 별다른 위치 지정이 없을 때에는 웹문서와 같은 폴더에 자동으로 복사하여 저장합니다. 사이트마법사를 이용해서 만든 홈페이지를 서버에 업로드 할 때는 site.wej파일을 제외합니다. site.wej 파일은 사이트관리자에서 인식하는 파일로 파일관리를 위해 생성된 파일입니다 이 파일은 서버의 정상적인 운영을 방해하여 인터넷에서 홈페이지가 제대로 개시되지 않을 수도 있습니다.

10차 홈페이지 제작 과정 사이트 관리자 다루기 강사: 정희영

사이트 관리자 다루기 스토리보드 만들기(2) 사이트관리자 다루기

1. 스토리보드 만들기(2) 페이지 레이아웃 정하기(1)~(4) 동영상 보기

1. 스토리보드 만들기(2) 저장 폴더 만들기 Hompag 03 폴더를 만들고 안에는 ‘etc’폴더와 ’img’폴더를 만든다.

2. 사이트관리자 다루기 사이트 관리자 이해하기(1) 사이트 관리자에서 할 수 있는 작업 사이트 구조 정의 링크 검사
지능적 출판 지능적 파일 관리 손쉬운 갱신 내비게이션바 자동생성

2. 사이트관리자 다루기 사이트 관리자 이해하기(2) 나모 웹에디터에서의 웹사이트 구축과정
새 사이트 만들기 (site.wej 파일 생성) 사이트 내의 문서 작성 (html 문서작성) 사이트 구조정의 (사이트 관리자의 사이트 탭) 사이트 구성요소 삽입 (내비게이션바 등등) 사이트 저장/출판 (사이트관리자 출판하기 탭)

2. 사이트관리자 다루기 사이트 다루기 새 사이트 만들기: [파일]-[사이트]-[사이트] 메뉴
사이트 닫기: [사이트]-[닫기] 메뉴 기존 문서를 사이트로 만들기 : [파일]-[사이트]-[새 사이트] 메뉴 사이트 열기:[파일]-[사이트]-[사이트 열기] 메뉴

2. 사이트관리자 다루기 사이트 관리하기 사이트에 새 폴더 만들기 사이트에 새 문서 만들기
사이트에서 문서 삭제하기: <Delete>키 사이트 이름 바꾸기: [사이트]-[등록정보] 메뉴 문서 이름 바꾸기: F2 최신 정보로 고치기: [보기]-[최신정보로 고치기]메뉴

2. 사이트관리자 다루기 사이트 구조 관리하기 웹 브라우저로 문서 확인하기 : [보기]-[인터넷 익스플로러로 보기 / 넷스케이프로 보기] 내비게이션 바 세로 고치기 : [보기]-[내비게이션 바 세로 고치기] 문서에 내비게이션 바 삽입하기 : [삽입]-[사이트 구성요소]-[내비게이션 바] 창 최대화하기: [보기]-[최대화] 링크 확인하기: [보고서] 탭에서 [깨진 링크] 최신버전(2006): [도구]-[깨진 링크] 사이트 보고서 만들기:[사이트]-[보고서 만들기]

학습 정리 나모 웹에디터에서 ‘사이트’는 복잡한 사이트를 만들 경우, 문서가 늘어가면서 문서 사이의 깨진 링크나 이전에 사용했지만 지금은 사용하지 않는 웹문서 등을 일괄적으로 관리할 수 있는 기능을 말합니다. 사이트 관리자를 이용하면 site.wej 파일이 생성되어, 파일을 일괄적으로 관리할 수 있습니다. 나모 웹에디터에서 새 사이트를 만드는 과정은 ①먼저 새 사이트를 만들어서 site.wej 파일을 생성시키고, ②사이트 내에 문서를 작성합니다, ③이어서, 사이트의 구조를 만든 다음, ④사이트의 구성요소를 삽입합니다. ⑤끝으로, 사이트를 저장한 다음 출판합니다.

11차 홈페이지 제작 과정 입력하고 문서 꾸미기 강사: 정희영

입력하고 문서 꾸미기 다양하게 입력하기 문서 꾸미기

1. 다양하게 입력하기 줄 나누기 행 나누기: Shift>-<Enter> ☞ <BR>
문단 나누기: <Enter> ☞ <P>

1. 다양하게 입력하기 특수문자 입력하기 [삽입]-[기호] 메뉴 사용 한자 입력하기 윈도우에서 제공하는 한자 사용

1. 다양하게 입력하기 목록 나열하기 삽입: 아이콘 사용 수정: [서식]-[문단] 메뉴 사용 ☞ 최신: [서식]-[목록]
삽입: 아이콘 사용 수정: [서식]-[문단] 메뉴 사용 ☞ 최신: [서식]-[목록] 분리/연결: [서식]-[목록 분리하기], [목록 연결하기]

1. 다양하게 입력하기 수평선 삽입하기 삽입: [삽입]-[수평선] 메뉴 사용
편집: [서식]-[수평선 속성] 메뉴 사용. 더블클릭

2. 문서 꾸미기 글자 모양내기 글꼴과 크기 지정하기 : [글꼴 지정], [크기 지정] 아이콘 사용
글꼴과 크기 지정하기 : [글꼴 지정], [크기 지정] 아이콘 사용 글자 색과 글자 배경색 지정하기 : [글자 색], [글자 배경색] 아이콘 사용 간격 지정하기: [서식]-[글꼴] 메뉴 사용 글자 서식 지우기 : [서식]-[글자]-[서식 지우기] 메뉴 사용, [서식 지우기] 아이콘 사용

2. 문서 꾸미기 문단 모양내기 정렬방식 지정하기 : 서식 도구막대에 있는 정렬 아이콘 사용
정렬방식 지정하기 : 서식 도구막대에 있는 정렬 아이콘 사용 여백 지정하기 : [서식]-[문단] 메뉴 사용 들여쓰기/네어쓰기: 서식 도구막대에 있는 정렬 아이콘 사용 줄 간격 지정하기 : [서식]-[문단] 메뉴 사용

2. 문서 꾸미기 문서 모양내기 문서 속성 지정 : [파일]-[문서 속성] 메뉴 사용
문서 속성 지정 : [파일]-[문서 속성] 메뉴 사용 문서 속성 : 배경색, 배경그림, 배경음악, 문서여백, 문서제목, 자동이동

학습 정리 단순히 문서의 모양을 위해서 행을 나눌 때에는 <Shift>키를 누른 체로 <Enter>키를 누르고, 문단을 나눌 때에는 <Enter>키를 누릅니다. 특수문자를 입력할 때에는 [삽입]-[기호] 메뉴 이용하고, 한글을 한자로 변환할 때에는 한글을 입력한 후에 <한자>키를 누릅니다. 목록을 나열할 때에는 서식 도구막대에 있는 [점으로 된 목록], [숫자로 된 목록] 아이콘을 이용합니다. 수평선을 삽입할 때에는 [삽입]-[수평선] 메뉴를 이용합니다. 글자나 문단에 기본 서식을 입력할 때에는 서식 도구막대의 아이콘을 이용하고, 보다 상세한 서식을 설정할 때에는 [서식]메뉴를 이용합니다. 배경색, 배경그림, 배경음악, 문서제목 등의 문서 전체를 꾸미는 속성은 단축메뉴인 [문서속성]에서 설정합니다.

12차 홈페이지 제작 과정 다양한 개체 삽입하기 강사: 정희영

다양한 개체 삽입하기 이미지 삽입하기 멀티미디어 개체 삽입하기 차트 삽입하기

1. 이미지 삽입하기 클립아트 삽입하기 나모 웹에디터에서 제공하는 그림 파일 아이콘 사용
[삽입한 파일 복사하기] 창에서 저장폴더 지정 주요 파일 형식: GIF, JPG, PNG

1. 이미지 삽입하기 배경 이미지 삽입하기 나모 웹에디터에서 제공하는 그림 파일 [삽입]-[그림]-[배경그림] 메뉴 사용
주요 파일 형식: GIF, JPG, PNG

1. 이미지 삽입하기 일반 이미지 삽입하기 인터넷이나 스캐너, 디지털카메라 등을 이용해서 마련한 그림 파일 아이콘 사용
[삽입한 파일 복사하기] 창에서 저장폴더 지정

1. 이미지 삽입하기 이미지에 설명 달기 이미지에 마우스를 가져갔을 때 나타나는 간단한 설명 단축메뉴 [그림속성] 사용

2. 멀티미디어 개체 삽입하기 사운드 삽입하기 나모 웹에디터 2006 주요 파일 형식: 미디(MIDI) 사용
[삽입]-[개체]-[미디] 메뉴 사용 나모 웹에디터 2006 관련 파일 형식: WAV, MP3, WMA [삽입]-[미디어]-[Windows 미디어 플레이어] 메뉴 사용

2. 멀티미디어 개체 삽입하기 동영상 삽입하기 나모 웹에디터 2006 관련 파일 형식: ASX,ASF
[삽입]-[개체]-[Windows 미디어 플레이어] 메뉴 사용 나모 웹에디터 2006 관련 파일 형식: ASX, ASF, AVI, MPG, MPEG [삽입]-[미디어]-[Windows 미디어 플레이어] 메뉴 사용

2. 멀티미디어 개체 삽입하기 플래시 삽입하기 나모 웹에디터 2006 관련 파일 형식: FLA, SWF
[삽입]- [개체]-[플래시] 메뉴 사용 나모 웹에디터 2006 관련 파일 형식: SWF [삽입]-[미디어]-[플래시] 메뉴 사용

3. 차트 삽입하기 스프레드시트 삽입하기 스프레드시트 삽입 : [삽입]-[기타]-[스프레드시트] 메뉴 사용
스프레드시트 삽입 : [삽입]-[기타]-[스프레드시트] 메뉴 사용 내용 갱신 : 단축메뉴 [스프레드시트 내용 갱신] 사용 내용 편집 : 단축메뉴 [스프레드시트 편집] 사용

3. 차트 삽입하기 차트 삽입하기 차트의 저장위치 지정 : [도구]-[프로그램 설정] 메뉴의 [문서저장] 탭 사용
차트의 저장위치 지정 : [도구]-[프로그램 설정] 메뉴의 [문서저장] 탭 사용 차트 삽입 : [삽입]-[기타]-[차트] 메뉴 사용 차트 편집 : Y축 눈금 설정 바꾸기, 범례 위치 변경하기

학습 정리 나모 웹에디터에서 이미지를 삽입하는 방법으로는 나모 웹에디터에서 제공하는 이미지인 클립아트를 삽입하는 방법과 인터넷이나 스캐너, 디지털카메라 등으로 마련한 일반 이미지 파일을 삽입하는 방법이 있습니다. 삽입할 수 있는 이미지 파일의 종류료 GIF, JPG, PNG 등이 있습니다. 웹문서에는 사운드나 동영상, 플래시와 같은 멀티미디어 개체를 삽입할 수 있고, 또 스프레드시트, 차트와 같은 데이터 관리 개체도 삽입할 수 있습니다. 웹문서에 멀티미디어 개체를 삽입할 때는 [삽입]-[개체] 메뉴를 이용하고, 데이터 관리 개체를 삽입할 때는 [삽입]-[기타] 메뉴를 이용합니다.

13차 홈페이지 제작 과정 표 삽입하고 편집하기 강사: 정희영

표 삽입하고 편집하기 웹문서에 표 만들기 표 편집하기 표 꾸미기

1. 웹문서에 표 만들기 표 만들기 아기표: 표 안에 삽입된 표 표 삽입: [표]-[새 표] 메뉴 또는 아이콘 사용
표 삽입: [표]-[새 표] 메뉴 또는 아이콘 사용 표 삭제: 표 선택 후, <Delete> 키 사용 최신버전: 표 선택 후, <Ctrl + Shift + Delete> 키 사용

1. 웹문서에 표 만들기 레이아웃 표 만들기 개체 삽입 및 배치를 자유롭게 하기 위해 표의 형식을 빌려 만든 영역 고려사항
표 영역 밖으로 개체 이동 불가 개체의 중첩 배치 불가 개체의 위치에 따라 표 크기 자동 확장 문서의 끌어당김 설정 적용 불가 레이아웃 표 삽입: [표]-[레이아웃 표]-[새 레이아웃 표] 최신버전: [표]-[레이아웃 상자]-[새 레이아웃 상자] 레이아웃 셀 삽입: [표]-[레이아웃 표]-[레이아웃 셀 그리기] 최신버전: [표]-[레이아웃 상자]-[레이아웃 셀 그리기] 레이아웃 표 삭제: 표 선택 후, <Delete> 키 사용

2. 표 편집하기 줄/칸 삽입하기와 지우기 줄/칸 삽입: [표]-[줄 삽입하기] 메뉴 사용
줄/칸 삭제: [표]-[줄 지우기] 메뉴 사용

2. 표 편집하기 셀 합치기와 나누기 셀 합치기: [표]-[셀 합치기] 메뉴 사용 셀 나누기: [표]-[셀 나누기] 메뉴 사용

2. 표 편집하기 셀 크기 정리하기 셀 크기 자유롭게 조절: 경계선에서 드래그
셀 크기 같게 조절 : [표]-[셀 크기 정리]-[셀 너배를 같게/셀 높이를 같게] 최신버전: [표]-[자동 맞추기]-[셀 너배를 같게/셀 높이를 같게]

2. 표 편집하기 캡션 달기 캡션 삽입: [표]-[캡션]-[캡션 넣기] 메뉴 사용
캡션 위치 변경: [표]-[표 속성] 메뉴 사용 캡션 삭제: [표]-[캡션]-[캡션 지우기] 메뉴 사용

3. 표 꾸미기 표 속성 설정하기 적용대상: 표 전체 표 속성 배경색, 배경그림, 정렬방식, 여백 간격, 태두리
표 속성 배경색, 배경그림, 정렬방식, 여백 간격, 태두리 표 속성 지정 [표]- [표 속성] 메뉴 사용

3. 표 꾸미기 행 속성 설정하기 적용대상: 행(가로줄) 행 속성 : 배경색, 정렬방식
아래 방법으로 안됨 행 속성 설정하기 적용대상: 행(가로줄) 행 속성 : 배경색, 정렬방식 행 속성 지정 : [표]-[가로줄 속성] 메뉴 사용 최신버전:[표]-[표 속성]-[가로줄 탭] 사용

3. 표 꾸미기 셀 속성 설정하기 적용대상: 특정 셀 셀 속성 : 배경색, 배경그림, 정렬방식, 제목 셀
셀 속성 : 배경색, 배경그림, 정렬방식, 제목 셀 셀 속성 지정 : [표]-[셀 속성] 메뉴 사용

학습 정리 웹문서에는 일반적인 표와 레이아웃 표를 만들 수 있습니다. 일반적인 표는 정보를 표시하는 틀로 사용하고, 레이아웃 표는 문서의 모양을 만드는 틀로 사용됩니다. 표를 만들 때는 [표]-[새 표] 메뉴를 이용하고, 레이아웃 표를 만들 때는 [표]-[레이아웃 표]메뉴를 이용합니다. 표를 편집할 때는 [표] 메뉴를 이용합니다. 웹문서에 표를 삽입한 후에는 속성을 설정해서 표를 꾸밉니다. 표에서 설정할 수 있는 속성은 적용 대상에 따라 달라지는데, 적용 대상이 표일 때는 배경색, 배경그림, 표 정렬방식, 셀 여백과 간격, 태두리 두께 등의 속성을 설정하고, 적용 대상이 행일 때는 배경색, 데이터 정렬방식 등을 설정하며, 특정 셀이 적용 대상일 때는 배경색, 배경그림, 데이터 정렬방식, 제목 셀 등의 속성을 설정할 수 있습니다.

스마트버튼과 플래시버튼 다루기 강사: 정희영
14차 홈페이지 제작 과정 스마트버튼과 플래시버튼 다루기 강사: 정희영

스마트버튼과 플래시버튼 다루기 스마트 버튼 다루기 플래시 버튼 다루기

1. 스마트 버튼 다루기 스마트 버튼 만들기 텍스트 이미지 제작 기능 스마트버튼 삽입: [삽입]-[스마트버튼] 메뉴 사용

1. 스마트 버튼 다루기 스마트버튼 편집하기 내용 변경: 텍스트 영역 더블클릭
색상 변경: [칠하기] 탭 사용 최신버전: [칠] 탭 사용 크기 조절 이미지 크기 조절은 [정보] 탭 사용 최신버전: [변환]탭 사용 표시 영역의 크기 조절은 아이콘 사용 스마트버튼 저장 템플릿 방식으로 스마트버튼 파일(*.tng) 저장 [편집도구]-[다른 이름으로 저장] 최신버전: [복사본저장] [내 리소스] 폴더에서 관리

1. 스마트 버튼 다루기 일반 그림으로 바꾸기 최종 편집 후에 GIF,JPG 로 변환
일반 그림으로 변환한 이후에는 편집 불가능 [그림]-[일반 그림으로 바꾸기] 단축 메뉴 사용

2. 플래시 버튼 다루기 플래시 버튼 삽입하기 벡터 방식의 이미지 사용 벡터 방식과 비트맵 방식
플래시 버튼 삽입: [삽입]-[플래시 버튼] 매뉴 사용

2. 플래시 버튼 다루기 플래시 버튼 편집하기 내용 바꾸기: [플래시 버튼 속성] 메뉴 사용
배경색 없애기: [플래시 버튼 속성] 메뉴 사용

학습 정리 나모 웹에디터에서는 텍스트 이미지를 만들 수 있는 스마트버튼과 플래시 이미지를 만들 수 있는 플래시버튼을 제공합니다. 스마트버튼을 삽입하려면 [삽입]-[스마트버튼] 메뉴를 이용하고, 플래시버튼을 삽입하려면 [삽입]-[플래시버튼] 메뉴를 이용합니다. 스마트버튼을 삽입하고 최종적인 편집을 마친 후에는 , 편집한 스마트버튼을 새로운 스마트버튼 모양(*.tng)으로 저장할 수 있습니다. 새롭게 저장한 스마트버튼은 [내 리소스] 폴더에서 확인할 수 있습니다. 스마트버튼의 작업과정은 3단계입니다. 1단계는 스마트버튼을 웹문서에 삽입하는 것이고, 2단계는 삽입한 스마트버튼을 편집하는 것이고, 3단계는 스마트버튼을 일반그림 파일로 저장하는 것입니다.

다이나믹 웹페이지 만들기(1)-스크립트 마법사 강사: 정희영
15차 홈페이지 제작 과정 다이나믹 웹페이지 만들기(1)-스크립트 마법사 강사: 정희영

다이나믹 웹페이지 만들기(1) -스크립트 마법사
다이나믹 웹페이지 만들기(1) 스크립트 마법사 스크립트 마법사 다루기

1. 스크립트 마법사 다루기 롤오버 그림 삽입하기 마우스에 반응하는 스크립트
롤오버그림: 일반적으로 보여주는 그림 마우스를 가져 갔을 때 보여주는 그림 [삽입]-[스크립트]-[스크립트마법사] 메뉴 사용 [롤오버 그림] 스크립트 사용

1. 스크립트 마법사 다루기 애니메이션 효과 설정하기 움직임을 설정하는 스크립트
[삽입]-[스크립트]-[스크립트마법사] 메뉴 사용 [애니메이션 효과] 스크립트 사용

1. 스크립트 마법사 다루기 움직이는 텍스트 만들기 텍스트가 글상자 안에서 움직이도록 하는 스크립트
[삽입]-[스크립트]-[스크립트마법사] 메뉴 사용 [움직이는 텍스트] 스크립트 사용 편집: [폼요소 속성] 메뉴 사용

1. 스크립트 마법사 다루기 흐르는 문자열 만들기 문자열이 자연스럽게 움직이는 스크립트
[삽입]-[스크립트]-[스크립트마법사] 메뉴 사용 [흐르는 내용 만들기] 스크립트 사용 작업과정: 1단계 – 레이어 만들기 2단계 – 스크립트 설정하기

1. 스크립트 마법사 다루기 떠 있는 레이어 만들기 향상 같은 위치에 떠 있는 레이어를 만드는 스크립트
[삽입]-[스크립트]-[스크립트마법사] 메뉴 사용 [떠 있는 레이어] 스크립트 사용 작업과정: 1단계 – 레이어 만들기 2단계 – 스크립트 설정하기

학습 정리 스크립트마법사는 자바스크립트를 전혀 모르는 초보자도 스크립트를 이용한 웹문서를 작성할 수 있도록 마법사 형태로 만들어 놓은 기능입니다. 웹문서에 스크립트를 설정하는 방법은 (1)스크립트마법사를 이용하는 방법과 (2)자바스크립트 소스를 직접 입력하는 방법이 있습니다. 스크립트마법사를 이용햐려면, [삽입]-[스크립트]-[스크립트마법사] 메뉴를 이용합니다.

다이나믹 웹페이지 만들기(2)-자바스크립트 소스 강사: 정희영
16차 홈페이지 제작 과정 다이나믹 웹페이지 만들기(2)-자바스크립트 소스 강사: 정희영

다이나믹 웹페이지 만들기() -자바스크립트 소스
다이나믹 웹페이지 만들기() 자바스크립트 소스 자바스크립트 소스 다루기

1. 자바스크립트 소스 다루기 공지사항 창 띄우기 작은 창을 띄우는 스크립트 긴급 사항이나 광고 등을 전달할 때 사용
[편집] 영역에서 설정 : <head>...</head> [삽입]-[스크립트]-[문서 스크립트] <body>...</body> [삽입]-[스크립트]-[본문 스크립트] [HTML] 영역 설정: 직접 입력(고딩) 작업과정: 1단계 – 공지사항 창 옵션 달기 2단계 – 공지사항 창 띄우기 1601a.txt 1601b.txt 1601c.txt

1. 자바스크립트 소스 다루기 아날로그 시계 달기 클라이언트 컴퓨터의 시간을 읽어서 보여주는 스크립트
웹문서에 벽시계와 같은 정감 있는 아날로그시계를 설치할 때 사용

1. 자바스크립트 소스 다루기 상태표시줄에 메시지 띄우기 상태표시줄에 텍스트 날아다니는 스크립트

1. 자바스크립트 소스 다루기 색색으로 터지는 폭죽 연출하기 폭죽처럼 원형을 이루는 개체가 이동하는 스크립트
하나의 태그 안에 여러 함수를 사용할 때는 세미콜론(;)으로 구분

학습 정리 웹문서에 스크립트를 삽입하는 방법은 스크립트마법사를 이용하는 방법과 자바스크립트 소스를 직접 입력하는 방법이 있습니다. 자바스크립트 소스를 직접 입력하려면, [삽입]-[스크립트]-[본문/문서 스크립트] 메뉴를 이용하거나 [HTML] 소스 영역에서 직접 입력해야 합니다. 자바스크립트 소스는 <head>...</head> 태그 사이와 <body> 태그 안, <body>...</body> 태그 사이에 삽입하게 됩니다. 자바스크립트 소스와 이미지 파일이 필요해야 강좌를 따라 할 수 있음.

17차 홈페이지 제작 과정 애니메이션 제작하기 강사: 정희영

애니메이션 제작하기 레이어와 타임라인 이해하기 애니메이션 만들기

1. 레이어와 타임라인 이해하기 레이어(Layer) 특징 고려사항 삽입: 아이콘이나 [삽입]-[레이어] 메뉴 사용
HTML 문서 위에 그림, 글, 표 등의 개체를 삽입할 수 있는 영역 표시 여부 지정, 자유로운 위치 지정 웹 브라우저에 따라 표시 여부, 표시 형식 결정 고려사항 레이어 내부에 레이어를 삽입한 경우 문단 중간에 레이어를 삽입한 경우 삽입: 아이콘이나 [삽입]-[레이어] 메뉴 사용

1. 레이어와 타임라인 이해하기 타임라인(Timeline) 특징 창 열기: [창]-[타임라인] 메뉴 사용
레이어의 움직임을 시간으로 제어하는 창 특정 장면에서 액션을 설정 가능 창 열기: [창]-[타임라인] 메뉴 사용

2. 애니메이션 만들기 타임라인 창 다루기 흐름선 추가하기 애니메이션의 움직임에 대한 부분적 시나리오 작성
흐름선 추가하기 애니메이션의 움직임에 대한 부분적 시나리오 작성 장면 추가하기 흐름선을 구성하는 장면(프레임) 만들기 분기점 추가하기 움직임의 변화가 생기는 지점 지정 타임라인 추가하기 애니메이션의 전체적인 움직임에 대한 시나리오 작성

2. 애니메이션 만들기 직선 애니메이션 만들기 시작위치와 마지막 위치 지정

2. 애니메이션 만들기 곡선 애니메이션 만들기 시작위치와 마지막 위치 지정 분기점 지정

2. 애니메이션 만들기 자유곡선 애니메이션 만들기 [레이어 움직임 기록] 메뉴 사용

학습 정리 레이어는 HTML 문서의 기본 편집 영역으로 부터 독립된 또 다른 편집 영역을 말하고, 타임라인은 레이어의 움직임을 시간으로 제어하는 창을 가리킵니다. 타임라인 창에서 애니메이션을 설정하려면 흐름선, 장면, 분기점, 타임라인 등을 관리할 수 있어야 합니다. 이들을 관리하려면 타임라인 창에서 마우스 오른쪽 버튼을 눌렀을 때 나타나는 단축메뉴를 이용하면 됩니다. 직선 애니메이션은 흐름선의 애니메이션에서 시작위치와 마지막 위치를 지정해 주면 됩니다. 시작 장면과 마지막 장면 사이의 중간 장면들은 자동으로 만들어집니다. 곡선 애니메이션은 직선 애니메이션에 분기점을 추가하고 분기점마다 새로운 위치를 지정해 주면 만들어집니다. 분기점은 애니메이션이 시작되거나 끝나는 장면, 혹은 방향이 바뀌는 장면을 말합니다. 자유곡선 애니메이션은 마우스를 드래그해서 만든 동선을 기록해 주는 [레이어 움직임 기록]기능을 이용하여 만듭니다.

18차 홈페이지 제작 과정 액션과 이벤트 강사: 정희영

액션과 이벤트 액션과 이벤트 이해하기 액션 사용하기

1. 액션과 이벤트 이해하기 액션(Action)
웹 문서에 특정 동작이 수행되도록 나모 웹에디터에서 미리 만들어서 제공하는 규격화된 스크립트 크로스 브라우징을 고려하여 작성된 스크립트

1. 액션과 이벤트 이해하기 이벤트(Event) 특정한 동작이 발생했다는 신호
마우스를 누르는 것, 마우스 포인터를 움직이는 것, 키보드를 누르는 것 등등 onLoad : 웹브라우저가 새 문서를 읽어 들일 때 발생하는 이벤트 onClick : 마우스를 클릭했을 때 발생하는 이벤트 onBlur : 해당 폼 필드가 비활성화 되었을 때 발생하는 이벤트 브라우저가 포커스를 읽는 순간 발생하는 이벤트

2. 액션 사용하기 액션 설정하기 강좌에서는 [창]-[액션] 메뉴 사용
‘나모웹에디터2006’에서는 [보기]-[패널]-[액션] 메뉴 사용 강의를 들으며 따라할때 참고하세요.

2. 액션 사용하기 애니메이션 제어단추 만들기 [stop], [play] 단추 제작 이벤트: onClick
액션: 타임라인 멈추기, 타임라인 실행하기

2. 액션 사용하기 타임라인 장면에 액션 넣기 타임라인의 특정장면에 액션 설정
이벤트: onClick(onMouseOut), onFrame 액션: 타임라인 멈추기, 타임라인 실행하기

2. 액션 사용하기 오른쪽 버튼 사용 금지하기 웹문서 내에서 마우스의 오른쪽 버튼 사용 금지 오른쪽 버튼 사용시, 경고 창 띄우기 이벤트: onBlur 액션: 마우스 오른쪽 클릭 제어하기

2. 액션 사용하기 페이지 인쇄하기 [print] 단추 제작 이벤트: onClick 액션: 인쇄하기

2. 액션 사용하기 윈도우 제어하기 웹 브라우저 창을 최대화 또는 이전 상태로 되돌려 주는 스크립트 – [full screen], [restore] 단추 제작 이벤트: onClick 액션: 전체 화면으로 보여주기, 윈도우 닫기

학습 정리 이벤트란 특정한 동작이 발생했다는 신호를 말합니다. 마우스 단추를 누르는 것, 마우스 포인터를 움직이는 것, 키보드를 누르는 것, 웹 브라우저가 새 문서를 읽어 들이는 것 등이 이벤트에 해당합니다. 액션이란 웹 문서에서 특정 동작이 수행되도록 나모 웹에디터에서 미리 만들어 제공하는 규격화된 스크립트를 말합니다. 액션을 사용하려면 스크립트를 직접 작성하지 않아도 다양한 동작이 수행되도록 웹 문서를 작성할 수 있습니다. 또한 모든 액션은 크로스 브라우징을 고려하여 작성되었기 때문에 인터넷 익스플로러와 넷스케이프에서 동일하게 작동합니다.

19차 홈페이지 제작 과정 프레임과 프레임셋 강사: 정희영

프레임과 프레임셋 프레임과 프레임셋 다루기 프레임과 프레임셋 저장하기 프레임 속성 지정하기

1. 프레임과 프레임셋 다루기 프레임셋 만들기 템플릿 방식의 프레임셋을 가져오거나 직접 프레임 나누기
[프레임]-[새 프레임] 메뉴 사용

1. 프레임과 프레임셋 다루기 프레임 나누기 [프레임]-[프레임 나누기]-[왼쪽/오른쪽/위쪽/아래쪽] 메뉴 사용
한번에 여러 프레임 나누기: 아이콘 사용

1. 프레임과 프레임셋 다루기 프레임 지우기 [프레임]-[프레임 지우기] 메뉴 사용
빠르게 프레임 지우기: 프레임 경계선 드래그

2. 프레임과 프레임셋 저장하기 프레임 저장하기 [저장하기] 아이콘 사용

2. 프레임과 프레임셋 저장하기 프레임셋 저장하기 [프레임]-[프레임셋 저장하기] 메뉴 사용
프레임셋에 문서 제목 지정해야 웹브라우저에 표시

3. 프레임 속성 지정하기 프레임 속성 지정하기 프레임 속성 내용문서, 프레임이름, 크기, 스크롤막대 표시, 경계선 두 께 등
프레임 속성 내용문서, 프레임이름, 크기, 스크롤막대 표시, 경계선 두 께 등 [프레임 속성] 메뉴 사용

학습 정리

20차 홈페이지 제작 과정 하이퍼링크 강사: 정희영

하이퍼링크 웹사이트 연결하기 웹문서 연결하기 문서 내의 특정부분 연결하기 메일 수신 링크 만들기 일반 자료 파일 연결하기

1. 웹사이트 연결하기 웹사이트 연결하기 연결대상(href): 웹사이트 보여주는 방법(target): 새 창
적용 예 주소: 대상 프레임: _blank 하이퍼링크 연결: 아이콘 사용 하이퍼링크 해제: 아이콘 사용

2. 웹문서 연결하기 웹문서 연결하기 연결대상(href): 웹문서 보여주는 방법(target): 특정 프레임 선수작업: 프레임 이름 정의하기 적용 예 주소: aboutme.html 대상 프레임: main

3. 문서 내의 특정부분 연결하기 웹문서 내의 특정부분 연결하기
연결대상(href): 웹문서 내의 특정부분 보여주는 방법(target): X 선수작업: 특정부분의 이름 정의하기 적용 예 책갈피: #가족소개 작업과정: 1단계 – 책갈피 만들기 단계 – 하이퍼링크 설정하기

4. 메일 수신 링크 만들기 메일 수신 링크 만들기 연결대상(href): 전자우편 주소 보여주는 방법(target): X
적용 예 주소: 메일 쓰기 상태로 메일 프로그램 실행

5. 일반 자료 파일 연결하기 일반 자료 파일 연결하기 연결대상(href): 자료 파일 보여주는 방법(target): X
적용 예 주소: atc/2001.zip 다운로드 형태로 정보 제공

학습 정리 하이퍼링크를 설정할 때는 아이콘을 사용하고, 해제할 때는 아이콘을 사용합니다.
하이퍼링크의 연결 대상으로 (1)웹사이트, (2)웹사이트를 구성하는 웹문서, (3)웹문서의 특정부분, (4)이메일 주소, (5)HWP나 XLS, PPT, ZIP 등과 같츤 일반 자료 파일 등을 설정할 수 있습니다. 연결 대상을 보여주는 대상 프레임으로 (1)새 창을 지정할 때는 _blank, (2)현제 창을 지정할 때는 _top, (3)현제 프레임을 지정할 때는 _self, (4)상위 프레임을 지정할 때는 _parent, (5)특정 프레임을 지정할 때는 프레임의 이름, 다섯 가지를 설정할 수 있습니다.

21차 홈페이지 제작 과정 스타일 시트 강사: 정희영

스타일 시트 스타일 시트 이해하기 문단 스타일 다루기 문서 스타일 다루기

1. 스타일 시트 이해하기 CSS 이해하기 HTML 문서에서 사용하기 위해 만들어진 스타일 시트의 한 종류
넷스케이프 4.0이상, 인터넷 익스플로러 3.0이상에서 지원 장점 HTML만으로 불가능한 여러가지 레이아웃 표현 가능 사용자 시스템의 영향 최소화 스타일을 외부 파일로 관리

1. 스타일 시트 이해하기 스타일 시트 사용법 여러 개의 스타일을 모아 놓은 것 인라인 스타일
<HEAD>...</HEAD> 태그 사이에 스타일 시트 표현 스타일 파일로 표현

1. 스타일 시트 이해하기 나모 웹에디터의 스타일 이해하기 문단 스타일 문서 스타일
<p> 태그 안에 인라인 스타일로 지정 [서식]-[문단 스타일] 메뉴 사용 최신버전: [서식]-[스타일 설정] 메뉴 사용 문단 단위로 적용 적용한 스타일은 반복 사용 불가 문서 스타일 <head>...</head> 태그 사이에 <style> 태그 이용 [서식]-[문서 스타일] 메뉴 사용 문서 전체에 적용 클래스로 정리해 두면 반복 사용 가능

2. 문단 스타일 다루기 문단 스타일 이해하기 [서식]-[문단 스타일] 메뉴 사용

2. 문단 스타일 다루기 문단 스타일 만들기(1) – 첫째 줄 들여쓰기 [문단]탭의 [첫 줄 들여쓰기]에서 설정

2. 문단 스타일 다루기 문단 스타일 만들기(2) – 줄간격 조절하기 [문단]탭의 [줄 높이] 조절

2. 문단 스타일 다루기 문단 스타일 만들기(3) – 태두리 지정하기 [태두리와 배경]탭의 [선 종료, 색깔] 설정

2. 문단 스타일 다루기 문단 스타일 만들기(4) – 여백 설정하기 [태두리와 배경]탭의 [여백, 안쪽여백] 설정

2. 문단 스타일 다루기 문단 스타일 만들기(5) – 스타일 속성 지우기 스타일 목록에서 선택 후 [지우기]아이콘 사용

3. 문서 스타일 다루기 문서 스타일 이해하기 문서 스타일 정의: 단추 사용 문서 스타일 편집: 단추 사용
문서 스타일 정의: 단추 사용 특정 HTML 태그에 스타일 지정 클레스나 ID로 적용 범위 지정 문서 스타일 편집: 단추 사용 스타일 저장: 단추 사용 스타일 파일 연결

3. 문서 스타일 다루기 문서스타일 만들기(1) - 하이퍼링크에 밑줄 없에기
스타일 목록 창에서 [추가]를 누른 후 <a>태그를 선택한 후 [글꼴]탭의 [꾸밈]에서 [없음] 선택

3. 문서 스타일 다루기 문서스타일 만들기(2) – 마우스에 반응하는 커서 만들기
문서스타일 만들기(2) – 마우스에 반응하는 커서 만들기 스타일 목록 창에서 [추가]를 누른 후 <a>태그를 선택하고 기타에서 [:hover]을 선택한 후 [글꼴]탭의 [꾸밈]에서 [밑줄]을 선택 후 [글자 색]을 선택 함.

3. 문서 스타일 다루기 문서스타일 만들기(3) – 배경그림 가운데 표시하기

나모웹에디터 2006의 스타일 시트 최신버전인 ‘나모 웹에디터 2006’에서 스타일 시트 설정방법은 [서식]-[스타일 설정] 메뉴를 사용한다 이전버전에서는 문단 스타일, 문서 스타일로 구분하지만 최신버전에서는 [스타일 설정]메뉴로만 되어있다. 이전버전의 메뉴 구조와 단리 [글꼴], [문단], [태두리와 배경] 탭으로 구성되어 있다.

학습 정리 나모 웹에디터는 스타일의 적용 범위에 따라 문단 스타일과 문서 스타일로 구분합니다. 문단 스타일은 <p> 태그에 인라인 스타일을 지정하는 것이고, 문서 스타일은 <HEAD> 태그 안에 <STYLE>을 이용하여 정의하는 것을 말합니다. 문단 스타일의 적용 범위는 문서의 일부 문단에 한정되고, 문서 스타일의 적용 범위는 문서 전체입니다. 문단 스타일을 지정하려면 [서식]-[문단 스타일] 메뉴를 이용하고, 문서 스타일을 지정하려면 [서식]-[문서 스타일] 메뉴를 이용합니다.

이미지 다루기(1) – 이미지 편집 강사: 정희영
22차 홈페이지 제작 과정 이미지 다루기(1) – 이미지 편집 강사: 정희영

이미지 다루기(1) – 이미지 편집 그림 효과 설정하기(1) 그림 효과 설정하기(2) 그림 속성 바꾸기

1. 그림 효과 설정하기(1) 명도 조절하기 박고 어둡기 조절 [그림]-[그림효과] 메뉴 사용

1. 그림 효과 설정하기(1) 선명도 저절하기 보다 선명하게 표현 [그림]-[그림효과] 메뉴 사용

1. 그림 효과 설정하기(1) 번짐 효과주기 보다 브두럽게 표현 [그림]-[그림효과] 메뉴 사용

1. 그림 효과 설정하기(1) 회전 효과주기 90도, 180도 또는 상하좌우 회전 [그림]-[그림효과] 메뉴 사용

1. 그림 효과 설정하기(1) 테두리 효과주기 그림 외곽에 테두리 만들기 [그림]-[그림효과] 메뉴 사용

2. 그림 효과 설정하기(2) 단추 효과주기 그림에 단추와 같은 볼륨 표현 [그림]-[그림효과] 메뉴 사용

2. 그림 효과 설정하기(2) 그림자 효과주기 그림자의 방향과 모양을 지정하여 입체감 표현 [그림]-[그림효과] 메뉴 사용

2. 그림 효과 설정하기(2) 크기 조절하기 그림의 크기 조절 [그림]-[그림효과] 메뉴 사용

2. 그림 효과 설정하기(2) 파일 형식 바꾸기 그림의 확장자 변형 [그림]-[그림 형식 변환] 메뉴 사용

2. 그림 효과 설정하기(2) 투명색으로 바꾸기 그림의 특정 색을 투명색으로 바꾸기 [그림]-[투명색으로 만들기] 메뉴 사용

3. 그림 속성 바꾸기 그림에 설명 달기 그림에 마우스를 가져갔을 때 나타나는 간단한 설명 [그림속성] 메뉴 사용

3. 그림 속성 바꾸기 그림 정렬방식 지정하기 그림에 대한 정렬방식 지정 [그림속성] 메뉴 사용

3. 그림 속성 바꾸기 그림 여백 지정하기 그림과 본문 사이의 여백 지정 [그림속성] 메뉴 사용

3. 그림 속성 바꾸기 그림 테두리 설정하기 그림 외곽에 테두리 만들기 [그림속성] 메뉴 사용

학습 정리 웹문서에 삽입한 이미지에 다양한 효과를 삽입할 때는 [그림]-[그림효과] 메뉴를 사용하고, 이미지에 대한 속성을 설정할 때는 [그림]-[그림속성] 메뉴를 사용합니다. 또 파일형식을 바꿀 때는 [그림]-[파일 형식 변환] 메뉴를 사용하고 이미지의 일부 색상을 투명색으로 바꿀 때는 [그림]-[투명색으로 만들기] 메뉴를 사용합니다. 나모 웹에디터에서 설정할 수 있는 그림효과는 명도, 선명도, 번짐, 회전, 테두리, 단추, 그림자, 크기 등입니다. 또 변경할 수 있는 그림 속성은 설명, 정렬방식, 여백, 테두리 등입니다. 메이저

이미지 다루기(2) – 포토앨범, 이미지맵 강사: 정희영
23차 홈페이지 제작 과정 이미지 다루기(2) – 포토앨범, 이미지맵 강사: 정희영

이미지 다루기(2) – 포토앨범, 이미지맵 토토앨범 만들기 이미지 맵 만들기

1. 포토앨범 만들기 포토앨범 이해하기 나모 웹에디터 4.0 버전의 ‘이미지 갤러리’ 기능 강화
여러 개의 그림 삽입 및 썸네일 자동 생성, 자동 링크 썸네일 – 원본 그림 파일 대신에 삽입하는 작은 그림

1. 포토앨범 만들기 포토앨범 환경설정하기 1단계 작업으로, 썸네임의 저장위치와 파일이름을 지정하고 캡션의 위치와 내용 등을 설정 [도구]-[포토앨범] 메뉴 사용

1. 포토앨범 만들기 포토앨범 완성하기 2단계 작업으로, 포토앨범을 사용하여 웹문서에 그림 나열
[도구]-[포토앨범] 메뉴 사용 원본파일 지정, 창의 우형과 크기, 개수, 썸네일 크기와 효과 원본이미지의 썸네일 파일 생성 원본이미지의 썸네일 링크

2. 이미지 맵 만들기 이미지맵 이해하기 그림의 각 부분에 서로 다른 하이퍼링크 설정 핫 존(Hot Zone)
그림 내에서 서로 다른 URL로 연결된 영역(부분)

2. 이미지 맵 만들기 핫 존 만들기 이미지의 일부 영역을 선택하고 하이퍼링크 설정 [그림]-[...영역 만들기] 메뉴 사용
그림 도구막대 사용

2. 이미지 맵 만들기 핫 존 수정하기 만든 핫 존의 크기와 위치 수정 그림 도구막대 사용

학습 정리 포토앨범은 웹문서에 여러 장의 그림을 삽입할 때 자동으로 썸네일 이미지를 생성하여 원본 이미지로의 링크를 만들어 줍니다. 따라서 원본 그림을 축소한 썸네일을 만들면 원본 그림을 빠른 시간 내에 확인하고 원하는 그림만을 선택해서 볼 수 있습니다. 포토앨범을 만들려면 [도구] –[포토앨범] 메뉴를 사용합니다. 포토앨범을 만들때는 1단계 작업으로 저장위치와 캡션 표시를 지정하는 환경설정을 하며,2단계작업으로 그림과 썸네일 모양 등을 마법사 창을 통해서 지정합니다. 이미지맵은 하나의 그림에 여러 개의 하이퍼링크를 지정할 수 있는 방식입니다. 일반적으로 직접 하이퍼링크를 설정하면 하나의 하이퍼링크 밖에 지정할 수 없지만, 이미지맵을 이용하면 그림의 각 영역에 여러 개의 하이퍼링크를 설정할 수 있습니다. 이때, 그림 내에 지정된 특정 영역들을 핫 존(Hot Zone)이라고 합니다. 이미지맵을 만들려면 [그림]-[...영역 만들기]메뉴를 사용합니다.

이미지 다루기(3) – 이미지 슬라이싱 강사: 정희영
24차 홈페이지 제작 과정 이미지 다루기(3) – 이미지 슬라이싱 강사: 정희영

이미지 다루기(3) – 이미지 슬라이싱 나모 그림 나누기 사용하기

1. 나모 그림 나누기 사용하기 나모 그림 나누기 이해하기 이미지 슬라이싱(image slicing)의 장점
큰 그림 전체가 아닌 작은 조각 그림이 각각 웹브라우저에 표시되므로 웹문서에 그림이 표시되는 시간이 짧다. 각 조각 영역마다 서로 다른 그림 파일 형식으로 저장할 수 있다. 조각 그림들을 표 안의 셀 배경 그림으로 삽입할 수 있다. 나누어진 그림영역이 단색일 경우에는 저장하지 않고 셀 배경색으로 대체한다. [시작]-[프로그램]-[나모웹에디터5]-[나모 그림 나누기]

1. 나모 그림 나누기 사용하기 새 파일 만들기 새 프로젝트 파일 만들기 : [파일]-[새로 만들기] 메뉴 또는 아이콘 사용
새 프로젝트 파일 만들기 : [파일]-[새로 만들기] 메뉴 또는 아이콘 사용 그림 가져오기 : [파일]-[그림 가져오기] 메뉴 또는 아이콘 사용

1. 나모 그림 나누기 사용하기 환경 설정하기 조각 그림의 저장방식 지정: [그림파일]탭 사용
자투리 영역의 처리방식 지정: [자투리 영역]탭 사용 끌어당김과 그리드 설정: [일반]탭 사용

1. 나모 그림 나누기 사용하기 그림 나누기 조각 영역 만들기 : [도구]-[나누기]메뉴 또는 아이콘 사용
조각 영역 만들기 : [도구]-[나누기]메뉴 또는 아이콘 사용 조각 영역 옮기기: 아이콘 사용 조각 영역 크기 조절하기 조각 영역 지우기 특정 조각 영역 저장방식 바꾸기

1. 나모 그림 나누기 사용하기 그림 저장하기 프로젝트 저장하기 : [파일]-[저장하기] 메뉴 사용
프로젝트 저장하기 : [파일]-[저장하기] 메뉴 사용 HTML 문서로 내보내기 : [파일]-[HTML 문서로 내보내기] 메뉴 사용 Index.html 문서에 소스 가져가기

학습 정리 나모 그림 나누기는 전문 그레픽 프로그램에서 제공하는 이미지 슬라이싱(Image Slicing) 기능을 나모 환경에서 편리하게 사용할 수 있도록 만든 독립 실행 프로그램입니다. 나모 그림 나누기를 이용해서 그림을 나누면 그림의 각 영역은 크게 조각영역과 자투리 영역으로 나눠집니다. 조각 영역은 프로젝트 창에 그림을 불러와서 그림 나누기를 했을때 분할된 그림의 영역을 말하는 것이고, 자투리 영역은 조각 영역을 제외한 부분을 말합니다. 나모 그림 나누기를 이용해서 그림을 나누는 일련의 과정은 다음과 같습니다. (1)새 프로젝트 만들기 (2)그림 가져오기 (3)기본환경 설정하기 (4)조각영역 만들기 (5)조각영역 편집하기 (6)프로젝트 파일 저장하기 (7)HTML 문서로 내보내기.

이미지 다루기(4) – 움직이는 GIF 강사: 정희영
25차 홈페이지 제작 과정 이미지 다루기(4) – 움직이는 GIF 강사: 정희영

이미지 다루기(4) – 움직이는 GIF 나모 GIF 애니메이터 사용하기

1. 나모 GIF 애니메이터 사용하기 외부 프로그램으로 등록하기 나모 GIF 애니메이터 이해하기
2개 이상의 GIF 그림 파일이 있으면 Animated GIF 제작 가능 각 프레임에 투명색이나 지연시간과 같은 다양한 효과 설정 미리 보기 화면으로 설정한 움직임 확인 외부 프로그램으로 등록하기 [도구]-[프로그램 설정] 메뉴 사용

1. 나모 GIF 애니메이터 사용하기 새 애니메이션 만들기 프레임 삽입하기: 아이콘 사용
프레임 삽입하기: 아이콘 사용 지연시간 설정하기: 속성 창의 [지연시간] 탭 사용 반복 재생 설정하기: 속성 창의 [애니메이션] 탭 사용 애니메이션 미리보기: <F5> 키 또는 아이콘 사용 애니메이션 저장하기: 아이콘 사용 특정 프레임만 저장하기: 아이콘 사용

1. 나모 GIF 애니메이터 사용하기 애니메이션 편집하기 이미지 자르기: 아이콘 사용 이미지 위치 이동하기: 아이콘 사용
이미지 자르기: 아이콘 사용 이미지 위치 이동하기: 아이콘 사용 투명색으로 지정하기: [투명색] 옵션 사용 프레임 처리방식 지정하기: [프레임 처리] 옵션 사용

학습 정리 Animated GIF 파일은 웹문서에서 움직이는 그림파일을 말합니다. Animated GIF 파일은 별도의 플러그인 프로그램이 필요하지 않습니다. 나모 GIF 애니메이터를 이용하면, 2개 이상의 GIF 그림 파일을 가지고 움직이는 GIF 파일을 만들 수 있습니다. 나모 웹에디터에서 자주 사용하는 외부 프로그램을 이용하려면 [도구]-[프로그램 설정] 메뉴를 이용하고, 등록한 외부 프로그램을 실행 시킬 때는 [도구]-[외부 프로그램] 메뉴를 이용합니다. 나모 GIF 애니메이터에서 새로운 애니메이션을 만드는 과정은 다음과 같습니다 (1)새 애니메이션 파일 만들기 (2)프레임 삽입하기 (3)지연시간과 반봅여부 설정하기 (4)프레임 편집하기 (5)미리 보기 (6)애니메이션 저장하기

26차 홈페이지 제작 과정 문서 폼 만들기 강사: 정희영

문서 폼 만들기 폼 이해하기 메일 폼 만들기

1. 폼 이해하기 폼(Form) 특징 폼 문서를 만드는 작업단계
웹 브라우저를 통해 입력 받은 정보를 웹 서버와 통신하기 위해 `사용하는 양식 방문자로부터 원하는 정보를 수집하는데 용이 연락처 정보 수집, 구매 주문, 사용자의 의견 수집, 질의 입력에 의한 웹사이트 검색 등의 웹문서에 사용 폼 문서를 만드는 작업단계 수집할 정보의 종류를 결정합니다. 수집하려는 정보에 적합한 폼 필드를 결정합니다. 문서에 폼 필드를 삽입하고 각각의 속성을 지정합니다. 폼이 독작할 수 있도록 처리방법을 설정합니다.

1. 폼 이해하기 폼 구성 요소 폼 필드: 폼을 구성하는 여러 가지 입력 양식 폼 필드의 종류 한 줄 글상자 스크롤 글상자
확인 상자 라디오 단추 펼침 목록 메뉴 누름 단추 그림 폼 숨김 필드

2. 메일 폼 만들기 폼 필드 삽입하기 한 줄 글상자 만들기: [삽입]-[폼 필드]-[한 줄 글상자]
스크롤 글상자 만들기: [삽입]-[폼 필드]-[스크롤 글상자] 확인 상자 만들기: [삽입]-[폼 필드]-[확인상자] 라이오 단추 만들기: [삽입]-[폼 필드]-[라디오 단추] 펼침 목록 메뉴 만들기: [삽입]-[폼 필드]-[펼침 목록 메뉴] 누름 단추 만들기: [삽입]-[폼 필드]-[누름 단추]

2. 메일 폼 만들기 폼 태그 다루기 폼 태그 지우기: [폼 속성] 메뉴 사용
<form>... </form> 태그 삽입하기 : HTML 소스 영역에서 직접 입력

2. 메일 폼 만들기 폼 속성 지정하기 폼 전송방식 및 인코딩 유형 지정 [폼 속성] 메뉴 사용 폼 전송 방식
GET : 지정된 URL로 데이터를 송신하는 방법 POST : 데이터 부분만 송신하는 방법

2. 메일 폼 만들기 폼 필드 강조하기 폼 필드 안에 커서 만들기
[창]-[액션] 메뉴 사용 최신버전: [창]-[스크립트 관리자] 메뉴 사용 이벤트 : onLoad 액션 : 폼 필드 강조하기

2. 메일 폼 만들기 폼 필드 공백 확인하기 폼 필드 안의 내용 입력 여부를 검사
[창]-[액션] 메뉴 사용 최신버전: [창]-[스크립트 관리자] 메뉴 사용 이벤트 : onBlur 액션 : 폼 필드 공백 확인하기

학습 정리 폼은 웹 브라우저를 통해 입력 받은 정보를 웹 서버와 통신하기 위해 사용하는 양식입니다.
폼 필드를 삽입하려면 [삽입]-[폼 필드] 메뉴를 이용합니다. 한 문서에 여러 개의 폼 필드를 사용하여 이메일로 전송해야 할 겅우에는 폼 필드 전체를 포함하도록 만들어 주어야 합니다. 폼 필드를 전송하는 방식에는 GET과 POST방식 두 가지가 있습니다. GET방식은 지정된 URL로 데이터를 송신하는 방법으호 주로 검색 엔진 양식에 많이 사용하고, POST방식은 데이터 부분만 송신하는 방법으로 송신 데이터 양이 많고 2바이트 언어를 사용할 때 지정합니다.

CGI 설치(1) – 드림위즈 이용하기 강사: 정희영
27차 홈페이지 제작 과정 CGI 설치(1) – 드림위즈 이용하기 강사: 정희영

드림위즈 웹 서버 현재 드림이즈에서는 웹 서버를 제공하지 않고 있습니다. 2008년부터 홈페이지 서비스를 중지하고 현재는 블로그와 카페만 개설이 가능한 상황입니다. CGI 설치에 대한 내용은 현재 진행이 불가능합니다. 이점을 참고하셔서 강의를 들으시기 바람니다.

CGI 설치(1) – 드림위즈 이용하기 CGI 이해하기 카운터 설치하기 게시판 설치하기 방명록 설치하기

1. CGI 이해하기 CGI(Common Gateway Interface)
서버와 외부 스크립트 또는 프로그램과 상호작용을 할 때 이루어지는 입출력을 정의한 표준 Perl이나 C++로 구현 다이나믹 웹페이지 구현 인터렉티브 웹서비스 구현 카운터, 방명록, 게시판, 회원관리, 대화방, 장바구니 등등

2. 카운터 설치하기 카운터 설치하기 드림위즈(www.dreamwiz.com) 사이트에서 제공하는 카운터 설치
작업 과정 단계 – 드림위즈에서 카운터 신청하기 단계 – 웹문서에 카운터 삽입하기

3. 게시판 설치하기 게시판 설치하기 드림위즈(www.dreamwiz.com) 사이트에서 제공하는 게시판 설치
작업 과정 단계 – 드림위즈에서 게시판 신청하기 단계 – 웹문서에 게시판 삽입하기 단계 – 게시판 관리하기

4. 방명록 설치하기 방명록 설치하기 드림위즈(www.dreamwiz.com) 사이트에서 제공하는 방명록 설치
작업 과정 단계 – 드림위즈에서 방명록 신청하기 단계 – 웹문서에 방명록 삽입하기 단계 – 방명록 관리하기

CGI 설치(2) – 서버에 직접 설치하기 강사: 정희영
28차 홈페이지 제작 과정 CGI 설치(2) – 서버에 직접 설치하기 강사: 정희영

CGI 설치(2) – 서버에 지접 설치하기 일정관리 프로그램 설치하기 투표 프로그램 설치하기

1. 일정관리 프로그램 설치하기 CGI 설치하기 CGI 설치 허용 서버 이용 웹 호스팅 서비스 이용, 직접 서버 구축

1. 일정관리 프로그램 설치하기 퍼미션(permission) 값
접속자가 어떤 파일을 액세스(access)할 수 있도록 어떤 권한을 주는 것 주인, 그룹유저, 일반유저에게 해당 파일에 대한 접근권한을 주는 것

1. 일정관리 프로그램 설치하기 전송모드 기준: 전송하는 파일의 종류
아스키(ASCII) C, CGI, CPP, CAP, H, HTM, HTML, INI, NFO, PAS, TXT 등 바이너리(BINARY) GIF, JPG, JPEG 등

1. 일정관리 프로그램 설치하기 일정관리 프로그램 둘러보기 일정 등록하기 일정 수정하기 배경색 바꾸기 비밀번호 바꾸기

2. 투표 프로그램 설치하기 CGI 설치하기 작업과정 : 서버에 CGI 프로그램 업로드하기 투표 기본환경 만들기
투표 내용 만들기 웹 페이지 삽입하기

2. 투표 프로그램 설치하기 투표 프로그램 둘러보기 투표하기 의견 남기기 결과보기 투표 내용 추가하기 투표 내용 삭제하기
관리자 비밀번호 바꾸기

학습 정리 CGI 프로그램을 설치하려면 서버에서 CGI 프로그램 설치를 허용해야 합니다. 무료 계정을 주는 서버에서는 사용자가 임의로 CGI 프로그램을 설치하는 것을 허용하지 않으며, 웹호스팅 서비스를 이용하거나 직접 구축한 서버를 이용하면 CGI 프로그램을 이용할 수 있습니다. 퍼미션은 주인, 그룹유저, 일반유저에게 해당파일에 대한 접근권한을 주는 것입니다. 전송모드는 전송하는 파일의 종류에0 따라 아스키와 바이너리로 나뉘어집니다. 확장자가 C, CGI, CPP, CAP, H, HTM, HTML, INI, NFO, PAS, TXT인 파일은 ASCII 형식으로 전송해야 하며, CIF, JPG, JPEG인 파일은 BINARY 형식으로 전송해야 합니다.

29차 홈페이지 제작 과정 홈페이지 아이콘 제작 강사: 정희영

홈페이지 아이콘 제작 파브콘 이해하기 파브콘 만들기 파브콘 삽입하기

1. 파브콘 이해하기 파브콘 이해하기 파브콘(favicon) : 즐겨찾기 파일 아이콘과 주소표시줄에 표시되는 주소 옆에 나타나는 아이콘 즐겨찾기(favorites)와 아이콘(icon)의 합성어 파브콘 포맷 파일 형식 : 비트맵 이미지 크기 : 16*16, 32*32 색상 : 16색이나 256색 이상 제작 프로그램 : 아이콘 포지(Icon Porge) 문제점 : 사용자가 오프라인일 경우에 아이콘의 위치적 접근이 곤란하다

2. 파브콘 만들기 아이콘 포지 마련하기 아이콘 포지 다운로드 : www.favicon.com
아이콘 포지 설치하기 : favicon.exe

2. 파브콘 만들기 아이콘 포지 사용하기 아이콘 포지 시작하기 새 파일 열기 : [New]-[New Icon] 메뉴 사용
마우스 색상 지정하기 : [Style] 아이콘 사용 글자 입력하기 : [글자] 아이콘 사용 아이콘 파일로 저장하기 : [File]-[Save As] 메뉴 사용

<link rel=“shortcut Icon” href=“favicon.ico”>
3. 파브콘 삽입하기 파브콘 삽입하기 웹문서에 파브콘 삽입하기 : <head>...</head> 태그 사이에 다음의 소스 입력 파브콘 확인하기 : 즐겨찾기에 등록 <link rel=“shortcut Icon” href=“favicon.ico”>

학습 정리 즐겨찾기 파일 아이콘과 주소표시줄에 표시되는 주소 옆에 나타나는 아이콘을 파비콘(favicon)이라고 부릅니다. 파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어입니다. 파브콘은 비트맵 이미지이면서 고유의 파일 포맷을 가지고 있습니다. 16*16, 32*32픽셀 등으로 크기를 선택할 수 있으며, 256 색상 이상을 사용할 수 있지만, 16색상만 사용하는 것이 보다 안정적입니다. 파브콘을 만드는 대표적인 프로그램으로는 아이콘포지(Icon Forge)를 들 수 있습니다. 파브콘을 삽입하려면, 시작페이지(index.html)의 <head>...</head> 태그 사이에 <link rel=“shortcut Icon” href=“favicon.ico”> 소스를 추가해야 합니다.

30차 홈페이지 제작 과정 웹 프로모션 및 유지보수 강사: 정희영

웹 프로모션 및 유지보수 홈페이지 출판하기 검색엔진에 등록하기 텔넷으로 홈페이지 관리하기

1. 홈페이지 출판하기 홈페이지 출판하기 홈페이지 정보 정의하기: [파일] –[문서속성] 메뉴 사용
웹문서 기본정보 확인하기: [파일]-[문서정보] 메뉴 사용 출판 정보 지정하기 : [파일]-[출판하기]-[사이트 출판정보] 메뉴 사용 출판하기: [파일]-[출판하기]-[출판하기] 메뉴 사용

2. 검색엔진에 등록하기 야후코리아에 등록하기 홈페이지 홍보하기 등록 사이트 : kr.yahoo.com 검색엔진에 등록하기
광고 메일 보내기 배너 광고 띄우기 외부 발송 문서에 홈페이지 주소 기입하기 명함에 홈페이지 주소 기입하기 등록 사이트 : kr.yahoo.com

3. 텔넷으로 홈페이지 관리하기 텔넷 이해하기 윈도우 텔넷 사용하기: [시작]-[실행] 메뉴 사용
웹 브라우저 사용하기: telnet://도메인 텔넷 전용 프로그램 사용하기: 새롬 데이터맨

3. 텔넷으로 홈페이지 관리하기 텔넷 사용하기 목록보기 : ls, dir 경로확인하기 : pwd
Pert 프로그램 위치 확인하기 : whereis perl 디렉토리 바꾸기 : cd 디렉토리 파일 이름 바꾸기 : mv 파일명 새파일명 파일 이동하기 : mv 파일명 디렉토리명 파일 복사하기 : cp 파일명 디렉토리명 파일 삭제하기 : rn 파일명 디렉도리 만들기 : mkdir 디렉도리명 디렉도리 삭제하기 : 그약 디렉도리명 패스워드 변경하기 : passwd 퍼미션 지정하기 : chmod 퍼미션값 파일명

학습 정리 홈페이지를 출판하기 전에 문서에 대한 정보를 정의하고 문서의 전송속도 등의 기본 정보를 확인해야 합니다. 문서 정보를 정의할 때는 [파일]-[문서속성] 메뉴를 이용하고, 문서의 정보를 확인할 때는 [파일]-[문서정보] 메뉴를 이용합니다. 홈페이지를 출판하려면, 출판정보를 등록한 다음 서버로 업로드 해야 합니다. 출판정보를 등록하려면 [파일]-[출판하기]-[사이트 출판정보] 메뉴를 이용하고, 서버로 업로드 하려면 [파일]-[출판하기]-[출판하기] 메뉴를 이용합니다. 홈페이지를 제작한 후에는 적극적으로 홈페이지를 광고해야 합니다. 홈페이지를 광고하는 가장 일반적인 방법은 유명 검색엔진에 등록하는 것입니다. 텔넷을 원격지 접속 서비스로 인터넷을 통해 또 다른 컴퓨터에 접속하여 자유롭게 일 처리를 할 수 있는 서비스입니다. 텔넷을 사용하려면 윈도우 95이상의 운영체제에 내장된 텔넷 프로그램을 이용하거나 새롬데이터맨과 같은 프로그램을 이용해야 합니다.

홈페이지 제작 과정 강사: 정희영.

Similar presentations

Presentation on theme: "홈페이지 제작 과정 강사: 정희영."— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

홈페이지 제작 과정 강사: 정희영.

Similar presentations

Presentation on theme: "홈페이지 제작 과정 강사: 정희영."— Presentation transcript:

Similar presentations

About project

지원