ONLINE CLASS

웹기획 홈페이지제작

COURSE FOCUS

이 강의에서 배우는 핵심 실무

도메인·호스팅·트래픽의 의미를 살펴보고 쇼핑몰 제작에 필요한 지식과 전략을 정리하며 웹기획을 시작합니다. 로그인·고객센터 배너가 있는 메인 시안과 좌측·퀵 메뉴의 서브 시안을 구성하고 일러스트레이터와 포토샵으로 아이콘을 제작합니다. 중앙 목록과 배너, 게시판·회원가입 화면으로 이어가며 사이트 기획을 실제 홈페이지 구성 요소로 구체화합니다.

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

◆
기업이 선택한 신뢰 강의

검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.

자세히 보기  >
♥
수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기  >
REAL REVIEW

수강생 리얼후기!

실제 수강생의 학습 경험을 확인해 보세요.

수강후기를 불러오는 중입니다.

RECENT Q&A

최근 수강질문

최근 등록된 수강질문을 작성순서대로 확인해 보세요.

ALZIO DEEP GUIDE

웹기획을 더 깊게 이해하기

19강은 도메인·호스팅·쇼핑몰 기획에서 메인·서브 시안·메뉴·배너·게시판·회원가입으로 이어집니다. 공개 설명이 비어 있는 회차는 실제 제목 수준으로 안내하며 구체적 산출물을 추측하지 않습니다.

공식 기술정보 확인19강 커리큘럼 연결2026 현재 기술정보

웹기획 홈페이지제작 · 19강 · 12시간 11분

01

웹기획은 무엇인가

웹기획은 사이트의 목적·고객·콘텐츠·탐색·행동과 제작 협업을 설계하는 일입니다. 화면을 그리는 작업은 그 일부이며 실제 사용자가 어떤 정보를 찾고 어디로 이동하는지를 함께 정합니다.

02

관련 플랫폼과 개발도구의 관계

정보구조는 콘텐츠의 묶음과 관계, 사용자 흐름은 목표까지의 이동, 와이어프레임은 화면의 구조를 다룹니다. 빌더·CMS·직접 개발은 구현 선택지입니다. 마케팅·분석·SEO와 연결되지만 디자인 도구나 코딩을 모두 대체하지는 않습니다.

03

웹기획의 핵심 기능

기술 자체의 기능과 이 강좌의 직접 학습 범위는 다릅니다. 아래 연결 표시는 저장된 공개 커리큘럼에 근거합니다.

목표·고객·콘텐츠

누구에게 어떤 정보를 제공할지 정합니다. 콘텐츠와 행동을 연결합니다. 구체적 조사 기법 전체는 실제 회차를 확인합니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

정보구조·탐색

메뉴·하위 페이지의 관계를 만듭니다. 이름과 이동 경로를 대조합니다. 메뉴 수를 늘리는 것만으로 찾기가 쉬워지지는 않습니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

흐름·시안

로그인·문의·상품·게시판 흐름을 배치합니다. 구조와 시각 표현을 나눕니다. 화면 시안과 서버 동작은 다릅니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

빌더·CMS·개발

콘텐츠와 운영 요구에 맞는 제작 방식을 비교합니다. 비용·유지·이식 조건을 봅니다. 과거 빌더의 현재 서비스 상태를 확인합니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

전환·분석

유입과 고객 행동을 구분합니다. 목적에 맞는 지표를 계획합니다. 분석 도구 전 기능을 강좌 범위로 확대하지 않습니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

SEO·콘텐츠 관계

검색기가 페이지를 이해하고 사용자가 판단할 내용을 구성합니다. 검색 순위를 보장하지 않습니다. 당시 플랫폼 기법과 현재 기술 조건을 구분합니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인
04

이 과정의 실제 작업 흐름

1~2강은 구축 기본과 쇼핑몰 기획, 3~9강은 스토리보드·레이아웃·로고·웹메뉴·로그인·배너·게시판·하단의 메인 시안입니다.

10~12강은 서브시안과 무비/메뉴·중앙 화면, 13~16강은 CSS·플래시 표기·상단·리스트·배너·JS 연결, 17~19강은 서브·보드·회원가입 마무리입니다. 상세 정보가 없는 회차를 개발 명세나 구현 전체로 확대하지 않습니다.

  1. 구축 조건
  2. 쇼핑몰 전략
  3. 메인 시안
  4. 서브·무비 시안
  5. 상하단·배너
  6. 보드·가입 마무리
05

핵심 구조를 이해하는 방법

목표→고객 과제→페이지와 콘텐츠→메뉴와 행동→시안→구현·검토로 연결합니다. 전환은 문의·구매 등 정의한 행동이며 노출·방문·완료를 따로 봅니다. 검색 노출이나 매출 순위를 기획만으로 보장하지 않습니다.

06

실무 적용과 결과 확인

3~10강의 시안을 보며 각 영역의 목적·메뉴 목적지·필요 콘텐츠를 적어 보세요. 보이는 배치와 사용자가 이동할 경로를 구분하는 추가 연습입니다. 실제 분석 수치나 사용자 조사 결과를 강좌 제공물로 추측하지 않습니다.

13~19강은 메인에서 서브·게시판·가입으로 이동할 때 문구와 구조를 비교하세요. 상태별 화면을 정리하는 기획 연습입니다. 제목의 회원가입 마무리를 보안 인증 시스템 전체의 구현으로 확대하지 않습니다.

07

이 강좌에서 집중할 전문주제

전문 축은 메인·서브 시안의 요소를 실제 제작 순서와 연결하는 것입니다. 로고·메뉴·배너·리스트·보드가 어떤 역할을 하는지 제목 근거에서 읽습니다.

프로젝트의 결과를 시안·화면·업무 기능으로 나누어 보세요. 회차별 상세 설명이 부족하므로 와이어프레임 도구·분석 설정·결제 구현 등 확인되지 않은 기법을 학습 범위로 추가하지 않습니다.

08

현재 기술과 강좌 환경의 관계

정확한 도구·플랫폼·촬영 버전은 미확정입니다. 13강의 플래시 관련 표현은 당시 시안/구현 맥락이며 현재 기본 웹 구현으로 안내하지 않습니다. Adobe Flash Player 지원은 종료되었습니다.

현재 웹기획은 문서 구조·콘텐츠·탐색·사용자 흐름과 검토를 중심으로 재해석할 수 있습니다. 구형 무비 표현의 현재 대안은 웹 표준과 필요 기능을 별도로 검토합니다. 현대 분석·프로토타입 도구를 촬영 당시 내용으로 바꾸지 않습니다.

09

목적에 맞는 기술 선택과 비교

아래 비교는 목적과 작업 구조를 선택하기 위한 안내입니다. 다른 기술 전체를 본 강좌에서 가르친다는 뜻은 아닙니다.

목적에 맞는 기술 선택과 비교
선택지작업 접근이 강좌와의 관계
675번메인·서브 시안과 제작 순서화면 구성 중심
773번빌더 선택·협업·E마케팅사업·운영 기획 중심
구현 개발입력·서버·인증·배포시안과 별도 검증
10

기술개념과 알지오 커리큘럼 연결

회차는 공개 커리큘럼의 실제 순서입니다. 실습 후 응용 제안과 현재 기술 참고정보를 강의에서 제공하는 실습으로 해석하지 않습니다.

기술개념과 알지오 커리큘럼 연결
기능·개념무엇인가실무 의미강좌 회차학습 상태
구축·쇼핑몰 기획도메인·호스팅·전략설명 확인 범위1·2강강좌에서 직접 학습
공개 제목 기준 기초 소개메인 시안 요소상세 도구·범위 미확정3·4·5·6·7·8·9강기초 소개 · 세부 범위 미확정
공개 제목 기준 기초 소개서브·무비 시안제목 수준 연결10·11·12강기초 소개 · 세부 범위 미확정
공개 제목 기준 기초 소개상하단·리스트·배너·서브·보드세부 구현 미확정13·14·15·16·17·18·19강기초 소개 · 세부 범위 미확정
11

처음 배울 때 자주 생기는 오해

기획이 화면 시안만인가?

목적·콘텐츠·흐름도 필요합니다. 본 과정은 시안 중심의 공개 범위입니다. 전체 기획 방법론을 임의 추가하지 않습니다.

모든 회차에 상세 실습 설명이 있나?

많은 회차는 제목만 확인됩니다. 기능명과 제목 수준으로 제한합니다. 제공 파일이나 구체적 도구를 추측하지 않습니다.

무비가 현재 Flash 구현을 뜻하나?

당시 표현 맥락입니다. Flash Player는 지원 종료입니다. 현행 구현은 별도로 검토합니다.

회원가입 마무리면 인증이 완성인가?

제목에서 전체 인증 범위를 확정할 수 없습니다. 화면·서버·보안은 다릅니다. 직접 구현 보장을 하지 않습니다.

시안이 좋으면 전환이 보장되나?

콘텐츠·행동·운영 검토가 필요합니다. 화면과 실제 성과를 나누세요. 수치나 순위를 보장하지 않습니다.

현재 분석 도구 전 기능도 배우나?

공개 목록에서 확인되지 않습니다. 목표와 후속 분석을 계획할 수 있습니다. 직접 학습으로 표시하지 않습니다.

12

다음 학습 방향

스타트업 웹기획 E마케팅

스타트업 웹기획 E마케팅 과정에서 빌더 선택·협업·마케팅의 다른 목적을 확장합니다.

자료 보기 →

드림위버 강의 [홈페이지제작]

드림위버 강의 [홈페이지제작] 과정에서 기획 시안과 다른 실제 웹페이지 코딩 흐름을 비교합니다.

자료 보기 →

웹기획 관련 과정 비교

입문·실무·심화 과정의 실제 커리큘럼을 목적에 맞게 비교합니다.

자료 보기 →

실습과 복습 계획

새 환경에서 예제를 확인하고 학습 계획을 세우는 방법을 살펴봅니다.

자료 보기 →

기술정보는 Google Search Central·NAVER·W3C의 공식자료를 기준으로 검토했으며, 강좌 범위는 웹기획 홈페이지제작의 공개 커리큘럼과 구분했습니다.

공식 기술정보 확인일: 2026-10-05 · 강좌 업데이트일을 의미하지 않습니다.

웹기획 홈페이지제작 웹기획 홈페이지제작
  • 웹기획 홈페이지제작

  • 강의구성
  • (19강) 전체 : 12시간 11분|평균 : 38분28초
  • 이용기간/강사
  • 1개월2개월
    알지오 R&D [IT]
  • 증빙가능
  • 수료증, 수강증, 학습진도
  • 수강료
  • 330,000원할인165,000원
