Skip to main content
virginiebouquet
Participant
March 8, 2017
Answered

Comment Integrer un design photoshop dans grille fluide de dreamweaver?

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 is closed to new replies. Start a new post to keep the conversation going.
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>

View reply

2 replies

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>

Translate
virginiebouquetAuthor
Participant
March 9, 2017

Great, thank's for your help

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