테이블에서에 가고
. (1 부 - 레이아웃 만들기)

브래디 Feiereisel로 2008년 10월 24일 ㆍ 3 개의 댓글

좋아, 우리가 여기에 달성 될 것은 포토샵 레이아웃을 감수하면서 CSS와 함께 밖으로 매핑됩니다 - 사업부의를 대신 포토샵의 기본 HTML의 - 테이블. 이 튜토리얼에서 성공하기 위해서는 당신은 이미 HTML 코딩을 알고 있고, 일부 CSS의 경험도 도움이됩니다.

기본과 함께 시작하자. 대신 HTML을 사용하여 레이아웃을 구성하기 위해 배경 이미지를 잡아 테이블 세포를 사용, 우리는 같은 방법으로 작동할 수 있습니다 <DIV>의를 사용하지만, 우리가 연결됩니다 각 <DIV>에 대한 편집 및 형식 훨씬 쉽게됩니다 그것 ID는, 그래서 그들은 웹사이트 세포를 포맷하는 방법을 알고 있습니다. 그래서 HTML 코딩의 형식은 이제 <div id="idname here"> </ 사업부>입니다. 이제 우리는 그 ID 이름과 일치하는 세포에 대한 매개 변수를 설정하는 있고, 이것은 <HEAD> 태그의 내부갑니다.

그것을 시작, 난 배경 색상과 이미지를 설정할 수 있습니다. 이번 경우는 제가 사용하기로 결정

http://urbanm.net/blog/bg.jpg에 위치하는이에 대한 코딩 CSS는
본문 {
배경 이미지 URL : (http://urbanm.net/blog/bg.jpg);
배경 - 반복 : 반복 - X;
배경 컬러 : # 010066;
}

이게하고있는 것은 우리가 우리의 이미지에 넣어 그라디언트의 하단과 일치하도록 전체 브라우저, 그리고 배경 이미지를 채우고 때까지 배경 이미지가 수평으로 자기를 반복해야 <BODY>로 코딩했습니다 모든 HTML 부분을 설정, 그것은 부드러운 이동이있다는 것을.

당신은 같은 있어야 이거

이제 우리는 사이트의 실제 내용에 대해 걱정할 필요. 나는 일반적으로 모든 센터가 정렬 유지하므로 <BODY> 요소 내에 모든 정렬 센터에있다. 당신은 <BODY> 후 <center>를 추가할 수 있습니다. 그래서 지금 당신의 신체 HTML은 다음과 같이 표시됩니다 :

<BODY>

</ 센터>

</ BODY>

사이트에 저희 배너를 넣어 시간. 우리는 배너를 개최 세포를 만들 수 있고, UR <center> 태그 사이에 배치하여 첫 번째 셀로를 입력하실 수 있습니다 <div id="banner"> </ 사업부>가. 표시된 ID 매개 변수를 설정하지 않고 "배너"아무 것도 나타나지 않습니다, 그래서 우리는 CSS와 함께 세포의 매개 변수를 설정해야합니다. 내 배너로 다음과 같은 이미지를 사용합니다.

# 배너 {
배경 이미지 URL : (http://urbanm.net/blog/banner.png);
높이 : 200px;
폭 : 800px;
}

어떻게 위의 말하는 것은 배너의 ID 레이블을 가진 HTML 개체가 위의 배경 이미지가 것입니다, 그리고 그것은 또한 800px로 200px 될 일이 배너 이미지의 높이와 너비를해야합니다. 저희 사이트가 지금 수확, 그것은 지금과 같은 유사합니다 이거 .

지금은 정상적으로 탐색 모음을 넣어 것이지만,이 튜토리얼의 Part 2에서이 단계를 설명합니다.

탐색 모음을 빼먹는, 우리는 모든 정보를 보유합니다 내용 상자로 이동하십시오. 이미지를 만들 때, 나를 위해 나는 둥근 모서리의 팬이하여이 헤더를 포함 3 개의 장소, 상단 부분에 splicing 것으로 기억 해요. 당신이해야합니다 2 스플 라이스는 모든 정보를 기입있는 공간을 작성하기 위해 수직으로 반복 될 내용을 이미지 것입니다. 셋째 스플 라이스는 둥근 모서리의 바닥글, 다시 한 번 팬입니다입니다. 여기에 제가이 부분에 사용되는 세 가지 이미지가있다. 헤더 - 내용 리피터 - 바닥글 .

그것이 모두 함께 넣어되면 그것은이 상자를 형성하고 있습니다. 이제 우리는 제대로 상자를 양식하기 위해 이미지 수 있도록 코딩 HTML을 설정해야합니다. 저희 컨텐츠 상자를 양식 네 가지 총 전지를 사용합니다. 네 가지의 첫 번째 안으로 그것의 다른 세 세포를 개최 예정이다. 이 세포의 목적은, 나중에 더 많은 이해으로 이해되지만, 이것은 기본적으로 필요한 경우 만들 수있는 다른 페이지에있는 텍스트 스타일을 변경할 수 있습니다. 그래서 HTML을 시작할 수 있습니다, 이것은 새로운 HTML입니다.

<BODY>

</ 사업부>

</ 센터>

</ BODY>

이제 우리는 우리가 원하는식으로 설정 세포를 가지고 있지만, 지금은 각 레이블에 대한 ID 매개 변수를 설정해야합니다. 이것은 이런 게 보일 것입니다.

# indexcontent {
디스플레이 : 블록;
폭 : 600px;
}
# indexcontent # 헤더 {
높이 : 35px;
폭 : 600px;
배경 이미지 URL : (http://urbanm.net/blog/header.png);
배경 - 반복 : 아니오 - 반복;
}
# indexcontent # contentbg {
배경 이미지 URL : (http://urbanm.net/blog/content.png);
배경 - 반복 : 반복 - Y;
높이 : 150px;
폭 : 600px;
}
{# 바닥글 # indexcontent
배경 이미지 URL : (http://urbanm.net/blog/footer.png);
배경 - 반복 : 아니오 - 반복;
높이 : 37px;
폭 : 600px;
}

우와 - 많은 바로 한 단계에서 일을하는 것입니다? 내가 당신을 위해 그것을 설명하고 당신을 도와 드리겠습니다.

# indexcontent를 시작으로, 우리는 내 콘텐츠 상자 이미지가있는 것을하는 600px로의 너비를 설정합니다. 그것이 확장하고 안으로 당신의 세포에 얼마나 콘텐츠에 따라 축소 수 있도록 우리는 높이를 설정하지 않습니다. 우리는 세포의 높이에있는 픽셀의 정확한 금액이 확장됩니다 있도록 차단할 수있는 디스플레이를 설정합니다.

우리가 #의 indexcontent # 헤더를 가지고 다음에 크기는 이미지 크기에 맞게 설정하고 우리는 올바른 위치로 설정된 배경 이미지를 가지고 있습니다.

우리가 # indexcontent이 # contentbg보다, 그것은 셀 크기에 맞게 수직으로 반복 수 있도록, 우리는 배경 이미지로 선택 올바른 이미지를 가지고, 우리는 그것을 반복 - Y로 설정해야합니다. 난 지금 너희들이 반복 효과를 볼 수있는 그 높이 150px을 포착, 당신은 그 안에서 모든 내용에 맞게 이것을 변경합니다.

마지막으로, 우리는 그냥 헤더와 동일합니다 # 바닥글 # indexcontent을 보유하고 있습니다.

지금까지 당신은 당신이 완료하는 기본 레이아웃을 설정해야!

탐색 모음을 만드는 방법을 설명하기 위해, 파트 2에 대한 계속 지켜봐 주시기 바랍니다.

3 답변은 "테이블부터 참석 예정

. (1 부 - 레이아웃 만들기) "

크레이그 윌슨 - http://www.craigwilson.co.uk은 말합니다 :
오전 8시 31분에서 2008년 10월 27일
아직 사람이 태그를 사용합니까? 왜 센터 콘텐츠에 CSS를 사용하지?
크레이그 윌슨 - http://www.craigwilson.co.uk은 말합니다 :
오전 9시 42분에서 2008년 10월 27일
^ 그것은 중심 태그되어야합니다.
웹 버킷 - http://www.web-development-buckets.blogspot.com/은 말합니다 :
오전 3시 33분에서 2008년 11월 5일
게시물이 정말 이해가 ... 그러나 당신이 CSS 연결에 비디오 자습서 중 일부를 확인 ... 확실히하려고하면 더 배울 수 ... 밖으로 그것의 ..