新しいFluid Grid Layout Dreamweaver CS6

• かもしれません 11, 2024

単純なWebサイトや複雑なCMSを開発する場合、常にこのしつこい疑問が頭に浮かぶでしょう。あらゆる種類の視聴者と画面解像度をターゲットにするためにできる限りのことをしていますか？まあ、Dreamweaver^R CS6には、これをより簡単にする新しい機能があります。

以前は、画面解像度ごとに異なるCSSファイルを作成し、メディアクエリを使用して必要なCSSファイルを割り当てる必要がありました。これは非常に時間がかかり、サイト開発の総コストに追加されました。これは、開発者とクライアントの両方にとって悪いニュースでした。 Dreamweaver CS6は、適応型Webサイトの作成に多大な労力を費やしました。

この新しいワークフロープロセスは、Webサイトの各画面解像度のデフォルトレイアウトとタイポグラフィを備えたスターターテンプレートに似た新しいFluid Grid Layoutに依存しています。

1. メニューバーから[ファイル]-[新しい流体グリッドレイアウト]をクリックします。
   
   
2. [新しいドキュメント]ダイアログボックスに、この新しいアダプティブWebページのデフォルトが表示されます。幅は、さまざまな画面解像度ごとに固定されています。
   
   モバイル480ピクセル
   表768px
   デスクトップ1232px
   
   
3. 各画面解像度のデフォルトの列数と列幅の割合を変更するオプションがあります。デフォルトは次のとおりです。
   
   モバイル5列-91％
   タブレット8列-93％
   デスクトップ10列-90％
   
   
4. デフォルトのワークスペースには、コードとデザインビューを表示できます。デザインビューで確認できるように、新しいファイルには既に1つのdivタグがあります。 [プロパティ]パネルで、divのデフォルトのIDとクラスを変更できます。
   
   もちろん、Webページには複数のdivが必要です。そのため、ヘッダー、ナビゲーション、メイン、サイド、フッターにさらにdivを追加できます。
   
   
5. 新しいdivを追加するには、[挿入]パネルで[流体グリッドレイアウトDivタグの挿入]を選択します。
   
   
6. ダイアログボックスで、タグのIDに名前を付けることができます。
   
   
7. ページにすべての主要なdivを追加したら、それらをクリックしてドラッグし、グリッド内で再配置できます。
   
   

サイトのモバイルバージョンの構築を開始し、より大きなサイズに移行することをお勧めします。モバイル、タブレット、デスクトップの解像度用の解像度スイッチャーを使用すると、作業中の視覚的な結果を簡単に比較できます。

レイアウトを保存すると、3つの画面解像度すべてで機能するHTML5およびCSS3ファイルが1つ取得されます。これらのファイルの内部を見ると、ファイルがどのように機能してアダプティブWebページを作成するかに関する情報を見つけることができます。

*アドビは、レビュー目的でこのソフトウェアのコピーを私に提供しました。

Copyright 2018 Adob​​e Systems Incorporated。全著作権所有。 Adobe Systems Incorporatedの許可を得て、Adobe製品のスクリーンショットを転載しました。 Adobe、Photoshop、Photoshop Album、Photoshop Elements、Illustrator、InDesign、GoLive、Acrobat、Cue、Premiere Pro、Premiere Elements、Bridge、After Effects、InCopy、Dreamweaver、Flash、ActionScript、Fireworks、Contribute、Captivate、Flash CatalystおよびFlash Paper米国および/またはその他の国におけるAdobe Systems Incorporatedの[a]登録商標または商標です。

動画の説明: Fluid grid layouts with Dreamweaver CS6 | lynda.com (かもしれません 2024).