Get Help With Your Assignment
If you need assistance with writing your assignment, our professional assignment writing service is here to help!
The documentation will go through the project using the following outline: cross site common elements: < nav > and < footer > items and SSIs server-side solutions, about section, portfolio section, contact section, blog section, webpage responsiveness, accessibility criteria. Each section had been documented describing the code used in the specific section, however, solutions such as responsiveness, accessibility will be detailed as separate chapters of the documentations since they are sets of criteria applied concisely through the whole website. Moreover, the responsiveness and accessibility chapters will present why these aspects are important and how each page conforms to these regulations and best practice solutions giving a concise look to the website as a whole.
Cross site common elements
Navigation, footer, SSIs and plug-ins
Starting with the common elements of the website deliverable pages the title and navigation bar. The title element of page number 1 which is the home page of the website. The title of the home page is also, the title of the website “Joel Harrison Graphic design”. To indicate the role of the title it is the only text appearing in the same way and same place in the through the whole website. Which is best practice when it comes to search engine optimization. Furthermore, the title works as a link to the home page from the other pages of the website. In all pages indifferent of function, the title is styled to look the same way. On the home page the tile text is used as a simple < h1 > element styled with a h1 selector with declarations margin:0; and padding: 0; with the goal of eliminating any unseen spaces around the text itself which made it easier for myself to style the page since the padding and margin areas being 0 do not interfere with any other element on the page. On the about page the text is used as a link and written inside a < div > element and styled in CSS with the help of a class called “ligthfront”. The link inside the < div > element is styled with a different class called “alinkdecor”. The two classes inside the < div > element have different functions. The “lightfront” class is used to style the text inside the < div > to look as a < h1 > element. Do to this the “lightfront” class uses the following declarations: font-family: sans-serif; font-size:2.800em; padding-bottom: 20px; padding-top: 20px; margin: 0 auto; width:800px; text-align: center; font-weight: bold;.
The font-family is used to determine the style of the text in our case sans-serif which is the font-family used through the entire navigation bar. Moreover, font sizes as well are all declared using em size unit. Padding-bottom is used to help with the positioning of the < div > leaving 20px; of white space between the top end of the page and the < div > with the title text inside. Padding-top is used for the same purpose with the exception that the declaration applies to the bottom of the < div > element. Margin 0 auto and text-align: center are used to center the < div > horizontally within the page. The < div > is given an 800px width which is the size the title covers. Finally, the font-weight is set to bold to imitate the style of the title in < h1 > on the first page. The role of the class “alinkdecor” is to style the link inside the < div > element using text-decoration: none; color: black; declarations. The purpose of the decoration: none is to eliminate the underlining of the link and using color: black makes the link color and text associate with the link look black.
Server Side Includes in short SSIs is a part of Microsoft’s SQL Server Integration Services the primary use of the tool is data warehousing, data transaction and data extraction. The SSIs can be utilized for merging data from heterogeneous data stores populating data, warehouses and data marts cleaning and standardizing data building, business intelligence into a data transformation process and automating administrative functions and data loading. Basically, the tool is an import, export wizard for data which allows in our case the storing of common element of webpages on a single file with the ending of ssi which is very practical from a point of view of website building and maintenance since the written code needs only to be edited in the particular ssi file which then will apply the changes to all other pages the file is being linked too. Presentation and content being separated the web server combines SSi and page code together. The SSIs work in the following way in my case the < footer > fragment or element of the page is being written in a SSIs file which means that the HTML code is written inside the ssi file then the file is placed into a separate directory ex named SSI at this time the HTML inside the ssi file does not have to be a valid HTML than another file with the named .htaccess is placed into the directory in which the file the user wants to maintain are located in. The .htaccess file contains the following code:
AddHandler server-parsed .html
AddHandler server-parsed .html
AddHandler server-parsed. ssi,
which is the basic syntax of the code many elements can be parsed in our case the footer for which the is being used. Directory names and elements can vary but usually the file ending is in SSI however it can be text or HTML as well. As a last step all pages we want to run the SSI file must include the following code anywhere in their HTML . The only downside of the tool being when offline the SSI element will not appear on the particular webpage. SSI can be useful then maintaining or creating large websites where the tool can spare us considerable amount of time when modifications are needed. For my project I had only used the tool for my < footer > element since this element is the only one that is common on all page’s other element such as the header are somewhat different on most of the pages of the website. (SSIs, 2018)
Share This Plug-in
The last element that is common throughout the pages is the plug-in of sharethis.com a side bar of social media share buttons generated through < script > on the Sharethis website embed to the HTML with the help of a link containing a < script > item. The Share bar is consistently, present on all of the pages of the website contributing to the consistent minimalist overall look of the website. Furthermore, the version of the share button bar is called a sticky button one of the two button types available on the providers website the website allows you to customize your bar by selecting your social services from a wide range of options by just dragging the into the bar moreover, a wide range of customization option are available from alignment options to only reveal the number of likes after reaching a certain number or to not be displayed at all. Button sizes and label can be added or changed finally, the user only needs to register and past the code inside the website at the end of the < body > element or inside the < head > (Share This Plug-in, 2018)
The main page of the website host as a first content element below the navigation bar a picture < img > element which presents one of the works of the graphic designer’s portfolio the goal is to showcase the work of the designer at first glance. The < img > element is styled with a class called “workimg”. The class styles the size of the < img > and the position it takes within the page, declarations used are the following: display: block; padding-top: 50px; margin-bottom: 10px; width:1100px; height:620px; margin: 0 auto. Display: block is used to keep the image in a particular position without the interference of other elements. Margin: 0 auto is set to position the < img > to the center of the page, the width and height of the picture is set to look appealing to the viewer using px size units finally, paddings and margins are set to adjust the space between the other elements above and below the < img >.
Continuing to the lower part of the page you can see there are text three columns made with the help of CSS3 flex-box container declarations. The way the flex-box works is that first of all, we have the whole of the content wrapped in < div > elements in HTML5 in total five < div > elements are used. Starting from inside to outside the first 3 < div > elements contain one < h2 > and one < p > element each. These then are wrapped with a “flex container” < div > which is in turn wrapped with one last < div > element containing all of the above-mentioned elements. Its < div > is styled with a class of “wrap” laying out the main characteristics of the wrap in which all of the rest of the element will take place. The class “wrap” has the following declarations width: 100%; max-width: 1200px; margin: 0 auto; fixing the width to the whole page and centring the content with the element. Going one element inside the next < div > element is styled with the class “flex-container” hosting the following declarations display: flex; flex-wrap: wrap; these are the declarations creating the flexible responsive layout structure. Using display: flex the parent element becomes flexible. Flex-wrap: wrap; orders flex items to wrap if necessary. (Net Ninja Tutorials Flex-box, 2017 ) Finally, the last three < div > elements are given a class of “box” with the following declarations height: 400px; flex-basis: 300px; padding: 20px; width: 70%; font-family: monospace; margin: 0 auto. Essentially, the class is responsible to give shape to the three columns a height a width a padding and a flex-basis. The flex-basis specifies the initial length of a flexible item, meaning that the initial length is 300px however, if we shrink the browser this length can change according to what size does the browser window has. Columns can adjust according to window size to for example display one on top of each other is the window is too small to display inline. Moreover, the class “box” has two descendants “box p” with the following code: text-align: left; and “box h2” with the code: text-align: center; each styling the < p > and < h2 > elements in the respective < div > element. “box p” declares text-align: justify; to organize paragraphs to display justified, “box h2” declares text-align: center; which as the declaration says centres are < h2 > elements.
(WDUX Assignment, 2018)
The section which host information regarding the designer also, works like a cv listing previous qualifications and works. The whole of the section is placed within a container called .about-container with the attributes of display: flex; flex-flow: wrap; giving it the characteristics of a flex item with a flow of wrap meaning if the screen is to small items will wrap around each other making the section responsive. Moreover, advantages of the flex-box model area for example what one can avoid using positioning or floats in its code furthermore, it helps create a responsive layout and it is widely supported on all types of browsers. Starting with the < h1 > of the page which is styled through the class called .me containing the following code: width: 100%; height:100%; padding-top:100px; padding-bottom: 100px; margin: 0 auto; text-align: center; font-family: monospace; font-size: 5.000em; color: black; is given a colour of black which according to Checkmycolour passes contrast ratio, brightness difference and colour difference criteria’s. Padding top and bottom is given to create white space bellow and above the < h1 > element width and height are given 100% and the element is being centred using margin: 0 auto.
The CSS used to style the img element is done by class called .about containing the following code: display: block; margin: 0 auto; width:85% ; height:40%; margin-top: 20px; The display: block styling is given so that the img element starts on a new row taking over the whole width of the row. The img is being centered and given a top padding for white space below the < h1 > element. All, text elements are place in a < div > styled with the .inbrief class directly or through its descendants. The < div > is centered using a margin:0 auto; all text is set to use a. font-family of monospace this is consistent through all the pages with minor exceptions. The width: 90%; font-size: 1.200em; font sizes padding-top: 15px; line-height: 2.5; text-align: left; The text alignment to the left side is important because of accessibility reasons since the website must adapt to accessibility criteria’s. The descendants of .inbrief style the elements within the < div > .inbrief h2 is given a larger font size of 3.000em, .inbrief article is given a padding:40px; .inbrief article h3 is also, given a larger font size of 1.500em and text-align center. Two of the three articles on the page are given a background color and different text color by using classes the choice for using classes was made because I wasn’t able to style only certain articles with descendent. The two classes are called .decor and decor3 one styling the top article and one the last one below. Class decor giving a background-color: yellow; and decor3 a background-color: black; color: white; to its article.
At the end of the sections content all element mentioned above are optimized for screen sizes of bellow 600px and above 1200px with the help of the @media screen styling however, the method will not be discussed in this chapter but will be discussed within the Responsiveness chapter at the end of this documentation.
(WDUX Assignment, 2018)
The portfolio section is made of four pages with the same layout and styling the pages feature a jQuery image carousel with images and text as content. Each page can be accessed through the links above the carousel which are styled as a local navigation bar. As throughout the website pages do not link to themselves avoiding any confusion within the users. The links are styled with the class .tabsstyle and its descendants .tabsstyle a, a:hover and .tabsstyle h2. The class .tabsstyle uses the following code: margin-bottom: 20px; margin-left: 110px; positioning the links, tabsstyle a uses the following code: padding: 8px; border: 1px solid; text-transform: uppercase; letter-spacing: 2px; text-align: center; color: black; margin-left: 10px; margin-top: 10px; cursor: pointer; font-size: 0.700em; text-decoration: none; background-color: black; color: white; font-family: monospace; styling the a link as buttons or tabs finally a red hover is added with the descendant a:hover and the h2 is styled with font-size: 2.000em; padding-left: 10px; padding-bottom: 10px; font-family: monospace.
tag is closed. All three languages the HTML the CSS and jQuery had been edited by myself to make the carousel appear in a neat way within the page. Starting with the HTML a < section >, < article >, < h2 > < h3 > and < p > elements containing the description of images had been added to the < li > of the < ul > below the image links. The carousel works in a way in which the jQuery makes the carousel rotate the < li > elements within the unordered list. The default CSS styling of the carousel uses webkit- a html/css rendering engine used by Safari and Chrome with decoration is part of CSS3.This is a good way of writing CSS since most major browsers use WebKit as part of their browser engine. For both the carousel itself and the above pager which is a list of pictures what are displayed in big inside the carousel. The plugin uses the following classes and its descendant to style the carousel and its pager: lSSlideOuter, lightSlider, .lSSlideWrapper .lSAction. The type of CSS used is called Also, @-webkit-keyframes are used which is used for CSS3 animation. That is used to move the images within the pager left and right. Some of the modifications made in the CSS are for example in the .lSSlideOuter .lSPager .lSGallery that is the class the pager is being styled the pager got a border: 5px solid black; also, weight and width properties had been modified for the carousel .lSSlideWrapper width:90%; The , < article >, < h2 > < h3 > and < p > within the < li > had been styled with the class .clearfix and its descendants ul giving it a list-style: none outside none; padding-left: 0; margin: 0; width:100%; .clearfix section article h3 giving it a styling of float: left; margin-right: 300px; the < section > element had been styled with the descendant li section using color: white; background-color: black; padding: 50px; margin-top: 40px; margin-bottom: 20px; font-family: monospace;li section article descendant with padding-bottom: 10px. The third coding language used in the creation of the carousel is jQuery the HTML contains a link to the jQuery file containing the code used however, the HTML file hosts a part of the < script> as well. The < script> within the HTML host a function() which influences both the slider and the image bar bellow. Using the list of setting from the webpage the slider had been downloaded from the carousels speed or auto transition had been adjusted by giving the pause declaration a higher unit number in milliseconds ms. (Light Slider, 2018)
Find out how UKEssays.com can help you!
Our academic experts are ready and waiting to assist with any writing project you may have. From simple essay plans, through to full dissertations, you can guarantee we have a service perfectly matched to your needs.
The contact page of the website uses a form mail plugin from tactile.com the form consists of two files a HTML file and a PHP file. Moreover, the contact form uses a server-side solution to make the contact page work the PHP file communicates between the server and the HTML page and the browser. The form makes it possible for user to communicate with the website owner sending a message on the webpage contact form which with the help of server-side solution gets sent to our e-mail. Since the form is a pre-made form its essay to install first we need to fill in the PHP file with the correct data the downloaded PHP contains a three-step description on how to make the form work. First, we need to set a target email where we would like our messages to be sent. Than we need to upload the PHP file to our server using any file name as long as it ends with .php in my case the form is uploaded to the digital project directory “ /htdocs/digitalproject/formmail.php”. After we can create a form in HTML or use the one provided by tactile.com the form must have a hidden called “recipients” with the email address of the person to receive the form’s results. As a last step set the action attribute to the formmail.php uploaded to the web server. By only doing these few simple steps we can have a functioning online form, if we wish to make any advanced changes the form provides instructions upon that as well. Furthermore, the form uses the element of the
Cite This Work
To export a reference to this article please select a referencing stye below: