Dreamweaver CC 2015のアップデート

Bootstrapテンプレートを使う

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLドキュメントを新たにつくるとき、Bootstrapテンプレートが使えます。
講師:
05:07

字幕

このレッスンではスターターテンプレートから Bootstrapに対応した テンプレートを使って 新規のドキュメントを作り 簡単な画面の操作と編集を 行ってみたいと思います ではこの「ようこそ」の場面の 「新規作成」を使うのですが 現在はサイトのほうには 後で使おうと思っている 画像があるだけでCSSも もちろん HTMLドキュメントもありません それをこれから作ります 「スターターテンプレート」をクリックして その中のBootstrapに対応する テンプレートを選びます 合計で6つあります 「eコマース」「エージェンシー」 右にそのプレビューがでてますので 大体そのものか想像がつくと思いますが このようなレイアウトが加えられてますので それをベースに編集していくことができる ということです ここでは製品を選んでみましょう [作成]にします ファイル名を聞かれますので 「sample」としましょう この画像のフォルダのある階層に このhtmlドキュメントを保存します そしてここにCSSやJavascriptファイルなど 必要なものをコピーしますので [コピー]です そうすると必要なファイルがコピーされ 「CSS」や「fonts」 これはもともとあった「img」の フォルダですけど それ以外に 舞台といいますか プレースフォルダというやつですね こういう画像のテンプレート その中に含まれているものが コピーされています それからJavascriptファイル 今保存したhtmlドキュメント ということですね 右のパネルが邪魔なので 右に避けててもらいます 端っこに縮小です そしてレスポンシブWebデザインに なってますので 幅がそれぞれ変わると レイアウトも変わってきます この幅を変えるときに上の 「ビジュアルメディアクエリーバー」を クリックする方法もありますし それから「スクラブバー」というのですが このタブのような部分 これをドラッグすると任意の幅に 縮めたり広げたりすることができます ダブルクリックでフルサイズ ということになります それからこれを 「ビジュアルメディアクエリーバー」 というのは このボタンでー 隠すこともできますし 必要があれば また出せます それから右下のほうに ウインドウサイズを変える選択肢があります 現在1095×489とありますけど これを例えば 幅の狭いiphone5 にすると こんな感じですね ちょっとボタンが重なってしまっています もう少し広いiphone6 更にここですね Google Nexus 7 このように典型的なデバイスの幅で 確認することもできます ではダブルクリックでフルサイズに してみましょう 先ほどの 画像のプレースフォルダ 辺りがありますので ここに予め用意しておいた画像を 入れ替えたいと思います その場合にはこのプレースフォルダの 画像を選んで 「HTML属性を編集」というボタンを クリックします そしてソースが辺りのー gifファイルになってますので 「ファイルの参照」をクリックして 「images」のフォルダの中に用意した 「top」という画像を使いたいと思います 開きます するとすぐ入れ替わりますね もう少し下の方にも画像がありますので そこも入れ替えましょう ここです 小さめの画像が2つあります 同じ容量で 「HTML属性を編集」をクリックして ファイルの参照で 「left」を選びます 「phot_left.jpeg」です 同様にこちらも 「HTML属性を編集」して ファイルの参照で 「right」を選びます では各デバイスの用の幅 レスポンス用デザインの幅で どう表示が変わるか確認してみましょう 中間の場合はこうですね ちゃんと画像が2つ並んでいます では一番狭いパターンで行きますと 画像が2つ並ぶと窮屈なので 縦に並べます こういったレイアウトが各サイズごとに 変更できるというのが レスポンシブWebデザインですね このレッスンでは スターターテンプレートから Bootstrapに対応した テンプレートを選んで その簡単な画面上の操作 それから画像を設定するという 編集を行ってみました

Dreamweaver CC 2015のアップデート

2015年6月のアップデートでDremaweaverにも新しい機能やパネル、インターフェイスが加わりました。このコースではBootstrapフレームワークやビジュアルメディアクエリーの導入、新しくなったCSSデザイナパネルとDOMパネル、コード入力を効率化したり構文チェックを行うツールなど主な新機能を解説します。

1時間44分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年07月27日
アップデート日:2015年11月30日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。