웹 디자인
교육과정
Html+Dreamweaver
| 1주 | HTML(기본)작업화면 구성및 텍스트 입력/테이블 생성과 환경설정에 대한 설명/ 이미지 불러오기/ 실무를 위한 포토샵에서 이비지 테이블에 불러오기,롤 오버 삽입 /이미지 링크 및 앵커 설정 |
|---|---|
| 레이어 생성및 비헤비어 작업/ 타임라인을 이용한 다이나믹한 홈페이지 만들기/ 타임라인을 이용한 비헤비어 작업,사라지는 이미지 작업/ 실무 활용을 위한 프레임 만들기 / 폼 이해와 세부사항 설명 | |
| 2주 | 플래쉬,무비삽입,투명배경 만들기/ css스타일을 이용한 글자 색상 입히기/ 라이브러리 등록및 실행/ 템플릿 만들기와 적용/ 사운드 및 배경음악 삽입 |
| iframe 프레임 통해 문서에 다른 파일 불러오기/ 드림위버를 이용한 홈페이지 만들기 I/ 드림위버를 이용한 홈페이지 만들기 II/ 게시판 및 방명록 홈페이지에 달기/ 웹호스팅 및 FTP이해하기 |
Html5 + css3
| 1주 | HTML 기본 다지기 (웹, HTML 이해, HTML문서의 기본구조, 기본태그 익히기) HTML5와 시맨틱 태그 (HTML5의 문서 구조, 레이아웃을 위한 시맨틱태그 / 텍스트와 하이퍼링크태그 (텍스트 관련태그, 목록관련 태그, 표 관련태그,하이퍼링크 태그)/ 멀티미디어를 다루는 태그 (이미지관련태그, 이미지맵, 멀티미디어재생,비디오파일변환) |
|---|---|
| 폼과 관련된 태그 (폼만들기,정보입력태그,다양한 폼요소들,상품주문서 만들기)/ 스타일시트 기초 (웹디자인을 실현해 주는CSS 기본문법)/ 다양한 효과를 만들어내는 CSS 3.0 (스타일우선순위,선택자,가상클래스) | |
| 2주 | 텍스트 관련스타일 (글꼴,텍스트 스타일,목록 스타일)/ 색상과 배경을 위한 스타일 ( 색상스타일,배경색과 배경이미지,그라데이션 효과 배경)/ 레이아웃을 위한 스타일 (박스모델,테두리관련 속성,블록레벨과 인라인레벨,포지셔닝,다단,표스타일) |
| 변형을 위한 스타일 (transform 속성, 시간의 변화를 만들어주는 트랜지션, 트랜지션 애니메이션)/실무예제 실습하기 1 (CSS 를 이용하여 다양한 사진효과를 적용한 갤러리페이지 만들기)/ 실무예제 실습하기 2 (드롭다운 내비게이션을 이용한 웹사이트 메인페이지 만들기) |
반응형웹, Javascript+Jquery
| 1주 | 반응형 웹 디자인과 미디어 쿼리/반응형 웹을 만드는 또 다른 방법, 유동형 레이아웃/ 그리드 레이아웃으로 웹사이트 제작하기 |
|---|---|
| 모바일 앱에서 활용가능한 자바스크립트를 이용한 API 명령어/ 동작 언어, J-vaScript 기초 작성법?(J-vaScript Library, JQuery 기초 작성법)/ 다양한 배너 스타일링 (HTML5 아웃라인과 Section 요소 ,class 요소에 식별자 설정, jQuery sound 제어, 브라우저 호환성검사 ) | |
| 2주 | 링크 갤러리 구축 (body 스타일링, CSS3 트랜지션 지원, jQuery로 페인드인/아웃 구현)/ 내비게이션 스크립팅 (활성화된 아이템 표시 유지 스타일링, 이벤트 구현하기, 네임스페이스,Plug-In)/ 애니메이션 버튼 디자인 (LESS 함수, buttons_wrap 스타일링, jQuery 사운드 Plug-In,SimpLESS) |
| 탭 메뉴 애니메이션 디자인 (웹 폰트, 외부 파일 호출, CSS3 &LESS 탭 메뉴 스타일링)/ CSS3 애니메이션 폼 디자인 (컨테이너 요소 스타일링, jQuery 폼 디자인)/ HTML5 비디오 플레이어 디자인 (플러그인 옵션 설정, 대상 객체 참조& 비디오 컨테이너 내부에 클래스 추가) |
