Sed tamen sine me loqui apud misericordiam tuam, me terram et cinerem,sine tamen loqui, quoniam ecce misericordia tua est, non homo, inrisormeus, cui loquor. et tu fortasse inrides me, sed conversus misereberismei. quid enim est quod volo dicere, domine, nisi quia nescio, unde venerim huc, in istam, dico vitam mortalem, an mortalem vitalem? nescio. et susceperunt me consolationes miserationum tuarum, sicut audivi a parentibus carnis meae, ex quo et in qua me formasti in tempore; non enim ego memini. exceperunt ergo me consolationes tactis humani, nec mater mea vel nutrices meae sibi ubera implebant, sed ut mihi per eas dabes alimentum infantiae, secundum institutionem tuam, et divitias usque ad fundum rerum dispositas. tu etiam mihi dabas nolle amplius, quam dabas, et nutrientibus me dare mihi velle quod eisdabas: dare enim mihi per ordinatum affectum volebant quo abundabant ex te. nam bonum erat eis bonum meum ex eis, quod ex eis non, sed per eas erat: ex te quippe bona omnia, deus, et ex stant causae,et rerum omnium mutabilium inmutabiles manent origines, et omnium inrationalium et temporalium sempiternae vivunt rationes, dic mihi supplici tuo, deus, et misericors misero tuo, dic mihi, utrum alicui iam aetati meae mortuae successerit infantia mea. an illa est, quam egi intra viscera matris meae?

Export HTML slices from Expression Design

The example "Fish stories" page above was created using Expression Design, which has an "export in HTML container" feature that creates an HTML page with appropriate CSS code for the various visual elements that you create. You might built Javascript to respond to an onclick event on the image DIV (click on the tab "Red Fish") or you might elevate an image from the underlying subdirectory and engineer a DIV that sits next to it and has its visibility switched on and off when the image is clicked (click on the tab "Blue Fish").

Examine the source code of this page to see the Javascripts supporting the onclick and onmouseover events.

Building the heading visual

Create a red rectangle, import fish picture, draw yellow lines and create text.

Create two rectangles with rounded corners with appropriate text. Create a white rectangle over the lower halves of the two rectangles to create the illusion of tabs.


Slice up the heading visual

Use the Slice tool to slice up the heading visual. The two slices over the tabs are the only necessary ones for this example.

Export the slices

File > Export

In the Export palette you can rename the various slices and examine the slice contents (i.e., good for removing overlapping pieces from other slices). The group of slices can be exported to a named HTML page in a specified location.

Engineer the Javascripts

Go into the exported HTML page and engineer the appropriate Javascripts.