Skip to main content
K
Keitodd29
Participant
August 26, 2012
Question

How to apply typographic and page layout elements to dynamic data?

  • August 26, 2012
  • 1 reply
  • 1515 views

How do I apply typographic and page layout elements to dynamic data. The product database is in place and I can pull the data and images to my page with no problem, but I would like to format the text and present the data using html. I have the dynamic binding element {rs_AZ_Products_Detail_pg.ItemLongDesc} inside a ApDiv1 tag.

The tutorials I have viewed, do not demonstrate or show how to apply typographic and page layout elements to dynamic data.  I have read " format the tables and placeholders for the dynamic data using the Dreamweaver formatting tools, but how do you do that! I have formatted text on a page in design view but how do you format text that is not there and will be supplied dynamically? What am I missing

Q - Should these binding elements {rs_AZ_Products_Detail_pg.ItemLongDesc} be in a table or is CSS layout design OK?

Q - I used the binding panel to bind HTML attributes but I see no change on the web? 

Q - Is there a good link to a tutorial?

If it could be demonstrated graphically that would be very helpful. It is not clear to me how to get this done?

Your help would be greatly appreciated

Thanks,

Keitodd29

This topic has been closed for replies.

1 reply

David_Powers
David_Powers
Inspiring
August 27, 2012

You style a dynamically generated page with CSS in exactly the same way as any other page.

If you're having difficulty envisaging how it will look, display the output of your page in a browser. Then save a copy of the page. This will give you a static HTML page to work on.

David_Powers
David_Powers
Inspiring
August 27, 2012

Just to add to my earlier comments. If the output from your database is a list of items, it might be best to display the results in a table. On the other hand, it looks as though it's a product page that you're creating. In that case, the layout should probably be in paragraphs and/or divs.

The database stores whatever text you put into it. If you need to display the product description as paragraphs, there are several ways you can handle it.

  • When storing the description, use two blank lines between each paragraph. Then when you display the output, pass it to the nl2br() function. This simulates paragraphs by inserting <br> tags in place of the newline characters.
  • Another approach is to put one new line between paragraphs, and use preg_replace() to replace the new line with closing and opening <p> tags like this:

<p><?php echo preg_replace('/[\r\n]+/', '</p><p>', $rs_AZ_Products_Detail_pg['ItemLongDesc']); ?></p>

  • Consider using an HTML editor such as CKEditor in your Insert and Update Record forms to store your product description in the database as HTML.

If you're comfortable using CSS, it shouldn't be too difficult to style your dynamic pages. But if your knowledge of CSS is shaky, I would recommend improving your CSS skills before going too far with the development of your site. Making changes to your data setup is a lot easier in the early stages than trying to retrofit an existing database.

K
Keitodd29Author
Participant
August 28, 2012

Thanks for getting back - Dave,

I entered your second paragraph suggestion but I am not sure I did it correctly. Here is the code:

  <p><?php echo $row_rs_AZ_Products_Detail_pg['ItemLongDesc']; ?></p>

  <p><?php echo preg_replace('/[\r\n]+/', '</p><p>', $rs_AZ_Products_Detail_pg['ItemLongDesc']); ?></p>

I placed it after the Az_Products_Detail_pg line but It did not put in the paragraphs and nothing happend. I also have a list in the middle of the paragraps on this page I would like to display

Q. What did I do incorrectly?

Below is the text to be displayed:

Make someone special feel special with a Customized and Personalized full color Autograph Photo Football Sports Ball. Before clicking the Add to Cart button to place your order, please cut and past the INFORMATION NEEDED below into your email and email to tony@awardzone.net.

INFORMATION NEEDED:

TEXT ABOVE PHOTO - 1 Line Recommended [Type your text here]

CENTER PHOTO OR LOGO -   (attach jpeg format image) 

TEXT BELOW PHOTO  - 1 Line Recommended [Type your text here]

TEAM COLORS - [Type colors here]

YOUR CONTACT PHONE - [Type your text here]

YOUR EMAIL ADDRESS -   [Type your text here]

(Optional) MASCOT NAME - [Type your text here]

And/or MASCOT LOGO - (attach jpeg format image)

YOUR IN HAND DATE? - [Type your date here]

IMPORTANT - Your final layout proof will be approved by YOU before imprinting and shipment.  *All personal information will remain confidential and will not be sold.

QUESTIONS? Email tony@awardzone.net or call Tony at 973-347-6819

Also, I downloaded CKEditor the install instructions said:

  1. Extract (decompress) the downloaded archive to a directory called ckeditor in the root of your website.

important note

You can place the files in any path of your website. The ckeditor directory is the default one.

The file was not compressed on my Mac in downloads. I tried coping the file folder ckeditor and pasting in the root of my site but nothing happend. Found the ckeditor.pack and exec file a Unix Executable File. Do I need to do anything with this file?

Thanks,

Keitodd29

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices