الدريم ويفير سي سي كود أقل ….. أكثر تصميم
الدريم ويفير سي سي كود أقل ….. أكثر تصميم
برنامج الدريم ويفر هو احد اهم البرامج التي تستطيع من خلالها تصميم وبناء مواقع الانترنت وتطبيقات الموبايل. كانت بداية البرنامج مع شركة ماكروميديا سنة 1997.
ثم قامت شركة أدوبي بشراء شركة ماكروميديا لينضم البرنامج الى قافلة برامج شركة أدوبي. وقد قامت أدوبي بإضافة تحديثات عظيمة للبرنامج، ثم أضافته لحقيبة برامج الويب مع اصدار creative suite.
الدريم ويفر أصبح أكثر سهولة خصوصا في كتابة الكود الخاص بتصميم المواقع وأيضا هناك إاضافات ممتازة للتصميم المباشر دون الرجوع لكتابة الكود من خلال شاشة التصميم.
في هذا المقال سأقوم بطرح مثال بسيط لكيفية استخدام responsive web pages في الدريم ويفير
Create fluid, responsive web pages in Dreamweaver
من أجل بناء موقع يتوافق مع الأجهزة الذكية كالهواتف الذكية والتابلت يجب أن تستخدم أمر Fluid Grid layout من شاشة الترحيب او من قائمة File ثم new ثم من الممكن حسب ما يتطلبه التصميم أن تقوم ببعض التغييرات ثم الحجم ثم اختار زر Create
ستظهر رسالة لتخزين ملف CSS اختار المكان المناسب
يجب تخزين التصميم للمرة الثانية ولكن هذه المرة كإمتداد HTML وفي شاشة التصميم ستلاحظ وجود مستطيل (يسمى DIV) وبما أننا نريد تصميم من البداية يفضل حذفه.
من قائمة insert احتار structure وهي تتةي على اوامر كثيرة من اجل تصميم المواقع، اختار منها Header
ستلاحظ شاشة للامر Header اختر منها ID ثم اعطها اسم ويفضل أن يكون الاسم له علاقة بالتصميم واختر أمر Insert fluid element من النافذة الظاهرة أمامكز
ستلاحظ أن الHeader في أعلى التصميم ويحتوي على كتاب، قم بحذف الكتابة لأننا نحتاج لاضافة صورة.
اختر قائمة Insert ثم اختر أمر Image ومن القائمة الفرعية اختر Image لتظهر نافذة لكي تقوم بالبحث عن الصورة في جهازك.
ما أن تظهر الصورة في منطقة Header، من الممكن أن تفكر بوضعها بمنتصف الHeader، اختر قائمة CSS Designer ومن منطقة Source اختار Select.css
ثم اختر اسم ملف الCSS الذي قمت بتخزينه سابقا ومن ثم اختر اختر media ومن ثم Global ومن خانة selector اختر اشارة + لعمل Selector جديد.
قم بحذف كل شيء في خانة selector ما عدا #topimage
ستلاحظ في خانة properties panel اوامر جديدة للصورة ومن Display اختار Block
ثم اختر أمر Margin واختر امر auto من الجهتين (اليمين واليسار).
لنقم بعمل قائمة خاصة للButtons
اختر الصورةومن ثم اضغط على زر Enter لعمل مسافة بين الشعار وبين القائمة. ثم من قائمة insert اختر structure ومن ثم Navigation .
ستلاحظ وجود نافذة اختر منها ID ثم اكتب اسم لها.
ستلاحظ وجود مستطيل يشبه إلى حد ما أمر div ويحتوي على كتابة، قم بحذف الكتابة من ومن ثم من قائمة insert اختر أمر Structure ومن ثم اختر امر Unordered list
ستظهر نافذة اختر أمر ID ثم أعطها إسم
ستقوم بعمل Menu Buttons داخل أمر Div لذا اذهب الى Select Panel ثم اختر structure ثم اختر List Item
الآن قم بإعداة تسمية الButton على سبيل المثال قم بتسميتها بAbout
لعمل Button جديد يجب عليك اعادة اخر خطوة أو اختر أمر Duplicate
jتستطيع إضافة أمر Padding لعمل مساافة بين الكتابة والحدود الخاصة بالButton
اختر text option من قائمة insert ومن ثم اختر center option وايضا تستطيع تغيير اللون
تستطيع أيضا تغيير الارضية من خلال background options.
أخيرا تستطيع يعديل الزوايا بجعلها أكثر إنحناءً
وبهذه الحالة قد قمت بعمل تصميم ولم تقم باستخدام الكود أو على الأقل الأدوات السابقة قد قامت بتخفيف حدة استخدامك للكود.