IntroductionWelcome| 00:04 | Hi! I am Joe Lowery, here to welcome you
to Getting Started with Dreamweaver CS5
| | 00:08 | and Business Catalyst.
| | 00:10 | Business Catalyst is an Adobe hosting
service for building online commercial web sites.
| | 00:16 | In this course, I'll take you through
how it works, why it's great for web
| | 00:19 | designers, and how you can use
Business Catalyst with Dreamweaver to create
| | 00:24 | robust, full-featured web sites without coding.
| | 00:27 | First, I'll explain how Business
Catalyst is set up to help you do more with
| | 00:32 | your clients, and demonstrate how
easy it is to create a free site.
| | 00:37 | Next, we'll explore how Business
Catalyst integrates with Dreamweaver, including
| | 00:41 | some awesome drop-in
functionality to create a blog.
| | 00:45 | As we dive deeper into the course,
you'll learn how to integrate a Dreamweaver
| | 00:49 | design site right into Business Catalyst.
| | 00:53 | This let's you take advantage of
advanced business-oriented features, like
| | 00:56 | coordinating HTML e-mail marketing campaigns.
| | 01:00 | Finally, we'll tackle the toughest of
all web designer challenges, e-commerce.
| | 01:05 | I'll show you how easy it is to get
your clients' products online and selling.
| | 01:10 | I've been working with Dreamweaver
since before it was first released, and I
| | 01:14 | am really excited about the functionality
brought to the table by Business Catalyst.
| | 01:18 | Now, web designers can service a
broader range of clients and do so much more
| | 01:24 | efficiently with an expanded skill set,
| | 01:27 | all supported by the Business Catalyst
and Dreamweaver platforms. All right!
| | 01:31 | Let's get started with
Dreamweaver CS5 and Business Catalyst.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the
lynda.com Online Training Library, or if
| | 00:04 | you're watching this tutorial on the
DVD-ROM, you have access to the exercise
| | 00:08 | files used throughout this title.
| | 00:11 | Because Business Catalyst is a hosted
service, we will start the course using
| | 00:15 | their own online materials.
| | 00:16 | You're encouraged to follow along in
chapter 1 by setting up your own free PC site.
| | 00:21 | We'll use Business Catalyst's
built-in assets for chapters 2 and 3.
| | 00:27 | You won't need any external exercise
files until Chapter4, where we bring in a
| | 00:31 | full Dreamweaver-created site.
| | 00:34 | Most of the files in Chapter5 are
provided so you can jump into the course at
| | 00:37 | that point if you'd like,
| | 00:39 | although there is an asset
included to help us set up an online store.
| | 00:43 | If you are a monthly subscriber or
annual subscriber to lynda.com, you don't
| | 00:46 | have access to the exercise files,
but you can definitely follow along from
| | 00:50 | scratch with your own assets.
| | 00:52 | Okay, let's get started.
| | Collapse this transcript |
|
|
1. Introducing Business CatalystWhat is Business Catalyst?| 00:00 | Business Catalyst is a hosted
application for building and managing web sites, or
| | 00:05 | as Adobe likes to say "online businesses."
| | 00:08 | Definitely geared toward businesses,
Business Catalyst puts as much emphasis on
| | 00:12 | the backend administrative site
as the front-facing public site.
| | 00:17 | Although the application
itself is built with Microsoft .NET,
| | 00:21 | HTML, CSS, and JavaScript remain the
primary building blocks for creating your site.
| | 00:28 | You as the web designer have
complete control over your web site content,
| | 00:32 | layout, style, and functionality.
| | 00:36 | With Business Catalyst, you can
build your site from scratch or import an
| | 00:40 | existing site and work
with or without Dreamweaver.
| | 00:44 | Naturally, in this course, we'll
concentrate on how Dreamweaver can enhance your
| | 00:48 | Business Catalyst experience.
| | 00:50 | Business Catalyst allows you to extend
your skill set without delving into the
| | 00:53 | code, while at the same time, allowing
you to include high-level JavaScript
| | 00:57 | functionality from frameworks like jQuery.
| | 01:01 | Here's a few of the advanced
design functionality elements available.
| | 01:05 | You can integrate these items
into your site without coding.
| | 01:08 | You can build dynamic-driven
menus for both main navigation and
| | 01:12 | secondary navigation.
| | 01:13 | You can easily add one or more blogs
to keep site content fresh and encourage
| | 01:18 | audience interaction.
| | 01:19 | With Business Catalyst, you can also
create a full-featured forum, either public
| | 01:24 | or private, to keep site visitors
returning as you build an active community.
| | 01:28 | You're free to create as many RSS
channels as needed for automatically
| | 01:32 | publishing syndicated content from your
blog posts, announcements, or any other
| | 01:37 | information your client needs to disseminate.
| | 01:40 | Business Catalyst allows you to set up
what they call "secure zones," which can
| | 01:43 | be applied to any section of your site.
| | 01:46 | Use Business Catalyst's secure zone
capabilities to handle customer support or
| | 01:51 | provide value-added content for
premium visitors or subscribers.
| | 01:54 | While the design side of Business
Catalyst is very robust, where it really
| | 01:59 | shines is on the administrative site.
| | 02:01 | Business Catalyst integrates five
different administrative systems.
| | 02:05 | With e-mail marketing, you can send up
to 10,000 e-mails a month at no extra
| | 02:09 | cost, and include automated sales
responses to build customer loyalty.
| | 02:14 | The ability to use targeted lists and fully
customizable e-mail templates is also included.
| | 02:19 | Use Business Catalyst's built-in
customer relationship management, or CRM,
| | 02:23 | functionality to gather and
follow up on your sales leads.
| | 02:27 | Set up any section of any page to be
client-edited with Business Catalyst's
| | 02:31 | content management options.
| | 02:33 | You can even define page content
areas to be edited right in the browser.
| | 02:38 | Add online selling of physical or
digital goods to any site quickly and easily.
| | 02:43 | You can incorporate a full product,
catalog complete with inventory management,
| | 02:47 | as well as a complete check-out
experience that includes automatically
| | 02:51 | calculated shipping and tax charges,
optional discount codes, gift vouchers,
| | 02:56 | and affiliate referral tracking.
| | 02:58 | Their reporting and analytics
functionality includes a well-formed dashboard
| | 03:03 | that puts the most important
business metrics right upfront.
| | 03:06 | Clients can quickly see which
pages are getting the most and least
| | 03:09 | traffic, which products are selling
and which are not, and the state of
| | 03:12 | newsletter subscriptions.
| | 03:15 | Because Business Catalyst is a hosted solution,
| | 03:17 | you need to be sure that their
hosting capabilities are reliable.
| | 03:21 | Business Catalyst has data centers in
North America, Europe, and Asia Pacific
| | 03:25 | all connected to Tier 1 networks.
| | 03:28 | Confident of their connectivity,
Business Catalyst offers a 99.98
| | 03:33 | uptime service guarantee.
| | 03:35 | In essence, Business Catalyst is a
platform in the computing sense and
| | 03:39 | metaphorically, a raised
platform for web designers.
| | 03:42 | By taking a few small steps, you can
use Business Catalyst to elevate your work
| | 03:46 | and do more than you ever could before.
| | Collapse this transcript |
| Why Business Catalyst matters to Dreamweaver designers| 00:00 | Dreamweaver integration with
Business Catalyst, which is now native in
| | 00:03 | Dreamweaver CS5, allows you to
create and update your sites completely in
| | 00:08 | Dreamweaver while leveraging all of
Business Catalyst's advanced functionality.
| | 00:13 | You can work with a site already
created in Dreamweaver or build it from the
| | 00:16 | ground up in a familiar authoring environment.
| | 00:20 | With the Business Catalyst extension,
you can create working versions of web
| | 00:24 | pages and templates, publish your pages,
view an archived history, roll back to
| | 00:29 | a previous version of any of those pages,
as well as preview working or live pages.
| | 00:34 | While it's obvious that Business
Catalyst has a lot to offer, but why does this
| | 00:38 | matter for the Dreamweaver designer?
| | 00:40 | Well first, Business Catalyst gives
you the power to extend your client
| | 00:44 | offerings without engaging a separate
web developer, or spending time yourself
| | 00:48 | learning how to code a
specific bit of functionality.
| | 00:51 | For example, all of these drop-in, no
coding modules are available, including ad
| | 00:57 | rotators, announcements, bookings for
events, comments, FAQs, you can build a
| | 01:03 | library of downloadable documents,
client-editable Photo galleries.
| | 01:07 | You could easily set up a site
search, automatically include a sitemap.
| | 01:12 | There were also a number of
web apps that you can drop in--
| | 01:14 | for example, a job board--and all kinds
of web forms, including contact form that
| | 01:20 | automatically store the
contact information for you.
| | 01:23 | Business Catalyst cuts your
production time significantly;
| | 01:26 | even complex tasks becomes second nature
and can be done more quickly than ever,
| | 01:31 | the more you repeat them.
| | 01:32 | There's a similar workflow between modules,
which makes it easy to pick up new functionality.
| | 01:37 | The more sites you build with Business
Catalyst, the faster you'll be able to
| | 01:40 | build even more sites. And what's more,
| | 01:43 | Business Catalyst empowers clients to
manage their own sites, so you can greatly
| | 01:47 | reduce or eliminate the time it takes
you to perform minor content updates,
| | 01:51 | whether text to an
article or a photo in a gallery.
| | 01:55 | You can even set up Business Catalyst
so your clients can add their own
| | 01:58 | content in an ad rotator.
| | 02:01 | Perhaps one of the toughest challenges facing
any Dreamweaver designer is the online store.
| | 02:06 | Business Catalyst provides a turnkey
e-commerce solution with support for a
| | 02:10 | host of payment gateways, including
PayPal and Authorize.net and many others
| | 02:15 | with support for e-commerce in the US, Canada,
Mexico, UK, Europe, Australia, and South Africa.
| | 02:22 | Business Catalyst makes it possible
for you to design and implement online
| | 02:25 | selling of either physical or digital goods.
| | 02:28 | You can set up multiple catalogs,
with an unlimited number of products.
| | 02:32 | Business Catalyst also offers optional
integration with the popular business
| | 02:36 | accounting software into its QuickBooks.
| | 02:38 | All of this powerful functionality
enables you as a Dreamweaver designer to
| | 02:42 | go after a much broader range of
clients, including those who need
| | 02:45 | high-powered features, such as a
content management system, CRM, e-mail
| | 02:49 | marketing or even an online store.
| | 02:52 | Business Catalyst is only
successful if you're successful,
| | 02:55 | so it has created a vast array of
resources that not only help you build the
| | 02:59 | site once you've landed the client,
but they are also there to help you close
| | 03:04 | the deal with potential clients.
| | 03:06 | Bottom line: Business Catalyst can help
you do more of what you have Dreamweaver
| | 03:10 | for: creating better web
sites and getting paid to do it.
| | Collapse this transcript |
| What Business Catalyst costs| 00:00 | Business Catalyst is a commercial
service, and there are costs involved.
| | 00:04 | In this video, I will go over the
various options, both for your client and for
| | 00:08 | you as a Business Catalyst partner.
| | 00:10 | Keep in mind that all the prices
noted here are as of this recording date,
| | 00:15 | and subject to change--
| | 00:16 | and not just up; Business Catalyst
often offers promotions to entice Web
| | 00:20 | designers and their clients to make the jump.
| | 00:22 | So make sure that you check
their site to verify the prices.
| | 00:25 | First, let's take a look at the hosting cost.
| | 00:29 | There are three options:
| | 00:30 | the Website Starter for $16 a month,
Websites category for $24 a month, and what
| | 00:36 | they call the Full Solution,
which starts at $39 per month.
| | 00:40 | Now you can upgrade at any time from the
Website Starter to the Websites plan or
| | 00:45 | to the Full Solution.
| | 00:47 | You can also upgrade from the
Websites plan directly to the Full Solution.
| | 00:51 | What's the difference between the three plans?
| | 00:53 | Well, the Website Starter plan offers
a full custom site, content management
| | 00:58 | system, In-Context
Editing, and analytics reporting.
| | 01:02 | The Websites plan includes everything
that the Website Starter plan does, as well
| | 01:05 | as CRM, or customer relationship
management, web forms, and reporting.
| | 01:10 | The Full Solution, like the
name implies, has everything:
| | 01:14 | all that's in the Websites plan, as well
as e-commerce, e-mail marketing, and all
| | 01:18 | module functionality.
| | 01:20 | Now there are three levels available
under the Full Solution plan: the Mini for
| | 01:25 | $39 a month, Regular for $59 a
month, and Super for $79 a month.
| | 01:32 | The Mini plan offers 1 administrative
user, 10 e-mail accounts, 1 GB of disk
| | 01:38 | storage, 1 TB of bandwidth, and 10
text, or SMS, messages per month.
| | 01:43 | Under the Regular level, you get the
same as with the Mini, except you get 20
| | 01:48 | e-mail accounts and 2 GB of disk space.
| | 01:51 | The Super level ups the e-mail
accounts to 50 with 5 GB of disk space.
| | 01:56 | Your client can upgrade from
one level to another at any time.
| | 02:00 | If you exceed the limitations,
additional options can be purchased separately.
| | 02:04 | You can add on an additional
administrative user for $5 a month, and that brings
| | 02:08 | you 10 additional e-mail addresses.
| | 02:11 | If you need more administrators, you can
add five for $20 a month, which adds 50
| | 02:16 | additional e-mail addresses.
| | 02:18 | Extra disk space is available
for $10 per gigabyte, per year.
| | 02:22 | You can add on extra newsletter
coverage for one cent per e-mail.
| | 02:26 | You do get the first 10,000 free per month.
| | 02:29 | If you find that you need extra SMS traffic,
that's $10/month, per additional 50 SMS messages.
| | 02:35 | If your bandwidth goes over, excess
traffic is charged at one dollar per
| | 02:39 | gigabyte, and you do get
the first terabyte free.
| | 02:42 | All hosting costs are billed on a monthly basis,
| | 02:44 | although Business Catalyst does offer
your client a 10% discount if a year is
| | 02:49 | paid for in advance.
| | 02:51 | Now, let's take a look at
the partnership options.
| | 02:54 | As with hosting, there are three possibilities:
| | 02:56 | there is Free, Standard for
$995, and Premium for $1,995.
| | 03:03 | Now keep in mind that these are only a
one-time fee, and they are not recurring,
| | 03:07 | like client hosting.
| | 03:09 | When you register as a Free Business
Catalyst partner, you get a partner portal,
| | 03:14 | the ability to create any number of
sites, basic training courses, and support
| | 03:18 | for the online knowledge base and forum.
| | 03:21 | One thing I do want to stress about the
Free option is that you can continue to
| | 03:25 | build sites as a free partner without
incurring any cost for you and just having
| | 03:30 | your clients pay the monthly hosting fees.
| | 03:32 | Now, if you want to go further with
Business Catalyst, you can sign on as a
| | 03:37 | Standard partner and get access to
live training, unlimited support tickets
| | 03:42 | handled by e-mail as well as a 20%
commission on the client's monthly hosting fee.
| | 03:47 | You also get the ability to replicate sites,
which can really ramp up your productivity.
| | 03:52 | With a Premium Business Catalyst
partnership, you get everything a Standard
| | 03:55 | partner does, as well as the ability
to customize and re-brand the portal and
| | 04:00 | also the ability to
integrate custom e-mail templates.
| | 04:03 | You will also get advanced billing
capabilities, including the option to set the
| | 04:07 | hosting fees that are passed on to your clients.
| | 04:09 | Finally, you get a Business Catalyst
site at no cost to you for your own
| | 04:14 | web design business.
| | 04:15 | Business Catalyst is structured as an
easy onramp with a free partnership that
| | 04:19 | allows you to build as many sites
as you like and one-time costs for the
| | 04:23 | Standard and Premium level
partnerships when you're ready to do more with
| | 04:26 | Business Catalyst.
| | Collapse this transcript |
| Understanding the Business Catalyst partnership| 00:00 | Business Catalyst is structured to
offer Web designers relatively complete
| | 00:04 | access to their system at no cost, so
they can decide if it's right for them.
| | 00:09 | You can even build out an
entire site for a client for free.
| | 00:13 | In fact, you can build as many sites as
you would like for subscribing clients
| | 00:16 | as a no-cost partner with Business Catalyst.
| | 00:19 | To get started, sign up for a
free account at businesscatalyst.com.
| | 00:23 | We will click on the Free Sign Up button,
and now we will enter your own unique
| | 00:30 | business name--mine is called Nice Joe--
your e-mail address, and then the first
| | 00:38 | and last name, your password,
and then confirm the password.
| | 00:43 | Let me scroll down.
| | 00:46 | Because Business Catalyst is a global
company, you need to choose your country.
| | 00:50 | I'll stick with the United
States here. Set up my time zone.
| | 00:53 | If you have a referral code that lowers
the cost, you can enter it at this point.
| | 00:57 | And now let's enter in the CAPTCHA.
| | 01:00 | And if you agree with the
partner/reseller agreement as well as the privacy
| | 01:03 | policy, and you want to continue,
click the check box and then click Submit.
| | 01:08 | All right, our portal
has already been signed up.
| | 01:12 | You can see that we have a
new URL available, including
| | 01:15 | nicejoe.businesscatalyst.com.
| | 01:18 | Let's go right in to the portal.
| | 01:21 | I'll need to log in. Login.
| | 01:28 | We will cover the various features
of the portal throughout the course.
| | 01:32 | For now, let me show you the quick
and not so dirty way to create a site.
| | 01:36 | Click on Create Site. Now
choose the type of site you want.
| | 01:40 | Let's assume that you are going to take
this all the way with a Full Solution.
| | 01:43 | Now you can decide how you
are going to create your site.
| | 01:46 | You can Use one of Business Catalyst's templates,
create a site from scratch, or import a site.
| | 01:53 | For demo purposes, I am going to
use Business Catalyst's template.
| | 01:55 | Let's scroll down a bit and click Next.
| | 02:00 | First, we get to choose a style of template.
| | 02:03 | Let me scroll through just to show you that
they do have quite a wide variety of options.
| | 02:08 | Let's go with this one here.
| | 02:10 | And once I've chosen a style of the
template, I now have a color scheme that I
| | 02:14 | can collect from--the
nine different choices there.
| | 02:17 | Let's go with the Gradient Blues.
| | 02:20 | And then we have home page images.
| | 02:22 | Of course, you can always go
back in and customize these.
| | 02:25 | It's not just the grouping that you
see here. Click the arrow, and there's
| | 02:29 | another set of nine that will come up and
another set of nine as well. I want to go back.
| | 02:35 | I like this one here. It looks like it
would work with my gradient pretty well,
| | 02:39 | so I'll click this one.
| | 02:41 | And now to see what it all looks
like, click Preview and see if it all
| | 02:45 | looks good together. Not bad.
| | 02:47 | Of course, keep in mind that all of this is
completely customizable. Let's click Next.
| | 02:54 | Now at this point, we are going to say
no, we are not going to sell products,
| | 02:58 | maybe in the future. Click Next again.
| | 03:01 | Newsletter subscription box,
that's sound like a good idea.
| | 03:04 | Let's keep that in.
| | 03:07 | And contact form, yes,
let's keep that in as well.
| | 03:13 | Okay, how about a blog?
| | 03:15 | At this point, let's not add a blog.
| | 03:17 | You can always add those in later.
| | 03:19 | Same thing with forums. And member-only
areas of your site, again, not right now.
| | 03:26 | As you can see, there's a tremendous
amount of functionality that you can pick
| | 03:30 | up right from the very beginning, even
if you're building a basic site using
| | 03:34 | Business Catalyst's templates.
| | 03:36 | We will keep the site-wide search,
| | 03:38 | turn off the publish news and press
articles, and we don't need the FAQ for now.
| | 03:44 | Okay, so now all we have to do
is add in a few simple details.
| | 03:49 | So let's enter in our company name.
| | 03:51 | We will keep the country as US, select
the time zone, and now notice that you
| | 03:59 | can modify your starting address here.
| | 04:01 | If you are working with a client and you
want to give them something that's very
| | 04:05 | specific to their company,
you would enter it here.
| | 04:06 | Now we have left to do is
to choose the data center.
| | 04:09 | I will choose the US one
| | 04:12 | and check off that I represent my
clients, and my customers have read and agreed
| | 04:17 | with the end-user agreements, and click Submit.
| | 04:21 | Okay, Business Catalyst has created
our online site. And as it says, you will
| | 04:26 | receive an e-mail with the login details.
| | 04:28 | But while we are waiting for that,
let's take a preview of the new site.
| | 04:32 | Click on Preview, and there you
see the title of the site added in.
| | 04:35 | Of course, you can replace that with your
own typography or logo, the center image.
| | 04:40 | There's a newsletter sign-up there,
complete with CAPTCHA functionality, a Search box.
| | 04:46 | Let's go to the About Us page,
just kind of a basic page there.
| | 04:51 | And Contact Us as a full contact form
all set up and ready for submission.
| | 05:00 | So as you can see, Business
Catalyst provides a straightforward path
| | 05:03 | so you as a web designer can try out
their services and get a working site
| | 05:07 | online at no cost to you.
| | Collapse this transcript |
| Adobe and Business Catalyst integration| 00:00 | Realizing that Business Catalyst was
a good fit for their customers, Adobe
| | 00:04 | acquired the Australian-based
business in 2009, and has begun to weave it
| | 00:08 | across their product line.
| | 00:10 | An extension for Dreamweaver,
initially called Triangle, had already been
| | 00:14 | developed by Business Catalyst
and was freely available.
| | 00:17 | Some of the documentation on the
BC site still references Triangle.
| | 00:21 | The Dreamweaver and Business Catalyst
teams enhanced the extension to include
| | 00:25 | greater functionality and strengthened
the link between the software and the
| | 00:29 | service, starting with Dreamweaver CS4.
The new extension replaces Triangle.
| | 00:34 | Dreamweaver CS5 took the next step and
included it a Business Catalyst panel in
| | 00:39 | the default configurations.
| | 00:40 | To keep the system flexible,
you still need to download and install the
| | 00:44 | extension, but the integration is strong.
| | 00:46 | At the same time, Business Catalyst
took the InContext Editing service from
| | 00:51 | Adobe and made it available from their service.
| | 00:53 | With InContext Editing, clients can
modify their pages right in the browser
| | 00:57 | without having to go to an
administrative back-end and make changes on a form.
| | 01:02 | Dreamweaver also supports InContext
Editing from the design time viewpoint,
| | 01:07 | which adds another level of integration.
| | 01:09 | So Dreamweaver designers can create
their pages using all of the tools they are
| | 01:13 | familiar with, mark sections as
editable regions for InContext Editing, and
| | 01:18 | then post those pages to the
Business Catalyst site where the clients can
| | 01:22 | easily modify them.
| | 01:24 | Since the Adobe acquisition, three new
data centers--one in the U.S., another in
| | 01:28 | Europe, and the third in the Asia
Pacific region--were developed and put online
| | 01:32 | for Business Catalyst.
| | 01:34 | These data centers represent an
extensive investment in the Business
| | 01:37 | Catalyst architecture.
| | 01:38 | Upcoming changes are previewed in
the Business Catalyst blog so that the
| | 01:43 | partners can get a clear idea of what's coming.
| | 01:46 | Business Catalyst maintains a forum
where they actively solicit wishes and
| | 01:49 | needed improvements.
| | 01:51 | No doubt changes and updates will continue.
| | 01:53 | Adobe appears dedicated to the
Business Catalyst platform, and extending it to
| | 01:57 | bolster their product line and
better serve their customer base of web
| | 02:01 | developers wherever in the world.
| | Collapse this transcript |
|
|
2. Integrating Business Catalyst with DreamweaverInstalling the Business Catalyst extension| 00:00 | Dreamweaver CS5 incorporates a
Business Catalyst panel to simplify the
| | 00:04 | integration between the
software and the service.
| | 00:07 | In order to stay flexible and integrate
any needed updates as soon as possible,
| | 00:12 | the extension that integrates
Dreamweaver and Business Catalyst must be
| | 00:15 | installed separately.
| | 00:17 | To install the extension, first
expand the Business Catalyst panel, or if
| | 00:22 | necessary, choose Window > Business Catalyst.
| | 00:28 | You'll see on the panel a
button to get the extension.
| | 00:30 | So let's go ahead and click that.
| | 00:32 | This will open up your primary browser,
and take you right to the Business
| | 00:36 | Catalyst site, where there is a download
link for getting the Business Catalyst
| | 00:41 | or, BC, extension for Dreamweaver.
| | 00:42 | I'll go ahead and click to that.
| | 00:44 | Let's save this file to Downloads folder.
| | 00:47 | Once the file has downloaded,
open the Adobe Extension Manager.
| | 00:53 | Here you can see that I have the
11.03 Updater already installed.
| | 00:58 | I'm going to go ahead and install
our extension that we just downloaded.
| | 01:03 | So now I'll open my Downloads folder
and double-click on the Business Catalyst
| | 01:08 | MXP file, accept the agreement,
the extension installs very quickly.
| | 01:14 | And like most extensions, you have to
close and then restart Dreamweaver in
| | 01:18 | order for the extension to
take affect. So I'll click OK.
| | 01:22 | I'll come back to Dreamweaver,
close it down, and then restart it.
| | 01:29 | And now once when Dreamweaver reopens,
you can see that in the Business Catalyst
| | 01:34 | panel, the Get the Extension button
is now gone is now gone, and instead, we
| | 01:38 | have a Login screen.
| | 01:39 | So now you're ready to take the next
step and set up a BC site in Dreamweaver.
| | Collapse this transcript |
| Setting up a Business Catalyst site in Dreamweaver| 00:00 | After you've been installed the
Business Catalyst extension and restarted
| | 00:03 | Dreamweaver, it's just a few steps to
make the connection to your BC sites.
| | 00:08 | Open the Business Catalyst panel if
it's not already open, and enter in
| | 00:12 | your login details.
| | 00:13 | These are the same login details
that you set up previously with BC:
| | 00:18 | so, my e-mail address, and password.
| | 00:23 | I've clicked Login, and now you see a
list of all my sites that I have set up:
| | 00:27 | there is Nice Joe, which you'll recall as
the name that I choose for my own partner
| | 00:32 | portal, and then Nice Joes
which is the client-side.
| | 00:35 | So I'll go ahead and choose this.
| | 00:37 | Before I do, notice that we
have two empty circles here.
| | 00:41 | I'll go ahead and click it.
| | 00:43 | And then after I log in again to set up
the FTP connection, which is, again, using
| | 00:49 | the same e-mail address and password
that you had previously defined, log in, and
| | 00:55 | now we have an opportunity
to set up the entire site.
| | 00:58 | Because we are using the files that are
already on the BC site, I'm going to go
| | 01:02 | ahead and choose the Local Root Folder
here so that I can transfer that data,
| | 01:09 | and I'm going to put it in my Sites folder.
| | 01:12 | I'm going to create a new folder for
that, click Choose, and then choose Setup.
| | 01:22 | After BC connects to the server, you'll
get a message that everything is set up
| | 01:26 | and complete, and the option
to download the site locally.
| | 01:29 | I'm going to go ahead and do that, so I
have all of these files available on my
| | 01:33 | Dreamweaver local site root.
| | 01:36 | Dreamweaver will ask if I want to
get the entire site. We click OK.
| | 01:40 | Downloading the files from the site
might take a while because Business Catalyst
| | 01:44 | wants to make sure that you have all the
files available that you'll need. Okay.
| | 01:49 | Our sites are complete.
| | 01:50 | Now let's take a look at the Business
Catalyst dropdown list. Where before I
| | 01:54 | had two open circles, now I have one
filled-in circle, and one open circle.
| | 01:58 | The filled-in circle represents a
site that has been properly set up.
| | 02:05 | Let's open up our Files panel now,
and I'll bring that open and expand the
| | 02:13 | folder where you can see a number of
files in the root folder have been included,
| | 02:17 | as well as a template folder, style
sheets, folder for images, and layouts.
| | 02:22 | Now the layouts we'll get into a
little bit later, but I just want to expand
| | 02:25 | it and show you the range of some of the
things that are available in Business Catalyst.
| | 02:30 | So all of these folders here
represent different layouts, and there are
| | 02:34 | subfolders within all of these that you
can use to customize your site further.
| | 02:38 | All right, with your Business Catalyst
and Dreamweaver sites synced, you're ready
| | 02:42 | to start working with the files.
| | Collapse this transcript |
| Basic file management| 00:00 | The integration between Business
Catalyst and Dreamweaver is pretty much
| | 00:03 | seamless, especially for
ordinary, basic file management.
| | 00:07 | Let's take a test drive,
and I'll show you what I mean.
| | 00:09 | You can create files the
same way you always did:
| | 00:12 | whether you choose a File > New, or--my
favorite way--going to the Files panel
| | 00:19 | and right-clicking or
Ctrl+Clicking and then choosing New File.
| | 00:23 | I'll just make this a test page
and open it up. "Hello Test Page."
| | 00:30 | I'll hit Command+1 to make this first
line a heading 1, save the file, and then
| | 00:38 | let's put it online.
| | 00:39 | There is no need to put any dependent files,
| | 00:41 | so I'll hit Return to accept No. And now
let's go online and take a look at a file.
| | 00:48 | So I'll switch back to my
browser, and here you see the
| | 00:51 | nicejoes.businesscatalyst.com site.
| | 00:54 | Let me test .html page,
and there's Hello Test Page.
| | 00:59 | So you can see that we are
already connected to the Nice Joes site.
| | 01:05 | Back in Dreamweaver, if I open up
of the site definition dialog box, by
| | 01:10 | double-clicking on the Files panel
list here and then go to Servers, you can
| | 01:15 | see that two servers,
| | 01:17 | a remote server and a testing
server, were already set up for me.
| | 01:20 | Let me click Cancel just
to dismiss that dialog box.
| | 01:23 | Now any modifications that I need to
make, such as to the homepage, I can use all
| | 01:31 | the same tools and typical way
that I like to work with Dreamweaver.
| | 01:35 | Let me select this first sentence here,
and then I'll add a bold, or strong, tag
| | 01:40 | to it, save that, and again put it online.
| | 01:48 | Back to the browser, and let's refresh
that page. And there you can see that the
| | 01:53 | change has already been made, even
though you're building a business catalyst
| | 01:56 | site. How's that for integration?
| | Collapse this transcript |
| Creating Business Catalyst templates| 00:00 | Here's the best news ever: Business
Catalyst uses pretty much the same
| | 00:04 | format for their templates as Dreamweaver does,
and in a very real sense, does it even better.
| | 00:09 | This means that not only can you take
Business Catalyst-created templates and
| | 00:13 | modify them easily in Dreamweaver, you
can also create templates in Dreamweaver
| | 00:18 | and they will work flawlessly in Business Catalyst.
| | 00:20 | What's more, templates in Business
Catalyst can update all of the pages in
| | 00:23 | your site even faster.
| | 00:25 | Business Catalyst creates a number of
Dreamweaver-style templates when you
| | 00:28 | create a site using their designs.
| | 00:30 | So let me open up the Templates
folder here in the Files panel, and you'll
| | 00:34 | notice that there are three templates:
| | 00:36 | there is Main Template, which
controls the homepage; Printer View Template,
| | 00:41 | which obviously controls the printer
view; and Sub Template, which controls all
| | 00:45 | the interior pages.
| | 00:47 | Let's take a look now at
modifying Main Template.
| | 00:49 | Just double-click to open that, and now
let's go over and I'll modify and add a
| | 00:54 | tag line here next to Nice Joes, do a
Shift+Return in order to put in line break
| | 01:00 | and then type in "Makes It Nice."
Select that text and then go down to my
| | 01:07 | Properties panel and change the size,
so that it fits in a little bit better.
| | 01:13 | That will open up the New CSS Rule,
and we will just create a quick class called
| | 01:18 | tagline, and I am going to go ahead and
save this in this document only, just for
| | 01:24 | a demo purposes here. Click OK.
| | 01:27 | So now I have my tagline added to it.
And as you probably know, when you save a
| | 01:33 | template page, Dreamweaver will ask if you want
to update all the files based on this template.
| | 01:40 | Let's click Update.
| | 01:42 | Let's just see what happened.
| | 01:43 | I will open up the log there, and you
can see that the files were updated here.
| | 01:47 | So I will click Close.
| | 01:49 | Now because my template has been updated,
I am going ahead and put that online.
| | 01:56 | There are no dependent files because I
saved that CSS right in the document, and
| | 02:00 | you want to make sure that you put the
template online because you can also make
| | 02:04 | changes from the BC side.
| | 02:06 | So let me also put up my homepage, and
we'll flip over to the browse. And as you
| | 02:13 | can see, my tagline has
been added to the homepage.
| | 02:16 | Now let's take a look at modifying a
template that updates a large number of pages.
| | 02:21 | Back to Dreamweaver, and this
time let's open up Sub Template.
| | 02:25 | Now I'm going to go in and copy this
and bring it over from my Main Template to
| | 02:33 | my Sub Template and paste that
in so I don't have to redo it.
| | 02:37 | I'll save the file by pressing Command+S
or Ctrl+S on the PC. And this time, I'm
| | 02:43 | going to update the file so that
they're all the same locally--click Close once
| | 02:48 | they're done--but I'm not going to
put all of those files up online;
| | 02:51 | instead, I am just going to put the
template. Open up my file management list.
| | 02:57 | Choose Put. Again, I don't need
to put any dependent files here.
| | 03:03 | Now let's head on over to the browser.
And when I choose some of the interior
| | 03:08 | pages, you can see that the tagline has
already been added even though I didn't
| | 03:13 | put those pages online explicitly.
| | 03:15 | So what's happening here?
Business Catalyst is actually using the
| | 03:19 | Dreamweaver template as an
include, or as a master page in an other
| | 03:24 | terminology, and it's assembling
those pages with the interior content and
| | 03:29 | the master page regions dynamically.
| | 03:31 | I find the templates can really
simplify production, both in Business Catalyst
| | 03:35 | and Dreamweaver, and Business
Catalyst's implementation of templates totally
| | 03:39 | streamlines to the development process.
| | Collapse this transcript |
| Defining a default template| 00:00 | In Business Catalyst, the default
template is the one that's used to create most
| | 00:04 | of the pages in the site.
| | 00:06 | In this video, I'll show you how to define any
template of your choosing as the default one.
| | 00:11 | Whenever you or your client create a
new page through the Business Catalyst
| | 00:14 | interface, the default template is defined in
the administrative site of the BC Partner Portal.
| | 00:20 | So let's go there, and let me
show you where that's located.
| | 00:23 | First, we will go to the BC homepage,
and then I'll click Login and enter my
| | 00:28 | e-mail address and password. Click Login.
| | 00:33 | Now BC wants to know which
web site I'd like to administer.
| | 00:36 | I am going to go in and administer Nice Joes.
| | 00:43 | Here in the administrative console, you'll
see that there is a menu item called Admin.
| | 00:48 | You will see a number of options,
including Manage Site-Wide Templates,
| | 00:52 | so we will choose Manage Site-Wide
Templates. And then we see a list of all the
| | 00:56 | available templates, the
same that we saw in Dreamweaver:
| | 00:59 | Main Template, Printer View
Template, and Sub Template.
| | 01:03 | You will notice in parentheses it says
here (Use default template), and let me
| | 01:07 | show you where that is set.
| | 01:09 | So I will open that up by clicking on it,
and then expand the Template Details,
| | 01:14 | and here you can see the name of the
template as well as a Default template
| | 01:18 | option, and that is selected.
| | 01:21 | If we were to go back to the Main
Template, choose that, and then expose its
| | 01:26 | Template Details, you'll see that
the default template is not selected.
| | 01:30 | If I wanted to make this the default
template, all I would need to do is click
| | 01:34 | the check box there.
| | 01:35 | I am going to go ahead and clear that.
| | 01:37 | So you need to keep in mind that
whenever you create your templates in
| | 01:40 | Dreamweaver, whichever one that you
want to be the default template, you will
| | 01:44 | have to come into the BC
Portal to set that selection.
| | Collapse this transcript |
| Inserting Business Catalyst modules| 00:00 | One of the key concepts in Business
Catalyst web design is the module.
| | 00:04 | A module is a small bit of code
that offers big functionality.
| | 00:08 | Some examples are forums, blogs,
photo galleries, and RSS feeds.
| | 00:13 | All the available modules are
listed in the Business Catalyst panel.
| | 00:16 | So let me collapse the Files panel
a bit and open up Business Catalyst.
| | 00:22 | In fact, I am going to go ahead and
collapse the CSS Styles panel, so you can
| | 00:26 | see the full range of modules available.
| | 00:29 | There are actually about 75
modules and 22 different categories.
| | 00:33 | Modules are represented in the code by
curly braces with the initial keyword "module."
| | 00:38 | Let me show you an example page
in the SearchResults.htm file.
| | 00:42 | I will open that up, switch over to
Code view, and here you can see that there
| | 00:48 | are two modules placed right next to
each other: the module for search results
| | 00:53 | and the module for product results.
| | 00:56 | Each module tag is surrounded by curly
braces with the keyword "module" and an underscore.
| | 01:01 | All right, let's look at how you might
go ahead and add a module to your pages.
| | 01:07 | I'll close the SearchResults page.
| | 01:09 | Let's insert a simple but useful
module that puts the last modified date on
| | 01:13 | the page, and we will set it up in the
template so that it will be replicated
| | 01:17 | all across the site.
| | 01:18 | Okay, I am going to open up my Templates
folder and then double-click on Sub Template.
| | 01:24 | Let's go back into Design view,
and here we'll put it in the footer.
| | 01:32 | I'll make a little bit more room and put
in some text: "Last modified" with a colon.
| | 01:39 | Now over in the Business Catalyst
panel, I'll scroll all the way down to the
| | 01:43 | WebPages section and expand that.
| | 01:46 | Scroll down again and
here we see Last Updated Date.
| | 01:51 | Now to insert a module,
you just double-click on it.
| | 01:54 | This will open up the Module Configure
dialog box, which connects to the server
| | 01:59 | to make sure that's it's got the latest module.
| | 02:02 | And in this situation, there's no
configuration necessary, so we will go ahead
| | 02:06 | and just click Insert.
| | 02:08 | You'll see the code in Design view, and
if I switch back over to Split view, here
| | 02:13 | you can see the code a little bit more clearly.
| | 02:16 | Okay, we'll Save the page, go
ahead and Update it locally.
| | 02:22 | But again, as we found out in the
previous video, there's no need to post your
| | 02:27 | updated pages to the site if you're making
changes to just the Business Catalyst Template.
| | 02:33 | I'll just put that template
and no need for dependent files.
| | 02:38 | After it quickly writes the template,
we will switch over to the browser.
| | 02:43 | And let's go to the About Us page.
| | 02:46 | And here you see last modified on the 15th
of November, Year 2010, at 11:20 in the morning.
| | 02:53 | Contact Us, because we did it in the
template, also has a last modification date.
| | 02:59 | Now if I went in and made a change
to any of these pages, that would
| | 03:03 | automatically be updated.
| | 03:05 | So let's take a look at making a
change on a page. Back to Dreamweaver, and
| | 03:10 | I will open up the Contact Us page, and I'll
put in a bit of text, "Thanks for contacting us."
| | 03:19 | Save it, put that page, press Enter to accept,
| | 03:28 | and now let's go back to the
browser, and I'll update the page.
| | 03:31 | And here you can see we are still on the
same day, but the time updated to just now.
| | 03:36 | It's obvious that the built-in Business
Catalyst modules represent a vast range
| | 03:40 | of drop-in technology.
| | 03:42 | It can easily be added within
Dreamweaver to any web page.
| | Collapse this transcript |
| Customizing module tags| 00:00 | Many of the Business Catalyst modules
are configurable, although the techniques
| | 00:04 | for selecting the options can vary.
| | 00:06 | Whenever you insert a Business
Catalyst module, a wizard guides you through
| | 00:10 | the available options, if there are any.
| | 00:12 | Let's take a look at what happens
when we go to set up a booking module.
| | 00:16 | I am going to create a new page based
on the Sub Template, by going to my Assets
| | 00:21 | panel, choosing the Templates option,
and then right-clicking on Sub Template,
| | 00:27 | and choosing New from Template.
| | 00:31 | Here you'll see a ContentArea, set up
with the tag pagecontent already included.
| | 00:37 | I am going to go ahead and remove that.
| | 00:39 | And let's go over to our Business Catalyst
panel now and expand the Bookings module.
| | 00:44 | And here you see two options:
Bookings and Calendar.
| | 00:46 | I am going to go ahead and
double-click on Bookings.
| | 00:50 | The dialog box opens, and now you can
see that in this situation there's a
| | 00:54 | number of criteria that we can choose from.
| | 00:56 | We can choose either an individual
booking item, all items, all items in a
| | 01:01 | certain category, the latest
items, or choose a random item.
| | 01:05 | I am going to leave it set at
All Items and then click Next.
| | 01:10 | And now we are ready to insert it.
| | 01:11 | I will click Insert, and the
tag has been added to the page.
| | 01:16 | Let me move over to Split view, so you
can see that code a little bit easier.
| | 01:20 | Here you can see it's module_booking, a,.
| | 01:26 | That's the Business Catalyst code for
including all of the booking items on a single page.
| | 01:31 | Let me go ahead and add in a
specific title here, "Bookings,"
| | 01:36 | and then I'll save the page as
bookings in my main site root.
| | 01:41 | Click Save and then let's post that online.
| | 01:43 | I will switch over to the browser, and
since it's not linked from any navigation,
| | 01:52 | enter it directly, bookings.html.
Press Enter and here's our page.
| | 01:58 | Now because there have been no bookings
added to the Business Catalyst site yet,
| | 02:03 | we will get a little
message saying, "No bookings found."
| | 02:06 | Let me show you another way that you can
configure a module by changing the code.
| | 02:10 | I will go back to Dreamweaver, and this
time we will set up another page--again,
| | 02:15 | by choosing the New from Template option.
| | 02:18 | And this one is going to be a blog.
| | 02:21 | So I will enter in "Blog" up in
the Title and hit Return, or Enter.
| | 02:27 | And here in the editable region, I am
going to go ahead and delete the tag
| | 02:33 | content placeholder and
close Bookings and expand Blogs.
| | 02:38 | So I am going to go ahead and put in--
scroll down just a bit so you can see
| | 02:43 | that, and then let me open this up
so you can see the various options.
| | 02:47 | Now there is Blogs, Displays latest
posts across a single blog, Displays
| | 02:53 | latest posts across all blogs, Displays tags
for a single blog, and then a List of latest posts.
| | 03:00 | So let's go ahead and just put in the
Displays latest posts across a single
| | 03:05 | blog, and I am just going to
choose All Blogs and click Next.
| | 03:11 | It does give me an option for setting
it for a specific tag--again, another
| | 03:15 | configurable option. Click Next and
now this one is ready to be inserted,
| | 03:19 | and when it's inserted, you can
see that the tag module_blogpostlist
| | 03:25 | is followed by a couple of attributes.
| | 03:27 | The -1 has to do with whether it is
pointing to all blogs or a specific blog.
| | 03:32 | In this case, a -1 means all blogs, and
the 10 that follows indicates how many
| | 03:38 | posts are going to be displayed on this page.
| | 03:40 | Right now, there are 10.
| | 03:41 | That might be a little bit too
much for this particular site,
| | 03:44 | so I am going to reduce that to 5.
| | 03:47 | And when I save this page and post it,
| | 03:51 | now if I were to post it and enter in some
blog posts, only five would show up on this page.
| | 03:57 | The third way that you can configure
a module is by adding and removing tag
| | 04:01 | attributes for certain modules.
| | 04:02 | Let's go back to our Booking page.
| | 04:05 | The look and feel of module is
controlled by what's in the Layouts folder.
| | 04:09 | Let's switch back to the Files panel.
| | 04:12 | And this is one of the folders that
BC put in when it set up the site.
| | 04:17 | I'll expand Layouts, and here you can see
corresponding folders for all the modules.
| | 04:22 | There's Blog and Booking.
| | 04:24 | Let me expand Booking and open up the
list.html file by double-clicking on it.
| | 04:30 | And here you can see that there are two
elements as part of the Bookings list:
| | 04:34 | the tag_date and the tag_name.
| | 04:37 | Now if I wanted to add in another one,
I could place my cursor here and then go
| | 04:42 | to the Business Catalyst panel.
| | 04:44 | And now, because I have a layout open,
you can see that an additional element
| | 04:48 | has been added to the panel:
the Tag Insert feature.
| | 04:52 | And this will contain all of the
available tags for that specific module.
| | 04:56 | So I have tag_capacity, tag_
addtofavorites, tag_body, the bookingday, the
| | 05:02 | bookingmonth, and so on.
| | 05:05 | Let's go in and go ahead and enter in
the tag_capacity. I'll click Insert.
| | 05:11 | I am going to add a little
explanatory text to that.
| | 05:14 | So right before the code, I will
put in "Capacity" and save this page.
| | 05:20 | Now I am going to go ahead and put it online.
| | 05:26 | Now at this stage, we
still don't have any bookings,
| | 05:28 | so let's go back over to
Business Catalyst and add one in.
| | 05:33 | So I will go back to my Business
Catalyst site, already logged in, choose
| | 05:37 | Modules and then Bookings.
| | 05:40 | And I am going to go ahead
and create a new booking.
| | 05:44 | I will give it a name, and I
will put in "Christmas Party."
| | 05:53 | Go ahead and set it up for the default template.
| | 05:56 | And let's change the date to a December date--
| | 06:02 | we'll make it on the 20th--and set
the room capacity for 50 people.
| | 06:11 | Put in a little bit of text and then save it.
| | 06:21 | Okay, so we already have an item added to it.
| | 06:24 | Let's go back over to the
Bookings page. Click Refresh.
| | 06:28 | So now you can see the date, the name, and
our just-added attribute, the capacity.
| | 06:36 | Although, the process is slightly
different from a standard Dreamweaver
| | 06:39 | workflow, you can still very quickly
and easily customize all of your BC module
| | 06:44 | output using any of the
three techniques I just outlined.
| | Collapse this transcript |
| Styling module output| 00:00 | You have complete control over the
look and feel of your module output;
| | 00:04 | however, styling Business Catalyst
modules in Dreamweaver is slightly different
| | 00:08 | than performing the same
operations on any other web page element.
| | 00:12 | Let me show you what I mean.
| | 00:13 | For most content in a BC-hosted page,
like bookings.html that we have opened
| | 00:18 | here, you can style CSS the way you
normally would in Dreamweaver CS5.
| | 00:23 | Make sure your CSS Styles panel
is open and set to Current mode.
| | 00:28 | Go right into Live view, select an
element, such as the footer, which I will
| | 00:33 | select from the tag selector here, and
then go over to the CSS Styles panel,
| | 00:38 | choose it, and let's make a
change, like changing the color.
| | 00:42 | Now you can see that my
footer is a nice bright red.
| | 00:45 | All I would need to do is save the
screen.css, which is where that style is
| | 00:49 | stored, and then put the file online.
| | 00:52 | Now if you wanted to style this
module_booking code here, I can't do that
| | 00:57 | directly, because those styles
are contained in a file called
| | 01:02 | modulestylesheet.css, which, as you can see,
is not located up in the related files bar.
| | 01:09 | To get to it, we have to open up the
layout file, which of course is contained
| | 01:13 | in the Layout folder.
| | 01:14 | Let me go to my Files panel
and expand that temporarily.
| | 01:18 | Here we are in the Layouts
folder, and in the Booking subfolder,
| | 01:22 | we have two options: one
for list and one for detail.
| | 01:26 | If I wanted to change the list
option, I would double-click on the list
| | 01:30 | file here, open up that file. And once I do
that, I see I have the tag_date, the tag_name.
| | 01:38 | You'll recall that we changed and added
the capacity tag here. But notice, most
| | 01:43 | importantly, the
ModuleStyleSheets.css is now available to us.
| | 01:49 | So let's open up the detail file and
make a change to that one, so we can
| | 01:54 | complete this operation.
| | 01:56 | Now here you see the layout for the detail file.
| | 01:59 | If I go back to the browser and then
click on the link in the list to go to that
| | 02:05 | detail page, here we see a basic
layout of an H1 tag with the event name and
| | 02:10 | then all the information listed below.
| | 02:12 | Let's say I want to sparkle this up
just a tad by adding a thin border
| | 02:16 | underneath "Christmas Party" there.
| | 02:17 | To do that, I am going to go back to
Dreamweaver, go into Live view, and give my
| | 02:25 | CSS Styles panel a little bit more room,
and then let's hone in on the h1 tag,
| | 02:32 | which I see listed here.
| | 02:35 | And I'll go down to my Properties
Pane, click Add Property, and type in
| | 02:40 | "border-bottom", press Tab, and let's
make this 2 pixels wide, solid, and we will
| | 02:47 | give it the same color as the text,
which is the hexadecimal value 666.
| | 02:52 | All right, so I'll press Return.
| | 02:53 | We will click Refresh so that our
Live view can pick up that style.
| | 02:57 | And now I am going to go ahead and
choose File > Save All Related Files, and
| | 03:04 | let's put the page. And this time, we
will put the dependent files, because some
| | 03:09 | of those CSS style sheets have changed.
| | 03:13 | And now we are ready to go back to the browser.
| | 03:17 | Let's go ahead and click Refresh,
and there is our bottom border.
| | 03:21 | Although the process is slightly
different from a standard Dreamweaver
| | 03:24 | workflow, you can still quickly and
easily customize all of your Business
| | 03:29 | Catalyst module output.
| | Collapse this transcript |
|
|
3. Using InContext EditingEstablishing editable Dreamweaver pages| 00:00 | So far, we've looked at how
standard Dreamweaver templates fit in the
| | 00:04 | Business Catalyst universe,
| | 00:06 | but Dreamweaver also offers another
type of template: one that clients can edit
| | 00:10 | themselves right in the browser.
| | 00:12 | I am happy to report that Business
Catalyst also supports InContext Editing
| | 00:16 | templates, like Dreamweaver.
| | 00:18 | We are going to continue with the
Business Catalyst site we created in
| | 00:21 | the previous chapter.
| | 00:22 | Let me show you how it works, by
opening up the ContactUs page.
| | 00:27 | From the Files panel, I'll double-
click it to open it up. And you will
| | 00:30 | notice that on this page we have little bit of
introductory text, followed by a fairly long form.
| | 00:36 | Now typically, when you set something
like this up for your client, you are not
| | 00:40 | going to want the client to go in and
modify the form itself, but you may want
| | 00:45 | to let them change the introductory paragraph.
| | 00:48 | So let's go in, and we will select
that paragraph tag down in the tag
| | 00:53 | selector, and now I am going to go
over to my Insert panel and open that up
| | 00:59 | and then change the category to InContext
Editing, where you see we have two options:
| | 01:05 | Create Editable Region
and Create Repeating Region.
| | 01:09 | Let's put in an editable region first.
| | 01:11 | Now InContext Editing can only
accept certain types of tags: a div, a table
| | 01:17 | cell--or td, or table header--th.
| | 01:20 | So when we click on create editable
region, a dialog box will appear asking if
| | 01:26 | it's okay to wrap the current selection
with a div tag and then transform it,
| | 01:30 | meaning putting in the InContext Editing code.
| | 01:33 | Let's click on OK. And once that
operation is complete, you will see we have a
| | 01:38 | new editable region here so-marked,
and when that is selected, in the Property
| | 01:43 | Inspector, we have all of these
controls that you can then use to specify just
| | 01:48 | exactly what the client can change.
| | 01:51 | We have options for whether they can
change the content to bold, italic, underline.
| | 01:56 | I am going to deselect the underline
so that that's not available to them,
| | 01:59 | because that can often be confusing
for folks as to whether the text is a
| | 02:03 | link or an underline.
| | 02:05 | You can allow them to change the
alignment, the font formatting--this is
| | 02:09 | something also I am going to deselect.
| | 02:11 | Font size, again, let's deselect
that, so that our design stays true.
| | 02:16 | Whether something can be indented,
bulleted and numbered list is controlled by
| | 02:21 | this option box here.
| | 02:22 | Paragraphs and heading
formatting is controlled here.
| | 02:26 | Let's leave this available, so that they
can add in any headings and do separate
| | 02:29 | paragraphs if they need to.
| | 02:31 | The next one controls the background
color and then the color of the text.
| | 02:35 | The CSS formatting styles, which will
show a list of CSS styles defined in the
| | 02:40 | page, that will be available to them
in the editor, which can make it much
| | 02:44 | easier for users to style their text--
the ability to insert images and the
| | 02:48 | ability to insert links.
| | 02:49 | Okay, so with my options now set, let's
take a quick look at the code. And here
| | 02:56 | you see the InContext Editing, or ICE
abbreviation here, that shows all of the
| | 03:01 | controls that are allowable.
| | 03:03 | If I had permitted all of the options,
you would see that the editable would be
| | 03:07 | equal to an asterisk, a wildcard
meaning everything. All right!
| | 03:10 | Our page is ready to be edited.
Go ahead and press Command+S to save the
| | 03:16 | file, and when I do, Dreamweaver
alerts me that there are series of files
| | 03:20 | that have been copied to my site that
I will need to upload when I put the
| | 03:24 | file live on the server.
| | 03:25 | Let me click OK, and let's put this file,
and in fact choose putting dependent files.
| | 03:35 | If you get a dialog box like this,
go ahead and click Yes to All.
| | 03:41 | It'll take Dreamweaver just
a moment to upload the files.
| | 03:44 | Now that the files are online, we will
switch over to the browser in the next
| | 03:48 | video to show you the client's point of view.
| | Collapse this transcript |
| Enabling InContext Editing for clients| 00:00 | Now that we have set up the Contact
Us page for client modification with
| | 00:03 | InContext Editing in the previous
video, let's make sure the client has the
| | 00:08 | proper permissions to do so.
| | 00:10 | From the Business Catalyst page, I
will log in, choose the web site I want to
| | 00:19 | administer--which is Nice Joes, and then
once the main page opens up, I want to
| | 00:24 | go to the Admin link and choose Manage Users.
| | 00:29 | By default, there is only one user
that's initially added to each site, and
| | 00:34 | that's the administrator.
| | 00:35 | We are going to go ahead and add
a new user who'll be the client.
| | 00:38 | So I will go down to the Action Box
and click on Create a new User, and let's
| | 00:44 | give this e-mail address for my new user.
| | 00:50 | Enter in the client's first and last
name. No need for a cell number, but we do
| | 00:54 | need to select whether the user
you're setting up is the business owner or
| | 00:59 | another web designer/professional.
| | 01:01 | In this case, it is the business owner.
| | 01:02 | Let's scroll down just a bit, so
you can see the other options.
| | 01:06 | So we do want to allow them access to
the administration. That will allow them to
| | 01:10 | get InContext Editing.
| | 01:11 | There is no need to enable Pop Email at
this point, but you could at a later point.
| | 01:16 | And because of this is a demo, I am just
going to deselect the Email Details to User.
| | 01:20 | All right, let's click Next.
| | 01:23 | This is where the roles are assigned.
Because the previous user, the default user
| | 01:28 | who was set up, was the administrator,
| | 01:30 | he has all the rights for
both administrators and users.
| | 01:33 | We want this user to have only
the rights for the Users role.
| | 01:38 | So I am going to take the
Administrator option and move it back over to
| | 01:43 | the unused category.
| | 01:45 | Let's go ahead and click Next.
| | 01:47 | Now we see a series of menu items that we
can either hide or allow the user to see.
| | 01:53 | In this case, we are going to hide the
Modules, eCommerce--because that's not
| | 01:58 | needed at the moment, and Administration.
| | 02:00 | We will save this, and now let's take
on the client's role by first logging out
| | 02:06 | as Administrator, and then
we're going to log in as the client.
| | 02:10 | Now the client sees this view of the
portal, and notice that key menu options,
| | 02:15 | such as Modules, are no
longer available for them.
| | 02:18 | To get to the InContext Editing
option, we go to Website and then choose
| | 02:23 | InContext Editing, and select the
menu option that drops down there.
| | 02:27 | The other menu option that you see
here is Sitewalk, which is noted as being
| | 02:31 | deprecated, was the previous in-browser
editing functionality that was included
| | 02:35 | in BC. InContext Editing has supplanted that.
| | 02:39 | So I will click on InContext Editing.
A nice introductory dialog box appears
| | 02:44 | here where if you are brand-new to
using InContext Editing, you have an option
| | 02:49 | for viewing the tutorial, and after
you're familiar with it, you can click the
| | 02:52 | Don't show this dialog again check box.
| | 02:55 | I am going to go ahead and click Start Editing.
| | 02:57 | Now here we are on the homepage, and
I want to point out to you that because
| | 03:02 | InContext Editing is enabled,
| | 03:04 | it's enabled all the way across the
site--including things like the Site-Wide
| | 03:08 | Search which are the modules, the menu,
this option here, which is part of our
| | 03:14 | main template--in fact, at this moment,
the client could go in and change any of
| | 03:18 | the template features.
| | 03:19 | Now we'll take care of that in just
a moment, but let's go over to our
| | 03:23 | Contact Us page, and here you see the
area that we selected as an editable
| | 03:28 | region is highlighted.
| | 03:30 | So let's go in and make a change.
| | 03:32 | I am going to just double-click on
"enquiry" here and delete that and replace it
| | 03:36 | with a more specific name.
| | 03:38 | And now that that's complete, I can go
down to my options on the lower-right and
| | 03:43 | click Save, which would just save a working copy;
| | 03:46 | Save and Publish, which will publish
the working copy that we have now; or
| | 03:50 | Discard, which of course will
get rid of all of the changes.
| | 03:53 | Let me make one other style
change here, just so it shows up.
| | 03:56 | I am going to go ahead and
highlight Contact Us and here up above.
| | 04:00 | You see all the various text controls, and
notice that there is not a full range of them.
| | 04:05 | We do have the bold and italic, but
other things, such as changing the color and
| | 04:10 | the sizing, are not available because
we deselected those back in Dreamweaver.
| | 04:14 | So I am going to go ahead and make this
bold, which of course puts in the strong
| | 04:18 | tag, and now we are ready
to click Save and Publish.
| | 04:21 | A confirmation is requested here.
| | 04:23 | We'll go ahead and click Save and Publish again.
| | 04:25 | And now this page is complete.
| | 04:27 | Let me go ahead and log out. And let's
go to the site by removing the section of
| | 04:32 | the URL there, and we'll just type in
the first part of Contact Us. And now
| | 04:37 | here's our revised form, which has
been published by the client with the new
| | 04:41 | wording that has been bolded.
| | 04:42 | Now let's go back as an
administrator and make sure that the client can't
| | 04:46 | modify those templates.
| | 04:48 | So I am going to go in as Admin, and the
quick way to doing this is just keeping
| | 04:53 | the name of your current site--
| | 04:55 | in my case, its nicejoes.
businesscatalyst.com--and adding "admin" and then just
| | 05:00 | pressing Return, or Enter.
| | 05:03 | Let's login as Administrator
again, and once we have logged in as
| | 05:09 | Administrator, I want to go to the
Admin section again, and this time let's
| | 05:13 | choose Manage Roles.
| | 05:15 | You'll recall that the client was set
up under the User role, so I am going
| | 05:20 | to choose Users here, and then over on the
right, select Assign Permissions for this Role.
| | 05:26 | I am going to scroll down, so you can
see the listing of all the permissions.
| | 05:30 | The ones for editing your web pages are
placed right up front, and these are the
| | 05:35 | ones that allow you to add new web
pages, delete web pages, or edit web pages,
| | 05:40 | and this is the InContext Editing functionality.
| | 05:44 | Now if you didn't want the user to add
or get rid of web pages, you could remove
| | 05:48 | these two options. But the other
permissions that are a little bit more damaging
| | 05:52 | to my mind are these four that
are related to the templates.
| | 05:55 | So I am going to go ahead and highlight
all four of those and move those over
| | 06:00 | to the unused category.
| | 06:02 | Now, we also have web forms that you can control.
| | 06:05 | In this case, I am going to go
ahead and take the Editing Web Form off
| | 06:10 | the table. All right. Now that that's done,
one more time, let's go back and try it out.
| | 06:15 | So we are going to log out as
Administrator and log back in as Client.
| | 06:20 | Again, we go to Web Site > InContext
Editing and choose that from the dropdown list.
| | 06:26 | Here is our nice little alert.
| | 06:28 | We will click Start Editing.
| | 06:31 | Now, notice this time when I go over it
I don't have editable regions that come
| | 06:34 | up in my template area--much more happy.
| | 06:38 | There still is search editability, so
we would have to go in and remove that
| | 06:42 | functionality from the role permissions.
| | 06:46 | Let's go over to Contact Us, and again
there is another one where we could get
| | 06:52 | rid of the menu items. But as we move
down, we will get a highlight indicating
| | 06:56 | that there is an Edit Web Form capabilities,
but watch what happens when you go to click it:
| | 07:01 | a little error box will pop up indicating that
they do not have privileges to edit this item.
| | 07:06 | Now the reason that it showed up at
all is because there are still some
| | 07:10 | functionality, such as editing system fields,
custom fields, et cetera, that have been allowed.
| | 07:16 | You would need to go in and remove that
functionality from the permissions side
| | 07:21 | in order for this option to
completely not be available.
| | 07:25 | The application of roles and users for
your Business Catalyst clients really
| | 07:29 | give you, as the site designer and
administrator, complete control over what can
| | 07:34 | be modified by the client, and what
elements of your design remain protected.
| | Collapse this transcript |
|
|
4. Advanced Business Catalyst FeaturesSetting up a custom site| 00:00 | For the remainder of the course,
we're going to be using a custom site
| | 00:03 | developed in Dreamweaver instead of a
site based on Business Catalyst templates.
| | 00:08 | In this video, we'll walk through the
initial steps necessary to connect the
| | 00:12 | custom site in
Dreamweaver and Business Catalyst.
| | 00:15 | Let's log in to Business Catalyst again.
| | 00:20 | I'll choose the site to log in,
although we'll actually be going out to the
| | 00:24 | Partner Portal, so I'll
click on Partner Portal up here.
| | 00:29 | And as we did before, we're going to go in and
create a new site, so I'll click Create Site.
| | 00:35 | This time, we will keep that we're
using a Full Solution, but instead of using
| | 00:39 | their template, click Start from scratch.
And then we'll scroll down just a bit
| | 00:46 | and go ahead and click Finish.
| | 00:48 | Now I'm going to enter in the company name.
| | 00:51 | I'll enter in "Explore California."
| | 00:54 | Now notice what's happening in
the Starting Address. Because I have
| | 00:58 | previously, during my preparation for
this course, set up another site called
| | 01:03 | "Explore California," Business
Catalyst automatically checks that the name
| | 01:08 | extrapolated from the Company Name you've
entered, is available. And since it's not, it adds 01.
| | 01:14 | I'm going to shorten this just a bit
to "ExploreCa," and I press Tab to see if
| | 01:20 | that's available, and it looks like it is.
| | 01:23 | Let's go ahead and set the time
zone, and choose the data center.
| | 01:29 | I'll click the check box here that
indicates that I've read and agree with the
| | 01:32 | end-user agreement and then scroll
down just a bit more, and click Submit.
| | 01:37 | All right, our new site has set up.
| | 01:40 | There is no need to preview the new
site, because we haven't put the files
| | 01:43 | there, but we're just going to do
that by going over to Dreamweaver.
| | 01:47 | Now that we're in Dreamweaver, let's
open up the Business Catalyst panel, and
| | 01:52 | I'll click Refresh here, which will go
back to the server and see if there are
| | 01:57 | any new sites that have been
added. And of course, there has been;
| | 02:00 | here is Explore California.
| | 02:02 | Again, notice that the hollow circle
indicates that it hasn't been set up yet.
| | 02:06 | So I'll go ahead and click on it once,
which will open up the Business Catalyst
| | 02:11 | Quick Site Setup dialog box.
| | 02:13 | I'll will enter in my password and click Login.
| | 02:17 | Now I'm going to locate a local root folder.
| | 02:20 | In this case, once again, I am going
to create a new folder, and let's put it
| | 02:26 | in the Sites folder.
| | 02:28 | If you're on a PC, create a new
folder where you normally store your sites.
| | 02:32 | I'll click New Folder and call this
"exploreCA," click Create, and then Choose.
| | 02:41 | Now I'm ready to click Setup.
| | 02:44 | We're ready to finish up by clicking
Done, which will download all of the
| | 02:49 | Business Catalyst pages.
| | 02:51 | Now, even though we chose to set up
from scratch, there still are a few
| | 02:55 | pages up from Business Catalyst that we want
to get, including all of those layout modules.
| | 02:59 | So I'll go ahead and click Done.
| | 03:02 | Dreamweaver asks if we want to get the entire
site, and then we do indeed, so I'll click OK.
| | 03:08 | Downloading the files might take
a few moments. Okay, we're done.
| | 03:12 | Let's open up the Files panel.
| | 03:15 | I'll go ahead and click to close the
Background File Activity dialog box and
| | 03:21 | bring open the Files panel so that
we can see the initial files that we've
| | 03:25 | downloaded, including the Layouts
folder, style sheets--and an empty Templates
| | 03:29 | folder has been created.
| | 03:31 | Now we're going to bring in the
site that has already been created in
| | 03:34 | Dreamweaver, and pull it into this site.
| | 03:36 | For this, I'm going to
switch over to Finder on the Mac.
| | 03:40 | I have the files that I'm going to
use already set up on my Desktop.
| | 03:43 | These are the same exercise files,
if you're following along, that you can
| | 03:47 | download from lynda.com.
| | 03:50 | Once I have opened the
files, I'll expand Chapter4.
| | 03:54 | Here you see the entire site, called
explore_ca, and I'm going to select all the
| | 04:00 | files in there by using a
Shift+Select and then copy those.
| | 04:06 | Now I need to go to my Dreamweaver site,
which you'll recall is in the Sites
| | 04:10 | folder, called exploreCA, and now
I'm ready to paste those files in.
| | 04:17 | If a dialog box opens if you want to
replace something, go ahead and click Replace.
| | 04:22 | Okay, my files have been transferred in.
| | 04:25 | Now let's go back to Dreamweaver,
and you'll notice that the Files panel
| | 04:30 | automatically refreshes.
| | 04:31 | Now all of my files are already here.
| | 04:33 | Let's open up the index page.
| | 04:35 | You can take a look at the already created file.
| | 04:38 | Here we have a full site that we're
ready to put online in Business Catalyst.
| | 04:43 | So now I'm going to select almost everything.
| | 04:45 | I'm going to do a Shift+Select to
initially select all the files, but now I'm
| | 04:50 | going to press the Command key--or
Ctrl key on the PC--in order to deselect
| | 04:55 | certain items, such as the Layouts
folder that we in fact downloaded from
| | 04:59 | Business Catalyst, likewise the
stylesheets folder, and the Templates folder.
| | 05:05 | Now the Templates folder is a special
case that we'll cover in the next video.
| | 05:09 | Let's double-check to make sure I have
got all the files that I need to put
| | 05:12 | and none of the ones that I don't. We're ready.
| | 05:14 | Let's go ahead and click the Put button,
and put the files to the remote server.
| | 05:20 | Dreamweaver will make that connection
and immediately begin uploading your files.
| | 05:25 | Again, this might take a few moments.
| | 05:27 | When the Put Dependent Files message
appears, go ahead and click No, because
| | 05:31 | we've selected all the files
that we need to put online.
| | 05:36 | Our files have uploaded.
| | 05:38 | Let's go over to the
browser and see how they look.
| | 05:40 | So I'll open up a new tab, and go to
exploreca.businesscatalyst.com. And there
| | 05:50 | is my Dreamweaver site now being
hosted on the Business Catalyst servers.
| | 05:55 | With most of the files now synced,
we're ready to finish the process with the
| | 05:59 | templates, which we'll do in the next video.
| | Collapse this transcript |
| Integrating templates| 00:00 | In the previous video, we set up a
new site in Business Catalyst using an
| | 00:04 | existing Dreamweaver site--almost.
| | 00:07 | The one part of the site setup
that requires special handling is the
| | 00:10 | Dreamweaver template.
| | 00:12 | We'll need to convert that template
to be recognized in Business Catalyst.
| | 00:16 | Let's start by logging in.
| | 00:18 | I'll enter in my e-mail address again
and password, and this time we'll select
| | 00:26 | our new site, Explore California.
| | 00:29 | Once I've clicked Login, the
administrative site will load, and from the Admin
| | 00:34 | menu option, we'll go to
Manage Site-Wide Templates.
| | 00:38 | Now we're ready to create a new
template; I'll click on that option.
| | 00:42 | And let's call this template "internal,"
because it's going to be controlling all
| | 00:48 | of my internal templates.
| | 00:49 | We'll make this the default template,
so that Business Catalyst will know to
| | 00:54 | always use this template when
building the pages. And let me scroll down
| | 00:58 | somewhat to my Content area.
| | 01:01 | Now note this tag here, tag_pagecontent,
we'll need to include that in our HTML.
| | 01:07 | But first I'm going to switch to the
HTML side of things, and now let's go back
| | 01:12 | over to Dreamweaver, where I will open
up the Templates folder and then open up
| | 01:19 | the internal.dwt file that's found there.
| | 01:22 | Now we need to bring in all of the code,
so I'll switch to Code view, click into
| | 01:27 | the Window, and then do a Command+A--or
Ctrl+A on the PC--to select everything, and
| | 01:33 | then Command+C--Ctrl+C--to copy it. All right!
| | 01:36 | Let's go back to Business Catalyst.
And I'm just going to make a line break
| | 01:42 | here, so I'll keep that tag up top
and then paste in all of my code.
| | 01:46 | Now let's go up and get that tag.
| | 01:50 | I'll press Command+X or Ctrl+X to delete it,
| | 01:54 | get rid of extraneous line, and
let's switch back to Design view.
| | 01:59 | It is actually easier to do
this in the Design view here.
| | 02:02 | So now, all I need to do is put
in that tag that we've selected.
| | 02:06 | So I'm going to go ahead and get rid
of the little text placeholder, and I'll
| | 02:11 | paste it in using Command+V or Ctrl+V.
Now scroll down below the Template content
| | 02:16 | area and click Save and Publish.
| | 02:21 | And we'll get a message that the
item was published successfully,
| | 02:24 | so now our template has been fully
integrated into Business Catalyst.
| | 02:28 | Let's verify that just by going to View
all Templates, and here you see that the
| | 02:34 | internal template has been picked up
as both the default template and the
| | 02:38 | Printer View template.
| | 02:39 | Now you could create a separate
template and give it the Printer View template
| | 02:43 | designation if you want, but
for now this will work for us.
| | 02:46 | While setting up your Dreamweaver
templates to work in Business Catalyst does
| | 02:50 | require a few extra steps,
| | 02:51 | the added functionality is well worth it.
| | Collapse this transcript |
| Building a web form| 00:00 | Forms are a great way to
establish contact with your site visitor,
| | 00:03 | whether they're looking for more details
about something on your site or offering feedback.
| | 00:08 | While they are pretty easy to set up
in HTML, hooking them up so you can
| | 00:11 | actually use the
information is often challenging.
| | 00:14 | Business Catalyst handles both the
form front-end and back-end easily.
| | 00:18 | What's more, all the information
submitted via a Business Catalyst form is
| | 00:22 | automatically brought into the
customer database as potential leads.
| | 00:26 | So first, we need to customize a form,
and we'll do that in the Modules.
| | 00:29 | I'm logged into Business Catalyst in
my administrative portal and I go to
| | 00:34 | Modules, and then I can go all the
way down to Web Forms, and even choose
| | 00:38 | Create a new web form.
| | 00:40 | Once that page opens, I am going to go
ahead and give the web form a name, and
| | 00:45 | I'll call this Contact Us. Then choose Next.
| | 00:49 | Let me scroll down just a little bit, so
you can see the elements that we have here.
| | 00:54 | So there are a wide range of form
elements available to you, as you can see.
| | 00:59 | The ones that are initially selected
or Title, Firstname and Lastname, Email
| | 01:03 | Address, and Image
Verification, also known as CAPTCHA.
| | 01:08 | In this case, none of the existing form
fields fit the category that I'm looking
| | 01:12 | for, which is a check box indicating that the
customer wants to subscribe to the newsletter.
| | 01:16 | So for this we're going to go ahead
and add a custom field to a web form.
| | 01:21 | I'll click on number three
there and scroll up just a bit.
| | 01:25 | So let's go ahead and add in the
custom field name, which is "Newsletter." Press
| | 01:30 | Tab, and I'll choose a field type.
| | 01:32 | In this case, I just want to have a check box,
| | 01:34 | so I'll go ahead and choose a Checkbox List.
| | 01:38 | The list item should read Subscribe.
| | 01:40 | This doesn't have to be
mandatory; it's not required.
| | 01:43 | So let's go ahead and save the field, and
it will show up in our custom fields here.
| | 01:48 | Let's bring it back down.
| | 01:50 | Now, let's choose Next.
| | 01:52 | This is where you set up the auto
responder that goes out once someone
| | 01:55 | has filled in the form.
| | 01:57 | So let me go ahead and just
change a couple of things.
| | 02:00 | We will change this from the Australian
spelling to English, and we will do
| | 02:03 | the same thing down here.
| | 02:06 | In this case, we'll just keep it simple
by not using a template, and click Save.
| | 02:12 | Now, what next thing that we can do
is to go ahead and get the HTML code.
| | 02:16 | There is an option here for getting the
Web Form HTML Code, which I'll click on,
| | 02:21 | and the code will show up
here in this pop-up window.
| | 02:24 | I will select everything; and you can
also do this by pressing Command+A or
| | 02:29 | Ctrl+A. Now I'll press the keyboard
shortcut for copying: Command+C, Ctrl+C.
| | 02:35 | And there on a preview on the left, you can
see that we do have our newsletter added
| | 02:39 | in with the Subscribe button.
| | 02:41 | That's all included in
the code. I'll click Close.
| | 02:44 | Now we're ready to switch over to Dreamweaver.
| | 02:48 | Let's open up the Contact
page from the Files panel.
| | 02:51 | I'll scroll down just a little bit,
and here's a great place for a web form.
| | 02:55 | So I'm going to switch over to
Split view, so that you can see the code
| | 03:01 | where we're located.
| | 03:02 | I will remove that extraneous
paragraph and drop in the form, by pressing
| | 03:07 | Command+V for paste.
| | 03:09 | So there is my form, complete with all the
code of that Business Catalyst wrote for me.
| | 03:16 | Let's go ahead and switch to Design
view, and you can see it all laid out.
| | 03:19 | Now if there's any sort of changes
that you want to make, you can go ahead
| | 03:22 | and make them here.
| | 03:24 | Let's go ahead and get rid of--
this appears to be a line break here.
| | 03:28 | So I'll select the line break that
follows the word "Newsletter" that's giving us
| | 03:34 | this broken line here, because I want
them both to appear on the same line.
| | 03:37 | So I'm going to delete the br
code and then add in the space.
| | 03:43 | Now when I click back over on Design
view, you'll see that it realigns, and this
| | 03:46 | is following the CSS that's
already have been previously set up.
| | 03:49 | So we'll save our page with a
Command+S, and then let's put it online.
| | 03:55 | No need to put any dependent files.
| | 03:58 | The file is pretty quickly uploaded.
| | 04:00 | Let's go to our browser. And I'm going
to open up my Explorer CI site, and go
| | 04:05 | right to the contact.htm.
| | 04:09 | Now we see the form functionality has
already been added, and let's go ahead
| | 04:13 | and add in a contact name. We'll try it out.
| | 04:19 | Enter in the CAPTCHA information.
| | 04:22 | You can, of course, delete this if you
choose to, but I'm going to go ahead and
| | 04:25 | subscribe to the newsletter.
| | 04:27 | Now one of the great things about this
is the fact that I have submitted this
| | 04:30 | form and said I want to subscribe will
automatically put me in the database for
| | 04:34 | subscribing to the newsletter.
| | 04:36 | So I am going to go ahead and click Submit.
| | 04:38 | Here's my auto-generated response that
gives a summary of the information that
| | 04:42 | we've submitted, and this
information is entered into the database.
| | 04:45 | Business Catalyst will also send out
an e-mail to the given e-mail address,
| | 04:49 | thanking the site
visitor or submitting the form.
| | 04:52 | You're free to create multiple BC
forms and use them anywhere on your site.
| | 04:56 | You can insert them as a module,
ready to go, and customize them right
| | 04:59 | in Dreamweaver.
| | Collapse this transcript |
| Inserting a blog| 00:00 | Blogs have become an omnipresent aspect
of the web. From a business perspective,
| | 00:04 | they're great for companies and
organizations communicating with their customers,
| | 00:08 | and are really good for
search engine optimization.
| | 00:11 | Business Catalyst has a very robust
blog interface, which you can easily
| | 00:15 | incorporate into your Dreamweaver pages.
| | 00:18 | Let's start in the Business Catalyst
administrative side, by choosing Website and then Blogs.
| | 00:24 | We're going to go ahead and create a
new blog, and let me scroll down a bit so
| | 00:29 | you can see all of the details
that we'll have to work with here.
| | 00:32 | First, I am going to enter in a blog
name, and we're going to call this "My
| | 00:36 | California," and I'll press Tab, and
you can set a release date for your blog.
| | 00:41 | You can put a month into the future,
next week--whatever you like.
| | 00:44 | I am going to keep it as today
and go ahead and click Close.
| | 00:47 | Of course, you want to make sure
that your blog is enabled so that the
| | 00:51 | Enabled option is checked.
| | 00:52 | We will be using the default template.
And now, on Weighting, if you had more than
| | 00:57 | one blog on the same page, you could
use the Weighting field to sort them.
| | 01:01 | Just enter in a higher number for
a blog you want to appear first.
| | 01:05 | In this case, we are only going to have
one blog, so we don't need to weight it.
| | 01:09 | The Expiration Date is set to the year
9999, and now we can go ahead and enable
| | 01:15 | trackbacks so that you can track what
other bloggers say about your blogs.
| | 01:20 | And of course, we do want to keep this blog
syndicated, so we'll enable the RSS feeds.
| | 01:25 | All right, let's go ahead and click Next.
| | 01:27 | The blog is set up, but we don't have
any posts yet, so let's go in, and I'll
| | 01:32 | click on New Post here.
| | 01:33 | We will keep the current date.
| | 01:36 | I am not going to enter
in any tags at this point.
| | 01:39 | We can, later, if you like.
| | 01:41 | Let's enter in a post title, and I'll
scroll down to where the Blog Post Content is.
| | 01:50 | I'll enter in a little bit of content.
| | 01:58 | Okay, with a tad of content in, let's
scroll down and save it. So we have one
| | 02:05 | blog created with a single post, and
now we are ready to go over and bring
| | 02:09 | that into Dreamweaver.
| | 02:10 | Let's switch over to Dreamweaver.
And now I am going to create a page from my
| | 02:14 | template by going to the Assets panel
and right-clicking on my template, Internal,
| | 02:19 | and choosing New from Template.
| | 02:22 | Now in order to insert the content
I'll need to open up the Business Catalyst
| | 02:27 | panel and insert a module.
| | 02:28 | But before I do, why don't I go ahead
and get rid of this extraneous text.
| | 02:34 | Now, let's open up the Business
Catalyst panel, and here you see I have the
| | 02:38 | Blogs already expanded.
| | 02:40 | I can choose any number of these options.
| | 02:42 | There is one for including one or
more blogs, another option for including
| | 02:47 | just the latest post from a single blog,
and then you can also include latest
| | 02:50 | posts across all blogs.
| | 02:52 | I am going to choose the Latest Post
from a single blog and double-click that.
| | 02:59 | Here you can see the various
blogs that have been set up.
| | 03:02 | I have my My California as a blog.
| | 03:04 | I'll choose that, and click Next.
| | 03:07 | If I had any tags entered for my
various posts, I could enter them here to
| | 03:12 | further hone the selection.
| | 03:14 | I don't, so I'm going to go ahead and
click Next again, and now the module is
| | 03:17 | ready to be inserted.
| | 03:18 | Click Insert and there is
the code that you will need.
| | 03:22 | Let's go ahead and save the file, and I
am going to call it "blog.html," and now
| | 03:32 | let's put it online.
| | 03:34 | There are no dependent files, so I'll
click No. And once Dreamweaver has put the
| | 03:39 | file, I can switch back to the browser,
open up a new tab, and then go to my site.
| | 03:46 | And now let's go to the
specific address of blog.html.
| | 03:52 | So there's my blog post with the title
"Coast Lines I have known and loved," and
| | 03:55 | a little bit of content that I entered.
| | 03:57 | You'll notice that I also have Comments,
Trackbacks, and Permalink functionality
| | 04:02 | automatically included.
| | 04:04 | Business Catalyst gives you a great
deal of control over blog presentation,
| | 04:08 | and it makes it very easy for clients
to add their own posts from within their
| | 04:11 | customer portal.
| | Collapse this transcript |
| Handling downloadable documents| 00:00 | A major part of online businesses is
disseminating information: product manuals,
| | 00:05 | setup guides, year-end reports; all of
these types of documents and more must be
| | 00:09 | made available to the customer.
| | 00:11 | Business Catalyst includes a robust
module called Literature for managing
| | 00:15 | downloadable documents, which
can be easily integrated into your
| | 00:18 | Dreamweaver design pages.
| | 00:20 | Best of all, the Literature feature
keeps track of all downloads and makes that
| | 00:24 | info available to clients via an online report.
| | 00:27 | So let's start in the Business
Catalyst Admin page, and we'll select Modules.
| | 00:33 | Once you roll over it, you can go
directly to Literature and create a
| | 00:36 | new literature item.
| | 00:39 | Here we will enter the name for that
item, which is "Explore California brochure,"
| | 00:46 | and after I press Tab, the
calendar for the release date pops up.
| | 00:49 | We can, of course, set this into the
future, so that you don't want this to
| | 00:53 | appear until to that date.
| | 00:55 | I am going to accept the current date.
| | 00:57 | I'll scroll down a tad, just so
I can click the Close button.
| | 01:00 | Of course, you want make sure that
it's enabled if you do want it set up.
| | 01:04 | The Literature Type shows the different
types of literature that can be uploaded,
| | 01:09 | and each of these entries
corresponds to a specific icon for that type.
| | 01:13 | Since I am uploading a PDF file,
I'll keep it at Adobe Acrobat.
| | 01:17 | The Weighting field is used just as within
with blogs, where if you have multiple
| | 01:22 | articles on a page, you can sort
them if you don't want to default
| | 01:25 | alphabetical sorting.
| | 01:26 | All right, we'll leave our expiration date
at the first of January, in the year 9999,
| | 01:32 | and go ahead and click Save.
| | 01:35 | At this point, I want to go ahead and
upload my Literature, so I'll click Upload
| | 01:39 | Literature from Action Box and then
choose Select in the Upload Manager.
| | 01:43 | We will navigate over to my site,
Explore CA, and all these files are stored
| | 01:50 | in the Resources folder, so I'll
open that up, and there is my Explore
| | 01:55 | California brochure.
| | 01:57 | Click Open and Upload.
| | 02:01 | Now that it has been uploaded
successfully, I can click Close and Refresh.
| | 02:05 | All right, our work here in
Business Catalyst is done.
| | 02:08 | Let's switch back to Dreamweaver.
| | 02:09 | So, I am going to open up the Assets
panel, so that I can create a new page.
| | 02:15 | Right-click and choose New from Template.
And now my module code is again going
| | 02:20 | to go in where this content is already
placed, by selecting the code on lines 33
| | 02:25 | and 34 and pressing Delete and
leaving my cursor in the main article div.
| | 02:32 | Now let's open up the Business
Catalyst panel, and I will scroll down to see
| | 02:37 | the Literature module.
| | 02:39 | Let me go back up just a tad and expand that.
| | 02:45 | Now, I can just double-click on the
Literature module, and you'll see that it has
| | 02:51 | a wide range of options, including
Individual Item, All Items, All Items in a
| | 02:55 | Specific Category, and so forth.
| | 02:58 | Let's just leave it at All Items and click Next.
| | 03:01 | My module is ready to be inserted.
| | 03:02 | I will click Insert, and there's my module code.
| | 03:06 | So now I'll save the page.
| | 03:08 | Go up to the File > Save, and
let's call this "literature.html."
| | 03:14 | All that's left is to put the page online.
| | 03:16 | I'll click Put, and there
are no dependent files again.
| | 03:22 | Now that the file is up, let's go back
to the browser, open a new tab, and go to
| | 03:28 | my Explore California home and type
in "literature.html", and there is my
| | 03:36 | literature listed, ready to be downloaded.
| | 03:38 | If I click on it, a system message comes
up asking if I want to open it or save it.
| | 03:42 | Let's take a look at it.
| | 03:43 | I'll click OK. And after it
downloads, there's my PDF.
| | 03:48 | Business Catalyst's Literature module has
several advantages over just linking to
| | 03:52 | documents for download, including the
ability to categorize the documents and
| | 03:56 | the built-in download tracking.
| | Collapse this transcript |
| Creating announcements| 00:00 | How do you keep your site
visitors up on current events?
| | 00:03 | The modern web has a number of
options, including Twitter and blogs.
| | 00:06 | Another possibility is to put out an
announcement, which may be a press release
| | 00:10 | or a more general notification.
| | 00:12 | Business Catalyst's Announcement module
lets you categorize your announcement,
| | 00:16 | syndicate them via RSS feeds, or
restrict their viewing to authorized personnel.
| | 00:21 | Let's take a look at how announcements work.
| | 00:23 | Again, we'll start out in the
Business Catalyst Admin page. Here I will
| | 00:27 | choose Modules and then go to
Announcements and Create a new Announcement.
| | 00:34 | A little scroll down, and I notice that
one of the first options that I have is
| | 00:38 | the ability to enter in my own
SEO-friendly URL, and you can do this for
| | 00:43 | every announcement.
| | 00:44 | In this case, I am just going to
leave as it is and put in my Announcement
| | 00:48 | Subject, which is "New Brochure
Released." So I'll press Tab.
| | 00:52 | Now the first date you see
here is the Event Date From.
| | 00:57 | If your announcement involves an event
that has a starting and an ending date,
| | 01:01 | you could use this field for
including that information.
| | 01:04 | Mine doesn't, so I am going
to go ahead and click Close.
| | 01:06 | There's a Release Date for when you
want the announcement to go out, and the
| | 01:11 | other typical fields of which
template to use, and the Expiration Date.
| | 01:15 | There is even an Event Date To
so you can set the date range.
| | 01:20 | Now let me go down to the
Announcement Content section, and I'll enter in
| | 01:23 | some text and a link.
| | 01:28 | Let's make the Explore
California brochure the link.
| | 01:33 | I'll choose the Link icon there and
enter in our site. Click OK and now
| | 01:44 | scroll down and Save.
| | 01:47 | Okay, we have an Announcement item.
| | 01:49 | Let's go ahead and switch over to Dreamweaver.
| | 01:51 | I'll close out my literature page from
the previous lesson and then go to the
| | 01:56 | Assets panel, create a new page, New
from Template. And as we have before, we'll
| | 02:03 | eliminate the placeholder text, and
then open up the Business Catalyst module.
| | 02:08 | And this time, we are going to scroll
up to Announcements, expand that, and
| | 02:14 | choose the Announcements module.
| | 02:16 | Again, we have the option for
displaying one or all of our items.
| | 02:20 | Let's leave it at All Items and
then click Next, and insert our module.
| | 02:25 | Okay, we are ready to save the
file, and we are just going to call
| | 02:28 | this "announcement.html."
| | 02:32 | Let's post that. No dependent files
are needed. And we are ready to switch
| | 02:39 | over to our browser.
| | 02:40 | Let's add a new tab, go to the
site, and go to announcements.html.
| | 02:48 | Here is our new brochure,
including the link that you see here.
| | 02:53 | Notice that it shows up an
abbreviated format, so if I click on it, the
| | 02:58 | full listing appears.
| | 02:59 | This is the detail section, and
it comes complete with a link.
| | 03:04 | So I can click on that, and it will go
to my literature page. Let me go back.
| | 03:08 | The other feature that you will find in
Announcements is that they automatically
| | 03:11 | include a Comment section, which is
included so your site visitors can provide
| | 03:16 | feedback on your announcements--
perhaps asking for more information.
| | 03:20 | Keeping your site fresh with current
news is important from both the current
| | 03:24 | and potential customer perspective, as
continually updated sites rank higher on
| | 03:29 | the search engines.
| | 03:30 | Business Catalyst's Announcements
module mix both task very straightforward
| | 03:35 | and client-usable.
| | Collapse this transcript |
| Setting up an email campaign| 00:01 | Many web site owners work with third-party
companies to handle their e-mail marketing.
| | 00:06 | While this can be effective,
| | 00:07 | it's nowhere near as useful as
Business Catalyst's built-in e-mail
| | 00:11 | marketing functionality.
| | 00:13 | Because it's integrated with the rest
of your online business, you can more
| | 00:16 | easily communicate with your customers--
both potential and current--and you
| | 00:21 | retain complete design control.
| | 00:23 | So to start, you log in to Business
Catalyst and go to your Admin console, and
| | 00:28 | then select Marketing.
| | 00:30 | Now the first step in setting up an
e-mail marketing piece is creating an
| | 00:34 | e-mail marketing campaign.
| | 00:37 | So I'll go over to the Action Box
and choose Create a new Campaign.
| | 00:42 | There are two different types of
campaigns that Business Catalyst can handle:
| | 00:45 | it can send a one-off e-mail to any
other recipients that you choose, or you
| | 00:50 | can send a customer loyalty e-mail
for recipients who might be having an
| | 00:55 | anniversary or a birthday.
| | 00:57 | Let's go with the one-off
e-mail broadcast and click Next.
| | 01:02 | Now we get to name our campaign.
| | 01:04 | I am going to go ahead and change this
from November to December and set the
| | 01:10 | Delivery Date for the 1st of December.
| | 01:14 | In this case, I am not going to use a
custom template, but I am going to rely on
| | 01:18 | the built-in templates, just so I can
show you what BC has to offer and how easy
| | 01:22 | it is to customize them.
| | 01:24 | Here is my Email From Name
and the Email From Address.
| | 01:28 | Now of course, you'll notice the red X
there; that's to indicate that the e-mail
| | 01:33 | address has not yet been verified.
| | 01:35 | We will be able to do that a little bit later.
| | 01:37 | Let me change the subject to match the
name of that campaign. And the final step
| | 01:42 | is to choose the e-mail format.
| | 01:44 | Business Catalyst can send
either HTML or text e-mails.
| | 01:48 | We want to send an HTML e-mail.
| | 01:50 | So let me click Next.
| | 01:51 | Now we get to choose our recipients.
| | 01:54 | You can see a number of various lists
here from previous work that I've done in
| | 01:59 | preparing for this course.
| | 02:01 | In this case, we're going to go ahead
and set up a new list, and when you click
| | 02:05 | that option, the page refreshes.
And now you have the two different ways that
| | 02:09 | you can add to your list.
| | 02:11 | You can upload and import a list of recipients.
| | 02:14 | This list needs to be in a comma
separated value, or CSV, format, which is
| | 02:19 | typically exported from Excel. Or we
can go ahead and add a recipient manually.
| | 02:25 | I'll choose that option,
| | 02:27 | the page will refresh, and when I scroll
down, I now have a Quick Subscribe area
| | 02:31 | where I can enter in the name of the
recipient as well as their e-mail address.
| | 02:36 | So let's enter in the name of my
recipient, who is Raul Diaz, and his e-mail address.
| | 02:42 | I am ready to click Subscribe.
| | 02:45 | Now, I could go ahead and add
additional names, but let's go forward, so I can
| | 02:50 | show you how to finish up the e-mail piece.
| | 02:52 | I'll click Next. Now, you get to
choose the layout for your e-mail.
| | 02:57 | Business Catalyst has a number of
templates available, all organized by industry.
| | 03:02 | You can see a preview of it by
selecting any of the options, in the
| | 03:07 | first category list--
| | 03:08 | I'll choose Cafe and Restaurant--and
then choosing one of the styles, such
| | 03:11 | as Casual or Formal.
| | 03:14 | I am going to go with a newsletter
that I've used before for the travel
| | 03:18 | industry, so I will choose Travel,
and we will stick with the Formal style.
| | 03:23 | I'll scroll down and then choose Next.
There is my newsletter layout, and I can
| | 03:31 | make adjustments to it at this point.
| | 03:34 | Now the first thing I want to do is
swap out the image that they have for my
| | 03:37 | Explore California logo.
| | 03:39 | Now to do this, I would go in, and in this
circumstance, go ahead and first remove
| | 03:45 | the foreground image, by selecting
it and then pressing the Delete key.
| | 03:50 | Now you'll notice that the image is still there.
| | 03:52 | That's because in this particular
template they also have a background image set
| | 03:57 | up for this table cell.
| | 03:59 | So to get rid of that, I'm going to go
ahead and switch over to HTML, and let me
| | 04:04 | zoom in a bit in order to make it easier
for you to see the code. I'll scroll down
| | 04:10 | because the code line that I am
going to remove is this background image
| | 04:13 | line that you see here.
| | 04:15 | I've selected it, and now I'll just
press Delete, and we can zoom back out.
| | 04:21 | Scroll down a tad, and
let's switch back to Design view.
| | 04:25 | So with that image gone, let's
go ahead and insert another one.
| | 04:29 | I'll place my cursor in the table cell
and then choose the Image Manager icon here.
| | 04:36 | Now, I can choose from any of the
images that I have on the site, or if I need
| | 04:40 | to, upload a new one.
| | 04:42 | I happen to have a logo
right in my images folder,
| | 04:45 | so I scroll down, select that, and then
once I preview it to make sure that it's
| | 04:51 | the right one, click Insert.
| | 04:53 | So there's my new image.
| | 04:55 | I'm going to go ahead and change
the name of the newsletter to "DECEMBER
| | 05:02 | EXPLORATIONS," and for now, let's
just keep the placeholder content.
| | 05:06 | You will notice that there are
numerous tags, such as the unsubscribe tag,
| | 05:10 | which you legally need to include
in order to make sure that folks can
| | 05:14 | unsubscribe from your list.
| | 05:15 | So I am going to scroll down a
little bit more to get to the controls, go
| | 05:19 | ahead and save this draft, and now we
can take a look at it by previewing it
| | 05:24 | to make sure that it's going to come
out okay. And here's an option for viewing
| | 05:28 | in the browser, which will go to a
web page that Business Catalyst will
| | 05:32 | automatically set up.
| | 05:33 | Here is my new logo, my new title.
| | 05:36 | It feeds in the name, or my test
subject, which is myself, and if I scroll down,
| | 05:44 | you can even see the unsubscribe link.
| | 05:46 | So this is the point where I get
to send the verification e-mail.
| | 05:50 | I am going to go ahead and click that,
and we get a note that "A verification
| | 05:54 | e-mail has been sent to the from address."
| | 05:56 | Now I am going to switch over to my e-
mail client, Thunderbird in this case,
| | 06:00 | and choose Get Mail.
| | 06:01 | There is my verify e-mail.
| | 06:04 | Let's go ahead and show the remote
content, so that you can see the Business
| | 06:08 | Catalyst logo. And now you'll see
that there is a link that I need to click
| | 06:12 | in order to verify,
| | 06:14 | so I'll go ahead and do that.
| | 06:15 | I get a note that the verification has
been successful, and we can go ahead and
| | 06:20 | finalize any campaign from this e-mail address.
| | 06:24 | So, let's go back to my Explore California tab,
scroll down, and we are ready to click Next.
| | 06:31 | Now, on this final stage, you'll see
that there is an Error box showing,
| | 06:36 | indicating that there are no reports
available since the campaign has not
| | 06:39 | yet been delivered.
| | 06:40 | You'll also notice that the From
e-mail has been approved, so I have a green
| | 06:44 | check mark, but the content
is still awaiting approval.
| | 06:48 | If I were actually sending this
campaign out, I would go ahead and click
| | 06:53 | the Save and Send, which would put it into
the queue for approval by Business Catalyst.
| | 06:58 | Now once the report is sent, I do
just want to point out some of the
| | 07:02 | features that you have.
| | 07:03 | You can look up the number of total
recipients, how many customers opened it,
| | 07:09 | the customers who took action, how many
bounces there were, unsubscribes, and so on;
| | 07:13 | all of that will be listed on this report here.
| | 07:16 | All of the Business Catalyst plans
that include e-mail marketing allow up to
| | 07:20 | 10,000 e-mails per month.
| | 07:22 | If your client needs more,
they're available as an add-on package.
| | Collapse this transcript |
|
|
5. Building an Online Store with Business CatalystCreating a catalog| 00:00 | Building an online store is, without
a doubt, one of the most challenging
| | 00:04 | web designer tasks.
| | 00:06 | Fittingly enough, it can also
be one of the most rewarding.
| | 00:10 | If you're jumping into this chapter and
want to follow along, you will need to
| | 00:13 | set up your Dreamweaver site as
shown in the first video of chapter 4,
| | 00:17 | but use the explore_CA folder
found in the chapter 5 exercise files.
| | 00:23 | That will bring you up to date.
| | 00:25 | If you've been following along from
chapter 4, we will continue to use the same site.
| | 00:29 | Business Catalyst provides a
complete soup-to-nuts e-commerce solution,
| | 00:33 | all of which can be implemented
without writing any server-side code.
| | 00:37 | Let's start our exploration by setting
up some categories--or, as they're known in
| | 00:41 | Business Catalyst, Catalogs--for our
products, to make them easy to find.
| | 00:45 | We are here in the Business Catalyst
administrative site, and let's choose
| | 00:50 | the eCommerce category.
| | 00:51 | The very first option is Catalogs.
| | 00:55 | You can see we don't have any catalogs set up,
| | 00:57 | so let's create one by
clicking on Create a new Catalog.
| | 01:00 | I will scroll down, just to
show the available options.
| | 01:06 | The first option, of course, is
to enter a name for our catalog.
| | 01:08 | We are going to be setting
up three catalogs in all.
| | 01:11 | This one's is called "Gear."
| | 01:14 | Now to bring an image in I will need to
open the Image Manager, which I can do
| | 01:17 | by clicking on the
Folder icon to the right here.
| | 01:20 | Once the Image Manager opens up, if I
already have a file on the site that I
| | 01:24 | want to use, I can just locate it here.
| | 01:27 | If I don't, I can choose the
Upload Files option up here.
| | 01:31 | So my files are located in the images folder.
| | 01:33 | You will notice I have a number of
subfolders here, including details, which will
| | 01:38 | be my larger image of my products, and
thumbs, which are the smaller images.
| | 01:42 | So I am going to go ahead and click on thumbs.
| | 01:46 | Let's say that the image I wanted to use
is one of the travel mug that I have here.
| | 01:51 | When I click on the file name, I will
get a preview of the image, as well as its
| | 01:56 | file size and dimensions, which
happen to be 150 x 150 pixels.
| | 02:01 | Now, that's a little bit too large
for the layout that I have in mind,
| | 02:04 | so I need to resize it.
| | 02:06 | Luckily, Business Catalyst
has that functionality built in.
| | 02:09 | So I will go ahead and click on Resize.
| | 02:11 | Let me scroll down.
| | 02:13 | The first thing I want to do is change the name.
| | 02:15 | It automatically appends an _New.
| | 02:17 | I am going to make that _cat, for a catalog.
| | 02:20 | Now I can change the Width and Height.
| | 02:22 | I will change those to 110 pixels.
| | 02:25 | Of course, I do want to constrain the
proportions, so that it looks exactly the
| | 02:29 | same. And I'm ready to click Save.
| | 02:33 | So now my travel mug_cat has been created.
| | 02:36 | I will click it, and now I see
that the correct dimensions are there,
| | 02:40 | so let me go ahead and
click Insert. There's my path.
| | 02:44 | Like many other modules, Business
Catalyst also offers release date functionality
| | 02:48 | as well as an expiration date.
| | 02:50 | This is great for business owners,
because they can move products online and
| | 02:53 | offline by simply setting a couple of dates.
| | 02:55 | Of course, we want this enabled
if we want the product to show.
| | 02:59 | Let's use our default template.
| | 03:01 | The Weighting field allows you
to sort the various categories.
| | 03:05 | In this case, I am going to go
for the default option, which is an
| | 03:08 | alphabetical sorting.
| | 03:09 | Now there is an XML feed that
you can include your products in;
| | 03:12 | that's a great way to
reach more potential customers.
| | 03:15 | Over here under Parent Catalog, you
will see the Root is initially selected.
| | 03:20 | Business Catalyst has the capacity to build
subcatalogs, as well as catalogs on the main level.
| | 03:25 | In our situation, we are going to
have all our catalogs be at the root.
| | 03:30 | Finally, we have the option for showing
the product prices to everyone or just
| | 03:34 | the existing customers who have logged in.
| | 03:37 | In this case, we want to keep it wide open,
| | 03:39 | so let's choose everyone.
| | 03:40 | Now let me show you the More
Options available with categories.
| | 03:45 | Scroll down just a bit to expose those.
| | 03:46 | You can give the catalog a different
title, if you want, that will supplant the
| | 03:50 | one that you have up here for internal use.
| | 03:53 | In this case, let's keep it the same.
| | 03:55 | Now, these next three
options are really interesting.
| | 03:57 | If, for example, I wanted to set up a
series of price ranges, I would use these
| | 04:01 | three fields in order to do that.
| | 04:03 | With the travel mug, there's not a whole
lot of options for different price ranges.
| | 04:06 | But let me hide More Options here.
| | 04:09 | Now, I could click Next, but that's just
going to take us to a list of products
| | 04:12 | to assign to these categories.
| | 04:14 | Since we don't have any products
uploaded now, all I need to do is click Save.
| | 04:19 | So I have our first one set up.
| | 04:21 | Let's scroll down just a little bit more,
so I can now create another catalog.
| | 04:26 | This one is going to be Clothing, and
we will go through the same process,
| | 04:30 | selecting the image.
| | 04:32 | I do have numerous options to choose from.
| | 04:35 | I will choose my fleece here.
| | 04:36 | That looks pretty good.
| | 04:37 | I will need to resize that.
| | 04:39 | First, I will change the name to "Fleece_cat."
| | 04:44 | Then change the Width and Height to the
same dimensions of 110, and click Save.
| | 04:52 | Now, I drill back down into my thumbs
category and choose Fleece_cat and click Insert.
| | 05:00 | The Release Dates we'll keep the same.
| | 05:02 | We will use our default template, and all
of the other values are exactly the same,
| | 05:07 | so let's click Save.
| | 05:08 | That was pretty quick.
| | 05:11 | Let's add our final category.
| | 05:15 | This one will be Media.
| | 05:16 | We have some dvds for sale.
| | 05:20 | So I will click the Image Manager icon.
| | 05:24 | Let's choose the dvd_coast
image there and again Resize that.
| | 05:30 | Change the name to make it
consistent and the Width and Height.
| | 05:36 | Now that it saved, I will drill
back down into my thumbs category and
| | 05:41 | locate dvd_coast_cat. There it is,
| | 05:45 | so let's go ahead and click Insert.
| | 05:48 | All I need to do now is just set the
Template to Use default template and click Save.
| | 05:53 | The three catalogs I wanted to set up are done.
| | 05:56 | You can add as many catalogs as you want,
| | 05:58 | but now you're ready to fill
in those catalogs with products.
| | Collapse this transcript |
| Adding products| 00:00 | Now that we have the organizing catalogs
established, time to fill them with products.
| | 00:04 | With Business Catalyst, you can add
products either one at a time or import a
| | 00:08 | store-full, all at once.
| | 00:10 | I'll show you both techniques, starting
with the one-off approach, just so you
| | 00:14 | can see all the available options.
| | 00:15 | All right, in the Business Catalyst
administrative page, let's choose eCommerce
| | 00:21 | again. And this time, just roll over to
Products, and let's go ahead and start
| | 00:25 | by clicking Create a new Product.
| | 00:27 | Let me scroll down, so that we can take a
look at all the available product details.
| | 00:32 | Of course, we'll start with the
Product Name, and this is our travel mug.
| | 00:39 | We have the sorting feature
available in the Weighting field.
| | 00:41 | Again, we'll just leave that as
is and keep the same Release Date,
| | 00:46 | Enabled option as well.
| | 00:48 | Now we need to choose two images: a
small one that will go on to the main
| | 00:52 | catalog page and a larger
one for the detail page.
| | 00:56 | All right, I'll open up the Image
Manager, and here we are already in the thumbs
| | 01:01 | folder. So let me choose my
travelmug.jpg and click Insert.
| | 01:07 | We'll open up the Image Manager again
for the large image, and this time we need
| | 01:11 | to go up one level and into the details folder.
| | 01:15 | Now all of my images here are the same
dimension, but they're larger than the
| | 01:19 | thumbs. These are 340 x 450, but
I've named them exactly the same.
| | 01:23 | So I'll choose travelmug.
| | 01:24 | There is a nice preview and click Insert.
| | 01:29 | Okay, now you get an option to decide
whether it's on sale or not--again, a
| | 01:34 | great feature for the business owner
who can easily go in and set up individual
| | 01:38 | items on sale or not.
| | 01:40 | So let's put this on sale.
| | 01:42 | Now there are a good number of
additional options that you have.
| | 01:46 | Let's choose the Show More
Options here, so we can dive into those.
| | 01:51 | I'm going to scroll down just a tad.
| | 01:53 | Now, we have the option to
enable controlling of inventory.
| | 01:57 | If we check this check box, Business
Catalyst would automatically deduct one
| | 02:02 | item from the inventory for every one
that's sold, until you get to the point
| | 02:06 | where there are no more available,
and then the different messaging can
| | 02:10 | appear on the site.
| | 02:11 | You can also hide if out of stock.
| | 02:13 | For this demo, however, let's not
enable the control inventory, but I will put
| | 02:18 | in some stock values.
| | 02:19 | Let's say that we have 100 already in stock.
| | 02:22 | You can, if you need to, include
On Order and the Re-order Threshold;
| | 02:26 | all of this, really good for the businessman.
| | 02:28 | Now we can go ahead and set up
shipping information, including weight and
| | 02:32 | the various dimensions.
| | 02:33 | Now there are also a number of
miscellaneous features, including gift vouchers--
| | 02:38 | which we'll cover in a later video--
and excluding from search results or
| | 02:42 | enabling drop shipping.
| | 02:44 | One thing that's really interesting for
certain businesses is you can set up an
| | 02:47 | affiliate program and include the
commission payable on these items.
| | 02:52 | Now finally, let me scroll down just a
little bit more, and here is, I think, a
| | 02:56 | really exciting option:
| | 02:57 | you have the possibility in Business Catalyst
to sell either physical goods or digital goods.
| | 03:02 | So if I check this E-Product, or
Electronic Product, option, you can see where
| | 03:07 | I can limit the number of downloads here,
and I can even limit where they are going to,
| | 03:12 | so it has to be from the original IP address
of my customer, or it can be any IP address.
| | 03:17 | We're not going to do this as an
e-product, but let's go ahead and enter in a
| | 03:21 | product description for our travel mug.
| | 03:28 | I'm going to make sure that
we have truth in advertising.
| | 03:31 | Okay, we're ready to go ahead and click Save.
| | 03:38 | Our details have been set up properly.
| | 03:41 | Now the next thing to do is
to add prices to this product,
| | 03:45 | so I will go ahead and click Add Prices.
| | 03:47 | Because Business Catalyst is a global
company, you have the option for setting
| | 03:51 | different prices for different countries.
| | 03:53 | So in this case, we're going to keep it
at United States, but we have the full
| | 03:57 | list of countries to choose from.
And you can also set pricing for separate
| | 04:02 | target customers, whether you're
working with consumers or wholesalers.
| | 04:05 | In this case, we'll stick with consumers.
| | 04:07 | So we have a recommended retail
price as well as a sell price.
| | 04:10 | It could be the same, or you could have
Business Catalyst show different prices
| | 04:15 | in order to encourage
people to buy at the sale price.
| | 04:17 | So let's enter in 14.99 for the Recommended
Retail Price, and we'll sell it for 12.99.
| | 04:23 | Also, I have the option for enabling
volume discounts and setting up the tax code.
| | 04:29 | We don't have that set up yet,
| | 04:30 | so let's just go to the next step.
| | 04:36 | Now, we get to see which categories
that we want to include this in, and this
| | 04:40 | falls in our Gear category.
| | 04:46 | So once that is done, all of our
product information is complete, and we're
| | 04:49 | ready to go on and add in the other products.
| | 04:52 | Now at this point, we just have the
one product, and we could go through and
| | 04:56 | enter in all of the details for all of
those products over and over again, but
| | 04:59 | there is a much faster way.
| | 05:01 | Business Catalyst will allow you to
import products that are detailed in a
| | 05:05 | spreadsheet file, typically a CSV or
tab-delimited format, but the file has to
| | 05:11 | follow a very specific format.
| | 05:13 | The best way that I've found in order to
do this is to start by downloading your
| | 05:17 | entire product list, which consists
of just one product at this point.
| | 05:21 | So I'll click on that, and let's save the file.
| | 05:25 | Now that that's done, let's switch over
to Excel, and I'll open a file, which is
| | 05:37 | located in my Downloads folder.
| | 05:38 | You'll notice that it's
called ProductExports.xls.
| | 05:44 | So here you see the very
simple spreadsheet format.
| | 05:48 | The first row contains all the field
names: Product Code, Name, Description,
| | 05:53 | Small Image, Large Image, etcetera.
And there are quite a few fields--in fact,
| | 05:57 | there are 51 fields altogether.
| | 06:00 | Many of them, however, you'll
notice are empty and are optional; you
| | 06:03 | don't need to fill out.
| | 06:04 | So you start with this list, and then
from here you can go ahead and expand it
| | 06:09 | to fill out all of your other products.
| | 06:12 | In the exercise files, we have an
example of this. So let me open up, from our
| | 06:18 | Desktop, the exercise files in
chapter 5 and choose ProductImport.txt.
| | 06:24 | Now this is a tab-delimited file,
| | 06:27 | so when we open it, Excel will
have to understand what that is.
| | 06:30 | It's a delimited format.
| | 06:32 | I'll click Next using Tabs,
| | 06:35 | that's great, and click Finish.
| | 06:40 | So here are 14 products
that we have ready to go.
| | 06:44 | You'll notice that each of
them have a product code set up.
| | 06:48 | This is the unique identifier, or often
it's called the skew, as well as all of
| | 06:53 | the other information.
| | 06:54 | Okay, so let's flip back to Business Catalyst.
| | 06:59 | We'll scroll down all the way,
so that we see Import Products.
| | 07:04 | Let's browse for that file, which
is located in the Desktop/Exercise
| | 07:08 | Files/Chapter5/ProductImport.txt.
| | 07:14 | I'll click Open, and Business Catalyst
accepts two file types: a comma-delimited
| | 07:20 | file and a tab-delimited file.
| | 07:22 | This one is tab delimited.
| | 07:24 | I've found that when you're working
with product descriptions, it's almost
| | 07:26 | impossible to keep commas out of your text,
| | 07:29 | so Tab Delimited is a much better way to go.
| | 07:31 | Our first row does contain column
headers, and we are updating items.
| | 07:35 | I'm going to scroll past all the fields
to import that Business Catalyst list--
| | 07:39 | as you can see, there are
indeed 51 of them. Click Next.
| | 07:44 | Business Catalyst pops open an alert,
trying to make sure that all of your
| | 07:48 | information is correct. Click OK.
| | 07:51 | Once it uploads the file, it will take a look
and make sure that it's in the proper format.
| | 07:55 | If it's not, you'll get an error.
| | 07:56 | Otherwise, what you'll see is a preview
of the file, which you can review just to
| | 08:01 | make sure it does show you just a
few of the items and not all of them.
| | 08:05 | If everything looks good,
let's go ahead and click Import.
| | 08:09 | All right, the file has been
imported successfully in about 1.5 seconds.
| | 08:14 | That's pretty good.
| | 08:16 | So now all of our products are
available in the Business Catalyst system.
| | 08:20 | Next, we'll take a look at
customizing their presentation.
| | Collapse this transcript |
| Styling detail pages| 00:00 | Business Catalyst provides a basic
layout for all of its e-commerce pages that
| | 00:04 | you can modify to your heart's content.
| | 00:07 | While you can do it Business Catalyst,
it's even easier in Dreamweaver, using
| | 00:11 | tools you are already familiar with.
| | 00:12 | Now we have created our categories, but so
far, we don't have a page to display them in.
| | 00:18 | Let's create that page here in Dreamweaver.
| | 00:19 | I will flip over to the Assets panel
and right-click on our template Internal,
| | 00:25 | choose New from Template.
| | 00:26 | I am going to go ahead and save a page,
and we will call this "catalogs.html."
| | 00:36 | Now I can change the placeholder heading
to Catalogs, and I am not going to need
| | 00:41 | the placeholder text here,
| | 00:43 | so I will go ahead and select that
and then press Delete to remove it.
| | 00:47 | If you are working with just the code,
these changes are on lines 33 and 34.
| | 00:52 | So now, I am going to bring in the
modules that show the existing catalogs.
| | 00:57 | To do that, let's open up the Business
Catalyst panel. And under the Catalogues
| | 01:02 | Module, you will see that I
have a Catalog option here.
| | 01:07 | I am just going to double-click that.
| | 01:09 | Dreamweaver will reach out to the
Business Catalyst server, show us which
| | 01:12 | catalogs have been defined.
| | 01:14 | Let's choose the first one, Clothing.
| | 01:16 | I will click Next and then Insert.
| | 01:20 | Now I am going to place my cursor
right after that code, so that the two
| | 01:25 | catalogs will appear side by side.
| | 01:28 | Let's double-click the catalog again
to bring in the second catalog, Gear.
| | 01:34 | Clicking Next and then Insert.
| | 01:36 | I will place my cursor at the end
of that code, and we will repeat the
| | 01:41 | process one last time.
| | 01:43 | Double-click Catalog, this time
choosing Media, Next, and Insert.
| | 01:48 | So I have all of my code
necessary for showing the catalog pages.
| | 01:53 | Let me go ahead and save the
page, and then put it online.
| | 02:00 | We have no dependent files, so I will
click No. Now, let's switch back to the
| | 02:06 | browser to take a look.
| | 02:07 | I will open up a new tab, and go to my
exploreca site. And now once I have the
| | 02:13 | base address showing, I will enter
in the remainder of the page name,
| | 02:18 | catalogs.html, and there you have our
three catalogs, posted one after another.
| | 02:24 | Now notice that there is a still
a heading placeholder text there.
| | 02:29 | That's still remaining in the
Business Catalyst template we set up.
| | 02:32 | Luckily, with Business Catalyst, you
can make these changes at anytime.
| | 02:36 | So let's go over to Business Catalyst
and from the Admin page, choose the Admin
| | 02:40 | menu item, and then select
Manage Site-Wide Templates.
| | 02:43 | We will click on our defined template
Internal, and once its screen opens up, we
| | 02:49 | can go in and get rid of the heading,
just by selecting it and deleting it.
| | 02:53 | Now I am also going to go ahead and
get rid of the extra line that I have
| | 02:56 | here, by pressing Delete. And now we
can go down a little bit further and
| | 03:01 | click Save and Publish.
| | 03:03 | Okay, let's go back over to our
Catalog page and click Refresh.
| | 03:10 | Now the placeholder text is gone.
| | 03:12 | Now what's really amazing about
Business Catalyst, I think, is that even though
| | 03:16 | we've just created this one single page,
Business Catalyst hooks it up to all of
| | 03:20 | the other pages for your online store.
| | 03:23 | So if I go and click on any of the
catalog items, like Gear here, well here are
| | 03:28 | all the product items that we
had included in the Gear category.
| | 03:31 | You notice that for each product
there is a name, which is a link that takes
| | 03:35 | you to a detail page; a thumbnail,
which is also a link--going to the same
| | 03:39 | detail page; the price; how many items
are in stock; and a quantity field, for
| | 03:44 | adding to the cart.
| | 03:45 | Now if I click on a thumbnail or a name,
it will take me to the detail page, and
| | 03:50 | here we see the larger image, the
description, and other pertinent information.
| | 03:55 | Now all of these pages also have other
information, like the "Shopping cart is empty."
| | 04:00 | But if I add an item to a cart, by
clicking Add to Cart, an alert pops up
| | 04:06 | indicating that an item has been added.
I will click OK, and the upper-right has
| | 04:11 | been updated to show how many items are
in the cart, what the total is, and give
| | 04:14 | me a link for viewing the cart.
| | 04:16 | Now while Business Catalyst does a good
job of giving you basic layout, there is
| | 04:20 | always going to be
things that you want to tweak.
| | 04:22 | Like, for example, let's say that I
don't want this particular "In stock" line,
| | 04:26 | and if we go back to the Thumbnail
page, you will notice that my thumbnails
| | 04:30 | are being clipped off,
| | 04:31 | so I need to make an adjustment there.
| | 04:33 | Luckily, you can do all of these
changes very easily in Dreamweaver.
| | 04:36 | Let me show you how.
| | 04:37 | So we will switch back to Dreamweaver.
| | 04:39 | Whenever you are changing any of the layouts,
you will need to go into the Files panel.
| | 04:43 | I will close the File activity complete,
left over from previous thing. And to do
| | 04:50 | this, I am going to expand the Files panel.
| | 04:53 | All of the designs and layouts for the
online shopping pages are contained in
| | 04:58 | the Layouts folder, in the OnlineShop
subfolder, so let me expand that. And here
| | 05:04 | you see a full range of
pages that you can modify.
| | 05:07 | The thumbnails are controlled
by the small_prodcut.html page,
| | 05:11 | so let me open that up.
| | 05:13 | Now to make any modifications like this,
you are going to want to go into Live
| | 05:16 | view. And with my CSS Styles panel in
Current mode, I will select the smallimage,
| | 05:22 | and here you see that the height and
width are set at 120 pixels. Our images
| | 05:27 | are 150 pixels square,
| | 05:29 | so let me change that value, and just
press Enter, and I will do the same
| | 05:34 | thing for the width.
| | 05:36 | The other thing I wanted to change was
this In stock line that I want to get rid of.
| | 05:40 | So for that, I will need to drop out
of Live view. And with that selected, I
| | 05:44 | can go to the tag selector, make sure I get
all of the list item, and the press Delete.
| | 05:50 | Okay, I have made changes to
both my source code and the
| | 05:53 | ModuleStyleSheets.css file.
| | 05:56 | Let's save them both at the same time, by
going to File > Save All Related Files,
| | 06:01 | and we are ready to put
the source code up online.
| | 06:06 | So I will go ahead and click Put.
And in this case, we actually did have
| | 06:09 | dependent files that were changed,
so let's go ahead and click Yes.
| | 06:13 | Once the files are posted,
let's check them out in the browser.
| | 06:16 | So now I can refresh this page, and you
will notice that my thumbnails all look
| | 06:21 | great now, and that line about the
quantity available has been removed.
| | 06:26 | As you can see, Business Catalyst gives
you complete stylistic control for all your
| | 06:30 | catalog and product pages.
| | Collapse this transcript |
| Establishing a payment gateway| 00:01 | To complete an online transaction,
you'll need to set up a payment gateway.
| | 00:05 | A payment gateway is a service that
acts as a secure bridge between your web
| | 00:10 | site and your business's bank.
| | 00:12 | Payment gateways authorize credit card
charges and process payments, with deeply
| | 00:16 | encrypted data for safe, secure online shopping.
| | 00:20 | Business Catalyst supports a
wide range of payment gateways--
| | 00:22 | over 25, from all over the world.
| | 00:25 | As you might imagine, there is a great
deal of variation in the steps required
| | 00:29 | for setting up the different payment gateways,
| | 00:30 | but Business Catalyst makes it easy.
| | 00:33 | Let's take a look at how you would
establish a popular gateway, PayPal's
| | 00:37 | Website Payments Pro.
| | 00:39 | Please note that in order to complete
this step, your site will need to be a
| | 00:43 | paid Business Catalyst site with one of the
full solution offerings that enable ecommerce.
| | 00:49 | From the Business Catalyst admin page,
choose eCommerce and then Payment Gateways.
| | 00:57 | Once you're on Payment Gateways, let
me scroll down here, so we can see all
| | 01:00 | the various options.
| | 01:02 | The first thing you need to do is, of
course, choose the country that you want to
| | 01:05 | configure payment gateway for.
| | 01:07 | There is a full list available for you.
| | 01:09 | Let's stay in the United States option here.
| | 01:11 | Now we get to choose the payment gateway.
| | 01:14 | So once I open this list, you'll see a
full range of payment gateways available,
| | 01:19 | and in parentheses it shows you
which countries are available for it.
| | 01:23 | Well, I'm going to set it up for
PayPal's Website Payments Pro payment gateway
| | 01:27 | that you see down here.
| | 01:29 | Once I select that, the details change,
and you'll see the type of information
| | 01:34 | that I'll need from PayPal.
| | 01:35 | I'll need my username, password,
and what they call an API signature.
| | 01:41 | Now once you've established your
merchant account with PayPal, let me show you
| | 01:45 | how you find those details.
| | 01:46 | I'm going to flip over to PayPal, and
now let's go to a Profile and from Profile,
| | 01:53 | open up My selling tools.
| | 01:55 | There you'll see a list of options,
but the one you want is the API access.
| | 02:01 | Choose update, and then from here,
because we're going to setting up an online
| | 02:06 | store that works with Business
Catalyst, we need to view the API signature,
| | 02:10 | so I'll click that. And here you'll
see the information that we'll use.
| | 02:14 | So I'm just going to copy, first my
username by pressing Command+C, and then flip
| | 02:20 | back over to the Business
Catalyst tab. Paste that in.
| | 02:25 | Now let's go get the password. With that
copied, I'll flip back and paste that in
| | 02:32 | with a Ctrl+V. The final
item is the API signature.
| | 02:37 | I can copy it, flip back to
Business Catalyst, and paste it in.
| | 02:44 | All that's left is to click
Save, and now my details have been
| | 02:48 | saved successfully,
| | 02:49 | so my payment gateway is
already set up with Business Catalyst.
| | 02:54 | That's all it takes. The number of
hoops you will have to jump through to sign
| | 02:57 | up with a service varies from
payment gateway to payment gateway.
| | 03:00 | But once you're in, Business
Catalyst makes the setup with your site
| | 03:03 | very straightforward.
| | Collapse this transcript |
| Defining the checkout experience| 00:00 | Business Catalyst does a good job of
presenting a solid checkout experience, but
| | 00:04 | every client is different.
| | 00:06 | You'll want to customize the look
and feel of the process as needed.
| | 00:09 | Let's take a look at how it's done.
| | 00:11 | In the previous video, we set up our
catalog pages and did a little customization
| | 00:16 | on the thumbnail page as you see here.
| | 00:18 | We also added an item to the cart.
| | 00:20 | Now, if I go up and click on View Cart,
you'll see the default shopping cart page.
| | 00:25 | While this is very easy to read, there are
some items that we don't need at this point.
| | 00:29 | There is a line for discounts and
gift vouchers, that aren't set up yet, and
| | 00:34 | there is also a Get a Quote feature
that is really not applicable to this site.
| | 00:39 | So let's go back into Dreamweaver, and
I'll show you how to modify the Cart page.
| | 00:44 | So back in Dreamweaver, again, I'm going
to expand the Files panel. And the page
| | 00:48 | that you want to look for in order
to modify the shopping cart is called
| | 00:52 | shopping_cart-US.html.
| | 00:55 | There are different
shopping carts for each country.
| | 00:57 | So, once I open that, we can quickly see
that we've got a couple of table rows
| | 01:01 | here that we can select.
| | 01:05 | When we see them in the code over on
the right-hand side, I'm just going to go
| | 01:09 | over and add a comment around those two lines.
| | 01:12 | So from the Coding toolbar on
the side, I'll apply an HTML comment.
| | 01:16 | Now, when I click back to refresh, those two
table rows, and the associated tags are gone.
| | 01:23 | The other one we wanted to get rid of
is the Get Quote button, and that's on
| | 01:27 | line 72 of your code.
| | 01:29 | You want to be careful selecting this
because it's right in the midst of two
| | 01:33 | other buttons you do need:
| | 01:34 | the Clear Cart and the Shop Check-out.
| | 01:37 | So we just want to get this bit
of code right here, where it says
| | 01:40 | tag_getquotebutton, and then
it ends with getaquote.png.
| | 01:45 | Instead of commenting that out, I'm pretty
sure I'm not going to need it for this client,
| | 01:50 | so I'm going to go ahead and delete it entirely.
| | 01:53 | Again, I'll click back into Design
view, and that's gone. All right!
| | 01:58 | Let's save our source code
and put it back on line.
| | 02:03 | There are no dependent files to upload.
| | 02:07 | Let's switch to the browser,
and I'll refresh the page.
| | 02:10 | All right, a much cleaner experience:
| | 02:13 | something a little bit more in keeping
with what our client needs at the moment.
| | 02:16 | You'll find with online checkout that
it certainly has a lot of moving parts,
| | 02:21 | but luckily, with Dreamweaver and
Business Catalyst, you can fine-tune them to
| | 02:25 | give your customers the experience they deserve.
| | Collapse this transcript |
| Enabling discounts| 00:00 | You've already seen how you can set a
suggested retail price, as well as a sale
| | 00:04 | price, for any of your
products in Business Catalyst.
| | 00:07 | In this video, we'll take a look at
creating discount codes to provide
| | 00:11 | further sales incentives.
| | 00:12 | So once you're in the Admin portal, hover
over eCommerce, and then go to Discount Codes.
| | 00:18 | I'll scroll down here, so we can
take a look at all the options.
| | 00:22 | This area over in the left will show
you all the available discount codes.
| | 00:26 | In this case, we don't have
any defined, so let's set one up.
| | 00:29 | First, you want to enter in a description.
| | 00:31 | In this case, we're going to
create a discount that gives 20% off any
| | 00:36 | purchase over $100,
| | 00:38 | so I will enter in "20% off purchase over $100."
| | 00:43 | Now, we want to enter in the code
that people will need to enter into their
| | 00:47 | shopping cart in order to get the discount.
| | 00:49 | I am going to make it
something easy to remember,
| | 00:51 | so we'll give it 20off100.
| | 00:55 | The next option is to set
up the discount code type.
| | 00:58 | In this case, it's going to be a percentage,
| | 01:00 | so I'll choose that option and then
enter in the discount percentage, which is 20.
| | 01:06 | Now, notice that I do not put in a Percent sign.
| | 01:09 | The next option gives you the ability
to apply the discount if the order value
| | 01:13 | is greater than a certain value.
| | 01:16 | We want to enter in 100 here.
| | 01:19 | Now, we could limit it to just one or
two catalogs if we like, but let's do
| | 01:23 | it across the board.
| | 01:24 | So we'll keep that one unchecked, and
we'll also leave it wide open, so that
| | 01:29 | folks can use it as many times as they like.
| | 01:31 | You can set up a release date for
your discount code, as well as an
| | 01:34 | expiration date, if you like.
| | 01:37 | Right now, let's change the expiration date
so that it expires at the end of next year.
| | 01:44 | We see that it's enabled.
| | 01:45 | I'll go ahead and click Save, and now
you can see the description is listed
| | 01:49 | in our discount code.
| | 01:50 | Now, before we can see it in action,
we'll have to go back to Dreamweaver.
| | 01:54 | You remember, in the previous video we
commented out the discount and the gift voucher line.
| | 02:00 | I am going to highlight the beginning
comment and drag it down so that it's
| | 02:04 | just in front of the gift voucher,
leaving the discount line uncommented.
| | 02:08 | Once I click, we'll see that line
has been re-added to the shopping cart.
| | 02:12 | So let me save this page,
and let's put it online.
| | 02:18 | Again, no dependent files.
| | 02:22 | Let's head back to our shopping cart.
| | 02:24 | I'll re-open that page, go into
Explore California, catalogs, and go into the
| | 02:30 | Gear category, where you
see our cart item is listed.
| | 02:33 | So I'll click on View Cart, and now
you see we have a discount available.
| | 02:38 | Now, this discount only takes
place if I spend more than $100.
| | 02:42 | So let's go ahead and instead of
buying one plate set, let's get six.
| | 02:47 | Now, you can see that my price is over $100--
| | 02:49 | $119.94, to be exact.
| | 02:51 | But I don't have any discounts yet.
| | 02:53 | So the final cost is still $119.94.
| | 02:56 | Let's enter in the discount code, which
was 20off100, and if I click Update, a
| | 03:02 | discount is applied of $23.99.
| | 03:06 | Now, my total value is under $100--$95.95.
| | 03:10 | Okay. I'm ready to check out and go
forward, because I'm a happy customer.
| | 03:15 | With discount codes and the
also-available gift vouchers, Business Catalyst
| | 03:18 | offers a nice range of incentives
to keep your online store hopping.
| | Collapse this transcript |
| Upselling and cross selling| 00:00 | One of the key principles of modern-
day marketing is once your customers have
| | 00:04 | expressed an interest in
one item, offer them another.
| | 00:07 | If you offer a similar or related item,
this technique is called cross selling.
| | 00:11 | If you offer them an item that
enhances the product they've marked for
| | 00:14 | purchases, it's upselling.
| | 00:16 | Business Catalyst
provides ways for you to do both.
| | 00:19 | Let's take a look at cross selling.
| | 00:21 | So from the Admin page, we'll go
up to eCommerce and choose Products.
| | 00:27 | The way cross selling works in Business
Catalyst is you assign related products
| | 00:31 | to any particular product that you choose.
| | 00:33 | Let me select the Beaches of California DVD
here, and then I'll scroll down a little bit.
| | 00:39 | Under the Action Box, you will see
Create upsell/crosssell. Click on that.
| | 00:44 | And then in another dialog box here, you'll
see products that are listed on the left
| | 00:47 | are all the products, and you can
choose which ones this particular product is
| | 00:51 | to be related to, by selecting
them and moving them to the right.
| | 00:55 | So this is the Beaches of California DVD.
| | 00:58 | I want it to be related to
Big Cities of California.
| | 01:01 | I'll press down Command--or Ctrl on the
PC--and choose Deserts of California, and
| | 01:06 | also Landscapes of California.
| | 01:08 | So we'll get all three of these DVDs
related to the Beaches of California DVD.
| | 01:12 | I'll click the right arrow,
and now all three are lined up.
| | 01:16 | Let me go ahead and click Close.
| | 01:18 | Now, you'll need to put in the code that
will show these related products into your page.
| | 01:23 | So let's switch back to Dreamweaver,
go over to the Files panel, expand the
| | 01:29 | Layouts category, and again go to the
Online Shop folder. Related products show
| | 01:35 | up in the Detail page,
| | 01:37 | so to control that, you have to
modify the large_product.html file.
| | 01:41 | So I'll double-click that to open it up,
and let's put this right below this
| | 01:46 | tag_poplets line here.
| | 01:48 | Now when the code first comes in, it's
going to be a little of a jumbled mess,
| | 01:51 | but we can use
Dreamweaver to straighten that out.
| | 01:54 | So I am going to go down to the bottom
of the Coding toolbar, and then the very
| | 01:58 | last item that you see is Format Source Code.
| | 02:01 | I want to apply the source formatting,
and that will clean that up nicely.
| | 02:06 | So now I can see where my div class
for poplets shows up, and I want to put
| | 02:10 | this tag right after it.
| | 02:12 | So I am going to put it in this
own div and give it its own class--
| | 02:16 | we'll call it "Related"--close off the
div tag, and now I'll enter in the code.
| | 02:21 | All Business Catalyst codes are in curly
braces, and they start with the word "tag."
| | 02:26 | Once I do the underscore, you'll see
that the code hints are enabled here.
| | 02:30 | So I can go ahead and start typing.
| | 02:33 | I know that it's a related product, so
if I type my "rel", there we see related
| | 02:39 | products, and even with a brief description.
| | 02:42 | So I'll hit Enter, and let's close
off the div tag, and there we have it.
| | 02:46 | I am going to go ahead and save this.
| | 02:48 | Now, if you look over in Design
view, all you'll see is just the tag.
| | 02:51 | Let's post it online to see how
it actually looks. I'll click Put.
| | 02:57 | No, for related files, and
let's go back to the browser.
| | 03:02 | Let's open up a new tab, and I'll go
to my site, and we'll go to the Media
| | 03:06 | category, which has all the DVDs, and I'll
click on the thumbnail for Beaches of California.
| | 03:12 | So there's my details and when I
scroll down, there are my related products,
| | 03:16 | which I can easily add to the cart, or do any
other sort of modification too that I like.
| | 03:20 | Now, this is great for products that are
related, but let's take a quick look at
| | 03:25 | other products that may not be related.
| | 03:28 | So if I choose Big Cities of California,
and there are no related products for
| | 03:32 | it, you'll get a tagline that indicates that.
| | 03:34 | Now we can modify this pretty easily
back in Dreamweaver to make sure that this
| | 03:38 | tagline doesn't come up.
| | 03:40 | So let's flip back to Dreamweaver.
And in the same code that we have here where
| | 03:45 | it says tag_relatedproducts, put your
cursor at the end of the tag and then type a
| | 03:49 | comma, the number of entries that
you might have as related products--
| | 03:53 | I'll leave it open to 5--
another comma, and then True.
| | 03:58 | This True keyword acts as an
indicator to Business Catalyst to say "hide the
| | 04:02 | related products message."
| | 04:04 | So let's save this one
more time and post it online.
| | 04:10 | Now, we can go back to the browser,
and this line that we have here, once I
| | 04:14 | click Refresh, is gone.
| | 04:16 | With techniques like these, Business
Catalyst and Dreamweaver really make it
| | 04:20 | easy for you to grow your clients
business by cross- or upselling.
| | Collapse this transcript |
|
|
ConclusionWhat's Next| 00:00 | Thanks for watching Getting Started
with Dreamweaver CS5 and Business Catalyst.
| | 00:05 | What should you do next?
| | 00:06 | Why, sign up for a free BC site if you
haven't already, and start building bigger
| | 00:11 | and better web sites.
| | 00:12 | Have fun!
| | Collapse this transcript |
|
|
