ایجاد لوگوی حمایتی برای سایت یا وبلاگ در فتوشاپ و html
قبل از پرداختن به لوگوهای مثلثی و جاوا اسکریپتی، به جهت آسان تر بودن مطلب، اجازه دهید ابتدا به لوگوهای معمولی و نحوه نمایش کد آنها در باکس های html بپردازیم؛ بدین منظور ابتدا یک تصویر به عنوان لوگوی سایت یا وبلاگ خود با اندازه پیکسلی مشخص (بستگی به سلیقه و قالب صفحه شما داد) مثلا 120 در 80 پیکسل، در برنامه های طراحی و گرافیک نظیر فتوشاپ بسازید، سعی کنید در کم ترین فضا بیشترین جذابیت را ایجاد نمایید که این امر تا حدود زیادی سلیقه ای است و بستگی به مهارت شما دارد، آنگاه تصویر مورد نظر خود را که در فتوشاپ ساخته اید، در یک سرور آنلاین یا در یک سرویس رایگان میزبان فایل، آپلود کنید، این کار بدین منظور نیاز است که در وب معمولا تنها تصاویر و فایل هایی قابل استفاده هستند که بر روی سرورها میزبانی شوند و با آدرسی مشخص (url) در دسترس باشند، آنگاه آدرس و تنظیمات خاص لوگوی خود را در نمونه زیر جایگزین کنید.
<a href="http://www.yoursite.com" title="عنوان سایت یا وبلاگ شما" target="_blank"><img src="http://www.yourfile.com/file/image-logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0" /></a>
توضیح:
- تگ a و href برای ایجاد یک لینک (hyperlink) در صفحات وب (html) به کار می روند که در اینجا هم باید آدرس سایت یا وبلاگ خود را جایگزین عبارت http://www.yoursite.com کنید.
- تگ img برای نمایش یک تصویر در وب به کار می رود، وقتی این تگ را بین a قرار می دهیم، در واقع لینکی به آن تصویر متصل می کنیم، در قسمت http://www.yourfile.com/file/image-logo.jpg آدرس کامل تصویر لوگوی سایت یا وبلاگ خود را قرار دهید، دقت کنید این آدرس زمانی درست خواهد بود که اگر آن را در نوار آدرس مرورگر کپی نمائید، تصویر مورد نظر نشان داده شود.
- قسمت مربوط به border را برابر صفر قرار دهید، در برخی از مرورگرها برای تصاویری که لینک می شوند، نواری آبی رنگ دور آنها به عنوان پیش فرض نشان داده می شود، برای از بین بردن آن، میزان border را صفر در نظر بگیرید.
- موارد مربوط به ارتفاع (height) و عرض (width) را، با توجه به اندازه پیکسل لوگوی خود، تغییر دهید.
ایجاد باکس برای نمایش و کپی کد لوگو
تا اینجا لوگو و کد نمایش آن را ساختیم، اما اگر بخواهیم کاربران از آن استفاده کرده و لوگو را در وبلاگ یا سایت خود به دیگران نشان دهند، باید از باکس هایی برای درج کد با امکان کپی برداری استفاده کنیم، در اینجا ما هم روش عادی و ساده را خواهیم گفت و هم شیوه ای که در آن با استفاده از جاوا اسکریپت، قابلیت انتخاب خودکار تمام کد برای کپی راحت تر را اضافه کرده و کار خود را حرفه ای تر جلوه می دهیم.
برای ایجاد یک باکس ساده و قرار دادن کد داخل آن، جهت کپی و استفاده کاربران، از دو تگ textarea و input می توان استفاده کرد، تفاوت این دو تگ، در تنظیمات متفاوت و ظاهر آنها است، در نمونه های زیر این کار را برای لوگوی فرضی بالا انجام داده ایم.
روش استفاده از تگ input
<input type="text" height="25" width="120" dir="ltr" value='<a href="http://www.yoursite.com" title="عنوان سایت یا وبلاگ شما" target="_blank"><img src="http://www.yourfile.com/file/image-logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0" /></a>' />
توضیح:
- در قسمت مربوط به ارتفاع (height) و عرض (width)، مقادیر مورد نظر خود را به پیکسل درج کنید.
- dir و ltr چینش کد داخل باکس را به صورت چپ به راست تنظیم می کند (rtl آن را از راست به چپ نمایش می دهد).
- دقت کنید که برای value از علامت ' ' به جای " " استفاده کرده ایم و کد را درون آن قرار داده ایم، اگر از علامت " " استفاده کنید، دچار مشکل خواهید شد و کد شما به جای نمایش به صورت ساده، به عنوان قسمتی از صفحه پردازش می شود و به درستی نشان داده نخواهد شد.
- ممکن است بخواهید بین لوگو و کد آن فاصله یا خط ایجاد کنید، برای این منظور از تگ های br و hr در html می توانید استفاده کنید.
روش استفاده از تگ textarea
از تگ textarea برای درج یا نمایش متن در فُرم های وب (html) استفاده می شود، در زیر ما این کار را برای نمایش کد لوگوی خود انجام داده ایم.
<textarea cols="20" rows="2" dir="ltr"><a href="http://www.yoursite.com" title="عنوان سایت یا وبلاگ شما" target="_blank"><img src="http://www.yourfile.com/file/image-logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0" /></a></textarea>
توضیح:
- همانطور که می بینید، textarea تفاوتهایی با input دارد، در اینجا از cols و rows به جای width و height برای عرض و ارتفاع باکس، استفاده می شود.
- مقدار value در textarea وجود ندارد و به جای آن باید کد را بین تگ های textarea قرار دهیم.
- در آموزش مقدماتی html گفتیم که تقریبا تمام تگ ها، می توانند از استایل css استفاده کنند، در اینجا هم اگر نیاز به تنظیمات بیشتر دارید، می توانید از تگ style استفاده کنید.