dreamweaver等のホームページ作成ツール等に移植編集するための注意事項!!
基本的には
<body>
~
</body>
タグ
までをコピーペーストすれば動きます
但し!!
外部CSSや外部javaを利用しているので
<head>
~
</head>
HTMLのヘッダーの間に呼び出しタグを記述する必要があります。
CSSを呼び出すタグ
<link rel="stylesheet" type="text/css" href="./css/style.css" />
javaを呼び出すタグ
<script src="button.js" type="text/javascript"></script>
実装例
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="button.js" type="text/javascript"></script>
<title></title>
</head>
注記:
前提としてCSSフォルダ、imagesフォルダ、***.jsファイルは、まるごとコピーしてindex.htmlと同じルート上に配置しておく必要があります。
上記フォルダ、ファイルを配置しておかなければ、呼び出すことが出来ずに当然表示は崩れ設置したボタンも動きません。
文字コード指定
UTF-8とかShift_JISとかホームページで使う文字コードの種類を宣言するだけですが、HTMLヘッダ部分と「style.css」CSSファイルのヘッダ部分にも文字コードを宣言する記述を入れます。
HTMLの文字コードを宣言するタグ
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
実装例
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
CSSファイルの文字コードを宣言する記述
@charset "UTF-8";
/* ■ページ構造 */
body {
}
(宣言文は一番上の行に記述します。)
注記:
エディタで編集・作成時には文字コードを宣言するだけですが、ツールに依ってはファイルを保存・終了時にUTF-8とかShift_JISとか文字コードを指定して保存しなければなりません。
ロールオーバーボタン
button.js 画像を使ったロールオーバーボタンで注意しなければならないこと。
HTMLの記述でボタンの画像より上部画像を削除したり新たに追加してしまうとロールオーバーが正常に動作しなくなります。
button.js及びHTMLの記述修正が必要になります。
HTMLバージョン
HTML →XHTML →HTML5 とバージョンがアップされていますが、基本的にXHTMLで作成しています。
理由:
XHTMLはタグの書式が厳密になっています。あえてより厳しい書式で作成することを選びました。
他のバージョンと記述の違い
XHTMLで使うタグ記述で他のバージョンと異なる個所があります。アンカータグが無い場合 スペースを入れスラッシュで閉じます。
実例
改行タグ
等々
<br> → <br />
メタタグもアンカータグがありません
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="language" content="Japanese" />
<meta name="description" content="" />
<meta name="keywords" content="" />
イメージタグ
<img src="image/***.jpg" width="**" height="**" alt="****" />