طراحی وب سایت واکنش گرا (RESPONSIVE)

پروژه "طراحی وب سایت واکنش گرا (RESPONSIVE) "  با تمرکز بر واکنش گرایی  به طراحی یک وب سایت ساده شخصی میپردازد که چند صفحه از اطلاعات شخصی را دارد.این پروژه یک دایکیومنت 95 صفحه ای دارد که با توضیح روش کار و کدهای لازم شروع میشود و در آخر کدهای مورد استفاده را با توضیحات آورده ایم. 

+ سورس کدهای پروژه بصورت page های قابل اجرا و قابل ویرایش (sourcecodes) 

برای ویرایش Page  ها هریک را با یک ویرایشگر مانند Adobe Dreamweaver باز کنید و متنهای دلخواه خود را اضافه کرده و ذخیره نمایید. برای اطمینان از کیفیت و سطح علمی پروژه ، نمونه رایگان آن را از لینک زیر دانلود کرده و پس از آشنایی کامل تر اقدام به خرید محصول فرمایید.

چکیده

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

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

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

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

تا چندی پیش برای نمایش یک وب سایت در موبایل، طراحی و برنامه نویسی مجزا تحت عنوان Mobile version یا سایت موبایل محور انجام می‌شد. در این نوع طراحی، سرور با توجه به شناسه مرورگر کاربر تشخیص می داد که کاربر سایت را با موبایل بازدید می کند در این حالت محتوای موبایل را در همان آدرس به او نشان می‌داد یا او را به URL مخصوص موبایل هدایت می نمود.

فهرست مطالب

عنوان      شماره صفحه

فصل اول ،آشنایی با ساختار HTML

1-1 مقدمه. 2

1-2 تاریخچه. 2

1-2-1 فرمت کلی یک فایل HTML.. 3

1-3 معرفی تگ ها 3

1-4 تگهایی فرم بندی متن.. 6

1-5  قرار دادن یک تصویر بر روی صفحه. 9

1-5-1 آشنایی با Image map. 10

1-6  طرز ایجاد لیست در HTML.. 11

برای ایجاد لیست در html دو روش داریم: 11

1-7 جدولها 12

1-8  فریم بندی در html 15

1-9 new page. 18

1-9-1 قرار دادن یک AVI بر روی Webpage. 18

1-9-2 قرار دادن موسیقی background بر روی یک web page. 18

1-9-3 قرار دادن نوشته متحرک بر روی web page. 18

1-10 آشنایی با HTML5. 19

1-10-1 فرم ها در HTML5. 21

1-10-2 خاصیت required برای فیلد ها: 22

1-10-3 Web Storage. 23

فصل دوم ،آشنایی با CSS

2-1 مقدمه. 25

2-2 چرا باید از CSS استفاده کنیم.. 26

2-3 ساختار نحوی دستورات CSS. 26

2-3-1 CSS Comment 27

2-3-2 id و Class در CSS. 28

2-3-3 اعمال دستورات فقط بر روی یک عنصر واحد توسط id. 28

2-3-4 اعمال دستورات بر روی یک گروه از عناصر توسط Class. 29

2-4 دستورات CSS را کجا بنویسیم؟. 30

2-4-1 External Style Sheet 30

2-4-2 Internal Style Sheet 30

2-4-3 Inline Style. 31

2-5 شیوه نامه های چندگانه. 31

2-6 ویژگیهای css. 33

2-7 قابلیت های جدید در css3. 42

فصل سوم ، واکنش گرایی (RESPONSIVE)

3-1 مقدمه. 45

3-2 اهمیت طراحی وب سایت واکنش گرا ریسپانسیو (RESPONSIVE) 45

3-3 مزایای واکنش گرایی (ریسپانسیو) 46

3-4 دلایل نیاز به سایت واکنش گرا 48

3-4-1 طراحی واکنش گرا، چقدر هزینه بر است؟. 50

3-4-2 آینده از آن ابزار های موبایلی است... 50

پیوست ،کدها و مستندات پروژه طراحی سایت واکنش گرا

کدهای صفحه اصلی.. 52

کد های صفحه جزئیات.. 55

کد تیتر بزرگ... 58

مجموعه کد های واکنش گرا 60

منابع.. 84