2009-03-14

CSSでレイアウト

@charset_"Shift_JIS";
/*基本設定ここから*/
body{
	color:#555555;
	text-decoration:none;
}
a:link{
	color:#555555;
	text-decoration:none;
}
a:visited{
	color:#888888;
	text-decoration:none;
}
a:hover{
	color:#FF6600;
	text-decoration:none;
}
a:active{
	color:#000000;
	text-decoration:none;
}
address{
	color:#999999;
	font-size:0.8em;
	font-style:normal;
	text-align:center;
	height:50px;
	background-color:#CCCCCC;
	line-height:40px;
}
em{
visibility:hidden;
}


/*基本設定ここまで*/

/*レイアウト設定ここから*/

div#pageBody{
	width:760px;
	margin-top:20px;
	margin-right:auto;
	margin-left:auto;
}
div#contents{
	width:440px;
	padding-right:19px;
	border-right-width:1px;
	border-right-style:dotted;
	border-right-color:#999999;
}
div#side{
	width:220px;
	padding-left:20px;
}

/*レイアウト設定ここまで*/

/*ナビゲーションここから*/

#globalNavi{
	list-style-type:none;
	width:660px;
	height:30px;
	margin:0;
	padding:0;
}
#globalNavi li{
	margin:0;
	padding:0;
	float:left;
}

/*ナビゲーションここまで*/

/*バナーここから*/

#sideBanner{
	list-style-type:none;
	margin:0;
	padding:0;
}
#sideBanner{
	margin:0;
	padding:0;	
}

/*バナーここまで*/

/*siteMapここから*/

ul#siteMap{
	font-size:0.7em;
	text-transform:uppercase;
	list-style-type:none;
	margin:0;
	padding:0;
}
/*siteMapここまで*/

/*pageTopここから*/
p#gotoTop{
	font-size:0.7em;
	text-align:right;
	text-transform:lowercase;
	height:40px;
	margin:0;
	padding:0;
}
/*pageTopここまで*/

/*TOPここから*/
p#welcomeMessage{
	color:#999999;
	font-size:0.8em;
	line-height:1.5em;
	margin:0;
	padding:0;
}
dl#topRecommendedMenu{
	color:#663300;
	margin:0;
	padding:0;
}
dl#topRecommendedMenu p{
	margin:0;
	padding:0;
}
dl#topRecommendedMenu ul li dl dd.price{
	color:#663300;
}
dl#topRecommendedMenu ul{
	font-size:0.8em;
	line-height:1.5em;
	list-style-type:none;
}
dl#topRecommendedMenu dl{
	width:240px;
}
dl#topRecommendedMenu .menuData{
	margin:0;
	padding:0;
	border-top-width:1px;
	border-top-style:dotted;
	border-top-color:#999999;
}

/*TOPここまで*/

/*Informationここから*/
dl#infoData dt{
	color:#663300;
	margin:0;
	padding:0;
}
dl#infoData dd{
	margin:0;
	padding:0;
	border-bottom-width:1px;
	border-bottom-style:dotted;
	border-bottom-color:#999999;
}
dl#infoData{
	width:203px;
	margin:0;
	padding:0;
}
dl#infoData p{
	margin:0;
	padding:0;
}
/*Informationここまで*/

2009-03-12

画像挿入とリンクの設定

練習の途中経過をアップします。マークアップしたテキストに画像の挿入とリンクの設定をしました。id属性やclass属性に名前をつけながらCSSを指定していくので分かりやすいなと思いました。

<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5" />
<meta name="description" content="キーワード1〜サイトの説明文(検索結果に表示される)" />
<title>キーワード1｜Human Cafe</title>
<link href="css/import.css" rel="stylesheet" type="text/css" media="all" />
<script src="URL" type="text/javascript"></script>
</head>
<body>
<h1><img src="../../../../../Start/images/top/hc_logo.png" alt="Human Cafe" width="140" height="170" /></h1>
<p><em>クリエイターが集まり、作品が生まれる。創造空間カフェ。</em></p>
<ul id="siteMap">
<li>サイトについて</li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
<ul id="globalNavi">
<li><img src="../../../../../Start/images/top/navi_on_home.jpg" alt="Home" width="120" height="30" /></li>
<li><a href="about.html"><img src="../../../../../Start/images/top/navi_about.jpg" alt="About" width="120" height="30" /></a></li>
<li><a href="menu.html"><img src="../../../../../Start/images/top/navi_menu.jpg" alt="Menu" width="120" height="30" /></a></li>
<li><a href="access.html"><img src="../../../../../Start/images/top/navi_access.jpg" alt="Access" width="120" height="30" /></a></li>
<li><a href="contact.html"><img src="../../../../../Start/images/top/navi_contact.jpg" alt="Contact" width="120" height="30" /></a></li>
</ul>
<h2><img src="../../../../../Start/images/top/top_ttl_welcome.gif" alt="welcome to Human Cafe" /></h2>
<p id="welcomeMessage"><img src="../../../../../Start/images/top/top_welcome_img.jpg" width="160" height="114" />ハリウッドカフェは、グラフィックやWeb デザインをはじめ、色々なジャンルで活躍するクリエイターが交流する創造空間カフェです。仕事をお探しの方、仕事を依頼したい方、仕事仲間を探している方、ハリウッドカフェで新たな出会いを探してみませんか。</p>
<h3>Recommended menu</h3>
<dl id="topRecommendedMenu">
<dt><img src="../../../../../Start/images/top/top_recommend_img_01.jpg" width="153" height="118" />ハリウッド・バーガー</dt>
<dd class="price">\880</dd>
<dd>当店で毎日焼き上げる自家製のパンを使ったオリジナルハンバーガー。ハンバーガーパティーは、厳選した国産和牛肉を炭火で焼き上げます。パンと肉本来の持つ旨味を存分にお楽しみ下さい。</dd>
<dt><img src="file:///C|/Users/miho/Desktop/Start/images/top/top_recommend_img_02.jpg" width="153" height="118" />ハリウッド・プレート</dt>
<dd class="price">\1,380</dd>
<dd>お酒を飲みながら軽い食事を楽しんでいただける5 点盛り合わせ。どれも新鮮な素材を使用した手作りの味が自慢です。是非一度御賞味下さい。</dd>
</dl>
<h3><img src="../../../../../Start/images/top/top_ttl_infomation.jpg" alt="Information" /></h3>
<dl id="infoData">
<dt>2007.08.25</dt>
<dd>9/1（土）17：00 より世界中から集めたCG 映像作品上映会を開催します。</dd>
<dt>2007.07.07</dt>
<dd>8/25（土）よりHuman Cafe がオープンいたします。</dd>
</dl>
<ul id="sideBanner">
<li>お得なセットメニュー</li>
<li><a href="htp://www.sugiyama-style.tv" target="_blank">オーナーブログ</a></li>
</ul>
<p id="gotoTop"><a href="#pageTop">PageTop</a></p>
<address>Copyright 2009 Human Cafe. All Rights Reserved.</address>
</body>
</html>

2009-03-12

CSSでテキストのスタイルを設定

CSSでテキストのスタイルを設定しました。文字を飛ばす為にem{visibility:hidden;}で設定したのですが斜体で表示されてしまいました。他は全部上手くいきました。

@charset_"Shift_JIS";
/*基本設定ここから*/

body{
	color:#555555;
	text-decoration:none;
}
a:link{
	color:#555555;
	text-decoration:none;
}
a:visited{
	color:#888888;
	text-decoration:none;
}
a:hover{
	color:#FF6600;
	text-decoration:none;
}
a:active{
	color:#000000;
	text-decoration:none;
}
address{
	color:#999999;
	font-size:0.8em;
	font-style:normal;
	text-align:center;
}
em{
        visibility:hidden;
}

/*基本設定ここまで*/

/*ナビゲーションここから*/

#globalNavi{
	list-style-type:none;
}

/*ナビゲーションここまで*/

/*バナーここから*/

#sideBanner{
	list-style-type:none;
}

/*バナーここまで*/

/*siteMapここから*/

ul#siteMap{
	font-size:0.7em;
	text-transform:uppercase;
	list-style-type:none;
}
/*siteMapここまで*/

/*pageTopここから*/

p#gotoTop{
	font-size:0.7em;
	text-align:right;
	text-transform:lowercase;
}
/*pageTopここまで*/

/*TOPここから*/

p#welcomeMessage{
	color:#999999;
	font-size:0.8em;
	line-height:1.5em;
}
#topRecomwnswsMenu{
	color:#663300;
}
#topRecomwnswsMenu ul li dl dd.price{
	color:#663300;
}
#topRecomwnswsMenu ul{
	font-size:0.8em;
	line-height:1.5em;
	list-style-type:none;
}

/*TOPここまで*/

/*Informationここから*/

dl#infoData dt{
	color:#663300;
}

/*Informationここまで*/

2009-03-08

WEBデザイン授業9日目

今日から応用コースに入りました。初めての授業に比べてマークアップがスラスラと入力できるようになったと思います。CSSも同じようになるともっと楽しくなるんだろうなと思います。次回のCSSの授業もとても楽しみです。今日勉強した事をまとめました。

XML宣言を入力する

<?xml version="1.0" encoding="UTF-8"?>・・・・XML言語
IE6でレイアウトが崩れるのでいまの段階では削除しておきます。今後IE7以降は必須。

html要素には名前空間とlang属性を指定する

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
日本語は「ja」が規定されている。

文字コードとMIMEタイプを指定する

基準となるCSSとJavaScriptをあらかじめ指定する

キーワードを入力する

説明文を入力する

（例）
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<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="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5" />
<meta name="description" content="キーワード1〜サイトの説明文(検索結果に表示される)" />
<title>キーワード1｜Human Cafe</title>
<link href="css/import.css" rel="stylesheet" type="text/css" media="all" />
<script src="URL" type="text/javascript"></script>
</head>

検索ロボット対策

「robots.txt」というファイルによって検索エンジンロボットの巡回を制御します。制限をかけてダウンロードしないようにします。パーミションは 604 か 644 にします。

User-Agent: *

Disallow: /cgi-bin/・・・・フォルダーを指定する

Disallow: /password.html

スタイルシートのコンポーネント化

旧ブラウザにCSSを読み込ませない（IE4以前）

index.html

import.css

@charset "UTF-8";
@import "reset.css";（初期化）
@import "base.css";（視覚効果）
@import "ie7.css";（微調整のため）
@import "ie6.css";（微調整のため）

CSSをリセット

/* リセットスタイル */

　html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,

　address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {

　　　margin: 0;

　　　padding: 0;

　　　line-height: 1.0;

　　　font-family:

　　　　"ヒラギノ角ゴ Pro W3",

　　　　"Hiragino Kaku Gothic Pro",

　　　　"Hiragino Kaku Gothic Pro W3",

　　　　"メイリオ",

　　　　Meiryo,

　　　　Osaka,

　　　　"ＭＳ Ｐゴシック",

　　　　"MS P Gothic",

　　　　sans-serif;

　}

　table {

　　　border-collapse: collapse;

　　　border-spacing: 0;

　}

　ul li, ol li {

　　　list-style-type: none; /* マーカーを消す */

　}

　a {

　　　text-decoration: none; /* 下線を消す */

　}

　img {

　　　border: 0;

　}

　img, input {

　　　vertical-align: middle;

　}

2009-03-07

基本構造の復習

「セブン＆アイ・ホールディングス」のサイトより利用させて頂きます。

