طريقك لاحتراف تصميم المواقع – تحويل التصميم الى Html

  • طباعة

تحية طيبة لكل اخوتي الكرام في شبكة المنهل
نكمل على بركة الله وتوفيقه ما بدأناه في هذه السلسلة بعد انقطاع لمدة بسبب شهر رمضان الكريم وضيق الوقت مابين العمل والمتابعة

المرحلة الثالثة : تحويل التصميم الى html
ماسنقوم به في هذه المرحلة باختصار هو تحويل التصميم الموجود لدينا كملف فوتوشوب الى صفحة انترنت html وللقيام بذلك يجب أولا تعلم عدة امور وفهمها بالطريقة الانسب
1- استعمال الفوتوشوب لتحويل التصميم الى ملف html
وسنبدأ بالأسهل وهو استعمال الفوتوشوب ومايتيحه لنا من وظائف خاصة لتحويل التصميم الى صفحة ويب وهي تعتبر من العمليات السهلة نسبيا في الفوتوشوب ويجب ان نفهم شيئا مهما هنا وهو
- يتم نقل التصميم الى صفحة ويب من خلال تقسيم التصميم الى شرائح أو قطع slices بحيث يتم حفظ كل شريحة بشكل مستقل كملف jpg – png ويتم انشاء ملف html يربط بين هذه الشرائح ويعرضها كما في التصميم الاصلي تماما
وهنا سنؤجل التطبيق العملي لهذه المرحلة لوقت قصير ريثما نضع دورة شاملة من موقع شقيق توضح كل ماشرحنا وسنشرحه

2- تعلم اساسيات لغة html
من المهم عزيزي القارئ فهم لغة html وهي اختصار (Hyper Text Markup Language) وتعني بالعربية (لغة ترميز النصوص التشعبية )
وهي لغة ترميز وليس لغة برمجة كما هو للاسف شائع بين متصفحي الويب ولانطلب منك هنا سوى التعرف عليها وفهمها بشكل مبسط لتستطيع التعديل والتحكم بصفحة الويب الخاصة بك
ولفهم لغة html فهي ببساطة الوجه الاخر لصفحات الويب اي ان كل صفحة ويب نراها امامنا حين نتصفح الانترنت فهي بالحقيقة من الداخل مجموعة من الرموز البسيطة تحدد نوع الخط مثلا ولونه وهكذا
ولتعلم لغة html بأبسط طريقة يمكنك تصفح الدورة التالية من موقعنا
http://111000.net/wdesign/htmlcss/htmlstarter/189-hhtmlcourse

3- تعلم اساسيات CSS:
ان تقنية css هي اختصار ل (Cascading Style Sheet) هي تقنية تتخصص في ضبط شكل الصفحة وتنسيق شكل مكوناتها من جداول وصور وخطوط ونظرا لتطور تقنية الويب اصبح من الضروري تعلم هذه التقنية ليصبح موقعك متوافقا مع احدث معايير صفحات الويب
ولتعلم هذه التقنية انصحك بالاطلاع على الدورة التالية في موقعنا
http://111000.net/wdesign/css/ccourses/190-csscourse1

4- تعلم برامج ادارة المواقع
من أهم برامج ادارة المواقع والتعامل معها لدينا برنامج dreamweaver حيث يمكننا من خلاله تعديل محتويات صفحة الويب وتعديل كود html الخاص بها ورفع الملفات على الانترنت والعديد من الميزات الرائعة الاخرى
ولتعلم البرنامج ننصحكم بتصفح الدورة التعليمية الخاصة به الموضوعة في موقعنا وهي بالفيديو من موقع وقف أون لاين التعليمي
والدورة تجدونها هنا
http://111000.net/wdesign/dreamweaver/173-dwvideo/dwvcourse/430-dwv1
وهنا عزيزي القارئ سنتوقف قليلا عن الكلام النظري وسنضع خلال الايام القادمة دروس فيديو عملية من موقع عربي مميز توضح لكم كل ماشرحناه في المحاضرات السابقة كي يسهل عليك الانتقال الى الخطوات اللاحقة في بناء وتصميم الموقع الخاص بك
وننوه الى انك لن تستطيع التقدم في المراحل اللاحقة العملية والنظرية مالم تدرس وتفهم كل الامور التي اوضحناها مثل (الفوتوشوب ولغة html – وبرنامج dreamweaver)
ونتابع لاحقا ان شاء الله