طراحی صفحات وب مقدماتی

ایجاد ارتباط میان صفحات وب : انواع لینک دهی به صفحات

ایجاد ارتباط میان صفحات وب

ایجاد ارتباط میان صفحات وب

این نوشته با عنوان “ایجاد ارتباط میان صفحات وب : انواع لینک دهی به صفحات ” گرفته شده از کتاب طراحی صفحات وب مقدماتی (جلد اول) است که توسط پایگاه کتاب های درسی منتشر شده است.

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

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

دستورات ایجاد ارتباط میان صفحات وب

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

الف) ایجاد پیوند یا لینک: منظور از پیوند که ترجمه مختصری از ابرپیوند یا Hyperlink به شمار می رود، ایجاد یک متن یا تصویر است. که وقتی اشاره گر ماوس روی آن می رود، به شکل یک دست در حال اشاره در می آید. و کاربر با کلیک روی آن می تواند به یک نشانی دیگر منتقل شود. این نوع پیوند با استفاده از برچسب <a> پیاده سازی می گردد.

ب) برقراری ارتباط با منبع خارجی: در بخش های ابتدایی این بحث هنگام معرفی برچسب  <head >و آشنایی با عناصر قابل درج در آن، با برچسب <lin> آشنا شدید. از این برچسب برای برقراری ارتباط میان صفحه با یک منبع خارجی استفاده می شود.

برچسب <a>

در بحث ایجاد ارتباط میان صفحات همان گونه که پیش از این اشاره شد، این برچسب برای ایجاد پیوند به کار می رود. نام این برچسب از واژه anchor به معنی لنگر گرفته شده و انواع پیوندهای قابل پیاده سازی با آن عبارتند از:

  • پیوند به یک وبسایت در اینترنت
  • پیوند به صفحه ای در وبسایت جاری
  • پیوند به یک نقطه در صفحه جاری
  • پیوند به یک نشانی پست الکترونیکی
  • پیوند به یک فایل تصویری، صوتی، چند رسانه ای و غیره
  • پیوند از نوع نقشه تصویری یا Map Image

ایجاد ارتباط میان صفحات وب با پیوند به یک وبسایت

مبحث پیوند به یک وبسایت در اینترنت در میان بحث های ایجاد ارتباط میان صفحات وب، برای ایجاد پیوند به یک وبسایت با ساختار زیر مورد استفاده قرار می گیرد.

<a href= “وبسایت نشانی < “text </a>

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

<a href=” https://www.no-yad.ir/”>موسسه فرهنگی هنری اندیشه نگاران شیز <a>

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

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

ایجاد ارتباط میان صفحات وب

گاهی اوقات لازم است این ویژگی تغییر داده شود تا صفحه ای که روی نشانی آن کلیک شده در پنجره مستقلی به نمایش در بیایید. برای مثال فرض کنید در صفحه اول یک وبسایت خبری هستید و تنظیمات نمایش صفحه جدید روی حالت پیشفرض است. به این ترتیب با کلیک روی تیتر هر خبر، صفحه اول وبسایت که حاوی لیست اخبار است ناپدید خواهد شد و امکان بازکردن همزمان چند صفحه از بین می رود.

برای تغییر این ویژگی باید از مشخصه target استفاده و آن را با _ blank مقدار دهی کنید.

<html>

<head>

<title>پیوند</title>

</head>

<body dir=”rtl”>

<a href=”http://www.medu.ir” target=”_blank”>پرورش و آموزش وزارت وبسایت</a>

</body></html>

ایجاد ارتباط میان صفحات وب

مقدار مشخصه target به صورت پیشفرض _ self است که صفحه را در پنجره جاری باز می کند. برای این مشخصه، مقادیر _ parent  و _ top هم قابل تعریف است.

ایجاد ارتباط میان صفحات وب

پیوند به صفحه ای در وبسایت جاری

گونه دیگر ایجاد ارتباط میان صفحات پیوند به صفحه ای در وبسایت جاری است. فرض کنید صفحه اول یک وبسایت index.htm نام دارد و صفحه محصولات با نام  products.htm دقیقا در کنار آن قرار گرفته است.

اگر بخواهیم در صفحه اول وبسایت، پیوندی را به صفحه محصولات ایجاد کنیم کافی است در مشخصه href،  نشانی صفحه محصولات را نسبت به صفحه اصلی، به صورت زیر درج نماییم:

<a href=”products.htm”> محصولات ما</a>

ایجاد ارتباط میان صفحات وب

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

<a href=” pages/products.htm”> محصولات ما</a>

حالت دیگری که برای آدرس دهی نسبی متصور است، ایجاد پیوند در صفحه ای که درون یک پوشه قرار دارد به صفحه ای دیگر است که در سطح بالاتری قرار گرفته است. فرض کنید می خواهیم درون صفحه products.htm که درون پوشه pages واقع شده، پیوندی به صفحه اول وبسایت ایجاد کنیم. کد زیر روش ایجاد این پیوند را نشان می دهد.

<a href=”../index.htm”> محصولات ما</a>

پیوند به نشانی پست الکترونیک

نوع دیگر ایجاد ارتباط میان صفحات پیوند به نشانی پست الکترونیک است. در برخی وبسایت ها، صفحه یا پیوندی با عنوان «تماس با ما» وجود دارد که کاربر با کلیک روی آن می تواند برنامه ارسال پست الکترونیک را احضار نموده و به نشانی درج شده در نوار نشانی آن، پیغامی را ارسال کند تا به دست مدیران وبسایت برسد.

برای ساخت این نوع پیوندها هم از برچسب <a> استفاده می شود اما باید مقدار مشخصه href را به صورت زیر تنظیم کنید تا پیغام الکترونیک به صورت صحیحی ایجاد و ارسال گردد.

<a href=”mailto:info@no-yad.ir/?cc= noyadmagazine@gmail.com&bcc=info@ no-yad.ir &subject=Web Design Book&body=Ba%20Salam”> ما با تماس </a>

تنظیمات اراسل ایمیل

در مشخصه href ابتدا باید عبارت :mailto را درج و سپس نشانی مورد نظر برای ارسال پیغام الکترونیک را قید کنید. با اضافه کردن یک علامت سؤال می توانید نشانی های cc و bcc را که برای ارسال رونوشت پیغام به سایر نشانی ها کاربرد دارند اضافه نمایید. افرادی که نشانی آنها در بخش cc درج شده، نشانی سایر دریافت کنندگان پیغام را مشاهده می کنند اما در مورد نشانی های bcc این مسأله صادق نیست و در واقع یک رونوشت مخفی برای آن ها فرستاده می شود. توجه داشته باشید که باید این بخش ها را با علامت &  از هم جدا نمایید.

در بخش subject هم می توانید عبارتی را به صورت پیشفرض به عنوان موضوع پیغام درج نموده و نهایتا در بخش body یک عبارت را به عنوان متن اولیه وارد کنید. نکته قابل توجه در مورد متن اولیه ای که در بخش body قرار می گیرد این است که کلمات موجود در این عبارت باید با علامت 20 % که نویسه فاصله خالی در مرورگر محسوب می شود از هم جدا شوند. با کلیک روی عبارتی که درون برچسب <a> قرار گرفته، برنامه ارسال پست الکترونیک (که در سیستم عامل های ویندوز معموال Outlook است) باز شده و پنجرهای با تنظیمات فوق برای ارسال ایمیل در اختیار کاربر قرار می دهد.

چنانچه کاربر تنظیمات اولیه برای راه اندازی نرم افزار Outlook Express را انجام نداده باشد، ابتدا ویزارد تنظیم این نرم افزار ظاهر می گردد. با توجه به رایج نبودن استفاده از نرم افزارهای تحت ویندوز برای مدیریت پیغام های الکترونیک در کشور ما، اغلب طراحان ترجیح می دهند در صفحه «تماس با ما» بخشی را برای نگارش متن و ارسال آن به یک نشانی تعبیه کنند تا کاربر با پیچیدگی های ارسال ایمیل از طریق نرم افزارهای موجود درگیر نشود.

ایجاد ارتباط میان صفحات وب

برچسب <link>

در بخش های قبل هنگام بررسی اجزاء موجود در بخش<head > با برچسب <link> تا حدی آشنا شدید. از این برچسب برای برقراری ارتباط میان صفحه وب و یک منبع خارجی استفاده می شود. این منبع خارجی می تواند یک فایل CSS برای سبک دهی به عناصر موجود در صفحه یا یک فایل حاوی کدهای جاوا اسکریپت برای اجرای عملیاتی خاص روی صفحه باشد. در کد زیر سه نمونه از کاربردهای این برچسب را مشاهده می کنید.

<link rel=”stylesheet”type=”text/css” href=”includes/main.css” />

<link rel=”javascript” type=”text/javascript” href=”../codes/script.js”>

<link rel=”shortcut icon”type=”image/x-icon” href=”/favicon.ico” />

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

ایجاد ارتباط میان صفحات وب

برچسب <link >حاوی مشخصه های زیر است:

مشخصهکارکرد
relرابطه میان صفحه جاری و سند پیوند شده را تعیین می کند
typeنوع سند پیوند شده را مشخص می نماید
hrefنشانی محل قرارگیری سند مرتبط را نشان می دهد

 

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

در نوع دیگر ایجاد ارتباط میان صفحات پیوندهایی که با برچسب <a>  ایجاد می شوند فقط مختص عبارات متنی نیستند و می توان سایر عناصر موجود در یک صفحه وب مانند تصاویر و انیمیشن ها را نیز تبدیل به پیوند کرد تا کاربر با کلیک بر روی آن ها به نقطه مورد نظر هدایت شود.

با جستجوی تصویری مانند آرم شبکه آموزش در موتور جستجوی گوگل، آن را در پوشه images  در کنار صفحه وبی که در حال کار بر روی آن هستید ذخیره کنید. این کار با راست کلیک روی تصویری که در مرورگر ظاهر شده و انتخاب گزینه As picture Save امکان پذیر است. حال می خواهیم بر روی این تصویر پیوندی قرار دهیم تا کاربر با کلیک روی آن به نشانی این شبکه منتقل شود. برای تبدیل یک تصویر به پیوند باید درون برچسب <a > به جای عبارات متنی، برچسب <img > را قرار دهیم.

<P> برای ورود به سایت روی تصویر زیر کلیک کنید </P>

<a href=”http://www.tv7.ir” target=”_blank”>

<img src=”images/amoozesh.jpg” alt=” ” آموزش شبکه />

</a>

 

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

ایجاد ارتباط میان صفحات وب

تصاویر بزرگ و کوچک

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

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

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

ایجاد ارتباط میان صفحات وب

برای ایجاد چنین صفحه ای می توانید تصاویر اصلی را درون پوشه large از پوشه images قرار داده و سپس با استفاده از نرم افزارهای ویرایش تصویر مانند فتوشاپ، تصاویر کوچک شده را نیز تولید و در پوشه small  ذخیره نمایید. در ادامه یک جدول با تعداد خانه های مناسب به صفحه اضافه نموده و مطابق کد صفحه بعدی، تصاویر کوچک را درون خانه های آن قرار دهید. مقدار دهی مشخصه border با عدد صفر باعث ناپدید شدن خطوط جدول می شود.

ایجاد ارتباط میان صفحات وب

نحوه اعمال دستور

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

<table width=”500” border=”0” cellpadding=”10”>

<tr>

<td>

<a href=”images/large/hemmat-01.jpg”>

<img src=”images/small/hemmat-01. jpg “ alt=”1 -همت شهید”/>

</a>

</td>

<td>

<a href=”images/large/hemmat-02.jpg”>

<img src=”images/small/hemmat-02. jpg “ alt=”2 -همت شهید “/>

</a>

</td>

<td>

<a href=”images/large/hemmat-03.jpg”>

<img src=”images/small/hemmat-03. jpg “ alt=”3 -شهیدهمت “/>

</a>

</td>

</tr>

</table>

کد فوق در مرورگر به صورت زیر نشان داده می شود.

ایجاد ارتباط میان صفحات وب

بازگشت به لیست

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *