عناصر موقعیت یابی
به‌طور پیش‌فرض، مرورگرها عناصر را به دنبال یک ترتیب تنظیم شده در پنجره قرار می‌دهند. همانطور که صفحه وب هر عنصر را تعریف می کند، مرورگر آن را در پنجره ای قرار می دهد که از گوشه سمت چپ بالای پنجره شروع می شود، از چپ به راست و از بالا به پایین ادامه می یابد. برای نشان دادن این، بیایید یک آزمایش سریع اجرا کنیم.
شما یک صفحه وب ایجاد خواهید کرد که شامل پنج بخش است:
»» هدر برای نمایش در بالای صفحه وب
»» پاورقی برای نمایش در پایین صفحه وب
»»بخش ناوبری برای نمایش در سمت چپ بخش میانی
»»بخشی کناری برای نمایش در سمت راست بخش میانی
»»یک بخش محتوای اصلی برای نمایش در وسط بخش میانی این یک ساختار طرح بندی صفحه وب بسیار استاندارد است، که مطمئن هستم که شما بارها آن را هنگام مرور وب مشاهده کرده اید.
برای اجرای تست مراحل زیر را دنبال کنید:
1. ویرایشگر متن، ویرایشگر برنامه یا بسته IDE مورد علاقه خود را باز کنید و کد زیر را وارد کنید:
<!DOCTYPE html>
<html>
<head>
<title>Positioning Test</title>
<style>
header {
background-color: red;
margin: 0px;
padding: 10px;
height: 25px;
width: 600px;
}
nav {
background-color: blue;
margin: 0px;
padding: 10px;
height: 125px;
width: 200px;
}
section {
background-color: green;
margin: 0px;
padding: 10px;
height: 125px;
width: 200px;
}
aside {
background-color: yellow;
margin: 0px;
padding: 10px;
height: 125px;
width: 200px;
}
footer {
background-color: orange;
margin: 0px;
padding: 10px;
height: 25px;
width: 600px;
}
</style>
</head>
<body>
<header><p>This is the header</p></header>
<nav><p>Navigation</p></nav>
<section><p>Section</p></section>
<aside><p>Aside</p></aside>
<footer><p>This is the footer</p></footer>
</body>
</html>
2. فایل را به عنوان positiontest.html در پوشه DocumentRoot ذخیره کنید وب سرور
3. وب سرور را راه اندازی کنید، مرورگر خود را باز کنید و به URL زیر بروید:
http://localhost:8080/positiontest.html
4. مرورگر را ببندید و وب سرور را متوقف کنید.
این تست یک صفحه وب ایجاد می کند که شامل یک بخش سرصفحه، یک بخش ناوبری، یک بخش محتوای اصلی، یک بخش کناری و یک بخش پاورقی. از ارتفاع استفاده می کند و ویژگی های سبک عرض را برای تعیین اندازه هر بخش و تعیین رنگ پس زمینه متفاوت برای هر بخش تا بتوانید آنها را در صفحه وب از هم جدا کنید. با این حال، هنگامی که صفحه وب را نمایش می دهید، احتمالا کمی ناامید خواهید شد با نتایجی که در شکل 2-6 نشان داده شده است.
مرورگر هر یک از بخش های مختلف را به ترتیبی که شما تعریف کردید قرار داد آنها، هر کدام روی دیگری. آخ! این چیزی نیست که ما می خواستیم!
برای اینکه مرورگر را وادار کنیم که بخش های مختلف صفحه وب را به روشی که می خواهیم قرار دهد، باید از برخی از ویژگی های موقعیت یابی موجود در CSS استفاده کنیم. بخش های بعدی نحوه انجام آن را به شما آموزش می دهد.
قرار دادن عناصر در یک مکان خاص
قرار دادن عناصر در مکان های خاص در صفحه وب نیاز به استفاده از موقعیت یابی دارد ویژگی های موجود در CSS سه ویژگی اصلی موقعیت یابی وجود دارد که معمولاً استفاده می شود:
»» position: روش موقعیتی را تنظیم می کند که مرورگر باید از آن استفاده کند عنصر
»» top: مکان بالای عنصر را مشخص می کند
»»left: مکان سمت چپ عنصر را مشخص می کند ویژگی position مشخص می کند که مرورگر از چه روشی برای قرار دادن عنصر استفاده می کند. در صفحه وب چهار روش مختلف موقعیت یابی وجود دارد:
»» مطلق: موقعیت عنصر را نسبت به نزدیکترین موقعیت تغییر می دهد عنصری که قبل از آن است.
»»fixed: عنصر را در یک مکان ثابت در پنجره مرورگر قرار می دهد. اگر بازدیدکننده سایت پنجره را پیمایش کند، عنصر در همان نقطه باقی می ماند.
»»relative: موقعیت عنصر را نسبت به موقعیت پیش فرض تغییر می دهد.
»»static: عنصر را در محل عادی خود در صفحه وب زیر قرار می دهد
قوانین قرار دادن پیش فرض برای استفاده از روش های تعیین موقعیت مطلق، ثابت و نسبی، باید مکانی را در پنجره مرورگر که عنصر در آن قرار خواهد گرفت را مشخص کنید. شما این کار را با استفاده از ویژگی های بالا و سمت چپ انجام می دهید. بیایید فایل آزمایشی positiontest.html را برای استفاده از موقعیت مطلق برای قرار دادن بخش ها تغییر دهیم.
فقط این مراحل را دنبال کنید:
1. فایل positiontest.html را در برنامه ویرایشگر متن مورد علاقه خود باز کنید ویرایشگر یا بسته IDE.
2. استایل های تعریف شده را تغییر دهید تا شبیه به این شوند.
<style>
header {
background-color: red;
margin: 0px;
padding: 10px;
height: 25px;
width: 600px;
position: absolute;
top: 0px;
left: 0px;
}
nav {
background-color: blue;
margin: 0px;
padding: 10px;
height: 125px;
width: 200px;
position: absolute;
top: 46px;
left: 0px;
}
section {
background-color: green;
margin: 0px;
padding: 10px;
height: 125px;
width: 200px;
position: absolute;
top: 46px;
left: 201px;
}
aside {
background-color: yellow;
margin: 0px;
padding: 10px;
height: 125px;
width: 200px;
position: absolute;
top: 46px;
left: 402px;
}
footer {
background-color: orange;
margin: 0px;
padding: 10px;
height: 25px;
width: 600px;
position: absolute;
top: 192px;
left: 0px;
}
</style>
3. فایل positiontest.html به روز شده را به عنوان positiontest2.html ذخیره کنید.
4. وب سرور خود را راه اندازی کنید، یک مرورگر باز کنید و به URL زیر بروید:
http://localhost:8080/positiontest2.html
5. مرورگر را ببندید و وب سرور را متوقف کنید.
کد اضافی روش موقعیت یابی را برای مرورگر برای استفاده برای هر بخش به صورت مطلق تنظیم می کند، به این معنی که بخش ها را دقیقاً در مکان قرار می دهد. در پنجره مرورگر با استفاده از ویژگی های بالا و چپ تعریف می کنید.
اکنون همه چیز شبیه یک صفحه وب واقعی شده است!
مطالب زیر را حتما بخوانید:
بهترین شیوه ها
مهم است که تا حد امکان تعاملات مشتری خود را ثبت کنید. اگر مشتریان شما به صورت گروهی سرد یا گرم باشند، این یک فشارسنج کلی به شما می دهدبا...
جزییات بیشتر
اگر از لینوکس استفاده میکنید
محیط لینوکس توسط برنامه نویسان برای برنامه نویسان ساخته شده است. به خاطر اینکه، حتی ویرایشگرهای متن ساده که به طور پیش فرض در توزیع های لینوکس نصب شده اند،...
جزییات بیشتر
انتخاب یک اندازه
پس از انتخاب سبک فونت برای استفاده، مرحله بعدی تصمیم گیری در مورد اندازه فونت است. مرورگرها دارای اندازه های داخلی برای جداسازی سطوح مختلف سرصفحه و همچنین متن استاندارد...
جزییات بیشتر
عوامل روانشناسی
پیشنهاد شدهاست که عوامل از قبل موجود شانس تبدیل شدن به یک معتاد به گوشی هوشمند را افزایش دهند. مطالعات پیشین نشان دادهاند که استفاده بیش از حد از وسایل...
جزییات بیشتر
فواید SERP
تا به حال به بررسی سئو و SERP روی کاغذ پرداخته ایمو چگونه کل فرآیند از هر دو طرف کار می کند. همه اینها مفید است و ضروری است، اما...
جزییات بیشتر
نصب پلاگین ها در وردپرس
نصب افزونه بر روی سایت وردپرس یک فرآیند ساده است. روش دانلود و آپلود پلاگین ها توجه: اگر از افزونه های پریمیوم شخص ثالث استفاده می کنید، آنها معمولاً به...
جزییات بیشتر
جاوا اسکریپت خوش زبان قسمت چهل و دوم
چندین مقدار در یک مقدار واحد از نظر مفهومی، این به ما اجازه می دهد تا یک دسته قرار دهیم چیزهای مرتبط را در یک کیف قرار دهید و به...
جزییات بیشتر
تاثیر استفاده از اینترنت
آلوين تافلر محقق معاصر و شهير آمريكا در كتاب جنجالى «موج سوم»، نسل سوم رسانه ها كه همانا رسانه هاى ديجيتالى بودند را به صورت اجمالى معرفى كرد. (عبادي١٣٨٢ (نقش...
جزییات بیشتر
وب سرور ها
با HTTP، وب سرور باید به هر درخواست دریافت شده از مشتری پاسخ دهد. اگر مشتری درخواستی را ارسال می کند که سرور نمی تواند آن را پردازش کند، سرور...
جزییات بیشتر
اصول نصب افزونه
برای نصب افزونه ها و بهره گیری از مزایای آنها، دو روش عمده وجود دارد که در این بخش با جزییات آنها آشنا خواهید شد. روش اول: وقتی وارد وب...
جزییات بیشتر
اینترنت
اينترنت يك ابزار است، خزانه و رسانهايفوقالعاده ساده و سريع، براي كساني است كه آن را به خوبي شناختهاند و عميقا درك كردهاند.اينترنت در عين حال براي كساني كه هيچشناخت...
جزییات بیشتر
عوامل اثرگذار بر فناوری اطلاعات
از آنجایی که پذیرش و بهره برداري از فنآوري هاي اطلاعاتی و گام نهادن در مسـیر تعالی اقتصادهاي دانش محور، تا حدزیـادي تحت تـاثیر نگرشـها، باورها و ارزشهاي کاري هیات...
جزییات بیشتر
قوانین ارسال دیدگاه در سایت