آموزش طراحی وب سایت - قسمت پنجم

جلسه پنجم :

در این جلسه آموزشی  طراحی وب سایت  مباحث زیر مطرح خواهد شد :

• پیوندها در وب سایت

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

• ·ایجاد پیوند به نقطه ای در همان صفحه از وب سایت

• ایجاد پیوند به یک تصویر
• ایجاد پیوند به یک فایل
• ایجاد پیوند برای ارسال E-Mail
• FTP
• بازکردن پیوند در یک پنجره جدید
• تعیین رنگ پیوند در وب سایت
  
• تعریف کلید میانبر برای پیوند
• تعریف Tab Order برای پیوندهای صفحه
• خلاصه جلسه پنجم طراحی وب سایت
  

 

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

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

با استفاده از ویژگی HREE=’’?’’ در تگ A می توانید پیوندی به یک صفحۀ وب سایت  دیگر ایجاد نمایید. به جای ? باید آدرس URL صفحۀ موردنظر را جایگزین نمایید. این تگ با /A خاتمه می یابد. عنوان پیوند می تواند به صورت یک متن و یا یک تصویر ظاهر شود. هنگامی که کاربر در مرورگر خود بر روی عنوان پیوند کلیک می کند، به صفحه ای که شما تعیین کرده اید هدایت می شود. این صفحه می تواند از یک وب سایت  دیگر و یا صفحه ای از وب سایت  خودتان باشد.

در حالت باید آدرس کامل URL آن صفحه را وارد نمایید. مثلاً برای ایجاد پیوند به وب سایت شرکت مایکروسافت، باید آدرس http:/www.microsoft.com را وارد نمایید. در حالت دوم باید از آدرس URL نسبی استفاده نمایید. مثلاً اگر صفحه مربوط به لیست قیمت های شرکت شما با نام prices.htm در زیر پوشۀ Products از مسیر جاری ذخیره شده است باید آدرس URL نسبی را به صورت Products/prices.htm وارد نمایید. در این مورد، از وارد کردن مسیرهای کامل به شکل C:/WebSite/Products/prices.htm خودداری نمایید. چون اینگونه مسیرها فقط بر روی کامپیوتر شما معتبر بوده و پس از انتشار سایت بر روی اینترنت هیچ مفهومی نخواهند داشت.

مثال: ایجاد پیوندی با عنوان متنی " شرکت گسترش تجارت الکترونیک هایبرد "  به وب سایت شرکت هایبرد

مثال: ایجاد پیوندی با عنوان متنی View our products برای رفتن به صفحه ای از سایت شرکت خودتان که در مسیر Products/prices.html ذخیره شده است.

 

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

مثال: ایجاد پیوند تصویری برای رفتن به صفحه اصلی از سایت هایبرد .

نکته: در صورتی که از صفحه ای به صفحه دیگری در یک یا چند پوشه بالاتر، پیوند ایجاد می نمایید. به همان تعداد از علامت / … استفاده نمایید.

---

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

برای ایجاد پیوند باید دو مرحله اصلی زیر را انجام دهید:

1. لنگرگاه مورد نظر را ایجاد نمایید. برای این منظور از ویژگی NAME=”?” از تگ A در آن نقطه استفاده نمایید. به جای ؟ نام مناسبی برای لنگرگاه انتخاب نمایید. این نام باید فقط ترکیبی از حروف و ارقام باشد.

2. با استفاده از ویژگی HREF=”#?” از تگ A در هر کجا از صفحه که مایل بودید به شکلی که قبلاً یاد گرفتید، پیوندی به آن نقطه ایجاد نمایید. دقت نمایید که به جای ؟ باید نام آن لنگرگاه را که در مرحله قبل انتخاب نمودید، قرار دهید.

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

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

---

ایجاد پیوند به یک تصویر

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

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

مثال :

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

---

ایجاد پیوند به یک فایل

در صورتی که می خواهید به کاربر اجازه دهید فایلی را از روی وب سایت  سرور Download نموده و آن را به کامپیوتر خود انتقال دهد، نیاز به ایجاد پیوند به آن فایل خواهید داشت. به عنوان مثال می خواهید در صفحه خود پیوندی ایجاد نمایید، که کاربر با کلیک بر روی آن بتواند یک فایل game را به کامپیوتر خود انتقال دهد، یا ممکن است مقالاتی در قالب فایل های PDF داشته باشید که بخواهید آنها را در اختیار دیگران قرار دهید. با استفاده از ویژگی HERF=”?” در تگ A می توانید پیوندی به یک فایل ایجاد نمایید. به جای ؟ باید آدرس URL نسبی فایل مورد نظر را جایگزین نمایید. در صورتی که فایل در پوشه جاری قرار دارد، فقط نام فایل را وارد نمایید، اما اگر فایل در زیر پوشه(ها)ای از مسیر جاری قرار دارد، باید نام زیرپوشه(ها) و سپس نام فایل را ذکر کنید.

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

مثال:

توجه: واضح است که از تصویر نیز می توان برای عنوان پیوند استفاده نمود.

---

ایجاد پیوند برای ارسال E-Mail

شاید در هنگام گشت و گذار در اینترنت، به بعضی از پیوندها برخورد کرده باشید، که با کلیک بر روی آنها، می توانستید به سرعت پیغامی را به آدرس e-mail شخص مورد نظر ارسال نمایید. در اینگونه موارد معمولاً یک برنامه ارسال و دریافت e-mail مانند Outlook اجرا شده و به طور خودکار آدرس e-mail شخص مورد نظر را نمایش می دهد و به شما امکان می دهد که متن پیغام خود را تایپ و ارسال نمایید.

برای ایجاد پیوند e-mail در صفحه خود، از ویژگی HERF=”mailto : ?” در تگ A استفاده نمایید. به جای ؟ آدرس e-mail شخصی که می خواهید کاربر با کلیک بر روی پیوند به آن شخص mail بزند را وارد نمایید.

نکته: در هنگام ایجاد یک پیوند e-mail می توانید آدرس e-mail شخص دیگری که می خواهید یک کپی از آن پیغام را دریافت نمایید. این آدرس در قسمت cc] از برنامه ارسال e-mail ظاهر می شود. یکی از کاربردهای آن وقتی است که به عنوان مثال می خواهید هر پیغامی که دریافت می کنید، توسط مدیرتان نیز دریافت شود، بدون اینکه نیاز به ارسال آن به مدیرتان داشته باشید.

مثال:

نکته: هر e-mail می تواند دارای یک عنوان نیز باشد. شما می توانید در هنگام ایجاد یک پیوند e-mail موضوع پیش فرض آن را نیز تعیین کنید. در این صورت وقتی برنامه ارسال و دریافت e-mail اجرا می شود، موضوع مورد نظر در قسمت Subject از این برنامه نمایش داده می شود. این قابلیت برای دسته بندی e-mailهای رسیده برحسب موضوع آن، مفید است.

توجه: در صورتی که بخواهید همزمان هر دو قسمت Subject و Cc را مقداردهی نمایید، باید در بین آنها از علامت & استفاده کنید.

---

ایجاد پیوند به یک وب سایت FTP

بسیاری از سازمان ها، دانشگاه ها و مؤسسات، دارای یک وب سایت FTP بر روی اینترنت برای Upload و Download کردن فایل های هستند. شما می توانید پیوندی در صفحه خود برای ارجاع کاربر به یک وب سایت  FTP داشته باشید. وقتی کاربر بر روی یک پیوند FTP کلیک می کند، وب سایت  مورد نظر در مرورگر کاربر باز شده و کاربر می تواند از طریق پوشه Pub (یا Public ) به فایل های موجود در وب سایت  دستیابی پیدا نماید. یک وب سایت  FTP بسیار شبیه My Computer است. با این تفاوت که شما به جای مشاهده فایل ها و پوشه های کامپیوتر خود، فایل ها و پوشه های کامپیوتر سرور را ملاحظه خواهید کرد.

برای ایجاد پیوند به یک وب سایت  FTP در صفحه وب سایت ، باید از ویژگی HERF=”?” در تگ A استفاده نمایید. به جای ؟ باید آدرس وب سایت  FTP را که با ftp:// شروع می شود، وارد نمایید. به عنوان نمونه ای از چند وب سایت  FTP معروف، می توان ftp://cdrom.com و ftp://winsite.com را نام برد.

توجه: برای مشاهده لیست فایل های FTP ، به آدرس اینترنتی hoohoo.ncsa.uiuc.edu/ftp مراجعه نمایید.

مثال: 

نکته: اطلاعات سایت FTP بر روی کامپیوتری که FTP Server نامیده می شود، ذخیره می گردد. همان طور که می دانید ارتباط بین سرور و مرورگر از طریق یک پورت انجام می شود. اغلب FTP Serverها از پورت شماره 21 جهت ارتباط با مرورگر استفاده می کنند. در صورتی که FTP Server مورد نظر شما، از شماره پورت دیگری استفاده می کند، باید در هنگام ایجاد پیوند، شماره پورت را در ادامه آدرس FTP وارد نمایید و این دو را با علامت کالن (:) از هم جدا نمایید.

مثال: 

نکته: ممکن است برای دستیابی به یک سایت FTP ، نیاز به username و password داشته باشید. در این صورت باید در هنگام ایجاد پیوند بلافاصله بعد از ftp:// به ترتیب username یک علامت کالن (:)، password و علامت ( @ ) را وارد نموده و پس از آن، ادامه آدرس FTP را بنویسید.

مثال:

                                                                                                           

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

مثال :

---

بازکردن پیوند در یک پنجره جدید

در حالت پیش فرض وقتی کاربر بر روی یک پیوند کلیک می کند، صفحه مورد نظر در همان پنجره فعلی از مرورگر نمایش داده می شود. به طوری که کاربر می تواند با کلیک بر روی دکمه Back از مرورگر به صفحه قبلی برگردد. اگر می خواهید پیوندی ایجاد نمایید که کاربر با کلیک بر روی آن، صفحه وب سایت  مورد نظر را در یک پنجره جداگانه مشاهده نماید، باید از ویژگی TARGET=”?” در تگ A استفاده نمایید. به جای ؟ نامی برای پنجره جدید انتخاب نمایید. دقت نمایید که این نام، صرفاً جهت شناسایی پنجره از دید مرورگر بوده و ارتباطی با عنوان ظاهری پنجره ندارد. نام پنجره نسبت به حروف کوچک و بزرگ حساس است. از یک پنجره می توان برای چند پیوند نیز استفاده کرد.

مثال: ایجاد پیوند برای صفحه prices.html در یک پنجره جداگانه که به نام win نامگذاری شده است.

نکته: در صورتی که نمی خواهید برای پنجره جدید، نامی انتخاب نمایید، از ویژگی TARGET=”_blank” استفاده نمایید.

مثال: 

نکته: اگر می خواهید برای تمام پیوندهای یک صفحه، از یک پنجره جداگانه استفاده نمایید، از ویژگی TARGET=”?” در تگ BASE استفاده نمایید. این تگ باید بین HEAD و /HEAD قرار گیرد.

مثال

---

تعیین رنگ پیوند

شاید در هنگام ملاقات صفحات وب سایت ، به پیوندهایی با رنگ های مختلف مانند قرمز، آبی، سبز و غیره برخورد کرده باشید و از خود پرسیده باشید که علت متمایز بودن رنگ این پیوندها چیست؟ آیا تا به حال به این سوال پاسخ داده اید، که چگونه می توان در یک صفحه وب سایت ، رنگ پیوندهایی که کاربر قبلاً ملاقات کرده است را به رنگ دیگری، مثلاً سبز نمایش داد؟

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

×        Link : پیوندهایی که کاربر هنوز آنها را انتخاب نکرده است.

×        VLink : پیوندهایی که کاربر قبلاً آنها را انتخاب و ملاقات کرده است.

×        ALink : پیوندهایی که در حال حاضر، کاربر آنها را انتخاب کرده است.

شما می توانید برای هر دسته از پیوندهای نام برده، رنگ متمایزی را انتخاب نمایید. برای این منظور از ویژگی های Link=”?” ، VLink=”?” و ALink=”?”  در تگ BODY استفاده نمایید. به جای ؟ رنگ مورد نظر برای آن نوع پیوند را قرار دهید. این مقدار می تواند نام معادل رنگ و یا مقدار هگزادسیمال آن باشد.

مثال:

توجه: روش بهتر برای تعیین رنگ پیوندها، استفاده از شیوه نامه است.

---

تعریف کلید میانبر برای پیوند

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

با استفاده از ویژگی ACCESSKEY=”?” در تگ A می توانید برای پیوند در مورد نظر کلید میانبر تعریف کنید. به جای ؟ یک حرف و یا یک رقم قرار دهید. به عنوان مثال اگر به جای ؟ حرف T قرار دهید، باعث می شود تا کاربر بتواند با کلید میانبر ALT+T به پیوند مورد نظر دست یابد، البته بعد از دستیابی باید کلید ENTER را فشار دهد، تا صفحه مورد نظر را ملاقات نماید.

مثال: تعریف کلید میانبر ALT+T برای فعال کردن پیوندی به سایت هایبرد

توجه:

1. ویژگی ACCESSKEY توسط تعداد زیادی از مرورگرها پشتیبانی نمی گردد.

2. کلیدی که به عنوان میانبر تعریف می کنید نسبت به کلید مبانبری که در خود مرورگر تعریف شده است، مقدم است. به عنوان مثال اگر کلید میانبری به صورت ALT+F برای یک پیوند تعریف نمایید، کاربر نمی تواند در IE از این کلید برای فعال کردن منوی FILE از مرورگر استفاده نماید.

---

تعریف Tab Order برای پیوندهای صفحه

وقتی که در یک صفحه، چند پیوند ایجاد می شود، کاربر می تواند با استفاده از کلید Tab به پیوندهای مختلف دسترسی یابد. به طور پیش فرض ترتیب Tab براساس ترتیب ظاهری پیوندها در صفحه است. برای تغییر ترتیب Tab باید از ویژگی TABIMDEX=”?” در تگ A استفاده کرد. به جای ؟ شماره ترتیب آن پیوند را در ترتیب Tab قرار دهید. در صورتی که نمی خواهید یک پیوند در ترتیب Tab شرکت داده شود، این مقدار را برابر -1 قرار دهید.

توجه: ویژگی TABINDEX در عناصر دیگری از صفحه مانند Image و Form نیز قابل استفاده است.

مثال:

---

خلاصه ی  جلسه

در این فصل پیوندها در وب سایت  را شناختید و نحوه کار با آنها را در HTML به طور کامل فرا گرفتید.

با استفاده از ویژگی HERF=”?” در تگ A می توانید پیوندی به یک صفحه وب سایت  دیگر ایجاد نمایید. به جای ؟ باید آدرس URL صفحه مورد نظر را جایگزین نمایید. این تگ با /A خاتمه می یابد. عنوان پیوند می تواند به صورت یک متن و یا یک تصویر ظاهر شود.

