آموزش طراحی سایت – طراحی واکنش گرا – قسمت دوم

توسط ۱۳۹۴/۰۸/۰۳ آموزش طراحی سایت 17 نظر

حال که با طراحی سایت ریسپانسیو و یا همان واکنشگرا آشنا شدیم می توانیم به دو صورت ساده متوسط و پیشرفته سایت خود را ریسپانسیو طراحی کنید. در این آموزش به طراحی سایت ریسپانسیو به دو صورت ساده و پیشرفته بااستفاده از فایل های استایل (CSS – Style Sheet) پیشرفته، خواهیم پرداخت.

طراحی ریسپانسیو

طراحی سایت ریسپانسیو به روش ساده

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

 

<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
   float: left;
   margin: 10px;
   padding: 10px;
   width: 300px;
   height: 300px;
   border: 1px solid black;
}   
</style>
</head>
<body>

<h1>Responsive Web Design Demo</h1>
<h2>Resize this responsive page!</h2>

<div class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p> 
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</div>

<div class="city">
  <h2>View Source</h2>
  <p>View the source code to see how this page was built.</p>
</div>

</body>
</html>

 

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

به این بحث بپیوندید / 17 نظر

  • هادی می‌گه:

    سلام میخاستم بدونم چ مدت زمانی نیاز است ک بتوانیم یک طراح سایت سطح بالا بشویم مطالعات جزیی در این رابطه داسته ام تقریبا مبتدی ام

  • مهدیه می‌گه:

    خیلی خوب بوذ .میشه رسپانسیو پیشرفته رو هم توضیح بدید ؟ ممنون میشم

  • سمیه می‌گه:

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

  • محمد می‌گه:

    با عرص سلام ممنون میشم اگه بتونید برای دستورهای مهمتر کامنتم جلوی دستور بزارید
    ممنون بابت سایت خوبتون

  • جوادي می‌گه:

    سلام
    تشکر از مطالب اموزشی،
    لطفا منابع مفید و کاربردی تو بحث طراحی سایت و طراحی اپلیکیشن موبایل معرفی کنید که اگه کسی خواست بیشتر مطالعه کنه

  • کرمی می‌گه:

    خواهشا غیر از اموزشهای طراحی سایت اموزش بخشهای دیگرو راه اندازی کنید
    ممنون

  • صادق می‌گه:

    چرا شما بخش آموزشتون ی راست رفته سر طراحی سایت و اونم طراحی سایت ریسپانسیو؟!؟!
    خب ی مطلب مقدماتی در مورد طراحی سایت میذاشتید بعد جزیی به مسائل ریزش میپرداختید..

  • admin می‌گه:

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

  • عاطفه می‌گه:

    خیلی عالیه که دقیقا کدهای طراحی سایت اومده
    فقط لطفا مدون و ممتد مطالب راجع به طراحی سایت را ادامه بدهید

  • طراحی سایت 123 می‌گه:

    لطفا مطالب آموزش طراحی سایت را ادامه بذهیذ یا سایت مناسبی را معرفی کنید

  • اقدس می‌گه:

    سلام من دانشجوی ترم اول کامپیوترم ب نظر شما از کی طراحی سایت را شروع کنم طراحی سایت را در چ زمانی یاد میگیرم برای طراحی سایت چه درسهایی پیش نیاز است

  • هدایت می‌گه:

    لطفا مطالب مربوط ب طراحی سایت را پیش ببرید

  • زمانی می‌گه:

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

  • میهن دوست می‌گه:

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

  • مصطفی می‌گه:

    چرا اسم این را ریسپانسیو گذاشتن معنای درستی فک میکنم نمی دهد

  • ریسپانسیو می‌گه:

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

  • مهسا می‌گه:

    سلام ممنونم از مطالب مفیدتون…. لطفا راجب فریم ورک ها یی مثل بوت استرپم مطلب بذارید ممنون

نظر خود را بیان کنید