베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
    - HTML 소개
    - 텍스트
    - 링크
    - 이미지
    - 테이블
    - 인클루드
    - 프레임
    - 폼(FORM)
    - 이미지 자르기
    - 색상코드표
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
생활 홈페이지 만들기
비즈니스 홈페이지 만들기
쇼핑몰 홈페이지 만들기
이미지 자르기
Home > 디자인 센터 > 웹강좌 > HTML 사용법 > 이미지 자르기
이미지 자르기 1 이미지 자르기 2 코딩하기 1 코딩하기 2
지금부터 앞에서 잘랐던 이미지를 이용하여 웹상에 띄울수 있는 홈페이지 문서를 만들어 보겠습니다.
작업할 테이블의 구조는 다음과 같습니다.



전체 테이블입니다. 로고, 이미지, 메뉴, 본문의 4부분으로 나누어 4행 1열의 테이블로 구성합니다.

전체 테이블안에 이미지 구성별로 독립적인 테이블이 삽입됩니다.
① 로고 테이블입니다. logo.gif가 삽입됩니다.
② 메인이미지 테이블입니다. main_img.gif가 삽입됩니다.
③ 메뉴 테이블입니다. 메뉴는 총 4개로 1행 4열의 테이블이 삽입되었습니다.
    각각의 셀마다 순서대로 menu01 ~ menu04.gif를 삽입합니다.
④ 본문의 내용이 담길 테이블입니다.
    왼쪽에는 서브메뉴가 오른쪽에는 내용이 들어가므로 1행 2열의 테이블이 삽입되었습니다.
    왼쪽 셀의 가로길이는 ‘ sub_title.gif ’의 가로길이인 160pixel로 고정시켜 놓습니다.
    오른쪽 셀의 가로길이는 나머지인 620pixel로 고정시킵니다.

왼쪽에는 서브메뉴 테이블이 오른쪽에는 내용 테이블이 삽입됩니다.

⑤ 5행 1열의 서브메뉴 테이블입니다. 테이블의 가로길이는 100%로 하면 됩니다.
    sub_title.gif / sub_menu01 ~ sub_menu04.gif를 순서대로 삽입합니다.
⑥ 내용이 들어갈 테이블입니다.
    제목과 아래쪽에 텍스트 내용이 들어갈 수 있도록 2행 1열의 테이블을 삽입합니다. 가로 길이는 100%입니다.

⑦ 실질적인 텍스트 내용이 들어갈 테이블입니다.
    행 안에 너무 꽉차면 보기 좋지 않으므로 가로 길이는 95%로 하고 중앙정렬시킵니다.

위의 테이블 구조를 참고하여 메모장을 열고 코딩해 보도록 하겠습니다.
완성된 코딩 소스는 다음과 같습니다.



<html> <head> <title> 이미지자르기 예제입니다. </title> <meta name="generator" content="yang.j.h"> <meta name="author" content="아사달"> <meta name="keywords" content="html강좌,이미지자르기"> <meta name="description" content="html강좌"> </head> <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <table cellpadding="0" cellspacing="0" border="0" width="780"> <tr> <td> <!--로고테이블 시작입니다.-----> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td><img src="imageuse/logo.gif" width="780" height="50" border=0 alt="로고입니다." usemap="#logo"></td></tr> </table> <!--로고테이블 끝입니다.------></td> </tr> <tr> <td> <!--메인이미지 테이블 시작입니다.------> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td><img src="imageuse/main_img.gif" width="780" height="150" border=0 alt="메인이미지입니다."></td></tr> </table> <!--메인이미지 테이블 끝입니다.------></td> </tr> <tr> <td> <!--메뉴테이블 시작입니다.-----> <table cellpadding="0" cellspacing="0" border="0' width="100%"> <tr> <td><a href=""><img src="imageuse/menu01.gif" width="195" height="40" border="0" alt="회사소개입니다."></a></td> <td><a href=""><img src="imageuse/menu02.gif" width="195" height="40" border="0" alt="서비스안내입니다."></a></td> <td><a href=""><img src="imageuse/menu03.gif" width="185" height="40" border="0" alt="묻고답하기입니다."></a></td> <td><a href=""><img src="imageuse/menu04.gif" width="205" height="40" border="0" alt="사이트맵입니다."></a></td></tr> </table> <!--메뉴테이블 끝입니다.------></td> </tr>

** '코딩하기2' 에서 계속 연결됩니다.
사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 02-2026-2000 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 153-803) 서울특별시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
아사달 이용 가능 브라우저