1-1WEB制作基礎

この教科書について 誰でも見ることができるが、転用は禁ずる 受講に当たっての欠席と振替受講規定について 受講日当日に、欠席の連絡をいただいた場合 欠席となり、振替受講料、有料 受講日前日午後6時までに、欠席の連絡をいただいた場合 1コースの中で3回まで、振替受講料、無料。 その後1回ごとに、振替受講料、有料 遅刻について…授業時間前に、連絡を入れること。終了時間は変わらず。 授業開始後30分、連絡がない場合は、当日欠席とする アプリケーションについて アプリケーションはすべてadobe社のソフトを使用します...

1-2WEBサイトの仕組み

作成したWEBサイトはどのように閲覧者が見ることができるのか WEBサイト作成は皆さんのパソコンで行いますが、そのままでは誰も見ることはできません。そこで誰もがアクセス可能な「サーバー」にアップロードすることで自分のパソコンで制作したホームページを世界中の人に見てもらうことが出来ます。 専門用語 サーバー・・・ホームページサーバー(WEBサーバー)、ここから全世界に配信されます 専門用語 ローカル・・・あなたのパソコンの事です。 作成したサイトはサーバーにアップする前にはあなたのパソコンにあります つまりローカルにあるのです...

1-3WEB制作の手順

WEBサイト作成はなんとなく作り始めるのではなく、明確な目的を持ってはじめなければなりません。 なぜなら、ページ数によりレイアウトが変わったり、素材を自分で作成する場合は素材一つ一つのサイズを 細かく決めていかなければならないからです。 1.目的の設定 目的は何か、ターゲットは誰か?( 宣伝、広告、販売、集客・・・) 目的を明確にすることでサイトのイメージが決まる。 例:)相川貿易 例:)ベスト不動産 例:)アールマナー 例:)LED製品販売 例:)nanfan shanghai 例:)yahoo 例:)urbanroots...
1-4ホームページの裏側を知ろう

1-4ホームページの裏側を知ろう

専門用語 HTML・・・WEBサイトを記述するための言語実際に見てみましょう 任意のホームページを開く → 右クリック → ページのソース 専門用語 タグ・・・<  > このこのカッコををタグといいます HMLを理解する メモ帳を開き、下記を記入。 <html> <head> <title></title> </head> <body> </body> </html> 12345678910111213...

1-5DreamWeaver

DreamWeaverとは Dreamweaverは html、css(後で説明)を記述などだけでなく、WEBサイトの制作・管理に特化したソフトです。さてDreamweaverなのですが、ホームページ作成用のアプリケーションは多数ある中で何故Dreamweaverを使うのか?現在のWEB業界では基本的にはDreamweaverを使用できることが常識になっています。大多数のシェアを占めているということはそれだけ使い勝手のよいソフトということです。...
2-1スタイルシート(css)とは

2-1スタイルシート(css)とは

CSS(Cascading Style Sheets)とは 簡単に言うとサイトのデザインを定義するもの 世界標準であるし、SEO対策にもなる CSSは、HTMLと組み合わせて使用します。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾(デザイン)するかを指定します。 拡張子は「.css」になります。 文書の内容と表現(デザイン)を分ける HTMLは本来文書の定義をするべきで、デザインするべきではない。 デザインはスタイルシートで記述。 メリット ●...

2-2イメージの挿入、リンク

イメージの挿入 WEBサイト用画像の種類 このコースでは基本的にjpgとgifを使用します 1.jpg・・・主に写真やグラデーション 2.gif・・・主にナビゲーションバーなどのアイコン、イラスト (はっきりとした線になる。任意の色を透明化することが出来たり、動く画像が作れます) イメージの挿入 イメージを挿入したい場所にカーソルを置く 方法1.画面右下のファイルパネルの中からの中から挿入したい画像をドラッグする 方法2.挿入 → イメージ → ファイルを選択 代替テキストは記入しておく...

3-1divとは

div いままではhtmlタグにしかルールを定義できませんでしたが、それでは十分ではありません そこでdivを使用します。 divとは簡単に言うとボックス(囲んだ範囲をひとかたまり)の意味です 下図のようにボックス分けをして位置を指定してあげないと、ただ上から順番に並べただけのサイトになってしまいます divを挿入してcssルールを適用させていきます divの挿入時の名称 任意の名前をつけてかまいませんがこのコースでは下記のように統一します DreamWeaverでdivの挿入をするときは # を記入する必要はありません...
3-2素材作成photoshop

