- 기초
-
Dreamweaver로 가능한 작업 살펴보기
-
웹 사이트를 제작하는 방법
-
웹 사이트 구조 이해
-
웹 디자인 단계
- 작업 영역
-
Git 통합을 통해 효율적으로 작업
-
재사용 가능한 코드 단편으로 보다 신속하게 디자인
-
보다 빠르게 HTML, CSS 및 JavaScript 코드 작성
-
프리프로세서를 통해 CSS 향상
-
사용자 환경 설정 지정
-
HTML을 사용하여 페이지 구조 정의
-
신속하게 태그 편집
-
단축키 및 오류 검사를 사용하여 코드 작성
- 페이지 구조 정의
-
사이트 정의
-
HTML을 사용하여 페이지 구조 정의
-
새로운 Dreamweaver 템플릿 만들기
-
웹 사이트를 중앙에 정렬
- CSS를 사용한 작업
-
CSS를 사용하여 웹 페이지의 레이아웃 및 스타일 지정
-
CSS를 사용하여 스타일 지정
-
CSS를 사용하여 페이지 요소의 스타일 지정
- 텍스트를 사용한 작업
-
웹 페이지에 콘텐츠 추가
-
Edge Web Fonts를 사용하여 작업
-
CSS를 사용하여 웹 페이지 텍스트의 스타일 지정
- 이미지 및 링크 추가
-
하이퍼링크를 만드는 방법
-
웹 디자인에 이미지 사용
- 표 만들기
-
표 삽입
- 반응형 페이지 기초
-
반응형 웹 디자인의 기본 사항
-
시작 템플릿을 사용하여 제작
- 웹 사이트 테스트
-
브라우저에서 미리 보기
-
웹 사이트의 HTML 유효성 검사
- 사이트 게시
-
웹 사이트 게시 및 관리
- 간단한 웹 사이트 만들기
-
프로젝트 개요 및 사이트 설정
-
텍스트 콘텐츠 추가 및 서식 지정
-
구조적 요소 및 링크 추가
-
글꼴 변경 및 기본 스타일 만들기
- 웹 사이트의 스타일 정의 및 게시
-
요소의 공백 조정 및 반응형 이미지 만들기
-
링크 및 내비게이션 메뉴의 스타일 지정
-
두 번째 페이지 완성과 태블릿 및 데스크탑용 사이트의 스타일 지정
-
웹 사이트 게시
- CSS를 사용한 디자인
-
CSS 코딩 실습
-
CSS 기반의 웹 사이트 내비게이션
- 반응형 레이아웃
-
반응형 메뉴 만들기
-
반응형 격자 레이아웃 만들기
-
미디어 쿼리를 사용하여 반응형 디자인 제작
- CC Libraries 및 Stock
-
Creative Cloud Libraries를 사용하여 에셋 관리
-
Creative Cloud Libraries와 함께 Adobe Stock 사용
- 사이트 계획
-
새로운 Dreamweaver 템플릿 만들기
-
재사용 가능한 코드 단편으로 보다 신속하게 디자인
-
프리프로세서를 통해 CSS 향상
-
Git 통합을 통해 효율적으로 작업
- 애니메이션
-
애니메이션 웹 버튼 만들기
- 스크립팅
-
JavaScript 소개
-
미디어 쿼리를 사용하여 반응형 디자인 제작
-
jQuery UI 위젯을 사용하여 페이지 제작
- 다이내믹한 콘텐츠
-
포트폴리오 갤러리 만들기
-
Dreamweaver에서 HTML5 비디오 추가
- Bootstrap
-
반응형 사이트 제작
- Photoshop을 사용한 작업
-
일괄적으로 에셋 추출