Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • CanYourW2PDoThis BuildHTMLHeader

    Cargado por

    DigitalStoreFront
    199 vistas18 páginas
    Build an HTML Header

    Título original

    CanYourW2PDoThis.BuildHTMLHeader

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Build an HTML Header

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    199 vistas18 páginas

    CanYourW2PDoThis BuildHTMLHeader

    Cargado por

    DigitalStoreFront
    Build an HTML Header

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 18

    Can Your Web-to-Print Do This?

    Build an HTML Header

    Workflow
    This document explores the mechanics of adding an HTML Header to Digital StoreFront. You add / edit a header on the StoreFront Customization page. The following slides show the workflow to edit the header.

    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.

    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 well explore the details.

    Creating HTML
    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. Digital StoreFront simply loads the HTML that you provide in a container iFrame and your browser renders it. Note The CSS styling that applies to the Digital StoreFront 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 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.

    The working HTML


    <html> <head> <style type="text/css"> body{ margin: 0; padding: 0 } </style> </head>

    Body Margin Style This is added to override the default margin of the body tag. If you dont 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.

    <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>Width Table Image Height </body> table width if set to 790 will fit The This height controls the height of the content. You can </html>

    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.

    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.

    iFrame for Header

    iFrame Container This is a view of FireFox Web Developer inspect tool that shows how your embed HTML file is contained in a built in iFram HTML element. Digital StoreFront supplie that iFrame and your content is placed in it. The width and height of this iFrame ar fixed and you cant change them.

    iFrame for Header


    <iframe id="ctl00_ctl00_cpContent_htmlDisplay_iframeContent" src="%7E/PreviewPdf.ashx?FileId=1qVAQZsvvmU-&amp;SITEGUID=ffa895b2-03cd-4f78-bb88b1c9840f5a45&amp;V=0&amp;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.

    Exceeding Width and Height of iFrame


    <html> <head> <style type="text/css"> body{ } </style> </head>

    Margins This example shows margins set inline in the table rather than as CSS styles.

    <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>Table Width Image Height </html> The table width if set to 791 which

    is 1 pixel beyond the iFrame container size. This will result in a horizontal scroll bar.

    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.

    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.

    Implicit Margin for HTML Pages


    <html> <head> <style type="text/css"> body{ } </style> </head>

    Body Margin Style If the margin is not zeroed, the system 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.

    <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> Image Height </body> You can counteract the implicit margins by reducing the height of your </html>

    content. For example, if you set the height to 67 pixels (Firefox) to offset the implicit 33 pixel margin then you wont 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.

    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
    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 dont need to update the embedded file in Digital StoreFront. It also allows you to use relative links to css, js, etc. in the external content. Note, dont confuse this iFrame with the iFrame element that Digital StoreFront 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.

    <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> Resources </body> </html>

    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.

    Add an HTML header to your Digital StoreFront to strengthen your brand image. Be sure to also include it in your customized header option under Email Customization to maintain professional communications to your customers.

    If you havent 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 Cynthia.Penrod@efi.com.

    Thank You!

    También podría gustarte