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

001

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

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

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

今回は前回崩れたウェブサイト全体を調整します。

ウェブサイト全体を調整します。

1.ヘッダー右のリストにハイパーリンクが設定されていないので、

<div class=”header_R<の<div class=”utility<内のリストにハイパーリンクを設定する。

2.ヘッダー下のグローバルナビとコンテンツの間がくっついているので、

CSSで「#global_nav」に「margin-bottom: 50px;」を追加し、フォントのスタイルを修正する。

3.サイドバーの余白などを調整するして見栄えをよくする。

サイドバーのメニューを増やすために
<h4<、<ul<、<li<を <div class=”sidelist<でマークアップする。
それに伴ってCSSも「.sidelist_first」を「#sidelist_first」に修正する。

スニペットを追加する。
<div id=”sidelist_first<を選択し、スニペットタブから「マイスニペット」をダブルクリックして「新規スニペット」のスニペットを追加するボタンをクリックする。
スニペットの画面が開くので、
「スニペットの名前」を入力
「スニペットの種類」をブロックの挿入にチェックしてOK

メニューを追加する。
挿入するヵ所の</div<の後にカーソルを置き、追加する「スニペット」をダブルクリックすると同じ物が挿入される。

4.メインコンテンツの文字の大きさと余白を調整して見栄えをよくする。

003

5.フッターの余白などを調整するして見栄えをよくする。

ソースコードでコピーライトをでマークアップする。
フッターのメニューを増やすためにスニペットを追加して複製する。
フッターメニューのリンクのデザインを設定する。
(今回はカーソルが上にきたときにアンダーラインを設定)
「メニュー」→「ウインドウ」→「CSSトランジション」を開き、
「+」→「新規トランジション」で
「ターゲットルール」を「.footer_list ul li a」
「トランジションを有効にする」で「hover」選択、
「プロパティ」にアンダーラインを選択したいが、無いので取り敢えず「background-color」を選択して「トランジションを制作」をクリックする。
004

「CSS」で「.footer_list ul li a:hover」を以下のように修正する。
.footer_list ul li a:hover {
text-decoration: underline;
}
行間が狭いので、「.footer_list ul」に「line-height: 2em;」を設定する。
005

その他の修正

コンテンツの上に「div」を追加してサイトの要約をいれる。
フッターの背景色をロゴに合わせて変更。

修正が終わったらライブビューで全体を確認してみる。
006

トップページが完成したということで、「初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!」は今回で一旦終了します。

Adobe Dreamweaver CCの感想

ソースコードをいちいち入力しなくていいので楽にWebサイト構築できるのがいい。(Adobe Dreamweaver CCに慣れていないと入力した方が早いって思うので、これから慣れていこうと思う。)
ライブビューとソースコード、CSSが一度に確認出来るので作業の効率がいい。
HTMLやCSSを知らない方でもAdobe Dreamweaver CCなら楽にWebサイトの構築ができると思います。(参考書が一冊あれば)
まだまだ奥が深そうなので、暇があればちょくちょく触っていきます。

では、
今回はここまで。長らくのお付き合いありがとうございました。

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

第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企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ

第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企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ

第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企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