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形式を選択 減色アルゴリズム→知覚的を選択 透明部分にチェック 透明ピクセルを合成させるカラーを定義→マ…
カンプからCSSを起こすときに使える機能。 デザインビューで表示→トレーシングイメージ→ロード。 ルーラーは表示→ルーラー→表示。 ガイドをダブルクリックすると移動距離の指定ができる。
psd形式で書き出すことでレイヤー構造を保持できる。 テクスチャは保持できないので、FWでコピー＆PSでペースト。 ガイドをダブルクリックすると移動距離の指定ができる。
GoogleドライブのプレゼンテーションはPowerPoint形式で書き出し可能。 飲食店のサイトは商品写真を揃えるのが大変。 知り合い関係のサイト制作は、人間関係に注意。 とことん追求して価値あるものなら趣味サイトを作ってもOK。 レンタルサーバーはLolipop26…
マウス操作 a要素 return:false; ブラウザ 選択時の背景反転 ::selection{background:#○○○;} toggle アニメーション アコーディオン 参考サイト：街をつくる建築作法
図形 描いたあと変更しやすい。 シェイプはプロパティでストロークの種類を、基本→エッジの硬い線（角）。 角丸にするなら柔・角。 カンバスのサイズを図形に合わせる場合は、変更→カンバス→カンバスを切り抜きorカンバスに合わせる。 テキスト（字詰め） カ…
HTMLはアウトライン構造が命 サイト制作での最重要事項は、情報を伝わりやすい文章構造で組み立て、これに沿ってHTMLでマークアップすること。 そのためには、まず中身となる情報を見て構造を把握する。 具体的にはツリー構造。本でいえば、 1.本のタイトル…
htmlデータは先生から配布。 商品紹介ページ（チーズスフレ、苺のバースデーケーキ、焼菓子詰め合わせ） FireWorksでカンプから画像の切り出し。 各ページの内容（div id="main"）の画像（タイトル、商品画像、購入リンクボタン）を切り出し。 DreamWeaverで…
facebookのグループからデータをダウンロード。 中身は全ページのカンプ、baseのCSS、ナビゲーションのIMG。 カンプから画像切り出し FireWorks 各カンプをページごとに読込み プロパティで座標指定X:0 Y:0 webレイヤーに切り出す素材 ガイドを引く→スライス…
表示・非表示を切り替える hide()メソッド show()メソッド fadeOut()メソッド fadeIn()メソッド fadeTo()メソッド 1000＝1秒。 show、fadeInは対象をdisplay;none;で消しておく。 fadeToは不透明度が0になっただけで対象は消えていないので、他の要素の位置…
複数ページのCSSを1つのCSSファイルで管理する場合、それぞれのページのbodyに個別のid名を振ることでstyleを分けることができる。
リンクのリストを作る。 pタグ デザインビューにリンク先の項目を入力。コードビューにすると自動的に改行ごとにpタグが振られる。 ul、liタグ リストにしたい項目にカーソルを合わせておいて、プロパティのリストをクリック。 aタグ アンカーリンクを設置し…
