「リクルート」社会人・学生のための大学・大学院
フレームで左右に分割された、ベーシックスタイルのデザイン。
メニューとコンテンツがフレームによって別々にスクロールできるようになっているため、使い勝手が良い。
特集記事は分かりやすく区切られている。
フレームページはSEOに適さないため個人サイトで使うには注意が必要。
前回は転送ソフト「FFFTP」をインストールしました。
今回はそのFFFTPをつかって実際にサーバーにHTMLファイルをアップロードしてみましょう。
①FTP情報を確認
まずは「無料ホームページスペースの取得」のチュートリアルで登録した「忍者TOOLS」にログイン→管理部屋→無料ホームページ「FTP接続情報を表示」→FTPサーバーアドレス・ユーザー名・パスワードを確認(他のサーバーの場合でもほぼ同じ)
②FTPを起動しホスト設定
FFFTPを起動すると「ホスト一覧」ウィンドウがでるので「新規ホスト」を選ぶ。
ホストの設定名は任意。
アドレス・ユーザー名・パスワードは先ほど確認したものを入れる。
ローカル初期フォルダは転送したいHTMLファイルがある場所にする。
ホスト初期フォルダは大体の場合空けておく。
③アクセスする
設定ができたらホスト一覧に戻るので、先ほど設定したホストを選び接続
接続が成功すると、左側にローカルフォルダ、右側にサーバー側のフォルダが現れます。
④転送する
アップロードしたいファイルをクリックしながら右側(サーバー)に移動させます。(ドラッグ＆ドロップ)
これで完了です。
ホームページを確認してみましょう！
前まで何もなかったページが自分の作ったホームページになっています。
レイアウトを考えているデザインとそうでないものは、使いやすさも見た目も全然違います。かと言っていきなりレイアウトを考えてもうまくいかない。まずはデザインの目標となるサイトを探して、その真似から始めてみてはどうだろうか？
目標とするサイトの技術のしくみを考えることで、必ず新しい発見があるはずです。もちろん真似したページをそのまま自分のデザインとしてアップしてはいけません。著作権にひっかかります。
「新しい発見」で得たものから自分なりのデザインが創造できるはずです。
トップページ左上端にロゴを入れるのは多くのサイトで使用されているテクニック。「ロゴをクリックするとホームに戻る」というのも重要。 ロゴの下にはメニューというのもわかりやすく、見た目もいい。ページサイズは横幅はもちろん、縦幅も長すぎないので見やすい。 このページの特徴は、ページ中央を境にして「パートナー」側と「ECサイト」側にページが分かれているトコロ。初めての人は真ん中に注目するので、どんな利用者にも対応できるという利点がある。お手本にしたいサイト。 |
このような大手サイトでもレイアウトのメインはジツは、HTMLタグの<table>タグなんです。ためしにHTMLソースを見てみよう。
(HTMLソースの見方)
インターネットエクスプローラーなら「表示」タブの「ソース」をクリックする。
