メディアデザイン演習4γ
03 Dreamweaver基礎編

Dreamweaverを実際に触ってみる

前回の授業のふりかえり+途中から

*文字の変更
*イメージのはりつけ

*サイトの作成 サイトの概念

使いこなしたいウインドウ:
プロパティウインドウ
挿入ウインドウ
CSS デザイナーウインドウ

■まず確認
自分の名前のついた"サイト"になっているかを確認しましょう。
現在、数名でそのマシンを共有しているので、他の人のサイトに間違って保存しない様に気をつけましょう。


CSSの基本書式





■面積をもった範囲  例: <div>を使ったレイアウト  float と clear
・floatは、指定された部分が、余白が開いているぶんだけ左右(leftもしくはright)にひっついていく
・余白がなくなったら次の行の左上端を基準にひっついていく
 
 
■一度、floatをやめてあたらしく左上端からレイアウトを始めたい場合
・clearを使う
{clear:left;}  左寄せをやめる
{clear:right;} 右寄せをやめる
{clear:both;} 左右どちらも寄せをやめる
 
 
■レイアウトの技法
まずは全体を包みこむ大きな範囲を作り、そのサイズを決める(PC画面用だと800〜1000pxくらいが最近よくみるウェブサイトのサイズ。ほかにも現場ではタブレット用やスマートフォン用などを考える必要がある。※レスポンシブレイアウトといいます。)
そのdivの中に、細かい仕切りをつくっていきレイアウトの骨組みをつくる。
その骨組みの中に、文章や画像などの要素を入れこんでいって完成させる。。

 
★ポイント
インライン要素とブロック要素
ブロック要素はdivのようにすでに面積という概念を持った範囲の指定。
もしインライン要素(pやspanなど)をブロックのように扱いたい場合は、{display:block;}というデザイン指示を追加すると良い。
 

セレクタ:いろんな対象への指定の仕方

h1 { color: red; } /* h1要素に対して指定 */
h1, h2 { color: red; } /* h1 と h2要素に対して指定 */
ul li { color: red; } /* ul の中にある li要素に対して指定 */
.sample { color: red; } /* class="sample" を持つ要素に対して指定 */
#sample { color: red; }/ * id="sample" を持つ要素に対して指定 */
h1.sample { color: red; } /* class="sample" を持つ div要素に対して指定 */
a:link { color: red; } /*リンク(未訪問)に対して指定 */ 






スタイルシートでレイアウト

[Divでのレイアウト] 

基本的な考え方:
Divとfloatプロパティとの組み合わせによる段組みレイアウト

先週、背景に色をつけただけのindex.htmlを開きます。(先週いなかった人は、新規書類からhtmlを一つ作成し、index.htmlという名前で保存してください)

レイアウトをするために: まずは2つの箱(面積を持った範囲の指定 div)を作る

 挿入/レイアウト/Divタグを挿入
 クラス「left」と指定

 挿入/レイアウト/Divタグを挿入
 クラス「right」と指定

  ↓ ソースコード上このように挿入される

<div class="left"> 左側の内容 </div>
<div class="right">右側の内容 </div>

この段階では、デザインの指定がなにもなされていないため、箱が二行にわかれて上下に配置されています。
これを左右に横並びになるよう配置したいと思います。


新規CSSルールをつくる
新規書類よりcssファイルを1つつくり、basic.css という名前でサイトフォルダに保存する。
CSSデザイナーウインドウから、basic.cssをリンクさせる。
コードのDIV "left"の部分にカーソル合わせ、CSSデザイナーウインドウで basic.cssを選択した状態で、セレクタの欄の+を押し、.left と出るのを確認する。

.leftのCSS定義クラス
ボックス/幅200px 高さ200px
ボックス/フロート/左

ok

再度編集する
CSSスタイル

背景/背景色/赤

ok


.rightのCSS定義クラス
ボックス/幅500px 高さauto(自動)
ボックス/フロート/右

ok

再度編集する
CSSスタイル

背景/背景色/緑

ok

保存して、ブラウザでプレビュー  


☆ floatプロパティ 左右への配置と回り込みの指定

☆ clearプロパティ floatの解除


続けてやってみましょう

<div id="wrapper"> // 2つをつつみこむようにもうひとつdivを書き込む
  <div class="left">
  左側の内容
 </div>
 <div class="right">
  右側の内容
 </div>
</div> // id:wrapperをとじる

#wrapperのCSS定義クラス

ボックス/幅920px
マージン/左右→自動

ok



[DIVになれてきたら]
より意味をはっきりさせるグループ化要素(タグ)を使っていきましょう。
クラスを使わなくても要素名でCSSの指定ができるので便利です。

<main>
ページの中心になるメインコンテンツを囲む。1つのhtmlに1度だけしか使えない
<article>
ページの記事や中心となるコンテンツを囲む
<section>
記事の一部やページ内のある一部を囲む
<nav>
ページの主要なナビゲーションを囲む
<aside>
ページの本題ではないサイドバーなどを囲む
<header>
ページのヘッダを囲む
<footer>
ページのフッタを囲む


例:
<div id="wrapper">
  <nav>
  左側の内容
 </nav>
 <main>
  右側の内容
 </main>
</div>

ーーーーーー
basic.css
div#wrapper{width:920px;margin:0 auto;} nav{width:200px;height:200px;float:left;background-color:red;}
main{width:500px;height:auto;float:right;background-color:green;}



これらをふまえて...構造記述の基本形を見てみよう
文章には、「タイトル」「見出し」「段落」「リスト」などの要素があります。
それらをマークアップ(目印をつける)し、その要素がどのような属性(大きさや数など)を持つかを定義することによって、その構造を記述すること。

見本:

<!doctype html>
<html lang=“ja”>
<head>
<meta charset=“UTF-8”>
<title>ここにタイトル</title>
<link href=“css/sample.css” rel=“stylesheet” type=“text/css”>
</head>

<body>
<header>
    <h1>題名</h1>
</header>
<div id=“sampleclass”>
  <p>段落</p>
</div>
<nav>
  <ul>
    <li><a href=“#”>メニュー項目1</a></li>
    <li><a href=“#”>メニュー項目2</a></li>
    <li><a href=“#”>メニュー項目3</a></li>
    <li><a href=“#”>メニュー項目4</a></li>
    <li><a href=“#”>メニュー項目5</a></li>
  </ul>
</nav>
<article>
<section>
  <span class=“date”>インライン要素</span>
  <h1>記事などの題名</h1>
  <p>
  段落/テキスト
  </p>
  <a href=“#” class=“linkbtn”>&gt;もっと見る</a>
</section>
</article>
<footer>
<address>copyrightなど</address>
</footer>
</body>
</html>


[資料]DreamweaverでWebページを制作する

資料:https://helpx.adobe.com/jp/dreamweaver/how-to/make-style-web-page.html
Adobe Dreamweaverを使用してWebページを作成する方法を説明します。


使いこなしたいウインドウ

今後、使いこなして行きたいDreamweaverのウインドウ

プロパティウインドウ
挿入ウインドウ
CSS デザイナーウインドウ