2 Replies Latest reply on Mar 9, 2017 12:06 PM by virginiebouquet

    Comment Integrer un design photoshop dans grille fluide de dreamweaver?

    virginiebouquet

      Bonjour,

       

      j'essai de me créer un site perso, mais je n'arrive pas à le faire un responsive,

      En utilisant dreamweaver, j'utilise la grille fluide mais comment puis-je insérer un design particulier que j'ai créé dans photoshop?

      J'espere que vous m'avez comprise...

      Capture d'écran 2017-03-08 12.17.58.pngComment intégrer ce design

      Capture d'écran 2017-03-08 12.18.16.png dans une grille de dreamweaver comme celle-ci?

       

      Merci de votre aide

        • 1. Re: Comment Integrer un design photoshop dans grille fluide de dreamweaver?
          osgood_ Level 8

          Here's a working template for you, copy and paste into DW, save and view in browser.

           

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8"/>

          <title>Modani</title>

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

          <script>

          $(document).ready(function() {

          $('.show-mobile-nav').css('cursor','pointer').click(function() {

          $('.main-nav').toggle();

          });

          });

          </script>

          <style>

          * {

          box-sizing: border-box;

          }

          img {

          max-width: 100%;

          height: auto;

          }

          body  {

          margin: 30px;

          font-family: helvetica, sans-serif;

          font-size: 14px;

          line-height: 20px;

          }

          .page-wrapper {

          display: -webkit-box;

          display: -ms-flexbox;

          display: flex;

          -webkit-box-orient: vertical;

          -webkit-box-direction: normal;

          -ms-flex-direction: column;

          flex-direction: column;

          height: 100vh;

          }

          header {

          display: -webkit-box;

          display: -ms-flexbox;

          display: flex;

          -ms-flex-wrap: wrap;

          flex-wrap: wrap;

          }

          .header-text  {

          display: -webkit-box;

          display: -ms-flexbox;

          display: flex;

          -webkit-box-flex: 1;

          -ms-flex: 1;

          flex: 1;

          -webkit-box-pack: center;

          -ms-flex-pack: center;

          justify-content: center;

          -webkit-box-align: center;

          -ms-flex-align: center;

          align-items: center;

          }

          @media screen and (max-width: 768px) {

          .header-text  {

          width: 100%;

          -webkit-box-ordinal-group: 3;

          -ms-flex-order: 2;

          order: 2;

          }

          }

          .header-text h1 {

          margin: 0;

          padding: 0;

          text-align: center;

          text-transform: uppercase;

          font-size: 90px;

          font-weight: 400;

          }

          @media screen and (max-width: 768px) {

          .header-text h1 {

          font-size: 70px;

          padding: 60px 0 40px 0;

          }

          }

          .header-logo {

          width: 250px;

          text-align: center;

          border-radius: 10px 10px 0 0;

          background-color: #000;

          }

          @media screen and (max-width: 768px) {

          .header-logo {

          width: 100%;

          background-color: #fff;

          }

          }

          .header-logo h4{

          width: 160px;

          height: 160px;

          margin: 25px auto 0 auto;

          background-color: #fff;

          }

          @media screen and (max-width: 768px) {

          .header-logo h4{

          background-color: #000;

          }

          }

          .main-content-wrapper {

          display: -webkit-box;

          display: -ms-flexbox;

          display: flex;

          -ms-flex-wrap: wrap;

          flex-wrap: wrap;

          -webkit-box-flex: 1;

          -ms-flex: 1;

          flex: 1;

          }

          .main-content {

          display: -webkit-box;

          display: -ms-flexbox;

          display: flex;

          -webkit-box-orient: vertical;

          -webkit-box-direction: normal;

          -ms-flex-direction: column;

          flex-direction: column;

          -webkit-box-flex: 1;

          -ms-flex: 1;

          flex: 1;

          padding: 50px 150px 0 150px;

          }

          @media screen and (max-width: 1000px) {

          .main-content {

          padding: 25px 50px 0 25px;

          }

          }

          @media screen and (max-width: 768px) {

          .main-content {

          -webkit-box-ordinal-group: 3;

          -ms-flex-order: 2;

          order: 2;

          }

          }

          .main-content-info {

          display: -webkit-box;

          display: -ms-flexbox;

          display: flex;

          -webkit-box-orient: vertical;

          -webkit-box-direction: normal;

          -ms-flex-direction: column;

          flex-direction: column;

          -webkit-box-flex: 1;

          -ms-flex: 1;

          flex: 1;

          text-align: center;

          }

          .main-content-footer {

          text-align: center;

          }

          .navigation {

          display: -webkit-box;

          display: -ms-flexbox;

          display: flex;

          -webkit-box-orient: vertical;

          -webkit-box-direction: normal;

          -ms-flex-direction: column;

          flex-direction: column;

          width: 250px;

          background-color: #000;

          border-radius: 0 0 10px 10px;

          text-align: center;

          }

          @media screen and (max-width: 768px) {

          .navigation {

          width: 100%;

          }

          }

          .navigation ul {

          margin: 0;

          padding: 0;

          list-style: none;

          }

          .navigation li {

          margin: 0;

          padding: 0;

          }

          .navigation a {

          color: #fff;

          text-decoration: none;

          display: block;

          padding: 0 0 20px 0;

          }

          .main-nav {

          -webkit-box-flex: 1;

          -ms-flex: 1;

          flex: 1;

          padding: 70px 0 0 0;

          }

          @media screen and (max-width: 768px) {

          .main-nav {

          display: none;

          padding: 0 0 0 0;

          }

          }

          .social-icons-desktop {

          border-radius: 0 0 10px 10px;

          color: #fff;

          width: 70%;

          margin: 0 auto;

          }

          @media screen and (max-width: 768px) {

          .social-icons-desktop {

          display: none;

          }

          }

          .social-icons-mobile {

          display: none;

          text-align: center;

          width: 50%;

          margin: 0 auto;

          }

          @media screen and (max-width: 768px) {

          .social-icons-mobile {

          display: block;

          }

          }

          .show-mobile-nav {

          display: none;

          border: none;

          background-color: #000;

          color: #fff;

          padding: 15px;

          font-size: 20px;

          }

          @media screen and (max-width: 768px) {

          .show-mobile-nav {

          display: block;

          }

          }

          </style>

          </head>

          <body>

          <div class="page-wrapper">

          <header>

          <div class="header-text">

          <h1>Modani</h1>

          </div>

          <!-- end header-text -->

          <div class="header-logo">

          <h4>Logo Goes Here</h4>

          </div>

          <!-- end logo -->

           

          </header>

          <!-- end header -->

          <div class="main-content-wrapper">

          <main class="main-content">

          <section class="main-content-info">

          <h2>Description de la marque</h2>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet delectus ducimus ea esse eveniet ex nostrum quasi sapiente temporibus! Cumque dignissimos laborum laudantium magni nam possimus quisquam similique vero!</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet delectus ducimus ea esse eveniet ex nostrum quasi sapiente temporibus! Cumque dignissimos laborum laudantium magni nam possimus quisquam similique vero!</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet delectus ducimus ea esse eveniet ex nostrum quasi sapiente temporibus! Cumque dignissimos laborum laudantium magni nam possimus quisquam similique vero!</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet delectus ducimus ea esse eveniet ex nostrum quasi sapiente temporibus! Cumque dignissimos laborum laudantium magni nam possimus quisquam similique vero!</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet delectus ducimus ea esse eveniet ex nostrum quasi sapiente temporibus! Cumque dignissimos laborum laudantium magni nam possimus quisquam similique vero!</p>

          </section>

          <!-- end main-content-info -->

           

          <div class="social-icons-mobile">

          <h3><img src="https://img.clipartfest.com/807fc52eb458bd35ea830e75defb6c8c_-evolution-of-social-media-so cial-media-clipart-png-no-background_1151-780.png"></h3>

          </div>

          <!-- end social-icons-mobile -->

           

          <footer class="main-content-footer">

          <p>&copy;Tous droits reserves 2016 Mondani</p>

          </footer>

          <!-- end main-content-footer -->

          </main>

          <!-- end main-content -->

          <aside class="navigation">

           

          <button class="show-mobile-nav">MENU</button>

          <div class="main-nav">

          <ul>

          <li><a href="#">Acceuil</a></li>

          <li><a href="#">Portfolio</a></li>

          <li><a href="#">Collections</a></li>

          <li><a href="#">Videos</a></li>

          <li><a href="#">Boutique</a></li>

          <li><a href="#">Historie</a></li>

          <li><a href="#">Description</a></li>

          <li><a href="#">CV</a></li>

          <li><a href="#">Contact</a></li>

          </ul>

          </div>

          <!-- end main-nav -->

          <div class="social-icons-desktop">

          <h3><img src="https://img.clipartfest.com/807fc52eb458bd35ea830e75defb6c8c_-evolution-of-social-media-so cial-media-clipart-png-no-background_1151-780.png"></h3>

           

          </div>

          <!-- end social-icons-desktop -->

           

           

          </aside>

          <!-- end navigation -->

           

          </div>

          <!-- end main-content-wrapper -->

          </div>

          <!-- end page-wrapper -->

          </body>

          </html>