Highlighted

How can I move photos around

New Here ,
Jul 28, 2020

Copy link to clipboard

Copied

I used Dreamweaver 2020, windows 10.

What can i do to move photos around?

Views

81

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How can I move photos around

New Here ,
Jul 28, 2020

Copy link to clipboard

Copied

I used Dreamweaver 2020, windows 10.

What can i do to move photos around?

Views

82

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 28, 2020 0
Adobe Community Professional ,
Jul 29, 2020

Copy link to clipboard

Copied

Dreamweaver is not a page layout program like InDesign. You don't have the option to drag images around a page to create a layout. The program, for better or worse, assumes you understand HTML and CSS, and to a lesser extent Bootstrap and Javascript. Without an understanding of the basics, it's going to be tough to get your layout to do what you want.

If you understand how to work with HTML and CSS, look into Flexbox and Grid to create your layouts, then fill in the spaces with your images and text. 

Flexbox: https://www.w3schools.com/css/css3_flexbox.asp

Grid: https://www.w3schools.com/css/css_grid.asp


If you want to work with one of the buillt-in Responsive Bootstrap Starter pages: 
https://helpx.adobe.com/dreamweaver/using/bootstrap.html

That will get you started, but Bootstrap is a very, very large framework and to get the most out of it, you'll need to learn everything you can about the pre-built CSS classes within the framework. Whatever version you ultimately use, there is a ton of info online to explain what everything is and how to work with it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2020 1
Adobe Community Professional ,
Jul 29, 2020

Copy link to clipboard

Copied

Move your code, not the image.

 

image.png

 

<!doctype html>
<html lang="end">
<head>
<meta charset="utf-8">
<title>CSS Grid Evenly Distributed Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html { font-size: 16px }
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
font-size: 1.5rem;
margin: 0 auto;
max-width: 56em;
padding: 1em 0;
}
.grid {
/* Grid Fallback */
display: flex;
flex-wrap: wrap;
/* Supports Grid */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 1em;
}
.module {
/* Demo-Specific Styles */
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
/* Flex Fallback */
margin-left: 5px;
margin-right: 5px;
flex: 1 1 200px;
}

/* If Grid is supported, remove the margin we set for the fallback */
@supports (display: grid) {
.module {
margin: 0;
}
}
</style>
</head>

<body>
<div class="grid">

<div class="module">2</div>
<div class="module">3</div>
<div class="module">4</div>
<div class="module">5</div>
<div class="module">6</div>
<div class="module">7</div>

<div class="module">1</div>

<div class="module">8</div>
<div class="module">9</div>
<div class="module">10</div>
<div class="module">11</div>
<div class="module">12</div>
<div class="module">13</div>
<div class="module">14</div>
<div class="module">15</div>
</div>
</body>
</html>

 

 

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2020 0
New Here ,
Jul 29, 2020

Copy link to clipboard

Copied

Thanks for your response

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2020 0