[웹1]
3강 - Split으로 효율적이게 꾸미자
1. Split
1) 텍스트
하단의 HTML 선택 : 포맷, 문단 등 꾸미기
- Page properties : 전체 텍스트 꾸미기 조정, margin 모두 0 (배경이미지 밀리지 않도록 여백 없애주기)
2) 이미지
이미지 넣기 : 이미지 넣고 싶은 곳 클릭 > 오른쪽 상단 Insert > 이미지 > 원하는 이미지 선택
Target : 창 여는 방법 정하기
- self : 현재창에서 바로 열기, 기본모드 (미선택 시, 자동으로 _self)
- blank : 새창에서 열기
이미지 map :
하나의 이미지 위에 여러 링크를 연결할 때 사용
이미지 위에 링크 영역을 만들어 줌.
<map> 태그 사용
- 하단 Map :
링크 영역 지정
Link : #지우고 링크 적기
화살표 : 영역 크기, 위치 조정
3) 움짤
swf 넣기 : Insert > Flash SWF > swf 파일 선택
- Wmode : transparent (배경 투명하게 만들기)
4) sound
음악 넣기 : Insert > Plugin > 음악 선택
5) 동영상
동영상 넣기 : Insert > Plugin > 동영상 선택
- 원본 사이즈 알아보기 : 폴더 - 동영상 클릭 - 하단에 사이즈 정보 나옴
동영상 넣기 : Insert > Flash Video > 동영상 선택(FLV 확장자만 가능) , 스킨 , 사이즈 조정(Detect Size 자동지정)
2. Table
1) 태그
tr 표 내부의 행 table row
th 행 내부의 제목 셀 table header
td 행 내부의 일반 셀 table data
2) 속성
border 테두리
cellpadding 셀 내부의 여백
cellspacing 셀과 셀 사이의 여백
rowspan 셀의 높이 지정(세로 합치기)
colspan 셀의 너비 지정(가로 합치기)
* cellspacing : 0 입력하면 border가 한 줄로 들어감 (선으로 됨)
align 가로기준 정렬
valign 세로기준 정렬
width 가로 길이
height 세로 길이
* 예제 6
<table border="1" cellspacing="0" cellpadding="5" width="500" height="400" align="center" background="dream/test/images/type1.jpg"> ---> table 만들기 순서 : table > tr > th(제목셀, 글자굵게 표시) 또는 td(내용셀)
tr은 가로, 행으로 만들어지며 tr을 마감하고 또 tr을 생성하면 하단에 추가된다. 다만, table안에서만 해야 밑으로 계속 들어감.
<tr>
<th>제목셀</th>
<th>제목셀</th>
<th>제목셀</th>
</tr>
<!--가로합치기-->
<tr>
<td>일반셀1-1</td>
<td>일반셀1-2</td>
<td>일반셀1-3</td>
</tr>
<tr>
<td colspan="3">일반셀2-1</td> ---> 가로로 3개 셀 크기만큼 늘리기
</tr>
<!--세로합치기-->
<tr>
<td rowspan="3">일반셀3-1</td> ---> 세로로 3개 셀 크기만큼 늘리기
<td>일반셀3-2</td>
<td>일반셀3-3</td>
</tr>
<tr>
<td>일반셀3-1</td>
<td>일반셀3-2</td> ---> 세로로 3개 합치는 만큼 영역을 벗어나는 '일반셀3-3'셀은 지워줬다. 그리하여 2개의 td만 남음.
</tr>
<tr>
<td>일반셀3-1</td>
<td>일반셀3-2</td> ---> 위와 마찬가지 이유로 2개의 td만 남음.
</tr>
</table>
댓글