در حال تکمیل معرفی و کار با برنامه Dreamweavar

[ms.khassi]

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

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


افزودن یک تصویر به صفحه
زمانی که یک تصویر به صفحه اضافه می شود، می توان آن را در پنجره سند برنامـه Dreamweaver  مشاهده کرد و برخلاف پیوندها لازم نیست براي دیدن تصویر حتماً از مرورگر استفاده شـود، چـرا کـه تصـویر از طریق تگ Imgکه نحوه نمایش آن را به مرورگر اعلام میکند نشان داده میشود

به دو روش میتوان تصویر را به سند اضافه کرد:

1-مکان نماي ماوس را به محل موردنظر از سند انتقال داده و سپس از منوي Inserگزینه Image را انتخاب کرد
2-در نوار Insertبرروي گزینه Imageکلیک کرد

بعد از انجام هر یک از دو روش فوق کادرمحاوره اي محاورهاي Select Image Sourceروي صفحه ظاهر میشود

در این مرحله تصویر موردنظر را انتخاب کرده و روي دکمه okکلیک کنید زمانی که تصویر به صفحه وب اضافه میشود همراه با آن مشخصات و ویژگیهاي خاصی در کادرمحـاورهاي خصوصیات ظاهر میشود که شما میتوانید آنها را تغییر دهید

W  پهنا
H ارتفاع
SRC  آدرس پیوند داده شده
 اشکال مربوط به نواحی حساس

مهمترین گزینه هاي کادرمحاوره اي prop

Link  در صورتی که تصویر را به عنوان یک پیوند در نظر گرفته باشید، در این محل آدرس صفحه اي که به تصویر پیوند خورده است نشان داده میشود

Align  به کمک این گزینه میتوانید تصویر و اجزایی که در کنار آن قرار گرفته اند (مانند متون) را تراز کنید

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

Hspace,Vspace  براي افزایش فاصله بین تصویر و دیگر عناصر صفحه از این دو گزینه استفاده می شود. براي اضافه کردن فضا به هر دو سمت راست و چپ
تصویر، گزینه H Spaceرا تنظیم کنید و براي اضافه کردن فضا در هر دو سمت پایین و بالاي تصویر از گزینه V Spaceاستفاده کنید.

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

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

Default در این گزینه معمولاً حالت مبنا 1را به تصویر اعمال میکند که در پایین شرح داده شده است.

Baseline انتخاب این گزینه باعث میشود که تصویر با متن موجود در یک خط تراز شود. به بیان دیگر انتهاي تصویر همراه بـا متـون در یـک خـط قـرارمیگیرند.

Top این گزینه متن را با بالاي تصویر هم تراز میکند. خطوط اضافه متن در زیر تصویر ادامه مییابد.

Middle با انتخاب این گزینه متن و یا هر شیئی دیگر را در وسط تصویر ترازبندي میکند. خطوط اضافه متن، در زیر تصویر ادامه مییابد

Bottomمتن و یا هر شیئی دیگر را با پایین تصویر هم تراز میکند

Text Top انتخاب این گزینه باعث همترازي بالاي تصویر با بلندترین کاراکتر موجود در متن میشود
Absolute
Middle  به کمک این گزینه میتوان میانه تصویر را با میانه متن هم تراز کرد

Absolute
Bottom  با انتخاب این گزینه میتوان قسمت انتهایی متن را با تصویر هم تراز کرد

Left   این گزینه تصویر را در سمت چپ صفحه قرار داده و سایر اشیاء (از جمله متون) را در سمت راست آن تراز میکند

Right  بر عکس گزینه بالا عمل میکند و تصویر را در سمت راست و سایر اشیاء را در سمت چپ آن قرار میدهد

برقراري پیوند بین صفحات

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

زمانی که میخواهیددر صفحه اي پیوندي را ایجاد کنید، قبل از هر چیز باید مسیر آن صفحه را مشخص کنید به طور کلی دو نوع مسیر وجود دارد؛ مسیرهاي مطلق و مسیرهاي نسبی
مسیرهاي مطلق همانند نشانی است که در آن شهر و میدان در خیابان و کوچه و پلاك را مشخص  میکنند اما در مسیر نسبی، نشانی از محل جاري میباشد مثلاً وقتی میگوییم به کوچه نادر پلاك 12برو میدانیم که کوچه نادر در همین محله است و نیازي به دادن نام شهر و میدان نیست

مسیرهاي مطلق به طور معمول براي برقراري ارتباط با سایتهاي دیگر مورد استفاده قرار میگیرند بـه طـوري کــه در آنهــا مســیر کامــل دسترســی بــه ســایت مــورد نظــر مشــخص مــی شــود. بــه عنــوان مثــالHttp://www.Romaak.ir   یک مسیر مطلق میباشد. اما در مقابـل مسـیرهاي نسـبی بـراي برقراري ارتباط میان صفحات مختلف یک سایت مورد استفاده قرار میگیرند. به عنوان مثال اگر بخواهید از صفحه اي که در پوشه اي به نام Productقرار دارد پیوندي به صفحه Socialnews.Htmlکه در پوشه Newsقرار دارد، برقرار کنید  دقت کنید که هر دو پوشه   Product  و  Newsدر کنار یکدیگر در شاخه اصلی سایت و یــا هــر پوشــه دیگــري قــرار گرفتــه انــد مســیر نســبی پیونــد بــه صــورت زیــر خواهــد بــود:

../news/Socialnews.html
علامت ../ بیانگر این مطلب میباشد که مرورگر باید براي یافتن فایل مورد نظر یک شاخه بـه بیـرون بــرود (حرکــت بــه ســمت دایرکتــوري والــد) ســپس وارد پوشــه Newsشــده و در آنجــا فایــل Socialnews.Htmlرا یافته و اجرا کند

نکته: اگر فایلی را که میخواهید به آن مرتبط شوید در کنار فایل اصلی قرار دارد (به بیان دیگر هر دو فایل
در یک پوشه قرار دارند) دیگر نیازي به وارد کردن آدرس اضافی نمی باشد و تنها کافی است نام فایل را مشخص کنید بـــه عنـــوان مثـــال اگـــر بخواهیـــد از فایـــل Socialnews.htmlبـــه فایـــل Scientificnews.htmlپیوندي ایجاد کنید (هر دو در پوشه newsقـرار دارنـد)آدرس نسـبی بـه صورت زیر خواهد بود:Scientificnews.html

نحوه پیوند دو صفحه وب به یکدیگر

مراحل ایجاد پیوند در صفحه:
1-متن یا تصویري را که میخواهید پیوند را به آن نسبت دهید، در صفحه انتخاب کنید
2-سپس در کادرمحاوره اي خصوصیات روي آیکن پوشه که در سمت راست گزینه Linkوجـود دارد کلیک کنید تا کادرمحاوره اي مربوط به آن باز شود

در کادرمحاوره اي ،Select Fileصفحها ي راکه میخواهید پیوند به آن ارجاع شـود را انتخـاب کرده و در نهایت روي دکمه OKکلیک کنید
نکته : در صورتی که میخواهید آدرس مطلق براي دسترسی به یک سایت مورد نظـر را وارد کنیـد، دیگـر نیازي نیست که روي آیکن پوشه کلیک کنید، تنها باید آدرس کامل سایت مورد نظرتان را در کادر Linkواردکنید به عنوان مثال در این کادر تایپ کنید: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
  در داخل برنامه  Dreamweaver  امکان مشاهده وضعیت عملکرد پیوند مشخص شده وجود ندارد، از این رو براي بررسی و آزمایش درباره نحوه عملکرد پیوند باید آن را در مرورگر اجرا کنید. (کلید F12را فشار دهید)

افزودن یک پیوند ایمیل

می توان در یک صفحه وب پیوندي راقرار داد که بـا انتخـاب آن بـه کـاربر امکـان فرسـتادن یـک نامـه الکترونیکی را داشته باشد براي انجام این کار مـی توانیـد در نـوار Insertیـا از پنـل commonگزینـهEmail Linkرا انتخاب کنید

بعد از انجام این عمل مشاهده کنید که کادرمحاوره اي Email Linkدر صفحه ظاهر میشود اکنون باید در کادر Textعبارتی که مایلید کاربر روي صفحه مشاهده کند را تایپ کنید سپس در کـادر E-Mailآدرس پست الکترونیکی خود را وارد کنید، در نهایت روي دکمه OKکلیک کنید تا کادرمحـاوره ای بسته شود

به عنوان مثال در کادر textعبارت "تماس با ما" را تایپ کرده و در کـادر E-mailآدرس پسـت الکترونیکی مورد نظر خود را قرار داده سپس بـر روي دکمـه OKکلیـک کنیـد تـا کادرمحـاوره ايEmail link بسته شود. اکنون با فشردن کلیدF12خروجی صفحه را مشاهده کنید. زمانی که بر روي پیوند "تمـاس بـا ما" کلیک کنید به طور اتوماتیک برنامه OutLook Expressاجرا شده و میخواهد که نامه الکترونیکـی خود را به آدرس موردنظر ارسال نمایید

[ms.khassi]

ایجاد پیوند با نواحی حساس

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

برای این کار ابتدا باید تصویر نقشه ی ایران را در صفحه قرار دهید سپس کادر محاوره ای  خصوصیات در کادر متنی map یک نام برای ناحیه hotspots وارد کنید

به عنوان مثال میخواهيم زمانی که کاربر اشاره گر ماوس را بر روی شهر تهران قرار داده و کليک می کند وارد سايت دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
 شود . به همين منظور در کادرmap
نام ناحيه حساس را tehran میگذارید سپس يکی از آيکون های مربوط به Hotspots (شکلهای دا يره، مربع، چند ضلعی) را که در ز ير کادر Map قرار  دارد انتخاب کرده و ناحیه مربوط به شهر تهران را روی تصوير مشخص می کنيد

بعد از رها کردن اشاره گر ماوس مشخصات محدوده انتخابی در کادرمحاوره ای خصوصیات  ظاهر میشود . در اين مرحله در کادر link آدرس سايت مورد نظر (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
) را وارد  کنید و دکمه f12 را فشار دهید تا کادر محاوره ای مرورگر باز شود 


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