{ Learn Code. Share Code. Teach Code. Love Code. }

  • Interactive Diary for your Website

  • Please post your tutorials for this software in here.
Please post your tutorials for this software in here.
 #5468  by hungryhounduk
 Sat Jan 16, 2010 4:45 pm
Hi All
Here we have another Tutorial - The Interactive Diary

THE Html File ALL PICTURES AND Text FILES FOR THIS ARE IN THE ATTACHMENT BELOW

This uses Tables, Layers, Image Rollovers and JavaScript Behaviors to create an Online diary or events guide cooll;
So when the Users mouse goes over the Dates on the Diary Calendar it displays a rollover Image and also whatever text you want to display, so in reality you could display Events that are happening at a later date or Tips and Tricks or maybe its someones birthday and it will Flag that up, This is fully Customisable and can be Designed for any Purpose........

Image

**Ultra Cool Flash-Laden Websites might catch people's eyes, But making your Site genuinly useful is one of the best ways to get people to come back and visit time and time again cooll;

******An Interactive Online Diary must Rank as one of the most beneficial uses for your Website. As well as helping to stimulate interest and keep visitors informed of all the latest developments, a well updated Online Diary or Events guide helps to reflect the Dynamic nature of the site, something guaranteed to ensure repeat visits wahooo;

***Designing an Interactive Diary in a Month-to-view Calendar style has two distinctive advantages. Firstly the Information in the diary can be presented in an intuative and convenient format that visibly Flags up Important Events, encouraging the user to explore the diary entries. Secondly, by minimising the amount of page space required to display the Calendar you can easily incorporate this kind of feature into a Navigation Bar, so the diary is always onscreen and available for use. :D

1. THE FIRST STEP.......To begin Unzip the Attachment below to your Harddrive

2. Then open the Index.Html file with Dreamweaver

3. Click inside the Diary Layer and goto FILE>INSERT>TABLE from the main Menu

Image

Image

4. CHANGING TABLE PROPERTIES.......Click on the edge of the Table to activate its settings in the Properties, Then enter 200 in the Height field.

Image

Image

5. SETTING CELL PROPERTIES.......Click inside the Table to activate its Cell Properties, then set the Horizontal and Vertical Properties as the pic below with the values shown, The table will be used to contain the calendar graphics will be automatically positioned in the middle of the Layer when it is nested inside this table.

Image

6. OUTLINE THE CALENDAR DESIGN........The visual appearence of the diary itself will follow a Month-to-view format commonly used in printed calendars, that being based on a grid system, can easily be represented using TABLES. Click inside the Table again, then insert a (7) row (7) column Table using the settings below.

Image

7. IMPORT THE DIARY GRAPHICS.......Start from the Top left and Click into the first Cell and import the WEEKDAY GRAPHICS starting with (Sunday) into the Top (7) Rows, In the Second Row import the Blank.Gif Image into the First (5) Cells, Then Import the remaining Date Graphics ( 0,1 gif - 31.gif ) into the remaining Cells. ( You do this by selecting the Cells and goto INSERT>IMAGE from the Main Menu, do this each time for each Graphic )

Image

Image

8.CHANGING THE CALENDAR GRAPHICS.......For added emphasis, Graphics with different Background Colors will be used to Mark out Important Diary Events ( In this Tutorial I have only set up one Diary Event, Too set up more you just follow this tutorial and repeat each step to repeat the Events ). Click on 08.Gif on your Table that you have completed with all the graphic Images, Then change its source Reference to the 08.Gif file ( Found in the img,Diary, Active Folder. Finally enter ( day8 ) into the Properties Inspector.

Image

Image

Image

9. EDITING THE CASCADING STYLE SHEET.......You will now define a NEW FONT STYLE that will give Extra emphasis to Event Titles featured in the Diary Entries, Open the CSS STYLES PALLETE then activate the EDIT STYLES RADIO BUTTON and select the STYLE.CSS File, Now click on the NEW CSS STYLE Button.

Image

Image

Image

10. CREATE A NEW CLASS........Select the MAKE CUSTOM Style (Class) option then Enter "diaryEvent" into the NAME Field. ( Unlike styles that redifine the appearence of specific tags such as <h1> or <p>, classes can be applied to any page elements and will inherit characteristics already defined such as font sizes or types )

Image

11. DEFINE NEW VALUES.......Because this class will be applied to text styled in Paragraph (<p>) format, it will automatically inherit basic font size and type values, so it's only neccessary to enter values that either create NEW Properties ( such as the font decoration ) or change existing ones ( such as color )

Image

12. DISPLAYING THE DIARY ENTRY........You are now ready to create a diary entry that will be displayed whenever the user rolls over a specific event in the Calendar. Make sure the behaviours Pallete is open first then select ( 08.gif ) on the Calendar and attach a ( Set text, Set Text of Layer ) Behaviour to it.

Image

13. PASTE IN THE PAGE CODE.......In the dialog box, select the diary entry layer then COPY THE CODE from the Text file in the Folder ( in the attachment ) into the new HTML Field. The code itself will create a Paragraph, which will display an Event Title by the class defined earlier.

Image

14. RESETTING THE LAYER.......When confirmed DESELECT the Action in the Behaviours Pallette ( If the behaviour is highlighted in the Pallete, then just click on a blank space near it to deselect it ) The attach another SET TEXT of Layer Behaviour ( like before ) to the same Image. The code shown ( &nbsp; ) overwrites the layer with a Blank space, so that no entries will be displayed if the users cursor isn't highlighting any events in the Calendar.

Image

Image

15. CHANGE THE EVENT HANDLER......Because this behaviour should only be triggered when the user moves their cursor away from tha date graphics, the event handler must be changed from the "onMouseOver" value automatically set by Dreamweaver . Click on the Arrow to the Left of the Event Name then select "onMouseOut".

Image


16. CREATE A ROLLOVER EFFECT.....To complete the project, a rollover effect will be created that appears when the user's cursor is over specific dates. Select the ( 08.Gif ) Image then attach a SWAP IMAGE behaviour and set the Highlight Image to ( 08.hilit.gif ) Dreamwaever assigns an extra behaviour to reset the Image.

Image

Image

16. THE COMPLETED DESIGN.......The interactive Diary is now complete, Save tha Page and preview your Results in your Browser ( F12 ) .

Image

Hope you enjoy this one cooll;

Chris
You do not have the required permissions to view the files attached to this post.
 #5494  by Esky
 Sun Jan 17, 2010 2:51 am
Awesome tutorial Hungryhound Thanks!!!