3-2素材作成photoshop

フォトショップ フォトショップの主な機能 写真の修正、加工、合成 イラストの書き起こし 起動してみる フォトショップのアイコンをダブルクリック(mac) スタート→すべてのプログラム→フォトショップ(windows) 基本画面 メニューバー………………各種機能 パレット……………………表示がない時はメニューバーのウインドウに収納されている(チェックが入っていればパレットは出ている状態) ツール……………選んだツールの詳細が、オプションバーに出る フォトショップでデータを開く データを開く方法はいくつかあります...

3-4WEB素材作成のためのイラレ基礎

イラストレーター WEBサイトは閲覧者がまずチェックする企業や店舗の顔とも言えます。 美しい画像や、デザインでサイトに訪れた閲覧者の関心を集めましょう。 イラストレーター全機能の……40パーセント程度を扱います。 図形……1 長方形を作る ツールボックス → 長方形ツールを選択する → クリック → ドラッグ → 放す 正方形を作る ツールボックス → 長方形ツールを選択する → 画面をクリック → 数値入力 最初に表れる数値は、前回に作った長方形の数値である いろいろな図形を作ってみる 1.多角形……………………ツールボックス...
3-3素材作成 Illustrator

3-3素材作成 Illustrator

イラストレーター イラストレーターの主な機能 イラストの書き起こし 起動してみる イラストレーターのアイコンをダブルクリック(mac) スタート→すべてのプログラム→イラストレーター(windows) 基本画面 メニューバー………………各種機能 パレット……………………表示がない時はメニューバーのウインドウに収納されている(チェックが入っていればパレットは出ている状態) ツール……………選んだツールの詳細が、オプションバーに出る イラストレーターでデータを開く データを開く方法はいくつかあります...

4-1テンプレート

テンプレートとは WEB サイトを作るにあたって、1ページのみということはありません。 ヘッダー、ナビゲーション、フッターなどの各ページ共通の項目があることがほとんどです。 1ページ仕上げてからコピーするという方法もありますが、それでは修正があったときに1ページずつ 対応しなければなりません。そこでテンプレートという機能を使用します。 レイアウト済みのHTMLファイルをテンプレート化する テンプレート化したいファイルを開く → メニューバー → テンプレートとして保存 → 任意のファイ ル名をつける →...
4-2テーブル

4-2テーブル

テーブルレイアウト 簡単にリストなどが作れる 主に表組みを作るときに使用する テーブルのデザイン要素 テーブルの挿入 新規ファイルを開く → テーブルを挿入したい箇所にカーソルを合わせる → メニューバーの挿入、 テーブル → 行と列を確認してok 専門用語 キャプション…テーブルのタイトル 専門用語 サマリー…テーブルの説明文、グラフ内容をなるべく詳しく記入  行、列の追加 挿入したい箇所後ろのセルにカーソルを置き、右クリック → テーブル → 列の追加もしくは行の追加をクリック → 挿入されました 文字の入力...
4-3クラスルール

4-3クラスルール

cssでclass属性を使用する スタイルシートにより見出しタグには色を付けたりなどデザインできますが、「内容上一部分だけ太字にしたい」「色を変えたい」などの時もスタイルシートを使用します。 理由は今まで通り、変更があった際に一気に変更できる為です。 クラスルールを作成する → 新規cssルール → セレクタタイプ → クラスを選択→ 任意の名前を付けok(ここでは.redとします) → 試しに文字色を赤にしてok → 文字の色を赤色にしたいタグ、もしくは部分を選ぶ → プロパティパネル → スタイル → redを選択 →...

5-1サーバー

いよいよアップロード ローカル上で自分のサイトが完成したら、サーバーにアップして実際にアクセスしてみよう リモート情報を設定 メニューバー → サイト → サイトの管理 → 自分のサイトを選択し、編集 → カテゴリからリモート情報を選択 → アクセスをFTPにする → FTPホスト、ホストディレクトリ、ログイン、パスワードを入力 → テストをクリック → 接続されましたと出たらokをクリック リモートサイトを見てみよう リモートサイトとはサーバー側のことです...
1 / 3123