الدريم ويفير سي سي كود أقل ….. أكثر تصميم

برنامج الدريم ويفر هو احد اهم البرامج التي تستطيع من خلالها تصميم وبناء مواقع الانترنت وتطبيقات الموبايل. كانت بداية البرنامج مع شركة ماكروميديا سنة 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.

أخيرا تستطيع يعديل الزوايا بجعلها أكثر إنحناءً

وبهذه الحالة قد قمت بعمل تصميم ولم تقم باستخدام الكود أو على الأقل الأدوات السابقة قد قامت بتخفيف حدة استخدامك للكود.