QLOOKアクセス解析
ホーム > スポンサー広告 > ホームページにリンク先ページを追加してみる(*´▽`*)ホーム > 未分類 > ホームページにリンク先ページを追加してみる(*´▽`*)
 1件ずつ表示 
--.--.-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

続きを読む
Category: スポンサー広告
2014.12.18 Thu

ホームページにリンク先ページを追加してみる(*´▽`*)

おはようございます(*´▽`*)

今日はリンク先のページを作成します。

細かなところの意味が分からなくても大丈夫。ですが、今何をやっているのか分からない人はちゃんと把握しときましょうね。

今日はホームページに新しくページを追加します。

で、ナビゲーションボタンを押すとそのページに行けるようにします。大丈夫ですか??

今日は、ナビゲーションの一番右のボタン「イラスト」のページを作ります。

ホームページ第一号2

メイン枠の文章を消してイラストを入れる。他のところはそのままで行きます。

文章は、、、そう、HTMLです。index.htmlファイルを開いてください。

ファイル→名前をつけて保存。ファイル名はillust.html にしておきます。

html.png

赤枠部分を削除して、イラストを入れます。

今回は適当にあなたの持っている画像3つを使ってください。

イラスト(画像)は全てimgフォルダに入れましょう。

ツール→画像の挿入 で3つの画像を入れます。画像の横幅widthの数値を全部同じにしておきましょう。

その下に説明文を適当に入れます。

説明文は<p> ここに説明文をいれる</p> こんな感じで。ちなみに p で囲まれたところが一段落になります。

html_20141218154753bdf.png

先ほど削除したところが、今はこうなってます。イラスト・文章は自由ですよ。

画像にかならずalt="画像説明文"を追加してくださいね。

ファイル→上書き保存 したらどうなってるかみてみましょう(*´▽`*)

ツール→ブラウザでプレビューすると。。。

illust.png

ちゃんと変更されてますか??OKなら ファイル→上書き保存してください。

ページができたので、あとはイラストボタンを押すと今作ったページに移動するように設定します。

index.htmlファイルを開いて下図の赤枠を削除してください。

nav.png

ツール→リンクの挿入で illust ファイルを開きます。</a>の前にイラストと入力。

nav_20141218172656cca.png

このようになったと思います。ファイル→上書き保存してください。

ツール→ブラウザでプレビューにして、イラストボタンをクリックしてみてください。。。

イラストページに切り替わりましたか?? できたら大成功です(*´▽`*)

今度はホームのボタンをクリックしてみてください。。。

何も変化ないですね。。。ホーム=トップページ(index.html)になるので今度はこの設定をしましょう。

先ほどと同じ要領で、ホームの行の<a href~</a>を削除します。

ツール→リンクの挿入で index.htmlファイルを開きます。</a>の前にホームと入力。

ファイル→上書き保存してください。

nav_2014121820122997a.png

赤枠部分をコピーして、illustファイルの同じところにコピーして上書き保存します。

ツール→ブラウザでプレビュー でイラストボタンクリックするとillustページに移動。

ホームボタンをクリックすると indexページに移動しましたか??できたら大成功です(*´▽`*)

ホームページはこんな感じで作っていくというのが分かってもらえると嬉しいです(*´▽`*)

細かなタグ(鋭いかっこのこと)の説明はまた今度にします。待てない人はネットで調べるとすぐ分かりますよ。

意味は分からなくてもできちゃった講座になりましたけど、初めはそれでいいと思います。

私が過去にホームページ作成で挫折した理由は、タグを覚えたり装飾にこだわったりしたことです。

すると、やることが膨大になってホームページの完成までに心が折れるんですね(;´Д`)

初心者ほど、完成することにこだわってください。で、それが出来てから細かなことにこだわってください。

同じことを5、6回繰り返すと意味が分かってきます。何のために今この作業をしてるかが分かってきます。

なので、今回のホームページ作成講座を最低でも2回繰り返してみてください。

次にタグの説明や装飾の説明をされたときもすっと入ってくると思います(*´▽`*)

もし分からないことがあればコメントくださいm(__)m

私も早く副業できるレベルにまで持っていきたいです(*´▽`*) 

その前に写真の切り抜きできるように練習しないと。。焦。。。




ブログランキング・にほんブログ村へ


貼るだけでお小遣い貰えます♬(忍者ADMAX)↓↓


関連記事

続きを読む
Category: 未分類 Comments (5) Trackbacks (0)

この記事へのコメント:

ひーさん
こんにちは ナオトです。

丁寧に解説、ありがとうございます。
初心者の頃って、このHTMLの文字列を見ただけで、
逃げ出したくなりますから、

ひーさんのような、丁寧なサイト、
とてもありがたいですね。

タグの画像が大きくて見やすいので、
挑戦してみようかなって思われる人、
出てくると思います。

これからも宜しくお願いします!
応援完了しました^^

ひーさんこんばんは。

各イラストの下の説明文がおもしろくて笑ってしまいました(^o^)

次が読みたくなるような文章でとてもいいですね。

私も昨日のひーさんの記事じゃないですが「大きな風呂敷」を広げてしまってます(^_^;)

でも広げてみると気づくこともたくさんあって楽しいですね。

しかしそろそろ次なるアフィリサイトorブログを作らなければと、今キーワードの選定に入ってます(^_^;)

あとASPの記事、先程追記しました。

参考にどうぞ(^o^)
すげー!!

私は本日のテンプレ交換時に、本を見ながら、

カスタマイズしようとして挫折!!

ふて寝してましたね(笑)

なんか分かりそうで、分かんないんですよね・・・。

基礎的な事から覚えなきゃダメかな・・・。

HP作成頑張ってくださいね♪

コメントありがとうございます♪

自慢の嫁ですけど、何か?(爆)

って、冗談ですwww

最近のプリクラはほんと、プチ整形の域に達してますよ(笑)

是非一度試してみて下さい。

あと、私はオッサンですよ(笑)

現在ギリギリ30代で、来年の5月で、

40になりますからね(笑)

たぶん子供が居ないから、

大人になりきれていないのかも・・・(涙)

でも、若く見えると言って頂けるのは、嬉しいですね♪

応援ポチり♪
ひーさん先生

ホームページ講座どんどん進んでますねぇ。
ホームページ講座を読んで笑えるのはひーさんの記事だけですぅ・・・
とっても、苦手意識の在る人には力強い記事ではないでしょうか?
これからも、何処迄も付いて行きますですよぉ。
応援ポチです。
お邪魔です。
HTMLは難しいですね。

何とか落ちこぼれない様に...

コメント有難うございます。

残りのカニは実家に行く予定です。

この記事へコメントする:


    

この記事のトラックバックURL:

http://illustrator989.blog.fc2.com/tb.php/98-16745be1

この記事に対するトラックバック:

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。