Axure を学ぶまでの道 3 番目の Bullet_html/css_WEB-ITnose

今回は簡単なQQログインページのWeb版を作りました。

その前に、私が学んだちょっとしたヒントを共有したいと思います。多くの学生は、Web サイト上の元の画像を切り抜きたいと考えていますが、これは通常、右クリックして保存するだけでは困難です。その場合、保存されるのは通常、Web ページの HTML です。

正しい手順は次のとおりです:

まず、Google Chrome (他のブラウザーは保証されません) を開き、任意の場所を右クリックして、[要素の検査] をクリックします

このようなインターフェイスが表示され、Web ページの CSS、HTML、フロントエンド コード、Web ページ内の画像などが表示されます。「リソース」を参照してください。上部と右の「リソース」をクリックします:

フレームフォルダーが表示され、フォルダーをクリックし、その下に画像列が表示されます。 :

これが Web ページに表示されているすべての画像です。ダブルクリックすると、別の HTML にジャンプします。この HTML を右クリックして名前を付けて保存できます。応答がない場合は、上記の操作を繰り返してください。

それでは本題に入りましょう。

まずは今回の様子を見てみましょう。

開くと、まず左側に 3 つのアカウント登録方法が表示されます。 、以下は QQ アカウントの検索バーです。右側には、各ページの具体的なインタラクションが示されています。

このやりとりの中で、私に特定の困難を引き起こした場所が 3 か所あるので、これら 3 か所に焦点を当てます。

●左側の3つの異なるページの切り替えと、切り替え前後のアイコンの色の変更。

●右側のインタラクティブインターフェースの入力ボックスの色とフォーカス位置が変わります。

●複数のドロップダウン リスト ボックスで関連するコンテンツの対応を維持する方法。

1: 左側の 3 つの異なるページの切り替えと、切り替え前後のアイコンの色の変化。

まず、3 つのページの切り替えについて説明します。

ここで最も便利で効率的な方法は、動的パネルを使用することです。

各サブページを動的パネルのいくつかの異なる状態に直接配置し、アクションを追加し、切り替え時にクリックしたアイコンとアイコンの横にある小さな画像を選択して、現在のボタンを対応するページと一致させるための動的パネル ステータス:

次に、次のステップは 3 つのボタンでページを切り替えることです。左 各アイコンの色もそれに応じて変化します。

このとき、画像のプロパティの選択ボタンを使用して、画像列で切り替えるときに変更したい画像をクリックして選択し、インポートする必要があります:

以上です。選択されていない場合は元の画像のままで、選択されている場合はインポートした画像が表示されます。

2: 右側の対話型インターフェイスの入力ボックスの色が変化し、フォーカス位置が変化します。

実際、この入力ボックスは四角形とテキスト ボックスの 2 つの部分で構成されています

クリックされたときにフォーカスを取得したいと外枠が青になり、離れると外枠が赤になります まず、外枠のプロパティバーで外枠が選択時と無効時の変更効果を設定します。 選択すると外枠が赤に設定され、無効にすると外枠が赤になります。青に設定:

選択すると、外枠が赤に設定されます

無効にすると、外枠が青に設定されます

その後、アクションを直接追加できます。 マウスをクリックすると、外枠が無効になり (色が青に変わります)、入力ボックスが表示されます (入力ボックスの色が四角形と異なるため、非表示になります)最初に色の違いを避けるため)、入力ボックスがフォーカスを取得し、次に入力が設定されます。 フレーム アクション: フォーカスが取得されると、外側の境界線が選択解除に設定され、その後、外側の境界線が無効になります (これにより、実際に青色の効果が実現されます)。 ) フォーカスが失われると、外側の境界線が有効になって選択され、外側の境界線が赤に変わります。以上で一連の操作は完了です。

3: 複数のドロップダウン リスト ボックス内の関連コンテンツの対応を維持する方法。

例として、次の 2 つのドロップダウン リスト、つまり県、市、および管轄区域を取り上げます。

1 対 1 の対応を実現するには? もちろん、省と都市を 1 つずつ判断し、管轄区域 (管轄区域) が位置する動的パネルを調整します。動的パネルを設定する必要があります）を北京に対応させるために、対応する動的パネル状態に移動しますが、データ量が多くなると、入力するものが多すぎて非常に面倒になります。

だから、別の方法を見つけなければなりません。

動的パネルのステータス (管轄区域) を直接設定し、ステータスを値として選択し、ローカル変数を設定して、州と都市のデータをローカル変数に割り当て、動的パネルのステータスをローカル変数:

その後、異なるドロップダウン リスト内の対応するデータと自動的に照合できます。