Tip:
Highlight text to annotate it
X
Hi I’m Kaushal Shah a developer in University Web Communications. I’m going to give you
a brief tutorial on how to get setup with the new HTML 5 Accessible Framework we developed
for the University community. First thing is to go to download the framework package from GitHub
We’re going to unzip the files onto a web server. In this case we’re going to put it on a local XAMPP test server.
This framework uses Dreamweaver templates, so we’ll want to create a site in dreamweaver for the location of where our files have been extracted.
Once that’s done, go into the core folder and rename config-sample.php to config.php.
Open that file up and put in the url of your site.
There a few other options here that you can define that we’ll go over in just a second.
Navigate to the root of the site through your web server and you should see the READ_ME file.
If you scroll down you’ll see a list of example layouts that have already been
created with this framework. We’re going to click on the first one “three_col_vert-example.php”.
You’ll see in this example file how the default settings render the page.
What we’ll do is go back into the config file and make some changes to customize it for your site.
In the array fill in your site name.
Let’s change the brand strip to red.
The header background color to red and the header text color to white.
Now’s let go back to your site and do a CTRL +F5 refresh to clear your cache.
You’ll see that your site name is now in the header and title bar and that the colors
of the layout have been changed to what you set in the config file.
Going back to the readme you’ll see there are 5 layout examples that you can edit or copy to get started.
Each of these five examples has been created using one of three base dreamweaver templates.
If you’d like to create a new page from scratch you can do that as well.
Let’s create a new page from the “two_col_horiz.dwt.php” template.
Under modify > template properties, you’ll see some optional template regions that can be turned on or off.
In this case let’s turn off breadcrumbs, turn on the feature player and leave the page title on.
Let’s save it this as my-new-page.php.
Now fire it up in the browser and you’ll see the page you’ve just created.
To edit common elements like the sidebar or navigation you can go to the includes directory.
In this case we’ll go to the nav-horiz.php file which control the templates which use horizontal navigation
Another file, nav.php controls the templates which use vertical navigation.
Link it to our new page. If all your pages are going to be in the root directory you can use relative links.
If you are going to have pages in subfolders you may want to use absolute links and/or PHP to help create the link for you.
In this case we’ll stick with the relative link.
Hit save and refresh.
You’ll see the navigation has now updated for the page that you created.
This is just a very brief introduction to get up and running.
This framework hopefully can be a solid launching point for your University web projects.
Feel free to customize it or modify to fit the needs and requirements of your site or application.
If you have any questions or feedback feel free to post on the NCSU Ning Web Developers group. http://ncsuwebdev.ning.com/