Skip to main content
Participant
May 28, 2022
Question

PSD sliced to html and images folder then Dreamweaver open html or images folder

  • May 28, 2022
  • 3 replies
  • 288 views

Hi Guys,

Just Wondering if I create a website in photoshop then slice and save to a html page and images folder.

Do I open this static html page in Dreamweaver or ignore this page and just rebuild the page through the images files folder onto a new index.html page generated by Dreamweaver?

 

Thanks    

 

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Community Expert
    May 28, 2022

    Use Photoshop to create design comps to show the client.  But HTML code generated by graphics apps is not fit for actual production use. 

     

    PHOTOSHOP:

    1. Create web optimized images in Photoshop and export them  in 1x, 2x, 3x sizes with File > Export > Export As panel.  

    2. Save assets to your DW local site folder.  For example, C:\myWebSite\

     

    DREAMWEAVER:

    3. Create a responsive layout with one of the pre-built Bootstrap Starter Templates.

    Go to File > New > Starter Templates > Bootstrap Templates. 

    Select a layout and hit CREATE button.

     

    4. Save newly created page as index.html (your domain's home page).

    5. Add your own text and insert web images with <picture> element and SRCSET attributes  for small, medium and large  devices.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

     

    6. Save web page with Ctrl + S & upload to your server or preview in local browser.

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
    Legend
    May 28, 2022

    That's sounds like a workflow used 20 years ago, exporting html from photoshop. That all stopped when responsive websites appeared. These days you would slice/export only the images you need for your website and then use html to rebuild what you designed in photoshop.........so more in keeping with your second thoughts.

    BenPleysier
    Community Expert
    Community Expert
    May 28, 2022

    Not sure why you would want to slice images. In any case, do not use the HTML created by photoshop.

     

    Save the image from PS into the images folder and follow the instruction from the following link.

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML

     

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