WEB 第7回
今まで習得したDreamweaverの操作
【教科書以外】 ・FTP設定 ・WEB用画像の作成。
【教科書Part１】・新規HTMLページを作る。 ・画像をはる ・リンクをはる
【教科書Part2】＝(前回の内容)
lesson1・ページプロパティ(基本設定)ーページタイトル／文字の色／リンクの色／背景色・画像
lesson1・HTMLとCSSの関係性を理解するー(CSS=スタイルシート)
lesson2・見出しをマークアップする。(プロパティパネルの 見出し1／見出し２を選ぶ)
lesson3・リストを定義する。(プロパティパネルのリストボタンをクリック／リストタイトルを太文字にする)
lesson3・コピーライトをマークアップ。([コード]か[分割]で、コードに<address>~</address>を記入)
lesson4・画像挿入 (方法３通り)
方法1 ：画面上のメニューバーの[ウインドウ]の[ファイル]から画像をHTMLにドラッグ。
方法２：画面上のメニューバーの[挿入]から[画像]を選び、挿入したい画像を選ぶ。
方法３：メニューバーの下の挿入のパネルの画像のアイコン(草原の木)をクリック、挿入したい画像を選ぶ。
--------本日の内容-------------------------------------
【教科書Part3】lesson1
step1・サイトを定義する(WEB第３回にやった内容です)
step2・サンプルで内容を確認ー[スタイルレンダリングでの表示]で確認できること
step3・[CSSスタイル]パネルの役割を理解するー[すべて]と[現在]の見方／[ビジュアルエイドでの表示]で確認できること
step4・デフォルト(初期状態)に戻す
※ 教科書は「編集に便利な表示方法を確認してみましょう」という内容なので、
↓の課題でこれまでの復習もこめて実際にやってみましょう。
【課題】Dreamweaverに元々入っているテンプレートを改造する
http://yoko14145.com/cid/css-lesson.zip
から元データ(圧縮データ)をダウンロード
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"")にする(又は削除する)
完成すると以下のようなビジュアルになります
おまけ
【階層を理解するとWEBサイトがとても編集しやすくなります】
サイトの作り始めは HTMLファイルやイメージファイルなどの数も少なく
ファイルの収納は1つのフォルダでも困りませんが、
ページが増えてくると、1つのフォルダ内にいろいろなファイルが散らばってどれがどれだが分からなくなります。
ファイルを手直したり、イメージを差し替える時たくさんのファイルから一つ一つ確かめないと作業はできなくなり、
効率が非常に悪くなります。
そこでファイルの整理が必要になります。
新しいフォルダを作ってその中に関係するファイルを一まとめに収めます。
フォルダの中にサブフォルダを作りサブフォルダの中にまたフォルダ・・・と
フォルダ名も入っている内容に合う名前を付け、自分がわかりやすいように整理します。
ファイルのフォルダ分けをするとファイルの位置が変わります。
そこで階層(かいそう)という考え方が必要になります。
ファイルの収納は1つのフォルダでも困りませんが、
ページが増えてくると、1つのフォルダ内にいろいろなファイルが散らばってどれがどれだが分からなくなります。
ファイルを手直したり、イメージを差し替える時たくさんのファイルから一つ一つ確かめないと作業はできなくなり、
効率が非常に悪くなります。
そこでファイルの整理が必要になります。
新しいフォルダを作ってその中に関係するファイルを一まとめに収めます。
フォルダの中にサブフォルダを作りサブフォルダの中にまたフォルダ・・・と
フォルダ名も入っている内容に合う名前を付け、自分がわかりやすいように整理します。
ファイルのフォルダ分けをするとファイルの位置が変わります。
そこで階層(かいそう)という考え方が必要になります。
↓階層について
http://www2.ttcn.ne.jp/webforest.com/html/hierarchy.html
↓絶対パスと相対パス
http://www.d3.dion.ne.jp/~tiyoko01/rink/rink-kihon.html
ホームページを作成し始めて、最初に混乱するのがリンクでのファイルの位置指定。
同じフォルダ内にあるファイルならそのままファイル名を指定すればいいのですが、
フォルダ分けをするとファイルの位置も変わりわかりにくくなってきます。
フォルダを移動するたびに / を入れ、上のフォルダに上がるたびに ../ を加えることを
頭においてファイル指定方法を実行してください。
●ディレクトリって？
ディレクトリというのは、パソコンのフォルダと同じものです。
ファイル収納する場所です。
フォルダをインターネット上で使うときはディレクトリという言葉を使います。
同じフォルダ内にあるファイルならそのままファイル名を指定すればいいのですが、
フォルダ分けをするとファイルの位置も変わりわかりにくくなってきます。
フォルダを移動するたびに / を入れ、上のフォルダに上がるたびに ../ を加えることを
頭においてファイル指定方法を実行してください。
●ディレクトリって？
ディレクトリというのは、パソコンのフォルダと同じものです。
ファイル収納する場所です。
フォルダをインターネット上で使うときはディレクトリという言葉を使います。