ドリームウィバーCS4の環境設定とサイト作成時の設定

| コメント(0) | トラックバック(0)
ドメインを取得
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 */


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








トラックバック(0)

トラックバックURL: http://nc-works.jp/mmtt/mt-tb.cgi/28

コメントする

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  

このブログ記事について

このページは、studyが2011年7月 3日 21:31に書いたブログ記事です。

ひとつ前のブログ記事は「movabletypeのバージョンアップ」です。

次のブログ記事は「ドリームウィバーCS4 スニペットの作成」です。

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

ウェブページ

Powered by Movable Type 5.2