カテゴリー別アーカイブ: ドリームウィバー(Dreamweaver)

.dwtを更新したらCSSがリンク切れになった時

 

ホームページ制作の効率化のためにサイドバーやヘッダー、フッターをテンプレート化することがあります。
更新すると全部のページに反映されるはずですが、されないときの対処法は以下です。

もっと詳しい説明を見る

———————————————————————
ftpから最新ファイルを全部ローカルに落としてくる

「サイトの管理」ルートフォルダを選択しなおして正しいディレクトリを認識させる

「ファイル名.dwt」その他「ファイル名.html」cssを修正。
ここで
「ファイル名.dwt」を保存すると、ファイル名.htmlが更新される。
されない場合は修正メニュー→テンプレート→テンプレートをページに「適用」

完成したら、この時点でファイルサーバーに保管する。
ファイルサーバーで作業すると、パスが複雑過ぎて壊れ、リンク切れなどを起こしてしまいます。

———————————————————————

しかし、テンプレートを更新して、htmlを全部書き換えるのには成功したら、画像やcssがリンク切れを起こした!
ときの対処法です。

?やり直しになるので、サーバーからローカルにデータをコピーしなおして始めます。

→テンプレート.dwtを作業します。出来たら保存します。ここで、一気に反映させない。
保存した瞬間このテンプレートを使うローカルサイト内部の全ドキュメントを更新しますか?とウィンドウがでるので
「いいえ」にしておく。
→そのあと個別にhtmlを開いて、一個一個テンプレートを更新して、反映させる。
これならうまくいきます。

Dreamweaver-パネルでcssを作成しよう!-カテゴリ「ボックス」

「Dreamweaver-パネルでcssを作成しよう」第4回目はカテゴリ「ボックス」プロパティを見直していきます。
(前回のカテゴリ「ブロック」はこちら)

width
横幅を指定します。
height
高さを指定します。
Float
配置を指定します。

left
左寄せの指定をします。またはその後に続く要素に関しては、左寄せに指定した要素の右に回り込みをするよう指定します。

right
右寄せの指定をします。またはその後に続く要素に関しては、右寄せに指定した要素の左に回り込みをするよう指定します。

none
特に何も指定しません。

clear
回り込みの解除を行います。

left
左寄せされた要素の回り込み解除を指定します。

right
右寄せされた要素の回り込み解除を指定します。

both
右又は左寄せされた全ての要素の回り込み解除を指定します。

none
回り込み解除はしません。

padding
余白の指定をします。marginはある領域とある領域の間の余白であるのに対し、paddingはひとつの領域の中での余白です。

top
上の余白を指定します

right
右の余白を指定します

bottom
下の余白を指定します

left
左の余白を指定します

margin
余白の指定をします。paddingはひとつの領域内での余白であるのに対し、marginはある領域とある領域の間の余白です。

top
上の余白を指定します

right
右の余白を指定します

bottom
下の余白を指定します

left
左の余白を指定します

img01_02

marginやpaddingはショートハンドプロパティを使用することで表示を簡潔に整理することができます。
padding: {10px 20px 30px 40px;} (左側(10px)から、上右下左)
padding: {10px 20px 40px;} (左側(10px)から、上・左右・下)

ちなみに、divなどで囲ったおおきなボックス(くくり)を、web上の画面内で
左右に対しまん中表示させる際には、
margin:0 auto; (上下は0、左右はauto)指定をします。
webサイト全体が画面の左寄せで表示されているサイトが今でもよくみられますが最近では画面センターで表示されるよう設定するのが通常です。

Dreamweaverでテンプレートが更新されないとき

こんばんは!

Dreamweaverでとても便利な機能「テンプレート」にて

更新されないときの解決方法をご紹介いたします。

1、これは使用しているDreamweaverのバージョンが古いときに試してみてください。
Dreamweaverにある「サイトの管理」、「サイトの編集」、
「詳細設定」と進んで行き、下から二番目にある「テンプレート」をクリック。
そこに「ドキュメントの相対パスを上書きしない」にチェックが入っていたら、外す。

2、これは初歩的ですが、「テンプレートタグがきちんと閉じているか」を確認してみる。

3、テンプレートの元データである「dwtファイル」がTemplatesフォルダから移動していないか。

4、テンプレートのパスが間違えている可能性がある。それか、絶対パスに変更し、
更新できるか試してみる。リンク切れが無いかを置換機能を使用して、探す。

最後の可能性としては、一度テンプレート内の何かを変更したくて、サーバーから

テンプレートファイルをダウンロードしてしまうと、リンクが切れてしまうことがあります。

テンプレート内を修正したいときは保存してあるローカルのテンプレートファイルを修正し、

サーバーへアップというのがリンク切れが起こらない方法となります。

それでもだめなら、最終手段でテンプレートページを作成して、今までのをすべてコピーして、貼り付け

をしてみるということになります。

テンプレートはとっても便利ですが、何か不具合があって壊れてしまうと

一気にやらなけらばいけないことが増えてしまうので、扱いには気を付けたいですね。

それでは!

Dreamweaver-パネルでcssを作成しよう!-カテゴリ「ブロック」

「Dreamweaver-パネルでcssを作成しよう」第3回目はカテゴリ「ブロック」プロパティを見直していきます。
(前回のカテゴリ「背景」はこちら)

word-spacing
単語と単語の間の間隔を指定します。(値で数値を指定)
letter-spacing
「word-spacing」が単語間の間隔なのに対し、「letter-spacing」は文字と文字の間隔を指定します。
vertical-align
親要素に対して、縦方向の位置を指定する際に使用。こちらはインライン要素とテーブルのセルにのみ適用でき、ブロック要素には適用できません。

top
上揃え

middle
中央揃え

bottom
下揃え

text-top
テキストの上揃え(テーブルでは無効)

text-bottom
テキストの下揃え(テーブルでは無効)

super
親要素の上付き文字の位置に表示(テーブルでは無効)

sub
親要素の下付き文字の位置に表示(テーブルでは無効)

text-align
テキストの配置位置を指定。

left
左寄せ

right
右寄せ

center
中央揃え

justify
均等割付。「text-justify」との併用が必要。

text-indent
最初の段落、一行目のインデント(字下げ)幅を指定する際に使用。値で指定します。
white-space
テキストを自動で改行、空白についての指定します。

normal
自動改行

pre
自動改行せず、空白・タブ・改行はそのまま表示。

nowrap
自動改行せず、複数の空白・タブ・改行をひとつの空白に置換して表示。

display

none
表示されません

inline
インライン要素として表示

block
ブロック要素として表示

inline-block
インライン要素のように前後に改行はなしですが、横幅縦幅の指定は可能

list-item
リストとして表示

run-in
前後の状況により、インラインまたはブロック要素になります。

compact
前後の状況により、インラインまたはブロック要素になります。

table
テーブル要素になります。

inline-table
インラインテーブルになります。

table-row-group
テーブルのtbody要素になります。

table-header-group
テーブルのthead要素になります。

table-footer-group
テーブルのtfoot要素になります。

table-row
テーブルのtr要素になります。

table-column-group
テーブルのcolgroup要素になります。

table-column
テーブルのcol要素になります。

table-cell
テーブルのth要素、td要素になります。

table-caption
テーブルのth要素、caption要素になります。

inherit
継承

Dreamweaver-パネルでcssを作成しよう!-カテゴリ「タイプ」

以前の職場ではドリームウィーバーがはいっておらず、ずっとテキストエディターでコーディングをしていたドリームウィーバー初心者コーダーです。

当時、テキストエディターに慣れはじめていた私は「タグの意味もCSSの意味も覚えられるし、手入力でよかったかも~ドリームウィーバーなんていらなわ~」と思っていました。
ここしばらくはコーディングそのものから遠ざかっていたため、相変わらずめったにドリームウィーバーは使用していなかったのですが、この数ヶ月コーディングに携わる機会があり、ドリームウィーバーを見直していたところ、それまでの考え方が180度間違っていたことに気がつきました。

「ごめんなさい、ドリームウィーバーさん、あなたはスバラシイです…」

そんなわけで、ドリームウィーバーの機能を初心者目線で改めて見直していきたいと思います。
今回は、これまで全くもって無視し続けてきたパネルです。
パネルを使用しての新規CSS入力機能を使用することで、劇的に効率を上げていくことができます。
でもよくみると、「このプロパティってどういう意味?使ったことないけど…」なんてものがちらほら。
そこで、今回はカテゴリ「タイプ」に表示されるプロパティの意味を見直していきます。

ちなみにパネルを使用してのCSS入力は、以下の図の赤いまる枠「新規CSSのルール」をクリックするとダイアログボックスが表示され、クラスなどの名称を入力して進めます。
sample?

カテゴリのタイプに記載されているプロパティ

sample2

font-family
フォントの種類を指定する際に使用。 フォントの種類はカンマ( , )で区切って複数の種類を並べることが可能です。ダブルクオーテーションで囲むことも忘れずに!
font-size
pxやemなどの単位をつけて文字サイズを指定。
font-style
フォントのスタイルを指定する際に使用。
「normal」標準の表示形式。
「italic」イタリック体。
「oblique」斜体。
日本語フォントの場合、イタリック体と斜体の表示はほとんど同じ表示のようです。
line-height
行の高さを指定する際に使用。line-heightが30pxでfont-sizeが12pxの場合、30px(line-height)から12px(font-size)を引いた、残り18pxが行間として上下に9pxずつ割りあてられるというわけです。
font-weight
フォントの太さを指定する際に使用。
「normal」標準の表示形式。
「bold」太字にする。
「lighter」一段階細くする。
「bolder」一段階太くする。
font-variant
「normal」標準の表示形式。
「small-caps」英字の小文字の表示形式を、小文字サイズのまま、表示形式は大文字とする際に使用。
text-transform
「none」標準の表示形式。
「capitalize」単語の先頭文字を大文字で表示。
「lowercase」全てを小文字で表示。
「uppercase」全てを大文字で表示。
text-decoration
「underline」下線付テキスト。
「overline」上線付テキスト。
「line-through」打ち消し線テキスト。
「blink」テキストが点滅しますが、サポートしていないブラウザが多いようです。
「none」標準の表示形式。
Color
テキストの色を指定。
使用頻度が低いものもありますが、一通りの意味は押さえておきたいですね。
次回は背景プロパティーについて記載していきます~。

「FullCalendar.js」を使用して、Googleカレンダーをもっと美しく-1

プログラムは私の分野ではない…とずっと避け続けてきた新米コーダーです。
さて、プログラムはできなくてもいい…と思いながらも日々業務で対面せざるを得ない「JavaScript」。
1から覚えるのは大変だけれどライブラリーを使って試すくらいならできないことではない、ということで、今回は「FullCalendar.js」を使ってGoogleカレンダーをカスタマイズしてみました。

Googleカレンダーを自分のwebサイトに導入したものの、見た目が「THE Google」なので
デザイン的にはなんともお粗末…なんて思ったことはありませんか?
そんなときスバラシイ仕事をしてくれるのが「FullCalendar.js」。
こちらをちょっ書き足してあげることで「THE Google」デザインとはオサラバ~~~。
「JavaScript」わかりません…というあなたでも、きっと簡単に導入できますよ!

それでは作成方法を記載していきましょう。

その1:「FullCalendar.js」を入手
まず、「FullCalendar.js」を公式サイトからダウンロードして、解凍したら
自分のサーバーへアップしましょう。
その2:htmlファイルを作成
今回はGoogleカレンダーのデザインを「FullCalendar.js」のデフォルトデザインに変更します。
以下のような内容をhtmlファイルに書き込みましょう。
ただし、jsファイルやCSSファイルのパスはアップしたディレクトリによって違います。
今回は自作の(以下に記載した)htmlファイルをルートに、同階層に「fullcalendar」ディレクトリと「jquery」(ダウンロードしたファイル)をアップロードした場合の例になります。 
違う場所にアップロードした方は「link href…」のところのパスの書き方を変更してくださいね。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link href=’./fullcalendar/fullcalendar.css’ rel=’stylesheet’ />
<link href=’./fullcalendar/fullcalendar.print.css’ rel=’stylesheet’ media=’print’ />
<script src=’./jquery/jquery-1.9.1.min.js’></script>
<script src=’./jquery/jquery-ui-1.10.2.custom.min.js’></script>
<script src=’./fullcalendar/fullcalendar.min.js’></script>
<script src=’./fullcalendar/gcal.js’></script>
<script>

$(document).ready(function() {

$(‘#calendar’).fullCalendar({

// US Holidays
events: ‘ここにあなたのGoogleカレンダーから入手したURLを貼り付けます。’,

eventClick: function(event) {
// opens events in a popup window
window.open(event.url, ‘gcalevent’, ‘width=700,height=600′);
return false;
},
loading: function(bool) {
if (bool) {
$(‘#loading’).show();
}else{
$(‘#loading’).hide();
}
}

});

});

</script>
<style>

body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: “Lucida Grande”,Helvetica,Arial,Verdana,sans-serif;
}

#loading {
position: absolute;
top: 5px;
right: 5px;
}

#calendar {
width: 500px;
height: 450px;
margin: 0 auto;
}

</style>
</head>
<body>
<div id=’loading’ style=’display:none’>loading…</div>
<div id=’calendar’></div>
</body>
</html>

 

以上の記載が終わったら、GoogleカレンダーのURLを入手します。
このURLは単純なURLではなく、カレンダーの設定から入手できるものです。
入手方法は以下の通り。
Googleアカウントにログイン後、カレンダーを開きます。

画面右端上のマークをクリック (↓の画像参照)sample1

カレンダータブをクリックし、自分のアカウントをクリックします。
sample1_02


以下の画面に遷移したら「共有設定を変更」

「カレンダーを一般公開」

「XMLをクリックでURLを入手」
sample3

入手したURLは、さきに紹介したhtmlファイルの
「ここにあなたのGoogleカレンダーから入手したURLを貼り付けます。」の欄に貼り付けます。
以上で終了!

また、今回はわかりやすくstyleをhtmlファイルに記載しましたが、
もちろんCSSに記載すればhtmlファイルはもっとスマートになりますね。
さらなるカスタマイズも可能ですが、それは又次回おつたえします~

フロートの解除

まったくもってやっかいなフロート。解除がうまくいかないとレイアウト崩れの原因になってしまいますね。そんなやっかいなフロートに立ち向かうための王道の解除方法をご紹介いたします。

ul li で、liにフロートをかけた場合

li
のフロートを解除する場合、
ul内にはliタグしか入れられないため、
王道解除のひとつである<br />で clear:both;といった手法での
解除ができません。でもフロートの解除は終了タグの直後になければいけない、でもいれられない…

そんなときは!

ulの高さがなくなってしまう対処方法

ulに
overflow: hidden;
のスタイルを設定します。
厳密にはフロートの解除ではありませんが、
レイアウトの崩れなどの不具合を解除することが可能です。

■html
<ul>
? <li>サンプル1</li>
? <li>サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2</li>
? <li>サンプル3</li>
? <li>サンプル4</li>
? <li>サンプル5</li>
</ul>

