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

001

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

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

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

今回はヘッダーとフッターを調整します。

ヘッダーを調整します。

1.ヘッダー右の<div class=”utility<を調整して、サイドバー同様にリスト項目に画像を表示させます。

<div class=”utility<のリストは横並びにするためにCSSで「display: inline-block;」を設定してますので、リストマークが表示されていませんので、背面に画像を表示させます。
ということで、CSSを以下のように修正します。
.utility ul li {
display: inline-block;
font-size: 13px;
background-image: url(../images/listmark-01.png);
background-repeat: no-repeat;
padding-left: 15px;
background-position: 0px 2px;
margin-left: 10px;
}

001

2.ヘッダーのタイトルロゴを調整します。

ヘッダーの上が少し窮屈なので空きを作るために高さを調整します。
CSSの「#header」に「height: 120px;」を追加します。
次にヘッダーのタイトルロゴをヘッダーの一番下に配置させます。
「セレクター」に「#site-id」を追加し、「プロパティ」で以下を追加します。
#site-id {
position: absolute;
bottom: 0px;
left: 0px;
}

003

これで、ヘッダーロゴの上に少し空きができました。

フッターを調整します。

フッター全体の背景に色をつけます。

CSSのフッターを以下のように修正します。
/*– フッター –*/
#footer {
width: 100%;
margin: 0 auto;
background-color: #00A0E9;
}
#footer_inner {
width: 960px;
margin: 0 auto;
}
.footer_list {
width: 30%;
float: left;
font-size:15px;
}
.footer_list ul {
color: #003F5B;
}
.footer_list ul li a {
color: #003F5B;
text-decoration: none;
}
.footer_list h5 {
color: #003F5B;
font-size:15px;
}
#copyright {
text-align: center;
font-size: 13px;
padding: 50px 0 20px;
color: #003F5B;
}

010

※「.footer_list」に「float: left;」を設定したので、「ソースコード」で「<div id=”footer_inner” class=”clearfix<」に変更(class=”clearfixを追加)します。

ウェブページ全体を調整する。

ウェブページ全体の表示フォントを変更する。

CSSの「body」に「 font-family: “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
」を追加する。

※「プロパティ」の「font-family」に色々なフォントセットが用意されていますので、好きなフォントセットを選択する。

フォントセットを変更するだけで見栄えが全然ちがいます。

グローバルナビを設置する。

1.下準備として<div id=”header” class=”clearfix<の中に<div id=”header_inner” class=”clearfix<を追加します。

CSSで以下を追加します。
#header_inner {
margin: 0 auto;
width: 960px;
position: relative;
height: 120px;
}

005

2.<div id=”header_inner” class=”clearfix<の下に<div id=”global_nav<を追加します。

004

グローバルナビに設置する項目を入力します。
<div id=”global_nav<を選択し、「メニュー」→「フォーマット」→「リスト」に設定して<ul<と<li<でマークアップします。

006

3.リストを横並びに変更します。

CSSに「#global_nav」と「#global_nav ul」と「#global_nav ul li」を追加して、
以下のように設定します。
#global_nav {
width: 100%;
}
#global_nav ul {
font-size: 0px;
float: left;
text-align: center;
width: 100%;
margin: 0 auto;
}
#global_nav ul li {
display: inline-block;
background-color: #ECF1F4;
width: 190px;
font-size: 13px;
padding: 10px 0;
border: 1px solid #000000;
}

007

このままではテキスト部分のみのボタンになっています(テキストの周りをクリックできない)ので、
CSSに「#global_nav ul li a」を追加して「display: block;」を追加します。

※<a<はインライン要素なので、width(幅)が影響しないので、「display: block;」を追加してブロック要素として表示させます。

各要素(箱)の余白を調整する。

各要素(箱)の周りに余白があるので、削除します。

CSSの「body」を
body {
font-family: “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
}
に変更し、
「body,div,ul,li,p,ah1,h2,h3,h4,h5,h6」を追加して以下のように設定します。
body,div,ul,li,p,a {
padding: 0;
margin: 0;
}

008

※body,div,ul,li,p,ah1,h2,h3,h4,h5,h6は今後要素が増えるごとに追加していきます。

今回はここまでです。
余白を削除したことでレイアウトが崩れてしまいましたので、次回調整します。

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

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

コメントを残す

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

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