नई द्रव ग्रिड लेआउट ड्रीमविवर CS6

• मई 19, 2024

यदि आप सरल वेबसाइट या जटिल सीएमएस विकसित करते हैं, तो आपके मन में हमेशा यह सवाल रहता है - क्या मैं सभी प्रकार के दर्शकों और स्क्रीन रिज़ॉल्यूशन को लक्षित करने के लिए कर रहा हूं? खैर, ड्रीमविवर^आर CS6 में नई विशेषताएं हैं जो इसे एक आसान काम बनाते हैं।

अतीत में, प्रत्येक को प्रत्येक अलग स्क्रीन रिज़ॉल्यूशन के लिए एक अलग सीएसएस फ़ाइल बनाने और आवश्यक सीएसएस फ़ाइल को असाइन करने के लिए मीडिया क्वेरी का उपयोग करने की आवश्यकता होगी। यह बहुत समय लेने वाला था और साइट के विकास की समग्र लागत में जोड़ा गया, जो डेवलपर और ग्राहक दोनों के लिए बुरी खबर थी। ड्रीमविवर CS6 ने अनुकूली वेबसाइट बनाने के लिए बहुत श्रम लिया है।

यह नई वर्कफ़्लो प्रक्रिया नए फ़्लूइड ग्रिड लेआउट पर निर्भर करती है जो कुछ हद तक आपकी वेबसाइट के लिए प्रत्येक स्क्रीन रिज़ॉल्यूशन के लिए डिफ़ॉल्ट लेआउट और टाइपोग्राफी के साथ स्टार्टर टेम्पलेट की तरह है।

1. बस फ़ाइल पर क्लिक करें - मेनूबार से नया द्रव ग्रिड लेआउट।
   
   
2. नए दस्तावेज़ संवाद बॉक्स में, आप इस नए अनुकूली वेबपृष्ठ के लिए डिफ़ॉल्ट देखेंगे। प्रत्येक अलग-अलग स्क्रीन रिज़ॉल्यूशन के लिए चौड़ाई तय की गई है।
   
   मोबाइल 480px
   तालिका 768px
   डेस्कटॉप 1232px
   
   
3. आपके पास प्रत्येक स्क्रीन रिज़ॉल्यूशन के लिए कॉलम की डिफ़ॉल्ट संख्या और कॉलम की चौड़ाई का प्रतिशत बदलने का विकल्प है। चूक हैं:
   
   मोबाइल 5 कॉलम - 91%
   गोली 8 कॉलम - 93%
   डेस्कटॉप 10 कॉलम - 90%
   
   
4. डिफ़ॉल्ट कार्यक्षेत्र कोड और डिज़ाइन दृश्य दिखा सकता है। जैसा कि आप डिज़ाइन दृश्य में देख सकते हैं, नई फ़ाइल में पहले से ही एक div टैग है। आप गुण पैनल में div के लिए डिफ़ॉल्ट आईडी और क्लास बदल सकते हैं।
   
   बेशक, आपके वेबपेज को एक से अधिक div की आवश्यकता होगी। तो हम हेडर, नेविगेशन, मुख्य, एक तरफ और पाद के लिए और अधिक divs जोड़ सकते हैं।
   
   
5. एक नया div जोड़ने के लिए, Insert पैनल में द्रव ग्रिड लेआउट डिव टैग डालें चुनें।
   
   
6. संवाद बॉक्स में, आप टैग के लिए आईडी का नाम दे सकते हैं।
   
   
7. जब हमने अपने पेज के लिए सभी प्रमुख divs जोड़ लिए हैं, तो हम उन्हें ग्रिड के भीतर रिपोज करने के लिए क्लिक और ड्रैग कर सकते हैं।
   
   

यह सुझाव दिया जाता है कि हम अपनी साइट के मोबाइल संस्करण का निर्माण शुरू करें और बड़े आकारों तक बढ़ें। आप मोबाइल, टैबलेट और डेस्कटॉप रिज़ॉल्यूशन के लिए रिज़ॉल्यूशन स्विचर का उपयोग करके आसानी से विज़ुअल परिणामों की तुलना कर सकते हैं।

जब हम अपना लेआउट सहेजते हैं, तो हमें एक HTML5 और CSS3 फ़ाइल मिलती है जो तीनों स्क्रीन रिज़ॉल्यूशन के लिए काम करेगी। यदि हम इन फ़ाइलों के अंदर एक नज़र डालते हैं, तो हम इस बारे में जानकारी प्राप्त कर सकते हैं कि फाइलें हमारे अनुकूली वेबपेज बनाने के लिए कैसे काम करती हैं।

* Adobe ने समीक्षा उद्देश्यों के लिए मुझे इस सॉफ़्टवेयर की एक प्रति प्रदान की।

कॉपीराइट 2018 एडोब सिस्टम्स शामिल। सभी अधिकार सुरक्षित। Adobe उत्पाद स्क्रीन शॉट (ओं) को Adobe सिस्टम शामिल से अनुमति के साथ पुनर्मुद्रित किया गया। Adobe, Photoshop, Photoshop एल्बम, Photoshop तत्व, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, आतिशबाजी, योगदान, कैप्टिनेट, फ्लैश कैटालिस्ट और फ्लैश पेपर संयुक्त राज्य अमेरिका और / या अन्य देशों में शामिल एडोब सिस्टम्स के या तो [/ a] पंजीकृत ट्रेडमार्क [s] या ट्रेडमार्क [s] हैं।

वीडियो निर्देश: उत्तरदायी वेब डिजाइन के लिए ग्रिड लेआउट | इलस्ट्रेटर (मई 2024).