Adobe Business Catalyst

Transcription

1 Adobe Business Catalyst Adobe Business Catalyst is similar to the Content Management Systems we have been using, but is a paid solution (rather than open source and free like Joomla, WordPress, and Drupal (though of course with those you do still have to pay for hosting somewhere unless you have your own server)). Business Catalyst includes a Content Management System, integrated marketing, integrated customer database, an e-commerce module, and reporting and analytics. As a web designer, you have several ways to use Business Catalyst. Starting out, you can create an account for free. The pricing for each client site that is created is listed here: As a partner, you get a free site (with some restrictions) for your web agency, and a 10% commission for all client site subscription fees paid to Adobe Business Catalyst-see: Before starting the project, review the Adobe Business Catalyst section of the Adobe site: When creating sites using Adobe Business Catalyst, you can use their online tools, regular HTML/CSS, and/or Adobe Dreamweaver. They have a wide variety of existing templates to choose from, or you can copy an existing site, or start from scratch. Business Catalyst was designed to give designers a platform to market their own designing business, and to easily create and manage client sites (and to give clients the ability to manage their own sites if the designer wants to allow them to do so). For the Project, you will be exploring and modifying trial sites on Adobe Catalyst. DO NOT do anything on the site that requires payment; you should be able to complete all of the exercises mentioned below without paying for anything. 1. Take a look at the Adobe BC catalyst features at: And watch the Video Tour (yellow button in the middle of the page) so that you get an overview of what the site can do. 2. Then go to and click the Get Started for Free button.

2 3. If you already have an Adobe account, sign in with it. If you don t already have an Adobe Account, you will need to create one. Once you sign in, it will ask you to choose a site template. Pick whichever one appeals to you. After you choose a site template, hit Continue : 4. Enter the site name as Your Name CMWEB 130 (so for example, if your name is Mike Smith, enter Mike Smith CMWEB130 ), and it will enter the site URL automatically. Be sure to take note of the site URL so you can come back to the site later. In this case, the URL would be mikesmithcmweb130.businesscatalyst.com. Then hit Continue.

3 5. When you hit continue, it will take you to a Contratulations! screen, with a note that you will receive an shortly with login instructions. Once you receive the with login instructions, open a browser and go to your trial site admin (for example, mikesmithcmweb130.bysinesscatalyst.com/admin/), and log in (note: the login will be the same as your Adobe login). 6. This will take you to the following screen:

4 7. Click Edit up in the top black Menu bar. This will bring you to your site and allow you to do In Context Editing. As you hover over the different parts of the page, you can click edit on that piece and change it. For more information about how InContext Editing works, see: 8. Edit a portion of your page by clicking on the area you want to edit, and change it (or add words). 9. Also insert an image by clicking the icon that looks like a mountain in a box (see screenshots below)

5

6

7 10. When you are done with your edits, click the Publish button at the bottom left to save your changes. TAKE A SCREENSHOT of your altered page by holding the Alt key down and hitting the PrntScr key on your keyboard (usually in the top row above the Backspace key), then opening up a word processing program such as Word or WordPad (Notepad won t work because it can only handle text) and Pasting the screenshot into the document. Also type the address you used for your login, and the password you used, into the document. Save the document as yournamecmweb130project. 11. Now click on the Manage at the top of the page to get back to the Dashboard. You can add different functionality into your sites using Modules, just like you can with other Content Management Systems. Click on the Modules link on the side. It will expand so you can see the different modules options. 12. We are going to add a Photo Gallery (though if you would rather add something else, feel free to do so). Since we are adding a Photo Gallery, we first have to upload some pictures. Click on

8 Site Manager, then File Manager. 13. Click on New Folder and call it gallery, then click on the the Gallery folder, then click the Upload Files button. Hit the Select button to select the image you want to upload. Upload at least 3 images to the gallery folder. Click Upload to tell it to start uploading. 14. Now click on the Modules link again. Click on Photo Galleries, then click on Add Photo Gallery. Give it a name and select the gallery folder you created from the drop-down images folder. 15. Give it a name (I m just calling mine Photo Gallery 1 ), and select the folder you just created (/gallery/) from the dropdown box, then click Save (see screenshot)

9 16. Now click the Actions drop-down box and select Add Photo Gallery to a Web Page It will bring up a list of the pages on your site. Choose one of the pages to add the photo gallery to; I chose the page called Home. Click on the spot on the page where you want to add the photo gallery, and then click 1-Click Insert and then click Insert this: Photo Gallery, then click Save & Publish. (See screenshot)

10 17. Now click on the Preview menu option at the top of the page, then click on the page that you inserted the Photo Gallery on (in my case, Home). You should see your photo gallery on the page where you inserted it. TAKE A SCREENSHOT of the page and paste it into your Project document. 18. Close the preview window, and you will be back at the main dashboard page. We have been editing a site template, now let s see how to create a new site. 19. Click on the dropdown up in the upper left corner next to your name and choose Go to Partner Portal. Click on My Sites. Note that you already have one trial site listed; this is the one you have been working on. Now click on the Create or Import Site button. Note that you have several options-let s take a look at these:

11 Use a free responsive template is what we did initially when we created the first site. This enables you to create more sites using that same template or by choosing a different one. Import your current website -this is a neat option that allows you to import an existing site that is already out on the internet. If you have time, you may want to try this out on your own by importing your student site, or just pick a website to duplicate. I would not pick a large site, though, as it will take a really long time to import (for example, I wouldn t do the icc.edu site, or yahoo, or cnn, or something like that. Pick something smaller). Replicate one of your existing sites - This allows you to copy one of the other sites you have created in Business Catalyst and then edit it-a nice option if you are going to make a site with a similar look or layout and just want to change the content and perhaps make a few layout/color changes. Start from scratch means that you can create your own html and css. We are going to try out the Start from scratch option. Click the start from scratch radio button, and then click the Continue button. 20. On the next page, you have to Choose a site type. Choose webcommerce, which offers all the options. Note that if you activate this site to be live, then it would cost $34.99/mo to upgrade to the paid site. We do not need to do that to work on it, and there is no need to do that for this class. Just remember that if you use this for a real client, then they would have to pay that amount per month to keep the site live. The other options are cheaper, but also do not have all the different features. After you choose webcommerce, click Continue.

12 21. For Site Details, put Your Name Class Project for the site name, and your first initial last name project for the site URL. So if your name is Bob Smith, you will have Bob Smith Class Project for the site name, and bsmithproject for the site URL (your full site will be found at whatever you named it.businesscatalyst.com (so in the case of Bob Smith, it will be at bsmithproject.businesscatalyst.com). Select United States for the data center. Make a note of the site URL, then click Create Trial Site. 22. You will get a screen that says Creating trial site, this may take a minute, and then you will eventually get to a screen that says Congratulations. Click on Manage Site. If it asks you to log in, use the original login you created and made a note of when you created your Business Catalyst site. Once you log in, it should take you to the admin dashboard for the new site. Note that you could also FTP an existing site up to the server. The settings for the FTP would be the following: Host name firstinitiallastnameproject.businesscatalyst.com (if you followed the same naming scheme I described above) Protocol - SFTP / SSH File Transfer Protocol Port - 22 User name firstinitiallastnameproject.businesscatalyst.com/your address (the same you used to create your business catalyst account) Password - Your admin login password FTP mode (if necessary) - Passive Judging from some of the help forums, people sometimes have trouble with the ftp, so if you do, try the passive FTP mode. 23. At the side of the page, click on the Site Manager link, then click on Pages. 24. There is already one existing Home page. Click on edit next to it. This will bring you to this screen:

13 25. Go ahead and add a Page Title of Your Name Project Home, and then down in the content box, delete the Coming Soon image by clicking on it and hitting the delete key. This will still leave the table that they had around it. Note that if you look up right at the top of the box in the middle, there is a small X ; click on that to delete the table. At this point you will still have the CENTER tag left; look down at the bottom of the box and you will see Center listed, as well as the words Remove this element. Click on the Remove element and that will leave you with a blank page. Add whatever words you want to the page, and also add an image by using the image manager (menu icon in the editor that looks like a mountain with a sun above it). When you click it, it will take you to the image manager. Use the upload files link to upload image(s), then click on the image you want to insert and click the Insert button at the bottom.

14

15 26. Once you have finished your edits, TAKE A SCREENSHOT for your project and paste it into the project document. Then click the Update button at the bottom. 27. Now click on Pages in the left menu and click the add page button to create another page with content of your choice. You might want to also experiment with the Add modules button and try another module besides the photo gallery if you d like, but you don t have to). Somewhere on this new page, create a link back to your home page by clicking in the box where you want the link to show up, then selecting the icon that looks like a world over a chain link (see arrow below)

16 28. This will take you to the hyperlink manager. Click the folder icon next to the URL box. This will pop up another box where you can select the page you want to link to. Click on Web Pages, then click on your Home Page and click Update 29. Type Home in the Link Text box, then click OK This will insert the link to your home page.

17 30. Once you have finished creating the page, TAKE A SCREENSHOT for your project and paste it into the project document. Then click the Update button at the bottom. 31. If you want to see what your pages are looking like, click Pages in the left menu then click Preview next to the page to see what it looks like. Note that you could also enter the website URL (in my case, strippproject2.businesscatalyst.com) into the browser address bar and go there manually. Submitting the project You re done with the project! Of course, Adobe Catalyst has many more options, and could almost be a class completely on its own. This gives you a peek at some of its capabilities, however. It is especially designed to work well with other Adobe programs such as Dreamweaver. If you haven t already, save your project document as yournamecmweb130project, then upload it under the project assignment on the class website. As a double check, your document should contain the following: 1. address and password you used for your login 2. Screenshot from step Screenshot from step Screenshot from step Screenshot from step 30 Your trial site is good for 30 days, so now that you have your project out of the way, have fun playing!