Skip to main content
V
virginiebouquet
Participant
March 8, 2017
Answered

Comment Integrer un design photoshop dans grille fluide de dreamweaver?

  • March 8, 2017
  • 1 reply
  • 419 views

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 dComment intégrer ce design

Capture d dans une grille de dreamweaver comme celle-ci?

Merci de votre aide

This topic has been closed for replies.
Correct answer osgood_

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-social-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-social-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>

1 reply

O
osgood_Correct answer
Legend
March 8, 2017

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-social-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-social-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>

V
virginiebouquetAuthor
Participant
March 9, 2017

Great, thank's for your help

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices