パス

パスとは、リンクするHTMLや画像などの位置を表すもの。

●絶対パス
　ドメインを含めたファイルやフォルダまでのパスを指定する方式で「フルパス」ともいう。
　
●ルートパス
　ドメインを含まないルート（最上位階層）からファイルやフォルダまでパスを指定する方式。
　記述の際は/スラッシュから始める。

●相対パス
　起点となる位置から、リンクするファイルやフォルダまでのパスを指定する方式。

構造と体裁の分離

情報そのものや文章構造（段落、見出し、本文に該当する個所をタグで囲む）はHTML文書に格納し
レイアウト、色見た目のデザイン的要素についてはCSSにまとめて記述する。

☆HTMLの構造
大きく分けて＜head＞と＜body＞の二つの要素で構成されている。
＜body＞の中身がブラウザで表示される領域。

☆CSSの構造
外部ファイル化したCSSファイルは、HTMLファイルからリンクして、タグにID属性、またはCLASS属性を指定してスタイルと関連付ける。
CSSのスタイルを適用する対象をセレクタといい、セレクタにはプロパティと値をセットで指定する。
セレクタを指定するときは，（カンマ）で区切り
プロパティを複数指定するときは；（セミコロン）で区切る。

ID属性は、タグ一つに対して一つしかして出来ない。
CLASS属性は、タグ一つに対して複数指定できるため、属性値もHTML内に複数指定できる。

header,contents,footerなどの固有のグループはID属性。その中で分類されたスタイルはCLASS属性。
記述の際は、属性値の先頭に＃を付ける。CLASSは先頭に.を付ける。

☆ブロックレベル要素とインライン要素
ブロックレベル要素はグループや段落など前後に改行が入る要素。
インライン要素は文中の一部分に対して、意味づけや書式設定を行う要素。

WEBサイト制作の流れ

代表的なフロー

・制作依頼
・オリエンテーション
・提案書類作成
・プレゼンテーション
・正式発注
・仕様フィックス
・スタッフミーティング
・HTMLワイヤーフレーム
・全ページデザイン
・マークアップ・スクリプティング
・サイトプレビュー
・校了
WEBサイト公開
運営フェーズ

●制作依頼
要望をきちんと理解することが大切。
ヒヤリングシートの作成

WEB製作の現場

●アカウント・企画営業
　アカウントとは口座という意味ももつ。
　クライアントとのコミュニケーションを担当する部署。
　お客様担当窓口

●プロジェクトマネージャー
　プロジェクトマネージャー・・・プロジェクトをマネジメントする人
　プロデューサー・・・仕事自体を作り出す人
　
　クライアントとの予算交渉、工数管理、スケジュール管理、クオリティ管理

●ディレクター
　映画でいうと監督
　・クリエイティブディレクター・・・・表現を含めたクリエイティブ全体
　・アートディレクター・・・・表現
　・テクニカルデイレクター・・・・主にテクニカルフェーズ
　・アカウントディレクター・・・・クライアントコミニケーション

●WEBデザイナー
　
●マークアップエンジニア
　仕様が固まったデザインをhtmlやCSSといった言語でマークアップする。

●FLASHエンジニア
　FLASHでのオーサリング（文書、画像、音楽、動画などのデータを編集し加工する作業）を行う。

●プログラマー
　PHP,JAVAなどのサーバサイドのプログラミングを行う仕事。

●アシスタント
　

クライアントサイドスクリプト

動的なページを作るには「java script」や「action script」などのスクリプト言語
そして「php」「java」などのプログラミング言語がある。

javascriptはクライアントであるブラウザ側
phpはwebサーバ側サーバサイドで動作する言語

クライアント・サーバー

サービスを提供する役目を果たすコンピューターのことをサーバ
サービスを受ける側をクライアントという。

●ISP（internet services provider）
インターネット接続業者

●IPアドレス
　サーバーの住所のこと

●ドメイン名
　IPアドレスにニックネームをつけたようなもの　わかりやすい

●DNSサーバー（domain name system）
ドメイン名をIPアドレスに読み替える

●WEBサーバー
　メールサーバやWEBサーバー、DNSサーバはソフトウエア
　世界でもっとも多く使われているWEBサーバは「apache HTTp server」通称アパッチ
　
●HTTP
　httpとは、ブラウザとWEBサーバーで「これからWEBコンテンツのデータのやり取りをしますよ」
　と宣言すること
　

「ブラウザでWEBページを閲覧する」というアクションは、「クライアントであるパソコンのブラウザからWEBサーバに対して特定のファイルを要求し、受け取って表示する」ということ


　

body要素に含める内容

body要素に含める内容
大きく二つ
・ブロックレベル要素・・・一つの独立したまとまりのこと、見出し（ｈ１－ｈ６）、パラグラフ（ｐ）
　　　　　　　　　　　　　リスト（ul,ol,dl）,表(table)など。

・インライン要素・・・・・行内の一部という意味、アンカー(a)画像（img）強調（em,strong）など

代表的なブロックレベル要素について
　・h1-h6要素（見出しレベル１－６）
　　ｈ１要素は大見出し
　　ｈ２要素は中見出し
　　ｈ３要素は小見出し

　・P要素（パラグラフ）
　　文章のひとかたまりのこと。
　
　・blockqoute（引用文）
　　テキストをまとまった引用文として定義するために利用する

　・address要素
　　WEBページのフッター部分で作成者の連絡先、著作権情報を指定する。

　.ul要素（順不同リスト）
　　項目を順不同で並列的に列挙するタイプのリスト

　・ol要素（順序リスト）
　　順序や順番として定義

　.dl要素（定義リスト）
　　用語と内容で構成するタイプのリスト

　・table要素（表）
　　表のなかのひとつひとつをセル
　　横方向のセルの並びをrow
縦方向のセルの並びをcolumnと表現する。
　　table要素で全体を囲み
　　tr要素で行を定義し
　　内容としてヘッダセルであるth要素か、データセル（通常のセル）であるtd要素を含める。

今日はここまで

マークアップの種類

どのコンテンツをどの要素でマークアップするか・・・

head要素に含まれる内容
　・title要素（ページタイトル）
　　head要素の中でただ一度だけ指定する。必ず。
　　ビジュアルブラウザの「タイトルバー」に表示される。
　
　・meta要素（メタ情報）
　　そのWEBページ自体の情報を定義する。
　　http-equiv属性をした場合、サーバーに対してHTTPレスポンスヘッダと等しい情報を追加または、優先　　的に指示を出すことになる。
　　name属性を指定した場合、WEBページの「概要文」や「キーワード」など、製作者側が指定したいデータ　　をメタ情報として定義することになる。
　　どちらの属性でもcontent属性を併用して具体的な内容を値として含める。

　・link要素
　　そのWEBページから見て他のページがどのような役割かを定義する。例えば目次やヘルプにあたるWEBペ　　ージ、スタイルシートファイルやRSSファイルのプログラミング言語によるページなどを指定する。
　　rel属性で関係
　　href属性でURL
　　type属性でMIMEタイプ
　　media属性でメディアタイプなどを指定する

　・style要素（スタイルシート）
　　CSSのソースコードや外部ファイルを指定する。
　　link要素で指定するのが一般的。外部ファイルを参照するのが望ましい
　　
・script要素（スクリプト）
　　JAVAscriptなどのソースコートや外部ファイルを指定する。


meta要素のname属性での指定内容
　descripution概要文
　keywordsキーワード
　copyright著作権情報
　author　作成者
　reply-to連絡先メール
　date日付　日付（更新日）
　robots検索クローラーの指示

link要素のrel属性での指定内容
　alternate代替ページ
　stylesheet外部スタイルシート
　start開始ページ
　next　次のページ
　prev　前のページ
　contents　目次
　index 索引
　glossary　用語集
　copyright 著作権情報
　chapter 章
　section 節
　appendix 付録
　help ヘルプ
　bookmark　ブックマーク

今日はここまで