ラベル web の投稿を表示しています。 すべての投稿を表示
ラベル web の投稿を表示しています。 すべての投稿を表示

2015年11月5日木曜日

自分のWEBサイトで採点チェック項目に入るもの


採点チェック一覧表



サイト

1.indexがあるか　

2.menuバーがあるか 

3.テンプレートにmenuが組み込まれているか 

4.基本のテンプレートデザインを完成する (※ 段組みレイアウトになっていること！／フレームは×) 

5.CSSを書き出す　※<head>~</head>内にピンクの文字<style type="text/css">〜</style>があって 　全ページに同じ内容の場合×
　　　　　　　　　　直し方=この方法で外部.cssファイルを作成してリンクする

6. 4を複製して各コンテンツを作成する 

7.オリジナリティのあるサイトを作成し完成する 
オリジナリティ？＝以下のうちのどれかの条件を盛り込んであるか、
画像パーツを工夫して作成しているかなど
★ツールを組み込んでより高度なサイト作成を行う 
★画像の多いサイトを作成する場合lightboxやwebフォトギャラリーを使う  
★SNSを外部表示するjsツールを使用する   
★オンラインジェネレーターを使用する 

------------------------------------------------------------------------

web用に保存で色がおかしくなるときの対処法



A.
web用に保存の画面で
sRGBに変換の項目にチェックを入れる

それでもなおらない場合

B
http://noir.mods.jp/web/?p=10

1.画像をphotoshopで開いて、
2.編集→プロファイルの変換を選ぶ
3.sRGBで始まる項目を選択
 (ここがCMYK関連やAdobe RGBになっていると色がおかしくなる)
4.その後web用に変換をする
時刻:
ラベル:

2015年11月2日月曜日

Twitterをwebサイトに組み込む

SNSなどの外部ツールを組み込む

1.まずは  2学期WEB提出物  の「サイト」のテンプレートを完成させて、2.完成したテンプレートをコピーして本文(コンテンツ)に各ページ内容を作成して行く

3.その１つに各SNSのページなどを作成する。

[参照]　http://ateitexe.com/web/twitter-widgets-customize/

1.自分のtwitterにログインし、右上の歯車のマークから「設定」を選ぶ。

2.左の欄の一番下の項目の「ウィジェット」を選択

3.右上の「新規作成」のボタンをクリック

4.検索クエリの窓に自分のサイトに合うワードを入れる。

5.右下に出てくるコードをコピーしてサイト内の表示したい場所にペーストする。
(index.htmlが完成している人は、index.htmlをコピーしてsns.htmlまたはtwitter.htmlという名前で保存し、sns.htmlの本文の部分にペーストする。)
----------------------------------------------------------------------

例) 自分のtwitterを持っている場合は自分のtwitterを表示してみましょう。


1.自分のtwitterにログインし、右上の歯車のマークから「設定」を選ぶ。

2.左の欄の一番下の項目の「ウィジェット」を選択

3.右上の「新規作成」のボタンをクリック

4.ユーザー名を入れて「ウィジェットを作成」のボタンをクリック
5.右下に出てくるコードをコピーしてHTMLの表示したい場所にペーストする。

---------------------------------------------------------------------

Facebook の組み込み
　2種類埋め込むコードが出てくる事が多いので若干複雑

個人ページのバッジの埋め込み
https://www.facebook.com/badges/
http://ameblo.jp/7natsu5/entry-11344350567.html

Social plugin
http://developers.facebook.com/docs/plugins/

---------------------------------------------------------------------

youtubeの組み込み
サイトに埋め込みたいyoutubeのページを表示している時に
右下の「共有」をクリック→下に出てくる「埋め込みコード」をクリック





時刻:
ラベル:

2015年10月26日月曜日

段組みレイアウトでサイトを作成する。

例)design_zeroのテンプレートを元にサイトを作る場合
http://artinkochi.flier.jp/2015/test/
1)１枚綺麗なテンプレートをまず作る
2)そのページの複製をページ数分作る。
3)それぞれのページの本文の部分を書き換えて
4)リンクでつなぐ
時刻:
ラベル:

2015年10月16日金曜日

jQueryを組み込む(例: lightbox)

lightboxの設置の仕方(↓元記事)

http://www.chamanet.com/lightbox/
(※英文の説明自体が一部間違っているので、本ページの説明を読んで編集してください)

画像紹介を多く扱うサイトの作成


画像を多く紹介するサイト作成には、htmlページを大量に作成(複製)するか、
元画像そのものを呼び出して表示できるjqueryを使うか
photoshopの自動処理のwebフォトギャラリー機能を使って作成すると効率が良い。
(jquery=高度なcssとjavascriptを使いやすく改良した配布セット[キット]のようなもの)

lightbox
[公式サイト 英字サイト]
(※英文の説明自体が一部間違っているので、本ページの説明を読んで編集してください)
日本語サイト(※説明が古いので、本ページの説明を読んで編集してください)
http://www.chamanet.com/lightbox/ 




Lightbox導入方法

Lightboxの導入方法とサンプルのダウンロード
簡単にLightboxに対応出来ます。




Lightboxのサンプル
サンプルページサンプルページの写真をクリックすると
Lightboxが起動します。
サンプルページのHTMLコード


Lightbox導入方法
１．ダウンロードLightBoxサイトからLightboxをダウンロードして下さい。
ダウンロードはこちら
２．ZIPファイルを解凍LHACA、LHASAなどで解凍して下さい。
解凍するとdistというフォルダの中に
「css」「images」「js」が作成されます。



３．サーバーに転送Lightboxに対応させたいページ(例えばgallery.html)があるフォルダと同じフォルダ内に「css」「images」「js」を転送します
転送後、ディレクトリ構造はこのようになります。

index.html  ←Lightboxに対応させたいページのばあい





※　解凍した「images」の中のデータは不要です
４．HTMLタグの編集Lightboxに対応させたいページのHTMLタグを編集します。

<head>〜</head>内に を挿入します。

</body>の直前の行に
を挿入します。
※公式サイトの説明にはhead内に入れるとありますが、head内では動きません。
※公式サイトの説明にはlightbox.jsやlightbox.min.jsを入れると書いてありますが、この２つのファイルはそれだけでは動きません。
lightbox-plus-jquery.jsをbody内に書かないと動きません。


各写真のHTMLタグを下記のように修正します。

グループ名は「aiueo」や「abc」など自由な半角英字で指定します。

サムネール画像クリックでlightbox出現 　文字クリックでlightbox出現 






















PhotoshopのWEBフォトギャラリーの機能を使う



(↓使い方の紹介サイト)※CS6のphotoshopではこの機能がなくなりました













時刻:









ラベル:













          

        

          

        

2015年10月9日金曜日


          

        









WEB 10/9の授業内容










1 フローチャートを描く  → →→　info@cid.jp.netにメールに添付して提出







2 メニューボタン部分を動くように設置してみる








3テンプレートを決める→テンプレート内に2のメニューを組み込んでみる
　　　　　　　　　　　　　　　→具体的なやり方http://cid2015gd2.blogspot.jp/p/1_28.html







4 WEBサイトの仮組をして、見た目のデザインをバランス良く仕上げる　
　　　　　　　　　　　自分の過去作品を使ってバナーやロゴを完成させる









時刻:









ラベル:













          

        

          

        

2015年10月5日月曜日


          

        










小テスト css-lesson (1学期の復習)--元々作られているテンプレートを改造する




















http://yoko14145.com/cid/css-lesson.zip

から元データ(圧縮データ)をダウンロード



１・サーバとつながっている自分のサイトのフォルダの中に

「css-lesson」のフォルダを移動する。


２・css-lesson.htmをDreamweaverで開いて編集。

編集内容は　下記の通りの10ヶ所

  











 (10)

最後に、css-lessonのフォルダごと自分のサイトにアップロードする。(＝提出)



※

 (7)のタイトルと文字の内容は下記を引用する事。


がん細胞、光らせて発見　ウミホタルの発光物質利用
青く光る甲殻類の一種、ウミホタルの持つ発光物質を利用して、マウスのがん細胞だけを光らせる技術を産業技術総合研究所の近江谷克裕主幹研 究員らのグルー プが開発した。青い光を透過性の高い近赤外線に変換することで、体の奥にあるがんも特定できるようにした。がんの新しい診断法の開発につながる成果だ。今 週の米科学アカデミー紀要で発表する。 ウミホタルは日本近海に生息する体長数ミリの甲殻類。発光物質「ルシフェリン」と、ある種の酵素が化学反応して光る。ルシフェリンは、ノーベル化学賞を受 賞した下村脩さんが初めて結晶化したことで知られる。





(9)の背景色の変更の仕方。

1.画面上のメニューバーの[ウインドウ]の[CSSスタイル]にチェックをいれる

2.CSSスタイルのパネルのexm_navi_right.cssを開く

3.bodyを選択すると[bodyのプロパティ]がその下のウインドウに出るので

4.background-colorを#990000に

5.background-imageを(url"")にする(又は削除する)



※http://自分のサイトのURL/css-lesson/

