automatis_gfx
banner_automatisgfx
0
5
3000
7000
20
20
9
500
4
10
15
1
1
Automatis GFX
Loading... (This may take some time.)

Welcome to the Automatis GFX.

Design your websites in a more automated fashion and utilize the menu foundation for structuring the page layouts.
This project is aimed at novice and developed html and javascript programmers to control a multi tiered menu driven dynamic div platform from a single page format, and it will only cost you the web space.

Rather than display one page of scrollable procedural events the content is managed within a scrollable frame container, which offers the appearance of fluid page transitions to other area's of the site with no delay.

Updating is kept to one page for quickly inserting text, modifying images and videos or altering existing content, with little adjustments to develop seperate layouts and themes.

It is an ideal way for those who still like to tweak with the code by hand, like to create and modify from a different approach a website like this one. And it has the prospects for commercial applications by developers with greater programming abilities.

And utilzing the direct link style of menu operation, page navigation can become much quicker.

I'm an interface designer, from an early media player skinning background, grasping some programming knowledge along the way. Over time I used my abilities to learn from others how to make better interface designs, so what I wanted to do is make a website platform page, edited from the one source that can be used as a backbone to adapt my designs.
I've thought about staying with a traditional website layout, meaning it needs to have page divisions that could transition with a fading page effect.

The core elements are developed based on a fixed frame width and height, similar to how a media player is designed.
It is quick to navigate having adjustable page and banner transition times. The menu is limited to flow up to 3 tiers deep, still allowing for an abundance of page links.

The beauty about building your pages based on a div based numbering system, is you can dynamically insert images into targeted sections of the website. With the method i've used, this becomes easier as you wont need to update any stylesheet image parameters, which makes theme swapping fairly simple.

The contact form was updated with better human interaction detection, reducing spam in the mailbox. This was completed at the same time the image and video galleries were created, bringing some more functionality into presenting content on each page.

So everything is shaping together well by now, and all that really was missing to fit the theme was a full screen background image, that would compliment the foreground contours. This lead to making a template for other people to use, which is now provided to display all the features that have stemmed from such a small beginning.

I hope you like what has transpired.

- Michael

To understand what is explained here you will need to be able to follow by previewing the 'Template v1.1' online source or download the theme, which is recommended.

The template contains all of the elements and features that are typical to the platform, such as a branched menu, image gallery and video player windows, contact form and a simple image inserter.

For the frame a fixed width of 1200 pixels and 900 pixels high is given in the example. This is set as a typical size for a 1080p screen, although it comes with some side scrolling for smaller displays.

Ideally, you should begin with your own webpage menu guide to develop the menu and div page links. This could be something like what is shown below (and in the template where the menu branches are numbered.)


Home (3,0)
About (0,1)
Weblog (1,2) ->   Latest (2,0)  -> January - March 2017 (2,2)
				-> April - June 2017 (2,3)
				-> July - September 2017 (2,4)
				-> October - December 2017 (2,5)
	     ->   Older (2,1)	-> January - March 2016 (2,6)
				-> April - June 2016 (2,7)
				-> July - September 2016 (2,8)
				-> October - December 2016 (2,9)
Photos (0,3)
Videos (1,4)  ->   Vacation (2,10)
	      ->   Travel (2,11)
	      ->   Work (2,12)
Recognition (0,5)
Contact (1,6) ->   Online Enquiry (2,13)
	      ->   Contact Information (2,14)

The core elements to making a website are what transform into a theme based environment, what makes a website hold together to be developed.

Themes, once each are developed, can be rearranged in any order to formulate multiple scenarios.

 

Please use our Online Enquiry form for any of your feedback and suggestions, or any other formal request.

 

The information contained in this website is for general information purposes only. The information is provided by Automatis Graphics and while we endeavour to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the website for any purpose. Any reliance you place on such information is therefore strictly at your own risk.

In no event will we be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.

Every effort is made to keep the website up and running smoothly. However, Automatis Graphics takes no responsibility for, and will not be liable for, the website being temporarily unavailable due to technical issues beyond our control.

Automatis Graphics is not obligated to provide any further assistance or instructions in designing your own website, even if you are using the original source code material from this website. There are no issues with others modifying the existing code for their own purposes, so leaving the website link from the orignal script source code would be appreciated.

 

Search Term:   Start Search | Reset | Lowercase: | Show: matches

Search Result:

Template v1.0 | Released: 25.12.2016

Added:
  - Fixed width and height layout (scrollable content)
  - Themes folder structure
  - Branched menu system (3 tiers total)
  - Popout gallery and video player
  - Online enquiry form (with verification)
  - Easy image inserter

Template v1.1 | Released: 25.2.2017

Added:
  - 'directLink' operatable menu system
  - Basic content search page

This is the folder structure for Template v1.1. Displayed are some files that will be referenced and are important to check before you start building the site.


template_v1.1
  - index.html
  - mailhandler.php
  > download
    > pdf
    > video
    > zip
  > scripts
    - default.js
  > themes
    > template_v1.1
      > fonts
        - calibri.ttf	
      > images
	- header.png
	- body.png
	- body_right.png
      > styles
	- default.css
	- default_right.css

Most of the stylesheet settings are self explanatory, so following are some areas that are meaningful when designing a layout.

The page is divided between a header container (150 pixels high), and a body container (750 pixels high), in which a content and menu container are held. It is a good idea to allow for enough width to accomodate longer menu button text. The footer is a floating div, with one line of text at the base of the body.

The template menu orientation can be changed by referencing two files - 'default.css' and 'body.png'.
Renaming 'default_right.css' to 'default.css' and also renaming the 'body_right.png' to 'body.png' will switch the menu and backgrounds around rather than displaying the current left side menu panel.

The content container has an overflow configured for scrolling once the page content passes the container height. You will notice the scroll up and down buttons, as well as the scroll progression bar will automatically fade in on page transition.

Homepage banners if they are used have a div for a slogan that can be displayed after a set period of time. Also, there is another slogan div that can be set to display at the base of your page if you choose to have the website logo graphic near that position, and this can be used without the banner slogan.

The font currently used as default is called 'calibri.ttf', which is chosen as it fits well and slightly wider than a commonly used font. You can add your own to the font folder and change the default stylesheets @font-face property, and also the body tag font-family name.

Check if you use the 'mailhandler.php' file that it is suitable for your submission form requirements and has the correct email address settings before publishing your site.

The default.js file contains all of the functions that operate the site. There are no external links to any javascript library.
The procedure briefly is to: (1) check the site configuration settings, (2) preload the banners, scroll button states and background image, (3) get a list of page divs whilst hiding them before loading the inital home page, (4) then use the image loader function to proceed with inserting images that are declared in the website pages.

To assist with page scrolling, in particular small amounts, when using a mouse you can click down, hold then move and release between two points in a vertical motion in the content container region. Using your middle mouse button will avoid any text selection.

Just a brief overview of the header descriptors that are used in the 'Index.html' file, typical to what is used in most other websites that outline access to elements such as the themes directory path and script files.

<div id="siteConfigs">

	<div id="themeTitle">template_v1.1</div>	
	<div id="initialBannerName">banner_template_v1.1_</div>
	<div id="bannerSequence">1</div>					
	<div id="numberOfBannerImages">3</div>														 								
	<div id="introBannerSwapDelay">5000</div>			
	<div id="bannerSwapDelay">7000</div>				
	<div id="bannerSwapTime">40</div>					
	<div id="pageSwapTime">15</div>						
	<div id="contentScrollTime">8</div>					
	<div id="contentScrollLineLimit">500</div>			
	<div id="sloganTextFadeTime">4</div>				
	<div id="titleTextFadeTime">10</div>				
	<div id="scrollButtonFadeTime">15</div>				
	<div id="showScrollBar">1</div>						
	<div id="scrollBarPosBoxWidth">1</div>
	<div id="enableDirectLink">1</div>

	
 </div>

    <div id="bodyBackground" data-image-enabled="1">
	
 

The website configuration settings are located at the top of the 'Index.html' page. These are used to set the banner, page display and a range of other parameters to control the look and feel of page interaction.

themeTitle:
A directory reference used in segments of the script for providing a path in order to load the themed elements.

initialBannerName:
The introduction banner image '.png' file name. This is used without needing the end number or the filename extension.
For Example: Actual introduction banner name: 'banner_template_v1.1_0.png' is referenced to: 'banner_template_v1.1_'.
Note: the banner sequence always begins with number '0' to signify the introduction banner as the initial banner.

bannerSequence:
Select the banner display sequence type. Having a '0' will choose and display a random banner while remaining with '1' will keep all banners in numerical sequence. Any chosen sequence excludes the introduction banner.

numberOfBannerImages:
The number of banner images available; this value excludes counting the introduction banner.
Note: You must use at minimum 3 banner images for this to function correctly. Setting this to '0' will display no banners, which includes the introduction banner. You should also want to change the 'introBannerSwapDelay' value to '0' to prevent the menu halting any button clicks on initial loading.

introBannerSwapDelay:
Control the website introduction banner swap time delay, in milliseconds.

bannerSwapDelay:
Swap delay between each main menu banner, in milliseconds.

pageSwapTime:
Swap transition time between each page, in milliseconds.

contentScrollTime:
Content area page scroll transition time per button click (1 - 10ms recommended.)

contentScrollLineLimit:
A higher number increases the amount of scroll time (more lines) per button click.

sloganTextFadeTime:
Slogan text introduction fade transition time that is divided by the 'introBannerSwapDelay' value, in milliseconds; the higher the number the sooner.

titleTextFadeTime:
Website title (and navigation) text fade in transition time between page transitions, in milliseconds.

scrollButtonFadeTime:
Scroll button fade in transition time, in milliseconds.

showScrollBar:
Signal the auto scroll bar to display either; '0' = Off, '1' = On.

scrollBarPosBoxWidth:
Set the scroll bar position box width; the guide line is set to 1/2 of the box width (1 - 6 pixels recommended.)

enableDirectLink:
Set the 'directLink' page transitions to be enabled; 0 = Off, 1 = On. (Tip: set it to be disabled under webpage development purposes.)

When enabled, you can use an anchor like what is shown below to make a direct link to the requested page within the current page you are on. The search function also links to other pages and operates using this method.

bodyBackground:
Shown below the other settings, you can set the page to display a background image by altering the 'data-image-enabled' value to either '0' = Off or '1' = On. If you leave this value set to '0' the stylesheet will read the url path value, which is a 1 pixel wide repeating horizontal image named 'bg.png' in the template example.

Selecting the background image option will allow you to have a full scaled image in either a .png or .jpg file format. An image size of 1920 x 1200 pixels is suitable for most desktop resolutions, and it will scale wider to accommodate larger screens. When the window is scaled smaller, the image will scale to the width of the header and body area. Any screen area outside of the image dimensions if exposed will fall back to displaying the body tag background color.

Located in the images folder is a file for the background image, named 'body_bg'. If you intend to use a .jpg image then you should rename the .png file name to anything other than 'body_bg' to prevent it from loading first by default.


<!-- Main Menu -->

<div id="ml3ss0">				
 <div id ="mMB0" class="menuButton"><a id="hideFocus" onclick="initPage('3','0')">Home</a></div>
 <div id ="mMB1" class="menuButton"><a id="hideFocus" onclick="initPage('1','1')">Extended Menu's</a></div>
 <div id ="mMB2" class="menuButton"><a id="hideFocus" onclick="initPage('0','2')">Gallery Links</a></div>
 <div id ="mMB3" class="menuButton"><a id="hideFocus" onclick="initPage('0','3')">Video Library</a></div>
 <div id ="mMB4" class="menuButton"><a id="hideFocus" onclick="initPage('1','4')">Contact</a></div>
 <div id ="mMB5" class="menuButton"><a id="hideFocus" onclick="initPage('0','5')">Image Layouts</a></div>
 <div id ="mMB6" class="menuButton"><a id="hideFocus" onclick="initPage('0','6')">Search</a></div>
 <div id ="mMB7" style="display: none">End</div>
</div>	

<!-- Placeholder's for Static Main Menu Elements. -->	
<div id="ml0ss2"></div>   <!-- Gallery Links -->
<div id="ml0ss3"></div>   <!-- Video Library -->
<div id="ml0ss5"></div>   <!-- Image Layouts -->
<div id="ml0ss6"></div>   <!-- Search -->
 

The main menu structure consists of a 3 tier system: main menu buttons (mMB) shown above and sub menu buttons (sMB) shown below. Each button link calls the 'initialize page' function with two number variables given; one for menu level and the other for a sub section.


<!-- Sub Menu's -->
					
<div id="ml1ss1">	<!-- Extended Menu's -->		
 <div id="sMB0" class="menuButton"><a onclick="initPage('2','0')">Level 1a (2,0)</a></div>
 <div id="sMB1" class="menuButton"><a onclick="initPage('2','1')">Level 1b (2,1)</a></div>
 <div id="sMB3" class="menuButton"><a onclick="initPage('2','3')">Level 1c (2,3)</a></div>
 <div id="sMB4" class="menuButton"><a onclick="initPage('2','4')">Level 1d (2,4)</a></div>
 <div class="menuButton"><a onclick="initPage('3','0')">Return to Main Menu</a></div>						
</div>

<div id="ml1ss4">	<!-- Contact -->			
 <div id="sMB7" class="menuButton"><a onclick="initPage('2','7')">Online Enquiry (2,7)</a></div>
 <div id="sMB8" class="menuButton"><a onclick="initPage('2','8')">Contact Information (2,8)</a></div>
 <div class="menuButton"><a onclick="initPage('3','0')">Return to Main Menu</a></div>	
</div>

<div id="ml2ss1">	<!-- Level 2 Extension; subMenu 1 of Extended Menu's -->	
 <div id="sMB2" class="menuButton"><a onclick="initPage('2','2')">Level 2a (2,2)</a></div>
 <div class="menuButton"><a onclick="initPage('1','1')">Return to 'Level 1' Menu</a></div>		
</div>

<div id="ml2ss4">	<!-- Level 2 Extension; subMenu 4 of Extended Menu's -->	
 <div id="sMB5" class="menuButton"><a onclick="initPage('2','5')">Level 2b (2,5)</a></div>
 <div id="sMB6" class="menuButton"><a onclick="initPage('2','6')">Level 2c (2,6)</a></div>
 <div class="menuButton"><a onclick="initPage('1','1')">Return to 'Level 1' Menu</a></div>
 <div id="sMB9" style="display: none">End</div>		
</div>
				
</div> <!-- End of Menu -->
 

Menu level 0 (ml0) indicates a static page without a sub section, and menu level 1 (ml1) initiates an extended subMenu item.

Each menu level 1 item must have a link to atleast one sub section menu item, so you would use menu level 2 (ml2).

From any sub section you can create from any given link in that menu another sub menu level by calling menu level 2 again, and having in place a container div with the id named after the calling link menu level and sub section numbers.

For example using a div with the id 'ml2ss4' is used to hold other menu items shown in the example above, that is being called from a link in the 'ml1ss1' sub menu container. Clicking any links in the 'ml2ss4' sub menu effectively creates a third tier menu level which can hold additional page links. The div id for menu level 3 (ml3ss0) is reserved for the home page menu item.

You should notice that the menu and sub menu button id's match to the sub section number of the calling menu button link. The only menu and sub menu button to not have any parameters is the last button listed in the menu list; such as 'mMB6' and 'sMB9' in the example above, which is required to call an interuption to the end of the list.

It is very important to remain sequential in numbering the menu and sub menu buttons, including the 'end' button being last. You can add in button links out of order, as long as no number starting from zero is skipped.

Always include a list of any static main menu elements underneath the main menu item list if you have any, like what is shown above.


<div id="dml3ss0">	<!-- Home (3,0) -->	
</div>
					
<div id="dml1ss1">	<!-- Extended Menu's (1,1)-->					
</div>	
	
<div id="dml0ss2">	<!-- Gallery Links (0,2) -->					
</div>	

<div id="dml0ss3">	<!-- Video Library (0,3) -->					
</div>

<div id="dml1ss4">	<!-- Contact (1,4) -->					
</div>

<div id="dml0ss5">	<!-- Image Layouts (0,5) -->					
</div>

<div id="dml0ss6">	<!-- Search (0,6) -->					
</div>

<div id="dml2ss0">	<!-- Extended Menu: Level 1a (2,0) -->						
</div>	

<div id="dml2ss1">	<!-- Extended Menu: Level 1b (2,1) -->
</div>	

<div id="dml2ss2">	<!-- Extended Menu: Level 2a (2,2) -->
</div>	

<div id="dml2ss3">	<!-- Extended Menu: Level 1c (2,3) -->				
</div>	
					
<div id="dml2ss4">	<!-- Extended Menu: Level 1d (2,4) -->
</div>	

<div id="dml2ss5">	<!-- Extended Menu: Level 2b (2,5) -->
</div>

<div id="dml2ss6">	<!-- Extended Menu: Level 2c (2,6) -->
</div>

<div id="dml2ss7">	<!-- Online Enquiry (2,7) -->					
</div>

<div id="dml2ss8">	<!-- Contact Information (2,8) -->					
</div>

Described above is a complete listing of div's that match up to the menu level and sub section numbering system of the menu in the template. Notice that the div id's all start with 'dml', and having any div number skipped or removed from sequence will cause an error and not allow you to display your website.

The div's are the backbone of the website to make it easy to manage content, what you would regularly see in a standard web site layout.

Once you've made the graphics, aligned them to a frame and set up the menu system, it comes down to what is put into each div page. As what is shown in the template, there are a few additions included to help you along.

These additons are not essential to the site and won't interfere with the script if you choose to not use any of them.

Image Gallery Links


<div id="gallery1"><a onclick="return launchGallery('1');">Launch </a>an Example Gallery.</div></p>						
<div id="galleryFrame1" data-closeBtnBar-width="140" data-closeBtnBar-height="30" 
data-closeBtnBar-fontSize="22" data-images-total="5"></div> 

<p><div id="gallery2"><a onclick="return launchGallery('2');">Launch </a>another Example Gallery.</div></p>							
<div id="galleryFrame2" data-closeBtnBar-width="140" data-closeBtnBar-height="30" 
data-closeBtnBar-fontSize="22" data-images-total="5"></div>			

There are two galleries in this list, represented by a div id starting with 'gallery1', and incrementing to 'gallery2'.
The 'galleryFrame1' div contains the left, right and close buttons as well as the centered image.

Four parameters of information are required; the close button height and width, close button font size in pixels and how many images are in each gallery. The width of the close button determines the same width of the left and right gallery buttons.

The images used for the galleries are located in the images folder. The naming scheme is 'g1_1.png' for the first image, 'g1_2.png' for the second image, etc. Gallery two would therfore start with the naming 'g2_1.png', 'g2_2.png' etc.
Images with the .png file format are only used and supported for transparency.

Video Player


<p>Watch Youtube Video 1:</p>	
					
<div id="videoFrame1" data-closeBtnBar-width="140" data-closeBtnBar-height="30" 
data-closeBtnBar-fontSize="22"></div>
<div id="video1" data-vid-type="YT" data-vid-width="832" data-vid-height="480" data-vid-src="none" 
data-vid-youtube-id="KhK7baKMCEo" data-video-frame-num="1">
<a onclick="loadVideo('1')">Open Video</a></div>

<p>Watch Youtube Video 2:</p>	

<div id="videoFrame2" data-closeBtnBar-width="140" data-closeBtnBar-height="30" 
data-closeBtnBar-fontSize="22"></div>			
<div id="video2" data-vid-type="YT" data-vid-width="832" data-vid-height="480" data-vid-src="none" 
data-vid-youtube-id="Ukg_U3CnJWI" data-video-frame-num="2">
<a onclick="loadVideo('2')">Open Video</a></div>		
					
<p>Watch Server Video 1:</p>	

<div id="videoFrame3" data-closeBtnBar-width="140" data-closeBtnBar-height="30" 
data-closeBtnBar-fontSize="22"></div>				
<div id="video3" data-vid-type="HQ" data-vid-width="640" data-vid-height="360" data-vid-src="ocean_waves"
data-vid-youtube-id="none" data-video-frame-num="3">
<a onclick="loadVideo('3')">Open Video</a></div>

There are two methods available to either stream a youtube video or serve your own file. Just switch the 'data-vid-type' to 'HQ', then change 'data-vid-src' to the name of your video file (excluding the extension), located in the video folder.
Only '.mp4' and '.webm' formats are programmed in the script.

Youtube video's are referenced by setting 'data-vid-type' to 'YT', and entering the video signature from the youtube web site into the 'data-vid-youtube-id' value field, like what is shown above.

Contact Form


[snippet..]

<td> <div id="req">* = Required Fields</div>
<div style="width: 170px; float: left; font-size: 14px; margin-top: 10px">
<label>Verify yourself by typing in the number shown below and then tick the check box:
<div id="nReq"></div></label>  
<input size="6" name="nReq" onpaste="return runPass()" >
<input onmouseup="authCheck('1');" type="checkbox" name="mycheckbox1"></div></td>	
<td><div style="float: left; width: 57px; height: 30px; margin: 20px 5px 0 0;"><input type="button" 
id="submitBtn1" value="Send" onclick="verify();">		

When using the form that is provided in the template, it implements a type spam protection using a number generator that cannot be pasted, shown in the code above. Keep in mind that the authorization check ability is currently only designed to check for this one form. The 'mailhandler.php' file gathers the form entry data and sends them to the email address defined.

Image Inserter


<div id="img_lovebirds" class="image" data-file-name="lovebirds.jpg" data-img-margins="0,0,10,500" 
data-img-float-direction="right"></div>

Designed to make inserting images into any part of the page without updating any other style sheet setting.

All that you need to do is change the div id to something unique for each picture, keeping the "img_" bit in front of the name, set the margins and float direction, and the script will handle the rest.

The 'data-file-name' field value should match the name of the image (including the extension) that is located in the images folder. A class name set to 'image' is also required.

 

Although few themes are available at the moment, you can use the 'Template v1.1' as a base for designing your own sites.

   
Name*
Email Address*
Phone Number
Fax
Type of Enquiry*
Preferred Contact Method*
Your Enquiry
* = Required Fields

Website Developer
Mr Michael McKimm

Location: Southern Australia


<!DOCTYPE html>
<html>
 <head>	
  <title>Automatis GFX: Template v1.1 - Home</title>
 
  <!-- Link to the stylesheet folder for 'template_v1.1' located in the themes directory -->
  <link rel="stylesheet" type="text/css" href="themes/template_v1.1/styles/default.css"> 
  <meta charset="UTF-8" />
  <meta name="keywords" content="Automatis Graphics GFX Gfx Template v1.1">
  <meta name="description" content="Automatis Graphics Template v1.1."> 
  <script language="javascript" type="text/javascript" src="scripts/default.js"></script>
 </head>

It is easy to change from one theme to another by calling the correct folder name located inside the themes directory.


<!DOCTYPE html>
<html>
 <head>	
  <title>Automatis GFX: Template v1.1 - Home</title>
 
  <!-- Link to the stylesheet folder for 'template_v1.1' located in the themes directory -->
  <link rel="stylesheet" type="text/css" href="themes/template_v1.1/styles/default.css"> 
  <meta charset="UTF-8" />
  <meta name="keywords" content="Automatis Graphics GFX Gfx Template v1.1">
  <meta name="description" content="Automatis Graphics Template v1.1."> 
  <script language="javascript" type="text/javascript" src="scripts/default.js"></script>
 </head>

Although regarded not as important as it used to be considering most search engines nowadays examine the actual keywords in the body of the page, or pages in this regard, you still can supply some meta keywords that match the content and a searchable description of the website.

Automatis Graphics - Template Site
Designed by: Automatis Gfx | Uploaded: 25.2.2017 | Version: 1.1

Copyright © - Automatis Graphics - All rights reserved.