드림위버 MX로 인터랙티브한 커뮤니티사이트 구축하기

Chapter 1. 웹 사이트와 웹 디자이너
Section 1. 웹 사이트 전체보기
1. 웹 사이트? 홈페이지?
1) 웹 사이트의 홈페이지
2) 웹 사이트의 작동원리
2. 웹 사이트의 제작 프로세스
3. 웹 사이트를 만들기 전에 준비해야 할 일
1) 웹 제작 환경
2) 웹 저작도구
4. 계정 서비스 이용하기
Section 2. 성공적인 웹 사이트 디자인하기
1. 컬러와 웹
1) 웹에서 안전한 컬러
모니터에 맞는 컬러와 인쇄에 적합한 컬러
2) 컬러로 본 웹 사이트
편안한 컬러의 웹 사이트와 개성있는 컬러의 웹 사이트
답답한 웹 페이지와 선명한 웹 페이지
원색을 더 돋보이게 하는 웹 사이트
브랜드 컬러로 인지도를 높이는 웹 사이트
2. 이미지 다루기
1) 벡터(Vector) 이미지와 비트맵(Bitmap) 이미지
벡터(Vector) 이미지
비트맵(Bitmap) 이미지
2) 웹에서 사용되는 파일 포맷
GIF(Graphics Interchange format)
JPEG(Joint Photographic coding Experts Group)
PNG(Portable Network Graphics)
3. 타이포그래피로 디자인하기
1) 그래픽으로서의 타이포그래피
키네틱 타이포그래피(Kinetic Typography)
캘리그래피(Caligraphy)
2) 가독성이 좋은 폰트
4. 웹 페이지의 디자인 영역
1) 가이드라인
2) 정렬하기
5. 웹 사이트 디자인과 사용자 심리
1) 사람들은 주관적인 사고를 하고 습관에 익숙하다
사용자의 머리속 생각과 일치한 메뉴 형태
사용자의 머리속 생각와 일치하지 않는 메뉴 형태
사용자에게 가장 익숙한 디자인
2) 사용자를 위한 모든 경로를 열어 두어라
선형 구조(Linear Structure)
네트워크 구조(Network Strcture)
다중 경로의 제공
3) 사용자는 현재 위치가 궁금하다
사용자의 현재 위치
사용자가 지나온 경로
4) 사용자에게 보여주고 피드백을 받아라
링크되는 텍스트
메뉴바와 아이콘
6. 디자인의 전달 기호
1) 사용자의 감성에 호소하는 전달기호
Cute
Feministic
Minimal
Modern
2) 컨텐츠의 특징을 그대로 살린 물리적 기호
자연
제품
3) 사용을 유도하는 인지적 기호
책은 넘겨보는 것?
라디오를 듣자!
메뉴는 먹는 것?
4) 사회적 기호를 활용
글로벌한 이미지의 사용과 제한
글로벌한 사이트의 로컬 이미지
*****Special Work: 웹상에서 보여지는 컬러의 이름들
Section 3. 웹 디자이너 바로 알기
1. 웹 디자이너는 어떤 일을 할까요?
1) 웹 디자이너의 영역
2) 조직 내에서의 역할
2. 웹 디자이너는 어떤 사람들과 일하게 되나요?
1) 프로젝트 매니저(Project Management)
2) 기획자(Planner, Director)
3) 웹 디자이너(Web designer)
4) 코더(Coder)
5) 프로그래머(Programmer)/시스템 운영 관리자
3. 웹 디자이너가 갖추어야 할 6가지 기본 자세
1) 나만의 컬러를 만드세요
2) 디자인의 기본을 배우세요
3) 웹 서핑을 많이 하세요
4) 관련 툴을 배우세요
5) 프로그래밍도 놓치지 마세요
6) 사용자 입장에서 생각해 보세요
Section 4. HTML과 CSS의 기본 다지기
1. HTML 기본 태그
1) 다양한 배경색
2) 텍스트의 속성
3) 문장 정렬
4) 문서간의 연결
2. 테이블의 활용
1) 테이블의 구조
2) Cell의 속성을 활용한 테이블
3) bordercolordark와 bordercolorlight를 이용한 입체 느낌의 테이블
4) 테이블의 활용
3. CSS 활용하기
1) CSS의 구조
2) Selector 만들기
3) Class Selector
4) ID Selector

Chapter 2. 드림위버 MX의 기본 익히기
Section 1. 드림위버 MX 바로 알기
1. 드림위버란?
2. 왜 드림위버를 사용하는가?
1) 쉬운 사용자 인터페이스
2) 위지위그 방식의 홈페이지 제작 툴
3) 전문가 부럽지 않은 고급 기능들
4) 다양한 멀티미디어 기능 지원
5) 울드라데브와의 통합
*****Special Work: 도메인 등록하기
Section 2. 드림위버 MX의 새로워진 기능
1. 유연한 작업 공간
2. 확장성 및 사용자 정의
3. 사이트 설정 마법사
4. 강력한 템플릿 기능
5. 빠른 레이아웃 편집과 코드 작성
6. 향상된 CSS(Cascading Style Sheets)지원
7. 드래그 앤 드롭 방식 지원
8. 코드 힌트
9. 태그 편집기
10. 코드 단편 패널
11. Tree-View를 통한 XML지원
12. 즉시 반영되는 [Code and Design View] 작업환경
13. ColdFusion? MX 개발 최적화
14. 고유한 ASP.NET 지원
15. 웹 서비스
16. 데이터베이스 가시성
Section 3. 화면 구성 익히기
1. 드림위버 MX 실행하기와 작업환경 설정
1) 드림위버 MX를 실행하기
2) 드림위버 MX 작업환경 익히기
Document Toolbars
Insert bar
여러 종류의 패널(Panel)
Properties
2. 작업화면 보기 상태 변경
*****Special Work: VRML로 만나는 3차원 가상현실의 세계
Section 4. 사이트 관리자
1. 리모트 사이트 설정하기
2. 사이트 맵에서 파일 및 링크 관리하기
1) 사이트 관리창 화면 구성
2) 사이트 맵에서 홈페이지 변경하기
3. 사이트 파일들을 다양한 형태로 보기
1) 사이트 파일 보기(Site Files view)
2) 테스팅 서버 보기(Testing Server view)
3) 사이트 맵 보기(Site Map view)

Chapter 3. 홈페이지 기본요소로 실력 다지기
Section 1. Page정의하기와 텍스트 작업하기
1. Page 정의하기
따라하기) 문서의 제목과 배경 무늬 지정하기
2. 텍스트 입력하기
따라하기) 빈 문서에 텍스트 입력하기
3. 텍스트 모양 바꾸기
따라하기) 입력된 텍스트에서 포맷과 폰트 및 글자색 변경하기
4. 리스트 등록하기와 특수 문자 입력하기
따라하기) 리트스 등록하기와 특스문자 입력하기
5. 히스토리 패널(History Panel) 사용하기
따라하기) 텍스트 이동과 복사 및 히스토리 패널을 이용한 문서 편집하기
*****Special Work: 모르면 답답한 몇 가지 상식들
Section 2. 이미지 작업하기
1. 이미지 삽입하고 속성 변경하기
따라하기) 이미지를 삽입한 후 이미지에 대한 도움말('Alt'항목) 등록하기
2. 이미지 정렬과 이미지 여백 설정하기
따라하기) 이미지와 텍스트를 조화롭게 정렬하기
3. 외부 프로그램 지정하기
따라하기) 포토샵 프로그램을 외부 프로그램으로 지정하기
4. 이미지 맵(Map) 만들기
따라하기) 검색엔진 이미지 맵 만들기
5. 롤오버(Rollover) 이미지
따라하기) 버튼 위에 마우스 놓으면 새로운 모양으로 버튼이 변하는 롤오버 버튼 만들기
*****Special Work: 웹에서 사용되는 이미지(비트맵과 벡터, GIF와 JPEG)
Section 3. 하이퍼링크(Hyperlink) 설정하기
1. 링크(Link)설정하기
따라하기) 메뉴를 선택하면 새로운 페이지가 실행되는 하이퍼텍스트 설정하기
2. 이메일 링크하기와 다운로드 링크하기
따라하기) 이메일 링크와 다운로드 링크 설정하기
3. 문서 내에서 이동하는 앵커(Anchor) 만들기
따라하기) '드림위버MX의 새로운 주요기능'의 각 단계별 'Named Anchor' 설정하기
Section 4. 테이블 만들기
1. 기본적인 테이블 작업하기
따라하기) 테이블을 이용하여 이미지와 텍스트 정리하기
2. 테이블과 셀 속성 설정하기
따라하기) 테이블과 셀의 배경색 및 정렬 변경하기
3. 입체감이 있는 테이블 만들기
따라하기) 테이블 배경색을 이용하여 입체감 있는 테이블 만들기
4. 마우스를 올려놓으면 셀 색상이 변하는 테이블 만들기
따라하기) 셀에 마우스 포인터를 올려놓으면 셀 색상이 변하는 테이블 만들기
5. 셀에 스크롤바가 생기는 테이블 만들기
따라하기) 두 행(Column)을 가진 테이블에서 한 셀에 수직 스크롤바 등록하기
Section 5. 레이어 설정하기
1. 레이어의 삽입과 기본 조작하기
따라하기) 그림이 삽입된 레이어 위에 텍스트 레이어 겹치기와 이동하기
2. 다양한 레이어 속성 다루기
따라하기) 레이어에 스크롤바가 생성되도록 속성 변경하기
3. 레이어로 투명한 이미지 만들기
따라하기) 이미지와 시의 내용이 투명하게 보이는 레이어 삽입하기
4. 레이어로 네비게이션 바(Navigation Bar) 만들기
따라하기) 레이어에 갤러리 1, 2, 3으로 이동하는 네비게이션 바 만들기

