منظور از پیوند گرافیكی ساده در اینجا همون منو گرافیكی هست كه در اغلب وب سایت ها حتما دیدید . بعضی از اون ها قابلیت Rollover رو هم دارن و خلاصه اینكه از افكت های ویژه ایی برای تزیین پیوندها استفاده می كنند .

Rollover هم همون جور كه مطلع هستید یه مكانیزم برای نشان دادن اینكه چیزی فعال است ، می باشد و یك پیوند Rollover هم پیوندی است كه در بعضی مدها ، معمولا با یك رنگ یا تغییر شكل ، وقتی موس كاربر روی آن قرار می گیرد فعال می شود . فكر نكنم كسی تا به حال این جور پیوندی ندیده باشه . چون استفاده از اون ها تحت وب آن قدر رایجه كه به صورت كلیشه ای در آمدند .

این مكانیزم برای یه پیوند معمولی متنی خیلی ساده است و از توضیح اون خودداری می كنیم . در عوض در این تمرین ، این مكانیزم رو برای یك پیوند گرافیكی تشریح می كنیم . اما قبل از اون باید بگم كه پیوندهای گرافیكی یه چندتا عیب اساسی دارن ؟ اول اینكه وقتی بهینه می شوند ، می توانند روی زمان دریافت تاثیر بگذارند ، به خصوص وقتی كه همراه با Rollover باشند . دوم اینكه پیوندهای متنی در مقایسه با این مدل حجم و اندازه خیلی كمتری خواهند داشت . بنابراین من توصیه می كنم از این پیوندها خیلی كم استفاده بشه .

اما وقتی اصرار فردی كه دارین واسش وب طراحی می كنید ، در طراحی این چنین منوهایی ، بالای سرتون باشه مجبور هستید . اما باز هم راه حل هایی داره . من ترجیح می دم در این موارد به CSS متوسل بشم چون اون می تونه تا حدودی كار رو حل كنه . هر چند با جاوا اسكریت هم این كار عملیه . اما قابلیت های CSS در این مورد مخفی نیست . برای مقایسه ما هر دو صورت رو در این تمرین پیاده می كنیم .

اول با استفاده از جاوا اسكریپت . این كد جاوا اسكریپت نسبتا به سادگی نوشته می شود ، و در ابتدا فقط نیازمند تصاویری جهت بارگذاری است و پشتیبانی از شی JavaScript Image باید وجود داشته باشد . كد زیر این rollover پایه را نشان می دهد : ادامه مطلب …

چتر ها را باید بست ، زیر باران باید رفت . فكر را ، خاطره را زیر باران باید برد . با همه مردم شهر ، زیر باران باید رفت . دوست را ، زیر باران باید دید . عشق را زیر باران باید جست . زیر باران باید با زن خوابید . زیر باران باید بازی كرد . زیر باران باید چیز نوشت ، نیلوفر كاشت. [ صدای پای آب ]

یه دو سه روزه هوا این ورا عجیب بارونیه . الان هم بد جور شدت گرفته . ولی مشكل اینجاست كه وقتی نمی باره مدام می گیم ای خدا كاش می شد یه بارون درست حسابی می اومد وقتی هم كه میاد این می شه سر و وضع شهر . از یه طرف برق مدام قطع و وصل می شه ، از طرف دیگه هم ملت بارون ندیده با ماشین با این آب های جمع شده عشق می كنن كه البته حق هم دارن ! و بیشتر از اون عابران پیاده ! اینجاست كه باید گفت عشق را ، زیر باران باید جست . :wink:

در HTML قدیمی و حتی CSS اصلی ، انتخاب قلم بر روی وب بسیار محدود شده است . طراحان غالبا به قرار دادن متن درون فرم تصویری متوسل می شوند تا بتوانند یك قلم غیر استاندارد را در صفحه استفاده كنند . ولی این راه حل بهینه نیست . خوشبختانه ، فروشنده های عمده مرورگرها شروع به پشتیبانی از قلم های قابل دریافت یا به اصطلاح Downloadable Font از اینترنت كرده اند .

راه حل مایكروسافت Open Type نامیده می شود و از نگارش 4 در اینترنت اكسپلرر ساخته شده است . مرورگرهای نت اسكیپ 4.x از فناوری قلم معمولی به صورت بومی استفاده كردند . متاسفانه مرورگرهای اپرا ، 6.7 نت اسكیپ و موزیلا 1 قلم های قابل دریافت از اینترنت را در بر نمی گیرند ، بنابراین استفاده از قلم در پلت فرم های مختلف می تواند دشوار باشد .

فناوری مایكروسافت تنها روش معقول برای گذاشتن قلم ها در صفحه وب است . برای اضافه كردن یك قلم ، اول باید با استفاده از عنصر <font> یا قوانین شیوه نامه كه قلم هایی متعلق به شما را نصب می كند یك صفحه بسازید . وقتی صفحه تان را ساختید ، در مورد اینكه آیا كاربر نهایی قلم نصب شده دارد یا خیر نگران نباشید ، زیرا خودش از اینترنت دریافت خواهد شد .

سپس از Microsofts Web Embedding Font Tool (WEFT) كه در اینجا در دسترس است برای تحلیل كاربرد قلم بر روی صفحه استفاده كنید . این برنامه باید یك فایل .eot كه شامل قلم های جایگزین شده می باشد را ایجاد كند . سپس ، اطلاعات استفاده از قلم را به صفحه و به شكل قوانین CSS كه در CSS2 به طور اساسی تعریف شده اند اضافه كنید ، همان گونه كه در زیر نشان داده شده است : ادامه مطلب …

همان گونه كه در پست های قبلی متوجه شدید CSS جایگزینی برای نمایش مبتنی بر HTML پیشنهاد می كند و اكنون به وسیله ی انجمن طراحی وب پذیرفته شده است . سازگاری css نیازمند برخی تغییرات از سوی تولید كنندگان وب است . css بسیار حساس به نحو دستوری است ، و اشتباهات كوچك می توند باعث شكست كامل یك قانون css شود . بنابراین ، طراحان باید از مشخصات آن آگاه باشند . ( یك ارزیابی كننده آنلاین برای CSS در اینجا وجود داره كه می تونید طرح خودتون رو با استانداردها مقایسه كنید )

متاسفانه ، حتی اگر از قوانین پیروی كنید ، خطاهای آشكاری در پیاده سازی مرورگرهای پیشرفته وجود دارد . چیزهای زیادی وجود دارد كه باید درباره ی CSS بدانید ، و امكانات جدید هر لحظه اضافه می شود . CSS1 تعیین اولین شیوه نامه ، بیش از 50 خاصیت را تعریف می كند ، و CSS2 بیش از 50 خاصیت دیگر را . CSS2 تسهیلات تغییر مكان كه CSS-P نامیده می شود را به وجود آورده است . نگارش جدید كه CSS3 نام دارد قصد دارد امكانات ارائه بیشتری را به وجود آورد ، و با فناوری های دیگر ، نطیر اسكریپت و گرافیك های برداری ، بیشتر یكپارچه شود .

مهم است به خاطر داشته باشید كه HTML اساس و پایه ی یك صفحه وب است . CSS در واقع ، به طور مستقیم به استفاده صحیح از عناصر HTML یا XHTML استناد می كند . ولی ، اگر به كد ناهنجاری محدود شده باشند لزوما به طور قابل پیش بینی ای كار نمی كنند .

هر چند واضح است كه می خواهیم به برچسب های منطقی معنی بدهیم ، ولی مواظب باشید كه این به شما مجوز نمی دهد از CSS به جای كد HTML استفاده كنید . قوانینی كه ارائه محدود برخی برچسب ها را تغییر می دهند نباید به كار روند . برای مثال در اینجا باعث می شویم كه برچسب های <b> به طور غیر معمولی عمل كنند و تمام اشكال تزئینی پیوندها را حذف نمایند :

b {font-style:italic; font-weight:normal;}
a {text-decoration:none; color: black; }

ادامه مطلب …