メディアデザイン演習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;}というデザイン指示を追加すると良い。
 

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

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



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

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プロパティとの組み合わせによる段組みレイアウト

まずは2つの箱を作る


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

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

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

この段階では、箱が二行にわかれて上下に配置されています
これを左右に分けて配置したいと思います。


新規CSSルールをつくる
 CSSウインドウからbasic.cssをリンクさせる。
コードのDIV "left"の部分にカーソル合わせ、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


 


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

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


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

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

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