Scribd
Upload
4K views

Corel Website Creator Tutorial

Corel Website Creator X5 can integrate your custom Style Sheet directly into an existing Website. This way you can easily change between Styles, or simply pick and choose when and where a particular style element is used.

Uploaded by

danstein207
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4K views

Corel Website Creator Tutorial

Corel Website Creator X5 can integrate your custom Style Sheet directly into an existing Website. This way you can easily change between Styles, or simply pick and choose when and where a particular style element is used.

Uploaded by

danstein207
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

Adding

a custom Style Sheet


Corel Website Creator X5 can integrate your custom Style Sheet directly into an existing Website. This way you can easily change between Styles, or simply pick and choose when and where a particular Style element is used. Difficulty: Intermediate Materials: style2.css Preparation From the File menu in Corel Website Creator X5, select New Site > Blank Site.

Name your site css_test.

Step 1
From the View bar, select the Page view.

Step 2
From the Standard toolbar, select the text box.

Step 3
Draw a text box on the page and type a short sentence.

Step 4
Highlight the text and select the H1 tag from the Properties palette.

Notice the formatting of the standard H1 tag in a new blank site.

Step 5
From the View bar, select the Style view.

Step 6
From the Styles Tree, right click Active SiteStyles and select Add CSS File

Step 7
The browse dialog window will appear. Browse for your css file and click Open. The style2.css file is provided in the Materials section of this tutorial.

Step 8
When prompted, select Site-wide from the CSS Scope window.

SiteWide Available in all pages throughout the site. MasterBorder Specific Available in the masterborders that you select. Page Specific Available in the pages that you select.

Step 9
You will now see style2.css under the Active SiteStyles list in the Styles Tree.

Tip: You can now edit style2.css directly from within Corel Website Creator X5.

Step 10
From the View bar, select Page view.

Step 11
Notice the H1 tag is formatted as the Style2.css file designates.

Wrapping Up
You now know how easy adding a custom Style Sheet is in Corel Website Creator X5. Website Creator X5 maintains flexibility by allowing you to apply your custom Style Sheet to the entire site, select pages, or just your websites masterborders.

Adding a Favicon
There are many benefits to including a favicon for your Website. Your bookmarked links will be instantly recognizable to your site visitors when browsing through their favorites list. A favicon sets your Website apart from the crowd as not all Websites have one. Increase recognition with a 16x16 icon that represents your companys brand. Difficulty: Intermediate Materials: favicon.ico

Preparation
A 16x16 image will be needed. It should be named favicon.ico. We are also going to need a site to work in. From the File menu in Corel Website Creator X5, select New Site > Blank Site.

Name your site favicon.

Corel Website Creator X5 manages your Websites file assets for you. What this means is that rather than uploading the image to your server manually, Corel Website Creator X5 can do it for you.

Step 1
From the View bar select the Assets view.

Step 2
You will be taken to the Files tab of the Assets view. Click the New File button from the View bar.

You will now see the File dialog window.

Step 3
Browse for your favicon (named favicon.ico) file by clicking the Browse button next to Location.

Locate the .ico file and select it. Website Creator X5 will name your asset automatically. You do not need to change this.

Step 4
Check the option for Always Publish File. Then click OK.

You will now see the favicon as an asset in Corel Website Creator X5.

Since Corel Website Creator X5 automatically manages your assets the .ico file will be placed in your assets directory. We will need to move this file to the /root directory with the index page.

Step 5
From the View bar, select the Publish view.

Step 6
You will see an assets folder in the local directory (left side). Double click the assets folder.

Step 7
You will be taken to the images folder. Double click the images folder.

Now you will see the favicon.ico file you added.

Step 8
Right click the favicon.ico file and select the Cut option from the menu.

Step 9
Use the Up Directory button to move back to the /root directory.

Step 10
Right click in the white area of your local structure and select the Paste option from the menu. This is what you will see.

The favicon code needs to be between the <head></head> tag of your Website homepage.

Step 11
Copy the following code. <link rel="shortcut icon" href="favicon.ico">

Step 12
Select the Page view button from the View bar.

Step 13
Select the Layout Area. Click the HTML button located in the Layout properties palette.

Step 14
Locate the free area after the <title></title> tags and paste your copied code here by clicking Ctrl+V.

Step 15
Publish your site remotely and your Favicon will be visible to the world!

Tip: If you are not seeing the Favicon in your browser, try adding the page to your bookmarks (Ctrl+D). You can also try clearing your cache.

Wrapping Up
We have learned how to include a favicon in your Corel Website Creator X5 built Website. Including a favicon is a simple way to set your Website apart from the crowd and to reinforce your Website brand.

Creating a New SiteStyle


A SiteStyle is a collection of graphic and text elements that are applied to all pages in your Website built in Corel Website Creator X5. A SiteStyle can be changed at any time, updating the look and feel of your Website instantly. In this tutorial we will create a basic SiteStyle by using graphical elements and minor text style editing. Difficulty Novice Materials Style.zip

Preparation
Open Corel Website Creator X5 and from the File menu select New Site > Blank Site.

Name your site style_test.

Step 1
Select the Style view from the View bar.

Step 2
From the Style Tree, select New Blank SiteStyle.

Step 3
Name your new SiteStyle MyStyle.

Step 4
Apply the new SiteStyle to your site by selecting the Set Style button from the View bar.

Step 5
Select the Banner element by clicking on the Banner placeholder. Select the Browse button in the Banner Default properties palette to select a new Banner image.

Step 6
Browse for the banner.jpg image included in the Materials section of the tutorial.

Step 7
Select the Regular State for the Primary Navigation button. Select the Browse button in the Navigation Default properties palette to select a new Button image.

Step 8
Browse for the p_Regular.jpg image included in the Materials section of the tutorial.

Step 9
Repeat these steps for the rest of the States available, using the following matrix: Regular Rollover p_RegularOver.jpg Highlight p_Highlighted.jpg Highlight Rollover p_HighlightedOver.jpg

Also update the secondary navigation bar images using the same steps above and the following matrix: Regular s_Regular.gif Regular Rollover s_RegularOver. gif Highlight s_Highlighted. gif Highlight Rollover s_HighlightedOver. gif

Step 10
Now select the Page Background element.

Step 11
From the Page Background properties palette select the browse button and locate and select the Background.jpg image included in the Materials section of the tutorial.

Step 12
Next, select the Data List Icon.

Step 13
From the Data List icon properties palette select the browse button and locate and select the dataIcon.gif image included in the Materials section of the tutorial.

Step 14
Now select the Styled Line element.

Step 15
From the Styled Line properties palette select the browse button and locate and select the line.gif image included in the Materials section of the tutorial.

Tip: The Background image in our tutorial has a gradient. When you create a new blank SiteStyle the background image automatically repeats on both vertical and

horizontal axis. We only want the image to repeat Horizontally. This is simple to change.

Step 16
While still in the Style view, select the Selectors tab.

Step 17
Under the Other Selectors options, locate the Body element and select it.

Step 18
In the CSS Common palette (located to the far right) select the Background tab.

Step 19
Uncheck the option for Vertical repeat.

The new SiteStyle is now complete. There are several options available in a SiteStyle, both text and graphical. Edit them as is required for further customization.

Wrapping Up
We have learned how to create a basic SiteStyle in Corel Website Creator X5. You can create as many SiteStyles as you need for your projects and Websites.

Embedding Videos from YouTube


Social media sites have exploded over the last few years. Incorporating these channels into your Website is an important part of your web presence. This tutorial will outline how to embed a video from youtube.com into your own Website. Difficulty Novice

Preparation
From the File menu, select New Site > Blank Site.

Name your site youtube.

Step 1
Locate a video you wish to embed into your Website, for this tutorial any video will be fine.

Step 2
On the video page you will notice the Embed options under the user account information.

Step 3
Use your mouse to select the code provided in the Embed field. Notice that customization options automatically open when the code is selected.

Step 4
We will be using the default code but feel free to customize the options here. Any selections or changes made will automatically update the code provided by youtube.

Step 5
Copy the code provided by youtube.

Step 6
Switch back to Corel Website Creator X5.

Step 7
Navigate to the Page view by selecting the Page view from the View bar.

Step 8
In the Layout area of your Website, draw a text box. The text object is located in the Standard toolbar.

Step 9
Click inside the text box and click Ctrl+T. The Custom HTML Insertion dialog windows will appear. In the Custom HTML Insertion dialog window, right click and select Paste or click Ctrl+V. Then click OK.

Step 10
The text box will now have a blue circle with a T. This icon means that the text box has HTML inserted.

Step 11
You can move this text box anywhere in your page by dragging it. Preview your site to view your video.

Wrapping Up
We have learned how to include videos from the social media Website YouTube. Including video is a great way to provide dynamic content to your Website visitors.

Include Your Twitter Account on Your Website


Twitter connects you to your customers in a way that is dynamic, and flexible for your needs. Whether you tweet a monthly coupon code to your followers, build a personable relationship with your customers, or simply inform your users of milestones reached on a project, extend your Website by including your profile and latest tweets! Difficulty Beginner Materials An active Twitter account

Preparation
Open Corel Website Creator X5 and from the File menu select New Site > Blank Site.

Name your site twitter. Click to the Page view from the View bar.

Step 1
Login to your active Twitter account and locate the Goodies link at the bottom of your Account page.

Step 2
Click the Widgets link.

Step 3
Select the Widget for My Website.

Step 4
For this tutorial, we will be adding the Profile Widget.

Step 5
Edit the available options for your Profile Widget to suit your Website. The look and feel is under the Appearance tab.

Step 6
Once your Widget is edited, click Finish & Grab Code.

Step 7
Copy the code generated by Twitter (select the code and right click > copy).

Step 8
Tab back to Corel Website Creator X5.

Step 9
From the Standard Toolbar, select and place a textbox in the layout of your page.

Step 10
Click Ctrl+T to open the custom HTML insertion box. Paste the copied code into the Custom HTML Insertion box.

Step 11
Publish your site and enjoy your Twitter profile feed directly on your website!

Wrapping Up
Adding your Twitter feed to your personal or business website shows activity and a new level of dynamic content. This is one of many new social media outlets that provide creative ways to inform your visitors of current information.

Basics of the Timeline Editor


A fundamental use for the Timeline Editor is object animation. Using animations and triggers you can add a new level of dynamic content to your site. In this tutorial you will learn how to animate an object (an image in our case). Difficulty - Intermediate

Preparation
Open Corel Website Creator X5 and from the File menu select New Site > Blank Site.

Name your site timeline and add a page named image. Open the site to the Page view for image.

Enable the Timeline toolbar by clicking view > more panels > Timeline mode.

Step 1
Place an image in the top left corner of the Layout Area of your page.

Step 2
Click the Timeline Mode button from the Timeline toolbar.

Note: When in Timeline Mode, the MasterBorder area becomes locked. The scroll area, except the horizontal page scroll, also becomes disabled.

Step 3
Create a new Timeline animation using the Create New Animation button from the Timeline toolbar.

Step 4
Name your new animation Bounce.

Step 5
Double click the FPS option and increase the frame count to 24.

Step 6
Right click the Click Here image and select Add Object to Timeline.

Step 7
For the Picture Object Timeline, right click the 48th frame and place a Keyframe.

Note: This animation will be 2 seconds long at 24 FPS to ensure a smooth animation, hence the 48 th frame for the keyframe.

Step 8
Select the Keyframe and move the image to the bottom left of the Layout Area.

Step 9
The Picture Object Timeline will automatically add the necessary movement tween.

Note: A tween is a technique where animation is automatically created between two frames.

Step 10
Right click anywhere between the 1st and 48th frame for the Top tween, then select Create Motion Tween.

Step 11
Select the option for Bounce Ease Out.

Note: You will have to use the down arrow to show hidden options.

Step 12
Click the Timeline Mode button to exit the Timeline editor.

Step 13
Select the Click Here image and click the Set Timeline Action button from the Timeline toolbar.

Step 14
Match the settings to the screenshot below:

Step 15
Publish your page locally and view the animation!

Wrapping Up
The above steps walk you through one tween effect with one trigger. Experiment with different effects, the ease in (start) and ease out (end) properties, and triggers.

You might also like