برای ایجاد پیوند به نقطه ای در همان صفحه، لنگرگاه مورد نظر را ایجاد نمایید. برای این منظور باید از ویژگی NAME=”?” از تگ A در آن نقطه استفاده نمایید. به جای ؟ نام مناسبی برای لنگرگاه انتخاب نمایید. این نام باید فقط ترکیبی از حروف و ارقام باشد. سپس با استفاده از ویژگی HREF=”?” از تگ A ، در هر کجا از صفحه که مایل بودید، پیوندی به آن نقطه ایجاد نمایید. به جای ؟ باید نام آن لنگرگاه را که در مرحله قبل انتخاب نمودید، قرار دهید.

در صورتی که می خواهید به کاربر اجازه دهید فایلی را از روی وب سایت  سرور Download نموده و آن را به کامپیوتر خود انتقال دهد، باید پیوندی به آن فایل ایجاد کنید. با استفاده از ویژگی HERF=”?” در تگ A می توانید پیوندی به یک فایل ایجاد نمایید. به جای ؟ باید آدرس URL نسبی فایل مورد نظر را جایگزین نمایید.

برای ایجاد پیوند e-mail در صفحه خود، از ویژگی HERF=”mailto : ?” در تگ A استفاده نمایید. به جای ؟ آدرس e-mail شخصی که می خواهید کاربر با کلیک بر روی پیوند به آن شخص mail بزند را وارد نمایید.

بسیاری از سازمان ها و مؤسسات، دارای یک سایت FTP بر روی اینترنت برای Upload و Download کردن فایل های هستند. اطلاعات سایت FTP بر روی کامپیوتر که FTP Server نامیده می شود، نگهداری می شود. یک سایت FTP بسیار شبیه My Computer است. با این تفاوت که شما به جای مشاهده فایل ها و پوشه های کامپیوتر خود، فایل ها و پوشه های کامپیوتر سرور را ملاحظه خواهید کرد. برای ایجاد پیوند به یک سایت FTP در صفحه وب سایت ، باید از ویژگی HREF=”?” در تگ A استفاده نمایید. به جای ؟ باید آدرس سایت FTP را که با ftp:// شروع می شود، وارد نمایید.

اگر می خواهید پیوندی ایجاد نمایید که کاربر با کلیک بر روی آن، صفحه وب سایت  مورد نظر را در یک پنجره جداگانه مشاهده نماید، باید از ویژگی TARGET=”?” در تگ A استفاده نمایید. به جای ؟ نامی برای پنجره جدید انتخاب نمایید.

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

×        Link : پیوندهایی که کاربر هنوز آنها را انتخاب نکرده است.

×        VLink : پیوندهایی که کاربر قبلاً آنها را انتخاب و ملاقات کرده است.

×        ALink : پیوندهایی که در حال حاضر، کاربر آنها را انتخاب کرده است.

می توانید برای هر دسته از پیوندهای نام برده، رنگ متمایزی را انتخاب نمایید. برای این منظور از ویژگی های Link=”?” ، VLink=”?” و ALink=”?”  در تگ BODY استفاده نمایید. به جای ؟ رنگ مورد نظر برای آن نوع پیوند را قرار دهید. این مقدار می تواند نام معادل رنگ و یا مقدار هگزادسیمال آن باشد.

با استفاده از ویژگی  ACCESSKEY=”?”  در تگ A  می توانید برای پیوند کلید میانبر تعریف کنید. به جای ؟ یک حرف و یا یک رقم قرار دهید. به عنوان مثال اگر به جای ؟ حرف T قرار دهید، باعث می شود تا کاربر بتواند با کلید میانبر ALT+T پیوند مورد نظر را فعال نماید.

برای تغییر ترتیب Tab باید از ویژگی TABIMDEX=”?” در تگ A استفاده کرد. به جای ؟ شماره ترتیب آن پیوند را در ترتیب Tab قرار دهید. در صورتی که نمی خواهید یک پیوند در ترتیب Tab شرکت داده شود، این مقدار را برابر -1 قرار دهید.