DreamWeaverの最近のブログ記事

■DreamWeaverでイメージマップ作成■
地図を4分割してそれぞれに別ページにリンクさせる方法

map.png

A地区、B地区、C地区、D地区の範囲をクリックすると

各リンクページに飛ぶようにします。

それをイメージマップの作成と言います。

作り方については、ここが詳しく書いていただいています。

出来たけど、よくわからずにできた感じです。

ドリームウィバー(ホームページ作成ソフト)

久しぶりに使ってみた。

       あ~~~~ん、忘れた!

テンプレから新しいページを作成するのどうだったけ?
テンプレファイルを出して、新規作成ーテンプレートから新規作成
保存ー名前をつける
今回は、フォルダを作成して、その中にindex.htmlとしました。
NETを見ながら、なんとか完成!感謝!

メニューを増やしてっと・・・・・テンプレの保存。
うまく反映された!!よかった!

ところが、

又更新を加え保存すると、すべてのページが表示され
保存されているようになるんだけど、反映されていない。

        なんで~~~

NETで調べるとうまくヒットしました。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

サイトーサイト管理ー編集ー詳細設定の下の方に「テンプレート」項目

ここの「ドキュメントの相対パスを再書き込みしない」にチェックが入っていたので
はずすと反映されたぁ~~

dw.JPG

よかった!

テンプレートを使いこなしたい!!

うまくいかなくて・・・テンプレートをはずしてしまったこともある。

 

テンプレートで一番便利なのは、navi部分を増やしたり変更したりするときだよね。

テンプレートを変更するだけで、他のページ全部にすぐ反映される。

TOPページにだけ違うものを表示したい時って、TOPページだけテンプレートから外したりしてた。

今回は、TOPページのnavi部分にだけtwitterのTimelineを表示させたくて

どうしようかと悩んでて、navi部分も編集可能領域にしてしまった。

でも、やっぱりnavi部分は、編集可能領域じゃ不便!!

戻そうと思ったけどうまくいかない。

 

まず、編集可能領域にする方法からやって行きましょう

例:main部分を編集可能領域にしましょう。

挿入ーテンプレートオブジェクトー編集可能領域

 

hensyu1.jpg

<!-- TemplateBeginEditable name="main" -->
   <div id="main">
      <p>&nbsp;</p>
    </div>
    <!--main-->
    <!-- TemplateEndEditable -->

div mainの上下に太字部分、編集可能領域ですよというタグが入りました。

これでmain部分は各ページ違うように編集できます。

 

次に、編集可能領域をはずす方法

div main領域を選択

修正ーテンプレートーマークアップの削除

dw1.jpg

ここまではうまくいったけど「領域名の不一致」とか出るんだよ~~

未解決のままOK押しても他のページには反映されていない。

NETでいろいろ調べたら、「未解決」のところを「なし」にするといいらしい。

やっと解決!!

 

TOPページだけ違うものを表示したい時、「オプション領域」を利用すれば便利らしい。

テンプレートの表示したい部分のdivにオプション部分を指定する。

今回はサイドメニュー部分の下に、twitterのタイムラインを表示したいので

その部分にdivを作成

divを選択ー挿入ーテンプレートオブジェクトーオプション領域

各ページを開いてTOPページはオプションあり(表示する)

後のページは、オプションなしに

説明は、ここの動画がわかりやすいのでここを見てね。

http://www.dougamanual.com/blog/61/391/e2851.html

TOPページのnavi部分にだけtwitterのタイムラインを入れてみました。

 

フムフム、テンプレート、使いこなせてきた気がしてきた。

 

 

さて、ここまでの出来上がり

topimg-s.jpg

ここまでの説明は、「ホームページを作ってみよう」前篇を見てね。

メニューの下に、■wrapper-inner」のdivを作成

新規CSS作成 ボックス width:800」

その中に、「sidebar」divを左に「contents」divを右に作成

その下に「footer」divを作成

■footer 上の横メニューの色に合わせブルー背景画像を入れる

repeat x 文字の色 #FFF width:800 hight:36(画像の高さ) line-height:220%

■sidebar デザインでいろいろCSSのかけ方はあるけど、

周りにborder:実践・1・collor:#999で線で囲むようにデザイン

float:left ボックス:margin top10 bottom 15 width:223

その中にsidebarBox1とsidebarBox2のdiv作成

同じ内容のCSSを作成

上にボーダーの画像を背景として入れる

background-imageで高さ25の画像を入れる

この画像の位置を決める。background-position x:center y:top no-repeat

ボックス:padding top:30 bottom 25

■sidebarBox1の中に製品のメニューを作成

例:製品名 ああああ

プロパティからリストをクリック

文字「あああ」にヌルリンク設定

コピーして6つのメニュー作成

文字のところを変更

<p>あああ</p>

     ↓

<ul>
<li><a href="#">あああ</a></li>
<li><a href="#">いいい</a></li>
<li><a href="#">ううう</a></li>
<li><a href="#">えええ</a></li>
<li><a href="#">おおお</a></li>
<li><a href="#">かかか</a></li>
</ul>

ul:ボックス width:180 margin top10

li:background-image左端にリストのような小さい画像をに入れる 。

  background-position x:lrft y:center no-repeat

  border-bottom dahed・1・collor:#999

  ブロック:display block

    ボックス width:175 hight25 margin top8 bottom 5 lift 23 padding top 3

sidebar Box1 a

  font-size 14 text-decoration none(リンク時の下線なし)

  margin left 25(テキストの外側に25pxの空きを作る)

  マージンかパディングか迷うところ aに対してなのでマージンに

sidebar Box1 a:hover

  マウスが来たときに、色を変更 テキストカラーを#039

■sidebarBox2

にはカレンダーを入れる。

 

これでテンプレートを作成

テンプレートの作成は次回とします。

テンプレートから各ページ作成

各ページのcontents部分を仕上げていく。

  

 

 

 

メニューに背景画像を入れてテキストを隠す方法


「至極のCSS」では、テキストにemをかけて、位置のところでhiddenにすると

テキストが隠すことができる。見えているのは画像だけど、テキストも入っていて

SEO的にいいんだとか。


しかし、chromefirefoxでみるとテキストが見えてしまう。


それで、emをやめて「a」にblockのところでtext-indentを-9999にすると

IEchromefirefoxもOKでした。


こちらの方がいいみたいですわ。

 

ところが・・・

 

年月がたって、この方法は、SEO的にダメになったようです。

時代とともにへんかしていくんですね。2012年8月

ドリームウィバーCS4の環境設定とサイト作成時の設定が終わったら

ここで作った、index.htmlとcssのフォルダを「HP基本土台」とします。

これを基本にホームページを作ってみよう!

 

WireFrame.jpgのサムネール画像 

「HP基本土台」をサイト用フォルダにコピー

サイトを作成  index.htmlを開く

bodyの新規CSSを作成  size 16 color #333

wrapper div挿入ー新規CSS作成 

ボックス width800 height800(後でautoに変更)

header  div挿入ー新規CSS作成

背景 800の画像を背景に指定 ここでは、header-bg.jpg

ボックス width800 height150(画像の高さに合わせる)

位置 position  relative(相対置)

   ■logo div挿入ー新規CSS作成(会社のロゴを背景の上に)

   位置 position absolute(絶対値)

   placement top 46  left 124(表示したい位置のサイズ)

    ■logologo画像を挿入それを選択して<h2>に指定

 

headerのdivの中にlogoのdivを作り、その中にh2で画像をくくっている。

タグで書くとこんな感じで~~す!

******************************************************************

    <div id="header">

  <div id="logo">

   <h2><img src="img/logo.png" width="250" height="42" alt="吉建" /></h2>

  <!--/logo--></div>

  <!--/header-->

 </div>

******************************************************************

navBox  div挿入ー新規CSS作成

ボックス width800 height auto

HOME

展示会

資料請求

会社概要

アクセス

お問い合わせ  を記入し(改行しながら記入するとPタグで囲まれる)

すべてを選択し、リストをクリック(プロパティインスペクターのリスト)

<P>タグで囲まれていたのが、ul liに変わる。

ul 新規CSSを作成 ボックス width 798  height 36

          border left right 共に 

          sollid(実線)1ピクセル color 028bcf

          メニューの端にブルーの線を入れるのでwidth 800

li 新規CSSを作成  ボックス float left

a 新規CSSを作成  color FFF 背景 but4.jpg(ブルーに文字は白)

           no-repeat   text align  center  

           ブロック Display block ボックス width 133

                height 26(画像の高さ)padding 10

a:hover 新規CSSを作成 

    color 039 背景 but4-b.jpg(水色に文字はブルー)no-repeat

 

ここまでで一日のお時間となりました。約4時間 

wrapper・header・navの設定が出来上がりました。

ヘッダーの画像にロゴがのって、その下にメニューが横並び

オンマウスにすると濃いメニュー画像が、水色の画像に変わる。

「お問い合わせ」がオンマウスになった時の色

 

topimg-s.jpg 

 スニペットを使えるようになったら、上級者!?

効率よくお仕事ができるようになると思う。

 

オリジナルスニペットを作ろう!!

まず、ウインドウースニペットをクリックして右側のスニペットウインドウを出す。

snipet.jpg

 

赤丸のところ、新規スニペットフォルダ・新規スニペット・スニペットの編集・ごみ箱

新規スニペットフォルダをクリックし自分のオリジナルスニペットフォルダを作成

隣の新規スニペットをクリックしてこの画面が出たら

snipet2.jpg

 

例えば、

名前:htmlコメント終了タグ

説明:なしでも

種類:選択範囲を囲む

前に挿入:<!--/

後ろに挿入:-->

プレビュータイプ:コード

と記入 OK

各divの最後にコメントを入れる作業をスニペットの「htmlコメント終了タグ」

をダブルクリックすると、<!--/ -->が入る。

選択範囲を囲むとして前と後ろに入れているから、divの名前を入れたい真ん中にカーソルが立っている。

 <!--/header--></div>

終了タグの前に必ずコメントを入れている人は、とても効率がいいと思う。

 

さてさてオリジナルスニペットもだけど

もともとあるスニペット使いこなしたい!!

ドメインを取得
FTPの設定
メールの設定

さてとドリームウィバーでサイト作成
ローカルルートフォルダの指定と初期設定イメージフォルダを指定

環境設定
CSSスタイルシート
1.jpg

コードフォーマット
インデントとタブサイズを「1」に「0」でもいいが見やすいように
2.jpg

バリデーター
3.jpg

ファイルタイプ
拡張子「png・jpg・gif」をf加工したい時、Fireworksで開くように「プライマリーエディタに設定」
photoshopで画像加工する場合は、photoshopを選択し「プライマリーエディタに設定」
4.jpg

フォント
フォントは好みですが、ここでは見やすいように12ポイント
コードビューだけ見やすいように14ポイント
名称未設定-5.jpg

新規ドキュメント
新規でHTMLを作成時、拡張子をhtmlに指定
エンコーディングをUTF-8に
7.jpg

ブラウザプレビュー
Chromeで確認できるように定
IE、Firefoxでも確認できるようにインストールしている。
一時ファイルを使用してプレビューにチェック
いちいち保存しなくてもブラウザの確認ができる。
6.jpg


環境設定はここで終わり

htmlのコードの宣言文
新規ドキュメントでhtmlを作成
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
 lang="ja"  この部分を追加 
ここで指定した lang 属性の値 ja は日本語であることを意味しています。
英語ならば lang="en" になります。

CSSの使用宣言として下記のコードを追加
<meta http-equiv="Content-Style-Type" content="text/css" />
-Style  この部分を追加


CSSファイルの作成
importから各CSSを読み込ませる方法
import.cssを作成しページにリンクさせる
<link href="css/import.css" rel="stylesheet" type="text/css" media="all" />
media="all"メディアの指定をallにしておくと余分なものを読みロスがなくなることもあります。

import.cssを開いて、ここに作成しておいた reset.css・base.css・nav.css など各CSSを読み込む。
url() この部分を削除して
cssの数だけタグをコピーして、各CSSの名前に書き換える。
(ひとつずつ読み込まして行ってもOK)
リンクではなく読み込む。(勝手に読み込むになる)

IE用のハック、ie.cssをページにリンクさせる。

reset.css
タグを書いておきます。以下をコピーしてcssを作成してください。

@charset "utf-8";
/* ブラウザスタイル初期化 */

/* 主要なブロックタグの初期化 */
body, 
h1, h2, h3, h4, h5, h6, p, div, 
ul, ol, li, dl, dt, dd,
table, th, td {
font-family:
"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo,
Osaka,
"MS Pゴシック","MS PGothic",
sans-serif;
margin: 0px;
padding: 0px;
}

/* リスト関連タグの行頭マークを非表示 */
ol, ul, li {
list-style-type: none;
}

/* 画像の配置を下に */
img {
vertical-align: bottom;
}

/* リンク指定された画像のボーダーを非表示 */
a img  {
border:none;
}

/* テーブルのボーダーを一重線に・セル間隔をゼロに */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* floatを解除するための clearfixハック */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */


ふう、今日一日の勉強会の内容でした。
ゆっくり、のんびり確実にすすんでるってことで








メニューに背景画像を入れてテキストを隠す方法

「至極のCSS」では、テキストにemをかけて、位置のところでhiddenにすると
テキストが隠すことができる。見えているのは画像だけど、テキストも入っていて
SEO的にいいんだとか。

しかし、chromeやfirefoxでみるとテキストが見えてしまう。

それで、emをやめて「a」にblockのところでtext-indentを-9999にすると
IE、chromeやfirefoxもOKでした。

こちらの方がいいみたいですわ。

久しぶりの書き込みでした。

Dreamweaverの編集ー環境設定ーコードカラーリング(カラーリングの変更)

ソースの種類別に色が変えられる。

タグを赤にしてみた。

 

ナビの作り方

ul liで作る。

h2で作る。

 

文字をhiddenで隠す 

位置で-99999で山のかなたにほおりだす

 

どっちがベター?

2017年6月

        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

このアーカイブについて

このページには、過去に書かれたブログ記事のうちDreamWeaverカテゴリに属しているものが含まれています。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ

Powered by Movable Type 5.2