?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q 초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

  • 01.29분 웹사이트 구축의 기본사항
    도메인, 호스팅, 트래픽 등 웹사이트를 구축함에 있어 기본적인 사항에 대해 알아보자
    웹기획 이란 무엇인가?, 웹기획의 역할, 웹사이트 구축단계, 분석단계, 설계, 구현, 검수, 도메인 이란?, 한국도메인 등록대행자, 규칙1- 영문자(A-Z) 숫자(0~9) 하이픈(-), 규칙2- Name 의 길이는 최소 2자~63자, 규칙3- 중복되지 않는 고유주소, 도메인을 유용하게 활용하기 위한 방법, 도메인에는 어떤게 있을까?, 원하는 도메인 검색하기, 웹 호스팅이란?, 나만의 웹서버를 갖기위해선 웹 호스팅이 필요하다, 호스팅의 종류, SSL, 보안서비스를 받고있는지 확인실습, DB호스팅, 이미지 호스팅, 트래픽이란?, 알기쉽게 트래픽에 대해 예를 들어봅시다, 호스팅 서비스를 제공해주는 사이트에서 확인, 내 홈페이지의 트래픽 확인해보기, 계산하기, 파악하면서 준비
  • 02.36분 쇼핑몰 제작 지식과 본격적인 웹 기획
    쇼핑몰 제작을 위해 필요한 지식을 공부하고 주의사항, 전략 에 대해 알아보자
    쇼핑몰 기본 시스템, 업데이트시 자동설정 및 반영, 상황별 sms, 결제모듈, 서비스, 만족, 배송, 쇼핑몰 빌더임대, 쇼핑몰 솔루션, 쇼핑몰을 위해 준비된 별도의 프로그램 필요, 쇼핑몰 솔루션(임대형, 독립형) 으로 나뉩니다, 임대형의 장점, 임대형의 단점, 독립형의 장점, 독립형의 단점, 임대형, 독립형의 차이점, 벤치마킹하고픈 쇼핑몰 파악하기, SSL 확인작업 실습, 소스보기, SSL 찾기, SSL 이 없다면 보안인증 자체가 없거나, 자체 쇼핑몰, 쇼핑몰 운영을 할때 알아야할 기술, 웹기획-성격에 따른 콘텐츠, 사용자 분석, 아이템 선정, 시장조사및 분석, 동종업계 분석, 경쟁업체 장단점 파악, 주의해야 할점, 차별화 전략, 웹사이트 제작 관련 홈페이지 만들기, 홈페이지 해상도 사이즈, 디스플레이 등록정보, 사이트 가로 폭 길이
  • <제1 스타일 - 시안 디자인>
  • 03.26분 메인시안 - 스토리보드, 레이아웃, 로고
    스토리보드 소개, 한계가 있는 주먹구구 방식, 리뉴얼, 홈페이지 10레벨 스킬학습?, 소스를 구입해도 할수 없는것, 일러스트, 플래시, 제작목적, 제작시 실패원인, 스토리보드, 호스팅 후 셋팅, FTP, 원격 파일 열기, 디렉토리 경로 설정, 고급 FTP 설정, 화면개요, No Frame, 단, 공백, 제로보드, 메인시안 참조, 신규 레이아웃, New Guide, Lock Guides, 로고제작, 실제내용사이즈, Navigator, 폰트입력 및 셋팅, 그라디언트 컬러, 제작, D제작, 모양주기, Layers 정리, 로고 배경만들기
  • 04.28분 메인시안 - 웹메뉴, 서브트리
    그라디언트 로컬 사용자 배려, 메뉴제작, 새문서 생성, Navigator, 그라디언트, 테두리 마감, 배경색 채우기, 그라디언트 웹상에서 효과 확인, Save for web, 플래시무비를 먼저 포토샵에서한 이유, 우측 메뉴(홈페이지 솔루션), 그라디언트 효과, 레이어스타일 복사, 메뉴 상단내용, 동일하게 간격 변경, 폰트 뭉그러지지 않게 처리, 작은아이콘 제작시 상식, 우측메뉴 완성, Color Libraries, 하부트리 내용, 구분선 삽입, 하부트리 배경 및 라인, 확대 작업, 둥근테두리 적용시 문제점, 레이어관리, 폴더 복사, 상품안내, 여백 조정, Styles, Styles 변경
  • 05.29분 메인시안 - 로그인, 고객센터 배너
    우측상단 메뉴, Character, 좌, 중앙, 우 1단 개별 사이즈, 웹메뉴, 홈페이지 컬러스타일, 새문서 만들기, Color Picker, 테두리, 적용해보기, 아이디, 비번 등 구성 기획, 텍스트박스 등 1차작업, 구도 설정, 로그인버튼, Styles, Styles 수정, 폰트 설정, 회원가입, pw helf, 사이즈 측정, Styles 수정, 폴더 생성 후 스타일 복사, New Guide, 상단에 넣어줄 말, 배경색 지정이 안될때, 레이어 폴더별정리, 적용해보기, 고객센터, 색다른 박스, 베드사례, 굳 사례, Layer Style, 고객지원센터 폰트 설정, 내용정리
  • 06.33분 메인시안 - 중앙무비용 메인, 우측 배너
    배너작업 추가 보충, Modify, Feather, 고객센터 비슷한 배경매칭, Color Picker, Color Libraries, 중앙무비용 일러스트 구매시 주의점, 일러스트 수정 후 포토샵 삽입, stroke, 일러스트 작업, 사이즈 조정, 위치 변경, 표지판에 글씨 삽입, 포토샵 불러오기, 우측배너 사이즈, 배경작업, stroke, 내부배너제작 그라디언트, 작업내용-1, 그림자 효과, 작업내용-1-1, Character, 작업내용-1-2, 도형 만들기, 링크용 버튼, 중앙라인 분리, 작업내용-2, 작업내용-2-1, GO버튼, 수정할수 있는 정돈된 폴더 및 레이어
  • 07.37분 메인시안 - 좌 BEST!!, 우 순위
    캔버스 늘리고, Canvas size, 다중 가이드 셋팅 쉽게 계산된 방법, Style-Fixed size, Style-Normal, Lock Guide, 제일팔고싶은 상품위치 제작, 작업내용-1, 사각 테두리 만들기, stroke, 작업내용-2 배너공식, 작업내용-3, Color Picker, Group, 작업내용-4, 작업내용-4-1, Opacity, 작업내용-4-2, 자간 간격, 작업내용-5, Layer copy, GO 버튼 (핵심), 버튼 배경 생성, 고객의 소리, 배너 테두리 만들기, Fill, 작업내용-1, 작업내용-2, shape, 이미지 회전, 작업내용-3, 완료 작업내용, 우측배너, 둥근사각 만들기, 그라데이션, 작업내용-1, 작업내용-1-2, 작업내용-1-3, 작업내용-1-4, 구분선 삽입, 작업내용-2, 작업내용-2-1, 완성작 비교, 오늘의 핵심
  • 08.33분 메인시안 - 중앙, 게시판 출력, 오버시 및 제작
    메인 가장중요한 위치설명, 작품보고 더 좋은 아이디어!!, 모나리자 예, 원본제작의 어려움, 중앙상단, 1스타일- 상단배너, 작업내용-1, contract selection, 작업내용-1-2, smooth selection, 내용넣기, 상품명, 바로가기, 버튼작업, 버튼-둥근사각, 버튼 완료 예, 중앙우측 2배너, 내용넣기, web design 넣기, 간단하지만 눈에띄게, 스타일까지, 알지오프로젝트 넣기, shape 넣기, abstract styles, 중앙우측 3배너, 2와 다른 내용스타일, 서비스의 톡특화, 원본비교, 가이드 맞춰 재정렬, 마우스 오버용 게시판버튼, 버튼배경, 버튼 사이즈, 버튼 그라디언트, 작업내용-1, 질문답변버튼, 질문답변_c 버튼, 작업내용-1-1, 잦은질문, 잦은질문_c, 공백 버튼제작, 보드 라인작업, 초이스시 나오는 선, 질문답변 초이스시 나오는선, 잦은질문 초이스시 나오는선, 보드 통 라인, Rasterize Layer, 상단 라인 지우기
  • 09.1시간 17분 메인시안 - 하 3단, 카피라이트 마무리
    하단에 들어갈 구도, 하단 내용, image size, 좌 내용, Rounded Rectangle, Color Picker, 배경/테두리 지정, 작업내용-1, 타이틀 컬러, 작업내용-1-2, 화살표 만들기, 작업내용-1-3, New, New Guide, Lock Guides, 구분선, 숫자, 특색주기, go 버튼, Gradient, stroke, 텍스트 입력, 스타일 변형하기, 내용 넣기, 이후작업을 위한 확장, 완성작, 중앙하단작업-1, 중앙하단작업-2, 중앙하단작업-3, 중앙하단작업-4, 레이어 병합, 수정 작업, 중앙하단작업-5, 페이지 분할, 구분선 만들기, 중앙하단작업 - 1단 내용, shaoe 삽입, 중앙하단작업 - 2/3단 내용, 완성작, 강사도 몰랐던 기법 발견, 배경 설정, Gradient Presets, 우측배너 - 1, shaoe 삽입, 우측배너 - 2, 우측배너 - 3, 배경 생성, 우측배너 - 마무리, 내용 넣기, view 버튼, 완성작, 메인홈페이지 확인, 하단 카피라이트, 로고 불러오기, 로고 스타일 변경, 하단 카피라이트 내용 넣기, 배경 생성, 완성 메인 시안
  • 10.51분 서브시안 - 좌/퀵 메뉴, 상단 무비용 제작|일러스트/ 포토샵/ 을 이용해 아이콘생성, 메뉴구성을 해 봅시다.
    스크롤바, 서브페이지, 홈페이지 하단, 로그인 창 사이즈, 만들 홈페이지 사이즈, 일러스트 작업, 일러스트 열기, 그룹, 각 카테고리 마다 하나의 아이콘 생성, 레이어 생성, 아이콘 생성, 사이즈 포장, 포토샵 시작, 테두리 만들기, Layer Picker, 원메뉴, 둥근사각, 타이틀, 그라이언트 효과, 모양내기, 메뉴와 메뉴간 간격 조절, 가이드 고정, width/height, 원칙, position 설정, new guide, guide 고정, 라인색, 통합, 화살표 만들기, 화살표 내용 만들기, Custom shape tool, Fixed size, 박스 스타일 만들기, Rounded Rectangle tool, 스타일 변경, color overlay, 레이어 폴더 만들기, Fixed size, 만든 이미지 복사, 카테고리별 메뉴 만들기, 일러스트 아이콘 넣기, 카테고리 copy, 기준 잡기, 레이어 폴더 만들기, 카테고리 생성, 일러스트 파일 가져오기, 내용입력, Quick Menu, Rounded Rectangle Options, 테두리 박스 라운드 처리, Rounded Rectangle tool, 라인넣기, 일러스트 아이콘 가져오기, 카테고리 바로가기, 이미지 수정
  • <제2 스타일 - 무비코딩>
  • 11.40분 무비제작 - 로고, 웹메뉴 제작
    배경깔기, 웹용 저장하기, 사용될 레이어 추가 및 설정, 레이어 추가, 레이어 이름 지정, 마스크작업, Convert to Symbol, Insert Frame, 결과 미리보기, Actions - Frame, 로고 - 투명버튼, 하이퍼, Behaviors, 반응 구성안내, 배경만 png-8? png-24?, 플래시 배경작업, 서브트리 BG, 새문서 생성, png, gif 저장시 차이점, 서브 그래픽심볼, 폴더 생성 및 정리, 5 버튼심볼, 내용 입력, 설정, over 설정, 내용 배치, 내용 복사, 트리버튼 쉽게카피, Down, hit, 개별액션 및 서브트리 반응 완료, movie clip, 마스크작업, Actions - buttom, swap Symbol, Actions - Frame, 결과 미리보기, 오늘의 하이라이트
  • 12.34분 홈페이지 메인화면 일러스트를 이용한 중앙무비 만들기
    일러스트 수정하기, 플레시에서 작업할수 있는것, 붙여넣기, 포토샵에서 가져오기, 웹용으로 저장, 플레시 작업, size 지정, '0' 으로 되었는지 확인, 표지판에 텍스트 입력, anti-alias 효과, 애니메이션 효과, 공백키프레임, 끝까지 유지시키기, 이미지 불러오기, Graphic Symbol 로 변환, 순차적 이미지 액션, 모션 주기, 이미지 위치 지정, 이미지 사이즈 조절, color : alpha, 모션 주기, 움직이는 효과 주기, 가이드라인, 물결형태로 움직임 주기, 그린 선 모양대로 따라가기, 동선따라 움직이지 않도록 처리, 모션 주기, 레이어 추가, Movie clip 생성, 내용무비 불러와서 영역설정, '테두리' 레이어 잠금, shape tween, 레이어 추가, Graphic Symbol 로 변환, 커서가 깜빡거리는 효과, 내용 삽입, 커서 작업, 글씨 내용 입력, 한글자씩 나오도록 텍스트 속성 분해, 액션 효과 주기, 텍스트 스톱 작업, Timeline Control-stop, 서브무비, Remove Frames
  • <제3 스타일 - 콘텐츠 제작>
  • 13.42분 메인상단 - css/플래시점선, 로고, 메뉴, 우상단
    강의를 이해하기위한 선수학습, css기능제작, 한파일 적용, 에디트 플러스, st.css, 문서 선택기 옵션, 사이트 미리보기, 나모 - 스타일 지정, 드림위버 - 스타일 지정, 플래시링크 점선, 배경, 한배경 공유, 편집기가 아닌 에디트가 편한 이유, 주석처리, 나모 - 문서 여백없애기, 드림위버 - 문서 여백없애기, body, 나모/드림위버 메인 테이블 작업, Border, 드림위버 - 셀 합치기 작업, 나모 - 셀 합치기 작업, 작업소스 에디트 적용, 공백 제거, 플래시 링크스크립 구현, 로고, 결과 확인, 플래시 메뉴적용, 결과 확인, 우 상단내용 링크, 제로보드 회원가입 링크, 즐겨찾기 스크립 적용, 소스보기, 우상단 소스적용, 프로젝트 확인, Home버튼 제작, 좋은사례/나쁜사례, 이미지 사이즈 쉽게 맞추고 소스적용, 나모 - 이미지 원래 크기로, 이미지 같은 셀 삽입시 문제점, 표 속성, 공백 제거, 링크네임 넣기, 프로젝트 확인, 다음시간 전 알고 있을 프로그램
  • 14.47분 메인상단 - 로그인, 중앙무비, 우상단 Map
    Blur효과, Adjust color / Bevel 효과등, 중앙무비 삽입, FTP실행, 찾기/바꾸기, 셀 합치기, 로그인사이즈 정하기, 중앙무비, 우측배너, 웹용으로 저장, 이미지분할하면 안되는 이유, 쉬운 삽입방법, 이미지맵 확실히 알기, 이미지맵 영역, usename, usemap=#imegemap1"복사, 링크 점선 삭제하지 않는것이 좋다, 링큰점선 없애는 법, 좌측 고객지원, 쉽게 이미지 삽입, 로그인창 코딩, 로그인 후 비번찾기/ 로그아웃 버튼 제작, outlogin_skin, 로그인BG, 로그인 전/ 후 버튼 분할, 영역확대, 웹용으로 저장, 표속성, 로그인 테이블 맞추기, 표, 셀합치기, 실제 로그인 전 페이지 스킨 코딩, 홈 속성, 제로보드에서 쓰는 아이콘 명으로 변경하기, 스킨 이미지명 변경 후 적용, 아웃로그인 스킨에 올리기, 실제 로그인 되는 곳에 반영, 폼 속성, 스타일, 색상지정, 로그인 한 후 속성, 스타일
  • 15.40분 메인핵심 - 중앙 최신 리스트, 좌 및 우배너
    살펴보기, 우측 중앙 배너 수정, save for web, 파일 불러오기, 중앙리스트 개별저장,, 이미지 분할, save for web, 라인 수정하기, 중앙 작업용 테이블 확장, tr 붙여넣기, 공백 지우기, 셀 합치기, 표 만들기, best, 이미지 맵, 이미지가 나오게 하려면?, 고객의 쓴소리, 하이퍼링크 만들기, 상단바, 이미지 맵 처리, 중앙 하단 2배너, 이미지 맵 처리, 구분선 삽입, 우배너, 이미지 맵 처리, 중앙 게시판 알아둘 사항, 버튼 및 내용 테이블, 파일 인쿠르드, 이미지 등록정보 확인, 인쿠르드 대상파일, 이미지 실수할수 있는 부분, 이미지 경로, 버튼 맵처리
  • 16.32분 메인하단 - 좌우 마무리 js오버연동
    이미지 불러오기, 마우스 오버, 사각 선택툴, 합성모드, 이미지분할, 웹 용으로 저장, 드림위버, 웹용HTML 저정, SIZE 지정, Find and Replce, 이름 지정, Swap Image, Link 걸기, 드림위버 작업소스 확인, 타이틀변경, 링크점선 없애기, 스크립트 복사, 웹용으로저장, 바꾸기, 자바스크립트를 가져와 홈페이지에 적용, 홈페이지 우측 하단 이미지넣기, 나모 웹에디터 실행, 하이퍼링크 만들기, 하단배너, EditPlus 에서 작업하기, 이미지 파일명 수정, 마우스 안나오게 숨기기, 하단카피 제작, 나모웹에디터, 하이퍼링크 만들기, 셀추가, 셀합치기
  • 17.43분 서브 - 서브제작 1
    서브 만들기전 설계, 새창열기, 웹사이트 스토리, 넓이/높이 입력, Rasterize 화 시키기, Stroke, 공백지우기, 레이어 병합, Smudge Tool, 배경넣기, Custom Shape Tool, 레이어 복사, Ctrl+T, 레이어 복사, 그룹설정, 이미지분할, 웹용으로 저장, 아이콘 그림크기로 정렬, Quick menu 열기, Divide Slice, 파일형식, 필요없는 이미지 삭제, 메뉴수정, 웹코딩, 디렉토리 만들기, 좌측 구분선, 셀속성, 높이지정, 셀선택, 표 속성, 구분선, 셀합치기, 셀 속성, 웹용으로 저장, 등록정보, 파일/그림삽입하기, 하이퍼링크 만들기, 왼쪽으로 맞춤, 포토샵으로 작업하기, Canvas Size 조정
  • 18.41분 서브 - 서브제작 2
    중간타이틀, 테이블 생성, 에디트플러스를 이용한 테이블 생성, 이미지 사이즈 확인 및 적용, 이미지 경로 지정, 두번째 셀 생성, 이미지 소스 쉽게 불러오는 방법, 페이지 경로작업, 나모-테이블 생성, Home에 하이퍼 링크, 테이블 정렬 않먹힐때, 결과값 붙여넣기, 오른쪽 여백주기, 빈셀을 이용한 사이즈 맞추기, 구분선 색깔 변경하기, 페이지별 구분 주석달기, 좌 서브별통합 롤오버, 타이틀 사이즈 확인 및 적용, 마우스오버 적용, CEO 인사 추가하기, 주소파일 불러오기, 작업내용 테스트, 회사연혁 추가하기, 경영이념 추가하기, 완성파일 확인, 다른서브에 서브통합 쉽게 적용, 왼쪽 메뉴 변경, 서브별 다른 플래시메뉴, Publish Settings, 결과물 확인, 구분 작업, 구분 작업 복사 및 적용, 파일 업로드, 바뀐메뉴 모든웹페이지 한번에 수정, 확장성 위한 서브테이블 긴급수정, 문제점 발생시 해결 방안, 나모사용자 주의사항, 서브 수정 완료, CEO 인사 적용하기
  • 19.33분 최종 - 보드, 회원가입, 마무리
    헤더, 푸터 파일폴더, 고객센터 폴더 생성, 보드용 좌메뉴, 이미지 경로 일괄 변경, 보드가 아닌 페이지 셋팅, 홈페이지 확인, 공지사항 헤더, 푸터, 원격파일로 저장, 타이틀 지정, 홈페이지 확인, 스킨 수정, 플래시 변경, 잔여 보드작업, 완성페이지 확인, 회원가입 페이지, member join, 회원가입 페이지 확인, 이용약관 낮게 나올때, 게시판 CSS, 홈페이지 확인, 게시판 연동, 최근게시물 테이블, 소요되는 소스 및 셀작업, Loop, 배경컬러 변경, 실제출력 보면서 수정, 글쓴이 아이디 출력, 여백 조정, 정렬값 넣기, 보이는 글자수 수정, 게시판 연동 설정, 관리기술 일괄수정작업, 새창 주문폼 열기, 팝업네임의 중요성, 하이퍼링크 속성, 스크립 JS파일 생성후 연동, 홈페이지 확인

강의목록 다운로드                        1:1 강의 질문&답변






도움이 필요하신가요?
💬
알지오 학습·수강 도우미
운영진이 확인한 안내를 자세히 보고, 필요하면 바로 상담하세요.
상담 상태 확인 중