ステップ1：はじめに
Google Web Designerは、CSS3とHTML5を使用するバナーのような個々のアイテムを含む、Webページを作成する機能を提供するWebマスターのための無料の開発環境です。このツールを使用するには、まず第一に、公式サイトからインストールファイルをダウンロードしてインストールする必要があります。公式サイトからGoogle Web Designerをダウンロードしてください
プログラムのインストール
- 上記のリンクをクリックして[今すぐ]ページに移動し、[Web Designerをダウンロード]ボタンをクリックします。プログラムはWindows 7以降のバージョンのみをサポートしています。
- ポップアップウィンドウの保存を介して、コンピュータ上の場所を選択し、下部パネルにマークされているボタンを使用します。
- ファイルを保存したばかりのフォルダに移動し、マウスの左ボタンをダブルクリックして開きを実行します。その結果、インストールウィンドウを開く必要があります。
インストール手順自体は全自動モードで実行され、システムディスク上の他のプログラムとすべての作業ファイルをディレクトリに保存します。
承認
- インターネット上でプロジェクトを保存したい場合、または一般的にGoogleの内部サービスのために特別なバナーを作成する場合は、さらに承認を実行する価値があります。これを行うには、適切なアイコンを使用してプログラムを実行し、[ウェルカム]ウィンドウを閉じて、上部パネルの[ログイン]ボタンをクリックします。
- Googleアカウントからデータを指定し、[次へ]をクリックして必要に応じて確認します。その後、個々の設定を必要とせずに、アカウントはすぐに追加されます。
設定を変更する
- 準備と理解したことは、将来の作業を容易にするためにソフトウェアの基本設定を変更することが望ましい。トップパネルを使用して、編集メニューを展開し、リストの最後にある[設定]を選択します。
- [メイン]タブで、プログラムの初期動作を変更してプロジェクトを迅速に開き、作成したテンプレートを保存するフォルダを割り当てると、作成時にアナウンスメントの指定のデフォルト値を設定できます。
- 次のページ「レイアウトビューモード」には、エディタの外観パラメータが含まれています。現在の設定を変更すると、要素のより正確な位置決めのためにグリッドとバインディングオブジェクトを調整できます。
- Google Web Designerには、その設定を備えたコードエディタがあります。したがって、「コードビューア」タブで、デザインスタイルを割り当て、フォーマットパラメータを設定し、タスクにキーバインディングを追加できます。
- 最後のタブ「拡張」には、「ロギング」と「アプリケーションスケール」の2つのパラメータのみが含まれています。最初のケースでは、包含が変更ログを作成しますが、2番目の項目ではエディタの作業領域の新しい標準スケールを設定できます。
気をつけて！スケールを設定しすぎると、画面上のスペースがないという問題が重要な項目に表示されます。
何らかの変更やその他のプログラムの再起動が必要な変更もあります。エディタの操作を開始するだけで、各タブの別の項目を使用して設定をリセットする可能性を忘れないでください。
ステップ2：バナーを作成する
プログラムを設定することで、Google Web Designerのすべてのオプションを使用してバナーで作業を開始できます。ただし、この救済策は専用の専用エディタであることに注意してください。たとえば、Photoshopでは、別々に作成された既製の要素のみを投稿できます。ツールを使って作業する
- レイアウトを準備した後、あなたはツールと知り合いになる必要があります。主な注意の上部パネルで、「表示」をリストするに値する、補助要素を有効にして無効にします。
- 「ウィンドウ」メニューを経て、特定のインターフェース要素を一時的に無効にすることができます。たとえば、静的バナーを作成したい場合は、「タイムライン」が干渉します。したがって、適切なダニを削除するのが最善です。
- メインエディタツールは左側の列に表示されます。作成時にすべての項目が使用されているわけではないので、各オプションは考慮されません。ただし、自分を実験することをお勧めします。
- ツールバーの横には、いくつかの貢献を持つ「アナウンサー広告」が表示されます。特別な注意は、1つまたは別のバナーオブジェクトを使用したアクションを担当する「イベント」、スタイルパラメータが設定されている「CSS」に値する。
- プログラムの右側の部分には、色、テキスト、オブジェクト、プロパティ、単純なレイヤーを制御することができるツールのセットもあります。主な機能のセットと同様に、ウィンドウはプロジェクトを作成するプロセスで独立して研究するのが良いです。
- 必要に応じて、「タイムライン」を使ってアニメーションバナーを作成できます。同時に、エディタのメイン領域を管理するには、クランピングスペースとLCM、スケールパラメータを持つブロックを使用します。
レイアウトを埋める
- バナーの作成常に背景から始まります。したがって、レイアウトを準備した後、[プロパティ]タブと[ページ]ブロックを開き、[FILL "サブセクションを使用します。グラデーションや完全に透明な背景を含む任意の色を取り付けることは非常に可能です。
- また、キューには、予め用意されているグラフィック要素を追加します。下部パネルの「+」アイコンをクリックして、オブジェクトライブラリタブでこれを行うことができます。
- 目的のグラフィックファイルを選択して[開く]をクリックします。これは、必要なすべてのレイヤー、別々に、これらのアクションを繰り返すことができます。
- 対処するには、[オブジェクトライブラリ]タブで目的の画像をクランプし、エディタをメイン領域にドラッグします。
アクティブな選択ツールを使用して、通常のドラッグとスケーリングを使用してオブジェクトの場所を制御できます。必要に応じて、常にガイドを使用できます。
- ワークスペースまたは[構造エディタ]タブでグラフィックファイルを選択するには、[プロパティ]を開きます。背景の場合よりもはるかに多くの可能性があります。たとえば、境界設定や区分などです。
- バナーデザインがテキストの存在を提供する場合は、標準のGoogle Web Designerツールを使用して適切な項目を追加できます。左側のペインの[T]アイコンをクリックし、メインエディタウィンドウをクリックして、希望の文字セットを入力します。
テキストを制御するには、[構造エディタ]タブでレイヤーを選択し、[テキスト]を展開し、適切なパラメータを設定します。
アニメーションを設定する
- 「タイムライン」ブロックでは、アニメーションの効果を追加および設定できます。起動するには、 "+"アイコンの "アイコンの追加]ボタンをクリックします。
- フレーム間の「.5」アイコンをクリックして、必要なパラメータを設定します。たとえば、遷移の期間とスタイルを変更できます。
- 「タイムライン」の各ブロックは他のものと完全に独立しています。アニメーションを作成するには、いくつかの項目を裁量に変更し、再生ボタンを使用して結果を確認してください。
編集プロセスが完了したら、[繰り返し]ボタンを使用します。これにより、無限のアニメーションが作成されます。
イベントを追加する
- レイアウトで理解したことは、個々の要素またはバナー全体の遷移イベントを追加する必要があります。これを行うには、[Sector Inspector]列で[イベント]タブを開き、下部パネルの[+]アイコンをクリックします。
- 「目的」リストから開くウィンドウで、参照されるオブジェクトを選択します。
- [イベント]ページで、[マウス]ページを展開して[クリック]を選択します。結果の要件に応じて、さまざまなインストールを組み合わせることができます。
- さらに「アクション」リストから、Google宣言を開き、「遷移」値を設定します。そのような選択は、ユーザーがインターネット上で必要な特定のページに移動するようにするでしょう。
- 「受信者」として、1つの「GWD-AD」バージョンを1つ選択します。
- フィールドの最後の段階で "IDENTIF。インジケータ»ショートカットへのリンクを確認し、目的のページを指定して「URL」を入力します。保存するには「OK」を使用してください。
ソースコードを扱う
- 述べたように、Google Web Designerには組み込みのコードエディタが含まれています。トップパネルの右側の「コード」ボタンを使用することで有効にできます。
- ビジュアルエディタだけでなく、プロジェクトファイル内のコードを直接作業することもできます。これは、多数の小さな要素を調整するとき、またはプログラムによって提供されていないイベントを追加するときに非常に役立ちます。
説明されているアクションは、アプリケーションに関係なくバナーを作成するのに十分なほど十分であるべきです。同時に、これらのツールを組み合わせることで機能を大幅に拡大することができます。
ステップ3：完了
バナーが完成し、サイトを配置する準備ができたら、最後のステップに進むことができます。まず第一に、実際のWebページの作業がどのように見えるかをチェックする価値があります。プレビュー
- 上部パネルで、プレビューボタンをクリックして追加のメニューを開きます。ここでは、バナーが開かれるブラウザを指定できます。
- すべての機能とバナーの外観を開くときは保存されていますが、いくつかの機能があります。たとえば、アニメーションの無限の繰り返しをインストールしたとしても、すべてが1回の反復だけに制限されます。
- 必要ならば、あなたはいつも他の人々に結果を証明することができます。これを行うには、「共有リンクを取得する」を選択し、Googleアカウントへのアクセスを確認します。
その結果、上記のようなモードでバナーを表示するために画面上にリンクが表示されます。もちろん、アカウントがある場合にのみ可能です。
保存と出版物
- プロジェクトを保存するには、まずファイルメニューを開き、[保存]オプションを使用します。その後、ソースファイルはコンピュータに保存され、続いて開くことができます。
- プログラムの右上隅にある「公開」メニューを開いて、保存の場所の1つを選択することで、サイト上に配置するプロジェクトを準備できます。
- 裁量のパラメンウィンドウのパラメータを変更して、目的のチェックボックスだけを残し、[公開]をクリックします。プロジェクトのサイズに関係なく、保存することは迅速に起こります。
その結果、保存場所にフォルダが見つかります。サイト上のバナーの配置は、サイトの依存関係が異なり、一般的には作成手順に属していません。
