Home > Questions and Answers > General Questions

Question about slicing up Photoshop images into Dreamweaver (4)


03-16-2014 06:46 PM #1 mr miller (Member)
Question about slicing up Photoshop images into Dreamweaver

Do you normal slice up all your buttons and then import it into dreamweaver? Or is it safe to just create a hot spot on a flat lander image where your opt in button is that links to the offer?


03-16-2014 09:01 PM #2 zeno (Administrator)

Use CSS. Slicing up Photoshop files is a bad way to approach web page creation - very image heavy, not good for load speed. Hotspots are so 1999!

I.e. have a call to action block of text, then use CSS to make that <a> element have x padding/margins and a border, shadow, gradient background, etc.

Here's a sample of some CSS, just add class="cta" to one of your elements.

Code:
.cta{padding:10px 25px;background:#ffdd00;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZGQwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjk5MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top, #ffdd00 0%, #ff9900 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdd00), color-stop(100%,#ff9900));background:-webkit-linear-gradient(top, #ffdd00 0%,#ff9900 100%);background:-o-linear-gradient(top, #ffdd00 0%,#ff9900 100%);background:-ms-linear-gradient(top, #ffdd00 0%,#ff9900 100%);background:linear-gradient(to bottom, #ffdd00 0%,#ff9900 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd00', endColorstr='#ff9900',GradientType=0);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #000000;-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);text-shadow:0px -1px 0px rgba(000,000,000,0.3),
0px 1px 0px rgba(255,255,255,0.3);}
.cta:hover{padding:10px 25px;background:#ff9900;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmOTkwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmRkMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top, #ff9900 0%, #ffdd00 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9900), color-stop(100%,#ffdd00));background:-webkit-linear-gradient(top, #ff9900 0%,#ffdd00 100%);background:-o-linear-gradient(top, #ff9900 0%,#ffdd00 100%);background:-ms-linear-gradient(top, #ff9900 0%,#ffdd00 100%);background:linear-gradient(to bottom, #ff9900 0%,#ffdd00 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9900', endColorstr='#ffdd00',GradientType=0);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #000000;-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);text-shadow:0px -1px 0px rgba(000,000,000,0.3),
0px 1px 0px rgba(255,255,255,0.3);}
.ie6 .cta{padding:25px;background:#ffdd00;background:-ms-linear-gradient(top, #ffdd00 0%,#ff9900 100%);background:linear-gradient(to bottom, #ffdd00 0%,#ff9900 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd00', endColorstr='#ff9900',GradientType=0);border-radius:3px;border:1px solid #000000;}
.ie6 .cta:hover{padding:25px;background:#F90;background:-ms-linear-gradient(top, #ffdd00 0%,#ff9900 100%);background:linear-gradient(to bottom, #ffdd00 0%,#ff9900 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd00', endColorstr='#ff9900',GradientType=0);border-radius:3px;border:1px solid #000000;}

a:link{color:#000;text-decoration:none;}
a:visited{color:#000;text-decoration:none;}
a:hover{color:#222;text-decoration:none;}
a:active{text-decoration:none;}


03-19-2014 02:05 AM #3 mr miller (Member)

Ah man i'm only 15 years behind. Do you use muse? I can create lp's pretty easy but i'm trying to view their html code to add tracking links a such and can't figure out how to view it. Do you pull the code off my browser or what? When I export to html it creates a css folder, images folder, scripts folder.. index browser link, musemanifest and sitemap.


03-19-2014 02:30 AM #4 zeno (Administrator)

You need to export pages from Muse, as you have done, and then edit the HTML in the pages (e.g. index.html) directly using e.g. Dreamweaver, Notepad++, etc.


Home > Questions and Answers > General Questions