2011年7月アーカイブ

ドリームウィバー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 

Googleプレイス

| コメント(0) | トラックバック(0)

Googleの地図で探したいお店や企業の名前を検索すると地図上にピンが

あり、そこにお店や企業の詳細情報や画像・動画などが掲載できます。

お店の方は必須です。

詳しくはここに書いてありますので参考にしてください。

http://web-tan.forum.impressrd.jp/e/2010/09/24/8848

CSSを開く時、ドリームウィバーが立ちあがってくると時間がかかるので
メモ帳で開くように関連付けしておきましょう。

cssを選択し右クリックープロパティ

kanren.jpg


プログラムの変更でメモ帳を指定
CSS以外のファイルの関連付けも同じ方法で

kanren2.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 */


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








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  

このアーカイブについて

このページには、2011年7月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2011年6月です。

次のアーカイブは2011年8月です。

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

ウェブページ

Powered by Movable Type 5.2