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!

यदि आप Dreamweaver में अपने वेब पृष्ठों शैली सीएसएस शैलियाँ पैनल का उपयोग किया गया है तो आप डिजाइन करने का संबंध के साथ तुम पर लगे प्रतिबंधों के बारे में पता होगा. ठोस रंग, मानक फोंट, आदि सभी दिलचस्प है, लेकिन नहीं वास्तव में चुनौतीपूर्ण सीएसएस क्षमता ब्लॉक आकार.

तो इस लेख Im में आप Dreamweaver में अपने शैलियाँ है कि वास्तव में कुछ महान डिजाइन बनाने के लिए जोड़ने के लिए कुछ सीएसएस दिखाने जा.

चलो एक div टैग है कि इस अद्भूत शैली बनाने के बारे में शामिल होंगे बनाने के द्वारा शुरू.


चरण 1 - एपी डिव जोड़ें

एक खाली HTML दस्तावेज़ के साथ शुरू सम्मिलित कक्ष खोलें और यह लेआउट के लिए सेट. लेआउट से विकल्प ड्रा एपी डिव का चयन करें.

Div drawn

तैयार div


उपकरण का उपयोग एक एपी डिव आकर्षित (जो सिर्फ एक ID # स्वचालित रूप से स्थिति और आकार मापदंडों युक्त लागू शैली के साथ एक div टैग है). एपी डिव आकार लंबाई के साथ संपत्ति कक्ष का उपयोग करें: 400px और चौड़ाई: 400px.


चरण 2 - एपी डिव नाम

एपी पैनल तत्वों और फिर नाम MyStyle के लिए APDiv1 के खोलें. सीएसएस शैली पैनल खोलें और आप से कि एपी डिव भी फिर से नामकरण फिर से नाम आईडी शैली MyStyle. इस शैली है कि आप संपादन किया जाएगा है.


चरण 3 - सीएसएस कोड का पता लगाएं

भाजित देखने के लिए पर स्विच इतनी है कि आप दोनों छवि और कोड आप देख सकते हैं. अनुभाग में स्क्रॉल करें और आप कोड का एक खंड गुलाबी प्रकाश डाला है कि # MyStyle {} कहते हैं देखेंगे. यह अपने सीएसएस है और इसके लिए सभी सेटिंग्स है कि आप के बारे में बनाने के लिए कर रहे हैं {दो} के बीच बैठेंगे.


चरण 4 - कुछ सामग्री जोड़ें

डिज़ाइन दृश्य में तैयार एपी डिव पर क्लिक करके समय टाइपिंग, और डिव में पाठ का अनुच्छेद के बारे में कॉपी पेस्ट को बचाने के लिए है, तो कर्सर सक्रिय और अहम आदेश V पेस्ट करने के लिए हो जाता है.

rounded corners

गोल कोनों


सुझाव: फिर से बिल्कुल आपके चौड़ाई और ऊंचाई के आधे (तो यह 200px मामले में) और पूर्वावलोकन करने के लिए त्रिज्या आकार बढ़ाएँ .... अरे, तुम एक पूर्ण चक्र प्राप्त करें!


चरण 6 - ढाल पृष्ठभूमि

एक ढाल पृष्ठभूमि जोड़ना एक बहुत अच्छा डिजाइन प्रभाव है, लेकिन आप हमेशा दिमाग में रखना है कि सभी ब्राउज़रों के सभी संस्करणों का समर्थन चाहिए. इतना ही कभी इसका इस्तेमाल करने के लिए एक छवि में वृद्धि. हमेशा मन में कई ब्राउज़रों के साथ काम डिजाइन और एक ठोस रूप में अच्छी तरह से भरने के.

gradient background

ढ़ाल पृष्ठभूमि


निम्नलिखित कोड इस ढाल पृष्ठभूमि पैदा करेगा:

पृष्ठभूमि रंग: # 666,666;

पृष्ठभूमि छवि: MOZ रेखीय ढाल (शीर्ष, 666,666 # 40.0 # 333,333%);

पृष्ठभूमि छवि: वेबकिट रेखीय ढाल (शीर्ष, ६६६६६६ # 40.0 # 333,333%);

पृष्ठभूमि छवि: - ओ - रैखिक ढाल (शीर्ष, 666,666 # 40.0 # 333,333%);

एमएस - पृष्ठभूमि छवि: रैखिक ढाल (शीर्ष, 666,666 # 40.0 # 333,333%);

पृष्ठभूमि छवि: रैखिक ढाल (शीर्ष, 666,666 # 40.0 # 333,333%);


अगर आप यह कर सकते हैं कुछ ब्राउज़रों में टेस्ट, प्रभाव देखना. अन्त में पाठ के लिए कुछ पंच जोड़ने की सुविधा देता है है.


चरण 7 - पाठ बढ़ाने के

Ive पाठ के लिए व्हाइट जोड़ी, बनाने के लिए इसे बाहर खड़े ढाल के खिलाफ बेहतर है. Ive भी पाठ के लिए ड्रॉप छाया जोड़ा. साथ के रूप में ढाल ड्रॉप छाया केवल वेब ब्राउज़र के नवीनतम संस्करण के साथ काम करता है हमेशा उस पर भरोसा नहीं है.

drop shadow

छाया ड्रॉप


इस कोड को रंग और ड्रॉप छाया कहते हैं:

रंग: # FFFFFF;

पाठ छाया: 2px 2px 3px # 000000;


चरण 8 - बेहतर फ़ॉन्ट?

अंत में मैं एक बेहतर फ़ॉन्ट और कुछ padding कहा, पाठ के चारों ओर कुछ जगह बनाने के लिए.

Better text

बेहतर पाठ


इन लाइनों को जोड़कर:

फ़ॉन्ट वजन: सामान्य;

text-align: छोड़ दिया;

font-परिवार: जॉर्जिया, सेरिफ़;

फ़ॉन्ट आकार: 18.0px;

लाइन ऊँचाई: 140%;

padding: 10px;


यहाँ कोड मैं कि प्राप्त करने के लिए जोड़ा है. फिर से अपने ब्राउज़र में देखने के लिए जहां कुछ ब्राउज़रों और असर है कि मन में जब आप अपने पृष्ठों डिजाइन कर रहे हैं के लिए कुछ कोड काम नहीं करेगा संगतता के लिए जाँच के लायक.

सभी ब्राउज़रों CSS3 और HTML 5 तो भी उन का उपयोग करने भयभीत न समर्थन किया जा रहा है नवीनीकृत कर रहे हैं, बस पता है. क्या है और यह सिर्फ पारंपरिक वेब ब्राउज़र आप सफारी, क्रोम, फ़ायरफ़ॉक्स और आदि के रूप में इस कोड के साथ के लिए उद्देश्य यह भी IOS और Android पर पूरी तरह से अच्छी तरह भी काम करता है के लिए कर रहे हैं नहीं है. अगर है कि यह अपने समय के लायक नहीं है तो क्या होगा?



Related Videos
Comments (0)

You must be logged in to comment.

EDM Production Tips
Logic Pro X 402
Dream It. Do It.
Do you want to learn EDM Production Tips?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
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: