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  company’s  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  48th  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.