パソコン教室 HP製作 イプシロン Windowsの使い方(98,Me,XP)/Internet Explorerの使い方/Outlook Expressの使い方/Wordの使い方/Excelの使い方/IME2002/2000の活用法/筆自慢の使い方/一太郎スマイル/ホームページの作り方/CGIやるぞ! 〜超初心者の私にもできるかな?/Flashの使い方/Photoshopの使い方/筆ぐるめの使い方/私のデスクトップ/おすすめパソコン書籍/ヤフーオークション出品用の写真編集と商品説明作成/パソコン教室/HP素材/廣瀬さんの作品(素材)/生徒さんのHP/HP作成代行/サンプル/料金/HP製作依頼/ 

ホームページの作り方




1,基礎の基礎、ホームページ用のフォルダを作る 2,仮トップページを作る1/2/ 3.サイトを作る1/2/ 4.サイト転送の設定/FTPツールの設定1/2 5.ウェブ・アートデザイナーでタイトルロゴを作る1/2/3/4/5/ 6.タイトルロゴをトップページに貼る(画像の挿入) 7.ホームページサイトを決める(無料ホームページ) 8.ページタイトル、背景色 9.文字の入力、フォント、修飾1/2 10リンクの挿入サイト内の全ページにHOMEへのリンクを作成する1/2 11.サイト転送する1/2 12.メールのリンクを挿入する1/2 13.掲示板やチャットルームを設置する 14.犯しやすいミス 15.ウェブアートデザイナーで写真を加工1/2/3 16.GIFアニメを作る1/2/3/417.背景画像を作る1/2/3/4/ 18.テーブルを使ってすっきりレイアウト1/2/3/4/5  19. 画像の中にたくさんリンクを入れる(クリッカブルマップ)20.アンケートを作る(sendmail)1/2/3/4/21.別のページの特定の場所にリンクする1/2/22.画像のまわりに空白なしのウィンドウを表示する1/2/23.流れる文字(マーキー)の挿入1/2/24.流れる画像を挿入 25.ボタンをクリックすると小さなウィンドウが出てくる 26.色について 27.素材屋さんの素材を使う 28.バナーを作る1/2/3/4 2/ 30.JavaScriptのゲームをアップする1/2/3/ 31.Flashを使ってみよう!A 文字を書いてアニメに1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/32.ホームページに地図を挿入する1/2/3/4/5 33.Excelで作ったグラフをホームページに貼り付ける1/2/3/33.レイアウトとデザインについて /34.写真を加工する(サイズの変更)/35.CGIをアップ時のファイル転送ソフトでのアクセス権の変更&フォルダの作り方/36.Anfyで画像に効果を入れる/37.ブログを作るなら、どこを使うか/ 38.無料ホームページに登録する/39.ブログを作るなら、どこを使うか /40.有名なサイトを真似てタイトルロゴを作る/41.タイトルロゴを基にしてバナーを作る/42.トップページのレイアウト/43.infoseekのサイト転送設定/44.入力フォームを設置する/45.アクセスカウンターを設置する(infoseek)/46.アクセス解析を設置する/47.メルマガを発行する/48.掲示板を設置する(infoseek)/49.一発太郎に登録する/50.HPビルダーなしでホームページを更新する/51.HPビルダー体験版をダウンロードしてインストールする/52.FTPツールをダウンロードしてインストールする/53.FC2の会員になる/54.FC2のサービスを追加する/55.HPビルダー体験版でホームページを作る//56.FC2にホームページファイルをアップロードする/57.ホームページにカウンターを設置する/58.Windowsのペイントで写真のサイズを変更する/59「かんたんページ作成」で作ってみる(Vers.10)/60.ウェブアートデザイナーでトップ画像を作る/61.トップ画像を使いテーブルを作ってトップページを作る/62.左メニューを作る/63.サイト設定にフォルダ詳細設定する/64.本文の枠にテーブルを入れる/65.メリハリのあるレイアウト/67.新しいウィンドウを開き大きな写真を表示する//


メリハリのあるレイアウト

下のホームページを見てください。
どちらも本文の内容は同じです。
左のページは文字のみで、画像もなければ、文字の色も全て黒。表もなしです。
どちらのページが見やすいかは、誰の目にもあきらかです。
左側は
http://upsilon-y.com/hyogo/sr/jose_sample.htm
右側は
http://matsunoshita-sr.com/joseikin.htm
です。
実際のページも見比べてみましょう。
さて、左側のページのようにメリハリのあるレイアウトでページを作りましょう。

メリハリのあるレイアウト

下の文章は、YahooJapan の2008年11月26日にアクセスしたときのニュースです。
下の文章を使って、試しにメリハリのあるページを作ってみましょう。

物価上昇ピーク過ぎた? 9月指数予想、8月下回る
配信元:
10/27 13:47更新

 総務省が31日、発表する9月の全国消費者物価指数(CPI)は、原油価格の下落傾向で伸び率が鈍化する可能性がでてきた。ブルームバーグが先週末時点でまとめた民間調査機関の予想平均値(生鮮食品を除く)は前年同月比で2.3%上昇と8月実績の2.4%を下回り、物価上昇局面は一服しそうだ。ただ、依然として、賃金上昇が見込めない中で、今後も一部住宅金利の上昇や電力・ガス料金の追加値上げなどが加わり家計の重しが続く状況に変わりはない。

 原油価格の高騰に加え世界的な原材料高が、生活必需品の相次ぐ値上げにつながっていた。しかし、原油価格はいまや7月のピーク時の半分以下の水準にまで下落し、物価高は、天井を打つとの見方が強まっている。

 ブルームバーグによる民間調査機関のCPI予想では、平均は2.3%、最高はメリルリンチなどの2.5%、最低予想は大和住銀投信投資顧問の2.0%だった。

 物価下落の兆しが見えれば、家計にとって一筋の光明となるはずだが、その恩恵も景気の悪化で、相殺されかねないとの懸念が広がっている。

 8月のCPI(2009年=100)は、総合指数で102.6。前年同月比で2.4%上昇と11カ月連続でアップし、消費税増税の影響を除き約16年ぶりの高い水準だった7月と同じ上昇率だった。エネルギーと食料品の上昇率が大きいが、ガソリン単体の伸び率は7月より2.3ポイント鈍化し、すでにピークアウトした格好だ。

 また、すでに発表された9月の東京都区部の消費者物価指数(生鮮食品を除く)は101.8と、前年同月比で1.7%上昇。生活用品の値上げが洗濯用洗剤や包装用ラップなどにも広がり2カ月ぶりに伸び率が拡大した。この先行指標を考慮すると、9月の全国消費者物価指数は12カ月連続で上昇するが、「原油価格の一服感などから8月の2.4%がピークで、今後はプラス幅が縮小する」(金融機関エコノミスト)という。

 金融危機の影響は今後、日本の実態経済へ本格的に波及してくる。円高進行も輸入品安で一部物価の押し下げ要因もあるが、むしろマイナス面が大きい。円高による輸出減が企業業績を直撃すれば、賃金下落にもつながりかねず、物価安定の恩恵も吹き飛ぶ計算だ。実体経済が回復軌道に乗るまで、家計への重しは軽減されそうにない。

まず、上の文章をコピーして、テンプレートとして保存しているページに貼り付けます。
さて、全部、作り替えたとき、どれほど、違っているのかわかるように、これを「名前を付けて保存」しておきます。
保存できたら、もう一度、「ファイル」→「開く」で最初に編集していたページに戻ります。
戻ったページも、テンプレートではなく、「news.html」か「sample.html」として名前を付けて保存しておいてください。

次にタイトルの「物価上昇ピーク過ぎた? 9月指数予想、8月下回る」をタイトルらしく目立せましょう。

タイトルだけを入れる行を作ります。
「行の追加」の右横をクリックして、「上へ追加」をクリックします。
それから、上にできた行をクリックし、 「属性の変更」をクリックして、「水平位置揃え」を「中央揃え」にします。この中に 「表の挿入」をクリックして、「行数」 「1」、「列数」「1」の表を作ります。
「OK」で閉じたら、もう一度「属性の変更」をクリックして、「表」タブをクリックし、「幅」「500」、「高さ」「40」にし、背景色を決めます。
出来たら、閉じて、「物価上昇ピーク過ぎた? 9月指数予想、8月下回る」を切り抜き、作った表に貼り付けます。

 

右図は、文字を入れてから、中央揃えにし、太字の白にしたものです。
さて、次に、文字ばかりでは、見にくいので写真を入れましょう。


右図は、文字を入れてから、中央揃えにし、太字の白にしたものです。
さて、次に、文字ばかりでは、見にくいので写真を入れましょう。
写真は
http://upsilon-y.com/pc/img/maiko.jpg
からダウンロードしてください。
写真にアクセスしたら、右クリックで「プロパティ」「1200×805」になっていると思います。
もしもなっていないのなら、写真の右下隅の大きくするマークをクリックしてみてください。
これを右クリックし、「名前を付けて画像を保存」にし、ホームページのフォルダの中の「img」フォルダに保存します。
それから、 「写真を加工する」方法を使って適当なサイズ(ここでは、「幅」「400」くらい)にしましょう。
それをタイトルのしたの行の一番最初に
「画像ファイルの挿入」で写真を入れましょう。
入れられたら、属性の変更 をクリックし、「代替テキスト」に画像の名前を入れ、「余白」「上下」に「3」と入れましょう。
余白を入れることで、タイトルとピッタリくっついたり、下の文字とくっつくことを防げます。
行間が狭いと見にくくなるので、気をつけましょう。
できたら、「中央揃え」をクリックします。
右図のようになりましたか?
次に、写真は大きな物がありますので、写真をクリックしたら、大きな写真が見られるようにしておきましょう。

HOME/Word の使い方/Internet Explorerの使い方/Excelの使い方/Outlook Expressの使い方/Windows の使い方/ホームページの作り方/私のデスクトップ/おすすめパソコン書籍/おすすめExcel書籍/HP作成代行/パソコン教室/
メインサイトへ ハリポタ勉強会へ