HTML5 Responsive Notify 2 DMXzone

Transcription

1 Table of contents Table of contents... 1 About HTML5 Responsive Notify Features in Detail... 3 The Basics: Insert HTML5 Responsive Notify 2 on your Page Advanced: Retrieve your Notifications from a Database Source Video: Using HTML5 Responsive Notify Video: Dynamic HTML5 Responsive Notify Page 1 of 24

2 About HTML5 Responsive Notify 2 HTML5 Responsive Notify 2 is an excellent Dreamweaver extension if you want to inform your users of something important, capture their attention or notify them. The rich notifications allow you to give them feedback on the task that they ve completed, about its status, success or failure. Fully customizable through the CSS, the notify boxes can be styled to fit your website design. With the proper color, the notifies are easy to notice and will draw your users attention instantly. The appearance of the messages is scaled to match the browser size. Whether it s a desktop or a mobile device browser, the extensions will make it look great no matter what. You can even retrieve your notifications from a database driven source, because of its HTML5 Data Bindings and Database Connector support. Page 2 of 24

3 Features in Detail Rich HTML5 notifications and alerts - Lets you simply inform your users of something important, capture their attention or notify them. Provide users with proper feedback - The rich notifications give your users feedback on the task that they ve completed about status, success or failure. For example, if they have to provide their and it s verified as valid they ll receive a successful message. If not, a different one to point out their mistake will be shown. Page 3 of 24

4 Different designs for the notifications - Fully customizable through the CSS, the notify boxes can be styled to fit your website design. With the proper color, the notifies are easy to notice and will draw your users attention instantly. Page 4 of 24

5 Key positioning - To make sure your users notice the notification right away you can position it anywhere you d like on your website. Page 5 of 24

6 Responsive notifies - The appearance of the messages is scaled to match the browser size. Whether it s a desktop or a mobile device browser, the extensions will make it look great no matter what. Mobile integration - Due to its responsiveness, the notifies fit and appear awesomely on any mobile device, tablet or smart phone. Page 6 of 24

7 Notification title and content - If you want to improve your notification messages with links, images and other styling you can use the power of HTML. Dynamic notifies - You can retrieve your notifications from a database driven source, because of the support for HTML5 Data Bindings and Database Connector. Page 7 of 24

8 Beautiful animation effects - Allow your message boxes to fade in or out with different transitions and duration time for a greater user experience. Great Dreamweaver integration - Last but definitely not least, the HTML5 Responsive Notify 2 has a great interactive dialogue in Dreamweaver with all the options you ll need. Page 8 of 24

9 Before you begin Make sure to setup your site in Dreamweaver first before creating a page. If you don t know how to do that please read this. Installing the extension Read the tutorial at Login, download the product, and look up your serial at Get the latest Extension Manager at Open Extension Manager and go to your Purchased products tab and click install. If you have a subscription, the extension is to be found and installed in the Explore tab. Get the latest extension manager from Adobe at Open the.zxp file if you re using Dreamweaver CC or the.mxp file for Dreamweaver CS+ with Adobe Extension manager and install the extension. If you experience any problems contact our Live Support! Page 9 of 24

10 The Basics: Insert HTML5 Responsive Notify 2 on your Page In this tutorial we will show you how to insert HTML5 Responsive Notify 2 on your page. *You can also check out the video. Page 10 of 24

11 How to do it 1. We d like to show a notification when the user loads the page. In order to do that, select the body tag of your page (1), open the behaviors panel (2) and click add new behavior button (3). Page 11 of 24

12 2. Form the menu (1), select Control HTML5 Responsive Notify 2 (2) and its dialog will appear. Page 12 of 24

13 3. We want to display the notify on page load therefor we select the show notify action (1). Enter a title for the notification (2) and your content, which can contain HTML tags (3). Page 13 of 24

14 4. Now, choose a layout for the notify box, we select top center position (1). Since our message is informative, we also select info type of notify (2). In addition, you can adjust the fade in/out animation duration and timeout settings but for this tutorial we leave them to their defaults. Click the OK button when you re done. Page 14 of 24

15 5. You can see, that the info notify appears at the top center of your page, when you load it. That s how easy it is to use HTML5 Responsive Notify 2 on your page. Page 15 of 24

16 Advanced: Retrieve your Notifications from a Database Source In this tutorial we will show you how to use dynamic data with HTML5 Responsive Notify 2. *You can also check out the video. Page 16 of 24

17 How to do it 1. We created a data source in order to get the user s info when he/she is logged in. We d like to use some of this information, inside the HTML5 Responsive Notify 2. Now, let s select the body tag (1) and from the behaviors panel (2) we click add new behavior button (3). Page 17 of 24

18 2. From the menu (1), select Control HTML5 Responsive Notify 2 (2) and its dialog will appear. Page 18 of 24

19 3. We d like to greet the user that is logged in. So we need to use dynamic data here. Click the dynamic data button. Page 19 of 24

20 4. Now, select the dynamic data binding that you want to display in the notify title (1) and click OK (2). Page 20 of 24

21 5. Along with the dynamic data you can also add some static text too. Page 21 of 24

22 6. Then, customize the appearance and animation settings of HTML5 Responsive Notify and click OK when you re done. Page 22 of 24

23 7. Here, you can see the greeting message that appears in the HTML5 Responsive Notify 2, when the user loads the page. That s how easy it is to use HTML5 Responsive Notify 2 with dynamic data. Page 23 of 24

24 Video: Using HTML5 Responsive Notify 2 With this movie we will show you how to add HTML5 Responsive Notify 2 on your page. Video: Dynamic HTML5 Responsive Notify 2 With this movie we will show you how to use the HTML5 Responsive Notify 2 with dynamic data. Page 24 of 24