ビデオ: [12 / 12] Dreamweaver CC 2017 Tips & Tricks - Lorem Lipsum 2024
Janine Warner著
Webデザインを初めて使用したり、HTMLページを何年も作成していた場合、Adobe Dreamweaver CS6は理想的なツールですあなたのウェブサイトを構築するため。バージョンCS6では、新しい歓迎画面があり、最新のカスケードスタイルシート(CSS3)とHTML5をサポートしています。 Dreamweaverは、プロのWebデザイナーだけでなく、趣味、クラブ、家族、および中小企業のサイトを構築したい人の間で人気のあるプログラムです。
Adobe Dreamweaver CS6のようこそ画面
Dreamweaverの使いやすいグラフィカルインターフェイスと強力な機能のリストは、プロのWebデザイナーだけでなく、愛好家の間でも人気があります。新しいバージョンが登場するたびに、Dreamweaver CS6には新機能が追加されましたが、使い慣れた開始画面が表示されます。
<! Dreamweaver CS6:CSS3でテキストシャドーを追加するDreamweaver CS6では、最新のWebテクノロジーであるCSS3のルールでテキストシャドーを追加することで、デザインを強化し、ページの深さを広げることができます。テキストシャドウを追加すると、特にデザインに複雑な背景がある場合や、背景とテキストの色にコントラストがない場合に、読みやすくなります。
<! - 3 - >クレジット:Paul Gual、istockphoto com
Dreamweaver CS6には、CSSスタイルパネルのプロパティペインを使用するときのCSS3テキストシャドウのサポートが含まれています。テキストシャドウでクラスまたはIDスタイルを作成し、イメージで使用される見出しスタイルなどのタグスタイルを定義して、既存のHTMLエレメントにテキストシャドーを追加できます。テキストシャドーを作成するCSS3コードは、
h1 {text-shadow:2px 2px 3px#000;}です。コード内の数字は、テキストシャドウを右に2ピクセル、 3ピクセルぼかしのテキストの下のピクセル。さらに、シャドーは黒色で作成され、省略された16進数のカラーコード#000で指定されます。
テキストシャドーのルールを作成するときに、最大4つの値を指定できます:
水平および垂直:
最初の2つの数値が必要です。水平および垂直オフセットを指定しますテキスト(水平)とテキストの右側(垂直)に表示されます。
-
ぼかし半径: 3番目の値は、影のぼかし量を指定します。ぼかし半径を含めない場合、デフォルトは0で、影が単色として表示されます。
-
Color: 4番目の値はシャドウの色を指定し、16進カラーコードまたはRGBaカラーコードを使用して定義できます。
-
画像に示すように、CSSスタイルパネルの下部にあるプロパティパネルを使用して、テキストシャドーを追加できます。これを行うには、次の手順を実行します。 [CSSスタイル]プロパティペインの左側にある[プロパティの追加]リンクをクリックします。
ドロップダウンリストからCSS3スタイルのルール名、テキストシャドウを入力するか、スタイルルールを選択します。
-
名前が左側に表示されたら、右側に小さな矢印が表示されます。
-
テキストシャドウの右側にある矢印をクリックして選択します。
ボックスが表示されます。
-
X、Yオフセット、ぼかし半径、および色を入力します。
Webデザイナーのためのウェブサイトとリソース
-
経験豊富なWebデザイナーは、Adobe Dreamweaverやその他のWebデザインソフトウェアを使用しているかどうかにかかわらず、オンラインリソースを参考にしてスキルを追求し、このリストを使用すると、Webデザインプロジェクトに役立ついくつかのWebサイトやオンラインリソースを簡単に見つけることができます。
音声とビデオのホスティングサービス:
YouTube
-
Vimeo
-
SoundCloud
-
ブログとCMSプログラム
-
Blogger
-
-
Joomla
-
MovableType
-
TypePad
-
Tumblr > WordPress
-
ソーシャルメディア共有サービス
-
これを追加
-
Lockerz Share
-
-
トラフィックレポートサービス:
-
Google Analytics
-
Yahoo! Web Analytics
-
-
HubSpot
-
人気のあるWebブラウザ:
-
Apple Safari
-
Google Chrome
-
-
Microsoft Internet Explorer
-
Mozilla Firefox
-
Opera
-
Webブラウザテストサービス:
-
Adobe Browser Labs
-
BrowserShots
-
-
クロスブラウザテスト
-
Spoon(旧Xenocode)のブラウザサンドボックス
-
Dreamweaver、CSS、およびWebデザインリソース:
-
Dreamweaverデベロッパーセンター
-
DigitalFamilyでのWebデザイントレーニング。 com
-
-
W3 HTML5とCSS3リソースの変換
-
A List Apart
-