عنوان : آموزش کامل طراحی سایت (متخصصین ایران)- درس سه
متخصصین ایران طراحی سایت

مدیریت پیوندها: کار با HyperLink

 

برچسب a

با استفاده از برچسب a قبل از یک متن مشخص یا یک تصویر می توان هایپر لینک را ایجاد کرد.

 

ویژگی href

ویژگی href مهمترین ویژگی برچسب a است که آدرس مقصد لینک را نشان می دهد.

 

از هایپرلینک درون پاراگراف ها و برچشب های P می توان استفاده کرد.

 

 


مفهوم url مطلق و نسبی

در قطعه کد بالا من به سایت خودم لینک داده ام. به بخش اول برگردیم. فرض کنید صفحه اصلی سایت من index.htm نام دارد.

1- فرض کنید در پوشه sub یک صفحه با نام icdl.htm ذخیره شده است. فرض کنید من می خواهم در صفحه اصلی با کلیک روی آموزش ICDL صفحه icdl.htm بارگذاری شود. دور راه برای من وجود دارد. استفاده از url مطلق:

 

راه دوم استفاده از url نسبی است. برای این کار ویژگی href به صورت زیر کدنویسی می شود.

 

 

 

 

 

 

2- فرض کنید بخواهیم در صفحه index.htm با کلیک روی دکمه بروزرسانی صفحه بروزرسانی شود. به عبارت دیگر باید به خود صفحه لینک بدهیم. روشهای کدنویسی به دو صورت زیر خواهد بود:

 

مزیت url نسبی

 

 

با استفاده از url نسبی طراح سایت می تواند در حالت offline صفحات طراحی شده را مشاهده کند. در ضمن آدرس دهی بسیار ساده تر و کوتاه تر خواهد بود. از url مطلق تنها در صورتی استفاده کنید که بخواهید به یک سایت دیگر آدرس دهی کنید.

 

3. فرض کنید در پوشه sub یک صفحه با نام about.htm و یک صفحه با نام icdl.htm وجود دارد. در این تمرین می خواهیم در صفحه about یک لیست بسازیم که به همه این صفحات به روش نسبی لینک بدهد. به کدهای زیر توجه کنید:

 

 همانطور که ملاحظه می کنید در لینک سوم از /.. استفاده شده است. اگر به یک صفحه خارج از پوشه حاضر آدرس دهی شود آن پوشه نسبت به پوشه حاوی صفحه موجود sub folder نباشد برای آدرس دهی از /.. استفاده می شود.

 

 

4. فرض کنید در پوشه img یک عکس به نام Rose.gif وجود دارد. از صفحه flower.htm در پوشه sub می خواهیم یک لینک به این عکس ایجاد کنیم:

 

با این مثال مفهوم /.. بهتر روشن گردید.

 

 

 

ایجاد لینک دانلود

در تمرین 4 مشاهده شد که به یک عکس لینک داده شده است. وقتی شما به تصاویر یا صفحات اینترنتی لینک می دهید چون مرورگر می تواند آنها را کدگشائی و اجرا کند صفحات و تصاویر در مرورگر به نمایش در خواهند آمد. بسیار مشاهده کرده اید که در سایتها با کلیک روی download یک فایل را دانلود کرده اید. برای ساخت لینک دانلود همه چیز خیلی ساده است.

دانلود پک فونت فارسی

فرض کنید پک فونت فارسی را با نام fonts.zip در پوشه any ذخیره شده است. از کد زیر استفاده خواهد شد:

 

 

 

 

تفاوت upload و download

به عنوان یک کاربر همیشه به دنبال لینک دانلود فایلهای موسیقی، مقاله و ... هستید. بارها شده بعد از مدتها یک لینک دانلود پیدا کرده اید و بعد مدام برای دانلود این صفحه آن صفحه شده اید تا سرانجام آن لینک جادوئی پیدا شده است.

شما به عنوان یک طراح با مشکلی به نام upload مواجه هستید. شما فضای محدودی دارید و برای هر مگابایت فضای اینترنتی برای سایت خود باید پول بپردازید حالا اگر بخواهید یک فایل 20 مگابایتی را برای دانلود قرار دهید دیگر نمی توانید آنرا در فضای سایت خود قرار دهید تا دیگران آنرا دانلود کنند.

برای حل این مشکل به سراغ سایتهای Uplaod رایگان بروید. سایت rapidshare یکی از معروف ترین این سایتها است و بعد از upload فایل شما به شما یک url که محل ذخیره فایل شما در فضای سایبر است را خواهد داد. برای همین است که شما در صفحه دانلود آموزش ICDL سایت من باید به رپیدشر رجوع کنید.

سایتهای rapidshare, 4shared, tinypic, 2shared از مهمترین سایتهای upload فایل هستند. یک طراح مداوم باید لینک هایش را با upload و download در اختیار کاربران قرار دهد. تجزیه و تحلیل بحث به عهده خودتان.

 

مفهوم active, Hover و Visited

زمانیکه نشانگر ماوس روی یک لینک قرار گیرد عملیات hover اتفاق می افتد. به طور پیش در اثر hover لینک تغییر شکل می دهد.

وقتی یک بار روی لینکی کلیک کنید عملیات visited اتفاق می افتد یعنی این لینک بازدید شده است.

زمانیکه هم برای متن یا تصویری لینک بسازید آن قطعه متن یا تصویر حالت active خواهد داشت.

با این ویژگیها می توان برای برچسب a برنامه نویسی کرد. این بحث را در قسمت CSS پیگیری خواهیم کرد.

 

ایجاد لینک برای تصاویر

 بهتر است این قسمت بعد از بخش پنجم که مهارت کار با تصاویر است مطالعه شود.

فرض کنید بخواهید کاربر را با کلیک روی یک عکس به صفحه اصلی سایت ارجاع دهید.

کدهای عملیات مطابق زیر است:

 

اگر در کد بالا از border="0" استفاده نشود یک کادر آبی نچندان جذاب به دور عکس ظاهر می شود.

 

ویژگی Target

اگر روی لینک خانه بالا کلیک کنید مشاهده می شود که صفحه ارجاع شده در یک صفحه جدید باز می شود. چون از کد target="_blank" استفاده شده است. اگر از این ویژگی استفاده نشود صفحه ارجاع شده جایگزین صفحه جاری خواهد شد.

 

ایجاد لنگر

اگر بخواهید به قسمت از صفحه جاری ارجاع دهید از لنگر استفاده می شود. مشاهده نمونه

ابتدا به خطی که می خواهید به آن ارجاع شود یک id منحصربه فرد تخصیص دهید:

 

سپس ویژگی href را در محل پیوند به آن id ارجاع دهید:

 

 

 

در ارجاع href به id حتما از علامت # (بخوانید شارپ) استفاده کنید.

پیگیر آموزش های طراحی سایت باشید 

 




نظر شما درباره این مطلب:




مطالب مشابه

2

آموزش کامل طراحی سایت (متخصصین ایران)- درس نخست


متخصصین ایران طراحی سایت

اساس آموزش طراحی سایت ارائه شده در این بخش .....


آموزش کامل طراحی سایت (متخصصین ایران)- درس نخست                  (اطلاعات بیشتر)

3

آموزش کامل طراحی سایت (متخصصین ایران)- درس دو


متخصصین ایران طراحی سایت

 

اصول درج متن

تابحال توانسته اید یک صفحه فارسی برای شروع کار تهیه کنید. حال برای نوشتن متن.....

 

 

 

 

 

 


آموزش کامل طراحی سایت (متخصصین ایران)- درس دو                  (اطلاعات بیشتر)

5

آموزش کامل طراحی سایت (متخصصین ایران)- درس چهار


متخصصین ایران طراحی سایت

معرفی تگ های متا

بدون شک وقتی اقدام به فراگیری طراحی سایت نموده اید آنقدر هوشمند...


آموزش کامل طراحی سایت (متخصصین ایران)- درس چهار                  (اطلاعات بیشتر)

6

آموزش کامل طراحی سایت(متخصصین ایران) - درس پنجم


متخصصین ایران طراحی سایت

طراحی جدول

به طور کلی از جدول برای طراحی فضای قالب وب...


آموزش کامل طراحی سایت(متخصصین ایران) - درس پنجم                  (اطلاعات بیشتر)

7

آموزش کامل طراحی سایت(متخصصین ایران) - درس شش


متخصصین ایران طراحی سایت

آموزش CSS

واژه CSS مخفف Cascade Style Sheets جهت طراحی انواع ...


آموزش کامل طراحی سایت(متخصصین ایران) - درس شش                  (اطلاعات بیشتر)

10

آموزش کامل طراحی سایت (متخصصین ایران)- درس نه


متخصصین ایران طراحی سایت

به عنوان یک طراح سایت باید توانائی کار با...


آموزش کامل طراحی سایت (متخصصین ایران)- درس نه                  (اطلاعات بیشتر)