日別アーカイブ: 2016年1月26日

第2回 初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!

001

第2回 初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!

BPDスタッフのたけしたてつおです。

前回に続き「Adobe Dreamweaver CC」でWebサイトを構築していきます。
※Adobe Dreamweaver CCは、アドビ社が提供しているWebサイト構築のソフトウェアです。
楽にHTML/CSS等のコーディングができるそうです。

今回は<div>でマークアップして、ブロックレベル要素ごとにわけていきます。
※「マークアップ」とは、簡単に言うとHTMLの文章に「タグ」を記述することです。
※「<div>」は範囲を指定するブロックレベル要素(一つの箱を作ること)です。
※「ブロックレベル要素」とは、前後に改行が入る一まとまりの要素(箱)です。縦に一つずつ並び、幅と高さが指定できます。

では早速、
<body>〜</body>の中に以下の<div>マークアップしていきます。
<div id=”wrap”> footer以外の箱(要素)を入れる箱(要素)
<div id=”header”> ウェブサイトの上のヘッダー部分を記述する箱(要素)
<div id=”container”> ウェブサイトのコンテンツ部分全体を記述する箱(要素)
<div id=”main”> コンテンツのメイン部分の箱(要素)
<div id=”sidebar”> コンテンツ横のサイドバー部分の箱(要素)
<div id=”footer”> ウェブサイト下のフッター部分の箱(要素)

「メニュー」→「挿入」→「Div」で「Divを挿入」画面がひらきます。
必要なIDを入力して「OK」すると、<div>の箱(要素)が簡単にできます。

002

※</div>の後に<!– #要素ID end –>を入れておくと後から見るときに分かり易いです。
この要領で他の箱(要素)も挿入していきます。

003

箱(要素)に罫線(デザイン)を入れる

箱(要素)のデザインはCSSファイルに記述していきます。
※CSSファイルとは、ウェブサイトのデザイン(スタイル)を記述するファイルです。

「メニュー」→「ウインドウ」→「CSSデザイナー」で「新規CSSソースを作成」→「ファイル/CSS」にファイル名を記入して「OK」
これで、CSSファイルができます。

005

006

※<head>内に
<link href=”css/layout.css” rel=”stylesheet” type=”text/css”>が記述されます。

1.CSSファイルにスタイルを記述していきます。
セレクターを設定します。
デザインしたい要素を選択し→「CSSデザイナー」の該当のCSSファイルを選択→「セレクター」の「+」をクリック→セレクターが設定されます。

007

2.プロパティとバリューを設定します。
セレクターを設定したら、「プロパティ」と「バリュー(値)」を設定します。
「プロパティ」→「セット表示」のチェックを外す→プロパティの一覧が表示されます。
必要な「プロパティ」と「バリュー(値)」を設定する。
「ライブビュー」を確認すると箱(要素)に罫線が入っています。
この要領で他の箱(要素)も設定していきます。

009

※「ライブビュー」が表示されている場合は変更が自動的に反映されます。
※「control」+セレクターを選択で、スタイルのコピーができます。
※スタイルの設定をしても「ライブビュー」が自動的に反映されない場合はツールバーの更新アイコンをクリックします。

今回の「Adobe Dreamweaver CC」の感想

「Adobe Dreamweaver CC」の操作はまだ二回目なので、不慣れですが、
<div>などのマークアップの記述、CSSのスタイルを記述が楽にできるので、慣れてくると作業を大幅に短縮できそうだ。

今回はここまでです。

以上
「初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる」第2回目でした。

更新は遅いですが地道に更新していく予定です。

CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ
CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