Breaking News
Loading...
2013年9月9日月曜日

Info Post

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

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

1・サーバとつながっている自分のサイトのフォルダの中に
「css-lesson」のフォルダを移動する。

2・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に名前を変えて保存しアップロードする。




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

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


【階層を理解するとWEBサイトがとても編集しやすくなります】


サイトの作り始めは HTMLファイルやイメージファイルなどの数も少なく
ファイルの収納は1つのフォルダでも困りませんが、
ページが増えてくると、1つのフォルダ内にいろいろなファイルが散らばってどれがどれだが分からなくなります。
ファイルを手直したり、イメージを差し替える時たくさんのファイルから一つ一つ確かめないと作業はできなくなり、
効率が非常に悪くなります。
そこでファイルの整理が必要になります。
新しいフォルダを作ってその中に関係するファイルを一まとめに収めます。
フォルダの中にサブフォルダを作りサブフォルダの中にまたフォルダ・・・と
フォルダ名も入っている内容に合う名前を付け、自分がわかりやすいように整理します。
ファイルのフォルダ分けをするとファイルの位置が変わります。
そこで階層(かいそう)という考え方が必要になります。

↓階層について
http://www2.ttcn.ne.jp/webforest.com/html/hierarchy.html

↓絶対パスと相対パス
http://www.d3.dion.ne.jp/~tiyoko01/rink/rink-kihon.html


ホームページを作成し始めて、最初に混乱するのがリンクでのファイルの位置指定。
同じフォルダ内にあるファイルならそのままファイル名を指定すればいいのですが、
フォルダ分けをするとファイルの位置も変わりわかりにくくなってきます。
フォルダを移動するたびに / を入れ、上のフォルダに上がるたびに ../ を加えることを
頭においてファイル指定方法を実行してください。

●ディレクトリって?
ディレクトリというのは、パソコンのフォルダと同じものです。
ファイル収納する場所です。
フォルダをインターネット上で使うときはディレクトリという言葉を使います。

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

[ビジュアルエイド]の使い方

編集中の画面をパーツごとに見えやすくするツールを「ビジュアルエイド」と言います。
ビジュアルエイドは実際のサイトには表示されません。

編集するときにボックスの境目がわかりづらいので
試しに「CSSのレイアウトの背景」というビジュアルエイドを使ってみましょう。

コードやライブのボタンが並んでいる列の右側に目のアイコンがあります。 

これをクリックし、「CSSレイアウトの背景」にチェックを入れる

すると、CSSのタグやDIVごとにボックスの背景に仮の色がつき
境目が見えやすくなります。


※チェックを外せば背景の色は実際のサイト上で表示される色に戻ります。


0 コメント :

コメントを投稿