Dreamweaver로 가능한 작업 살펴보기

웹 사이트를 제작하는 방법

웹 사이트 구조 이해

웹 디자인 단계

Git 통합을 통해 효율적으로 작업

재사용 가능한 코드 단편으로 보다 신속하게 디자인

보다 빠르게 HTML, CSS 및 JavaScript 코드 작성

프리프로세서를 통해 CSS 향상

사용자 환경 설정 지정

HTML을 사용하여 페이지 구조 정의

신속하게 태그 편집

단축키 및 오류 검사를 사용하여 코드 작성

사이트 정의

HTML을 사용하여 페이지 구조 정의

새로운 Dreamweaver 템플릿 만들기

웹 사이트를 중앙에 정렬

CSS를 사용하여 웹 페이지의 레이아웃 및 스타일 지정

CSS를 사용하여 스타일 지정

CSS를 사용하여 페이지 요소의 스타일 지정

웹 페이지에 콘텐츠 추가

Edge Web Fonts를 사용하여 작업

CSS를 사용하여 웹 페이지 텍스트의 스타일 지정

하이퍼링크를 만드는 방법

웹 디자인에 이미지 사용

표 삽입

반응형 웹 디자인의 기본 사항

시작 템플릿을 사용하여 제작

브라우저에서 미리 보기

웹 사이트의 HTML 유효성 검사

웹 사이트 게시 및 관리

프로젝트 개요 및 사이트 설정

텍스트 콘텐츠 추가 및 서식 지정

구조적 요소 및 링크 추가

글꼴 변경 및 기본 스타일 만들기

요소의 공백 조정 및 반응형 이미지 만들기

링크 및 내비게이션 메뉴의 스타일 지정

두 번째 페이지 완성과 태블릿 및 데스크탑용 사이트의 스타일 지정

웹 사이트 게시

CSS 코딩 실습

CSS 기반의 웹 사이트 내비게이션

반응형 메뉴 만들기

반응형 격자 레이아웃 만들기

미디어 쿼리를 사용하여 반응형 디자인 제작

Creative Cloud Libraries를 사용하여 에셋 관리

Creative Cloud Libraries와 함께 Adobe Stock 사용

새로운 Dreamweaver 템플릿 만들기

재사용 가능한 코드 단편으로 보다 신속하게 디자인

보다 빠르게 HTML, CSS 및 JavaScript 코드 작성

프리프로세서를 통해 CSS 향상

Git 통합을 통해 효율적으로 작업

애니메이션 웹 버튼 만들기

JavaScript 소개

미디어 쿼리를 사용하여 반응형 디자인 제작

jQuery UI 위젯을 사용하여 페이지 제작

포트폴리오 갤러리 만들기

Dreamweaver에서 HTML5 비디오 추가

반응형 사이트 제작

Photoshop 파일에서 웹 디자인 정보 추출

일괄적으로 에셋 추출