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

コメントを残す

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

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