Blog

예시는 15일에 공개될 모 페이지.

이렇게 생겼다. 이것 포토샵에서 상당히 얍삽하게;;; 만든 페이지다. 포토샵에서 800*600 새 창을 띄우고 그림과 글자들을 배치한 다음, 아래처럼 슬라이스 툴로 자른다. (툴박스에서 여섯번째에 있는 툴)

그리고 나서 Save for Web으로 저장한다. 저장하는 창에서 그림 파일의 형식과 품질을 설정할 수 있으니까 적당히 설정을 맞춰준다. 그리고 Save를 클릭하면, html파일로 만들어준다. =D 만들어진 html 파일과 images 폴더의 이미지들을 폴더 째로 서버에 올리면 된다. =D
다만 여기서는 다음 페이지로 넘어가는 링크를 넣어줘야 하니까, 메모장에서 저장된 html 파일을 열어보자.

: 타이틀

: 인코딩 형식. 이 줄 그대로 쓰면 된다;

: 스타일 파일 불러오기.

: BODY가 시작되고

: 포토샵에서 슬라이스툴로 잘라서 만든 페이지는 전체적으로 표를 만들어서 칸마다 그림을 넣는 방식으로 만들어진다. (그래서 무겁기도 하고;)

이 페이지는 표 안에 포토샵에서 만든 표를 넣는 식으로 만들었는데, 본문의 네모를 늘 가운데에 보이도록 하기 위한 좀 무식한 방식;;

: 모든 그림들은 100픽섹*100픽셀이다… 이 가로세로 100픽셀짜리 그림이 들어있는 100픽셀짜리 칸이 48개 반복된다;;

링크를 걸 이미지를 결정하고 위와 같이 링크를 걸어준다. (포토샵 html파일은 이미지의 테두리 설정을 따로 안 하는데, 링크가 걸린 이미지는 1픽셀짜리 테두리를 보여주는 브라우저가 많으니까 border=0이라고 설정을 해 주는 것이 좋다.)

여기에서 img 태그 상자 안에 있는 name과 onmouseover, onmouseout은 링크가 걸린 그림위에 마우스 포인터가 지나갈 때 그림이 바뀌게 하기 위한 것이다. name에는 적당한 이름을 지정해주고, onmouseover에는 마우스를 올리면 보일 그림의 주소를, onmouseout에는 마우스가 그 그림을 지나서 다른 지점으로 가면 보일 그림의 주소를 넣어주면 된다. 이 파일은 마우스가 올라가면 그림이 바뀌었다가 마우스가 다른 데로 가면 원래 그림을 보여주기 때문에, img src의 주소와 onmouseout의 이미지 주소가 같다. (그림 크기는 셋 다 같아야 한다. 안 그러면 마우스가 링크된 그림위를 지나갈 때마다 표가 깨지는 현상이 발생한다. 음, 그것도 재밌겠네. )