Ｗｅｂノート

HTML/CSS

これからこのはてなブログに、現在学習中のＷｅｂ制作について記録したいことを書いていきたいと思います。

今日の学習
1 Webサイト内での「フォーム」の重要性
2 フォームの種類
3 タグのミスを見つける方法
4　Illustratorの基本操作

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
1：Webサイト内での「フォーム」の重要性
理由:そのサイトを訪れた人の目的や意思等を知ることで、訪れた人の求める内容を把握し、サービスを提供できるよう努めることができるから。

2：フォームの種類
・テキスト型
・ラジオボタン型
・チェックボックス型
・メニュー型
・テキストエリア
・送信型

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="#" method="post">
<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="radio" name="sex" value=
"male" checked>男性 <input type="radio" name="sex"
value="female"> 女性</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><select name="language">
<option value="selected">以下の言語を選択してください</option>
<option value="1">日本語</option>
<option value="2">英語</option>
<option value="3">フランス語</option>
<option value="4">スペイン語</option>
<option value="5">韓国語</option>
</select></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

タグのミスを見つける方法
上記のフォームをタグ打ち後、HTML Validator　をインストールした　Fire Fox　ブラウザで表示。
表示したページ上で右クリックし、「ページのソースを表示」を選択。
ソースが表示された別ウインドウが開く。
そのウインドウ内の「ヘルプ」のメニューにある「ページの文法を修正」をクリック。
新しく「ページのクリーンアップ」ウインドウが表示される。
"修正済みHTML"タブ内が選択された状態で、中に表示されているのはすでに修正済みのテキスト(タグ)。
「ページのソースを表示」で表示されたウインドウの中に表示されているもとのタグが、
　赤文字になっている部分がタグのミスとして修正された箇所。

4:Illustratorの基本操作

基本的に重要なツール
・ペンツール
・選択ツール
・リフレクト・回転ツール
・拡大縮小ツール
・長方形ツール
・文字ツール
・スポイトツール

初心者がIllustratorを練習する時のポイント
●ペンツールが非常に重要。
●ショートカット等を使いこなすために、左手をキーボード上で"shift""ctrl""Alt"に置き、効率よく作業を進める必要がある。
●先にIllustratorの認識について、このソフトは「算数と物理」的な考え方が必要なソフトであり、「絵を描くソフトではない」と
　いう認識を持って取り組むことが大切。
●初心者はIllustrator使用時にWクリックをしない。(Wクリックをすると、グループ編集モードに切り替わって混乱することがあるから。)
●画像を配置し、使用したいときに絶対に"画像を開く"で画像を開かない。必ずファイルメニューの「画像の配置」から画像を配置して使う。
　このときに表示される画像を表示ダイアログボックスでは、左下にチェックボックスで「リンク」と「テンプレート」「置換」があるが、
　配置する画像を下書きとして使用したい場合は、「リンク」のチェックボックスは必ず外し、「テンプレート」のチェックボックスには
　チェックを入れる。(リンクにチェックをして下書きとして使うと、レイヤーを削除し忘れると印刷されてしまう等の悪影響が出る。)

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
思い出したり付け加えたい内容があった場合に、記事は追記していきます。
※2012/12/27機能の記事の2:フォームの種類のタグを訂正しました。