Webサイト制作科 - 作品紹介

Webサイト制作科 - 作品紹介

Dreamweaverでの設計

Dreamweaverでの設計

基本構造の入力

パネルを表示


ページの構造を挿入

  • 「ページ」をクリック
  • 「ページ」を「body」内に、ドロップ&ドラッグ

  • 「ヘッダー」と「フッター」を含める

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サイトタイトル</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>

<body>
<div data-role="page" id="page">
  <div data-role="header">
    <h1>ヘッダー</h1>
  </div>
  <div data-role="content">コンテンツ</div>
  <div data-role="footer">
    <h4>フッター</h4>
  </div>
</div>
</body>
</html>


リスト挿入

  • 「リスト表示」を「content」内に挿入


  <div data-role="content">コンテンツ
    <ul data-role="listview">
      <li><a href="#">ページ</a></li>
      <li><a href="#">ページ</a></li>
      <li><a href="#">ページ</a></li>
    </ul>
  </div>
リストのオプションを適用

  <div data-role="content">コンテンツ
    <ul data-role="listview" data-inset="true">
      <li><a href="#">
        <h3>ページ</h3>
        <p>Lorem ipsum</p>
        <span class="ui-li-count">1</span>
        <p class="ui-li-aside">付加情報</p>
      </a><a href="#">デフォルト</a></li>
      <li><a href="#">
        <h3>ページ</h3>
        <p>Lorem ipsum</p>
        <span class="ui-li-count">1</span>
        <p class="ui-li-aside">付加情報</p>
      </a><a href="#">デフォルト</a></li>
      <li><a href="#">
        <h3>ページ</h3>
        <p>Lorem ipsum</p>
        <span class="ui-li-count">1</span>
        <p class="ui-li-aside">付加情報</p>
      </a><a href="#">デフォルト</a></li>
    </ul>
  </div>


縮小可能ブロック

  • 「縮小可能ブロック」をクリック
<div data-role="content">コンテンツ
    <div data-role="collapsible-set">
      <div data-role="collapsible">
        <h3>ヘッダー</h3>
        <p>コンテンツ</p>
      </div>
      <div data-role="collapsible" data-collapsed="true">
        <h3>ヘッダー</h3>
        <p>コンテンツ</p>
      </div>
      <div data-role="collapsible" data-collapsed="true">
        <h3>ヘッダー</h3>
        <p>コンテンツ</p>
      </div>
    </div>
</div>


テキスト入力

  • 「テキスト入力」をクリック
  <div data-role="content">コンテンツ
    <div data-role="fieldcontain">
      <label for="textinput">テキスト入力 :</label>
      <input type="text" name="textinput" id="textinput" value="">
    </div>
  </div>


パスワード入力

  • 「パスワード入力」をクリック
<div data-role="content">コンテンツ
    <div data-role="fieldcontain">
      <label for="passwordinput">パスワード入力 :</label>
      <input type="password" name="passwordinput" id="passwordinput" value="">
    </div>
</div>


テキストエリア

  • 「テキスト領域」をクリック
<div data-role="content">コンテンツ
    <div data-role="fieldcontain">
      <label for="textarea">テキストエリア :</label>
      <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>
</div>


メニューを選択

  • 「メニューを選択」をクリック
<div data-role="content">コンテンツ
    <div data-role="fieldcontain">
      <label for="selectmenu" class="select">オプション :</label>
      <select name="selectmenu" id="selectmenu">
        <option value="option1">オプション 1</option>
        <option value="option2">オプション 2</option>
        <option value="option3">オプション 3</option>
      </select>
    </div>
</div>



チェックボックス


<div data-role="content">コンテンツ
  <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
      <legend>オプション</legend>
      <input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="">
      <label for="checkbox1_0">オプション</label>
      <input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="">
      <label for="checkbox1_1">オプション</label>
      <input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value="">
      <label for="checkbox1_2">オプション</label>
    </fieldset>
  </div>
</div>


ラジオボタン

<div data-role="content">コンテンツ
  <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
      <legend>オプション</legend>
      <input type="radio" name="radio1" id="radio1_0" value="">
      <label for="radio1_0">オプション</label>
      <input type="radio" name="radio1" id="radio1_1" value="">
      <label for="radio1_1">オプション</label>
      <input type="radio" name="radio1" id="radio1_2" value="">
      <label for="radio1_2">オプション</label>
    </fieldset>
  </div>
</div>


ボタン

  • 「ボタン」をクリック
<div data-role="content">コンテンツ
  <div data-role="controlgroup" data-type="horizontal"><a href="#" data-role="button">ボタン</a><a href="#" data-role="button">ボタン</a></div>
</div>


スライダー

  • 「スライダー」をクリック
<div data-role="content">コンテンツ
  <div data-role="fieldcontain">
    <label for="slider">値 :</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100">
  </div>
</div>


スリップトグルスイッチ

  • 「スリップトグルスイッチ」をクリック
<div data-role="content">コンテンツ
  <div data-role="fieldcontain">
    <label for="flipswitch">オプション:</label>
    <select name="flipswitch" id="flipswitch" data-role="slider">
      <option value="off">オフ</option>
      <option value="on">オン</option>
    </select>
  </div>
</div>