The News Box

Learn how to create a news box to post news items on your ECEn web page.

News boxes offer an easy way to keep frequent visitors to your website up to date on your basic news. For a class home page, you might post test dates or changes in homework assignnments or due dates. For a research home page, you could list recent publications, awards or recent discoveries. The list goes on.

News boxes work well on ECEn "main" style pages, like the main ECEn home page, and on ECEn "secondary" pages, like this help page.

To create a news box in the ECEn Web XML, we're going to use <news> tags.

These instructions assume that you already have a ECEn XML web page to edit and know at least a bit about XML. Most content, such as text, links, lists, pictures etc., belong in the <content> portion of your page, so make sure that you have a page with a <content> portion. If you need a quick tutorial or just a simple starter web page download, check out the Howdy, World Tutorial where you can get brief overview on what files you need to set up a basic ECEn XML web page.

If you need an example, have a look at the News Example page. You can view the XML source in your by clicking the 'this XML' at the bottom of the page. Or, the XML source located in the Common Tasks Downloads to the right. (Right click, Save Link Target As...)

Basic News Box

Here is some ECEn XML "code" to generate a news box:

<news>

<title>

<text>The Daily Pepper</text>

</title>

<style>visible date</style>

<article>

<title>

<text>Purple Pepper Grown in Provo</text>

</title>

<highlight-picture-file>purple_pepper_sample.png</highlight-picture-file>

<content>

<text>Peter Piper picked the first peck of purple peppers in Provo.</text>

</content>

<related-page>pepper_news.phtml</related-page>

</article>

</news>

Looking at the code, you can see that the entire news box is enclosed in <news> tags and that each news article is enclosed in <article> tags. Most of tags that define the content of the news story are not different than those that define content for typical pages.

There is one major difference between news boxes and other content in that you do not place the news code in the <content> block.

Here is what the news box would look like on an ECEn "secondary" XML web page:

[image]

To create a news box:

1	Create an opening and closing `<news>` tag. Make sure your `<news>` tag is within your `<page>` tags, but not within your `<content>` tags.

2	Within your `<news>` tags, give your news box a title using the `<title>` tags. Within the `<title>` tags, create `<text>` tags, and within them specify the title of your news box. In the sample case, the title was 'The Daily Pepper', but choose whatever is appropriate for your web page.

3	Underneath your`<title>` tags, use a `<style>` tag to specify whether your new box will have a 'visible date' or not. For all the possible new box styles, refer to the ECEn XML Templates Referece.

Now that we have set up a basic news box, we can place our news stories, or articles within it. Underneath your <style> tag, create a <article> tag.
You can place as many articles as you like in your news box, though we recommend about 3 or less. However, make sure not to enclose an article inside another article.

5	Give your article a title. Create `<title>` and `<text>` tags just like we did for the whole news box within the `<article>` tags.

Create opening and closing <highlight-picture-file> tags and specify the name of your news picture within the tags.
The BYU Templates suggest that your news picture should be 55 pixels wide and 60 pixels tall. The ECEn XML templates do not perform any picture resizing on the fly. It is easy to create a picture that size using image manipulation software. If you need help, please contact the ECEn Web Team and we'll be glad to help resize your picture.

After the <highlight-picture-file> tags, create an opening and closing <content> tag. Within the <content> tag, you can place just about any bit of content you like. Most news item simply have a <text> tag here. For a list of all valid news article content have a look at the ECEn XML Templates Reference.

8	If you news story has a web page that explains more about the story or something related, you can create a 'more' link for your news item. Outside of the `<content>` tags, create a `<related-page>` tag and within it, specify your 'more' link.

9	Create as many `<article>` tags as you'd like; we typically recommend three or less.

What if I still don't get it... Have look at the News Example and if you're still stuck, send an email to the ECEn Web Team and we'll be happy to help you.