All Articles Dreamweaver
ایجاد متن های بزرگ با CSS3 در Dreamweaver
David Smith on Wed, February 29th 0 comments
Want to create great looking text in Dreamweaver, but feeling stifled by the CSS styles panel? David Smith comes to the rescue with CSS style tips which will set free your inner designer!

اگر شما شده است با استفاده از پانل سبک های CSS در Dreamweaver به صفحات وب خود را به سبک پس از آن شما خواهد شد آگاه از محدودیت های اعمال شده بر شما با توجه به طراحی قرار می گیرد. رنگ های جامد، فونت استاندارد، شکل بلوک و غیره همه جالب توجه است، اما نه واقعا به چالش کشیدن توانایی های CSS است.

بنابراین در این مقاله من می خواهم برای شما برخی از CSS برای اضافه کردن به سبک خود را در Dreamweaver ایجاد خواهد شد که واقعا برخی از طرح های بزرگ نشان می دهد.

بیایید شروع شده توسط ایجاد یک تگ DIV که شامل این سبک شگفت انگیز خود را در مورد ایجاد.


گام 1 - اضافه کردن یک DIV AP

با شروع سند HTML خالی باز کردن پانل قرار دادن و تنظیم آن را به طرح. از طرح بندی گزینه را انتخاب کنید قرعه کشی DIV AP.

Div drawn

DIV کشیده


با استفاده از ابزار DIV AP را به منظور جلب (که فقط یک تگ DIV را با سبک # ID به طور خودکار اعمال می شود که شامل پارامترهای مربوط به موقعیت و اندازه). استفاده از پانل املاک به اندازه DIV AP با ارتفاع: 400px و عرض: 400px.


مرحله 2 - نام و نام خانوادگی DIV AP

باز کردن پانل AP عناصر و دوباره نام APDiv1 به MyStyle. باز کردن پانل سبک CSS و به شما خواهد شد نفسه که دوباره نامگذاری DIV AP نیز دوباره نام ID MyStyle سبک این سبک است که به شما خواهد شد در حال ویرایش است.


مرحله 3 - پیدا کردن کد CSS

سوئیچ بیش به نظر تقسیم به طوری که شما می توانید هم تصویر و هم youve کد ایجاد شده را ببینید. رفته تا به بخش شده و می توانید یک بخش از کد هایلایت صورتی که می گوید # {} MyStyle را ببینید. CSS خود است و تمام تنظیمات را برای آن است که شما برای ایجاد نشستن در بین دو {} است.


مرحله 4 - اضافه کردن برخی از مطالب

برای صرفه جویی در زمان تایپ، کپی و چسباندن در مورد یک پاراگراف از متن را به راستی آزمایی اطلاعات طراحی را از طریق کلیک کردن بر روی DIV AP کشیده در طراحی، به طوری که مکان نما فعال می شود و با فشار دادن فرماندهی-V برای چسباندن.


اضافه کردن مرز 3px همه راه دور با اضافه کردن این خط از کد بین {}:

مرز: جامد 3px # 999؛


گام 5 - دور گوشه و کنار

اضافه کردن این خط از کد را به سبک به نام # MyStyle برای ایجاد گوشه های گرد 20px در طیف وسیعی از مرورگرها:

-webkit-مرزی شعاع: 20.0px.

-moz-مرزی شعاع: 20.0px.

ای مرز شعاع: 20.0px.

-MS-مرزی شعاع: 20.0px.

مرز شعاع: 20.0px.


Dreamweaver را معتاد این گوشه تا به صفحه و پیش نمایش در مرورگر را نجات دهد آنها را نمایش می دهد.

rounded corners

گرد گوشه


نکته: افزایش اندازه شعاع دقیقا نیمی از عرض و ارتفاع خود را (پس در این مورد 200px) و پیش نمایش دوباره .... هی تو یک دایره کامل.


گام 6 - سابقه و هدف گرادیان

اضافه کردن پس زمینه شیب یک اثر واقعا خوب طراحی شده است، با این حال شما باید همیشه در نظر داشته باشید که نه همه از تمام مرورگرها از نسخه های آن را پشتیبانی می. بنابراین تنها تا کنون از آن یک تصویر به منظور ارتقاء استفاده کنید. همیشه چیز با مرورگرهای متعدد را در ذهن طراحی و جامد را پر کنید و همچنین در دسترس است.

gradient background

پس زمینه شیب


کد زیر این زمینه شیب:

رنگ پس زمینه: # 666،666؛

تصویر پس زمینه:-moz-خطی شیب (بالا، 666،666، 333،333 40.0٪)؛

تصویر پس زمینه:-webkit-خطی شیب (بالا، 666،666، 333،333 40.0٪)؛

تصویر پس زمینه:-O-خطی شیب (بالا، 666،666، 333،333 40.0٪)؛

تصویر پس زمینه:-MS-خطی شیب (بالا، 666،666، 333،333 40.0٪)؛

تصویر پس زمینه: خطی شیب (بالا، 666،666، 333،333 40.0٪)؛


آزمون در یک مرورگر چند اگر شما می توانید برای دیدن اثر. در نهایت اجازه می دهد تا برخی از پانچ به متن اضافه کنید.


گام 7 - بالا بردن متن

من دارم میرم سفید اضافه شده به متن، آن را ایستادگی کردن در برابر شیب. من دارم میرم سایه به متن اضافه شده است. با شیب Drop Shadow را تنها با نسخه های اخیر مرورگرهای وب کار می کند همیشه رو بر روی آن تکیه می کنند.

drop shadow

رها کردن سایه


این کد اضافه می کند، سایه رنگ و قطره

رنگ: # FFFFFF؛

متن سایه: 2px 2px 3px # 000000؛


گام 8 - فونت بهتر؟

در نهایت من اضافه فونت بهتر و برخی از پد، برای ایجاد فضای اطراف متن.

Better text

بهتر متن


با اضافه کردن این خطوط:

فونت وزن: عادی؛

تراز متن: سمت چپ؛

فونت خانواده: گرجستان، سریف؛

فونت، اندازه: 18.0px.

خط ارتفاع: 140٪؛

پد: 10px؛


در اینجا این است که کد است که برای دستیابی به آن اضافه کردم. باز هم چک کردن ارزش خود را برای سازگاری با مرورگر که در آن برخی از کد کار نخواهد کرد برای بعضی از مرورگرها و تحمل که در ذهن در هنگام طراحی صفحات خود را.

مرورگرها به روز شده در همه زمان برای پشتیبانی از CSS3 و HTML 5 را نمی توان بیش از حد وحشت زده به استفاده از آنها، فقط توجه داشته باشید. اگه این فقط مرورگرهای وب سنتی شما قادر به هدف با این کد مانند سافاری، کروم و فایرفاکس و غیره نیز کاملا با این نسخهها کار خوب در IOS و اندیشه است. اگر که نمی تواند آن را ارزش در حالی که شما را ندارد پس چه خواهد شد؟



Comments (0)

You must be logged in to comment.

Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: