تقسیم طرح کلی سایت به قطعات کوچکتر
برای ایجاد یک سایت اینترنتی پس از تعیین هدف و ساختار کلی تا پیاده‌سازی نهایی و آپلود کردن آن در سایت، چندین مرحله باید طی شود، اما یکی از این مراحل، طراحی یک رابط گرافیکی (قالب) زیبا و جذاب و در عین حال سبک برای نگه‌داشتن بیننده است.
رابط گرافیکی صفحات وب به این دلیل باید سبک باشد که بیننده نباید برای دیدن صفحه وب شما معطل شود. البته امروزه در برخی از سایت‌های خارجی با توجه به مخاطبان آنها که اکثرا از اینترنت‌های پرسرعت استفاده می‌کنند، حتی از انیمیشن‌های طولانی و پرحجم فلش نیز استفاده می‌شود. اما متاسفانه در کشور ما هنوز اینترنت بر سرعت همه‌گیر نشده است. بنابراین لازم است که رعایت حال بیننده خود را بکنید. وقتی پای طراحی گرافیکی صفحات به میان می‌آید، یکی از نرم‌افزارهایی که در این زمینه حرف اول را می‌زند. فتوشاپ است. همانطور که می‌دانید این امکان در Image Ready قرار داشت اما از CS2، در خود فتوشاپ می‌توانید از امکانات Image Ready استفاده نمایید.
طبیعتا وقتی برای وب طراحی می‌کنید. یک صفحه کامل را با تمامی عناصر آن در نظر گرفته و طرح خود را ایجاد می‌کنید. اما مساله اینجاست که در وب صفحه شما باید به قطعات کوچکتری که هر کدام کارآیی خاص خود را دارد جدا شود.
در برخی قسمت‌های صفحه شما متن قرار می‌گیرد که آن قسمت‌ها باید بتواند مجزا از سایر قسمت‌ها باشد. ممکن است در بعضی قسمت‌ها رنگ یکنواختی را به کار برده باشید. پس برای کم کردن حجم صفحات نباید برای آن قسمت از صفحه از یک تصویر استفاده کنید. بلکه باید از قابلیت‌های HTML برای ایجاد یک خانه جدول رنگی استفاده کنید. همینطور اگر در قسمت‌هایی از صفحه یک الگوی تصویری تکراری وجود دارد. بهتر است فقط آن الگو را به صورت یک فایل تصویری به صفحه وب خود بدهید و در طراحی HTML آن صفحه، آن تصویر را تکرار کنید.
ابزار SLice
ابزار Slice که در جعبه ابزار فتوشاپ قرار دارد. مخصوص قطعه، قطعه کردن طرح شما است بعد از اینکه صفحه وب خود را به طور کامل طراحی کردید. باید با استفاده از این ابزار به طور هوشمندانه، طرح خود را به قطعات مناسبی تقسیم کنید. البته برای تقسیم قطعات، بهتر است بدانید که چگونه می‌خواهید از این قطعات در صفحات HTML خود استفاده کنید. و طبیعتا لازمه آن دانستن چگونگی ایجاد صفحات وب است که در این مقاله نمی‌گنجد. در اینجا فقط قصد دارم به طور مختصر چگونگی کار این ابزار را در فتوشاپ برای شما توضیح دهم.
بعد از اینکه طرح خود را با استفاده از این ابزار به قطعات مشخصی تقسیم کردید. می‌توانید با استفاده از همین ابزار بر روی هر قطعه دابل کلیک کنید تا در پنجره Slice Option مشخصات آن قطعه را مشاهده کنید یا تغییر دهید. در لیست Slice Type در پنجره Slice Option، نوع قطعه را تعیین می‌کنید. اگر می‌خواهید یک خانه خالی در صفحه وب خود در آن قطعه داشته باشید، باید No lmage را انتخاب کنید. در همین پنجره در قسمت Name، نام آن قطعه را نیز تعیین می‌کنید. فتوشاپ از این نام برای نامگذاری فایل‌های تصویری که برای صفحات شما ایجاد می‌کند، استفاده خواهد کرد اگر می‌خواهید تصویر آن قسمت از صفحه شما، به صورت یک لینک برای صفحات دیگر باشد، یعنی بتوانید با کلیک بر روی آن به صفحه دیگری بروید. باید در قسمت URL، آدرس آن صفحه را وارد کنید.
اگر بخواهید می‌توانید ابعاد قطعه مورد نظر خود را به طور دقیق در قسمت Dimensions تغییر دهید و در قسمت Slice Background Type نوع پس زمینه قطعه را مشخص می‌کنید. اگر در فتوشاپ لایه Background نداشته باشید و قسمت‌هایی از قطعه شما شفاف باشد. انتخاب None از این لیست، باعث می‌شود که تصویری با پس زمینه شفاف، برای قطعه شما ایجاد شود در غیر این صورت بسته به گزینه‌ای که انتخاب می‌کنید، یک پس زمینه رنگی جایگزین نقاط شفاف و نیمه شفاف تصویر شما خواهد شد البته این به شرطی است که فرمت مناسبی را برای آن قطعه در هنگام ایجاد صفحه وب انتخاب کنید که در زیر راجع به آن توضیح خواهم داد.
بعد از اینکه گزینه‌های مربوط به همه قطعات طرح خود را تنظیم کردید. باید از منوی File گزینه Save for Web and Devices را انتخاب کنید. در پنجره‌ای که باز خواهد شد گزینه‌های بیشتری برای هر کدام از قطعات خود خواهید داشت. با ابزار Slice Select می‌توانید یک یا چند قطعه را با گرفتن کلید Shift انتخاب کنید و در سمت راست صفحه فرمت فایل خروجی مربوط به آن قطعه یا قطعات را تعیین کنید. صفحات وب سه فرمت GIF، JPEG، و PNG را می‌توانند در خود داشته باشند. هر کدام از این فرمت‌ها ویژگی‌های خود را دارند و باید در جای مناسب خود استفاده شوند تا صفحه وب شما حجم کمتر و کیفیت بهتری داشته باشد.
در پنجره Save For Web and Devices فرمت WBMP را نیز می‌توانید برای قطعات خود انتخاب کنید که یک فرمت تک رنگ مخصوص گوشی‌های تلفن همراه است.
بعد از اینکه فرمت هر یک از قطعات تصویری خود را انتخاب کردید با کلیک روی دکمه Save، نام و مکان فایل‌های خروجی خود را تعیین می‌کنید. اگر نوع خروجی خود را در لیست Save as type ،HTML and Image، و All Slices را از لیست Slices انتخاب کرده باشید. یک فایل HTML و یک دایر کنوری شامل قطعات تصویری شما که در این فایل HTML به کار رفته‌اند، ایجاد خواهد شد. البته می‌توانید با تغییر این گزینه‌ها، فقط فایل تصویری قطعات انتخابی یا فقط HTML را ایجاد کنید.
حسین نوری
