Participant

Answered

Newbie Questions About Building a Shortcuts Page

Forum|Forum|7 years ago
July 31, 2018
3 replies
387 views

Hey Guys -

When it comes to web design, I'm definitely a novice; yet have been tasked with creating a webpage for proof of concept for someone and need a little guidance, please. They currently have a single page for internal use which provides shortcuts to a variety of internal services. The page basically includes a header followed by a 5 x 4 grid of internal sites to pick from. Each has a title, icon, and very short description. I can't post a full screenshot of it, but below is a snippet of 3 of the items with company info blurred out:

I've been asked to add more content using DreamWeaver CC 2018 yet they still want all links to be visible without scrolling. My approved options are to shrink the current links, rearrange them, or start all over from scratch if needed as it's just for temporary POC use. If only editing it, I could handle it as I've been a systems admin for many years, but doing this kind of thing has thrown me for a loop.

I tried importing a template to start from scratch, but despite downloading and extracting it's dxt file (plus others) and copying them to various paths in the installation folder, I cannot find how to import it.

So - if someone could please point me in the right direction for one of the below, I'd certainly appreciate it:

- Know of a free downloadable template which would somewhat match what I need where steps to install / import it are provided

- Alternate suggestions for creating this from scratch in DreamWeaver

- If there's a relatively simple way to shrink the content and reorganize it in perhaps a WYSIWYG method

- Whatever else

Thanks Guys!!

templates

This topic has been closed for replies.

Correct answer Nancy OShea

I highly recommend that you use SVG icons because they can re-scaled without any loss in image quality. You cannot do that with JPG or PNG. Below is a revised version with SVG icons.

!doctype html>

<head>

<title>Untitled Document</title>

<style>

body, html {

margin: 0;

padding: 0;

}

#container {

width: 80%;

margin: 0 auto;

text-align: center;

}

#icons { background-color: #646464; }

#icons div {

margin: 10px;

display: inline;

font-weight: bold;

color: #FFF;

/**adjust size as needed**/

font-size: 8vw;

}

#icons img {width:10%;}

</style>

</head>

<body>

Your header goes here...

</header>

<hr>

</div>

<hr>

Your footer goes here...

</footer>

</body>

</html>

Nancy OShea

Community Expert

No scrolling, eh? That's a code challenge. But this might be all you need.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
    margin: 0;
    padding: 0;
}
#container {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
#icons { background-color: #646464; }
#icons div {
    background-color: #2E94B4;
    margin: 10px;
    display: inline;
    font-weight: bold;
    color: #FFF;
    /**adjust size as needed**/
        font-size: 10vw;
}
</style>
</head>
<body>
<header>
Your header goes here...
</header>
<hr>
<div id="container">
<div id="icons">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
</div>
</div>
<hr>
<footer>
Your footer goes here...
</footer>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Correct answer

Community Expert

I highly recommend that you use SVG icons because they can re-scaled without any loss in image quality. You cannot do that with JPG or PNG. Below is a revised version with SVG icons.

!doctype html>

<head>

<title>Untitled Document</title>

<style>

body, html {

margin: 0;

padding: 0;

}

#container {

width: 80%;

margin: 0 auto;

text-align: center;

}

#icons { background-color: #646464; }

#icons div {

margin: 10px;

display: inline;

font-weight: bold;

color: #FFF;

/**adjust size as needed**/

font-size: 8vw;

}

#icons img {width:10%;}

</style>

</head>

<body>

Your header goes here...

</header>

<hr>

</div>

<hr>

Your footer goes here...

</footer>

</body>

</html>

Nancy O'Shea— Product User & Community Expert

pziecina

Legend

You could do this using a flexbox layout and the css calc() function to set the image width. However for this to work you would have know that everyone viewing the page is going to have the browser viewport size, (both width and height) set to exactly the same size.

You would also have to ensure that the image size (height and width) is exactly the same for every image and that the width plus any margin values will fit correctly in your layout. Otherwise there is a possibility that the images will not scale correctly, (which they may do anyway, due to browsers having different methods of handling fractional pixel values, (some scale 0.5 up, others scale it down)).

To use calc to work out the width of each image for 5 images horizontally with a 1px margin -

img {

width: calc(100vw / 5 - 10px);

margin: 1px;

}

What the above says is that it should calculate the size of each image by getting the width of the browser viewport, than dived that value by 5 (number of images horizontally) then subtract 10px (1px left and right).

Whilst you could also do this for the height of the image, it is not recommended unless you know how many images will be inserted on the page, and that everyone has their browser set to exactly the same size.

The problem with designing and coding for any browser/device is that you are always doing so for an unknown. Your user only neads to shrink their browser by a few pixels to throw the entire design off, though with flexbox at least it is not an impossibility.

O

osgood_

Legend

There must be an extension available to do that.........where he........pleazzzzzzze provide a url

BenPleysier

Community Expert

What a wide question for a forum such as this. The first questions that come to mind

what is " temporary POC use."?
how much real-estate is available on the client devices?
how many links are required?
how much space does each link occupy?

What I do know is that, in searching for a template, you are not only going to disappoint your client (Manager, Teacher etc), you are going to create more work than required.

You could try the flipping card method where the image is on the front of the card and a description is on the back. See Card Flip Animation #Bootstrap 4

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded