2009-11-15 3 views
0

Dreamweaver를 사용하여 HTML 레이아웃을 만들었습니다. DIV 태그를 사용하여 머리글과 본문의 배경을 설정했습니다. 문제는 페이지를 미리 볼 때 이미지가 표시되지 않는다는 것입니다.dreamweaver html 페이지

도움이 필요하십니까?

감사

지금의는 드림위버 미리보기에 나타나는하지만 난 (비주얼 스튜디오를위한 루비 온 레일즈 IDE를) 철강에 루비에서 가져올 때 그것은 단지 바닥 글을 표시합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<!-- 
body { 
    font: 100% Verdana, Arial, Helvetica, sans-serif; 
    background: #666666; 
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ 
    padding: 0; 
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ 
    color: #000000; 
    background-image: url(); 
} 
.oneColFixCtrHdr #container { 
    width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ 
    background: #FFFFFF; 
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ 
    border: 1px solid #000000; 
    text-align: left; /* this overrides the text-align: center on the body element. */ 
} 
.oneColFixCtrHdr #header { 
    background: #DDDDDD; 
    padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ 
} 
.oneColFixCtrHdr #header h1 { 
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ 
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ 
} 
.oneColFixCtrHdr #mainContent { 
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ 
    background: #FFFFFF; 
} 
.oneColFixCtrHdr #footer { 
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */ 
    background:#DDDDDD; 
} 
.oneColFixCtrHdr #footer p { 
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ 
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ 
} 
.logo { 
    background-image: url(My%20Pictures/logo.JPG); 
} 
.main_body { 
    background-image: url(My%20Pictures/main_body.JPG); 
} 
.logo { 
    background-image: url(My%20Pictures/logo_menu.JPG); 
} 
--> 
</style></head> 

<body class="oneColFixCtrHdr"> 

<div id="container"> 
    <div id="mainContent"> 
    <div> 
     <div class="logo"> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     </div> 
    </div> 
    <div class="main_body"> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <!-- end #mainContent --> 
    </div></div> 
    <div id="footer"> 
    <p>(c) Lily 2009</p> 
    <!-- end #footer --></div> 
<!-- end #container --></div> 
</body> 
</html> 
+0

더 많은 정보하시기 바랍니다? 코드 또는 뭔가. 고마워 ;-) –

+0

두 번째. 귀하의 페이지에 대한 코드를 보지 않고도 수백 가지 문제 중 하나 일 수 있습니다. 도움이 필요하면 일부 범위를 좁혀 야합니다. 게시 할 때 코드의 형식을 지정하십시오. –

답변

1

편집 : Windows에서 아마도 것 때문에 당신이 당신의 웹 브라우저에서 로컬 파일을보고있는 경우

background-image: url(My%20Pictures/logo.JPG); 

이, 슬래시 / 작동하지 않을 수 있습니다. 또한 HTML 파일이 "내 그림"위의 폴더에 있다고 가정합니다. 문제를 해결하려면 이미지를 html 파일과 동일한 폴더에 넣고 url(logo.jpg)을 사용하여 경로 혼동을 피하십시오.

Dreamweaver의 WYSIWYG 편집기는 가치가있는 것보다 더 많은 좌절감을 불러 일으키고 코드를 크게 혼란스럽게 만듭니다 (예 : 모든 경우 <p>). 웹 디자인에 관한 좋은 책을 얻으십시오. 적어도 시작하려면 손으로 직접 작성하는 것이 더 쉽습니다. HTML은 꽤 직관적이지만 드림위버가하는 방식이 아닙니다.

원래 답변 : <head> 태그의

내용이 표시되지 않습니다; 그들은 단지 페이지에 대한 숨겨진 정보 일뿐입니다.

당신은 사용하여 이미지를 삽입하는 :

<img src="image.jpg" alt="photo" /> 

을 ??

스타일링 및 배경 이미지를 위해 CSS를 배워야합니다. 이 코드는 <head> 안에있을 수 있지만 코드가 별도로 연결된 CSS 파일 인 경우 <style> 태그를 뺀 것입니다.

<style type="text/css"> 
    body { background-image:url('bgimg.png'); } 
</style> 

BTW, Dreamweaver는 내장 [나쁜] 브라우저 단지 멋진 텍스트 편집기입니다.

+0

질문자가'header'를 언급 할 때 그들은''요소가 아니라 페이지의 상단 부분을 의미한다고 생각합니다. –

+0

ah sry 예 헤더를 의미합니다. – Lilz