23
Can Your Web-to-Print Do This? Building an HTML Header
| Date post: | 14-Aug-2015 |
| Category: |
Documents |
| Upload: | digitalstorefront |
| View: | 270 times |
| Download: | 0 times |
Can Your Web-to-Print Do This?
Building an HTML Header
This document explores the mechanics of adding an HTML Header to Digital StoreFront (DSF). This document also shows examples of HTML with the promotional banner (a.k.a. Homepage Image or marketing banner).
Workflow
You add / edit a header on the StoreFront Customization page. The following slides show the workflow to edit the header.
Header Customization
The print shop administrator starts at the
StoreFront Customization page.
Pick the storefront that you want to edit.
Click the Edit Branding button to edit the
header.
Logo and Header
The StoreFront Branding dialog offers a
variety of ways to edit the header. Here the
Upload Flash / HTML content option is
highlighted.
The administrator needs to browse to an
HTML file, click Upload and finally click the
save button at the bottom of the dialog.
The dialog box will close and the preview
banner will update to show your HTML file
embedded into the header. Preview Banner
Here the preview banner looks right.
Now we’ll explore the details.
You need a to create an HTML file to use for your header. Once you have that file, you upload it per the previous section on workflow. The following pages will show a correct example of HTML and discuss how this works in Digital StoreFront. Note that you can create much more complicated examples. DSF simply loads the HTML that you provide in a container iFrame and your browser renders it. Note • The CSS styling that applies to the DSF site does NOT apply to any HTML that you load for the header. You need to add your own styling. • Use absolute URLs if you want to load style sheets, image files, etc. A simple alternative is to write styles directly into the HTML file . HTML tools like the Web Developer Firefox Plugin are useful for inspecting the page to see where you might have problems.
Creating HTML
<html>
<head>
<style type="text/css">
body{
margin: 0;
padding: 0
}
</style>
</head>
<body>
<table width="790" border="0" cellpadding="0" cellspacing="0" style="margin:0; height:66px;">
<tr>
<td width="300" bgcolor="#FFFFFF">
<img src="http://eprint.depot.com/siteimages/smdbanner.jpg" width="300" height="100" >
</td>
</tr>
</table>
</body>
</html>
The working HTML
Body Margin Style
This is added to override the default margin of the body tag. If you
don’t zero that margin, the effective height and width of your content
will be larger than you anticipate and the unfortunate result would be
that the header likely will grow vertical and horizontal scroll bars.
Image Height
This height controls the height of the content. You can
usually leave this out if you know that the content is
l00 pixels or less height. Including it ensures you have
that under control. If you use a size above 100 pixels ,
you will get vertical scroll bars.
Table Width
The table width if set to 790 will fit
snuggly in the built in iFrame that
contains this content. That iFrame
has a width of 790. If you exceed
790, you will see a horizontal
scroll bar.
iFrame for Header
iFrame Container
This is a view of FireFox Web Developer
inspect tool that shows how your embedded
HTML file is contained in a built in iFrame
HTML element. DSF supplies that iFrame and
your content is placed inside it. The width and
height of this iFrame are fixed and you can’t
change them.
iFrame for Header
<iframe id="ctl00_ctl00_cpContent_htmlDisplay_iframeContent"
src="%7E/PreviewPdf.ashx?FileId=1qVAQZsvvmU-&SITEGUID=ffa895b2-03cd-4f78-bb88-
b1c9840f5a45&V=0&D=42-25-12-08-42-27" frameborder="0" height="100" width="790">
</iframe>
iFrame Container
Here is the built in iFrame HTML element that
contains the header content. Note that it is fixed
height and width. If you exceed the height or width,
you will see scroll bars. You can NOT change these
values. You CAN change the height and width of
your content to fit.
Pot Holes in the Road
Adding an HTML header may not work out the first time. The following pages show some errant example HTML and the resulting header.
<html>
<head>
<style type="text/css">
body{
}
</style>
</head>
<body>
<table width="791" border="0" cellpadding="0" cellspacing="0" style="margin:0; height:66px;">
<tr>
<td width="300" bgcolor="#FFFFFF">
<img src="http://eprint.com/siteimages/smdbanner.jpg" width="300" height="101" >
</td>
</tr>
</table>
</body>
</html>
Exceeding Width and Height of iFrame
Image Height
The image height is set to 101 pixels which is 1
pixel beyond the iFrame container height. This will
result in a vertical scroll bar.
Table Width
The table width if set to 791 which
is 1 pixel beyond the iFrame
container size. This will result in a
horizontal scroll bar.
Margins
This example shows margins set
inline in the table rather than as
CSS styles.
Exceeding Width and Height of iFrame
Scroll Bars
This screenshot shows the header with
a vertical and horizontal scrollbars
which is caused by exceeding the height
(100px) and width (790px) of the iFrame
container.
<html>
<head>
<style type="text/css">
body{
}
</style>
</head>
<body>
<table width=“777" border="0" cellpadding="0" cellspacing="0" style="margin:0; height:66px;">
<tr>
<td width="300" bgcolor="#FFFFFF">
<img src="http://eprint.com/siteimages/smdbanner.jpg" width="300" height=“67" >
</td>
</tr>
</table>
</body>
</html>
Implicit Margin for HTML Pages
Image Height
You can counteract the implicit margins by reducing the height of your
content. For example, if you set the height to 67 pixels (Firefox) to offset
the implicit 33 pixel margin then you won’t see a vertical scroll bar.
None-the-less, it is recommended that you formally set margins on the
body, table, etc. so that you can ensure your content works well in all
browsers.
Body Margin Style
If the margin is not zeroed, the browser (not DSF) will add margin to
the embedded page which will add to the width and height of your
content. So, if a image height is set to 100, the margin will put the
total height above 100 and a vertical scroll bar will appear.
Advanced HTML
The previous example was pretty simple. You can add more sophisticated examples – whatever you can do in HTML is possible. The following pages show some possibilities.
Image Slider
<html>
<head>
<style type="text/css">
body{
margin: 0;
padding: 0
}
</style>
</head>
<body>
<iframe src="http://www.johnlaplante.com/dsf/slider/jQuery%20Slider/demo/demo_slim.html"
width="790" height="100" frameborder="0" scrolling="no">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
Referencing external Content with an iFrame
A great way to include external content is to use an iFrame element
in your embedded page to reference a web page that is on an
external server. This allows you to keep your embedded file pretty
simple and if you make changes to the referenced content, you don’t
need to update the embedded file in DSF. It also allows you to use
relative links to css, js, etc. in the external content. Note, don’t
confuse this iFrame with the iFrame element that DSF uses to
contain your content – if you use an iFrame, the site will then render
two iFrames, one inside the other.
Note that the iFrame element can retard scrolling. If content inside
your iFrame exceeds the bounds, it can be clipped/cropped.
Resources
The web is full of tools for marketing and promoting content. The
shown example is a free jQuery slider named Nivo Slider. Many more
sliders can be found.
HMTL5 Slider
This page shows the use of a slide in an iFrame.
You add / edit a HTML promotional banner on the Mange Homepage page of StoreFront Customization. The following slides show the workflow.
Promotional Banner Customization
Click the Manage Homepage button to go
to the page where you edit the promotional
banner.
You can insert HTML using the
HomePage text box. An advantage
to this location is that you can
specify the full width in a two-
column layout.
Be sure to use
HTML mode
You can also upload a HTML file
here. This is a similar workflow as
used for the Header.
HTML Details of Promotional Banner
Here is a sample shows a HTML slider in the banner space.
Be sure to use
HTML mode Buyer View
Here is a screenshot of the buyer view.
When you take the time to personalize the content on your StoreFront,
your content is more likely to get noticed and your customers are more
inclined to remain engaged.
If you haven’t already done so, please visit the DSF Forums site to learn directly
how other customers are using Digital StoreFront.
Alternately, to submit a topic of interest, please email [email protected].
Thank You!