　で表示されるようにindex.htmlに名前を変えて保存しアップロードする。



公開先ページのURLリンクはここから確認









完成すると以下のようなビジュアルになります









--------------------------------------------------------------------------------------------------------------------------









時刻:









ラベル:













          

        

          

        

2015年9月18日金曜日


          

        









実践作業(9/18・9/25・9/28)










1 フローチャートを描く







2 メニューボタン部分を動くように設置してみる












3テンプレートを決める→テンプレート内に2のメニューを組み込んでみる

　　　　　　　　　　　　　　　→具体的なやり方http://cid2015gd2.blogspot.jp/p/1_28.html







4 WEBサイトの仮組をして、見た目のデザインをバランス良く仕上げる













外部SNSをWEBサイト内に表示する方法




SNS系----Twitterの詳しい設置例

Facebook・Twitter・Google＋・Instagram



写真画像系

Pinterest・Flickr



動画系

Vine・Youtube・Vimeo

Dailymotion・Ustream・SlideShare













WEB用のフリー素材の探し方











[WEB用のフリー素材の探し方]

web free フリー素材　などで検索して、素材集配布のサイトを見つけ、

そのサイト内を検索する。

(検索エンジンの画像検索などでフリーではない画像を勝手に取って来て使わないこと)





WEBデザイン用フリー素材まとめのまとめ

　↑　※ダウンロードしたブラシやパターンのインストールの仕方












素材屋・HP素材のおすそわけ。
著作権フリーのweb素材屋













WEBデザイナーが作った超シンプル素材集 







フリー素材「blue-green」 - シンプルかわいいWEB用フリー素材 ...






メニュー画像を下揃えにする



(何も指定しないと左上ぞろえになるor真ん中でそろってしまう時の対処法)
http://2010yoko14145.web.fc2.com/menu1108.html


















[jQuery サンプル]　自分のサイトでこんなのがやってみたい







メニューにサブカテゴリを表示する サンプル



　作り方↓












画像が何枚か切り替わるバナー　jQuery 　







「bxSlider」













画像がスクロール表示で数枚表示されるバナー　jQuery



「slider.js」











-----------------------------------------------------------------------------



[HTMLとCSS] 自分のサイトでこんなのがやってみたい


背景画像を２重に貼って、ボックスの中身を固定(動かさない)で表示したい。

http://2010yoko14145.web.fc2.com/16mail.html



横幅100%の画面いっぱいいっぱいのヘッダーを作成したい

http://2010yoko14145.web.fc2.com/18.html



全体のレイアウトを中央揃えにしたい

http://2010yoko14145.web.fc2.com/33.html











時刻:









ラベル:













          

        

          

        

2015年9月14日月曜日


          

        









WEBサイトの仮組










WEBサイトの部品を作り、仮組をしてみましょう。



https://drive.google.com/file/d/0B6I9zVdEFoukVXpQbzR5RUt1VUU/view








時刻:









ラベル:













          

        

          

        

2015年9月11日金曜日


          

        










テンプレートとはそもそも何か？














テンプレートとは？ WEB Dreamweaver















テンプレートとは？　←　クリックでwikipedia[webテンプレート]へジャンプ







Webテンプレート（ウェブテンプレート）は、ウェブデザインにおいてコンテンツと見た目を分離し、Webドキュメントを大量生産するためのツールである。Webテンプレートシステムの基本概念である。Webデザインテンプレート、ホームページテンプレートとも。Webテンプレートはどんなタイプのウェブサイトでも使える。簡単に言えば、Webテンプレートはウェブサイト設定時のテンプレートである。







------テンプレートの例を見てみましょう。------









無料配布されているテンプレートを紹介しているサイト






















↑



このタイプのスマホ専用テンプレートを使う場合は、
[このコードを]userAgent.jsという名前で新規ファイルを作成して保存しindex.htmlと同じ場所へアップロードして
index.htmlのhead内に



<script type="text/javascript" src="userAgent.js"></script>



と一行入れる。と、見ている人のブラウザがPCかスマホかによって分岐自動転送されます。
参照：http://www.html5-memo.com/css3/pc_bunki/






<<<<<本日の作業>>>>>


自分のサイトのレイアウトを



どのパターンにするのか考えましょう





Aパターン：

上記のテンプレートのリンクから、自分のサイトの計画に合うものを使って作成を始める。



Bパターン：





自分のサイトの計画しているレイアウトが、上記のテンプレートのリンクにはない場合はDreamweaverから近いテンプレートを使って作成する

板書















時刻:









ラベル:













        

      









登録:
投稿 (Atom)