Table of contents Introduction 1

Visual Design

For making the website appropriate, readable, neat and consistent it is essential to follow visual design requirements. For this, the specific softwares should be used, such as Notepad++, Sublime Text and so on. For developing the visual design of the website “Sublime Text” software has been used. The main reason behind choosing this software is that the sublime text includes a mini map window on the right side of the interface with top-down view of the whole CSS, HTML file that the developer working on. It enables the developer navigate the whole file page quickly and move faster from one code to another. Additionally, it also supports majority of coding languages, such as HTML, CSS and Script codes. Moreover, it is easy to work on different files in one desktop at the same time by changing the layout into column two, three and so on. This enables the web developer to work on two or more files at one time.

Code clarification, Navigation and Java

The navigation of the website has been done by using unordered list and list item tags

,
• and the whole content design is created in a CSS file with the help of class id “nav” from the HTML. Active page in the navigation is shown by black background color (
• ) and the links to the pages are given by using the tag. All the navigation section in HTML file has been grouped by
  attribute and this as a result enables working on the CSS file easier by applying styling in one class id group at the same time.
  

  
  

  
  
  • 
    HOME
    
  
  
  • 
    ABOUT
    
  
  
  • 
    ALBUMS
    
  
  
  • 
    NEWS
    
  
  
  • 
    CONTACT
    
  
  

  
  

  
  

  The CSS styling for the navigation was an essential part of the work. By the help of the styling the width, background color, height, margin, padding and opacity designs have been visualized. In terms of the unordered list and list items style, they are made to be inline, absolutely positioned, with text align in center and floating by the help of CSS styling. The list-style was made to be as none make it inline in the navigation bar. Except this general design, the links under the tag have been designed by giving styles to color, text-decoration, borders and so on. The hover style of the attribute was styled to have a special changeable color and transition.

  
  

  var index = 1

  
  function plusIndex(n)
  {
  index = index + 1;
  showImage(index);
  }
  showImage (1);
  function showImage(n) {
  var i;
  var x = document.getElementsByClassName("slides");
  if (n > x.length) {index = 1};
  if (n < 1) {index = x.length};
  for(i=0;i {
  x[i].style.display = "none";
  }
  x[index-1].style.display = "block";
  }
  The script styling has been done by following the tutorial instruction in 3wschools.com (https://www.w3schools.com/) and basic skills from the university knowledge. This styling has been applied to visualize the slideshow dynamically in the home page and look it more appropriate. Additionally, the style display made it in “block” in the slideshow. The link to the script has been given in the index page to connect the HTML and Script codes together.