新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

DreamweaverとFC2ホームページで作るサイト定義(サイト公開編)

      2014/11/12

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

前編 → 後編 → 公開編

最後はホームページの公開手順。
サイト定義が済めば、Dreamweaverでサイト編集を済ませたら即時にアップロードできるようになります。
さらに、同期設定等を使えばより楽にサイトが管理できるのですが、ここでは最初の公開時にアップロードする方法のみとさせて頂きます。
後の機能に関しては以下の本でも買って勉強してみてください。

スポンサーリンク
 

サイト定義が終わると右下ファイルウインドウに定義されたサイトが表示されるようになります。
こちらからHTMLファイルを開き、編集し、同期やアップロードすればほぼオンタイムでサイト更新ができるわけですね。
まあ、WordPressやMovableTypeのようなCMSにはかなわないでしょうけれど。

では手順です。

  1. Dreamweaverを起動、サイトを選んで右下「ファイル」ウインドウの右上「展開してローカルおよびリモートサイトを表示」アイコンをクリック。
    DWでサイト設定06
  2. 「リモートサーバーに接続」アイコンをクリックしてFC2ホームページのレンタルサーバーにアクセスします。
    DWでサイト設定07
  3. 左側(赤)がFC2ホームページのサーバー内のデータ。つまり公開されているWebサイトのデータ。
    右側(青)が自分のパソコン内の完成したWebサイトのデータになります。
    DWでサイト設定08
  4. 右側(青)の完成したWebサイトのデータを左側(赤)の公開されているWebサイトのデータと差し替えます。
    右側にindex.htmlがない場合は予め左側のindex.htmlを削除しておくほうがいいです。
    今回はまとめてアップするためにルートディレクトリ(一番上のフォルダ)を選択して「ファイルをリモートサーバーにPUTする」アイコンをクリックします。
    DWでサイト設定09
  5. 「サイト全体をPUTしてよろしいですか?」と出るので「OK」をクリック。
    DWでサイト設定10
  6. アップロードが終わると右と左で同じファイル構成になります。
    FC2の場合は左側の「i」フォルダが残ってますが。。
    DWでサイト設定11
  7. 以上で終了です。
    ブラウザを起動してURLを入力して確認してみてください。
    DWでサイト設定12

見れましたか?
おめでとうございます! 

前編 → 後編 → 公開編

 - Dreamweaver, Webデザイン, パソコン教室

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

セキスイハイムで建てた築10年の一戸建てに光ケーブルを引いた【きっかけ編】

1年以上前の記事です。内容が古い可能性があります。いまさらですが、親父のうちに光 …

Yahoo!検索 サイトエクスプローラー日本版登場!!

1年以上前の記事です。内容が古い可能性があります。ついにYahoo!のサイトエク …

今、時代は猫。なのか?

1年以上前の記事です。内容が古い可能性があります。最近、巷で猫々騒がしい。

no image
他サービスとの連携を止める方法 【Google編】

1年以上前の記事です。内容が古い可能性があります。SNSだったら分かりやすいので …

Web制作・管理でよく使うツール

1年以上前の記事です。内容が古い可能性があります。以前、紹介すると言っていたWe …

貴方のWebデザイナー適性度をオンラインで確認してみよう

1年以上前の記事です。内容が古い可能性があります。日々、パソコンの画面とにらめっ …

ライトボックス(Lightbox)のJavaScript読み込みはヘッダー<head>じゃなくてボディー<body>【Webデザイン】

1年以上前の記事です。内容が古い可能性があります。最近、LP(ランディングページ …

Web(ウェブ)でモリサワフォントが使える日がくる

1年以上前の記事です。内容が古い可能性があります。ちょっと前の記事だが、モリサワ …

GIMP2(ギンプ2)はコピペでレイヤーが作れない

1年以上前の記事です。内容が古い可能性があります。お久しぶりに画像編集ソフトGI …

HTML5とそれまでのHTML(HTML4.01)との違い(追記あり)

1年以上前の記事です。内容が古い可能性があります。訓練校でも徐々にHTML5の話 …

血液型オヤジ