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

001

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

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

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

今回はメインのコンテンツ部分を3段組みで表示します。

パーツとなる箱(要素)を追加する

1.<div id=”main”>の中に<div class=”top_content” id=”top_content01″>を挿入する。

「メニュー」→「挿入」→「Div」で<div id=”main”>の中に<div class=”top_content” id=”top_content01″>を挿入する。

001

2.<div class=”top_content” id=”top_content01″>の中に画像を挿入する。

「メニュー」→「挿入」→「Image」で画像を挿入し、alt=””代替テキストを入力する。
画像を選択し「フォーマット」→「段落フォーマット」→「見出し2」で<h2>でマークアップする。
改行して

内にリンクテキストと関連する文章を入力する。

002

3.箱(要素)の幅を「210px」に変更する。

<div class=”top_content” id=”top_content01″>を選択し「セレクター」を追加して、
「プロパティ」で「width」を「210px」に設定する。
CSSで見栄えを調整する。

003

※ リンクを設定するテキストを選択すると、ボックスの左上に設定ボタンが表示されるので、太字( <strong>タグ )やリンク先などを設定する。
サイズや色は「プロパティ」で設定する。

※ <strong>タグは強調したい(太字にしたい)キーワードがあるときに使います。使いすぎると検索エンジンにスパムとして判断されることがあるので注意です。

スニペットを追加してパーツ(箱(要素))を複製する。

1.「新規スニペットフォルダー」を追加する。

「スニペット」で「新規スニペットフォルダー」ボタンをクリックして「新規スニペットフォルダー」を追加する。

004

2.「新規スニペット」を追加する。

<div class=”top_content” id=”top_content01″>を選択し、
追加したスニペットフォルダーをダブルクリックして「新規スニペット」でスニペットを追加するボタンをクリックする。
スニペットの画面が開くので、
「スニペットの名前」を入力
「スニペットの種類」をブロックの挿入にチェックしてOK

005

3.箱(要素)を追加する。

挿入するヵ所の</div>の後にカーソルを置き、追加する「スニペット」をダブルクリックする。
コピーした<div class=”top_content” id=”top_content01″>のidを02と03に変更する。

006

4.箱(要素)を横並びに設定する。

<div class=”top_content”にCSSで「float: left;」を設定して横並びにする。
id=”top_content01とid=”top_content02(右のパーツ以外)のみに「margin-right: 10px;」を設定して空きを調整する。

007

5.追加した箱(要素)の内容を変更する。

複製した箱(要素)の画像とテキストを変更する。
他の箱(要素)も追加する。

008

今回はここまでです。

以上
「初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる」第4回目でした。
更新は遅いですが地道に更新していく予定です。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>