Dreamweaverチュートリアル


Webサイトを作成するDreamweaverチュートリアルご存知のように、このサイトはウェブサイトの作り方に関するものです。 WordPress、Joomla、Drupalを使用してさまざまな方法を学ぶことができます。昔のように純粋なHTMLを使用するためのガイドもあります(明らかに、最新バージョンのHTML5では)。初心者向けのこのDreamweaverチュートリアルでは、別のチュートリアルを学びます.


知らない人のために、DreamweaverはWebサイトの設計、コーディング、管理を可能にするアプリケーションです。 Dreamweaverの興味深い点は、コードを記述するだけでなく、ビジュアルインターフェイスを使用してWebサイトを作成する可能性の両方を提供することです。.

このDreamweaverチュートリアルでは、DreamweaverでWebサイトの作成を開始するために知っておく必要があるすべてのことを学びます。あなたはプログラムとそれが何ができるか、特徴のハイライトとそれをセットアップする方法を知るようになります。その後、Dreamweaverを使用してシンプルなWebサイトを作成し、モバイル対応にし、サーバーにアップロードする方法のステップバイステップガイドが表示されます.

これは長いライドになります。しかし、あなたはこの非常に直感的なプログラムにどれだけ早く入るか驚くでしょう。.

Contents

Dreamweaverとは何ですか??

表面的には、DreamweaverはIDE(統合開発環境)です。つまり、さまざまなツールを組み合わせてWebの設計と開発を容易にするソフトウェアの1つです。.

特別なのは、CMS(ビジュアルインターフェイスを介してWebサイトに関するすべてを制御する場所)と純粋なコードエディターの間のどこかにあることです。さまざまなパーツの仕組みは次のとおりです.

ビジュアルデザインインターフェースを介してウェブサイトを作成する

ビジュアルデザインツールボックスでは、基本的にマウスでWebサイトを構築できます。 Wordでレイアウトを作成する方法でWebサイト要素を配置できます。基本的に、ブラウザーで表示されるのと同じようにWebサイトが表示されますが、操作することもできます。.

これにより、1行のコードを記述する必要なく、Webサイトのスケルトンをすばやく構築できるため、非常に便利です。代わりに、Dreamweaverが必要なコードを自動的に作成します。そうすれば、理論的には、手作業でWebサイト全体をまとめてサーバーにアップロードできます。.

一方、コーディングが可能な場合は、Dreamweaverにも必要なツールがすべて揃っています。.

本格的なコードエディターとして機能

Dreamweaverの2番目の部分は、フル機能のコードエディターです。以下を含むすべての標準機能が搭載されています。

  • 構文の強調表示 —つまり、Dreamweaverは、コードを読みやすく修正するために、さまざまな要素(演算子、変数など)をさまざまな色で強調表示します.
  • コード補完 —コード補完は、携帯電話のオートコンプリートと同様に機能します。入力を開始すると、エディターはあなたが書こうとしていることについて提案をします。そうすれば、すべてを完全に入力する必要がなくなります.
  • コードの折りたたみ —コードの折りたたみは、コードを読みやすくするためのもう1つの機能です。これにより、コードの不要な部分を視覚的に縮小できます。そうすれば、ファイル全体をスクロールする必要はありませんが、処理する必要がある部分のみを処理できます.

Dreamweaverは、Webデザイン(HTML5、CSS)の最も重要な言語をサポートしています, JavaScript, PHP)など.

一番良いところ: コードに変更を加えると、Dreamweaverによって自動的にビジュアル側にも表示されます。そうすれば、ファイルをサーバーにアップロードしたり、ブラウザを起動したりすることなく、それを見ることができます.

さらに多くの機能があり、初心者向けの次のDreamweaverチュートリアルでそれらの多くが動作しているのがわかります.

DreamweaverのセットアップとWebサイトの設計プロセス(ステップバイステップ)

最初のステップとして、Adobeの公式WebサイトからDreamweaverを取得する必要があります。.

ここまたはCreative Cloudクライアントから無料トライアルを取得できます.

初心者向けドリームウィーバーチュートリアル

ステップ1.ダウンロードしてインストールする

公式サイトからプログラムを入手したら、インストールファイルをダウンロードして実行し、指示に従ってください.

(現在のように)Creative Cloudをすでに使用している場合は、クリックするだけです。 試す クライアントの内部。次に、プログラムのインストールが完了したら、 試用を開始.

ステップ2.最初の起動

Dreamweaverを初めて起動すると、この画面が表示されます.

dreamweaverの最初のスタートアップ

これまでにプログラムを使用したことがない場合は、 いいえ、私は新しい. その際、Dreamweaverがセットアップウィザードを案内します。最初のステップは、開発者用のワークスペースを使用するか、標準のワークスペースを使用するかを選択することです.

dreamweaverオンボーディングガイドワークスペースを選択

これはDreamweaverの初心者向けチュートリアルなので、標準バージョンを選択します。その後、4つの異なるオプションからワークスペースのカラーテーマを選択できます.

dreamweaverオンボーディングガイドの配色の選択

最後のステップは、サンプルファイル、新規または既存のプロジェクトから始めるか、チュートリアルを見るかを選択することです.

dreamweaverオンボーディングガイドの最後のステップ

新規または既存のフォルダーから開始することを選択すると、セットアッププロセスが完了します。よくやった!

では、プロジェクトを開始して、DreamweaverでWebサイトを作成する方法を学びましょう.

ステップ3.新しいサイトを開始する

最初のステップは、新しいサイトを作成することです。そのためには、 サイト>新しいサイト. 次の画面が表示されます。

dreamweaverで新しいサイトを作成する

最初のステップは、サイトに名前を付けることです。次に、保存先を選択する必要があります。これはあなた次第ですが、通常はすべてのプロジェクトを1か所にまとめて簡単にするのが理にかなっています.

新しいプロジェクトをGitリポジトリに関連付けることもできます。それはあなたに与えるので、これは良いアイデアになることがあります バージョン管理 今はスキップできます.

以下のすべてを扱います サーバー 後で左側に。と同じ CSSプリプロセッサ, これは、使用するときにのみ重要です そういうこと.

私たちにとって重要なことは ローカル情報高度な設定.

dreamweaverでデフォルトの画像フォルダーを有効にする

右側のフォルダアイコンをクリックしてください デフォルトの画像フォルダ. 次に、新しく作成したサイトディレクトリに移動して開き、新しいフォルダを作成します。 画像 それをデフォルトのフォルダとして選択します。そうすれば、Dreamweaverはサイトに関連付けられた画像を自動的に保存します.

今のところ、これで終わりです セーブ ワークスペースに戻るには.

ステップ4.ホームページファイルを作成する

プロジェクトサイトを作成したので、最初のファイルを作成します。まずはホームページから.

Dreamweaver自体にオプションがない場合は、 ファイル> 新着。完全に新しいファイルを作成するか、既存のテンプレートを使用できます。プログラムにはそれらのいくつかが付属しています( スターターテンプレート)。現在、代わりに新しいものを作成します.

dreamweaverで新しいファイルを作成する

HTMLはデフォルトで設定されており、そのままにしておくことができます。ドキュメントのタイトルには、 index.html そして選択する 作成する. これにより、次の画面が表示されます.

dreamweaverの新しいプロジェクト

これは、冒頭で述べた帽子です。サイトの外観(現時点では空白)とその背後にあるコードのライブビューです。また、Dreamweaverによって、構築可能な基本的なHTMLマークアップが自動的に作成されていることにも気づくでしょう。さあ、それをしましょう。?

ステップ5.ヘッダーを作成する

要素をページに挿入するには、まずその場所を選択する必要があります。空のページをクリックします(Dreamweaverは自動的に 要素がある場合)、または画面のコード部分の同じ要素にカーソルを置きます.

その後、あなたはに行く必要があります インサート 右上隅のタブ。これにより、ページに追加できる一般的なHTMLおよびサイト要素のリストが表示されます。見えるまで下にスクロールします ヘッダ オプションとして.

dreamweaverにヘッダー要素を挿入する

クリックするだけでページに挿入されます。また、HTMLドキュメント内に表示されます.

ビジュアルインターフェイスとコードエディターに表示されるヘッダー

シンプルで正しい?

次に、ヘッダー内のテキストを変更し、それを見出しに変えます。両方–最初に下部のコードエディターでテキストをマークします.

Dreamweaverでヘッダーテキストをマークする

その後、に戻ります インサート, 横の矢印をクリックします 見出し そして選ぶ H1. これにより、ページタイトルがH1 HTMLタグにラップされます。見出しタグの詳細については、 この記事.

その後、ページのタイトルを入力することもできます。実際のウェブサイトでは、キーワードだけでなく、 私のテストWebサイトへようこそ 例のように.

dreamweaverのヘッダーを変更

よし、ページヘッダーを作成しました。現時点ではまだ少し粗雑に見えますので、次にCSSで変更しましょう.

ステップ6. CSSファイルを作成する

慣れていない場合のために、CSSはWebページのすべてのスタイルを提供する部分です。それはあなたが色、要素の寸法、フォントのタイプとサイズを定義することを可能にします。マークアップを使用してページタイトルを作成し、DreamweaverでCSSを変更する方法も学びます.

理論的には、HTMLドキュメント内に直接CSSを追加できます。サイト全体のすべてのCSSスタイリング用の専用ファイルを作成するという、それほどエレガントではないオプションがあります。.

最初のステップは、新しいヘッダーにCSSクラスまたはIDを与えることです。その過程で、Dreamweaverはスタイルシートファイルを作成するように求めます。画面の右下にあるDOMメニューに移動して、サイト構造全体を一覧表示します。ヘッダーが選択されていることを確認してください.

ライブビューでは、小さなラベルと下部にプラス記号が付いた青色のマークが表示されます.

dreamweaverにcssファイルを追加

プラス記号をクリックして入力します #ヘッダ 開くフィールドで。ハッシュタグは、 クラスではなくid. Enterキーを押します。オープニングメニューではなく、 ページで定義 選択する 新しいCSSファイルを作成する. ポップアップで、 ブラウズ サイトフォルダーに移動します。次に、 style.css (これはスタイルシートの標準名です)に ファイル名 フィールドとヒット セーブ.

dreamweaverでスタイルシートを作成する

今選択すると OK, 新しいファイルがライブビューの上部に表示されます。そこから表示および編集できます。また、にリンクされます ページのHTML部分のセクション.

Webサイトに追加されたスタイルシート

素晴らしいポッサム!これで、ページのスタイルを変更する準備ができました.

ステップ7.ページタイトルのCSSセレクターを作成する

最初にしたいことは、見出しのフォントを変更して中央揃えにすることです。そのためには、まず新しいCSSセレクターを作成する必要があります。セレクターは、色、サイズなどのプロパティを割り当てることができる、ページ上の要素の名前です.

右下のDOMビューでH1見出しをマークします(以前のヘッダーで行ったように)。次に、その上で、 CSSデザイナー.

見出し要素のスタイリングを準備する

CSSセレクターを作成するには、Sと書かれている行をクリックします。選挙人 プラス記号をクリックします。これにより、名前付きのセレクタが自動的に提案されます #header h1.

dreamweaverでcssセレクターを作成する

Enterキーを押して作成します。できた!

簡単なメモ: CSSを初めて使用する場合、このセレクターは、 h1 内部 呼ばれる要素 #ヘッダ. このように、CSSとして入力したものはすべて、書き込まれたテキストのみに適用され、ヘッダー要素全体には適用されません.

ステップ8.見出しのフォントを変更する

これでセレクターができたので、それにセレクターを割り当てることができます。 CSSの使い方がわかっている場合は、単にマークアップを style.css プログラムが自動的に処理します.

経験の浅いユーザーのために、Dreamweaverはそれを本当に簡単にします。にとどまる CSSデザイナー メニューとそれが言っているボックスのチェックを外します セットを表示. すると、多くの追加オプションがアンロックされます.

dreamweaverでcssオプションを有効にする

新しいボタンを使用すると、レイアウト、テキスト、境界線、背景の領域から多くのCSSプロパティを選択できます。の もっと ボタンは、独自のルールを入力するオプションを提供します.

フォントタイプを変更するには、 テキスト 上部のオプション(または、下にスクロール)。今後のオプションで、 フォントファミリー そしてクリック デフォルトのフォント.

Dreamweaverでフォントファミリーを変更する

これにより、フォールバックを含む一般的なフォントの多くのオプションが提供されます(ユーザーのブラウザーがプライマリフォントを表示できない場合)。あなたはクリックしたいかもしれません フォントを管理する 下部にあるこのメニューにアクセスするには:

Adobe Edge Webフォント

ここでは、Adobeの無料フォントを選択できます。 Edge Web Fontsサービス. 名前でフォントを検索するか、左側にある多くのフィルターオプションを使用して、何かが見つかるまで選択肢を絞り込みます.

いずれかの書体をクリックすると、Dreamweaverに含めることができます。いったんそうしたら、それらを直接使用するか、または カスタムフォントスタック 独自の代替フォントを定義する.

dreamweaverでカスタムフォントスタックを作成する

とりあえず、単に できた 次にクリックします デフォルトのフォント 再び。今回は、選択したカスタムフォントを選択し、 ボイラ –必要なすべてのコーディングを含めて変更が行われます.

dreamweaverのフォントを変更

あなたがクリックした場合 style.css 上部のファイルには、すべてのマークアップも追加されていることがわかります.

dreamweaverのスタイルシートを更新

ステップ9.見出しを中央に揃え、サイズを変更する

テキストはまだよりよく見えるかもしれません。次のタスクは、中央に配置してフォントサイズを大きくすることです。そのために、別の機能を使用することもできます クイック編集.

これを使用するには、コードビューに移動して、編集するパーツを右クリックします。この場合、それは

ブラケット.

dreamweaverでクイック編集メニューを開く

ここでは、 クイック編集 頂点で。これにより、この要素に関連付けられたCSSがその下に開きます。これで、スタイルシートファイル全体(非常に長くなる可能性があります)を検索しなくても、追加のプロパティを入力できます。テキストを中央に配置して大きくするには、次のコードを追加します.

font-size:42px;
text-align:中央;

入力すると、Dreamweaverは入力しようとしているものの提案も行い、さらに簡単にします。これが、前述のコード補完機能です.

完了すると、次のようになります。

Dreamweaverのクイック編集でCSSを変更する

ライブビューでテキストがすでに変更されていることに注意してください。今、押します ESC 手っ取り早く、編集してスタイルシートに行きます。新しいCSSが適切な場所に追加されていることがわかります.

かっこいい?

ちなみに、CSSプロパティの意味がわからない場合は、右クリックして、 クイックドキュメント (または押す Ctrl + K)。 Dreamweaverが説明します.

dreamweaverクイックドキュメント

ステップ10.コンテンツをさらに追加する

これまでに学習した内容を使用して、基本的なサイトを構築できます。このDreamweaverチュートリアルのために、次のことを行いました。

  • 見出しと段落に定義されたデフォルトのフォント
  • ナビゲーションバーを追加し、その中にホームページへのリンクを作成しました
  • 内部にさらに2つのボックスがあるコンテンツ用のdivボックスを追加しました
  • それらの1つを左と右に移動しました 浮く 財産
  • 幅をパーセンテージに制限して、水平に配置できるようにしました
  • 順序付けられていないリストを含むサンプルの見出しとダミーテキストを左側に追加しました
  • フォームを作成した(下のドロップダウンメニューを使用) インサート)、2つのテキストフィールドと送信ボタン
  • CSSマージンとパディングを介して要素の周囲にスペースを追加
  • 提供された背景色と枠線
  • フッターと著作権メッセージを作成しました

結果は次のとおりです。

高度なデザインのウェブサイト

例のコード:

これは少し進んでいて、誰もがその方法を知っているわけではないため、以下のHTMLとCSSを見つけて、自分で再構築できます。まず、HTML:





index.html

 



ホーム

メインコンテンツの見出しの例

ロレム・イプサム・ドーラーは座り心地がよく、僧侶は外交的エリートです。 Pellentesque scelerisque id est amet ornare。 Suspendisse eget elit mi。インペディエットオークターレオヴィタエブランディット.

  • Etiam tempus urna condimentum libero varius
  • Ut Commodo risus finibus
  • Duis odio lacus、elementum eget sem finibus
  • モリス・ディグニシム・エニム.
  • 奇妙なモルセティ疑惑odio vel facilisis

Curabitur vestibulum、lorem a tincidunt dapibus、erat sem rhoncus nisl、non dapibus quam mi ac ligula。前庭idトラクターeros、nec porttitor odio。 Nunc efficitur turpisはnulla vestibulum viverraを使用しました。 Maecenas iaculis mi ornare、dapibus lectus in、facilisis nisl.

行動を促すフレーズの例!

ロレム・イプサム・ドーラーは座り心地がよく、僧侶は外交的エリートです。 Pellentesque scelerisque id est amet ornare。 Suspendisse eget elit mi.

Copyright©2017 My Imaginary Website

そして、CSS:

@charset "utf-8";

体 {
background-color:#F5F5F5;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}

p,
a,
ul,
OL,
李,
ラベル,
入力{
font-family:muli、sans-serif;
フォントスタイル:通常;
font-weight:300;
font-size:17px;
}

h1、h2、h3、h4、h5 {
font-family:karla、sans-serif;
フォントスタイル:通常;
font-weight:400;
テキスト変換:大文字;
}

#header {
padding-top:25px;
padding-bottom:25px;
背景色:#FFFFFF;
border-bottom:4pxソリッド#EB232F;
}

#header h1 {
font-family:aguafina-script;
フォントスタイル:通常;
font-weight:400;
font-size:42px;
text-align:中央;
margin-top:0px;
margin-bottom:0px;
テキスト変換:なし。
}

#navigation {
margin-right:auto;
margin-left:auto;
最大幅:1140px;
margin-top:10px;
margin-bottom:10px;
}

#navigation a {
色:#EB232F;
}

.メイン{
表示ブロック;
margin-top:15px;
margin-right:auto;
margin-left:auto;
margin-bottom:15px;
明確:両方;
オーバーフロー:自動;
最大幅:1140px;
}

.メイン#main-right {
float:右;
幅:37.5%;
表示ブロック;
}

.メイン#main-left {
float:左;
幅:57%;
表示ブロック;
padding-right:20px;
}

.main#main-right .cta {
text-align:中央;
}

.main#main-right .form {
幅:92%;
margin-right:auto;
margin-left:auto;
}

#main-right .form div {
margin-bottom:10px;
}

#main-right .form .label {

}

#main-right .form .textfield {
幅:100%;

}

.メイン#main-right #button {
text-align:中央;
padding-top:7px;
padding-bottom:7px;
margin-left:auto;
margin-right:auto;
位置:相対;
表示ブロック;
padding-right:36px;
padding-left:36px;
ボーダー:なし。
background-color:#EB232F;
色:#FFFFFF;
カーソル:ポインタ;
}

.フッター{
表示ブロック;
padding-top:25px;
padding-bottom:25px;
text-align:中央;
}

これを次のステップを示す例として使用します。複雑に見えても、前に示したのと同じ方法でまとめます.

手順11.ブラウザとモバイルデバイスでプレビューする

これをどうやってやったの?さて、まず第一に、私達はあなたがおそらくそうであるよりもウェブサイトを構築することに少し経験があります。したがって、適切なWebページを作成する方法については、すでに心に浮かんだ手順があります。.

次に、プロセスの高速化に役立つ非常に便利な機能であるブラウザのプレビューを使用しています。 Dreamweaverを使用すると、ブラウザーやモバイルデバイスでもWebページをリアルタイムで表示できます.

開始するには、右下隅のリアルタイムプレビューボタンをクリックします.

dreamweaverでプレビューメニューを有効にする

プレビューオプションが開きます.

dreamweaverのリアルタイムプレビューオプション

ブラウザ名の1つをクリックすると、その中にWebサイトプロジェクトが開きます。携帯電話やタブレットでQRコードをスキャンすることもできます(例: Firefox量子)または、表示されたアドレスをブラウザーに入力して、デバイスでライブプレビューを開始します.

そのためには、Adobe IDとパスワードを入力する必要があることに注意してください。あなたはDreamweaverにサインアップすることでそれを持っているはずです.

一番良いところ: Dreamweaverで行った変更は、変更を加えると同時に自動的にブラウザーに表示されます.

これはどのようにしてサイトをより速くまとめるのに役立ちましたか?まず、画面のサイズによっては、ブラウザの表示がDreamweaverの表示よりも元の表示に近い場合があります.

次に、ブラウザでサイトをチェックすると、開発者ツールを使用して変更をテストできます.

ブラウザの開発者ツール

これらは、Dreamweaverに表示されるものと非常によく似ています。彼らは私たちにとってより親しみやすいので、より速く作業でき、コードをコピーしてスタイルシートに貼り付けるだけです.

電話バージョンを見ると、やらなければならないことがまだたくさんあることがわかります.

dreamweaverでのモバイルリアルタイムプレビュー

これにより、次のポイントに進む.

手順12.メディアクエリを追加する

すべてのデバイスでWebサイトを機能させるには、いわゆるメディアクエリを追加する必要があります。これらは、特定の画面サイズの上または下のスタイルまたは特定のデバイスのみにスタイルを適用するようにブラウザーに指示する条件付きCSSステートメントです。そうすれば、小さな画面でレイアウトを変更できます.

ここまでは、グローバルスタイルのみを定義しました。つまり、サイト全体に適用されるスタイルです。次に、小さい画面に条件付きスタイルを追加する方法を学びます.

まず、 CSSデザイナー. コードを追加するファイルが下で選択されていることを確認します 出典. 下のプラス記号を押します @メディア.

それはあなたにあなたにこのオプションパネルを与えます:

dreamweaverのメディアクエリメニュー

メディアクエリの条件を定義できます。たとえば、それらが適用されるデバイス、向き、解像度などです。プラス記号を使用して複数の条件を追加することもできます.

この例でより重要なのは 最大幅 設定。これにより、特定の最大画面サイズにのみ適用されるカスタムCSSを定義できます.

最初に電話で修正したいので、 最大幅 375ピクセル。すると、下部にCSSコードが表示されます.

dreamweaverでメディアクエリを作成する

クリックしたときにも何が起きるか OK 緑の線が画面の上部に表示されることです。これはメディアクエリを視覚的に表します。それをクリックすると、画面が自動的にそのサイズにジャンプします.

dreamweaverでメディアクエリを作成する

ステップ13.条件付きCSSを追加する

モバイルのデザインを修正するには、最初に、サイト上の2つの要素を互いに並べて配置するコードを削除する必要があります。そのための十分なスペースがないのは明らかです.

これは、以前にCSSを操作したのと同じ方法で行うことができます。ただし、今回は、メディアクエリをアクティブにします。.

まず、DOMビューで要素に移動します。そこから新しいCSSセレクターを作成します。次に、その オート, 浮く無し (左に移動しないようにするため)、コンテンツが画面の端に接しないように、側面にパディングを追加します.

修正されたモバイルデザイン

ずっとよく見えますね。同様に、ページ上の他のすべての要素のCSSを変更して、すべてが正しく見えるようにすることができます.

メディアクエリについては、これでおしまいです。同じ方法でレイアウトをタブレットやその他のサイズに調整できます.

プロのヒント: 特定のデバイスとそのサイズに合わせて最適化するのではなく、レイアウトに応じてメディアクエリを作成します。つまり、画面サイズをいじって、レイアウトがうまく見えなくなった時点でクエリを追加します.

もう1つ:下部の隅にある事前設定されたデバイスサイズを使用し、追加したいポイントが見つかったら上部のプラス記号をクリックして、メディアクエリをもう少し簡単に作成することもできます。.

dreamweaverのショートカットを介してメディアクエリを作成する

ステップ14.サイトをサーバーにアップロードする

使用をお勧めします ブルーホスト (アフィリエイトリンク)Dreamweaverサイトをホストする.

設計部分が完了したら、サイトをサーバーにアップロードする準備がほぼ整いました。最初に述べたように、Dreamweaverはこれも非常に簡単にします.

まず、 サイト>サイトの管理. メニューから現在のウェブサイトを選択し、 編集する 左下。次のウィンドウで、 サーバー.

dreamweaverでのリモートサーバー設定

FTPサーバーに接続するための重要なデータをすべて入力します。名前はあなた次第で、残り(FTPアドレス、ユーザー名、パスワード)はホスティングプロバイダーから提供されます。ファイルを配置するディレクトリとライブサイトのWebアドレスを必ず指定してください。最後の部分は、Dreamweaverがサイト相対の内部リンクを作成できるようにするために重要です.

上級 さらにいくつかのオプションがあります(保存時にファイルを自動的にアップロードするかどうか)。通常はそのままにしておくことができます。ヒット セーブ 二度とあなたは終わった.

今に行きます ファイル パネル(右上または ウィンドウ>ファイル)、左端のシンボルをクリックしてサーバーに接続します。

dreamweaverでリモートサーバーにサイトをアップロードする

接続が確立されたら、アップロードするファイルを選択し、上向きの矢印をクリックしてアップロードします。完了すると、Webアドレスからサイトを利用できるようになります.

よくやった! Dreamweaverで簡単なサイトを作成してアップロードした!

Dreamweaverチュートリアル–最後の言葉

Dreamweaverは、ウェブサイトを構築するための素晴らしいプログラムです。直感的なユーザーインターフェイスと本格的なコードエディターを組み合わせています。このミックスにより、初心者、中級者、上級ユーザーが高品質のWebサイトを簡単に構築できるようになります.

初心者向けのこのDreamweaverチュートリアルでは、Dreamweaverとその機能を紹介しました。プログラムを設定して最初のサイトを開始する方法を示しました。基本的なHTML構造を作成し、CSSでスタイルを設定する方法を学びました。また、ウェブサイトをモバイル対応にしてサーバーにアップロードする方法についても説明しました.

これで、Dreamweaverの仕組みと、それを使用してWebサイトを作成する方法をしっかり理解できました。より深く潜り、次のステップを理解するのはあなた次第です.

忘れないでください: DreamweaverはWebサイトを作成する1つの方法にすぎません。他にもたくさんあり、その多くの情報をここで見つけることができます。幸運を!

以前にDreamweaverを使用したことがありますか?あなたの意見は何ですか?上記に追加するものはありますか?下のコメント欄でお知らせください!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map