[3주차]간단한 개인홈페이지 만들기(드림위버사용)-part3-

part1과 part2에서 홈페이지 제작전의 간단한 예제가지가 HTML 설명을 해봤습니다.

 

 

 

 

 

 

이번part3에서부터 본격적인 간단한개인홈페이지를 제작해보도록 하겠습니다.

 

 

바탕화면에 자기 개인폴더를 만들고 그폴더안에다가 img라는 폴더를 만듬니다.

 

즉, 바탕화면->홍길동(폴더생성)->img(폴더생성)

 

그리고 img폴더에다가 자기자신이 홈페이지를 만들면 맨처음 메인사진에 나오고싶은 사진들 4장을 준비해주시기 바랍니다.

 

꼭 4장이 아니여도 괜찮습니다.

 

 

일단 포토샵을 실행시켜 주시기 바랍니다.

 

그리고 파일->새로만들기 눌러주신 다음에

 

 

 

 

 

요렇게 사진설정을 웹 으로 설정하시면 자동으로 지정됩니다.

이렇게 지정하고 확인을 눌러주세요

 

 

 

그러면 이와같은 창이 떠야하는게 정상입니다.

 

이제 슬라이스 툴을 사용할건데요

그전에 슬라이스 툴이 무엇인지 간단하게 알아보도록 하겠습니다.

 

ImageReady에 있던 기능으로 홈페이지를 디자인할 경우에 많이 쓰이는 기능입니다.

• 이미지를 분할하여 저장하는 가능능
• 이미지파일과 Html파일도 저장가능

이제 아까 바탕화면->홍길동->img 폴더에 저장된 사진들을 전부다 가지고옴니다.

 

 

 

 

 

4장의 사진을 한꺼번에 다 가지고올경우 이렇게 작업하기 어렵게 변하게 됩니다.

 

그리서 위쪽 상태창을 보시게되면 보기->화면모드->표준화면모드

 

를 클릭해주시면

 

 

 

 

요렇게 작업하기 좋게 변경이 됩니다.

 

 

이제 아무사진 하나를 클릭하신 다음에

Ctrl+A(전체영역선책)을 눌러주신다음에

위쪽 상태창에 이미지->이미지크기를 눌러주시면

 

 

 

 

이와같이 뜸니다. 이상태에서 이제 비율제한을 선택해제 시켜주시고 폭:500 높이:300 으로 지정해주시기 바랍니다.

 

 

 

 

 

이 상태로 만들어 주신 다음에 확인을 눌러주세요

 

 

 

 

 

 

 

 

그러면 사진이 이와같이 작아진걸 보실수 있습니다. 이제 이걸 저장해야되는데요

 

파일 -> 다른이름으로 저장->파일명을 d_big 으로 한다음에 저장해주시기 바랍니다.

 

 

아까 d_bjg했던 d이미지 원본파일까지 포함해서 다른사진들은 모두

 

 

폭 : 120 높이 : 70 으로 설정해주시기 바랍니다. 그리고 그파일명에다가 _small 이라고 입력하시고 저장누르시면 됩니다.

 

 

 

 

 

이상태로 만들어주시기 바랍니다.

 

이제 슬라이스툴을 사용해보도록 하겠습니다.

 

 

 

 

 

슬라이스툴로 자르는 이유는?

-> 각 사진 마다 링크든 뭐든 속성을 부여할라고 자르는 것입니다.

 

포토샵에서 홈페이지 제작할때
->슬라이스툴로 자른다.->웹및장치용으로 저장
->html형식으로 저장
->가장 빠르게 작업할수있다.
but 유지보수가 어렵다
why? 코드가 지저분해서

 

 

이제 슬라이스툴로 잘라보겠습니다.

 

슬라이스툴은

 

 

 

 

이 아이콘입니다.

슬라이스툴 아이콘을 클릭한다음에

 

 

 

 

 

이렇게 분할하여주시기 바랍니다. 이제 이것을 저장해보도록 하겠습니다.

 

파일(File)->웹 및 장치용으로 저장

을 클릭하여 주시기 바랍니다.

 

 

 

 

그러면 이상태로 나올것입니다. 이상태에서 저장 버튼을 클릭하여주시면

 

 

 

 

 

 

 

이상태로 나옴니다.

 

파일형식 : HTML(HTML및 이미지)
설정:기본설정
분할 영영 : 모든분할영역
파일이름 : index

 

경로는 바탕화면->홍길동->img 폴더에다가 저장하여 주시기 바랍니다.

 

그리고나서 img폴더에 들어가보시면

 

 

 

이와같이 images폴더와 index.html 파일이 생성되는게 보일겁니다.

 

index.html 파일을 클릭하시면

 

 

 

 

요렇게 인터넷창으로 가진게 보일겁니다. 

 

이번강의는 여기서 마치겟습니다.

 

다음강의 -part4-에서는 저 사진에다가 드림위버를 통해서 효과를 줘보도록 하겠습니다.

 

 

 

글 잘보셧다면

 

Water Bottle

새글보기|

 

네이버 블로그 이웃 추가 부탁드립니다.~^^

 

이웃 추가하시면 바로 티스토리로 넘어오실수 있어요 ㅎㅎㅎ

이 글이 좋으시다면 손가락 버튼 클릭!!!