Author Options:

Is there an easy way to port an instructable to a website that I'm making? Answered

I'm making an informational website for my Web design class using Adobe Dreamweaver. He wants it to be informational, so I figured it would be easy just to move my instructable to the site and format it a bit rather than start from scratch.

I tried copying the source code, no go since the pictures aren't stored "locally"
Right now I'm in the process of copying and pasting the text, but there has to be an easier way (this is a 30 step instructable)

Do you know how to port an instructable to another site, while keeping all of the images and text local to a flash drive? I'd like to preserve the notes option as well. I can't use the flash insert that the site has made, because it's too small and doesn't work right for my use. Any ideas?


Try downloading the PDF version. Convert it into a Word document. This should include all your picture notes, pictures, and formatting. Try it!

The PDF messes with the images, making them scale larger than they should; when I go to the smaller option, they look grainy. But I will use part of it as a tool, thanks for the idea!

Do you know of a way to get the nice rollover effect like the live site has? I can add in the original pictures and text from my computer, but the main problem is as such:

1. getting the rollover for notes
2. the same type of gallery format for the images at the bottom of the step
3. getting the icons from the top to be a larger scale without it pixelating.

 For the first one, you might want to look more into Javascript or something like Fotonotes.net. I don't know about the second one and I don't understand what the third one is asking. Just remember Instructables took a lot of time and money into designing their website. Respect their work and throw in some of your own creativity.

Don't get me wrong, I'm just trying to find an easy way to port the basic layout. I love how instructables works, I just have to do this for a project. I plan on altering to a completely different layout, but I can't do that until I get it on dreamweaver. For the third one, I just wanted to steal the nice icons that they made for a sort of montage or header, but I think I might just have to crop the original image to preserve the quality.

Did you try Lemonie's suggestion?  It may not work right because of the JavaScript stuff, and you might not want the sidebars.  But it might be enough of a start to import into Dreamweaver.

I did and it failed. The main thing is the images and what I had said above, because i already started copying the text in. It works, but none of the images or notes were preserved, let alone the layout separating everything.

Hmmm.  I see exactly what you mean.  It looks to me like it doesn't properly reference or pick up the CSS files, but I am not an expert.  I did find it interesting that all the cookie requests were preserved, but were coming from "file://" :-)

This is going to require someone more expert in modern Web authoring (CSS and so forth) than I am, to decipher.

Have you tried File>Save As>Webpage complete?


You're talking about effectively stealing the added value which the Instructables servers and software provide.  The right way to do this is to simply provide a hyperlink (URL) on your Web site pointing back to the Instructable.

If you want to provide the same instructions and pictures as you put into your I'ble, there's no reason why you can't do that, but you have to do the work yourself to add value.  Compare my modified crib Instructable version with my straight-up HTML document.  They both contain the same information (which is my intellectual property), but they are presented quite differently.  The I'bles version includes an added-value interface which is their intellectual property.