2013-08-01から1ヶ月間の記事一覧
全角スペースや→もキーワード扱いになる。 HTMLのエラーも評価対象。 ハブになっていると評価が高い。
○足あとのマーク 効果→スタイライズ→角を丸くする。アウトラインもこの形にするにはオブジェクト→アビアランスの分割。
IE6は、インターネットを日常的には使ってないPCに入っているときがある。 IE6でよくあるのがカラム落ちと透過PNGの不適応。 IEtesterで検証。xamppでテストサーバーを使って表示する。 DreamWeaverのブラウザーリストに追加できる。 カラム落ちを防ぐ float…
サイト制作の実務手順書をスキャンしたものを先生から配布してもらう。 ペーパーテストの問題は、この中から出題するとのこと。 実際にサイト制作していくにあたって、要件定義書、ヒアリングシート、ワイアーフレーム、制作仕様書、ガントチャートをつくる…
Favicon作成 先生が配布したケーキのイラストをPhotoShopでFavicon生成用に加工する。 多角形選択ツールでケーキ以外の部分を選択してdelete。 イメージ→モード→RGBにしてpsd形式で保存しておく。 Faviconのサイズにしても何の絵かわかるように色を調整する…
実践演習課題解説Q2 alert(point >= 70 ? '合格' : '不合格'); （if）point >= 70なら合格、（else）その他は不合格。 PlaceHolder 画像がない時に、ブラウザ上で画像スペースを仮に確保するツール：PlaceHolder <imgsrc="http://placehold.it/widthの値xheightの値"> を記述。↓例。 クロスフェード 講師記録 or </imgsrc="http://placehold.it/widthの値xheightの値">…
業種とサイト構築の関係性 業種によっては文章構造よりデザイン性を重視しても上位表示される。 ケーキショップのサイトはアウトラインを構築しなかったりtableレイアウトを採用しているものが多い。 情報系サイトではない場合は、見栄え重視で構わない。 た…
クライアントからの改修依頼があったという設定。 ビルボード画像 先生が配布したPSD形式の背景画像で作業。 長方形を描くときはアンチエイリアスのチェックを外す。 画像に不透明度60の帯を重ね、キャッチコピーを乗せる。 文字ごとのカーニングはalt←・→で…
ビルボード画像の任意の範囲にリンク領域を設定する DreamWeaverのデザインビューを開き、プロパティのマップ項目にあるホットスポットツールを使う。プロパティの下半分が表示されない場合は、プロパティ内のスペースでダブルクリックすると表示される。 任…
HTML <htmllang="ja"> <head> <metacharset="utf-8"> <title>H13C13</title> <linkrel="stylesheet"href="css/H13C13.css"> </head> <body> <divid="container"> <divid="wrapper"> <divid="content"> <h1><imgsrc="img/13/logo.gif"width="267"height="129"alt="Patisserie camellia"></h1> <divid="nav">…</divid="nav"></divid="content"></divid="wrapper"></divid="container"></body></htmllang="ja">
HTML <htmllang="ja"> <head> <metacharset="UTF-8"> <title>H12C12</title> <linkrel="stylesheet"href="css/H12C12.css"> </head> <body> <divid="container"> <divid="header"> <h1><imgsrc="img/12/logo.gif"width="290"height="38"alt="サンプルスタイルシートカンパニー"></h1> <divid="nav"> <ul> </ul></divid="nav"></divid="header"></divid="container"></body></htmllang="ja">
HTML <htmllang="ja"> <head> <metacharset="UTF-8"> <title>H11C11</title> <linkrel="stylesheet"href="css/H11C11.css"> </head> <body> <divid="container"> <divid="header"> <h1>Café de la plante</h1> <p>サブタイトルサブタイトルサブタイトル</p> <divid="nav"> <ul> <li><ahref="#">トップページ</a></li> <li></li>
講師記録「Flash-アルゴリズムの構築」 IllustratorからFlashに画像の移行 AiでコピーFlでペースト コメントアウト １行は//○○ 複数行では/*○○*/ 表示→ペーストボードのチェックを外すと右端あわせ。 画像が静止状態から加速していくプログラム 画像に記述す…
テキストP200。 HTML <divid="container"> <ulclass="tab"> <li><ahref="#tab1"class="selected">JavaScript</a></li> <li><ahref="#tab2">CSS</a></li> <li><ahref="#tab3">HTML</a></li> <li><ahref="#tab4">jQuery</a></li> <li><ahref="#tab5">XHTML</a></li> </ul> <ulclass="panel"> <liid="tab1"> Lorem ipsum dolor sit …</liid="tab1"></ulclass="panel">
.artは昔のIllustratorの拡張子。 .eps(Encapsulated Post Script)は、海外サイトの素材データで多い。Illustratorのバージョンを問わず開ける、印刷しやすいという点があるが、Webでは使わないので.epsデータを入手したら.ai形式か.psd形式で保存する。 ctr…
ユミの部屋メイン画像 先生が配布する素材画像を組み合わせてつくる。 ガイドで範囲を決める。 背景のケーキ画像を読み込み、レイヤーでマスクを追加してグラデーションツールで白地になじませる。 ケーキ画像のクッキーをなげなわツールで選択、コピー。プ…
ファビコン（雨粒） 丸を描いて、頂点のパスをアンカーポイント切り替えツールでクリックして尖らす。上に伸ばしたりして形を調整。 薄い色で縦長の楕円を描いて重ねる。 ファビコン（星） 星ツール。 ファビコン（吹き出し） 足 楕円を２つずらして重ね、パ…
下絵をコピー＆ペーストで持ってきてから、レイヤーをダブルクリックしてテンプレートにチェック。 パスで描いた線を、リフレクトツールでコピーしたあとつなげるには、オブジェクト→パス→平均で2軸とも で位置を合わせから、パス→結合。 同形でサイズを変え…
Math.メソッド名(引数１,引数２,・・・) maxメソッド・minメソッド <script> var num1=10; var num2=15; var num3=16; document.write('<h1>',Math.max(num1, num2, num3),'</h1>'); document.write('<h1>',Math.min(num1, num2, num3),'</h1>'); </script> randomメソッド（…
売るためのトップページ 消費者はすべてのページを見てくれるわけではないので、必要な情報をトップページに必ずのせる。 必要な情報とは、消費者が持っているサイトに対する不安を解消する情報と、買うために必要な情報。 制作者の情報（会社概要や個人のプ…
Dateオブジェクト（現在の日時を取得） <script> var now; now = new Date(); document.write('<h1>',now.toString(),'</h1>'); </script> Dateオブジェクト（指定した日時のオブジェクトを生成） 日時指定でサイト表示させるときなどに使う。 <script> var aDay; aDay = new Date(201</script>…
h1内に画像だけでは検索されない。altはアウトラインに反映されない。 トップ画像はサイトを印象づけるものであり、買う動機になるものではない。また、画像をいろいろ変えると印象に残らなくなる。 新着情報は必ずdl。 商品情報では画像が重要な情報になる…
３枚重ねのシャツ ベースはグラデーションつきの角丸。コピーして３枚重ねたら選択、効果→パス→パスの変形 で台形に変形させて奥行きを出す。 襟もとは、内側を２つの楕円に濃淡差をつけて重ね、襟と影をペンツールでパスを設置して作る。 ボタンは、影を黒…
店舗紹介ページ （前回のつづき）CSSでtable部分を指示通り入力。 商品購入ページ template.htmlを別名保存。 HTMLでform部分を指示通り入力。 トップページ template.htmlを別名保存。 FireWorksでカンプから画像切り出し。 新着情報はdlではなくpで記述。 …
HTML <htmllang="ja"> <head> <metacharset="UTF-8"> <title>ECOLOGY</title> <linkrel="stylesheet"href="style.css"> </head> <body> <divid="container"> <divid="header"> <h1>ECOLOGY【エコロジー】</h1> <p>Computer Technology Groupsでは、<br> グループをあげてエコロジー／環境問題に取り組んでいます。<br> 成果や実績を地域に還元することもポリシーとしています…</p></divid="header"></divid="container"></body></htmllang="ja">
お手本：忘筌 ナビゲーション部分にはアコーディオンパネルを使う。 制作したもののサムネールを表示する。 サムネール画像にはbox-shadowでドロップシャドウをつける。 metaにkeywordとdescriptionを設定する。 keywordは３つ。descriptionにはkeywordを使…
忍者ツールズに登録。 忍者ホームページでFTPの設定（サーバアドレス、ユーザ名、パスワード）。 DreamWeaverでリモートサーバー設定。サイト管理のサーバーで忍者ホームページで設定した項目を入力。テストでつないでみる。 ↑（PUT）でアップロード。 授業…
HTML5について 2014勧告。 class名に半角スペースの使用が可能。でも今の段階ではまれ。 dirは扱いづらいので使わない方向で。 headにIE対策のJavaScriptとstyleを記述する。 ただし今現在のやり方なので、今後の動向をチェックしておく。 HTMlの記述 bodyの…
visibility:hidden;や-999emなどを使わない方法。 display:block; /*表示領域をブロックにして、*/ white-space:nowrap; /*改行はさせないで、*/ text-indent:100% ; /*文字の長さ分右にずらして、*/ overflow:hidden; /*ずれてはみ出た部分は表示しない。*/
背景色つきの画像は、書き出すと色が変わってCSSで指定する背景色と合わなくなるので作らない。 背景色をつけなくていけない場合は書き出し時に、 GIF形式を選択 減色アルゴリズム→知覚的を選択 透明部分にチェック 透明ピクセルを合成させるカラーを定義→マ…
