آموزش طراحی سایت فروشگاهی شخصی تجاری در بابل

طراحی حرفه ای سایت وب سازان شمال در بابل با پشتیبانی 24 ساعته و سئو بالا با متد gtmetrix

آموزش طراحی سایت فروشگاهی شخصی تجاری در بابل

طراحی حرفه ای سایت وب سازان شمال در بابل با پشتیبانی 24 ساعته و سئو بالا با متد gtmetrix

آموزش طراحی سایت فروشگاهی شخصی تجاری در بابل

بدون شک، برنامه نویسی یکی از مهم‌ترین مهارت‌هایی است که امروزه نه تنها برای فارغ التحصیلان و دانشجویان رشته مهندسی کامپیوتر، بلکه برای سایر رشته‌ها و زمینه‌ها کاربرد مهمی دارد .

ابتدا وقتی از یک وبسایت بهینه سازی شده روی یک گوشی هوشمند بازدید کردید ناراحت نشدم.

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

طراحی ریسپانسیو (وب) یک راه حل ممکن است.


خوب:

فقط دانش ساده HTML / CSS مورد نیاز است

برنامه اضافی برنامه نصب / نصب ندارد



بد:

شما نمی توانید (به راحتی) CMS وب سایت را به یک سایت پاسخگو ایجاد کنید.

- هنوز آن را امتحان نکرده ام، اما CMS OS Project با قابلیت پاسخگو وجود دارد، نگاهی به: www.fork-cms.com



افزودن TipAsk QuestionCommentDownload



یک وبسایت پاسخگو مانند یک بهار عمل میکند که در هر اندازه فضایی متناسب است. شما می توانید آن را کشش و فشرده کنید. اگر ساختار خود را عوض کنید، بهار خود بر روی تعدادی از تاشو یا پیچ (نخ) تاثیر نمی گذارد. "اطلاعات" باقی می ماند.


شما نیازی به نوشتن همه چیز جدید ندارید. فایل HTML حاوی اطلاعاتی از یک وب سایت است، فایل CSS ساختار طرح را تعریف می کند.

به این معنی که شما فقط باید یک تگ جدید در یک فایل HTML موجود اضافه کنید و CSS Stylesheet را گسترش دهید.


افزودن TipAsk QuestionCommentDownload

مرحله 2: ابزار مورد نیاز

نرم افزار ویژه لازم نیست شما می توانید با ویرایشگر متن ویندوز / لینوکس کار کنید یا از Freeware Editior (به عنوان مثال Notepad ++، gedit ....) استفاده کنید.

برای این آموزش، من یک طرح طراحی HTML با استفاده از SelfHTML (یک سایت یادگیری HTML، متاسفانه فقط در آلمان) استفاده کردم.

http://de.selfhtml.org/layouts/nr10/index.htm

بنابراین من خواسته و اجازه از نویسنده دریافت کردم، بزرگ تشکر از او!

 





افزودن TipAsk QuestionCommentDownload

مرحله 3: یک خط کد را در فایل HTML اضافه کنید

 تصویر اضافه یک خط کد در فایل HTML

ابتدا یک متا تگ را در فایل HTML خود بین برچسب های <head> </ head> اضافه کنید:

<meta name = "viewport" content = "width = device-width، scale-scale = 1" />


این codline زوم پیش فرض برای دستگاه های تلفن همراه را تعریف می کند.


افزودن TipAsk QuestionCommentDownload

مرحله 4: پرس و جو رسانه برای دستگاه های تلفن همراه

 تصویر پرس و جو رسانه برای دستگاه های تلفن همراه

یک پرس و جو رسانه ای دارای ساختار است مانند:

<code>

media screen and (max-width: 481px) {



  / * CSS-Code خود را در اینجا بنویسید * /



}

</ code>



'media screen and (max width: 481px)' طرح CSS را برای اندازه صفحه با حداکثر 481px حداکثر تعریف می کند. (Resolution CSS) و زیر.

به عنوان مثال یک گوشی هوشمند FullHD (نمایشگر پرتره) دارای عرض 1080 پیکسل است، اما این همانند رزولوشن CSS نیست.

برای تبدیل "پیکسل های گوشی هوشمند" به "پیکسل های CSS" شما باید نسبت پیکسل را در نظر بگیرید.

یک گوشی هوشمند 1080p دارای نسبت پیکسل 3 => 1080/3 = 360 پیکسل (رزولوشن CSS)

در ویکیپدیا، لیستی از رایج ترین دستگاه های تلفن همراه که نسبت رزولوشن و پیکسل را نشان می دهد وجود دارد:

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

با تشکر از آزمایشکنندگان!


بنابراین ما نگاهی به 'screen.css' (واقع در ... / CSS / screen.css) می کنیم و بعد از تعاریف CSS موجود، یک پرس و جو رسانه ای با تعاریف ساختاری جدید اضافه می کنیم.

دیگر فایل های CSS برای نسخه های مرورگر قدیمی تر و برای مقاصد چاپ هستند.





افزودن TipAsk QuestionCommentDownload

مرحله 5: استفاده از واحدهای پویا برای نگهداری سایت پاسخگو

 تصویر استفاده از واحدهای پویا برای نگهداری سایت پاسخگو

در بعضی موارد بهتر است از واحد های درصد استفاده کنید یا از پیکسل های ثابت، اینچ، ام ... و غیره استفاده کنید.

بیانیه های درصد اجازه می دهد سایت را انعطاف پذیر در رابطه با اندازه صفحه نمایش نگه دارید.



در این مورد، ستون 640px را در عنصر "#body" حذف / اظهار نظر کردم.


افزودن TipAsk QuestionCommentDownload

مرحله 6: یک ساختار CSS جدید برای لینک های ناوبری تعریف کنید

 تصویر از تعریف CSS جدید ساختار برای لینک های ناوبری

 تصویر از تعریف CSS جدید ساختار برای لینک های ناوبری

برای سهولت هدف گیری لینک ها من برخی از حاشیه و فاصله بین آنها اضافه شده است.

مرزها (مرز: 1 پیکسل سفید جامد؛) در اطراف عناصر لینک به نگاه دکمه ها می رسد.



شما می توانید عناصر ناوبری را به سمت چپ، راست یا مرکز ترجیح دهید، همانطور که در تصویر دوم نشان داده شده است.


افزودن TipAsk QuestionCommentDownload

مرحله 7: خلاصه همه ستون های متن در یک ستون تک

 تصویر خلاصه همه ستون های متن در یک ستون تک

در نمای پرتره یک گوشی هوشمند دارای فضای بسیار افقی نیست. بنابراین شما باید ستون ها را به صورت عمودی به یک ستون بچسبانید. در این مثال ما دو ستون متن "#main" و "#subnav" داریم.


اگر شما "هر دو ستون را به سمت چپ" شناور "، ستون" #subnav "در بالای" #main "قرار می گیرد.

من دو ستون را با تعاریف ساختاری مشابه تعریف کرده ام، به طوری که آنها دارای همان عرض، فاصله هم ترازی و حاشیه هستند.



~ 2.7٪ فضای حاشیه به نظر می رسد بصری دقیق تر (مقایسه فضای مرزی در سمت چپ و راست). متاسفانه من نمی دانم کجا 0.6٪ رفته اند. گاهی اوقات شما باید ارزش ها را تخمین بزنید و آزمایش کنید.




افزودن TipAsk QuestionCommentDownload

مرحله 8: تست و نهایی کردن وب سایت شما

 تصویر آزمون و نهایی کردن وب سایت شما

 تست و نهایی کردن وب سایت شما

تست مهم است، هر مرورگر (موبایل) رفتار کمی دارد.



روش های تست:


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



شما می توانید از یک شبیه ساز برای تست یک وب سایت استفاده کنید، نگاهی بیندازید:

http://www.mobilexweb.com/emulators



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


FF: ابزار را با فشار دادن Ctrl + Shift + M شروع کنید و اندازه صفحه را انتخاب کنید

کروم: ابتدا ابزار توسعه دهنده را با فشار دادن Ctrl + Shift + I شروع کنید. چرخ دنده به سمت راست در زیر صفحه dev-screen ظاهر می شود. بر روی آیکون Cog کلیک کنید و به برگه overrides بروید. نماینده کاربر و نوع دستگاه را انتخاب کنید.



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


در نهایت در اینجا، HTML ویرایش این تگ به عنوان زیپ پیوند داده شده است.

  • فاطمه علیزاده

CSS

HTML

تگ

وبسایت بهینه سازی

نظرات  (۰)

هيچ نظري هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی