مراجعة الكتاب: من Photoshop إلى HTML
إذا كنت جديدًا في إنشاء تصميمات مواقع الويب باستخدام Photoshop ، فإن تعلم تحويل ملفات .PSD إلى ملفات CSS وملفات HTML دلالية متوافقة مع المعايير يمكن أن يكون مرعباً بعض الشيء.
بعد كل شيء ، هناك الكثير من الخدمات الرائعة التي يمكن أن تقطع و ترميز ملفاتك من أجلك. ولكن هناك تلك الحالات التي قد تفضل فيها تصنيف تلك التصميمات بنفسك.
هذا هو المكان من Photoshop إلى HTML: كيفية تقسيم تصاميمك مثل المحترفين بقلم جيفري واي ، محرر Nettuts + ، يأتي.
في هذا الكتاب المكون من 145 صفحة ، تتم تغطية كامل عملية تحويل ملف .PSD إلى تصميم موقع ويب عامل ، بالتفصيل ، مع أمثلة التعليمات البرمجية.
يتم استخدام موقع نموذج لسير القراء خلال العملية بأكملها ، خطوة بخطوة ، مع مثال واحد. يتم تغطية كل شيء من الترميز الأساسي إلى إجراء تصميمات متوافقة مع المتصفحات.
على أساس يومي - إذا كنت تسمع عن كثب - يمكن سماع الصرخات حول العالم من المبرمجين الذين حاولوا دون جدوى فرض التصميم في موضعه. انها ليست مجرد مسألة تعلم اللغة ؛ التحفيظ مهمة سهلة. تحدث نقاط حث الصراخ عند عرض موقعك في عشرة متصفحات مختلفة ، مما يؤدي إلى عرض موقعك على مستويات مختلفة من الاتساق.
يفترض الكتاب أن لديك معرفة أساسية بالعمل في CSS و HTML ، بالإضافة إلى تصميم تم إنشاؤه بالفعل في Photoshop. التصميم المستخدم في الكتاب بسيط ، ولكن يمكن بسهولة تطبيق المفاهيم المستخدمة لإنشاء التصميم على تصميمات أكثر تعقيدًا.
يبدأ الكتاب بقسم حول كيفية النظر إلى التصميم قبل الغوص في عملية إنشاء كود HTML.
في حين أنه قد يبدو من الطبيعي البدء في العمل على صور موقعنا على الفور ، إلا أن هذا لا يمكن أن يكون أبعد عن الحقيقة. بدلاً من ذلك ، يجب علينا أولاً بناء قاعدتنا ، أو ترميزها ، وفقط بعد اكتمالها ، يمكننا الانتقال إلى العناصر المرئية.
يتضمن القسم ثلاثة أقسام أساسية تحتوي على: رأس ، ومنطقة المحتوى الرئيسية ، وتذييل ، ثم يقفز الكتاب مباشرة إلى عملية إعداد ملف HTML الأساسي. مرة أخرى ، أي شخص لديه معرفة أساسية بـ HTML لن يواجه مشكلة مع هذا الجزء.
بمجرد اكتمال شفرة HTML الأساسية الخاصة بك ، من Photoshop إلى HTML تغطي كيفية تقسيم ملفات .PSD الخاصة بك.
خذ لحظة للنظر إلى التصميم في Photoshop. حاول تحديد كل صورة ستكون مطلوبة. تذكر ، يمكن إعادة إنشاء الميزات باستخدام CSS ؛ لذلك كن مبدعا.
بينما يتم ذكر كلتا الطريقتين لتقطيع ملفاتك ، يستخدم الكتاب مزيجًا من الاقتصاص والقص واللصق لالتقاط الصور التي ستحتاج إليها ، بدلاً من استخدام أداة الشريحة.
كلا الطريقتين صالحة تماما. أوصي بأن تجرب كليهما ، وأن تختار أيهما يثبت أنه الأسرع ... لك.
تتم تغطية اختصارات لوحة المفاتيح لتسريع هذه العملية بالتفصيل. حفظ هذه الصور للويب ، بما في ذلك جميع الإعدادات التي يجب أن تستخدمها وأي نوع من أنواع ملفات الصور لاستخدامها لأنواع الصور ، تتم مناقشته أيضًا على نطاق واسع ، كما هو الحال مع CSS sprites. وأخيرًا وليس آخرًا في هذا القسم ، توجد بعض الملاحظات على التعديلات التي ستحتاج بعد ذلك إلى ملف HTML استنادًا إلى صور الخلفية المستخدمة.
بعد أن تصبح صفحات HTML والصور جاهزة ، حان وقت الغوص في CSS لموقعك. تتم إعادة ضبط إعدادات المستعرض وتغطيتها بالتفصيل ، بالإضافة إلى كيفية إعادة إنشاء ملف CSS افتراضي قياسي.
يستخدم كل متصفح جزءًا صغيرًا من "CSS الافتراضي" لتمييز الترميز تلقائيًا. للوهلة الأولى ، قد تعتقد أن هذا مفيد للغاية ... إذا قام كل متصفح بتنفيذها بشكل مطابق ، فلن يكون ذلك مشكلة. للأسف، ليست هذه هي القضية.
هناك عدد من مبادئ CSS ، بما في ذلك المواقع النسبية مقابل المطلقة والأشكال CSS ، والتي يتم تغطيتها بطريقة عملية وقابلة للاستخدام. بالنسبة لأولئك الذين ليسوا خبراء في CSS ، ستكون هذه الأقسام مفيدة بشكل خاص ، بينما قد يرغب هؤلاء الأشخاص في تخطي هذه الأجزاء. وهناك جزء آخر رائع من شفرة CSS يغطي كيفية إنشاء تذييلات لاصقة ، وهو أمر يمكن أن يكون محبطًا لمصممي CSS الجدد.
تتم تغطية ترميز الصفحات الإضافية خارج صفحتنا الرئيسية ، بما في ذلك كيفية إجراء تعديلات طفيفة على التخطيط والمحتوى ، وما ستحتاج إلى إضافته إلى ملفات CSS. عند الانتهاء من هذا القسم ، ستحصل على جميع قوالب الصفحات الضرورية لموقع الويب الذي يعمل بكامل طاقته.
يغطي الفصل المنتظم الأخير في الكتاب كيفية جعل التصميم المتقاطع الخاص بالتصميم متوافقًا ، خصوصًا عندما يتعلق الأمر بالمتصفحات القديمة مثل Internet Explorer 6 و 7. أحد أهم المشكلات التي تمت تغطيتها هو نقص معالجة الشفافية في الصور في IE6 ، مع مجموعة متنوعة من الحلول للتغلب عليها.
عرض موقعك على الويب في Internet Explorer 7 والإصدارات الأقل لأول مرة سيجعلك تذلل. قد تكون محظوظًا ، لكن في معظم الأحيان ، ستجد العديد من المشكلات التي تحتاج إلى إصلاح.
يعرض لك قسم المكافأة في النهاية كيفية إنشاء تأثيرات انتقالية jQuery ، والتي يتم دمجها في تصميم الموقع. لأي شخص جديد إلى JavaScript و jQuery ، إنه مشروع مثير للاهتمام يعلم بعض التقنيات الأساسية.
بشكل عام ، إذا كنت تقوم بالاستعانة بمصادر خارجية لتحويل ملفات .PSD إلى HTML ، أو إذا كنت ترغب في تجربة تصميم مواقع الويب في Photoshop ، فإن هذا الكتاب يستحق القراءة بالتأكيد.
مع التعليمات الكاملة خطوة بخطوة والتي يمكن تطبيقها بسهولة على العديد من المشاريع وأطنان من كود المثال ، من Photoshop إلى HTML تأكد من أنك بدأت في تحويل التصميمات الخاصة بك. مع قليل من الممارسة ، يمكن استخدام المفاهيم المشمولة على أي تصميم تقريبًا!
كما يأتي الكتاب مع الملفات المصدر للموقع الذي تم إنشاؤه ، والذي يمكنك استخدامه في مشاريعك الخاصة كما تشاء.
مكتوبة حصرا ل WDD من قبل كاميرون تشابمان .
ما رأيك في هذا الكتاب؟ يرجى اعلامنا في منطقة التعليقات ...