iWeb FAQ - Adding HTML (alternative)
iWebFAQ.org
HTML Snippets are great but they don’t add the code where it’s supposed to be. Is there any alternative to add HTML code without having to do it manually? (Also works to add HTML to iWeb ’06)
The Intro:
You’re right. What HTML Snippets do is the following: An html snippet creates a new page in which the code you enter in the snippet is added to, this new page is embedded in the page you added the snippet to with an iFrame. Result: the code isn't even where it's meant to be.
For most people that will be satisfying/sufficient/good enough but in some cases it isn’t for me.
When I have an HTML Snippet on a page and I add the Statcounter code to all my pages using iTweak or iComment the code is added to every single snippet too. Thus a visit on that page with the HTML Snippet in it gets counted twice: first the page and second the snippet. Which is pretty annoying to me.
That’s why I now present you an alternative way to embed HTML in your iWeb created website.
The Solutions:
Chapter 1: Manually editing HTML (TextWrangler)
Chapter 2: Using MassReplaceIt (Recommended!)
Chapter 3: Using iTweak
Chapter 1: Manually editing HTML (TextWrangler)
If you have only few pages and few codes to add one solution would be editing the HTML code manually post-publishing. If you have many pages and many codes to add use Chapter 2 of this FAQ instead!
1. Where you want to add the code on your page in iWeb add a TextBox and type some text in it like HereGoesTheCodeForTheGallery or something and publish the site.
2. Once you published the site open the published page (.html) where you want to add the HTML code to in TextWrangler.
- If you publish to MobileMe go to iDisk/Web/Sites/ open the folder named after your site and you will find the published pages to open in TextWrangler
- If you publish to a folder go to the folder where you publish to and open the page of interest in TextWrangler
- If you publish to a server other than MobileMe connect to it via Cyberduck, select the page of interest, crtrl+click on it, choose “open with”, and select TextWrangler
3. Search for the spot where you want the code to be added (where you wrote HereGoesTheCodeForTheGallery or whatever). When you find the right place select the code you entered and paste the HTML code in the page instead of it.
4. If the instructions you’re following tell you to paste some code into the <head> part of the page search for </head> and paste the code which needs to go into the <head> part of the page right before the closing </head> tag.
Problem: Every time you publish you have to do it all over again. If you have a lot of codes and a lot of pages (and I do!) that’s pretty time consuming, thus that solution doesn’t work for me.
Chapter 2: Using MassReplaceIt (Recommended!)
The second solution is much better and works the same as the third solution...
1. Go here and Download MassReplaceIt (it’s free)
2. Open iWeb
3. In the page or in the pages you want to add the HTML code to, create a Text Box of the size of the result of the HTML code you want to add (if the code is a video or an iFrame you have to create a Text Box with the size of the video or the size of the page you want to display in the iframe unless you want to enable scrollbars)
4. In these Text Boxes enter a code or a word you’re sure it doesn’t appear anywhere else on your pages (I use BlueBlackWhiteNight1; BlueBlackWhiteNight2; BlueBlackWhiteNight3; ... one for each different html code, thus same html code=same code, because I’m sure that those appear only in the Text Boxes where I want to have the HTML code). Put this code Text Indent 2 px (Open the Inspector, go to the Text tab and choose List change the text indent to 2 px)
5. Publish your website to folder or iDisk
6. Open MassReplaceIt
7. In Find you enter BlueBlackWhiteNight1 or whatever
8. In Replace you enter the html code that has to go in the Text Box
9. You can set more than one Find&Replace at once if you want to add more than one
10. Save the Query and make it the default
11. In Files add the folder of your website
- If you publish to a folder choose the folder you publish to from iWeb
- If you publish to MobileMe select your iDisk/Web/Sites/ folder where iWeb publishes to.
If you can’t choose the iDisk because you don’t see it go to Finder/Preferences/Sidebar and check the box near the iDisk
12. Click “Replace” and the HTML code will be added
13. Re-run MassReplaceIt every time you (re-)publish
Important note about MassReplaceIt settings:
- In Options select Search=Contents, Location=Entire file/Filename, Options=Search whole words
-
-In Preferences When adding a folder toa search list=Add a folder, Search folder’s name and contents
-
-In MassReplaceIt go to Mask click on "Add" "Search items whose:" select "Extension" From the other drop down menu select "is" and then type ".html" (without "") and click on "Add..." and select "All criteria, must be satisfied to search a file". Doing this speeds-up the process of searching.
To fix it on a page copy and paste the textbox in the main textbox of your page. Now if you add text the “Snippet” will move automatically with the page.
If MassReplaceIt didn’t work. If MassReplaceIt didn’t find any of the TextBoxes to replace with HTML codes. Read this MassReplaceIt & HTML troubleshoot page.
Chapter 3: Using iTweak
The third solution works pretty much like the second one. But instead of using MassReplaceIt it uses iTweak.
1. Go to the iTweak page and download iTweak (it’s free)
2. Open iWeb
3. In the page or in the pages you want to add the HTML code to, create a Text Box of the size of the result of the HTML code you want to add (if the code is a video or an iFrame you have to create a Text Box with the size of the video or the size of the page you want to display in the iframe unless you want to enable scrollbars)
4. In these Text Boxes enter a code or a word you’re sure it doesn’t appear anywhere else on your pages (I use BlueBlackWhiteNight1; BlueBlackWhiteNight2; BlueBlackWhiteNight3; ... one for each different html code, thus same html code=same code, because I’m sure that those appear only in the Text Boxes where I want to have the HTML code). Put this code Text Indent 2 px (Open the Inspector, go to the Text tab and choose List change the text indent to 2 px)
5. Publish your website to folder or iDisk
6. Open iTweak
7. In Find you enter BlueBlackWhiteNight1 or whatever
8. In Replace you enter the html code that has to go in the Text Box
9. You can set more than one Find&Replace at once if you want to add more than one
10. Save the Search&Replace, next time you open the saved search&replace and don’t have to retype all the stuff in each time
11. Click on “Choose Published Site”
- If you publish to a folder choose the folder you publish to from iWeb
- If you publish to MobileMe select your iDisk/Web/Sites/ folder where iWeb publishes to.
If you can’t choose the iDisk because you don’t see it go to Finder/Preferences/Sidebar and check the box near the iDisk
12. Hit “Process Site” and you’re done.
Note: You have to run iTweak every time you re-publish from iWeb.
What is iTweak? and what is it good for? Have a look at this page
For further information and download on guimkie.com
iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.
It’s presented by Cédric and hosted by HostExcellence.com
I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.
Thank you for visiting and supporting my website.
- Cédric -
iWebFAQ.org on Facebook
