تاکنون مشاهده کردیم که چگونه با استفاده از متن، یک لینک هایپرتکست ایجاد کنیم و همچنین فرا گرفته ایم که چگونه از تصاویر در صفحات وب خود استفاده کنیم. اکنون فرا خواهیم گرفت که چگونه با استفاده از تصاویر هایپرلینک ایجاد کنیم.
مثال:
استفاده از تصویر به عنوان هایپرلینک بسیار ساده می باشد. لازم است که یک تصویر را در داخل هایپرلینک در محل تصویر قرار دهیم، همانطور که در زیر نشان داده شده است.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tahlildadeh.com" target="_self">
<img src="http://tahlildadeh.com/banner/012.jpg" alt="tahlildadeh" border="0" />
</a>
</body>
</html>
این ساده ترین راه ایجاد هایپرلینک با استفاده از تصاویر می باشد.
استانداردهای HTML و XHTML یک ویژگی ارائه می دهند که به شما اجازه می دهد لینک های مختلفی را در داخل یک تصویر اجرا کنید. شما می توانید براساس مختصات مختلف موجود روی تصویر، لینک های مختلفی را روی یک تصویر مجزا ایجاد کنید. زمانی که لینک های متفاوت به مختصات متفاوت ضمیمه می شود، می توانیم برای باز کردن داکیومنت های تارگت روی بخش های مختلف تصویر کلیک کنیم. چنین تصاویری که به ماوس حساس می باشند، تصاویر نقشه نامیده میشوند. دو روش برای ایجاد چنین تصاویری وجود دارد.
در اینجا به سادگی تصویر خود را داخل یک هایپرلینک قرار داده و از ویژگی ismap استفاده کنید که آن را یک تصویر خاص می سازد و وقتی یوزر در بخشی از تصویر کلیک می کند، مرورگر مختصات اشاره گر ماوس را همراه با URL مشخص شده در برچسب < a>به سرور وب منتقل می کند. سرور از مختصات اشاره گر ماوس استفاده می کند تا تعیین کند کدام داکیومنت باید به مرورگر بازگردانده شود.
زمانی که ismap استفاده می شود، ویژگی href از برچسب < a> باید URL یک برنامه ی سرور را مانند یک cgi یا اسکریپت PHP و غیره در برداشته باشد، تا درخواست ورودی را براساس مختصات انتقال داده شده پردازش کند. مختصات موقعیت ماوس پیکسل های صفحه میباشند که از گوشه ی بالای سمت چپ تصویر شمرده می شوند و با (0,0) شروع می شوند. مختصات دنبال شده با یک علامت سوال، به انتهای URL اضافه می شوند.
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://tahlildadeh.com/Temp/Html/Exp1.html" target="_self">
<img ismap src="http://tahlildadeh.com/Temp/Html/logo.png" alt="tahlildadeh" border="0" />
</a>
</body>
</html>
سپس مرورگر پارامترهای جستجوی زیر را به سرور می فرستد که می تواند توسط اسکریپت ismap.cgi یا فایل map پردازش شود و شما می توانید هر داکیومنتی را که دوست داشته باشید به این مختصات لینک کنید.
از این طریق شما می توانید لینک های مختلفی را به مختصات متفاوت یک تصویر اختصاص دهید، و وقتی این مختصات کلیک می شوند، می توانید داکیومنت های لینک شده ی متناظر را باز کنید.
شما برنامه نویسی CGI را زمانی فراخواهید گرفت که برنامه نویسی perl را مطالعه کنید. می توانید اسکریپت خود را بنویسید تا این مختصات انتقال داده شده را با استفاده از PHP یا هر اسکریپت دیگری پردازش کنید. فعلا اجازه بدهید روی یادگیری HTML تمرکز کنیم، می توانید این فصل را بعدا بازبینی کنید.
این تصاویر به وسیله ی ویژگی usemap از برچسب < img> فعال می شوند و به وسیله ی برچسب های ضمیمه ی< map>و< area> تعریف می شوند.
نقشه ای که قرار است نقشه را طراحی کند، به وسیله ی< img> به عنوان یک تصویرعادی وارد صفحه می شود، به جز اینکه این مورد ویژگی اضافه ای به نام usemap همرا خود دارد. مقدار ویژگی usemap مقداری می باشد که در یک برچسب< map>استفاده می شود تا برچسب های تصویر و نقشه را لینک کند.< map>همراه با برچسب های< area> همه ی مختصات تصویر و لینک های مربوطه را تعریف می کند.
برچسب< area> در داخل برچسب نقشه مختصات و شکل حاشیه های قابل کلیک در داخل تصویر را تعریف می کند. در اینجا مثالی از تصویر نقشه می بینید.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<img src="http://tahlildadeh.com/banner/012.jpg" width="250" height="150" alt="Tahlildadeh" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,40,126" href="http://tahlildadeh.com/banner/02.jpg">
<area shape="circle" coords="90,58,20" href="http://tahlildadeh.com/banner/04.jpg">
<area shape="circle" coords="124,78,20" href="http://tahlildadeh.com/banner/05.jpg">
</map>
</body>
</html>
مقدار حقیقی مختصات کانلا به شکل در سوال وابسته است. در اینجا خلاصه ای می بینید که قرار است با مثال های مفصل دنبال شوند.
rect = x1 , y1 , x2 , y2
x1 و y1 مختصات گوشه ی بالای سمت چپ از مستطیل می باشد. x2 و y2 مختصات گوشه ی سمت راست پایین می باشند.
circle = xc , yc , radius
xc و yc مختصات مرکز دایره و radius شعاع دایره می باشد. دایره ای به مرکز200,50 با شعاع 25 دارای ویژگی coords="200,50,25" خواهد بود.
poly = x1 , y1 , x2 , y2 , x3 , y3 ,... xn , yn
جفت های مختلف x-y رئوس چند ضلعی می باشند، با یک خط که از یک نقطه به نقطه ی دیگر کشیده شده. یک چندضلعی لوزی شکل با بالاترین راس آن در نقطه ی 20،20 و 40 پیکسل، در عریض ترین نقطه ی خود دارای ویژگی coords="20,20,40,40,20,60,0,40" می باشد.
تمام مختصات مربوط به بالاترین گوشه ی سمت چپ تصویر می باشند. هر شکل دارای یک URL مربوطه می باشد. می توانید از هر نرم افزار تصویری برای دانستن مختصات موقعیت های نختلف استفاده کنید.
امروز با مقاله جدیدی از سری مقاله های آموزش طراحی سایت در کنار شما عزیزان هستیم. در این مقاله سعی داریم به آموزش سیستم گرید در بوت استرپ 4 بپردازیم.
سیستم گرید بندی (Bootstrap 4 Grid System) بوت استرپ 4 به شما اجازه می دهد تا 12 خانه یا ستون (column) در یک سطر داشته باشید. اگر نمی خواهید از 12 خانه هر سطر به صورت تک تک استفاده کنید، می توانید از ترکیب آنها، خانه یا ستون های بزرگتری ایجاد نمایید. شکل زیر، مفهوم کلی گرید سیستم بوت استرپ 4 را نشان می دهد :
سیستم گرید بندی بوت استرپ 4، کاملا واکنش گرا یا ریسپانسیو (Responsive) است و ستون ها در یک سطر، بر حسب عرض و اندازه صفحه نمایش، خود را مرتب کرده و بهترین حالت نمایش را ارائه می دهند. برای مثال در یک صفحه نمایش بزرگ، می توانید محتویات را در 3 ستون پهن نمایش دهید، در حالی که همان 3 ستون در یک صفحه موبایل، باریکتر شده، هر کدام در یک سطر کامل قرار گرفته و بر روی هم نمایش داده می شوند.
بوت استرپ 4، دارای 5 کلاس مختلف برای گریدبندی خانه در صفحه نمایش های مختلف است :
کلاس های فوق را می توایند جهت ایجاد قالب و چیدمان های دینامیک و فلکسیبل (flexible layouts)، با هم ترکیب کرده و استفاده نمایید.
نکته : تأثیرگذاری کلاس ها از اندازه کوچک به بزرگ است، یعنی اگر قانونی برای سایز کوچکتر تعیین کنید، به سایزهای بزرگ هم تعمیم پیدا می کند. برای مثال اگر می خواهید عرض یکسانی را برای یک عنصر در اندازه های sm و md، تعیین نمایید، کافی است مقدار آن را در حالت sm مشخص کنید و خود به خود در حالت md نیز اجرا می شود.
در لیست زیر، برخی از مهم ترین قوانین و شرایط ی که در هنگام کار با گرید سیستم در bootstrap 4 بایستی رعایت نمایید را معرفی کرده ایم :
راهنمایی : اگر در مورد FlexBox، آشنایی کافی ندارید، به بخش آموزش فلکس باکس در سایت تحلیل داده بروید.
نکته : گزینه FlexBox در مرورگرهای IE9 و قبلتر، پشتیبانی نمی شود. لذا اگر پشتیبانی مرورگرهای IE8 و IE9 ار سایت تان برای شما مهم است، از بوت استرپ 3 استفاده نمایید. بوت استرپ 3، پایدارترین نسخه بوت استرپ بوده و هنوز توسط تیم توسعه دهنده جهت رفع باگ ها احتمالی، ارائه مستندات آموزشی و ... پشتیبانی می شود. ولی قابلیت های جدید از جمله FlexBox به آن اضافه نشده است.
در کد مثال عملی زیر، یک مثال ساده و پایه از نحوه گریدبندی خانه ها در بوت سترپ 4 را نشان داده ایم. کد مثال را مطالعه کرده، در ادامه به تشریح نکات مهم آن پرداخته ایم :
مثال گرید سیستم
< !-- Control the column width, and how they should appear on different devices -->
< div class="row">
< div class="col-*-*">< /div>
< div class="col-*-*">< /div>
< div class="col-*-*">< /div>
< /div>
< !-- Or let Bootstrap automatically handle the layout -->
< div class="row">
< div class="col">< /div>
< div class="col">< /div>
< div class="col">< /div>
< div class="col">< /div>
< /div>
در مثال اول، به وسیله تگ div با کلاس row، یک سطر افقی ایجاد کرده ایم. سپس به تعداد مورد نظر، ستون های دلخواه را با تگ هایی با کلاس col-*-*، درون آن قرار داده ایم. * اول در کلاس فوق، تعیین کننده عرض صفحه نمایش هدف است که می تواند یکی از مقادیر sm، md، lg و یا xl را داشته باشد. * دوم هم تعیین کننده عرض ستون بر حسب عددی از 1 تا 12 است که مثلا 6، یعنی 6 واحد از 12 خانه را اشغال کند.
در مثال دوم، به جای تعیین عدد برای هر ستون در کلاس col، اجازه داده ایم تا خود بوت استرپ قالب (layout) آن را با ایجاد ستون های هم عرض مدیریت کند. مثلا کاربرد در عنصر با کلاس col، یعنی اینکه از 100 درصد عرض، به هر ستون 50 درصد اختصاص بده. به همین ترتیب با 3 عنصر کلاس Col، یعنی عرض هر کدام 33 درصد و با چهار ستون عرض هرکدام 25 درصد، عرض کل سطر باشد.
همچنین در کلاس فوق می توانید از حالت col-sm|md|lg|xl نیز استفاده نمایید تا در هر اندازه صفحه نمایش، نحوه قرارگیری ستون ها را به دقت تعیین نمایید.
مناسب برای :
داشتن offset
ترتیب قرار گرفتن ستون ها
با دیگر مقاله های آموزشی در زمینه آموزش طراحی سایت همراه ما باشید..
سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با کار با جداول در Bootstrap 4 آشنا شدیم.
عکس و تصویر در Bootstrap 4 به 3 حالت کلی زیر نشان داده می شود :
به کار بردن کلاس rounded در تگ <img> باعث می شود عکس با گوشه های گرد نمایش داده شود، همانند کد و مثال عملی زیر :
<p><img alt="Cinque Terre" class="rounded" src="cinqueterre.jpg"></p>
آموزش نمایش عکس به صورت گرد در Bootstrap 4:
کلاس rounded-circle در Bootstrap 4 باعث می شود تا عکس در تصویر (تگ <img> ) به صورت تمام گرد و دایره نمایش داده شود. همانند کد مثال عملی زیر:
<p><img alt="Cinque Terre" class="rounded-circle" src="cinqueterre.jpg"></p>
به کار بردن کلاس .img-thumbnail در تگ <img>، باعث می شود تا عکس به صورت پیش نمایش، کوچکتر و بند انگشتی همراه با خطوط حاشیه ای باریک نمایش داده شود. همانند کد مثال عملی زیر:
<p><img alt="Cinque Terre" class="img-thumbnail" src="cinqueterre.jpg"></p>
به وسیله کلاس .float-right می توانید عکس را راست چین کرده و با کلاس .float-left، تصویر را در صفحه چپ چین کنید.
در کد مثال عملی زیر، عکس اول را راست چین و عکس دوم را چپ چین کرده ایم :
<p><img class="float-left" src="paris.jpg"> <img class="float-right" src="paris.jpg"></p>
از طرف دیگر، با به کار بردن کلاس های .mx-auto (معادل حالت margin:auto) و کلاس .d-block معادل (خاصیت display : block) در Bootstrap 4، می توان یک عکس را در وسط صفحه یا عنصر مادر قرار داد، همانند کد مثال عملی زیر:
<p><img class="d-block mx-auto" src="paris.jpg"></p>
عکس
ها دارای سایزهای مختلفی هستند و صفحه نمایش ها هم عرض و طول های گوناگونی
دارند. عکس های واکنش گرا یا Responsive Image به طور خودکار اندازه خود
را برای بهترین حالت نمایش در صفحه، بزرگ و کوچک کرده و تنظیم می کنند.
با
اضافه کردن کلاس .img-fluid در Bootstrap به تگ <img>، یک عکس را
واکنش گرا می کنید. عکس هدف اندازه خود را بر حسب اندازه عنصر دربرگیرنده
اش تنظیم کرده و نمایش می دهد.
به کار بردن کلاس .img-fluid برای یک عکس، خواص max-width:100% و height:auto را به آن می دهد.
در
کد مثال عملی زیر، از کلاس .img-fluid برای Responsive کردن عکس استفاده
کرده ایم. همانطور که در خروجی مشاهده می کنید، با بزرگ و کوچک کردن صفحه،
عکس نیز تغییر کرده و بزرگ و کوچک می شود.
<img alt="Chania" class="img-fluid" src="img_chania.jpg">
یک
jumbotron در Bootstrap 4، یک جعبه بزرگ خاکستری رنگ ایجاد می کند که می
توانید برای نمایش اطلاعات مهم و جلب توجه کاربر به نوشته، از آن استفاده
کنید.
jumbotron در Bootstrap 4، معمولا عرض کل عنصر دربرگیرنده خود را اشغال می کند، پس زمینه ای خاکستری داشته و نوشته های آن گرد است.
نکته :
درون یک jumbotron می توانید تقریبا هر تگ معتبر HTML ای قرار داده و از المنت های Bootstrap با کلاس مختلف نیز استفاده کنید.
برای ایجاد یک jumbotron بایستی از تگ <div> با کلاس .jumbotron استفاده نمایید، همانند کد مثال عملی زیر:
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
اگر می خواهید jumbotron ایجاد شده، تمامی عرض صفحه یا عنصر مادر خود را اشغال کرده و در گوشه های آن گرد نباشد، بایستی از کلاس .jumbotron-fluid با یک عنصر داخلی (مثل تگ) با کلاس .container یا .container-fluid استفاده نمایید. همانند کد مثال عملی زیر:
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
</div>
چهارچوب کاری بوت استرپ4، روش بسیار ساده ای برای ایجاد کادر هشدار یا Alert Box فراهم کرده است.
کادر
هشدار Alert توسط یک تگ <div> با کلاس .alert ایجاد می شود و از
کلاس های متنی کمکی می توانید برای تعیین رنگ نوشته و پس زمینه آن نیز
استفاده کنید. این کلاس ها عبارتند از .alert-success، .alert-info،
.alert-warning، .alert-danger، .alert-primary، .alert-secondary،
.alert-light و .alert-dark که هر کدام مفهوم خاصی را به کاربر نشان می
دهند.
در مثال های عملی زیر، انواع کادرهای هشدار با رنگ های مختلف به همراه توضیح و کاربرد هر کدام را نشان داده ایم:
موفقیت Success : کادر هشدار بیان گر عمل مثبت یا انجام موفقیت آمیز عملیات است.
اطلاع Info : کادر هشدار نشان دهنده یک عمل عادی یا اطلاعات کم اهمیت تر است.
اخطار Warning : کادر هشدار اعلام می کند یک اتفاق به ظاهر خطرناک افتاده و نیازمند توجه کاربر است.
خطر Danger : این کادر بیان گر عمل منفی یا انجام یک عملیات خطرناک است.
مهم Primary : کادر هشدار نشان دهنده یک عمل مهم و قابل توجه است.
رده 2 secondary : در این حالت کادر هشدار اعلام می کند یک عمل با درجه اهمیت کمتر رخ داده است.
تیره Dark : یک کادر هشدار با پس زمینه خاکستری یا تیره نشان داده می شود.
مثال عملی: در کد زیر، یک کادر هشدار را با کلاس های .alert و .alert-success ایجاد کرده و خروجی آن را نشان داده ایم:
<div class="alert alert-success"><strong>Success!</strong> You should <a class="alert-link" href="#">read this message</a>.</div>
می
توانید درون کادر هشداری که در Bootstrap 4 ایجاد کرده ایم، یک تگ لینک یا
<a> با کلاس .alert-link قرار دهید. برنامه لینک را به صورت توپر و
با رنگی مشابه رنگ نوشته کادر هشدار نشان می دهد.
در مثال های زیر، انواع حالت لینک در کادرهای هشدار را نشان داده ایم:
مثال عملی: کد مثال زیر نحوه قرار دادن یک لینک یا تگ <a> را درون یک کادر هشدار نشان داده است:
<div class="alert alert-success alert-dismissible">×<strong>Success!</strong> Indicates a successful or positive action.</div>
برای این که کادر هشدار ایجاد شده، قابلیت بسته شدن داشته باشد، بایستی کلاس .alert-dismissible را به تگ Alert Box اضافه کنید.
سپس
یک لینک یا دکمه (Button) که می خواهید با کلیک بر روی آن، کادر هشدار
بسته شده را با کلاس class=”close” و خاصیت data-dismiss=”alert” درون عنصر
اصلی کادر هشدار قرار می دهید، همانند کد مثال عملی زیر:
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
موجودیت × یا (x) یک HTML Entity یا خاصیت ذاتی HTML است که بیشتر به جای حرف X برای ایجاد یک آیکون یا دکمه بستن، از آن استفاده می شود.
با اضافه کردن کلاس های .fade و .show کادر هشدار با جلوه نمایشی و به صورت محو شدن یا ظاهر شدن تدریجی، نمایش داده می شود. نحوه استفاده از این دو کلاس و خروجی آن در مثال زیر نشان داده شده است:
<div class="alert alert-danger alert-dismissible fade show">
برای دریافت اطلاعات بیشتر راجع به کادرهای هشدار در بوت استرپ 4 ، به مرجع آموزش کادر هشدار Alert Box در Bootstrap 4 بروید.
</div>
آموزش bootstrap 4 ادامه دارد