■css
ul {
??? background: #C36;
??? overflow: hidden;
}
li {
??? background: #FF3;
??? margin-top: 5px;
??? margin-bottom: 5px;
??? height: 100px;
??? float: left;
??? width: 100px;
}

フロートに悩まされているかたはお試し下さいね!

それでは~

javascript無しでタブ切り替えする

 

こんな切り替えをhtmlだけの記述で作ります。リンクさせるだけのhtml入門者向けです。

 

mew_01

作るファイル

menu.html  フェイシャル用(これをフォーマットにして、他の2つを作ります)

body.html  ボディエステコース用

special.html   スペシャルエステコース用

 

まず
menu.htmlを作成します。タブの部分はリストで記述します。

3つにスライスしておいたタブの画像は背景画像として指定します。

<ul class=”contbox”>
<li class=”subnav01″>
<a href=”menu.html”>フェイシャルエステコース</a></li>
<li class=”subnav02″><a href=”body.html”>ボディエステコース</a></li>
<li class=”subnav03″><a href=”special.html”>スペシャルエステコース</a></li>
</ul>

ではulの続きです。
ここはfacialのページなので、
<div class=”coursebox1″></div>を作り、
内部にfacialの概要テキストを記述します。
css背景グラデもここにかかっています。
その下は<div class=”coursebox2″></div>を作り
コース内容を記述します。

———————————————————————-
body.htmlとして次のファイルを作ります。
menu.htmlのソースをコピーペーストして開始です。
ulタブのcrrentがボディに変わった状態を別途コーディングします。

<ul class=”contboxbody”>
<li class=”subnav01″>
<a href=”menu.html”>フェイシャルエステコース</a></li>
<li class=”subnav02″><a href=”body.html”>ボディエステコース</a></li>
<li class=”subnav03″><a href=”special.html”>スペシャルエステコース</a></li>
</ul>
coursebox1 にボディエステコース概要
coursebox2 にボディエステコース内容を記述。

———————————————————————-

special.htmlとして最後のファイルを作ります。
同様にulタブのcrrentがスペシャルエステコースに変わった状態を別途コーディングします。
<ul class=”contboxsp”>
<li class=”subnav01″>
<a href=”menu.html”>フェイシャルエステコース</a></li>
<li class=”subnav02″><a href=”body.html”>ボディエステコース</a></li>
<li class=”subnav03″><a href=”special.html”>スペシャルエステコース</a></li>
</ul>

前のページと同様に
coursebox1にスペシャルエステコース概要

coursebox2にスペシャルエステコース内容を書きます。完成です。

mew_02

WEBコーディングのスピードをあげるには?

コーディングというと、どうしてもHTMLをおぼえなければいけない、CSSを覚えなければいけない・・・

と思って勉強が遅くなってませんか?

まだこれから勉強している人がこの記事をみているようなら、その考えを改めないと大変危険です。

いますぐ改めることをおすすめします。

理由としてはそれはただのお勉強であり、自己満足になってしまうからです。

ホームページ制作会社のプロのコーダーは必要最低限の知識しかタグを覚えていません。

それはアドビのHTMLコーディングソフト、ドリームウィバーが自動で生成してくれるからです。

このソフトを徹底的に熟知すると、どんなに手打ちで早いプログラマーよりも早くできいますよ。

いいですか・・・現場はいかに早く納品するかが勝負なのです。

だから、HTML覚えたからって銭にはなりませんよ。

こういっても、なかなかそこから抜け出せない方がいますが、それは現場にでて、勤務外に覚えることをおススメします。

ドリームウィバーのショートカット、機能を駆使すればプロのコーダーに必ずなれます。

コーディングのスピードがあがれば、当然単価もあがります。スピードが勝負なので単価もあげやすいんです。

ここではスピードテクニックはもちろん、ワードプレスのテクニックやJqueryのテクニックなど、

我々、現役のWeb屋がどんどんメモがわりに書いていきますね。

今後とも宜しくお願いします。