Technical Introduction Part 1

Size: px

Start display at page:

Download "Technical Introduction Part 1"

Joel Newton
7 years ago
Views:

1 Technical Introduction Part 1

2 What You Will Learn - System Navigation - Editing Website and WebPages - Site-Wide Templates and CSS - Introduction to Modules and Tags - Questions

3 BC Navigation - Website: manage the structure of your site - Modules: plug bits of functionality into your site - ecommerce: setup your online shop - Marketing: send your newsletters - Customers: search and edit your DB - Reports: find out what s happening on your site

4 Admin Navigation Top 5 Most Important Functions: 1. Add your clients as users to the system and restrict their access to certain functionality 2. Re-delegate Domain Names to your new site 3. Edit Your Templates 4. Setup Workflows 5. Customize s, Messages and Advanced Module Layout

5 Several Shortcut Menus Recent Items Related Items Create New Located on the upper right-hand side of the screen To the right of the page s center content, under the Action Box On the Home screen, above the What s New feed on the right

6 Anatomy of a BC Site ModuleStylesheets.css Home Template Alternate Templates Module (e.g. Login Box) Module (Newsletter Sign-up) Module (e.g. Search Box) Page 1 Page 2 Page 3 Homepage Module (e.g. Search Box) Module (e.g. Web Form) Dynamic Website Main Menus

7 Website and Webpage Editing Online Editor Simple content edits on-thefly, good for end clients to make changes Code HTML and FTP to site For web designers (covered next week) Dreamweaver Extension For designers who need complete control (covered next week)

8 The Online Editor - For simple editing only can be used for Modules/Content Holders/Pages - Link to pages, catalogs, products etc within the system - Insert Hyperlinks - Add page modules (more on this in a bit) - You can upload and insert images - Simple tables, symbols, and strip formatting

9 Dynamic Menus - Remember our BC Anatomy? - Dynamic Menus can directly link to modules as well as pages. You don t need to create a page first then put the module on it. - Layout is controlled through CSS we ll show you where to edit this.

10 Templates wrap around content Header Including Logo Search Box Navigation Sidebar Inserted by {tag_pagecontent} Content (Text, Images) and On-Page Modules (Blogs/Catalogs/Products/Web Apps). On-page modules have their own tags that live among the text and images inserted into the page by {tag_pagecontent}. Footer

11 Editing Site-Wide Templates - Site Wide Templates are found in the Admin menu on the right-hand side of the screen - Site-Wide Templates control the overall look and feel of your site - Specify where you want the page/ module content to appear by using {tag_pagecontent}

12 Template Merging - Templates and Pages merge inclusively - Meta Data - Header tags - CSS - In conflicts between web pages and templates: the page s version wins.

13 Merging Example - Remember: you can put a complete HTML document in both the template and the page - The result is a merging of the two, with the page taking precedence. - Template: <body id= a > - Page: <body id= b > - Merged Result: <body id= b >

14 Using CSS + Templates - Upload your CSS via FTP or the File Manager - Link your CSS via HTML code in the template - Note: CSS files can also be linked in a web page

15 ModuleStylesheets.css - Don t delete it modify and extend it. - Find applicable classes using FireBug and then modify them. - The CSS for new features is appended to ModuleStyleSheets.css safe to modify. - Find it in the /Root/StyleSheets folder.

16 An Aside: Updating Your Files - Upload files through the browser - CSS, Images, Flash, Videos, Zip files, - And more... There is a shortcut to the file manager in the upper right-hand corner of the admin.

17 Introduction to Modules and Tags - The Add Module button is near the center of the WYSIWYG editor toolbar, as seen above. - Select modules to add by using Module Manager huge selection of functionality and options. - Add Complex Modules directly as Menu items (Blogs, Products, Catalogs, Web Apps). - Modules can t be contained within a module. - Each module has it s own set of tags which brings us to...

18 Tags - {tag_tagname} are always rendered by the system into some HTML on the live site. - Each module has a set of tags, you ll find them in the Tag Insert. - Some tags render into the HTML for Dropdowns, Radio buttons etc, others are just text. - Tags are how we get information out of the Database. Read more about these topics on the Knowledgebase: - Overview of Modules - Extending Modules with Tag Attributes

19 Customizing Your Module Layouts - Customize your shop, blog, forums, and more modules - Granular HTML level control

20 Next Webinar Part 2 - FTP and File Management - Using Dreamweaver To Edit Your Site - Site Upgrading and DNS Redelegation - Troubleshooting and Getting Help - Questions

Microsoft Expression Web

Microsoft Expression Web Microsoft Expression Web is the new program from Microsoft to replace Frontpage as a website editing program. While the layout has changed, it still functions much the same as