بنر بالای مطالب

banner

ایجاد لینک در DreamWeaver CS5

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

link-to

یکی از قسمتهای مهم وب سایت که تقریبا بدون آن دسترسی به محتوای وب سایت غیر ممکن خواهد بود لینک می باشد . فرض کنید که یک وب سایت ، لینک برای متصل کردن صفحات بهم نداشته باشد چه اتفاقی می افتد ؟ مجبور خواهیم بود که به صورت دستی آدرس هر صفحه را در سرچ بار وارد کنیم که اینکار غیر ممکن است . من امروز می خواهم روش و ایجاد لینک در نرم افزار دریم ویور را به صورت کامل برای شما آموزش بدهم .
نرم افزار DreamWeaver CS5 را اجرا کنید .

تگ لینک در HTML به شکل زیر می باشد ، اگر بخواهیم به صورت دستی لینک را وارد کنیم باید به شکل زیر تایپ شد .

<a href="/لینک صفحه مقصد"  target="مشخص می کنیم که لینک به چه صورت باید باز شود "> Link Name</a>


در نرم افزار DreamWeaver CS5 از چند طریق می توانیم برای ایجاد لینک اقدام کنیم  که در ادامه به طور کامل هر قسمت را برای شما شرح میدهم . فرآیند ایجاد لینک در DreamWeaver CS5 بسیار کار ساده ای می باشد . بدون داشتن هیچ اطلاعات در زمینه کد نویسی می توانید لینک دلخواه خودتان را به صفحات داخلی و خارجی ایجاد کنید .

1. فرض کنید می خواهید یک قسمت از متن صفحه یا یک لینک از منوی اصلی را به یک صفحه داخلی یا خارجی لینک بدهید . برای انجام اینکار کافیست قسمت مورد نظر را انتخاب کرده و بر روی پوشه Browse For File در پنل Properties کلیک کنید . کافیست صفحه مورد نظر را انتخاب و بر روی کلید OK کلیک کنید .

در کادر ID و Class می توانید یک سلکتور برای لینک ایجاد کنید تا بوسیله آن تغییرات مورد نظر خودتان را در CSS اعمال نمایید .
در کادر Link آدرس صفحه ای که به آن لینک داده ایم نمایش داده می شود .
در کادر Title یک نام برای لینک تایپ کنید تا وقتی ماوس روی آن قرار میگرد نمایش داده شود .
از لیست کشویی target می توانید 5 حالت را برای لینک انتخاب کنید که به شرح زیر می باشد .
مقدار ویژگی target مشخص می کند که شما می خواهید صفحه ی جدید (که در href مشخص کرده اید ) درون همین صفحه ای که در آن قرار دارید باز شود  یا صفحه ای جدید
target می تواند یکی از این مقادیر را بپذیرد :
blank_ :در پنجره ای جدید باز می شود .
new_ : در صفحه جدید
self_ : در همین پنجره ای که پیوند در آن قرار دارد باز می شود .
parent_ : درframeset مادر باز می شود .
top_ : در تمام طول پنجره باز می شود .

tutorial-dreamweaver1


tutorial-dreamweaver2


tutorial-dreamweaver3

2. یک روش فوق العاده دیگه هم وجود داره که من بیشتر از این روش استفاده میکنم و آن هم آیکون Point To File هست . روش کارش به چه صورت هست ؟ شما آیکون را انتخاب می کنید و با درگ آن را متصل می کنید به یک صفحه از وب سایت در حال ساخت که در پنل Properties داره نمایش میده . برای درک بهتر به تصویر دقت کنید .

tutorial-dreamweaver4


3. روش سوم هم استفاده از منوی Insert و انتخاب گزینه Hyperlink می باشد . بعد از انتخاب گزینه مشخص شده یک صفحه برای تنظیمات باز میشه . در قسمت نام لینک بعد از انتخاب به صورت اتوماتیک ایجاد می شود . در قسمت Link هم می توانید به صورت دستی هم با کلیک بر روی آیکون Brows صفحه مورد نظر را انتخاب کنید . دو کادر بعدی هم در مرحله قبلی توضیح داده شده است

tutorial-dreamweaver5


tutorial-dreamweaver6


ایجاد لینک داخلی در DreamWeaver CS5
در بعضی از مواقع احتیاج داریم که بین محتوای یک صفحه لینکی قرار بدهیم تا کاربر یا بازدید کننده نیاز نباشد برای عناوینی که در ابتدای صفحه نوشته شده است کل محتوای یک صفحه را بخواند یا با اسکرول ماوس صفحه را جابجا کند . به این نوع لینک Named Anchor گفته می شود . روش کار برای ایجاد چنین لینکی در DreamWeaver CS5 بسیار ساده می باشد .
فرض کنید 20 عدد ماوس با توضیحات در یک صفحه درج شده است که بازدید کننده فقط می خواهد توضیحات مربوط به ماوس مورد نظر را مشاهده کند . ابتدا نام ماوس را در ابتدای صفحه تایپ میکنم .

tutorial-dreamweaver7


حال می خواهم وقتی کاربر روی ماوس تسکو کلیک کرد ، فقط توضیحات مربوط به همان ماوس در هر کجای صفحه نمایش داده شود .
در مرحله بعدی توضیحات ماوس تسکو را انتخاب و در تب Insert بر روی آیکون Named Anchor کلیک میکنم . دقت کنید که قبل از توضیحات یا هر کجای متن مورد نظر یکبار کلیک کرده و بعد از ان بر روی آیکون مورد نظر کلیک کنید . به تصویر زیر دقت کنید متوجه می شوید

tutorial-dreamweaver8


یک صفحه باز می شود . باید در کادر Named Anchor یک نام را به دلخواه برای این قسمت انتخاب کنید . سعی کنید نامی انتخاب شود که مربوط به لینک مورد نظر باشد . در این کادر از علامت نمی توانید استفاده کنید . دقت داشته باشید که آیکون مورد نظر در صفحه مرورگر نمایش داده نمی شود

tutorial-dreamweaver9

tutorial-dreamweaver10


حالا هر دو قسمت ایجاد شد . ابتدا لینک در اول صفحه اضافه شد و در مرحله بعد با استفاده از Named Anchor آیکون به قسمت مورد نظر .
برای ارتباط این دو قسمت به هم ابتدا متن 'ماوس تسکو' را سلکت کنید

tutorial-dreamweaver11


به قسمت توضیحات تسکو رفته و با استفاده از آیکون Point To File یک ارتباط بر روی آیکون Named Anchor ایجاد کنید .
به تصویر دقت کنید تا بهتر متوجه شوید

tutorial-dreamweaver12

به همین راحتی بین عناصر صفحه ارتباط برقرار شد

tutorial-dreamweaver13


 

آخرین بروز رسانیجمعه, 01 خرداد 1394 15:55

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا