Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Part of my job is to create mockup designs for clients, where our plugin is inside their existing website. This involves finding a page, downloading all the content, adapting it to run offline (use no online content), and adding the plugin.

By far the hardest (most time-consuming) stage is adapting the site to use local content. I'm familiar with Chrome's "save page as" option, and always use it as the first step, but I'm left with a mountain of JavaScript and CSS which always references online content (these aren't the best-made websites, and they're quite huge. Most of the referenced content is from CDNs).

Since this is only a mockup, I don't care about the interactive JavaScript so I use Chrome's "copy as HTML" option to get a snapshot of the HTML, and delete any JavaScript it had. I also use Chrome to delete any complicated bits that aren't needed, like Facebook/Twitter plugins. But I'm still left with the task of searching through the HTML and CSS for URLs, ensuring the resource each links to was downloaded properly (quite often with CSS links they aren't), and updating the URL to use a relative path.

My background doesn't go far enough into web design, so I'm hoping there's a tool or workflow I don't know about which does this sort of thing easily.

Can anybody suggest an easier/faster method for getting a 100%-local, static copy of a page?

share|improve this question

2 Answers 2

The problem is that outgoing links is considered external sites so you will may need to edit these out, but generally the best application for grabbing websites online to a local copy is httrack. Give it a try, it has many options.

Quote from their manual page regarding external pages.

No external pages

Rewrite all external links (links that needs an Internet connection) so that there can be a warning page before ("Warning, you need to be online to go to this link..") Useful if you want to separate the local and online realm

share|improve this answer
    
The external content I'm talking about is images / CSS, rather than links. Anyway I'll give this a go and see if it does what I need, thanks. –  Dave Mar 23 '13 at 22:51
    
It supports external images as well as I believe, I remember using it on my own website and it converted the CDN images I had to local copy. –  bybe Mar 23 '13 at 23:09
    
I can't see how to tell it to only download a single page. For example, consider copying this: argos.co.uk/static/Product/partNumber/3380466.htm Obviously I don't want to copy the entire site! –  Dave Mar 23 '13 at 23:14
    
httrack.com/html/step2.html read the manual, it supports single pages as well as selecting depth. –  bybe Mar 23 '13 at 23:22
    
Actually, I can't get it to work at all, even with no restrictions (which seems like it should download the entire website) it only loads the single HTML file I point it to (no images or anything else), no matter what options I set. Here's the command line the wizard generates for the bare-minimum setup: httrack http://www.argos.co.uk/static/Product/partNumber/3380466.htm -O "/Users/Me/Downloads/Sites/test1" -%v. Is the page perhaps too complicated for it? –  Dave Mar 23 '13 at 23:44

To view entire web page offline without having to save dependent files, consider saving the web page as a .mht file. While IE supports the format, not all browsers support it though.

More on MHT from Wikipedia -

MHTML, short for MIME HTML, is a web page archive format used to combine resources that are typically represented by external links (such as images, Flash animations, Java applets, audio files) with HTML code into a single file. The content of an MHTML file is encoded as if it were an HTML e-mail message, using the MIME type multipart/related. The first part of the file is normally encoded HTML; subsequent parts are additional resources identified by their original URLs and encoded in base64. This format is sometimes referred to as MHT, after the suffix .mht given to such files by default when created by Microsoft Word, Internet Explorer, or Opera.

Beginning with Opera 9.50, the default format for saving pages is MHTML

Creating MHTML files in current versions of Google Chrome (25.0) is supported by toggling the "Save Page as MHTML" option on the "chrome://flags" page. However, enabling this experimental option disables the options to save pages as HTML-only or HTML Complete files

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.