길벗·이지톡

첫째 마당 웹 사이트 개발을 위한 HTML 이해하기

필수 기능 | 001 | 웹과 HTML의 개념 이해하기 : HTML과 브라우저 :
필수 기능 | 002 | HTML 구성 요소 알아보기 : 태그와 하이퍼텍스트 문서 :
필수 기능 | 003 | 웹 표준 이해하기 : 웹 표준과 W3C :
필수 기능 | 004 | 문서의 기본 구조 알아보기 : 문서 구조와 선언 :
필수 기능 | 005 | 새로운 HTML 살펴보기 : HTML5와 시맨틱 :
필수 기능 | 006 | 차세대 웹 표준 알아보기 : HTML5 활용 :
필수 기능 | 007 | 애플리케이션 이해하기 : 웹앱, 네이티브앱, 하이브리드앱 :
필수 기능 | 008 | 웹 디자인을 위한 CSS 알아보기 : CSS3 :
실력 알아보기 크롬 브라우저 설치와 웹 표준 유효성 검사하기


둘째 마당 웹 개발자와 디자이너를 위한 웹 디자인 기초 익히기

필수 기능 | 009 | 웹 디자인의 개념 알아보기 : 웹 디자인 :
필수 기능 | 010 | 웹 디자인 기획하기 : 콘셉트 도출/아이디어 방법론 :
필수 기능 | 011 | 웹 디자인 계획하기 : 웹 기획 과정 :
필수 기능 | 012 | 웹 사이트 분석하기 : 벤치마킹과 포지셔닝 :
필수 기능 | 013 | 다양한 디자인 사이트 경험하기 : 디자인 참고 사이트 :
필수 기능 | 014 | 호감이 가는 색상 알아보기 : 배색 :
기능 예제 | 015 | 포토샵에서 웹 색상 팔레트 만들기 : 색상 견본 :
필수 기능 | 016 | 사이트 정보 설계하기 : 사이트맵과 콘텐츠 :
필수 기능 | 017 | 효율적인 레이아웃 만들기 : 레이아웃 :
필수 기능 | 018 | 그리드 시스템 알아보기 : 960 Grid System :
기능 예제 | 019 | 그리드 레이아웃 만들기 : 960 그리드 :
실력 알아보기 웹 색상 팔레트와 그리드를 활용한 레이아웃 만들기


셋째 마당 드림위버 CC 기본 기능 익히기

필수 기능 | 020 | 드림위버 CC 새로운 기능 살펴보기 : New In CC :
필수 기능 | 021 | 드림위버 기본 화면 살펴보기 : 작업 화면 :
기능 예제 | 022 | 작업 환경 설정하기 : 작업 환경 :
기능 예제 | 023 | 새 문서 만들기 : New Document :
기능 예제 | 024 | 로컬 사이트 등록하기 : New Site :
기능 예제 | 025 | 쉽고 간단하게 문서 관리하기 : Files 패널 :
필수 기능 | 026 | 글꼴과 환경 설정하기 : Manage Fonts/Page Properties :
기능 예제 | 027 | 문서 속성 설정하기 : Document Properties :
기능 예제 | 028 | 문자 입력하고 수정하기 : 문자 속성과 글꼴 :
필수 기능 | 029 | 구글 웹 글꼴 사용하기 : Google Web Font :
기능 예제 | 030 | 웹 글꼴 추가와 활용하기 : Web Font :
필수 기능 | 031 | 내용 정리를 위한 목록 만들기 : 순차/비순차 목록 :
필수 기능 | 032 | 다양한 화면 살펴보기 : 화면 보기 설정 :
실력 알아보기 글꼴과 글자 색상을 설정하고 비순차 목록 만들기


넷째 마당 다양한 미디어 적용하기

필수 기능 | 033 | 다양한 미디어 관리하기 : Insert 패널 :
필수 기능 | 034 | 사이트와 디자인, 이미지 알아보기 : Images :
기능 예제 | 035 | 문서에 이미지 삽입하기 : Images :
필수 기능 | 036 | 이미지 속성 살펴보기 : Properties 패널 :
기능 예제 | 037 | 다양한 방법으로 이미지 추가하기 : Properties 패널 :
기능 예제 | 038 | 이미지맵으로 링크 설정하기 : Hotspot :
기능 예제 | 039 | 포토샵 파일 삽입하기 : PSD :
필수 기능 | 040 | 이미지와 문장 정렬하기 : Align :
기능 예제 | 041 | 문장과 이미지 정렬하기 : Float :
필수 기능 | 042 | 배경 이미지 속성 살펴보기 : Appearance/Background :
기능 예제 | 043 | 배경 이미지 반복 설정하기 : Repeat-x/y :
필수 기능 | 044 | 배경 이미지 위치 설정하기 : Attachment/Position :
기능 예제 | 045 | 배경 이미지 고정하기 : No - repeat :
활용 예제 | 046 | 시각적인 효과를 위한 롤오버 이미지 만들기
실력 알아보기 롤오버 이미지 만들고 패턴 형태의 배경 만들기


다섯째 마당 멀티미디어와 속성 활용하기

필수 기능 | 047 | HTML과 멀티미디어 요소 이해하기 : 미디어 활용 :
필수 기능 | 048 | 편리한 작업을 위한 밑그림 만들기 : Tracing Image :
필수 기능 | 049 | 플래시 파일 추가 및 설정하기 : SWF/Insert FLV :
기능 예제 | 050 | 플래시 파일 삽입하기 : SWF/FLV :
필수 기능 | 051 | HTML5 비디오/오디오 태그 살펴보기 : Video/Audio :
필수 기능 | 052 | 테이블 추가하기 : Table :
기능 예제 | 053 | 테이블 삽입하기 : Table :
필수 기능 | 054 | 링크와 경로 이해하기 : Link :
기능 예제 | 055 | 하이퍼링크 설정하기 : Link :
기능 예제 | 056 | 링크 스타일 속성 설정하기 : Links (CSS) :
기능 예제 | 057 | 페이지 안에서 이동하는 하이퍼링크 만들기 : ID :
활용 예제 | 058 | 하이퍼링크를 이용해 원 페이지 레이아웃 디자인하기
실력 알아보기 테이블을 이용한 시간표와 즐겨찾기 만들기


여섯째 마당 폼과 비헤이비어 등으로 동적인 문서 만들기

필수 기능 | 059 | FTP와 웹 서버 및 호스팅 이해하기 : FTP & 호스팅 :
기능 예제 | 060 | 드림위버에서 서버 접속하기 : Manage Sites :
기능 예제 | 061 | 팝업 메시지 창 만들기 : Behaviors :
기능 예제 | 062 | 팝업 이미지 창 만들기 : Open Browser Window :
기능 예제 | 063 | 사이트 이동하기 : Go to URL :
기능 예제 | 064 | 원하는 페이지로 이동하기 : Navigator :
필수 기능 | 065 | 모바일용 페이지 이해하기 : 웹앱 :
필수 기능 | 066 | 웹 문서 형식 이해하기 : Form :
기능 예제 | 067 | Form 문서 선언하고 영역 구분하기 : Form/Fieldset :
기능 예제 | 068 | 폼에 문자 입력하기 : TextField :
기능 예제 | 069 | 선택을 위한 체크 박스와 버튼 추가하기 : Radio button/Checkbox :
기능 예제 | 070 | 긴 문장 입력하기 : Text Area :
기능 예제 | 071 | 파일 선택하고 입력하기 : File Field :
기능 예제 | 072 | 버튼으로 폼 완성하기 : Button :
기능 예제 | 073 | 이미지를 활용한 버튼 만들기 : Image Button :
실력 알아보기 FTP에 접속하고 팝업 메시지 표시와 화면 이동하기


일곱째 마당 사이트를 완성하는 CSS 이용하기

필수 기능 | 074 | 문서 스타일 설정하기 : CSS :
기능 예제 | 075 | Class로 새로운 스타일 만들기 : New CSS Rule/CSS :
기능 예제 | 076 | CSS 속성 수정하기 : Edit Rule :
기능 예제 | 077 | Div에 적용된 Float 속성 초기화하기 : Clear :
기능 예제 | 078 | 패널을 이용한 CSS 관리하기 : CSS Designer 패널 :
활용 예제 | 079 | 동영상 장면 전환처럼 CSS 트랜지션 적용하기
기능 예제 | 080 | 스타일 시트를 외부 문서로 공유하기 : New Style Sheet File :
활용 예제 | 081 | 내비게이션 레이아웃 적용하기
활용 예제 | 082 | CSS를 이용해 스타일 적용하기
활용 예제 | 083 | Section과 Article로 레이아웃 디자인하기
활용 예제 | 084 | 스타일과 Div를 활용해 배너 만들기
활용 예제 | 085 | 사이트 아래에 푸터 영역 만들기
실력 알아보기 콘텐츠 여백과 테두리 설정하기


여덟째 마당 모바일을 위한 반응형 웹 디자인하기

필수 기능 | 086 | 모바일 작업 환경 이해하기 : Fluid Grid Layout :
필수 기능 | 087 | 모바일 디자인 이해하기 : Android Design :
기능 예제 | 088 | 반응형 웹 사이트 만들기 : Fluid Grid Layout :
활용 예제 | 089 | Fluid Grid Layout을 활용한 Header 만들기
기능 예제 | 090 | 콘텐츠 영역 만들기 : Insert Div :
기능 예제 | 091 | 푸터 영역 만들기 : Footer :
기능 예제 | 092 | 반응형 웹 환경에서 콘텐츠 영역 만들기 : Image : Image :
기능 예제 | 093 | CSS 수정하기 : CSS Designer 패널 :
기능 예제 | 094 | 모바일을 위한 앱 디자인하기 : jQuery Mobile :
기능 예제 | 095 | 메인 페이지 구성하기 : Image :
기능 예제 | 096 | 콘텐츠 내용 삽입하기 : Text :
기능 예제 | 097 | 푸터 영역 만들기 : Data-Icon :
실력 알아보기 모바일 문서 페이지 추가하고 테스트하기


드림위버 단축키 모음
드립위버 한글/영문 비교표
찾아보기