Hatena::ブログ(Diary)

masayan-webの日記

2012-05-22

授業日誌 05/22

googleドライブからフォームを作成して
jimdoサイトへフォームを移動させてみる。
f:id:masayan-web:20120523004253j:image

取得したURLjimdo


助けてもらいながら、やっと挿入できた。
目が、疲れるので、さらっと流して下さい。

授業日誌 5/21 Dreamweaverでformの挿入

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8">
<title>Dreamweaverでformの挿入</title>
</head>
<body>
<form action="#" method="post" name="form1">
<table width="500" border="1">
<tr>
<th>お名前</th>
<td><input type="text" name="name" size="30"></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="text" name="email" size="50"></td>
</tr>
<tr>
<th>性別</th>
<td><label>
<input type="radio" name="sex" value="1" checked>男性</label>
<label><input type="radio" name="sex" value="2">女性</label>
</td>
</tr>
<tr>
<th>勉強したい項目</th>
<td><label><input type="checkbox" name="item" value="1">CSS</label>
<label><input type="checkbox" name="item" value="2">Flash</label>
<label><input type="checkbox" name="item" value="3">HTML</label>
<label><input type="checkbox" name="item" value="4">PHP</label>
</td>
</tr>
<tr>
<th>お住まいの地域</th>
<td>
<select name="area">
<option value="" selected>下記よりお選びください</option>
<option value="1">北海道</option>
<option value="2">東北</option>
<option value="3">関東</option>
<option value="4">中部</option>
<option value="5">関西</option>
<option value="6">四国</option>
 </select>
</td>
 </tr>
 <tr>
 <th>お問い合わせ内容</th>
 <td><textarea name="textarea"  cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

2012-05-20

授業日誌 5/19

Flash

  • 元々はスマートスケッチというソフトだった。
  • ビットマップベクトルに変換できるソフト
  • Web向きである(データが軽い)

授業ではActionScript2.0を勉強する
    ActionScript3.0は敷居が高い

フレームのコマンドキー

  • F5 -フレームを追加します。
  • Shiftキーを押しながらF5 - [削除]フレーム
  • F6 -キーフレームを追加
  • F7 -空白キーフレームを追加します。
  • F8 -メイクシンボル

  • アニメーションを再生する

play();

stop();

on(release){
play();
}


illustratorphotoshopに書き出すGIFアニメの作成

formの授業 記述


<DOCTYPE html>
<html lang="ja">
<head>
<mata charset="UTF-8">
<title>お問い合せフォーム 練習</title>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
<p>お問い合わせはこちらのフォームからお願いします。</p>
<p>お名前:
<input type="text" name="name" size="20" maxlength="10" value="お名前	"></p>
<p>内容:
<textarea name="subject" rows="5" cols="40">お問い合わせ内容 </textarea></p>
<!-- チェックボックス  -->
<p>スマートフォン:
<input type="checkbox" name="mobile" value="1" checked> iphone
<input type="checkbox" name="mobile" value= "2" > android
<input type="checkbox" name="mobile" value= "3">その他
</p>
<!-- ラジオボタン -->
<p>性別:
<input type="radio" name="sex" value="male" checked>男性
<input type="radio" name="sex" value="female">女性
</p>
 <!--リスト -->   
<p>言語:
<select name="language">
<option value="ja">日本</option>
<option value="en">英語</option>
<option value="de">ドイツ</option>
<option value="fr">フランス</option>
<option value="ko"> 韓国</option>
<option value="zh">中国</option>
</select>
</p>
<!-- パスワード  -->
<p>パスワード:
<input type="password" name="password" size-"10" maxlength="5"></p>
<p><input  type="submit" value="送信"></p>
<!-- 写真をアップロード -->
<p>
<input type="file" name="picture">
</p>
<p>
<input type="submit" value="送信"><input type="submit" value="リセット">
</p>
</form>
</body>
</html>

f:id:masayan-web:20120520222700j:image

 まとめ

  • action="データの送信先URLを入れる"
  • method="post" フォームのデータのみを本文として送信
  • mane属性は必須
  • enctype="multipart/form-data" ファイルを添付する様なフォーム

2012-05-19

HTML5のDOCTYPE宣言

<DOCTYPE html>
<html lang="ja">
<head>
<mata charset="UTF-8">
<title>HTML5のDOCTYPE宣言</title>
</head>
<body>
</body>
</html>

2012-05-18

授業日誌 5/18 Photoshop

ドロップシャドウを使ってポラロイド写真風

f:id:masayan-web:20120519025138j:image:w300

逆光効果

f:id:masayan-web:20120519030237p:image

ブラシツールの使い方

f:id:masayan-web:20120519030238j:image:w300

授業日誌 positionの追記

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>position</title>
<style type="text/css">
<!--
*{
	margin: 0;
	padding: 0;
}
#header {
background-color: aqua;
width:800px;
height:150px;
position:relative;
}
#header-inner  {
position: absolute;
 top: 120px;
right: 40px;
}
#header-inner  li {
fonto-size: 0.85em;
display: inline;
padding: 0 1me  0  0;
}
ul {
list-style-type: none;
}
#footer {
 background-color: lightgray;
 color: white;
 width: 800px;
 height: 50px;
 text-align: center; 
 padding: 20px 0 0 0;
} 
-->
</style>
</head>
<body>
<div id="container">
   	 <div 	id="header">
    		 <div  id="header-inner">
<ul>
  <li><a href="#">このサイトについて</a></li>
  <li><a href="#">お問い合わせ</a></li>
  <li><a href="#">サイトマップ</a></li>
</ul>
					</div>
			</div>
	<div id="footer">
<address>ここに連絡先のテキストが入る</address>
	</div>
</div>
</body>
</html>

f:id:masayan-web:20120518135156j:image

2012-05-17

授業日誌 5/17 Photoshop

ラップアラウンドで巻き戻す(body背景画像)

f:id:masayan-web:20120518024937j:image

f:id:masayan-web:20120518024936j:image f:id:masayan-web:20120518024935j:image

境界を調整

f:id:masayan-web:20120518024938j:image