It's time to revisit a few items that can often get overlooked. Those particular items include creating a hyperlink, and uploading images. Hyperlinks are critical in the World Wide Web, and understanding them is just as important. Images offer a personal touch, and can liven up any website. We have prepared a small outline for each topic, and a short tutorial video.

Hyperlinks

Hyperlinks are what connect information, data, and pages together. Without these links, travel on the internet would be non-existent. It is important to understand the subtle differences between link types, and the creative ways you can use them. Some key things to consider is how the link should behave. Should the link take you to a new window, or another page in the same window? Creating links properly will ensure that users that use your site will not get lost, and they won't lose your site either.

In EZWeb, you have the option of linking to your files, your articles, other websites, email addresses and anchors. When linking to a file, simply select One of my Files from the link type menu. You will get a list of files that you have uploaded to your Image/File Center. The same applies to One of my Articles. There is no extra details required for these.

Sometimes it is helpful to preformat an email address. Selecting E-mail from the link type menu will provide you with a location to fill in the addressee email address, as well as an optional subject link, and body text. When a user clicks on this link, they will be prompted by their email program with a new message with the address, subject, and body text filled in for them.

The area some users get confused is how to treat links that go outside of their website. Have you ever gone to a website, clicked on a link or two, closed your browser, and then lost the site you were originally on? We don't want that to happen to you. In these cases, the user should get a new window, which prevents the user from accidentally closing your website. In the Link dialog box, there is a Target tab. Click on the Target tab, and you will have a couple of target options. When linking to a website outside of your own, like USCCB for example, make sure you select the New Window (_blank) target option.

One other concept that is frequently overlooked, is using an image as the link. Like text, you can use images as the base of a link, so when users click the image they are directed to the location you have specified. If you have some content like a Sunday homily, consider a small graphic that says "Listen to the Sunday homily", or something to that effect. The possibilities are endless.

Here is a short tutorial on how to create a hyperlink to another website in EZWeb:

Uploading Images

Images offer a personal touch. Whether it be graphical buttons, supporting images, or pictures of staff or events, you first have to upload them to your Image/File Center. One thing to keep in mind here is your organization of your Image/File Center. Did you know what you can create folders to manage your images and files? In EZWeb, you can create a folder like organization in your Image/File Center by creating Categories. To create a category, simply follow these steps:

1. Open your Image/File Center
2. Click Add/Delete Category
3. Select either My Files or My Images to place the category in
4. Give your category a name (i.e. Staff Photos, or Web Graphics)
5. Click Submit

Now that you have categories created, you can neatly organize the images and files that you upload.

Here is a brief tutorial video with instructions on how to upload an image to EZWeb:

Let's take a look at a few examples.

• Microsoft - Dark to Light blue gradient website background, and light to dark blue gradient window background
• United States Postal Service - White site background, with light gray window background
• CNET - White site background, black and gray window background with yellow bar
• Blogger - Light tan site background, with dark blue and tan window background with blue bar, and matching blue header

Now that we have seen a few examples, lets take a look at an EZWeb example. The Diocese of St. Petersburg uses a custom header, a light tan website background color, and a darker contrasting tan window color. Here is the breakdown of the components:

Site:

Header:

Website Background:

Window Background:

Notice how the website background color fills the webpage content area, and anything outside that area is filled with the window background color. In addition to a solid color, you now have the ability to apply any image as well. We have prepared a few examples that use the above sites as models. Take a look at the examples and consider now what is capable for your site. All of the demos are built on 800 page width. To see the window background area, your screen resolution will have to be at least 1024 x 768. If you are unsure how to change your screen resolution, visit this article on eHow.com covering "How to change your screen resolution."

EZWeb Demos:

• Church Demo Alpha - Microsoft model using green gradients, with border
• Church Demo Bravo - USPS model, white on gray solid, with border
• Church Demo Charlie - CNET model with custom header
• Church Demo Delta - Blogger model using red and custom header, with border

Now, how can you take advantage of this new feature? We have added the two backgrounds section right where you normally find them, under Color Scheme on Step 2. Underneath the Background section, you will notice two sections. One for the original website background, for which you have options for stock background, custom background, and solid color. The new section is labeled Window background, and has the same options. The section looks like this:

Lastly, you can now add a solid color border to your website. This border can be controlled right beneath the window background. You have the option of using a pixel width of 1 to 5, as well as the color. Borders can be helpful in defining edges, and creating contrast. As you may have noticed, several of the demo designs above have a border color defined. All of them are using size 1 pixel.

Experiment with the new section and see if it is something you can use to make your site better. Many of today's top sites use a solid white background, and a solid white window background. Other quality sites tend to use a soft or light website background, with a darker contrasting window background. Ultimately, your site is whatever you want it to be. Enjoy!

Notice that our featured site is using a thin dark brown border to wrap around their website. Doing this defines a nice boundry and is particularly effective when using background colors. Adding a border will soften the transition between similar colors or shades, and amplify or highlight transitions between contrasting colors. We do not recommend applying a border to sites using all white, although you are certainly welcome to do so.

To apply a border, click on Step 2, and then Color Scheme. At the bottom of the Background section, there is a place for you to select the size of the border (1 to 5 pixels), as well as the color of the border. In most cases, a black border will do the trick. If you are going to use a border, we recommend that you use either 1 or 2 pixels for your size.

Additionally, it is worth pointing out that the border color will not be noticeable on sites using 100% width. Your site must be using a fixed width for this to apply. Your options are 640, 800, and 1024. We recommend either 800 or 1024. For instructions on how to change your site width, visit the help article in our knowledgebase on CatholicWebHelp.com.

Note: To see the border and the window background when viewing a website, your monitor must be set to a resolution higher than the width of the website. In most cases, a website will be 800 pixels wide, so you would need 1024x764 monitor resolution.

Just add water.

CatholicWeb would like to introduce Fundraising. The CatholicWeb Fundraising program is the perfect solution to help raise funds for that school trip, parish project, or that special event. We have created a simple fundraising plan, documents, and materials to get you started. Fundraising is free to qualifying Catholic churches and groups, and CatholicWeb pays up to 50% of each order! Most groups earn between $500 to $5,000 per campaign.

So, how does it work? Well, the CatholicWeb directory is used by millions of traveling and local Catholics to lookup Mass Times, Clergy, Maps, Web Sites, Bulletins, and Businesses supporting the church. Web sponsors and our advertisers receive great exposure and thousands of impressions and clicks. To raise funds, your church, school or group sign-up area businesses as Web sponsors on your CatholicWeb directory listing. This exclusive program is a great way to raise funds and for local businesses to show support while promoting their business to a loyal Catholic community demographic!

The first step to starting your Fundraising campaign, will be signing up. You can access the sign up form here. Once you have signed up, and have been approved by our staff, you will be able to log in at CatholicWeb and access all of the Fundraiser Tools. In addition to the Instructions and FAQ, you will find Materials & Downloads, Payment & Fee Schedule, Manage your Promo Codes and Ad Sales, as well as Sales and Payment History.

One important step in the Fundraising process, is to ensure that you get credit for any Ad sales. This is done through Promo Codes, which you can customize for your Fundraising campaign. Follow these steps to set up your promo code on your EZWeb site:

1. Log into your EZWeb SiteBuilder
2. Click Step 1 - Account Setup
3. Click Account Info
4. Scroll to the bottom, and fill in your desired Promo Code.

Doing this step will link your "Sponsor this site" link to your promo code, so that when users click on the link, your promo code will automatically get filled in so that your fundraising program gets credit.

If you would like more information on CatholicWeb Fundraising, you can visit our Fundraiser information page.

Features

• Radius search and distance display
• Find Mass & Confession Times
• View maps & get directions
• Search by zip, city, and state
• Quick call phone number
• Links to Church Web sites
• Bookmark your favorite churches
• Add notes to a church
• Submit updates tool

Bonus Features

• Saint of the Day
• Daily Readings & Gospel
• Daily Mass Videos - Courtesy of CatholicTV.com
• International Listings - Provided by MassTimes.org

Screenshots

Home Screen	Locations
Church Details	Mass Details
Notes	Search
Readings	Video Listing
Video	About

Website Forms

We can create custom website forms to fit your needs. Do you need a registration form? Are you looking to collect information via survey? We can design a form as simple or as complex as necessary. Simple "Contact Us" forms start at $25. Here is an example of an in depth registration form: Bethany Center Registration. Click here for more information and examples.

Custom Graphics

Do you have a great idea for a website header, or other website design and lack the tools to do it? CatholicWeb can work with you to bring to life nearly any design or concept you might have. We have created custom headers, icons, and even scrolling transition graphics. Check out the custom header on the Catholic Schools Office in the Diocese of Birmingham. More information and examples can be found here.

Website Navigation

If you are looking for a user-friendly, interactive menu to complete your website, CatholicWeb can help. We can work with you to design and prepare a menu to your specifications. Most menus can be put together for $99 or less. An example of one of our custom navigation menus can be found here at St. Michael School in Greenville, PA. If you would like more examples, you can find some here.

Custom Slideshow

Do you have a collection of pictures you wish you could display in a convenient slide show? We can create a slide show for any number of images. Most slideshows can be prepared for $99. St. Jude Church in Boca Raton features a custom slideshow on their home page.

Complete Redesign

Interesting in revamping your entire site? We can create a custom design for your website without having a reinvent all of your content. Redesign can be done for as little as $199.

Questions or Ideas

If you are interested in any of the design ideas presented above, or if you have your own design idea that you would like help with, please call us and let us know. We would be happy to discuss your design idea or design request, and can provide a quote normally the same day. We can be reached toll free at 877.923.0777.

We are certain many of you have seen the new CatholicWebHelp.com website, but have all of you? CatholicWebHelp has recently undergone a site overhaul, and has been rebuilt with upgrade features. Need help with your EZWeb site? Look no further than our Knowledgebase, improved with an advance search. Now you can track and reference all of your support history in one convenient location.

If you haven't already, take a minute to explore the new CatholicWebHelp.com website. You will be greeted with a brand new layout. All of the latest knowledgebase articles, news items, and troubleshooters are right up front for quick access. When you log in, you will have access to all of your past questions and answers with CatholicWebHelp.

To log in, simply log in with your email account, and your CatholicWebHelp.com password. This password may or may not be different than your CatholicWeb account. If you have forgotten your password, click the Forgot Password link to have it emailed to you.

New features of CatholicWebHelp.com include:

• Access history of submitted tickets and view responses
• Improved compatibility for ticket attachments
• Add article comments to knowledgebase and related articles

View Tickets
Submit new tickets, view existing tickets or create new replies. Here you can view the history of every single ticket you've ever submitted to CatholicWebHelp.

Submit a Ticket
Submit a new ticket. Have questions that you can't find the answers to in the Knowledge base? Ask them here at your convenience.

Knowledgebase
Search support articles and find answers to frequently asked questions. Try the new search to get to your answers quickly.

Downloads
View our library of file downloads and links. Here you will find resource files that you may need

Do you have pictures from an outing or event that you would like to put on your EZ Web site and just don't know where to start? Perhaps you just didn't know you could create a slide show. Either way, EZ Web has a built in Slide Show generator that makes it easy to create a professional slide show.

To demonstrate, check out this example Slide Show created for a golf outing.

To get started, you will need to first prepare and upload your images to your Image/File Center. To do this, follow this steps:

1) Click on your Image/File Center icon in the top left hand corner.
2) When your Image/File Center loads, click on My Images.
3) You will see a list of your images, and a link above the green bar labeled Upload an Image, go ahead and click on Upload an Image.
4) From there, you can click Browse to navigate your computers file system, and locate the desired pictures to upload. Click Open when you have the correct image file, and then click Upload.

Note: You can upload multiple images at once using the same method. Simply click the Upload Multiple Images link, which is just above the Upload button. This will give you five locations where you can select images for upload, which is especially handy when you are uploading a slide show's worth of pictures.

Now that you have your images uploaded, we can now move on to creating your slide show.

1) The slide show feature is a layout option of an article. So we will want to create a new article by clicking Step 4 - Article Content, and then New Article.

2) In the Layout section of our new article, we need to select the Slide Show option, which is the lower right option. Be sure to click Save when you have selected the Slide Show layout option.

3) Next, we will need to define the introduction and content information located in the Content section. Here you can give your article a Category, a Headline, and Sub-Titles if necessary.

4) Additionally, this is where you will define where the Slide Show article shows up, just like a regular article. Select your display locations, and be sure to click Save. Next is the Teaser section.

5) Create a Teaser if desired, and be sure to select display locations.

6) Finally, we are now ready to organize our images. Click on Images, and you will see the Image Selection screen.

7) Under Slide Show Settings, you have the option of Displaying slides in a continuous loop. Check this box only if you don't want a start and end image. If you don't select this box, your slide show will have a beginning and an end, and buttons on the actual Slide Show will provide quick access to beginning, previous image, next image, and end.

8) Additionally, you have the option of determining how the slides transition, whether it be by the user, or automatically at a given time interval. Use the radio buttons to decide how your Slide Show functions.

9) Now you can click on the Purple Box, which will take you to your Image/File Center where you can select your first image. Be sure to enter your caption in the space provided below your image.

10) To add a new slide, you can click the link that reads Click Here To Add A Slide. Note that you have the ability to add as many slides as you'd like and you don't have to place an image in them right away.

11) You can also delete a slide easily by clicking Delete, and moving slides up and down in the order is as simple as using the left and right arrows on the slides. Remember to click Save when complete.
 

The only catch is that you have to install it yourself. In order to install Speckie, please follow the steps below:

1. Click Here to go to Speckie's download page.
2. Click on the "Download Speckie vX.X.X" text to start the download.
   1. If prompted, choose to "run" the file.
3. Once the download is finished (if the "run" option has not already been chosen), double-click on the file to run it.
4. Follow the on-screen instructions to install Speckie on your machine.
5. Once the installation is completed, you can launch Internet Explorer.
6. You will now see a bar pop-up at either the top or bottom of your window (depending what version of Internet Explorer you are using).
   1. If the bar is at the top of your window, click on it and select "Run ActiveX Control" to allow Speckie to run.
   2. If the bar is at the bottom of your window, choose "Enable" to allow Speckie to run.
7. Speckie should now be installed, and you will now receive a red, squiggly line under misspelled words.

Uploading an image - In order to use your own images in EZWeb, you'll first need to upload them to your Image/File Center. Please refer to this Tutorial on how to upload an image: Back to Basics: Hyperlinks and Images. Alternatively, you are welcome to use the Stock Images folder which is already available in your Image/File Center, and includes many free images for you to use.

Inserting an image via Content - The most versatile way to insert an image to a Page, Article, or Box is to use the Insert/Edit Image Wizard. This tool can be found in your editor tool bar. It is located in the top row with a yellow background and appears to have a mountain with a sun in it.

Insert/Edit Image:

1. In the Content editor section, click your cursor where you would like the image to be placed, and click the Insert/Edit Image button. 
2. The Image Properties prompt displays (see right). Now click the Browse Server button
3. Your Image/File Center window opens. Click My Images (or Stock Images) and navigate to the image you would like to insert
4. Click on the image you would like to insert. You return to the Image Properties prompt with the image you selected in the Preview section
5. The Width and Height attributes are filled in automatically for you. Add Alternative Text, and define the Border, HSpace, VSpace, and Align attributes if applicable.
6. Click OK.
7. Success! The image is now in the Content section. Remember to Save your changes.

TIP: If you ever need to update or define any of the attributes mentioned on step 5, you can easily revisit the Image Properties for a given image by Right-Clicking on the image in the Content section, and selecting Image Properties.

Attributes Explained:

Alternative Text - Also known as "ALT" text, specifies the text to be substituted for the image if the image cannot be displayed for whatever reason. Some reasons include slow connection, an error in the src attribute, or if the user uses a screen reader. EZWeb does not require an ALT attribute, but it is highly recommend you add one.
Width & Height - These attributes define the dimensions you want the image to be displayed as. This is different from the actual dimensions of the image itself. Although, EZWeb defaults these values to their actual size. You can scale images larger or smaller depending on your needs just be updating these values. It's worth pointing out that updating these values does not physically update the image. By default the aspect ratio is locked so the width or height will automatically scale itself when you adjust the other value. If you need to scale in only one direction, you can click the padlock first and then scale the image accordingly.
Border - This attribute defines the width of the border around the image. The border attribute takes a positive integer and the Preview will update to show you what it will look like. You may consider defining the border as 0 (zero) to eliminate the border when you apply a hyperlink to an image. The image will still be clickable but it will not display the link colored border.
HSpace - This attribute specifies the white space on left and right side of an image. Values can be any positive integer. Typical values are 5 and 10.
VSpace - This attribute specifies the white space above and below an image. Values can be any positive integer. Typical values are 5 and 10.
Align - Specifies the alignment of an image according to surrounding elements. The most common values here are left or right. Text will wrap around the image if you use left or right alignment.

Inserting an image via Layout/Images - A simplified version of inserting an image can be accomplished using the Images section of a Page or Article in conjunction with the Layout section. For pages and articles, a layout can be defined to place a single image. Layouts for pages and articles are similar to the Align attribute above. Layouts include Left Picture, Right Picture, Center Picture, and No Picture.

Define a Layout of a Page or Article by clicking Layout. Select the desired option, and Save your changes. If you select a layout with an Image, select Images from the left hand menu. A preview of your page/article displays with the image you selected, or a purple box if you haven't already select an image. In either case, to change the image, simply click on the image or purple box. Just like the above instructions, navigate to the image you would like to use, and click on it. You are returned to the Preview section with your image included. Remember to Save your changes.

Seperating these first two paragraphs is a Horizontal Rule set to 50% width and centered. This means that the line will fill half of the total width of the column, starting from the center. Lines such as these are particular useful when seperating sections or content in an article or page.

Here are some other examples of Horizontal Rule's:

Standard Horizontal Rule:

So how do we insert Horizontal Rules? In SiteBuilder, inserting a Horizontal Rule is as simple as clicking the Insert Horizontal Line button. The button is in the top row, between Insert/Edit Table, and Source (see right). By default, the Horizontal Rule will span the entire width of the section.

To adjust the settings of the Horizontal Rule, you will need to modify the Source Code. To do this, click Source in your editor, and locate the <hr /> that you want to update.  Add the appriopriate attributes to the hr tag.  You can add settings for width and alignment (see examples in blue above).  You can add either a percentage or a constant to the width attribute.  Using a constant defines a line in number of pixels, as opposed to percentage of available space.  You can also add left, right, or center to the align attribute, to define alignment of the line.

You will be prompted with a set of special characters, and all you need to do is click on the one you want to use. Here is the prompt:

Facebook Like Box/Button

Facebook offers a number of Social Plugins that you can use on any website. Today we are going to look at a specific example, the "Like Button", but these concepts will apply to most of the other Plugins as well.

First, we need to get the code. To do so, we'll go to https://developers.facebook.com/docs/plugins/

From the menu of Plugins, select "Like Button"

Now, we need to provide the URL to Like. Typically, this will be the website you are putting the button on. Type in the address, or copy and paste it into this field.

Now, we want to de-select the "Send Button" option. This will remove the Send button, and allow us to simplify the code that we'll need to use. Continue making any selections that you wish, and when you're ready, select "Get Code". An example of the setup that I used for placement in an EZWeb Box (Step 5) can be seen on the right. Note that I used a width of 130, because that's the amount of space you have to work with in a Box for use in the left or right column.

With the code prompt up, click the IFRAME tab to display the code for an IFRAME. Highlight the paragraph of code, and copy it (CTRL-C).

At this point, we are done with Facebook. We need to get to the Site Builder so we can paste the code.

With the SiteBuilder open, we need to figure out where you want this to display. The Home Page? An article? A box on the Home Page? Typically, this sort of thing is best suited for a Box, but your own application and settings will determine where you should install it. For this walk through, we are going to put it in a Box and display that box on the Home Page.

Click Step 5, and then New Box. Name your Box something relative, like "Facebook". Here comes the important part. We need to clean out that box, then paste the code in.

Click the Source button in the upper right hand corner of your editor. Now, Select All by hitting CTRL-A, or the Select All button in your editor, and then hit Backspace or Delete. Now you can Paste the code from Facebook by hitting CTRL-V, or Right-Clicking and selecting Paste. In the section labeled "Show this box on the following pages:", you can select Home Page. Save your changes.

That's it! You can move the box around using the Page Ordering tools on Step 3.

Embedding Video from GodTube or YouTube

Putting video on your website is very simple, especially if it's already hosted online at GodTube or YouTube, as those service offer convenient embedding resources. The advantages of doing it this way include not having to host the video file, and they configure the player for you. All you'll have to do is copy the embed code you provide, and paste that into your site. For this tutorial, we are using a video from GodTube as an example, but this strategy also applies to YouTube.

First, let's find a video for this walk-through. For example purposes, you can follow along with this video, "A Letter From God". On the video page, you should see an embed link, that is usually the word embed accompanied by < / >. Click embed, and an embed code prompt will display with some options. Make changes if you wish, but for this tutorial, we're just using the default settings. Copy (CTRL-C) the source from the first box, as highlighted in the example.

Now we need to Paste the code into our site. Typically, videos are best served on Articles, so that's what we'll show you. In your SiteBuilder click Step 4, and then New Article. Click Content on the left, and give your article a name. In the Article body, click the Source button, and paste (CTRL-V) the code we copied from GodTube.

Finally, select some display locations for this article if applicable in the "Show this article on the following pages" section. Scroll down, and Save your changes.

That's it!

Boxes can be used in many ways. The most common boxes are those automatically generated through articles and categories. You can create your boxes on Step 5, for anything from an image, to a box with custom colors, to a box containing custom widgets.

Before we get started, let's take a look at a few examples:

• St. Mark the Evangelist - Simple box on the right listing mass times
• Knights of Peter Claver - Using a custom "Find Your District" graphic, as well as a Member Login button. They also have a schedule of events in the left column
• Church Demo Charlie - Demo site using a clock widget

Creating new boxes is very easy. Simply open your SiteBuilder and click on Step 5 - Boxes. From there, click on New Box. A new box will be created for you and you will have just the Content option. You will see that a box has already been created, and you can start typing in whatever it might be that you want to express. You can format the cells of the box by right clicking in any of the cells, and selecting the Cell » Cell Properties option.

If you are interested in duplicating the exact same style of box that is seen in the articles section, you will want to copy and paste the following code into your new box:

To paste code, whether it be code such as provided above, or from another website, you will want to toggle the Source section of the portion you are working on. The Source button is located at the top right hand corer of the editor. (See left)

Inserting an image into a box is simple also. You will want to use images that fit inside a standard box. Images should be 130 pixels wide. You can get away with smaller, but not any larger. Once you have the image prepared, you will want to create a new box. Next, delete everything that is in the default box so that you are starting with a blank slate. Use the Insert/Edit Image button to insert your picture. Click Save, and you are all set.

Lastly, lets take a look at a widget example. A web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. Long story short, you can take working tools such as clocks and tickers and use them in your website. For this example, we will walk through installing a date and time widget into a box.

1. Create a new box, and name it "Date and Time"
2. Delete the entire default box content so that you are starting with a blank box
3. Locate and customize the widget. For this, we will visit Widgetbox, and use the Digital Time and Date widget
4. Set the Width to 130 and the Height to 40, and then click the Get Embed Code button. (It looks like this: < / >)
5. Copy the provided code, and paste it into your box. Remember to switch to Source mode

Here is the code you should have copied and pasted:

1. Define where the box/widget will display. Check the appropriate boxes under Show this box on the following pages, and click Save
2. Click Step 3 - Page Content, and then Page Ordering
3. Position your Date and Time box to the location you would like your widget to display
4. You're finished!

While walking through this tutorial, you may be wondering why we bothered to put an image or widget in a box. Using a box allows you to easily maneuver your information up and down and between the left and right columns. This tutorial is designed to explore the possibilities of a box and box content. We will take another look a widgets and how they can be used in articles and pages in a future article.

This tutorial will walk you through an example of creating a new page to use for your Online Map. Not only will this tutorial provide you with an interactive map, it will demonstrate how you can use articles to create any page you want. Here is an example of the map we are going to create: Westminster Abbey Online Map.

1. Open your SiteBuilder, and create a new article
2. Click Content, and name the article Online Map in the article headline
3. Open Google Maps in another browser window
4. Enter your church, school, or organizations address in the search area, and click Search Maps

1. Verify that the location found is accurate. When you have done so, click on Link in the upper right hand corner
2. Highlight and Copy (Ctrl-c) the second set of code provided from the box under the heading, "Paste HTML to embed in website"

1. Switch back over to your SiteBuilder, still the article content section, and click the Source button
2. Paste (Ctrl-v) the code provided from Google
3. Click Source again to preview the map. Right-Click on the "View Larger Map" link, and select Edit Link

1. On Link prompt, click the Target tab, and then select New Window (_blank) from the target drop down menu
2. [Optional] Define where the article should display by checking the appropriate boxes under "Show this article on the following pages"
3. Scroll down, and click Save

Now that we have the article complete, our Text Navigation users will want to update the text navigation menu to reflect the new Online Map. To do so, click Step 2 - Web Pages, and then Website & Menu Layout. From there, locate the Online Map display name, and change the Link Type to One Of Your Articles. Now in the Value category, select the article we just created. It will be named Online Map unless you chose to name it differently.

This tutorial is intended to provide not only an updated map, but demonstrate the flexibility the article pages have. Remember that you can create just about anything on an article.

Our goal is to make it as easy as possible for parishioners, traveling Catholics, and visitors to find Mass. Doing so requires accurate information, and unambiguous schedules. We have completely revamped our schedule system so that schedules are clear and consise. Every schedule now has unified syntax such as "HH:MM AM/PM", options to identify a Language, and the ability to define an end time. Each schedule has a notes section as well giving you the flexibility you need to clarify any schedule. Here is an example schedule:

Weekend Mass Times
Sunday: 8:00 AM, 10:00 AM, 12:30 PM Spanish
Saturday: 8:00 AM

Daily Mass Times
Monday: 7:30 AM
Tuesday: 7:30 AM
Wednesday: 7:30 AM
Thursday: 7:30 AM
Friday: 7:30 AM

Confession
Saturday: 3:15 PM to 4:00 PM or by appointment

Adoration
Friday: 8:00 AM to 12:00 PM

Updated Schedule Tools

We have made several advances to make adding the schedules as simple as possible. We've organized the schedules in such a way that makes the day a simple check box. Instead of having 3 schedules each for an 8 AM Mass that is celebrated on Mondays, Wednesdays, and Fridays, you can create one schedule for Daily Mass at 8 AM, and add Monday, Wednesday, and Friday.

We've also added convenient Duplicate and Delete buttons, allowing you to quickly copy or delete a schedule.

Another update is the Language dropdown. If a Mass is celebrated in another langues, select it from the drop down and check the box that says "Display Language" if desired.

How Do I Update My Church Mass Times?

This reference applies to the Listing page on TheCatholicDirectory.com. To get there, visit TheCatholicDirectory.com and navigate to your listing. Click the Update This Listing button. Select the second radio button, "I am simply updating outdated information".

One thing to keep in mind also is that all EZWeb sites have listings. We also have listing that are listings only and do not include an EZWeb. So if you have just a listing, or an EZWeb site, take that into consideration when reviewing these guidelines.

Updating a Directory Listing that you own or administer

1. Log into CatholicWeb.com
2. Click Directory Listings in your Member Console
3. Click Edit Your Listings
4. Make the necessary corrections, and click Update Listing

Note: The "Description" section should not include mass times or schedule information. Those areas of interest should be filled out in the Schedule Information section.

Updating a Directory Listing that is part of an EZWeb site

1. Log into CatholicWeb.com
2. Click Website Accounts in your Member Console
3. Click Edit Your Websites
4. Click Info for the account you want to update
5. Locate the General Information label at the top, and click Edit Information
6. Make the necessary corrections, and click Update Listing

Updating a Directory Listing that you do not own or administer

1. Locate the directory listing in The Catholic Directory
2. Click the "Update This Listing" link located on the lower, left hand side
3. Select the first option under "Update as Guest"
4. Make the necessary changes, and click Submit Listing Update

Note: Submitting listings updates are not automatic. When submitting updates to sites that you are not the administer, those listing updates will go to the administrator for approval.

Becoming the administrator for a listing

1. Locate the directory listing in The Catholic Directory
2. Click the Update This Directory Listing button located in the lower right hand column
3. Select the third option, Register to Become Administrator
4. Provide your CatholicWeb username*, phone number, and email address, and click Submit
5. A CatholicWeb administrator will review your application and typically reply to you within 24-48 hours

* You must have a CatholicWeb username in order to sign up as the administrator of this account. To sign up for an account please visit our member signup form.

TheCatholicDirectory has been customized just for you.  Your church name, city, and state appear at the top of the window.  Additionally, we brought highlights from your parish listing on TheCatholicDirectory to the front page, which include Mass times, Contact Information, and the current bulletin if applicable.  For other types of sites that may not have Mass times or Bulletins such as Schools or Knights of Columbus, we substitue the summary for a TheCatholicDirectory related banner graphic.

Where can I find it?

The affiliate window can be found on your EZWeb site as a built in Service box.  By default, it will appear just above the Web Sponsors box on your website.  Just like the Web Sponsors box, you can move the box using Page Ordering.  For more information on Page Ordering, please visit this CatholicWebHelp Knowledgebase article.
 

To link a file on your website, two things need to happen. The first, is the file must be hosted somewhere. You can host your file conveniently in your Image/File Center. The second step is linking the file on your actual website. We will cover both steps here:

Uploading your file.

1. Open your Image/File Center by clicking the Image/File Center icon. []
2. Click My Files
3. Click Upload a File
4. Click Browse, and navigate to the file you wish to upload, highlight it, and click Open
5. Click Upload to complete the process
6. When complete, you will get the message, "Your information has been saved"
7. Close your Image/File Center

Linking your file

1. Open your Article, Page, or Box that you wish to create or update a link
2. Click Content
3. Type the text that you wish to appear and be clickable
4. Highlight the text that you wish to be clickable, and click the Insert/Edit Link button
5. In the Link Type drop down, select "One of your Files"
6. In the Files drop down, select the file you wish to link
7. Click Ok
8. Your file should now be linked, so make sure you Save your changes

First, some examples. Here are some popular websites. Scroll to the very bottom of each of these examples, and pay close attention to how they defined a bottom to their site, and note the information found in the footer areas.

• United States Council of Catholic Bishops
• Adobe
• Yahoo!

In each site above, they have chosen a footer design that best fits thier site. In call cases, they have included some information, and links where applicable. Now let's move on to setting up a Page Footer on your site.

Once logged in, navigate to Step 3, and then edit your Page Footer. Click on Content to start editing. The simplest way to create an easy footer is to use a table. So, click Insert/Edit Table, and enter the following values, and then click OK:

• Rows: 2
• Columns: 1
• Border size: 0
• Width: 100 percent
• Cell spacing: 0
• Cell padding: 0

What we have created is a full site width footer with two rows. Since these are table cells, we can type in them freely. I went ahead and typed my email address, and my phone number in the first row. In the second, I typed Copyright 2009. Highlight both sets of text, and apply some Center justification to line them up nice.

While this would suffice as a footer, we want to go one step further and define the footer area by adding accenting colors. To do this, simply right-click in the top cell, and select Cell --> Cell Properties. On the Cell Properties prompt, you will notice a border color attribute in the lower right hand corner. Click Select, and then click on the color you would like to apply to the background of that cell row. Use your imagination here. What generally works is choosing colors that complement the dominent colors in your website background and window background. Choosing lighter or darker shades of the colors in your window background will often do the trick. With some trial and error, I'm confident you can come up with some nice colors to complete your footer, and website.

Note: Anytime you are using tables, you will to double check the font sizes as well as colors. Tables are not bound by the site settings, so you may need to apply font style and size to text in the table. Generally, applying a 12px font size works well.

First, what does News Sharing look like? Take the demo site we used for the slide show as an example, Mary Queen of the Holy Rosary School. You will notice that there are three article teasers displaying on the home page. Those articles all came from another source via News Sharing. We will use this site for demonstration purposes. Here is how to take advantage of News Sharing:

1) Log in to CatholicWeb.com and navigate to your SiteBuilder.

2) To use News Sharing, we first need to make sure the feature is turned on. To do this, click Step 2 - Web Pages, then Web Pages, and check the box next to News Sharing if it isn't already. Click Save.

3) Now click Step 3 - Page Content, then Open Page, and then edit News Sharing under Services. Once you have News Sharing open, click Content, and you will get a page looking like this:

4) The page your are viewing are our registered content partners. Some of the more frequent content providers continue to be Alka Seltzers (published every Monday), Vatican Information Service (M-F), Catholic World News (usually M-F), and Sunday Homilies (weekly). We highly recommend these, especially the Sunday Homilies, which are provided by Fr. Charles Irvin. In this example, we are going to click on Sunday Homilies. Doing so, will bring you to a screen like this:

By default, the Manual Select option has been activated. The Manual Select option lets you select individual articles from a given provider. This is useful when you aren't particular concerned with updating the material, but are interested in specific articles to display on your website. To select an article, simple check the boxes next to an article for Article and/or Teaser. Additionally, you will need to select a display location, just as if this article were your own. You must select a display location, or the articles will not display on your website. In this example, we are going to select Auto-Publish. Using this lets EZWeb manage any new content for you. Using this option will automatically update your website when new content is available. This is very useful in keeping your site fresh with material. When we select the Auto-Publish radio button, we will get a screen that looks like this:

Here we can define how many articles to display, as well as how many teasers. We have selected 3 articles and 1 teaser. We have also selected Home Page and News Page to display these articles. Make sure to click Save when you are done. Now, my website will feature the three most recent Sunday Homilies articles at all times, as well as display the most recent one with a teaser on my Home Page and News Page. When the next Sunday Homily gets published, my website will automatically update with the new content.

5) News Sharing is not limited to just the featured partners. Anyone can share content. If you have content you'd like to share, or shared content that you would like to use, we will cover that here. To share an article of your own, simply open the article (Step 4 - Article Content -> Open Article -> {any article} -> Content) and select Content. If you scroll all the way to the bottom, just before the Save button you will see a line that says "News Sharing - Share this article with other CatholicWeb community members". Checking that box will share your article, slide show, or photo gallery. Again, remember to click Save.

6) To use content from another site, whether it is a site of yours or another published source, you'll just need to make a few steps to configure. Open your News Sharing Content page, scroll to the bottom, and click Add Site Content Partners. Use the search function to locate a specific church or article that you are interested in. Check the sites that you want to add and click Add Checked Sites. Once you have saved your selections, return to the News Sharing Content section by clicking Content again. Now when you scroll to the bottom, the sites you selected are available in the section labeled Your Site Content Partners. Click on the partner name to define its publishing options. The publishing options seen here are identical to the ones outlined in Item 4 above.

To access the Special Notice, click Step 3 - Page Content, followed by Open Page, and finally (edit) Special Notice under Standard Page Elements. You will see the familiar editor, and you can add your notice as desired. Additionally, EZWeb is equipped with the ability to send this notice to child sites. There is a check box below the editor that reads, "Show this Special Notice on all child sites". This particular feature is especially handy if you are working on a school site, and want to broadcast a school closing to all classroom sites for example. Perhaps a diocese has an important update, the Special Notice can be carried out to child department sites automatically.

If you are interested in applying the scrolling text effect to your special notice, you will need to add the marquee tags to the source. Visit Knowledgebase article #136 at CatholicWebHelp.com for more information regarding scrolling marquee text.

Not sure what Text Navigation is?  Text Navigation as it relates to EZ Web is simply a navigation menu with text links.  These text links can be worded and customized to meet your needs.  If you'd like to see an example of a site using Text Navigation, check out this week's featured site.

Here is how to start using Text Navigation.  In the Website & Menu Layout section, select the radio button next to Text.  The Text Navigation configuration will display in the page, and you will see that all of your active pages have been transformed into text links.  The first column is the order, where you can arrange the labels using numbers.  The next column is the Display Name.  In those fields, you can define custom names for each of the links.  This is the name that will appear on your EZ Web Site.  The Link Type allows you to define links to any of your Pages, Articles, and even other Websites.  The Value column is where you can define what exactly the hyperlink will link to.  If you need to delete an entry, simply check the delete box, and click Save.  Please note that deleting the link will not delete the actual page, just the link itself.  Adding a new row is as simple as clicking the Add a New Row Button.  Remember to click Save when you are done. 

We have made it very simple to apply standard and hover colors to your text navigation. All you need to do is select colors from the Color Scheme menu on Step 2. In the Text & Boxes section, you will notice two new areas, Current Text Navigation Link Color, and Current Text Navigation Link Hover Color. Trial and error is the best method to finding colors that work with your color scheme. Give it a try, and enjoy!

Example

To get started, let's take a look at a finished Google Calendar, embeded in an EZWeb site. Here is a demo site with a calendar installed. Some things to pay close attention to here are the ability to flip between different months, toggle the view to weekly or agenda, and an option to print. Also, if you click on any of the scheduled items, a balloon will display with more detailed information, specific times, as well as locations and additional details if applicable. Additionally, if the user would like to copy an event to their own calendar, all they need to do is click "copy to my calendar»".

Getting Started

To set up a Google Calendar on your EZWeb site, you to set up a Google account if you don't already have one. To sign up for a free Google account, you can sign up here. Now, from Google's home page, click the "more" link in the upper left hand side, and then select "Calendar" from the drop down menu. For convenience, you can also click here to get to your Google Calendar. Sign in with your Google account.

Embedding the Calendar

We can always go back and update the calendar, so we are going to take care of the EZWeb portion now. Please note that these instructions assume you are using Text Navigation. Users using other forms of navigation can still complete the tutorial, but will have to create their own link to the Calendar article.

1. Log in to your Calendar on Google, and click Settings
2. Select Calendars from the Calendar Settings menu
3. Locate the name of your calendar, and click Share this calendar off to the right
4. Check the box that says Make this calendar public, and click Save (you will be prompted with a Warning, this is ok, make sure you click Yes)
5. Now click the name of your calendar
6. Locate the section labeled "Embed This Calendar", and click Customize the color, size, and other options

Here you have options that can be applied to your calendar. The most important is the Width and Height. You want to make sure that your Calendar will fit on your website. For example, the calendar shown above in our demo has Width set to 630, and Height set to 400. These numbers were chosen because we used an 800 pixels Page Width, and articles have an empty right column. Use the following chart for recommended widths:

Now for the embedding. First you will need to COPY the code that is provided in the box labeled "Copy and paste the HTML below to include this calendar on your webpage" by highlighting the provided text, and either right-clicking and selecting Copy, or hitting Ctrl-C on the keyboard.

The next step is loading your EZWeb SiteBuilder if you haven't already. From there, we are going to do the following:

1. Click Step 4 - Article Content
2. Click New Article
3. Click Content
4. Click Source
5. Paste (Ctrl-V) the code into the Source section
6. Give you Article a name, i.e. "Calendar", and Save your changes.

Your article Source should look similar to this:

Updating Your Navigation

At this point, you have successfully embedded your calendar, but we still have one more step to complete the project. That step is to create a link to your calendar. The most common way will be to update your Calendar Link in your Text Navigation Menu. Alternatively, you can create any old hyperlink that you would like to point to the new calendar article. Follow these steps for updating your Text Navigation:

1. Click Step 2 - Web Pages
2. Click Website & Menu Layout
3. Update or Add a Calendar Item with Link Type as "One of Your Articles"
4. Select in the Value field the Article that we created in the previus step, should be named Calendar

References

Google Calendar Help
Text Navigation and How to use it
Back to Basics - Hyperlinks and Images
Google Maps Tutorial
 

First, let's take a look at a site that is using article teasers. Mary Queen of the Holy Rosary School. This site has three active teasers. The first comes from the article, "Creating A Slide Show". The other two stem from articles in the News Sharing program. If you are unfamiliar with News Sharing, I would invite you to read this News Sharing article here.

To demonstrate, lets open one of your articles, and we will show you how to quickly add a teaser to your home page. After opening an article in SiteBuilder, click Teaser on the left hand panel. Type in the content that you would like to have appear in the actual teaser. We have provided a convenient button that will automatically fill in the teaser for you based on the text in the Content section. The button is at the very top of the teaser section, and reads, "Automatically generate the teaser headline and paragraph based on the article headline and body."

Once you have the teaser the way you want it, you still need to define where the teaser should display in the section labeled, "Show this teaser on the following pages:" Additionally, you can add images to the teaser in the Images section. To add images to a teaser, click Images on the left, and check the box that says, "Display Teaser Image" in the Teaser Image & Content Preview section. Add your image, and Save.

Once you've mastered creating teasers, you will find that eventually you will want to remove the teasers without removing the entire article. All you have to do to remove a teaser is deselect the display areas in the "Show this teaser on the following pages:" section of the teaser. Once you have saved your changes, the article teasers will have been removed from the respective display areas.

These instructions will help guide you through the QuickStart wizard. Using the QuickStart wizard allows you to quickly and easily update the look of your site while retaining all of your existing content. This tutorial is intended for use with Knights of Columbus sites, and will guide you through the QuickStart, making your transition to your updated site a breeze. This tutorial will still apply to using the QuickStart for other categories or sites.

1. Log into your SiteBuilder
2. Click on QuickStart in the upper left hand corner, the QuickStart wizard will open in a new pop up window
3. Select Knights of Columbus Templates from the category menu

4. Select your desired template by checking the radio button next to the template, and click the Next arrow
5. Page 2 is your Home Page content. Changes are optional. Click Next when ready
6. Page 3 is your Home Page image. Select the option you want to use and click Next
7. Page 3-a is a preview of your Home Page with the changes you have made. Click Back to make more changes or Next to continue
8. Page 4 is a list of featured Media Partners. Selecting them is optional. Click Next to continue
9. Finally, Page 5 is the article page. You have the default option of retaining all of your existing articles. At this time you can choose to have all of your articles removed, and start fresh. This option is not recommended. When you are ready, click Finish to complete the QuickStart.

Your site is now ready. You have successfully completed the QuickStart and can return to the SiteBuilder with your new template installed.

The simplest way to think of a table as it pertains to web design is to think of a table as a picture frame. This picture frame is one that you can adjust to your specifications and needs. Imagine if you had 6 pictures that you wanted to display on an article. You want to display those 6 pictures on 3 rows. Let's use a table to sort the pictures for us.

To create a 3x2 table, we will first start by creating a new article. You can actually do this anywhere the editor is available. To create the new table, go ahead and click the Insert/Edit Table button (seen right). The Table Properties prompt displays, and 3 rows and 2 columns are set by default. Each of the settings are adjustable, which gives you the most flexibility. Let's take a moment to review the attributes:

Rows - The number of rows in the table.

Columns - The number of columns in the table.

Width - The size in pixels or percent that the table will span. Note that you can define the width as a percentage of the space available for that particular section.

Height - The size in pixels that table will span. If you don't have a need for a specific height, leave this blank.

Cell spacing - The number of pixels BETWEEN each cell.

Cell padding - The number of pixels of padding space between the edge of the cell, and the content within the cell.

Border size - The size in pixels of the border around each cell. Set this to zero to have the borders not display.

Alignment - The horizontal alignment of the table itself (not the cells inside). Options are Left, Center, and Right.

When you're done, click OK. You should have returned to the editor, and you can see the empty table. Click your cursor in the cell you would like to edit. From there, you can type, insert Images, Links, as if it were a partition of the article or page.