تحجيم الصور لنشرها على الوب

إعداد- رحاب زناتي rehab_zanaty@hotmail.com عزيزي القارئ· توقفنا في الحلقة السابقة عند إدراج صورة في منطقة الصورة التي خصصها مصممو دريم ويفر في الصفحة المنشأة بناء على تصميمات CSS ، وفي هذه الحلقة سوف نقوم بعمل التعديلات، فتابع معنا: أولاً: تحجيم الصورة قبل أن نتعرف إلى كيفية تحجيم الصـورة، ينبغي أن نعرف شيئاً، وهو أن تحجيم الصورة داخل برنامج دريم ويفر لا يعني أن حجم ملف الصورة قد صغر فعلاً، أي أن المستعرض Browser الذي يستخدمه الزائر لموقعك سيضطر هو أيضاً إلى تحجيم الصورة ممــا يؤدي إلى بطء تحميل الموقع، لذا فمن الأفضل أن تحجم الصورة في برنامج تحرير صور مثل Photoshop أو Fireworks . لقد أدرجنا الصورة في الحلقة السابقة، وهذه الصورة غالباً سيكون حجمها أكبر أو أصغر (ولو بنسبة قليلة) من منطقة الصورة، ولتغيير حجمها تابع التالي: ·1 انقر الصورة كي يتم تحديدها، وبتحديدها تظهر يمينها وأسفلها (مقابض التحجيم resize handles) وهي نقاط مربعات سوداء صغيرة كما بالشكل رقم (1): ·2 نفذ التالي كي تقوم بتحجيم الصورة: -اسحب بالماوس المقبض الموجود يمين الصورة كي تغير حجم عرض Width الصورة· - اسحب بالماوس المقبض الموجود أسفل الصورة كي تغير حجم طول Height الصورة· - اسحب بالماوس المقبض الموجود بالركن السفلي للصورة كي تغير الطول والعرض معاً· - أما إذا أردت الحفاظ على تناسب الطول مع العرض أثناء التحجيم فاضغط مفتاح Shift أثناء سحب المقبض الموجود بالركن السفلي للصورة· وبإمكانك أيضاً تغيير حجم الصورة من خلال خصائص الصورة properties ، وذلك بكتابة حجم العرض في خانة W ، وحجم الارتفاع في خانة H، كما بالشكل رقم (2)، وهناك بعض الحالات التي تضطرك إلى ذلك مثل تصغير حجم الصورة لدرجة كبيرة، فالتحجيم اليدوي لن يقلل الحجم عن 88 بكسل، فإن أردت ما هو أصغر الجأ إلى خصائص الصورة· لاحظ إن أردت استعادة الحجم الأصلي للصورة (بعد أن قمت بحفظ التغييرات عليه) يمكنك فعل ذلك في أي وقت بالنقر على رمز (استعادة الحجم reset size ) من خصائص الصورة، وهو (السهم الموجود على شكل دائرة) بين خانتي h و W كما في الشكل رقم (2)· ثانياً: التعامل مع الصورة في لوحة الملفات عزيزي القارئ· لقد افترضنا سوياً من أول حلقة في هذه المقالات أننا نتعرف إلى دريم ويفر لأول مرة، وقلنا إننا سنتعرف إلى مجموعة اللوحات في حينها، فتعال نتعرف الآن إلى لوحة الملفات File Panel بعدما أضفنا الصورة للصفحة· ·1 اعرض لوحة الملفات لتشاهد كل مجلدات وملفات الموقع، وذلك بضغط مفتاح F8 أو بفتح قائمة (نافذة Window) ثم اختيار (ملفات Files ) فتظهر لوحة الملفات في مقدمة مجموعة اللوحات كما بالشكل رقم (3): ·2 ولاحظ أنه إذا كانت مجموعة اللوحات ظاهرة أساساً في يمين النافذة، فما عليك إلا النقر فوق اسم لوحة الملفات Files كي تظهر هي في المقدمة· ·3 في القائمة الموجودة بأعلى لوحة الملفات، يظهر اسم المجلد الذي حفظنا فيه الموقع وهو (رحاب الإسلام)، وتظهر أسفل منه كل الملفات الموجودة به، وهذه الملفات أنشأها البرنامج عندما أنشأنا نحن صفحة باستخدام تصميمات CSS الجاهزة· ·4 لاحظ أن معظم هذه الملفات الموجودة للآن ملفات صور، وهي التي استخدمها دريم ويفر في تصميم الصفحة الجاهزة، وبجوار كل صورة يظهر اسمها وامتدادها، وستجد الصورة التي أدرجتها تقف معهم وهي في الشكل رقم (3) باسمAlaqsa.1jpg . ثالثاً: إنشاء مجلد لحفظ الصورة على الرغم من أننا لم ندرج شيئاً في الموقع بعد، إلا أنك ترى أن معظم الملفات الموجودة به هي ملفات صور، وهذه الملفات ستكون بالعشرات كلما زادت صفحات الموقع، مما سيضيع منك وقتاً كثيراً أثناء البحث عنها للتعامل معها، لذا فمن الأفضل أن ننشئ مجلداً نسميه (صوراً) فنضع به الصور والرسومات التي سنستخدمها بالموقع، ولعمل ذلك تابع معنا ما يلي: ·1 قف بالماوس عند المجلد الذي تريد إنشاء مجلد فرعي منه، وهو هنا المجلد الرئيسي (الوحيد للآن) رحاب الإسلام· ·2 انقر بزر الماوس الأيمن، فتظهر قائمة اختر منها (مجلد جديد New Folder) كما بالشكل رقم (4): سيظهر مجلد جديد اسمه (بدون عنوان Untitled) وسيكون المؤشر في وضع الكتابة لتكتب اسمه، وسنسميه في مثالنا (صور) ثم نضغط بعدها (Enter) أو ننقر بعيداً عنه بالماوس كي يتم تسميته· وبهذا عزيزي القارئ، نكون قد غيرنا حجم الصورة، وتعرفنا على خصائصها بشكل سريع ومبدئي، وأنشأنا مجلداً كي نضع فيه كل صور الموقع، فتابعنا في الأعداد القادمة كي نكمل تعديل الموقع، ونتعرف على المزيد من التفصيلات في برنامج دريم ويفر·