|
Ｗｅｂページを作る
＜１＞ページの観察
簡単なページを表示・・ソースを表示・・タグの意味を説明
＜２＞作り方の基本
１．メモ帳、エディター等でタグを書く。
２．ワープロで作った文書をＨＴＭＬ保存する。
３．ホームページ作成ソフトを使う。
無料・・ネットスケープコンポーザー プチＨＴＭＬなど
有料・・ＩＢＭホームページビルダー、フロントページ等
＜３＞手 順
内容(コンテンツ)を考える→→素材集め→→素材加工→ページ作成→→→→Webサーバーにアップロード
①内容を考える。・・大まかな設計図を作る。
例1 トップページ→ｐ２→ｐ４→ｐ４
例2 トップページ →ｐ２
→ｐ３
→ｐ４
実習 作りたいページのラフ案を考える。 全部で３ページ
トップページ・・index.html
２ページ目 p2.html ３ページ目 p3.html
ファイル名の注意 日本語ダメ、半角英数で作る。
拡張子はhtml または htm |
②ページを保存するフォルダーを作る。
自分のコンピュータに作業用のフォルダー（ローカルフォルダー）を新規に作成
注：各種の素材をひとまとめにしておく必要がある。
Ｗｅｂサーバ（世界に公開してくれる役目のコンピュータ）に送る時に
ひとまとめにしておかないと、表示されない画像などがでてしまう。
③素材を集める、作る・・ページに載せたい素材を集める。 著作権に注意
・ネット上の無料（フリー）素材をダウンロードする。
右クリック・・自分フォルダーに保存
・素材集から選ぶ
・写真等をスキャナーで取り込む。
・デジタルカメラの画像を取り込む。
・グラフィックソフトで作る。
・音声を取り込む。・・wavファイル
保存 フォーマット gif形式 色数２５６色 図、ロゴなど
jpg形式 色数約1677万色 写真等
実習 保存フォルダーを作る（新規作成、名前 ｗｐ作り）
インターネット上の素材集から素材を集める。
音声を録音しよう。 ファイル名 koe.wav
デジカメの写真を取り込もう。 ファイル名 kao.jpg
|
④素材を加工する
加工する・・形を変えたり、色を変えたり、効果を付けたりする。
・グラフィックソフトを使って素材を加工する。
ペイント・・プログラム→アクセサリー→ペイント
ペイントショッププロ・・ボタン化等が簡単にできる。
フォトショップ・・高機能、値段も高い
実習 フォトショップを使って
写真の加工 kao.jpgを読み出して、写真を楕円に切り取りkao2.jpgで保存
ボタンの作成・・次の4つのボタンを作成する。
次のページへ bo1.gif 前のページへ bo2.gif
トップに戻る top.gif 戻る ret.gif
のボタンを作ってみよう。
流れ 新規作成 色 字 ボタン化 |
⑤ページの作成
・メモ帳等でタグを書く…結構大変
・ワープロで作ってＨＴＭＬ保存
・余計なタグができるので後で見にくい。サイズが大きくなる。
・作成ソフトを使う
コンポーザーを使って作成。
操作はワープロとほぼ同じ。レイアウトなどに不自由さはある。
画像を入れたい時……画像のボタンをおして画像を指定する。
表を作りたい時………表のボタンを押して、行数、列数を指定する。
表のプロパティでサイズ変更など可能。
様々なリンクを貼ることによって、いろいろのところに飛ぶことができる。
⑥Webサーバーにアップロード
ローカルフォルダーのファイルをwebサーバーに転送する。
ＦＴＰソフトを使う。設定方法はプロバイダ毎に異なる。
実習
1)コンポーザーを開く
2)とりあえず計画どおり３ページ作ってみよう。
トップページ 2ページ 3ページとだけ字を入れて保存する。
index.html p2.html p3.html
3)トップページを作ろう。
１．表の挿入 １、１ 中央
表の中に字を入れる。表の中の色を変える。字の大きさを変える。
２．表の挿入 １、２ 中央
左に画像を挿入 表の左のセルで、画像のボタンを押す。
ファイル選択で画像を選ぶ。(kao2.jpg)
画像の大きさを調節する。
右側に文書を自己紹介文を書く。
３．ボタンの挿入
画像の挿入で それぞれのボタンを挿入する。
次のページ 前のページ
４．リンクを貼る
画像にリンクを貼る。
画像の上で左クリック(範囲選択したた事になる)
右クリックして、 選択範囲にリンクを貼るをクリック
リンクのタブでリンク先を指定(ファイルの選択でも可）
とりあえず koe.wavにリンクを貼る。
内部のページにリンクを貼る。
同様の操作で ボタン１とボタン２にリンクを貼る。
文字にリンクを貼る。・・文字を範囲選択し同様の操作
外部のページにリンクを貼る。・・リンク先にURLを入れる。
５．ページ内のジャンプ
飛ばしたい先に ターゲットを挿入
（ターゲットに分かりやすい名前を付けておく）
飛ばす元に リンクを貼るのと同様に、ターゲットの名前を入れる。
文書の先頭にターゲットを挿入（名前 ページトップ） 戻るボタンを挿入 戻るボタンにリンクでターゲットを指定。 ６ ２ページ、３ページに戻るボタンを挿入しリンクをindex.html
７ 保存しプレビューで画像、リンクを確認する。
|
|