Comment Integrer un design photoshop dans grille fluide de dreamweaver?

Report · Mar 08, 2017

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

Comment intégrer ce design

dans une grille de dreamweaver comme celle-ci?

Merci de votre aide

Report · Mar 08, 2017

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

<!DOCTYPE html>

<html>

<head>

<title>Modani</title>

$(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>

<h1>Modani</h1>

</div>

</div>

</header>

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

</section>

</div>

</footer>

</main>

<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="#">Contact</a></li>

</ul>

</div>

</div>

</aside>

</div>

</div>

</body>

</html>

Report · Mar 09, 2017

Great, thank's for your help

Adobe Community

Comment Integrer un design photoshop dans grille fluide de dreamweaver?

1 Correct answer