Wednesday, January 10, 2007

How do I do it?

I've been asked to share my secret for getting CRON-O-Meter menus and nutritional reports into my blog. The answer probably won't be terribly helpful unless you already have more than a passing familiarity with coding HTML, and also have access to certain software programs. But here's how I do it:

Prerequisites:

  • knowledge of HTML coding
  • Excel (spreadsheet software)
  • Dreamweaver (website development software; optional if you're willing to do all the html work old-school style in a text editor)
  • You are using blogger or some similar blog software that uses its own "templates" (cascading style sheets--CSS--actually) to control the colors and layout of your blog

Steps:

  1. Highlight and copy (ctrl-C) the day's menu entries, then paste (ctrl-V) into an Excel spreadsheet (this step is necessary because you can't paste the menu data directly into Dreamweaver; other HTML editors might behave differently). Leave this here for a minute, while you....
  2. Output an HTML formatted nutrition report (using COM's report function) for the date in question, clicking the little diskette icon to save the report to somewhere you can find it afterward.
  3. Open a blank HTML document in Dreamweaver, select and copy the menu from Excel, and paste it into the design panel of Dreamweaver (not the code panel!). You are now done with Excel, it was just a means to get the menu into table form for Dreamweaver.
  4. Looking at the code panel of Dreamweaver (or viewing the raw HTML in a text editor like Notepad), you can see that the tags in the menu table are full of "width" and "height" attributes that are trying to control the way the table looks in a browser window. The beauty--even the purpose--of HTML is that you can let the browser do this work for you. Use less formatting, and your data will be properly viewable for more people, so you're better off omitting these attributes and letting the user's browser layout the table the way that best fits the user's browser window. So, using Dreamweaver's find/replace function (or deleting manually in a text editor), strip out the following:
    • "<col width="64" span="4" />" tags (the "64" and "4" might be other values for you); delete the entire tag.
    • "width" and "height" attributes from the <td> and <tr> tags; delete ONLY the attributes--not the tags themselves
  5. Now, open your HTML nutrition report that you created earlier in Dreamweaver.
  6. Looking at the code panel, you'll see all the <tr> tags have the "bgcolor" attribute. Strip this attribute out (but not the tags themselves!). Then, select and copy all the HTML for this report.
The next steps occur in your web browser, and involve creating and modifying a new post.
  1. Create a new blog post, and open the Edit HTML window
  2. Copy the HTML for the menu table you modified earlier in Dreamweaver and paste to the HTML editor in Blogger
  3. Back in Dreamweaver, select and copy the HTML for the nutrition report, and paste this into the HTML editor in Blogger.
  4. Switch to "Compose" view in Blogger, and you'll see your two tables there. Dress them up with whatever titles you want, and you can do some final formatting here if you like, before you....
  5. ...submit your information for posting to your blog!
I know that seems like a lot of steps, but it's not really that hard--as long as you understand how HTML works. I've gotten really fast at doing all these steps, and it only takes me a few minutes to get my menu and nutrition report posted now. YMMV (your mileage may vary). It's good if more of us are posting our data for others to learn from, so If you try this and discover that I've omitted steps or made mistakes, please feel free to ask, and I'll do my best to correct these instructions and help you through any problems you have.

Peace!

1 comment:

Amy said...

OK. You're clearly out of my league. I may try to start posting mine again, but I guess I'll just have to go with an uglier format :-). Go you, though!

BTW, I've enjoyed your posts on the list, as well as reading your blog. Good luck with it!

Amy