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

001

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

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

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

今回はサイドバーとフッターを表示させます。

サイドバーにメニューを表示します。

<div id=”sidebar>内に必要なテキストを入力します。

ライブビューで<div id=”sidebar>内にCONTENTSと入力して「フォーマット」で見出し3に設定し<h3>でマークアップします。
改行して、無料イラストダウンロードと入力して<h4>でマークアップします。
改行して、リンクするテキスト部分を入力して、「フォーマット」→「リスト」で<ul>と<li>でマークアップし、
リスト形式で表示させます。

001

リスト項目をダブルクリックしてハイパーリンクを設定します。

002

フッターにコピーライトを表示します。

1.<div id=”footer>の中に<div id=”copyright>を挿入します。

<div id=”footer>の中に<div id=”copyright>を挿入し、
Copyright © ●●●●●●●●●●●●●● All rights reserved.を入力する。

004

2.コピーライトをセンターに配置します。

copyrightを選択して「セレクター」を追加し、「プロパティ」で「text-align: center;」を追加する。

3.フッターにもリストを表示します。

<div id=”footer>の中に<div id=”footer_inner>その中に<div class=”footer_list” id=”footer_list01>を挿入し、サイドバーと同じリストを挿入(コピー&ペースト)する。

005

サイト全体をセンター配置にします。

現状ではサイト全体が左に寄っていて、センター配置になっていません。
ということで、サイト全体をセンター配置にするために少し修正します。

「#wrap」の幅を「100%」に修正します。

CSSの「#wrap」の「width」を「100%」に修正して、
「#header」と「#container」と「#footer」に「margin: 0 auto;とwidth: 960px;」を設定します。
これで、ウェブサイト全体がセンター配置になります。

※ブロックレベル要素(<div>等)をセンタリングする場合は、センターリングしたいブロックレベル要素に「margin: 0 auto;」を設定します。

006

サイト全体の見栄えを調整します。

1.各要素(箱)の罫線を削除して全体の表示を確認します。

各要素(箱)の罫線を削除して全体の表示を確認するために、
CSSで各要素のセレクターを選択し、「border」を削除します。

007

2.サイトの説明文(description)の位置を修正します。

CSSの「#header」に「プロパティ」で「 position: relative;」を追加します。
CSSでセレクター「#description」を追加し、「プロパティ」で以下を追加します。
position: absolute;
top: -25px;
left: 0px;
color: #FFFFFF;
font-size: 13px;

3.ウェブサイト上下左右の余白を削除します。

現状ではウェブサイト上下左右に余白がありますので、これを削除します。
「セレクター」に「body」を追加し、「プロパティ」で以下を追加します。
padding: 0;
margin: 0;

008

4.CSSを整理します。

CSSがぐちゃぐちゃなのでここで一旦整理します。
後から見ても分かり易いように大まかな要素(箱)ごとにまとめて
/*– ●●●●●● –*/で区切ります。

※リアルでもモニターの中でも整理整頓は大事ですよ!

5.サイドバーのリストを画像に変更します。

現状では標準の●になっているリストマーク(リストの先頭にあるやつ)を画像に変更します。
<ul>を<ul class=”sidelist_first>に修正し、
「セレクター」で「.sidelist_first」を追加する。
「プロパティ」で「list-style-image: url(../images/listmark-01.png);」を追加する。

009

行間が窮屈なので、「line-height: 2em;」も追加する。

6.メインコンテンツの余白を調整します。

メインコンテンツの余白が狭いので少し調整します。
#top_content01,02,04,05の「margin-right: 10px;」を「margin-right: 14px;」に修正。

※レイアウト崩れ防止のためにすこし少なめに設定します。(計算では「15px」でピッタリなのですが「14px」にしておく。)

今回はここまでです。

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

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

コメントを残す

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

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