Slice&link.

Presentation on theme: "Slice&link."— Presentation transcript:

1 Slice&link

2 디자인 작업 후 흐름도 메인 페이지의 파일명은 항상 index 로 저장!!! psd jpg(gif, png) html 내컴퓨터
서버 + html tag index.psd index.html + html tag info.psd info.html ftp:// Ftp프로그램(윈도우탐색기)사용 슬라이스 코딩 Server (web hosting) jpg(gif,png)와 html 등 파일 그대로 서버에 업로드 history.psd + html tag history.html 사용자는 브라우저로 접속 ….psd + html tag ….html

3 이미지 슬라이스 1) 이미지 슬라이스 이유 - 로딩속도 향상 - 이미지 기능별 작업 2) 방법
- 이미지 선택 후 새로운 이미지로 만들기 - 가이드에 따른 슬라이스 - 슬라이스 툴 3) 파일형식(file > save for web) - html and images - images only - html only 4) slices - all slice : 모든 슬라이스 저장(자른영역 + 자동으로 생긴 영역) - all user slice : 직접 슬라이스 툴로 그린 영역만 저장 - selected slice : 옵션창에서 선택된 슬라이스만 저장

4 경로(hyperlink) ● 절대경로 - http://를 포함하여 완전한 url 주소로 링크
- 다른 서버상에 있는 문서에 링크할 때 사용 - 동일한 사이트에 있는 문서에 대해서도 사용가능 : 사이트를 다른 url로 이동할 경우 링크가 깨지므로 사용자제 - ex01) - ex02) - ex03) ● 상대경로_문서 > 가장 많이 쓰이는 링크경로방식 - 경로를 정의하고자 하는 문서가 기준이 되는 방법 - 현재 문서와 링크된 문서가 같은 사이트(서버)에 있고 계속 같은 사이트에 있을 경우 - 전체 폴더를 이동하여 동일한 상대경로를 유지하는 경우는 업데이트가 필요가 없음 - 개별파일의 경로이동이나 파일이름을 변경할 경우는 업데이트가 필요 - ex01) 같은 폴더의 파일에 링크 : <a href='profile02.htm'> or <a href='./profile02.htm'> - ex02) 하위 폴더의 파일에 링크 : <a href='resource/resource01.htm'> - ex03) 상위폴더의 파일에 링크 : <a href='../index.htm> - ex04) 상위폴더 내 경로의 폴더 안 파일에 링크 : <a href='../gallery/gallery01.htm'>

5 포토샵에서 링크 걸기 ● 링크 걸릴 슬라이스 이미지 오른쪽 클릭 > Edit slice options 링크 걸릴 파일명

6 publish

7 www.dothome.co.kr 가입(무료호스팅 및 도메인)
웹호스팅 > 무료호스팅 신청

8

9

10 파일 업로드시 필요 게시판 관리시 필요

11 본인 웹사이트 주소

12 http://아이디.dothome.co.kr 접속 (아직 파일 업로드 안되었을때)

13 1) ftp 프로그램(내컴퓨터, 윈도우 탐색기) 실행 2) ftp://아이디. dothome. co
1) ftp 프로그램(내컴퓨터, 윈도우 탐색기) 실행 2) ftp://아이디.dothome.co.kr 접속 3) html 폴더로 이동(회사마다 다를 수 있음) 4) 본인 컴퓨터에서 제작된 파일들 모두! 그대로! 업로드

14 http://아이디.dothome.co.kr 접속