WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

WEBデザイナー志望の人はDreamweaverでサーバーにWEBサイトをアップロードしよう

dreamweaverでファイルをアップロードする

何かの目的でWEBサイト運営が必要なだけならばFFFTPが使えれば十分ですが、WEBデザイン業界に入り、デザイナーを目指す人はDreamweaverでもファイルをアップロードできるようにしましょう。

実務において使う必要はないですが、現役はみんな使えますので採用試験で振りになるかもしれません。
Dreamweaverの初期設定はSTEP2で完了しておきましょう。

デザイナーLevel:1 「はじめてのWEBデザイン」目次

この記事の内容

サイト管理の画面編集してサーバーと接続する

Dreamweaverのサイトの設定

サイト>サイトの管理から前回で登録したWEBサイトの設定画面を開きます。ここで前回では触れなかった【サーバー】という項目を選択します。

サーバーを追加する

プラスマークを押すとウェブサイトを接続するサーバーを追加することができます。現在はどのレンタルサーバーとも繋げていないので空欄になっています。

レンタルサーバーのFTP情報を入力

ルートディレクトリはエックスサーバーの仕様です。他のレンタルサーバーでは違うことがありますので注意してください。煩わしい手続きや入金せずに10日間無料で試用できるため、レンタルサーバーに慣れていくWEBサイトを作りたい人にはおすすめのサーバーです。

サーバーとの接続確認

サーバーとの接続確認

入力が完了したら【テスト】ボタンを押してみましょう。間違いがなければ接続成功のアラートが表示されます。間違っていたら再度FTPアドレス・ユーザー名・パスワードを確認しましょう。またルートディレクトリを間違えていてもサーバーにはつながりません。

Dreamweaverのファイルウィンドウの使い方

Dreamweaverからファイルをサーバーにアップロードする

Dreamweaverの右側にあるWEBサイトのファイル管理画面からサーバーにアップロードすることができます。たくさんの機能があるので順番に確認しましょう。

【サーバー接続】

設定で入力したユーザー名・パスワードを使用してレンタルサーバーに接続します。ファイルを操作するときはここをクリックしてから開始します。

【ダウンロード】

ファイルを選択してクリックすると、サーバーにアップロードされているファイルをダウンロードします。ローカルのファイルに上書きするので間違って編集したファイルがローカルにある状態でダウンロードしないように気をつけましょう

【アップロード】

ローカルのファイルを選択してクリックするとサーバーにアップロードします。サーバーにファイルがなければそのまま書き込み、同ファイルがある場合は上書きになります。複数人で1つのサイトを管理吸う場合はサーバーのファイルの方が新しいことがありますので、上書きしないように注意しましょう

【同期】

ファイルの作成時間から計算して、古いファイルは新しいファイルのアップロード / ダウンロードを自動で行い、最新の状態に更新します。

【リモートサイト表示】

FFFTPのように左右の画面でローカル・サーバーを表示します。

【切り替え】

ファイルタブにリモートのファイルを表示します。そのままDreamweaverで直接編集することも可能です。

ここではリモートサイトの表示を使ってサーバーにファイルをアップロードしていきます。

リモートサイトの表示

サーバーに接続ボタンをクリックします。

サーバーに接続する

左側にリモート(レンタルサーバー)が表示され、右側がPCの中にあるファイル(ローカル)が表示されます。ここでローカルのファイルをサーバーにアップロードする作業を行います。

ファイルをアップロードする

アップしたいものを選択してアップロードボタンを押すとアップロードが開始されます。フォルダを選択した場合は、その中に入っているフォルダとファイルを全部アップロードします。

アップロード完了

サーバー側ウィンドウにファイルが表示されたらアップロード完了です。URLを入力してブラウザで表示確認を行いましょう。

リモートサーバーのアドレス【/designersnavi.com/public_html】は【http://designersnavi.com】で表示されます。好きな場所にアップロードしてみてURLがどのようなものになるのかを確認するとディレクトリ構造の理解が深まります。

Dreamweaverの操作はWEBデザイナーの基本

サーバーへのアップロード作業はもちろんHTML・CSSコーティングをDreamweaverで行うことはWEBデザイナーの必須スキルです。多機能故に動作が重たいことからコーティングに特化したWEBデザイナーからは嫌われることも多いですが業界基準のアプリケーションであることは間違いありません。

WEBデザインの業界を志すのでしたら、一通りの操作を習熟するまではHTML・コーディング・サーバーへのアップ作業をDreamweaverで行うことをおすすめします。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST