授業

第1回プレゼン発表

第1回サイト作成に向けて【1月末締切】 Googleドライブを使用し、各自どんなサイトを制作するのか発表 (テーマ、ターゲット、コンテンツ、構成案・・など) 私の予定 テーマ:乗馬を気軽にできるレジャーとして紹介する [[[作成に向けて課題 写真調達 人を…

画像置換

ナビゲーションボタンの表示の仕方 *今回はCSS Sprite以外の方法を実践<CSS Sprite> メリット:レスポンスが速い デメリット:IEで表示が崩れる危険がある ・Photoshopでボタンを作成 上記5種類×2(ホバー分)1.CSSで表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ナビゲーション</title> <style> * { mar</meta></head></html>…

プレゼン準備/月例テスト第2回/自習

第1回サイト作成に向けて【1月末締切】 GoogleドライブでPowerPoint的プレゼン資料を作る テーマ サイト作成の目的 ターゲット コンテンツ内容 〜仕事の現場では〜 ヒヤリングシートなどを用意し、クライアントの意向を充分に聴取。 すり合わせを行ないなが…

IF文/デザインの話

前回受講生の方々から体験談を伺う。 ジョブカードは早いうちから準備しておく。 授業記録にEverNoteが便利 。。など Flash IF文 ステージサイズを幅500に設定 半径20のボールを左から右へ動かす。 onClipEvent(load) { speed = 10; //移動速度 leftEdge = -…

Flash/Eclipseの導入

リップル効果(いわゆるガチョーン!) 入力した文字を全選択 修正→分解 修正→タイムライン→レイヤーに配分 一文字ずつレイヤーができるので、一文字ずつ分解→シンボルに変換 10フレーム目、17フレーム目にキーフレームを挿入 クラシックトゥイーンを作成 1…

Flash 時間の制御/JavaScript

Flash 時間の制御 アニメーションを作る スタート、ストップ、バックの動作を制御する まずは動かすキャラクターを用意 Illustraterで描きます。見本を配置しトレース。 [見本] ↓ [明らかにクオリティの下がった自分が描いた車] Flashにコピペ。シンボルに変…

Googleドライブ/テストサーバー/Flash クロスフェード

Googleドライブの活用 officeソフトでいうところの… 文書→Wordプレゼンテーション→Power Pointスプレッドシート→Exel フォームはアンケート作成に便利得られた回答は自動的にスプレッドシートに格納され、データベースとして使える優れもの! テストサーバー…

アニメーション

Flash タイムライン 2パターンのフレームだけで動きを作る 何もないところから円を描く 作成するときは、描いた円を消していき、反転する 歩く女の子 人が歩く姿を表現するときのポイントは? ⇒頭の位置が上下する ActionScript JavaScriptへの前哨として… …

サイト構築演習

ケーキショップのサイトを作ってみよう <構成> トップページ 商品――おすすめ――注文 店舗案内 お問い合わせ フォーム ・お問い合わせ ・チェックボックス ・ラジオボタン ・リスト ・パスワード ・アップロード ・隠れデータ データ送信の前に、段階を踏ん…

アップロード体験と企業系サイト続き

アップロードしてみよう 忍者ホームページに登録→サーバー確保 FFFTPを用意 DreamWeaverでもアップできる 企業系サイトの顔つきを変えてみよう 作業中(未完) ↓元↓

企業系サイトを作ってみる

↓見本↓ フォントの話 Helvetica…基本Futura…Mが特徴的Optima…日本人が好んで使うモリサワMB101B…日本人が一番好き?

positionを使ったレイアウト

position floatを使わずに横並び配置ができる *レイアウトに影響が出やすいため、1ページ内1箇所の使用にとどめておきたいところ static:常態 上から下へ relative:相対位置 absolute:絶対位置(全体の左上が基点) fixed:絶対位置(スクロールしてもそ…

CSS演習

文字色、文字サイズ、背景色 レイアウト 背景画像

画像解像度

pixel/inch…72個が基本=100%(原寸) line/inch…175線が綺麗に見える

ボタン作成

マージンの相殺 大きい方の値が採用される リストを使ったナビゲーション 縦並びのボックス 横並びのボックス CSS Spriteでボタン作成 画像を準備 Illustratorで作る Photoshopで作る

フォトショップ基本操作

合成練習いろいろ 「電話」と「ゴーグル」 不要な部分は長方形を重ねて背景色に塗ってしまう。 「窓」と「風景」 窓の形を選択(今回はあらかじめ用意されていた選択範囲を[選択範囲→選択範囲を読み込む]で) コピーした風景を[編集→特殊ペースト→選択範囲内…

CSS Sprite

なんのため?→画像の読み込みを減らす→レスポンスが速くなる! ↓以下画像↓を使って演習

初めてのフォトショップ

起動方法 アイコンをダブルクリック 2回目のクリックと同時にCtrl+Alt+Shiftを押す エラーが起きやすいソフトなので、この方法で毎回リセットが望ましい 初期設定 編集→カラー設定→設定:「Web・インターネット用-日本」 環境設定→一般→単位・定規:pixel…

floatを使ったレイアウト

IE対策準備 レイアウトが崩れやすいIEブラウザ表示を考慮してページ作りをするために IE TesterIE5.5, IE6, IE7, IE8, IE9betaの確認が同時にできる Expression Web試用期間あり? MultipleIEIE3〜IE6を一括インストール 授業ではIE Testerを導入 float 本来…

デザインの概念を考える

テーマ:考えるプロセス/ゲシュタルトの法則とユーザーの消費行動 講義 デザイナー(を目指す者)の心得〜世阿弥の観念を借りて〜 「感動」は意外性から生まれる 生まれながらの才能と後天的な才能 模倣し続ければいずれ本物に昇華する ⇒とりあえず今の自分…

CSS外部リンク

スタイルシート スタイルを別ファイルで指定する=外部リンク htmlファイルのheadに以下記載 <link rel="stylesheet" href="css/style.css" media="screen,print"> relとhrefは順不同ok スタイルシート別ファイル style.css(汎用性のある名前"style"が一般的) @charset "UTF-8";は省略可能その場合はhtmlのcharsetに依存1行あ</link>…

CSS練習

実践枠で囲む 破線枠で囲む 擬似クラスの練習(リンクの文字色・背景色) 背景色と余白 背景画像を設定 背景画像を設定(水平方向に繰り返し) 背景画像を設定(垂直方向に繰り返し) 背景画像と枠線 背景画像(繰り返さない) 覚え書き div …division idとc…

図形練習

イラストレーター 楕円形だけでロゴを描く テンプレート:i-modeロゴ 楕円ツールで楕円を描くガイド線を表示させると楽(CTRL+Rでルーラー表示) 選択ツールをダブルクリックして移動パレットを表示、楕円を移動コピー i-modeロゴの凹凸、凹部分に沿うように…

初Dreamweaver

月例テスト第1回 インターネットの基礎知識確認 スタイルシート CSSは立体構造 margin…コンテントが持つ領域の外側を広げるもの padding…コンテントが持つ領域を広げるもの <style> h1{ margin: 0 0 20px 0; padding: 10px 1em 8px 1em; } </style> *に対してmarginは使用し…

初めてのスタイルシート

CSS firefox環境設定 DevelopperTool1.1.9(最新版は英語なので注意!) HtmlValidator ソース表示でエラー発見できる優れもの 書いてみる の中に書く書き方=エンベッドembed(埋め込み) <head> <style> body { background-color: #; } h1 { color: #; font-size: ; } h</style></head>…

練習課題

イラストレーター 線対称・点対象(回転)・相似単なるお絵かきソフトではなく、計算ソフトとして物理的な感覚が必要 HTML 表組

はてなダイアリーの設定 ブログは公開してナンボ 見栄えを意識すること(配色は3,4色程度でまとめる、など) SEO対策には記事タイトルが重要 イラストレーターの基本操作 作業環境設定 ファイルを開くときはフォルダからダブルクリックではなく、ソフトのメ…

パラグラフの概念

大見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 小見出し 番…