Chapter 4. 다양한 홈페이지 구성하기
Section 1. 프레임으로 홈페이지 만들기
1. 프레임의 생성과 저장하기
따라하기) 3단 프레임 만들기
2. 프레임 문서 만들기
따라하기) 프레임셋을 통한 각 프레임 문서 작성하기
3. 프레임과 프레임셋의 속성 설정하기
따라하기) 프레임과 프레임셋에 대한 각 속성을 변경하기
4. 메뉴에 링크 설정하여 프레임에 내용 출력하기
'Target'을 이용한 프레임 링크 설정하기
Section 2. 스타일 시트(CSS) 만들기
1. 클래스 스타일 시트 만들기
따라하기) '제목' 형식 지정을 위한 클래스 스타일 시트 만들기
2. 외부 스타일 시트 사용하기
따라하기) 작성된 스타일 시트 파일을 현재 문서에 적용하기
3. 스타일 시트를 이용한 입력 박스 만들기
따라하기) 크기가 일정한 녹색 입력박스를 스타일 시트로 등록하기
4. 스타일 시트를 이용하여 배경이미지 고정시키기
따라하기) 태그를 응용하여 배경이미지가 고정되는 스타일 시트 만들기
5. Select Style을 이용한 하이퍼링크 선택 모양 바꾸기
따라하기) 하이퍼링크에 마우스 포인터를 놓으면 색깔이 있는 박스로 표시되도록 만들기

Chapter 5. 인터랙티브한 홈페이지 만들기
Section 1. DHTML - 타임라인으로 홈페이지 움직이기
1. 타임라인 애니메이션 만들기
따라하기) 타임라인으로 만든 슬라이드 쇼
2. 자유로운 곡선 애니메이션 만들기
따라하기) 키프레임을 삽입하여 자유롭게 움직이는 별 애니메이션 만들기
3. 다중 레이어를 이용한 애니메이션 만들기
따라하기) 많은 별들이 함께 움직이며 사라졌다가 다시 나타나는 애니메이션 만들기
Section 2. DHTML - 다양한 이벤트를 위한 비헤비어(Behavior)
1. 액션(Action)과 이벤트(Event)를 이용한 애니메이션
따라하기) [Go]와 [Stop] 단추로 컨트롤되는 움직이는 화살표 만들기
2. 설치된 플러그인 확인하기
따라하기) 쇽웨이브 실행을 위한 'Check Plugin Behavior' 등록하기
3. 무비 컨트롤하기
따라하기) 플래시 파일을 삽입하고 이를 제어하는 링크 등록하기
4. 공지사항 띄우기
따라하기) 웹 페이지를 접속하면 실행되는 팝업창 등록하기
5. 점프 메뉴(Jump Menu)를 이용하여 항목 설정하기
따라하기) 폼(Form)도구의 점프 메뉴를 이용한 메뉴 등록하기
6. 보이기와 숨기는 메뉴 만들기
따라하기)메인 메뉴 위에 마우스를 놓으면 서브 메뉴가 표시되는 메뉴 만들기
*****Special Work: Map에 링크된 파일을 프레임에 표시하기
Section 3. 다양한 익스텐션(Extensions) 사용하기
1. 익스체인지 사이트 방문과 익스텐션 설치하기
따라하기) 익스체인지 사이트에 접속하여 특정 인스텐션 다운로드 받기
2. 즐겨찾기 자동으로 등록하기
따라하기) 'Add To Favorites'를 설치하고 홈페이지에 '즐겨찾기'메뉴 등록하기
3. 자동으로 스크롤되는 레이어 만들기
따라하기) 좋은 시가 자동으로 스크롤되는 레이어 만들기
4. 깔끔한 윈도우 창 만들기
따라하기) 색다른 팝업창 만들기

