Editing HTML file in Dreamweaver....

New Here ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

Hi Dreamweaver Pros,

I would like to know how I can create more of these blue rectangular boxes below the first one, and also connect the additional rectangular boxes with a thin red vertical line.  See below example.  The file is in  html.

 

Stephen22940996kf6b_0-1650388443778.png

Stephen22940996kf6b_1-1650389072366.png

 

 

 

TOPICS
Code , How to , Other , Preview , Publish

Views

135

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
community guidelines
Adobe Community Professional ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

two points

  • the code and the screen shot doesn't fit the same region
  • the templating model doesn't seams to belong to DW

could you be more specific of give the appropriate veiw and code part

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
community guidelines
Adobe Community Professional ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

Use a vector graphics editor like Illustrator or Inkscape and export to SVG code.   Or use an SVG Generator.

https://www.smashingmagazine.com/2021/03/svg-generators/

 

Scalable Vector Graphics are math-based images that can be scaled up or down without any loss in quality.  SVG is perfect for flow charts, infographics, text and other non-photographic web images.  The code can be further edited in Dreamweaver to add custom animation and interactive functionality.

 

Hope that helps.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
LEGEND ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

 

See code below, works on mobile devices too!

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Boxes</title>
</head>
<style>
body {
font-family: helvetica, sans-serif;
}
.textBoxesWrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 30px;
width: 80%;
margin:	0 auto;
border-top: 10px solid #ed1d00;
}
@media screen and (max-width: 768px)	{
.textBoxesWrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 520px)	{
.textBoxesWrapper {
grid-template-columns: 1fr;
}
}
.textBoxGroup {
display: flex;
flex-direction: column;
}
.textBox {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #3778fa;
padding: 20px;
flex: 1;
border-radius: 4px;;
}
.textBox h3 {
margin:	0 0 5px 0;
padding: 0;
text-align: center;
font-size: 20px;
font-weight: 600;
color: #fff;
}
.textBox h4 {
margin: 0;
padding: 0;
text-align: center;
font-size: 16px;
font-weight: 600;
color: #fff;
}
.vertLine {
height:	70px;
width: 10px;
margin:	0 auto;
background-color: #ed1d00;
}
</style>
<body>
<div class="textBoxesWrapper">


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->



<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->



<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


</div>
<!--end textBoxesWrapper-->
</body>
</html>

 

 

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
community guidelines
Adobe Community Professional ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

very nice part of answer,

you should complete it with what's about the sibling ones, and the ending horizontal line ?

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
community guidelines
LEGEND ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

quote

very nice part of answer,

you should complete it with what's about the sibling ones, and the ending horizontal line ?


By @B i r n o u

 

OP just states they want boxes beneath each other with an adjoining line..........if they want to output the loopy-loop flowchart then they may need a more sophisticated approach.

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
community guidelines
Adobe Community Professional ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

It's unclear what this will be used for. 

 

If you want an actual flowchart, you might have better success with something like LucidChart.  They offer 100 templates for every possible discipline with free and tiered pricing plan options.

https://www.lucidchart.com/pages/landing/flowchart-software

https://www.lucidchart.com/pages/templates/flowchart

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
Adobe Community Professional ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

that's a nice alternative, but why going from scratch, if the template can already handle 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
community guidelines
Adobe Community Professional ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

Most flowcharts are complex multi-directional and multi-layered graphics.  This would be very challenging to do in HTML alone.

 

Use the right tools & methods for the project.  😉

 

 

 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
Adobe Community Professional ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

it seems to me that @Stephen22940996kf6b uses a template for that, this template must be able to manage the various branches, children, sibling, last column etc... hence my question to see on the one hand the corresponding code and the template itself (which by the way does not seem to be of DW origin)...


So, I repeat my words, before razing everything and start from scratch make sure that the existing can, or not, perform the work.

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
community guidelines
LEGEND ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

quote

the corresponding code and the template itself (which by the way does not seem to be of DW origin)...

 

By @B i r n o u

 

 

Looks to be  'muse' code of some kind, at least it has data-muse in it and clearfix lol so it's junk, looks like junk anyway.

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
community guidelines
Adobe Community Professional ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

This appears to have been prototyped in MUSE.  Need we say more?

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
Adobe Community Professional ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

perfect, so it should not be complicated to add branches, childs, and columns... it is enough to have a simple complete page and we can easily indicate to foo the blocks to add according to its needs....

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
community guidelines
Adobe Community Professional ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

LATEST

Ha, ha, ha, ha.  It's clear you've never worked with Muse code + added 3rd party widgets & templates.  Personally, I'd prefer to have a double root canal.  😝 

 

I'm not saying it can't be done with enough time and patience.  But some things are best scrapped and re-crafted with better tools. 

 

That said, the new Creative Cloud Express has a visual interface & templates for making flowcharts.  So that's another good option for the OP to consider.

https://www.adobe.com/express/create/chart/flow

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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