ホームページ仮 第二弾

こんにちは!

昨日に続いてホームページ仮 第二弾です。

今回は二ページ目を作っていきます。

HTML/XMLはこんなかんじです

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/javascript"src="script3.js">
</script>

<h1>     2 > </h1>



<title></title>

<p><strong></strong></p>

</head>
<body>
<div class="mein">
<noscript>
<p></p>  
</noscript>
<form name="form1"onsubmit="return check()" onreset="return kakunin()">
<table border="1" summary="">
<caption></caption>
<p><img src="image/1.jpg " alt="1"/></p>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th class="right">01</th>
<td>EXQ</td>
<td class="right">2000</td>
<td class="right"><select name="kai1" onchange="fu1()">
<option value="k0"selected>0</option>
<option value="k1">1</option>
<option value="k4">2</option></select></td>
<td class="right"><input name="sum1"type="text"value="0"size="20"class="right"></td>
</tr>
<tr>
<th class="right">02</th>
<td>EXQ</td>
<td class="right">1500</td>
<td class="right"><select name="kai2" onchange="fu2()">
<option value="ku0"selected>0</option>
<option value="ku1">1</option>
<option value="ku2">2</option></select></td>
<td class="right"><input name="sum2"type="text"value="0"size="20"class="right"></td>
</tr>
<tr>
<th class="right">03</th>
<td>EXQ </td>
<td class="right">100</td>
<td class="right"><select name="kai3" onchange="fu3()">
<option value="re0"selected>0</option>
<option value="re1">1</option></select></td>
<td class="right"><input name="sum3"type="text"value="0"size="20"class="right"></td>
</tr>
<tr>
<th class="right">04</th>
<td></td>
<td class="right">300</td>
<td class="right"><select name="kai4" onchange="fu4()">
<option value="kan0"selected>0</option>
<option value="kan1">1</option>
<option value="kan2">2</option>
<option value="kan3">3</option>
<option value="kan4">4</option>
<option value="kan5">5</option></select></td>
<td class="right"><input name="sum4"type="text"value="0"size="20"class="right"></td>
</tr>
<th class="right">05</th>
<td></td>
<td class="right">1000</td>
<td class="right"><select name="kai5" onchange="fu5()">
<option value="jas0"selected>0</option>
<option value="jas1">1</option>
<option value="jas1">2</option></select></td>
<td class="right"><input name="sum5"type="text"value="0"size="20"class="right"></td>
</tr>
<th class="right">06</th>
<td></td>
<td class="right">3000</td>
<td class="right"><select name="kai6" onchange="fu6()">
<option value="jas0"selected>0</option>
<option value="jas1">1</option></select></td>
<td class="right"><input name="sum6"type="text"value="0"size="20"class="right"></td>
</tr>
<tr>
<th colspan="4" class="right"></th>
<td class="right"><input name="gou" type="text" value="0" size="18" class="right"></td>
</tr>
<tr>
<th colspan="4" class="right">(10%)</th>
<td class="right"><input name="zei" type="text" value="0" size="18" class="right"></td>
</tr>
<tr>
<th colspan="2" class="right"></th>
<td class="right"><select name="otodoke" onchange="kei4()">
<option value="sentaku"></option>
<option value="hokkaidou"></option>
<option value="touhoku"></option>
<option value="kantou"></option>
<option value="chuubu"></option>
<option value="kansai">西</option>
<option value="chuugoku"></option>
<option value="shikoku"></option>
<option value="kyuusyu"></option></select></td>
</tr>
<th class="right"></th>
<td class="right"><input type="text" name="sou" value="0" size="18" class="right"></td>
</tr>
<tr>
<th colspan="4" class="right"></th>
<td class="right"><input type="text" name="All" value="0" size="18" class="right"></td>
</tr>
</table>
<p></p>
<table summary="">
<tr>
<th class="left">()</th>
<td>
<label for="dai"><input id="dai" type="radio" name="shiharai" value="daibiki"></label>
<label for="gin"><input id="gin" type="radio" name="shiharai" value="furikomi"></label>
</td>
</tr>
<tr>
<th class="left">()</th>
<td><input type="text" name="namae" size="40" value=""></td>
</tr>
<tr>
<th class="left">便()</th>
<td>(:604-8225)
<input type="text" name="yuubin" size="10" maxlength="8" value=""></td>
</tr>
<tr>
<th class="left">()</th>
<td><input type="text" name="jusyo" size="60" value=""></td>
</tr>
<tr>
<th class="left">()</th>
<td>(:012-345-6789)
<input type="text" name="denwa" size="20" maxlength="13" value=""></td>
</tr>
<tr>
<th class="left"></th>
<td><input type="text" name="mail" size="40" value=""></td>
</tr>
<tr>
<th class="left"></th>
<td><textarea name="memo" cols="50" rows="5"></textarea></td>
</tr>
</table>
<p>!!!!</p>
<p><input type="submit" value=""><input type="reset" value=""></p>
</form>
</div>
</body>
</html>

JavaScriptのほうは

 function fu1(){
   document.form1.sum1.value=2000*document.form1.kai1.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value)+parseInt(document.form1.sum4.value)+parseInt(document.form1.sum5.value)+parseInt(document.form1.sum6.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
 function fu2(){
   document.form1.sum2.value=1500*document.form1.kai2.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value)+parseInt(document.form1.sum4.value)+parseInt(document.form1.sum5.value)+parseInt(document.form1.sum6.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.yusou.value);
   }
 function fu3(){
   document.form1.sum3.value=100*document.form1.kai3.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value)+parseInt(document.form1.sum4.value)+parseInt(document.form1.sum5.value)+parseInt(document.form1.sum6.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
 function fu4(){
   document.form1.sum4.value=300*document.form1.kai4.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value)+parseInt(document.form1.sum4.value)+parseInt(document.form1.sum5.value)+parseInt(document.form1.sum6.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
               function fu5(){
   document.form1.sum5.value=1000*document.form1.kai5.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value)+parseInt(document.form1.sum4.value)+parseInt(document.form1.sum5.value)+parseInt(document.form1.sum6.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
               function fu6(){
   document.form1.sum6.value=3000*document.form1.kai6.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value)+parseInt(document.form1.sum4.value)+parseInt(document.form1.sum5.value)+parseInt(document.form1.sum6.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
 function kei4(){
   switch(document.form1.otodoke.selectedIndex){
    case 0:document.form1.sou.value=0;break;
    case 1:document.form1.sou.value=700;break;
    case 2:document.form1.sou.value=600;break;
    case 3:document.form1.sou.value=500;break;
    case 4:document.form1.sou.value=500;break;
    case 5:document.form1.sou.value=450;break;
    case 6:document.form1.sou.value=500;break;
    case 7:document.form1.sou.value=600;break;
    case 8:document.form1.sou.value=700;break;
    }
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
  function check(){
 if(document.form1.shiharai[0].checked==false&amp;&amp;document.form1.shiharai[1].checked==false){
  alert("支払方法を選択してください。");
  return false;
  }  
 else if(document.form1.namae.value==""){
  alert("お名前を入力してください。");
  document.form1.namae.focus();
  return false;
  }
 else if(document.form1.yuubin.value==""){
  alert("郵便番号を入力してください。");
  document.form1.yuubin.focus();
  return false;
  }
 else if(document.form1.jusyo.value==""){
  alert("ご住所を入力してください。");
  document.form1.jusyo.focus();
  return false;
  }
 else if(document.form1.denwa.value==""){
  alert("電話番号を入力してください。");
  document.form1.denwa.focus();
  return false;
  }
 else if(document.form1.mail.value==""){
  alert("メールアドレスを入力してください。");
  document.form1.mail.focus();
  return false;
  }
 else{
  return true;
  }
 }
function kakunin(){
 if(confirm("入力した内容をクリアしますか?")==true){
  return true;
  }
 else{
  return false;
  }
 }

 

そしてスタイルシート

 

h1{
color:#333333;
font-weight:bold;
font-size:200%;
text-align:center
}
h2{
color:blue;
font-weight:bold;
font-size:10%;
text-align:center
}
address{
color:#003366;
font-weight:bold;
font-size:20%;
text-align:right;
border-top:5px solid #003366;
clear:both;
}
p{
font-size:150%;
line-hight:20%;
text-align:center
}
strong{
font-size:150%;
line-hight:20%;
text-align:center
}
body{
margin:0;
padding:0;
background-repeat: repeat-x;
background-attachment: fixed;
background-position: right bottom
color:#333333;
}
.logo{
background-color:#003366;
margin:0;
}
.page{
width:70px;
}
.photo{
float:right;
margin-left:1px;
}
.top{
clear:both;
text-align:right;
}
ul li{
list-style-image:url(../image/list.gif);
font-weight:bold;
font-size:20%;
margin-left:10px;
margin-bottom:10px;
}
table{
background-color:collapse;
boder:1px solid #003366;
width:650px;
font-size:90%;
}
th{
background-color:#ccccff;
font-size:110%;
boder:1px solid #003366;
padding:20px
}
td{
boder:1px solid #003366;
font-size:110%;
width:20px;
padding:10px
}

.rowitem{
background-color:#ccccff;
}
caption{
font-weight:bold;
}
.point a:link{
color:#336699;
}
.point a:visited{
color:#666666;
}
.point a:hover{
color:#cc6699;
}
a img{
border:0;
}

 

で、表示するとこんな感じの画面ができます。

 

Content image

上の部分

Content image

真ん中の注文票

Content image

最後の支払い入力欄

こんな感じで2ページ目完成です。

あと三ページぐらい作れば完成するかな?

仮のホームページwww

~~~~~~~~~~~~~~~~~~~~~~~~~~~

追加 tableのところに下の

align="center"

を追加することで

Content image

となります。

 

 

ここまでご覧いただきありがとうございました。

BYマんタ

 

Article date Article like Article tip Article supporter
公開日 いいねによる獲得 投げ銭による獲得 サポーター
: : :
2020/06/04 5.81 ALIS 0.00 ALIS
マんタ's icon'
  • マんタ
  • @25kit6
10月・・・とうとう来てしまった。寒さがこれからだんだんと・・・・・・・ああ~考えたくにゃいwwwおまけに コロナ&インフル シーズン(´;ω;`) どないしよう・・・・アイコン変えましたwww
コメントする
コメントする