5.3.1 Sprint Implementation - HTML and CSS Pages

HTML and CSS - Homepage

The first page created was the User Guardian homepage and it was designed to the specification of the mock-up in section 4.2.1

CSS was used to create an initial layout as shown in Figure 35. The layout was a series of CSS classes stored in a separate CSS file linked to the homepage only. The code for the CSS style sheet and Homepage can be found in the appendix section of this page.

Figure 35 - Layout of the central navigation buttons.

CSS - Transitional Effects, Button Design and Gradient Shading

To keep the appearance of the coded homepage as close to the mock-up design CSS classes were created for the buttons and for the gradient shaded boxes.

In Figure 36 a breakdown of the CSS is shown with the gold button text hover over effect and the purple button class to perform the shading. The purple buttons show the text colour change before and after mouse rollover.

To ensure the shading was rendered correctly and was compatible with all browsers a CSS code generator was used to output the code.

http://css3buttongenerator.com/

Figure 36 - Breakdown of code for the mouse over transitional effects and gradient shading

HTML and CSS - Other Pages

Once the homepage was completed a new CSS style sheet and HTML pages were created for the other parts of the system linked off from the main homepage. A second CSS style sheet was chosen to keep a design consistency across the system, attached to the <head> content of the subpages

CSS - Other Pages Layout

The CSS code for the other pages "ug_subpages.css" produced a standard layout has shown in Figure 37 with the HMTL ordered in the same order. CSS code example below.

Figure 37 - CSS layout code

The full code for the template can be found in the PDF documents in the appendix section called "Homepage CSS code".

The CCS for the subpages also includes the navigation buttons that are common for all the pages outside the homepage. A separate CSS file for these pages makes design updates simpler, as there is less code to look at and each change is done once in a single central file location.

HTML Structure

The required subpages from the homepage were inserted into the top of the www\var directory. These all have the extension PHP as they contain PHP code and so that the webserver knows how to process them.

Separate directories for the CSS and Images folders were created, this is shown in Figure 38.

Figure 38 - Directory Structure on the Ubuntu Webserver

All the PHP files in this directory were linked between as designed in GUI application map in section 4.2 Graphical User Interface Design. This created a working website with subpages.

To provide a feel for the application at this point, mock graphics have been inserted to demonstrate the content that will be on each page. The working page that demonstrates PHP linked to the database can be found here.

Business Roles - http://userguardian.asuscomm.com/business_roles_dev2.php

More information on how this page was implemented can be found in the following section 5.3.2 Sprint Implementation - PHP and MySQL.

Appendix

Please click on the pdf files below the appendix to download and view the full code used.

Page updated

Google Sites

Report abuse