آموزش طراحی وب سایت - مقدماتی - قسمت چهارم
آموزش طراحی وب سایت - مقدماتی - قسمت چهارم
در این جلسه آموزشی طراحی وب سایت مباحث زیر مطرح می شود : تصاویر در وب سایت ، افزودن تصویر ، افزودن تصویر پس زمینه ، افزودن کادر به تصویردر وب سایت ، تراز کردن تصویر با متن ، افزودن خط جداکنندۀ افقی .
جلسه جهارم :
در این جلسه از آموزش طراحی وب سایت مباحث زیر مطرح می شود :
- تصاویر در وب سایت
- افزودن تصویر
- افزودن تصویر پس زمینه
- افزودن کادر به تصویردر وب سایت
- تراز کردن تصویر با متن
- افزودن خط جداکنندۀ افقی
- ایجاد لیستی از تصاویر
- خلاصه جلسه
تصاویر در وب سایت
صفحات وب سایتی که تنها شامل متون هستند، چندان جذاب به نظر نمی رسند. تصاویر، یکی از پرکاربردترین عناصر در صفحات وب سایت محسوب می شوند. استفادۀ مناسب و صحیح از تصاویر، باعث زیبایی و کارایی بهتر صفحات وب سایت می شود. از طرف دیگر، استفادۀ بی رویه از تصاویرف باعث کندی صفحات در هنگام انتقال از سرور به مرورگر می شود، که این مسئله ممکن است باعث انتظار و خستگی بازدید کنندگان سایت شود. در این فصل، نحوۀ کار با تصاویر را بررسی خواهیم کرد.
در HTML برای افزودن تصویر به صفحه از تگ IMG ، به همراه ویژگی SRC=’’?’’ استفاده می شود. به جای ? باید مسیر نسبی و نام فایل تصویری را قرار داد. این تگ دارای تگ پایان نیست.
توجه: دقت نمایید که مسیر فایل تصویری را به صورت نسبی اعلام نمایید. مثلاً از دادن مسیرهایی به صورت C:/Website/Images/Calvin.gif که فقط به کامپیوتر شما وابسته است، خودداری نمایید.
در مورد مسیرهای مطلق و نسبی دانستن نکات زیر، بسیار ضروری است:
- مسیرهایی مانند مسیرهای مطلق نامیده می شوند و نباید برای آدرس دهی در صفحات سایت استفاده شوند.
- اگر صفحۀ وب سایت شما در مسیر و فایل در مسیر قرار دارد، برای ارجاع به فایل در این صفحه باید از مسیر نسبی به صورت استفاده نمایید.
- اگر صفحۀ وب سایت و فایل، هر دو در یک مسیر قرار دارند، برای ارجاع به تصویر فقط باید نام فایل را به صورت اعلام نمایید.
اگر صفحه شما در مسیر جاری و نام فایلی که می خواهید به آن ارجاع دهید، در یک پوشه بالاتر از آن قرار دارد، باید قبل از مسیر آن از ../ استفاده نمایید که به معنی یک پوشه بالاتر می باشد. مثلاً فرض کنید صفحۀ شما در مسیر C:/ Inetpub/wwwroot/mysite/products/ و فایل bg.jpg در مسیر C:/Inetpub/wwwroot/mysite/ قرار داشته باشد، در این صورت برای ارجاع به این فایل باید از مسیر نسبی ../bg.jpg استفاده نمایید.
مثال: دستور زیر تصویری با نام 1.jpg را که در مسیر جاری قرار دارد، به صفحه اصلی اضافه می نماید.
اگر این تصویر در زیر پوشۀ Images از پوشۀ جاری قرار داشته باشد، به صورت زیر نوشته می شود.
باید دقت نمایید که فقط از تصاویر GIF ، JPEG و PNG برای این منظور استفاده نمایید. این قالب های تصویری، بهترین کارایی را در صفحات وب سایت دارند. تا حد امکان سعی نمایید از تصایری با ابعاد کوچکتر استفاده نمایید، تا زمان انتقال آن در اینترنت کاهش یابد. برای کار با تصاویر، مانند کاهش اندازه و یا تغییر قالب آن، از نرم افزارهایی موجود در این زمینه مانند Paint Shop Pro, Photoshop و Image Ready استفاده نمایید.
نکته: برای تعیین اندازه عرض و ارتفاع تصویر، از ویژگی WIDTH=’’?’’ و HEIGHT=’’?’’ استفاده نمایید. به جای ? عددی برحسب پیکسل قرار دهید.
مثال: نمایش تصویری به عرض 80 و ارتفاع 60 پیکسل.
IMG SRC=¢¢Calvin.gif¢¢ WIDTH=¢¢80¢¢ HEIGHT=¢¢60¢¢
نکته: ممکن است بعضی از مرورگرها از تصاویر پشتیبانی نکنند و یا ممکن است کاربر به خاطر بالا بردن سرعت دستیابی به صفحات، قابلیت نمایش تصاویر در مرورگر خود را غیرفعال کرده باشد، در اینگونه موارد، طراح سایت باید متنی را به عنوان جایگزین برای تصویر موردنظر تعیین نماید. برای این منظور باید از ویژگی ALT در تگ IMG استفاده نمود.
افزودن تصویر پس زمینه
برای افزودن تصویر پس زمینه برای یک صفحۀ وب سایت، از خصوصیت BACKGROUND در تگ BODY استفاده نمایید. تصویر پس زمینه با تصاویری که با ویژگی SRC از تگ IMG اضافه می شوند، متفاوت است. تصویر پس زمینه، تصویر کوچکی است که به صورت کاشی وار تمام صفحه را پر می کند. با توجه به اینکه افزودن تصویر پس زمینه به یک صفحه، زمان نمایش آن را مرورگر افزایش می دهد، تا حد امکان از ابعاد تصویری کوچکتری برای این منظور استفاده نمایید. هر چند این ویژگی از طریق اغلب مرورگرها پشتیبانی می گردد، ولی روش بهتر برای ایجاد آن، استفاده از شیوه نامه است.
مثال:
توجه: نوع تصویری که برای پس زمینه صفحه انتخاب می نمایید، بسیار مهم است. این تصویر نباید خوانایی محتویات صفحه را کاهش دهد. تا حد امکان از تصاویر محو، برای این منظور استفاده نمایید.
افزودن کادر به تصویر
برای افزودن کادر به دور یک تصویر، باید از ویژگی BORDER در تگ IMG استفاده نمود. در مواردی افزودن کار به تصویر، باعث بهبود نمایش ظاهری آن خواهد شد. در ویژگی BORDER=’’?’’ باید به جای ? عددی را برحسب پیکسل جهت ضخامت کادر معین نمود. در صورتی که بخواهیم تصویر بدون کادر نمایش یابد، این عدد را برابر 0 قرار می دهیم. هر چند این ویژگی از طریق اغلب مرورگرها پشتیبانی می گردد، ولی روش بهتر برای ایجاد کادرها، استفاده از شیوه نامه است.
wrap کردن متن در اطراف تصویر
در صورتی که در یک صفحه، هم متن و هم تصویر در کنار یکدیگر باشند، در حالت معمول به صورت متوالی نمایش می یابند و هیچ عمل wrappingای اتفاق نمی افتد. به عبارت دیگر متن در اطراف تصویر نمایش نمی یابد، بلکه قبل یا بعد از آن نمایش داده می شود. برای wrap کردن متن در اطراف تصویر باید از ویژگی ALIGN=’’?’’ در تگ IMG استفاده نمود. به جای ? یکی از مقادیر left یا right را قرار دهید. در صورتی که می خواهید تصویر در سمت چپ متن قرار گیرد از left و در صورتی که می خواهید تصویر در سمت راست متن قرار گیرد، از right استفاده نمایید.
مثال: در این دستورات، متون موجود در صفحه، در اطراف راست تصویر sky.jpg قرار می گیرند.
متون صفحه IMG SRC=¢¢sky.jpg¢¢ ALIGN=¢¢left¢¢
نکته: اگر بخواهید در قسمتی از متن، عمل wrapping را متوقف کنید، از ویژگی CLEAR=’’?’’ در تگ BR در آن نقطه از متن استفاده کنید. به جای ? یکی از مقادیر left ، right و یا all را قرار دهید. مقدار all عمل wrapping از هر دو سمت تصویر را متوقف می سازد.
نکته: در بعضی موارد ممکن است بخواهید به جای افزودن کادر به تصویر، از فضای خالی در اطراف تصویر استفاده نمایید. برای این منظور می توانید از ویژگی HSPACE=’’?’’ و VSPACE=’’?’’ در تگ IMG استفاده نمایید. به جای ? عددی برحسب پیکسل برای تعیین ضخامت فاصله قرار دهید. ویژگی HSPACE برای ایجاد فضای هالی در اطراف چپ و راست تصویر و ویژگی VSPACE برای ایجاد فضای خالی در اطراف بالا و پایین تصویر کاربرد دارد. البته در این مورد استفاده از شیوه نامه مناسب تر است.
تراز کردن تصویر با متن
وقتی یک متن و یک تصویر در کنار هم نمایش می یابند، می توان تعیین کرد که متن از لحاظ عمودی، با قسمت بالا، پایین و یا وسط تصویر تراز گردد. برای این منظور باید از ویژگی ALIGN=’’?’’ در تگ IMG استفاده کرد. به جای ? باید یکی از مقادیر top ، bottom و یا middle را قرار داد. حالت پیش فرض در مرورگرها، تراز با قسمت پایین تصویر است.
توجه: در صورتی که یک تصویر را با متن تراز کرده باشید، نمی توانید عمل wrapping متن با تصویر را انجام دهید و برعکس.
افزودن خط جداکنندۀ افقی
با استفاده از تگ HR می توانید خط جداکنندۀ افقی به صفحۀ خود اضافه کنید. این تگ دارای تگ پایان نیست. یکی از کابردهای خط جداکننده، تقسیم کردن بخش های مجزاء در یک صفحه می باشد. معمولاً توصیه می شود که در یک صفحه از بیش از دو خط جداکننده استفاده نشود. در اینگونه موارد بهتر است صفحه را به دو صفحۀ جداگانه تجزیه کرد.
نکته:
1. ضخامت خط جداکنندۀ افقی به صورت پیش فرض، به اندازۀ دو پیکسل است که با استفاده از ویژگی SIZE=’’?” می توان ضخامت آن را تغییر داد. به جای ? عددی برای تعین اندازه ضخامت، قرار دهید.
2. طول خط جداکنندۀ افقی به صورت پیش فرض به اندازه کل عرض صفحه است، که با استفاده از ویژگی WIDTH=’’?’’ می توان اندازه آن را تغییر داد. به جای ? عددی به صورت درصد برای تعیین طول خط افقی قرار دهید. مثلاً مقدار 50% طول خط افقی را برابر نصف عرض صفحه تنظیم می کند.
3. خط جداکنندۀ افقی به صورت پیش فرض با افکت سه بعدی نمایش داده می شود. در صورتی که نخواهید آن را با افکت سه بعدی نمایش دهید، باید از ویژگی NOSHAD استفاده نمایید.
ایجاد لیستی از تصاویر
برای زیباتر شدن جلوۀ ظاهری لیست ها، به جای استفاده از بولت می توان از تصاویر نیز استفاده کرد. به عنوان مثال ممکن است بخواهید از طریق سایت شرکت، لیستی از محصولات شرکت خود را بر روی وب سایت ارائه نمایید، به طوری که در کنار نام هم محصول به جای علامت بولت، آرم شرکت شما قرار گرفته باشد. در هر صورت باید در نظر داشته باشید، تصویر با تصاویری که برای این منظور انتخاب می کنید، کوچک و در اندازۀ یک آیکون باشد.
برای ایجاد لیستی از تصاویر، می توانید از تگ UL که قبلاً یاد گرفتید، استفاده نمایید. در این تگ از تگ IMG برای ایجاد تصاویر استفاده نمایید. برای ایجاد سطر جدید از تگ BR در ابتدای هر سطر استفاده کنید. برای تراز کردن تصویر با متن کنار آن، چنانکه پیشتر گفتیم، باید از ویژگی ALIGN=’’?’’ در تگ IMG استفاده کنید. به جای ? یکی از مقادیر top ، bottom و یا middle را قرار دهید.
مثال :
نکته: برای ایجاد فاصله بین تصویر بولت و متن کنار ان، از ویژگی HSPACE=’’?’’ در تگ IMG استفاده کنید. به جای ? ، عددی جهت تعیین فاصله قرار دهید.
در این فصل در مورد نحوۀ به کارگیری تصاویر در صفحات وب سایت به کمک تگ های HTML مطالبی آموختید. برای افزودن تصویر به صفحه در تصویر HTML از تگ IMG به همراه ویژگی SRC=’’?’’ استفاده می شود. به جای ? باید مسیر و نام فایل تصویری را قرار داد. این تگ، دارای تگ پایان نیست. قالب های تصویری مورد قبول عبارتند از: GIF ، JPEG و PNG .
برای افزودن تصویر پس زمینه برای یک صفحۀ وب سایت، از خصوصیت BACKGROUND در تگ BODY استفاده نمایید. برای تعیین اندازۀ عرض و ارتفاع تصویر، از ویژگی WIDTH=’’?’’ و HEIGHT=’’?’’ استفاده نمایید.
برای افزودن کادر به دور یک تصویر باید از ویژگی BORDER در تگ IMG استفاده نمود. برای wrap کردن متن در اطراف تصویر باید از ویژگی ALIGN=’’?’’ در تگ IMG استفاده نمود. به جای ? باید یکی از مقادیر left یا right را قرار دهید. وقتی یک متن و یک تصویر در کنار هم نمایش می یابند، می توان تعیین کرد که متن از لحاظ عمودی، با قسمت بالا، پایین و یا وسط تصویر تراز گردد. برای این منظور باید از ویژگی ALIGN=’’?’’ در تگ IMG استفاده نمود. به جای ? باید یکی از مقادیر top ، bottom و یا middle را قرار داد.
با استفاده از تگ HR می توانید خط جداکنندۀ افقی به صفحۀ خود اضافه کنید. این تگ دارای تگ پایان نیست. یکی از کابردهای خط جداکننده، تقسیم کردن بخش های مجزاء در یک صفحه است. طول خط جداکننده افقی به صورت پیش فرض به اندازۀ کل عرض صفحه است که با استفاده از ویژگی WIDTH=’’?’’ می توان اندازۀ آن را تغییر داد. خط جداکنندۀ افقی به صورت پیش فرض با افکت سه بعدی نمایش داده می شود. در صورتی که نخواهید آن را با افکت سه بعدی نمایش دهید، باید از ویژگی NOSHAD استفاده نمایید.
برای ایجاد لیستی از تصاویر، می توانید از تگ UL استفاده نمایید. در این تگ از تگ IMG برای ایجاد تصاویر استفاده نمایید. برای ایجاد سطر جدید از تگ BR در ابتدای هر سطر استفاده کنید. برای تراز کردن تصویر با متن کنار آن، باید از ویژگی ALIGN=’’?’’ در تگ IMG استفاده کنید. به جای ? یکی از مقادیر top ، bottom و یا middle را قرار دهید.