June 8, 2005
Things look really good. The page rendered almost perfectly, it all mostly lines up, and there are only a couple of broken images. We're almost done, right?
There is still a lot of work to be done. Essentially, as it stands now, we have created a static Page Template that doesn't play well with the rest of HTML DB. Also, there are no navigational aids for HTML DB Studio left - they have been replaced by content from OTN. Which leads us to our next step - removing more OTN content.
Removing OTN Content
First of all, I don't need the content in the 3rd column at all on my pages (Resources For, Featured Downloads, Discussion Forums). However, I do want to retain that column and define an HTML DB Region Position there, so that I can put HTML DB dynamic content there.
To start , I copy the Body of my Page Template back into Dreamweaver, so that I can edit it in the WYSIWYG editor. I then remove all of the tables that make up the 3rd column content by simply selecting and deleting them. Finally, in the empty column that remains, I enter #REGION_POSITION_03#. This will allow me to position content in the 3rd column - such as the "Most Popular" and "Recently Added" boxes that I use on the home page of HTML DB Studio. With a little formatting and tweaking, I can right-align this content as well.
Next, I want to add a Region Position for the Application Menu. Just above the page where #BOX_BODY# appears is a table which has some static content in it. I can easily delete this content and replace it with my region position - #REGION_POSITION_02# - which will be the new home for my Menu.
Finally, I want to remove the content in the 1st column of the page (Product Centers, Technology Centers & Community). In all three sites, I use this region for a List of navigable sections. Just as I did before with the other two columns, I remove all of the content, all the while being careful not to alter the underlying table structure. In place of the content, I simply enter #REGION_POSITION_01#, which is my Region Position token.
Once all of the Region Positions are defined, we now have the page layout below:
Note that the images associated with the Menu and List Itema are broken. This is because the _base_href is set to http://www.oracle.com, and our image lives on http://htmldb.oracle.com. Since we are using a relative reference in the Menu Template, the image path resolves to http://www.oracle.com/i/orcl/orcl_breadcrumb_icon.gif - which is the wrong server.
If we look at the HTML from our template, we notice this line:
Fixing the CSS References
Note that the buttons "Submit an Application" and "Application Submission Guide" are not rendering properly either. This is due to the fact the we have not yet referenced the previously used Cascading Style Sheet(s) in this new Page Template. Since all we did was copy HTML from OTN, there was no reference of any CSS used in our original HTML DB Page Templates.
In order to correct this, let's load the production version of HTML DB Studio, view the source, and search for the term "css". (Hint: Using Firefox, you can simply hit the "/" key, start typing, the it will highlight any matches. Hitting F3 will tab to the next match. Pretty cool!) My search yielded three hits:
- <link rel="stylesheet" href="/i/orcl/otn_dyn.css" type="text/css">
- <link rel="stylesheet" href="/i/orcl/otn_new.css" type="text/css">
- <link rel="stylesheet" href="/i/css/core.css" type="text/css">
Upon copying & pasting these three lines into the new template, the buttons (and some other minor things) were back to normal. We're getting there - we now have a solid foundation for most of our Page Body in our Template.
Next, we'll tackle the Page Header & Footer, including how to make the Tabs work.