2장. 홈페이지를 만들기 전에 홈페이지 제작 목적과 제작 과정 홈페이지 제작 관련 기술들 홈페이지 제작에 필요한 준비물

Presentation on theme: "2장. 홈페이지를 만들기 전에 홈페이지 제작 목적과 제작 과정 홈페이지 제작 관련 기술들 홈페이지 제작에 필요한 준비물"— Presentation transcript:

1 2장. 홈페이지를 만들기 전에 홈페이지 제작 목적과 제작 과정 홈페이지 제작 관련 기술들 홈페이지 제작에 필요한 준비물
어떤 웹 에디터를 사용할 것인가? 에디터플러스 설치와 환경설정

2 [홈페이지 제작 목적] 자기 만족 및 개인 홍보 기업 홍보 및 물건 판매 정보 공유 인터넷 프로그래밍의 이해
홈페이지를 만들기 전에 – 홈페이지 제작 목적과 과정 [홈페이지 제작 목적] 자기 만족 및 개인 홍보 기업 홍보 및 물건 판매 정보 공유 인터넷 프로그래밍의 이해

3 홈페이지를 만들기 전에 – 홈페이지 제작 목적과 과정
[홈페이지 제작 과정] 기획 단계 홈페이지를 제작하기 전에 제작 목적, 주제, 대상층 등을 명확히 정해야 한다. 제작 단계 홈페이지 기획이 끝나면 실제로 홈페이지를 제작한다. 배포와 관리, 평가 단계 홈페이지 제작이 완료되면 이제 자신의 홈페이지를 홍보할 차례다. 하이홈, 네이버 등의 계정을 받아 홈페이지를 올린다. 또한 홈페이지를 올린 후 원하는 대로 제작되었는지, 효용성 등을 체크해 본다.

4 홈페이지를 만들기 전에 – 홈페이지 제작 목적과 과정
[대상층과 서비스 제공 방식] 항목 설명 전체적인 구성 텍스트 위주, 그래픽 위주 용도 학술 연구, 교육 학습, 개인, 오락, 여가 생활 유형 공공기관, 교육용, 상업용, 개인용 주요 고객 계층, 연령, 배경, 관심 분야, 기술, 이용 능력 수준

5 웹 프로그래밍 분야 웹 디자인 분야 홈페이지를 만들기 전에 – 홈페이지 제작 관련 기술 HTML CSS 자바스크립트
CGI, ASP, PHP, JSP 웹 디자인 분야 일러스트레이터 포토샵 플래시

6 홈페이지를 만들기 전에 – 홈페이지 제작 준비물(필수)
정의 종류 우리가 사용할 도구 웹 에디터 홈페이지 문서를 제작하는 툴 메모장, 에디트플러스, 나모, 드림위버 등 에디트플러스 웹 브라우저 홈페이지 문서를 보여주는 툴 인터넷 익스플로러, 넷스케이프 네비게이터, 오페라 등 인터넷 익스플로러 계정 홈페이지 공간을 할당해 주고 홈페이지 파일을 올릴 수 있도록 서비스해 주는 업체에 가입하는 것 네이버, 드림위즈, 네티앙, 하이홈 등 네이버

7 홈페이지를 만들기 전에 – 홈페이지 제작 준비물(선택)
FTP 전용 프로그램 웹 서버 이미지 제작 툴 애니메이션 제작 툴

8 홈페이지를 만들기 전에 – 무료 계정 제공 사이트
제공 회사 사이트 주소 제공 용량 네이버 25M 컴내꺼 50M 하이홈 드림위즈 5M 네이트 12M 신비로 10M 네띠앙 20M 한미르 오마이포탈 100M 홈피

9 [웹 에디터의 종류] 소스 위주의 웹 에디터 편집 위주의 웹 에디터 홈페이지를 만들기 전에 – 어떤 웹 에디터를 사용할 것인가
메모장 에디터플러스 홈사이트 편집 위주의 웹 에디터 나모 드림위버

10 [소스 위주의 웹 에디터] 홈페이지를 만들기 전에 – 어떤 웹 에디터를 사용할 것인가 종류 설명 메모장
흰색 배경에 검은색 글자로만 소스를 코딩하므로 간단한 소스의 경우 문제 없지만 복잡한 소스를 코딩할 경우 불편하다. 에디트 플러스 홈페이지 소스를 구성하고 있는 태그, 속성, 값의 색상을 다양하게 구별하여 표시하므로 복잡한 소스를 코딩하더라도 원하는 곳을 쉽게 찾아볼 수 있어 편리하다. 홈사이트 에디터플러스와 같이 태그, CSS, 자바스크립트 소스의 색상을 다양하게 표현해 주므로 소스 편집이 훨씬 수월하다. 특히 태그 속성 자동 생성 기능이나 위자드(Wizard) 기능이 막강하여 복잡한 태그도 쉽게 생성, 편집할 수 있다.

11 [편집 위주의 웹 에디터] 홈페이지를 만들기 전에 – 어떤 웹 에디터를 사용할 것인가 구분 장/단점 내용 나모 장점
- 국산품이라 우리나라 정서에 맞고 메뉴가 한글로 구성되어 있어 쉽게 배울 수 있다. - 초보자들도 쉽게 자바스크립트를 사용할 수 있도록 자바스크립트 마법사를 제공한다. - 나모 자체로 이미지를 간단히 편집할 수 있다. 단점 - HTML 소스가 지저분하게 생성되는 편이다. 드림위버 - 초보자들도 쉽게 자바스크립트를 사용할 수 있도록 비헤비어(Behavior)를 제공한다. - HTML 소스가 깔끔하게 생성되는 편이다. - 같은 매크로미디어 제품군인 플래시 애니메이션과 연동하기 편리하다. - 외국 제품이라 우리나라 정서에 맞지 않고 메뉴가 영문으로 되어 있어 배우기 어렵다.

12 따라하기 추가

13 [에디트플러스의 특징] http://editplus.co.kr/kr/download.html 쉐어웨어로 30일 평가판이다.
홈페이지를 만들기 전에 – 에디트플러스 설치와 환경설정 [에디트플러스의 특징] 쉐어웨어로 30일 평가판이다. 구문 강조 기능을 지원한다. 자체 내장 브라우저를 제공한다. 자체 FTP를 제공한다. [그림 2-8 추가]