<!DOCUMENT 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" xml:lang="ja" lang="ja">
<head>
<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="description" content="セブン-イレブン・ジャパン、イトーヨーカドー、デニーズジャパンをはじめ、IYグループ各社は、持株会社セブン＆アイ・ホールディングスを設立いたしました。" />
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5" />
<title>セブン＆アイ・ホールディングス</title>
</head>
<body>
<h1>株式会社セブン＆アイ・ホールディングス</h1>
<ul>
<li> グループ会社一覧</li>
<li>検索</li>
</ul>
<ul>
<li>新・総合生活産業を目指して</li>
<li>会社情報</li>
<li>IR情報</li>
<li>CSR</li>
<li>採用情報</li>
<li>サイトマップ</li>
<li>English</li>
</ul>
<ul>
<li>コンビニエンスストア</li>
<li>総合スーパー</li>
<li>百貨店</li>
<li>食品スーパー</li>
<li>フードサービス</li>
<li>金融サービス</li>
<li>IT/サービス</li>
<li>他事業</li>
</ul>
<p>こちらのコンテンツをご覧になるには、最新のFlash Playerが必要です。ダウンロードは、Adobe Flash Player ダウンロードセンターから。</p>
<h2>ニュースリリース</h2>
<dl>
<dt>2009年3月3日</dt><dd>平成21年2月期期末配当予想の修正（増配）に関するお知らせ (81KB)</dd>
<dt>2009年3月3日</dt><dd>平成21年2月期業績予想の修正に関するお知らせ (96KB)</dd>
<dt>2009年3月3日</dt><dd>3月26日(木)、ロビンソン百貨店札幌跡に『イトーヨーカドーすすきの店』がオープン (127KB)</dd>
<dt>2009年3月2日</dt><dd>3月19日イトーヨーカドー武蔵小金井店グランドオープン (172KB)</dd>
</dl>
<p>ニュースリリース一覧へ</p>
<h2>「新・総合生活産業」を目指して</h2>
<p>激しく変化する時代に、ブレイクスルー思考で「いま」が求める価値を創造していきます。</p>
<h2>セブン＆アイの挑戦</h2>
<p>-NEW-<br />危機に負けない売場づくりモノづくり</p>
<h2>対談ブレイクスルーのヒント</h2>
<p>いま、「考動」力が感動の輪を広げ新しい時代の流れを切り拓く<br />
ゲスト：東海大学体育学部准教授<br />
日本陸上競技連盟理事・強化委員長<br />
高野進</p>
<h2>事業領域</h2>
<p>「新・総合生活産業」を目指すため、７つの事業領域を定めています。</p>
<ul>
<li>コンビニエンスストア</li>
<li>総合スーパー</li>
<li>百貨店</li>
</ul>
<h2>会社情報</h2>
<ul>
<li>トップメッセージ</li>
<li>会社概要</li>
<li>組織図</li>
<li>役員一覧</li>
<li>本部地図</li>
</ul>
<h2>セブン＆アイのサービス</h2>
<p>毎週金曜日午後4時スタート女神の市場</p>
<p>電子マネー nanaco セブンプレミアム</p>
<p>PDFファイルをご覧いただくためにAdobe Readerが必要です。最新のAcrobatがAdobe社のサイトよりダウンロード（無料）可能です。</p>
<p>このページのTOPへ</p>
<ul>
<li> ご利用に際して</li>
<li> よくあるご質問</li>
</ul>
<address>copyright</address>
</body>
</html>

2009-03-05

Dreamweaverでテンプレート

以前働いていた会社で、テンプレートで作られたページのテンプレート部分を修正した事があるのですが、「修正」→「テンプレートから切り離す」もしくは「オリジナルから切り離す」で修正したような覚えがあります。元のテンプレートを残して、そのページだけのテンプレート部分を修正する場合はその方法で良いのでしょうか？今回作ったテンプレートで新規ページを作成して「テンプレートから切り離す」を試してみたら「編集可能領域」が消えてしまいました。

新規テンプレート作成

テンプレートは2ページ以降から使用します。トップページには使用しません。

　　　
1.モデルとなるページを「ファイル」→「テンプレート保存」をします。
2.ファイル名を入力して「保存」→「リンクを更新しますか？」→「はい」をクリックして更新します。
3.各ページによって異なる部分を「編集可能領域」として設定します。
4.編集可能領域に設定する文字を選択して、「挿入」→「テンプレートオブジェクト」→「編集可能領域」をクリックして名前（日本語でもOK）を入力します。
5.「編集可能領域」に設定した文字や写真は削除します。

テンプレートから新規作成

1.ファイル→「新規」→「テンプレートから作成」→テンプレートを選択して→「作成」
2.編集可能領域への編集（文字や画像を挿入）

テンプレートを修正する場合は「アセットパネル」のテンプレートから編集したいテンプレートをダブルクリックをして修正します。

2009-03-04

フォームとCGI

フォーム

文字化け対応の為、「enctype="text/plain"」を記述します。（企業では記述しない）
<input name="email" id="email" type="text">」のname属性とid属性はセットで記述します。

CGIによってフォームを処理するワークフロー

1.HTMLファイルに「<form method="post" action="cgi-bin/formmail.cgi">」と指定します。
2.formmail.cgiをTeraPadで開く。
3.1行目は著作権なので「#!/usr/bin/perl-w」は残します。
4.23行目をCGIプログラムのパスにします。
5.26行目をアドレスを自分のアドレスにします。
6.35行目を送信後に開くページのパスに変更します。
7.「formmail.cgi」を「cgi-bin」フォルダーごとアップロードして、パーミッションの設定を「755」にします。