Chapter 6. 멀티미디어를 사용한 홈페이지 만들기
Section 1. 플래시와 플러그인 삽입하기
1. 플래시 버튼 삽입하기
따라하기) 웹 페이지로 바로 이동하는 플래시 버튼 삽입하기
2. 플래시 텍스트 삽입하기
따라하기) 색깔이 변하는 플래시 텍스트 만들기
3. 플러그인 삽입하기
따라하기) 홈페이지에 배경음악 삽입하기

Chapter 7. 웹 페이지 만들기의 최적화시키기
Section 1. 라이브러리(Library) 사용하기
1. 라이브러리 아이템(Library Item) 만들어 적용하기
따라하기) 웹 문서 하단에 등록할 'Copyright' 라이브러리 만들기
2. 라이브러리 아이템 수정과 업데이트하기
따라하기) 등록된 'Copyright' 라이브러리 수정하기
Section 2. 템플릿(Template) 사용하기
1. 템플릿으로 동일한 디자인의 문서를 빠르게 만들기
따라하기) 템플릿을 이용한 '갤러리' 웹 페이지 만들기
2. 템플릿 수정하고 업데이트하기
따라하기) 이미 작성된 템플릿을 편집하여 수정하기

Chapter 8. 자신의 환경에 맞는 웹 서버 설치하기
Section 1. ASP, 인터넷 정보 서비스(IIS) 설치하기
1. ASP(Active Server Page)란?
2. ASP 동작 방식
3. IIS 설치와 기본 설정하기
1) 내 컴에 IIS 설치하기
2) IIS의 웹 사이트 설정과 홈 디렉터리 설정하기
웹 사이트 탭
홈 디렉터리
Section 2. JSP, Jrun 설치하기
1. JSP(Java Sever Page)란?
2. JSP 동작 방법
3. Jrun 설치 따라하기
1) J2SE 설치하기
2) Jrun 설치하기
3) Jrun Lanucher 실행하기
*****Special Work: Jrun 커넥터 위자드 설정하기
Section 3. PHP와 아파치(Apache) 설치하기
1. PHP란?
2. PHP 동작 방식
3. 아파치 설치 따라하기
4. PHP 설치 따라하기
Section 4. CFML, 콜드퓨전(ColdFusion) 설치하기
1. CFML란?
2. 콜드퓨전의 동작 방식
3. 콜드퓨전 설치 따라하기

Chapter 9. 사이트 작업 환경 설정하기
Section 1. 사이트 위저드로 사이트 만들기
*****Special Work: 드림위버의 무료 강좌를 볼 수 있는 추천 사이트 (1)
Section 2. ODBC 설정하기
Section 3. 데이터베이스 연결 설정하기
Section 4. 질의어 알아보기
1. SELECT 문
2. INSERT 문
3. UPDATE 문
4. DELETE 문
*****Special Work: SQL에 대한 정보를 얻을 수 있는 사이트

Chapter 10. 회원 로그인 인증 페이지 만들기
Section 1. 데이터베이스 생성과 회원 테이블 만들기
1. 데이터베이스 만들기
2. 회원 테이블 만들기
Section 2. 회원 인증 구성과 회원 인증 페이지 만들기
1. 회원 인증 구성
2. 회원 인증 페이지 만들기
3. 로그인 인증 후 페이지 만들기
4. 사이트 우측 메뉴 페이지 만들기
*****Special Work: 드림위버의 무료 강좌를 볼 수 있는 추천 사이트 (2)
Section 3. 회원 외곽 폼 및 회원 등록 페이지 만들기
1. 회원 외곽 폼페이지 만들기
2. 회원 등록 페이지 만들기
3. 회원 아이디 중복 체크 페이지 만들기
Section 4. 개인 정보 수정 및 탈퇴 페이지 만들기
1. 개인 정보 수정 페이지 만들기
2. 탈퇴 페이지 만들기
Section 5. 아이디/비밀번호 찾기 페이지 만들기
*****Special Work: SMTP 서비스 설치하기
*****Special Work: 드림위버의 무료 강좌를 볼 수 있는 추천 사이트 (3)

Chapter 11. 다중 게시판 만들기
Section 1. SiteGalaxyUpload 컴포넌트 설치하기
*****Special Work: 드림위버의 무료 강좌를 볼 수 있는 추천 사이트 (4)
Section 2. 관리자 페이지 만들기
1. 게시판 관리 모드 테이블 디자인하기
2. 게시판 관리 등록 폼 만들기
3. 게시판 관리 리스트 페이지 만들기
4. 게시판 관리 수정 페이지 만들기
Section 3. 다중 게시판 만들기
1. 다중 게시판 구성
2. 게시판 테이블 디자인하기
3. 게시물 등록 폼페이지
4. 첨부 파일 폴더에 쓰기 권한주기
5. 게시판 리스트 페이지 만들기
6. 게시물 내용 보기 페이지
7. 게시물 답변하기 페이지
8. 게시물 수정 페이지
9. 게시물 삭제 페이지
*****Special Work: 드림위버의 무료 강좌를 볼 수 있는 추천 사이트 (5)

chapter 12. 커뮤니티 사이트 만들기
Section 1. 커뮤니티 사이트 구성하기
1. 커뮤니티 사이트 구성도
2. 커뮤니티 코드 구성도
Section 2. 커뮤니티 테이블 디자인
1. 커뮤니티 카테고리 테이블 디자인하기
2. 커뮤니티 정보 테이블 디자인하기
3. 커뮤니티 회원 테이블 디자인
4. 커뮤니티 게시판 관리자 테이블 디자인
5. 커뮤니티 게시판 테이블 디자인
Section 3. 커뮤니티 메인 페이지
1. 커뮤니티 폼페이지
2. 커뮤니티 공지사항 게시판 생성하기
3. 커뮤니티 메인 페이지
4. 커뮤니티 등록 페이지
*****Special Work: 커뮤니티에 관련된 사용자 정의 함수 페이지 내용
5. 커뮤니티 리스트 페이지
6. 커뮤니티 검색 페이지
Section 4. 커뮤니티 홈페이지
1. 커뮤니티 홈 폼페이지와 커뮤니티 홈 메인 페이지
2. 커뮤니티 홈 가입 페이지
3. 커뮤니티 홈 탈퇴 페이지
4. 커뮤니티 정보 관리 페이지
5. 커뮤니티 회원 관리 페이지
*****Special Work: 뷰 vw_club_mylist 생성하기
6. 커뮤니티 회원 수정 페이지 만들기
6. 커뮤니티 메뉴 관리 페이지

Chapter 13. 관리자 페이지 만들기
Section 1. 관리자 접속 페이지 만들기
1. 관리자 로그인 페이지 만들기
2. 회원 관리 페이지 만들기
3. 메일링 보내기 페이지 만들기
4. 커뮤니티 카테고리 페이지 만들기
5. 커뮤니티 리스트 페이지
6. 커뮤니티 풀소스 설치법

권말부록
1. 테마에 따른 웹 디자인하기
Theme 1. 우아하고 고상한 분위기의 메인 페이지 작성하기
Theme 2. 시원(Cool)한 분위기의 메인 페이지 작성하기
Theme 3. 신선한 분위기의 메인 페이지 작성하기
Theme 4. 복고적인 분위기의 메인 페이지 제작하기
Theme 5. 고급스러운 분위기의 메인 페이지 제작하기
2. 커뮤니티 사이트 A~Z까지 디자인하기
1) 사이트 기획하기
(1) 사이트 기획하기
(2) 팀 간의 커뮤니케이션
(3) 제작 전에 준비해야 하는 것들
2) 포토샵에서 웹 사이트 레이아웃 잡기
(1) 레이아웃 정하기
(2) 라인으로 영역 만들기
3) 메뉴와 아이콘 만들기
(1) 텍스트 툴로 메뉴 만들기
(2) 픽셀 이미지로 아이콘 만들기
4) 메인 이미지 만들기
(1) 파일 만들기
(2) 배경 만들기
(3) 사진 이미지 색 보정하기
(4) 사진 이미지에 효과주기
(5) 사진 이미지 투명도(Opacity) 조정하기
(6) 패턴 적용하기
(7) 로고 장식하기
(8) 메인 이미지 마무리하기
5) 코딩하기
(1) 테이블로 전체 레이아웃 잡기
(2) 배경이미지 만들기
(3) 테이블 안에 배경이미지 넣기
(4) 메인 이미지 넣기
(5) 이미지에 링크 걸기
(6) 빠른 이동을 위한 리스트 메뉴 만들기
(7) CSS를 이용해 텍스트 넣기