[웹1]
17강(최종) - 홈페이지 만들기
폴더생성 > 이미지 폴더 가져오기 > 사이트 - 뉴사이트 - 이름, 폴더 선택 - 서버 메뉴의 +클릭 - 주소, 아이디, 비밀번호, html 입력 test후, save >
Ctrl + N 새로운 HTML 만들기 > index저장
Ctrl + N 새로운 CSS 만들기 > style 저장 > HTML title 밑에 적기 <link href="style.css" rel="stylesheet" type="text/css" />
팝업창 띄우기 : 새로운HTML 열기 > body에 이미지 넣기 > 저장하기 > Index 불러오기 > Behaviors - 플러스(+) 클릭 - Open Browser Window > 저장한 팝업창 선택 - ok
팝업창 선택 시 닫게하기 : 팝업창 HTML 열기 > design 창에서 이미지 선택 > Behaviors - 플러스(+) 클릭 - Call Javascript - window.close()입력
index_CSS
@charset "utf-8";
/* CSS Document */
body{
font-family:arial, sans-serif;
margin:0;
font-size:14px;
}
#container{
width:1075px;
margin:0 auto;
}
#left{
width:215px;
float:left;
}
#main{
width:860;
float:right;
}
#main_bottom h3{
padding-left:20px;
}
#main_bottom_left{
width:215px;
height:200px;
float:left;
}
#main_bottom_left ul{
list-style-type:square;
padding-left:40px;
}
#main_bottom_left li{
color:#333;
font-size:13px;
}
#main_bottom_right{
width:645px;
height:200px;
float:right;
}
#main_bottom_right img{
margin:10px;
}
#footer{
width:100%;
clear:both;
padding-top:10px;
}
.board{
padding:10px;
}
index_HTML
<!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>레드버킷</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
</head>
<body onload="MM_openBrWindow('images/popup1.jpg','','width=400,height=570, top=100 left=100');MM_openBrWindow('pop2.html','','width=400,height=570 top=100 left=510')">
<div id="container">
<div id="left">
<img src="images/left.jpg" alt="" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="-11,184,218,226" href="index.html" />
<area shape="rect" coords="-6,344,216,387" href="community.html" />
</map>
</div>
<div id="main">
<!--메인상단-->
<div id="main_top">
<img src="images/main_top.jpg" alt="" />
</div>
<!--메인하단-->
<div id="main_bottom">
<!--하단left-->
<div id="main_bottom_left">
<h3>NEWS & NOTICE</h3>
<ul>
<li>레드버켓 가맹상담 신청의...</li>
<li>레드버켓에서 알려드립니다..</li>
<li>레드버켓 공지사항 리스트...</li>
</ul>
</div>
<!--하단right-->
<div id="main_bottom_right">
<h3>레드버킷 가맹점</h3>
<img src="images/memeber_pic01.png" alt="" />
<img src="images/memeber_pic02.png" alt="" />
<img src="images/memeber_pic03.png" alt="" />
</div>
</div>
</div>
<div id="footer">
<p>[ 디비컴퍼니 ] 인천광역시 부평구 충선로 382(삼산동, 1층일부) / 사업자등록번호 : 140-10-21369 / 대표 : 김윤국 / 창업문의 : 1661-1263 </p>
<p>Copyright 2014 red bucket All rights reserved.</p>
</div>
</div>
</body>
</html>
community_CSS
.board{
padding:10px;
}
기존 index css파일에서 요것만 추가함
community_HTML
<!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>레드버킷</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="left">
<img src="images/left.jpg" alt="" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="0,184,215,225" href="index.html" />
<area shape="rect" coords="-6,345,239,385" href="community.html" />
</map>
</div>
<div id="main">
<!--메인상단-->
<div id="main_top">
<img src="images/com_top.jpg" alt="" />
</div>
<!--메인하단-->
<div id="main_bottom" class="board">
<iframe src="http://lidrea.dothome.co.kr/gb/bbs/board.php?bo_table=table1" width="840" height="545" name="free" frameborder="0" allowtransparency="true"></iframe>
</div>
</div>
<div id="footer">
<p>[ 디비컴퍼니 ] 인천광역시 부평구 충선로 382(삼산동, 1층일부) / 사업자등록번호 : 140-10-21369 / 대표 : 김윤국 / 창업문의 : 1661-1263 </p>
<p>Copyright 2014 red bucket All rights reserved.</p>
</div>
</div>
</body>
</html>
pop1_HTML
<!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>팝업 페이지</title>
<script type="text/javascript">
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
</script>
</head>
<body>
<img src="images/popup1.jpg" alt="" onclick="MM_callJS('window.close()')" />
</body>
</html>
11번가 상세페이지 코딩하는 법
HTML 이미지 웹창 만들기 > 호스팅 서비스 신청 > 폴더에 이미지 저장 > 절대경로 소스로 html에 적용시키기
댓글