در این جلسه طراحی سایت شما را با تعیین موقعیت عناصر آشنا می کنیم:
Positioning به شما این امکان را می دھد که موقعیت ھر عنصر را به دقت در یک سند مشخص کنید. می توان مشخص
کرد که موقعیت یک عنصر به عنصر پدر خود وابسته باشد یا به پنجره ی مرورگر. با استفاده از positioning می توان یک
عنصر را بر روی عنصر دیگر لایه بندی کرد. Positioning شامل خاصیت position و چھار مقدار top, bottom , right , left
می باشد که مختصات دقیق محل قرار گیری عنصر را میتوان با استفاده از آن ھا تعیین کرد.
این خاصیت به تنھایی کار خاصی را بر روی عنصر انجام نمی دھد. و ھمیشه به ھمراه خاصیت ھای left , right , left یا
top می آید،( و بلعکس) اما قبل از مقدار دھی به این خاصیت ھا در اول حتما باید به خصوصیت position یکی از چھار
مقدار زیر را داد:
Static : مقدار پیشفرض، و ھمان حالت عادی قرار گرفتن عناصر طبق ترتیبی که در سند HTML است می
باشد.
Relative : اجازه می دھد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به عنصر پدر می باشد.
Absolute : اجازه می دھد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به پنجره مرورگر می
باشد.
Fixed : عناصر fixed ھمواره در محل خود باقی می مانند حتی اگر سند scroll شود.
حال به تشریح ھر یک مقادیر فوق به ھمراه مثال می پردازیم:
مقدار static ھمانطور که گفتیم تاثیری بر روی عنصر ندارد و ھمان حالت default عناصر می باشد، بجز در عناصر لیست
ھا (li, ol, ul ) . مقدار پیشفرض برای عناصر لیست ھا none است، اما اگر برای عناصر لیستھا از مقدار static استفاده
کنیم حالت تو در توی آن ھا از بین خواھد رفت.
نکته : این حالت قبلا به وجود می آمد اما پس از آمدن css3 مقدار none برای خصوصیت position برداشته شد و دیگر
ھمچین حالتی در مرورگر ھای جدید برای لیست ھا به وجود نمی آید و لیست ھا نیز مقدار پیشفرض static را دارند.
Offset Property
عناصری که مقدار absolute , relative و یا fixed را دارند را می توان با استفاده از property offset ھا، ( ھمان top ,left
right, bottom , ) تعیین موقعیت کرد.
این مقدار موقعیت یک عنصر نسبت به عنصر پدر را در صفحه تعیین می کند و نقطه ارجاع (نقطه شروع حرکت عنصر) از
مختصاتی که عنصر پدر دارد شروع خواھد شد. یا به عبارتی دیگر عنصر از محلی که در آن قرار دارد شروع به مختصات
گیری می کند. به مثال زیر دقت کنید تا با این حالت بیشتر آشنا شوید:
مثال برای مقدار relative :
کد html :
<div class="father">
<div class="children"> </div>
</div>
و کد css :
* {
margin: 0;
padding: 0;
}b
ody {
width: 500px;
margin: 10px auto;
}d
iv. father {
width: 400px;
height: 300px;
margin: 0 auto;
border: 4px solid green;
}d
iv. children {
width: 150px;
height: 150px;
background: #09f;
border: 3px solid red;
}حال style عنصر children.div را به مقدار زیر تغییر می دھیم
div. children {
width: 150px;
height: 150px;
background: #09f;
border: 3px solid red;
position: relative;
top: 10px;
right: 20px;
}می بییند که box ما از محلی که در آن قرار گرفته بود شروع به حرکت کردن کرده ، یعنی ۱۰px از سمت بالا فاصله
گرفت و ۲۰px از سمت راست فاصله گرفت.
نکته : استفاده از مقادیر منفی برای خصوصیات bottom , right , top , right مجاز می باشد
امروزه کاربران بعد از به پایان رسیدن سفارش طراحی سایت خود، انتظار دارند وب سایتشان در نسخه های مختلف موبایل و دستگاه های دیگر نمایش داده شود. به همین دلیل در همان زمان طراحی سایت باید به فکر نسخه های دستگاه های مختلف بود.
ریسپانسیو یا واکنشگر به این معنا که طراحی سایت به گونه ای می باشد که صفحات مختلف و ابزار های استفاده شده در وب سایت به درستی و ظاهر مناسب در انواع دستگاه ها نظیر موبایل ها، تبلت ها و کامپیوترهای رومیزی نمایش داده شود.
در آخرین گزارش رسمی سال ۲۰۱۲ فروش کامپیوتر های خانگی بسیار کاهش پیدا کرده و حتی کمتر از سال ۲۰۰۱ فروخته شده است.
در اینجا سوالی که پیش می آید این است که پس مصرف کنندگان چه نوع دستگاهی را جایگزین کامپیوترهای خانگی کرده اند ؟ آیا تبلت ها ؟ چیزی که انتظار می رود این است فروش تبلت به بیش از ۱۰۰ میلیون عدد در سال فروخته شود.
طراحی سایت و برنامه ها همه به یک نتیجه ختم می شود، این است که در سراسر دنیا یک میلیون مانیتور تولید شده است و باید خود را با تمامی آنها سازگار کرد.
طراحی و ساخت برنامه های اندرویدی، آی او اس و … شاید راهکاری مناسب به نظر برسد. شکی نیست که ساخت برنامه های موبایل برای سیستم عامل ها بهتر از نداشتن هیچ گونه برنامه ای است اما چگونه برای هر فروشگاه نرم افزار آماده کرد ؟
وقتی به سایت های خبری می رسیم، وب موبایلی بسیار بیشتر از برنامه های موبایلی حائز اهمیت می باشد. مرکز تحقیقات پیو پس از انتشار بیانیه ای بین ۵۰ الی ۶۰ درصد از کاربران تبلت ها ترجیخ می دهند اخبار را در وب موبایلی مطالعه کنند تا از طریق برنامه، این به این معنا نیست که نیازی به برنامه های موبایلی نمی باشد بلکه هم وب موبایلی و هم برنامه موبایل به یکدیگر نیازمند می باشند. اما داشتن یک وب سایت بزرگ موبایلی باید از اولویت بیشتری برخوردار باشد.
سال ۲۰۱۴ را می توان سال طراحی سایت ریسپانسیو نام گذاری کرد چرا که اوج مصرف در استفاده از این نوع طراحی بود، و این واقعیت که کاربران در حال حاضر وب موبایلی را به برنامه های موبایل ترجیح می دهند.
در دنیای اینترنت امروزه طراحی سایت شخصی یا پرسنلی به طراحی سایت هایی گفته می شود که تولید محتوای آن از خصوصیات شخصی یک فرد است. طراحی سایت های صفحات اشخاص در یک وب سایت شرکتی برای قراردادن اطلاعات شخصی و یا به منظور ایجاد سرگرمی برای پرسنل طراحی می گردد.

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

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

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

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