طراحی سایت با دریم ویور |استفاده از تصاوير(قسمت9)

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

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

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

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

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

2-در نوار Insert برروی گزينه Image کليک کرد.

بعد از انجام هر يک از دو روش فوق کادرمحاوره ای محاوره ای Select Image Source روی صفحه ظاهر می شود.در اين مرحله تصوير موردنظر را انتخاب کرده و روی ok دکمه کليک کنيد.زمانی که تصوير به صفحه وب اضافه می شود همراه با آن مشخصات و و يژگی های خاصی در کادرمحاوره ای خصوصيات ظاهر می شودکه شما می توانيد ان را تغيير دهيد.

 برخی از مهمترين گزينه های کادرمحاوره ای properties

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

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

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

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

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

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

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

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

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

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

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

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

Absolute Middle = به کمک اين گزينه می توان ميانه تصوير را با ميانه متن همتراز کرد.

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

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

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

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

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

در پست بعدی به بررسی مسيرهای مطلق و نسبی میپردازیم.