Tuesday, 30 December 2014

Kensa Website Construction

Throughout the construction of my website, I followed and developed the design of my flat plans to ensure that I would create a website that my target audience would find attractive and appealing. For this process, I decided to use Adobe Dreamweaver so that I could create an effective design. So that I could link my pages together and use the images that I needed in the right place, I created a new folder where I kept all of the files I needed. I did this before I started creating my website so that I would be able to find images and create links easily and quickly.

To start, I made a new website in Dreamweaver and chose the page size. I also edited the options that would change the style of my website.

Because all of my webpages had the same layout with an image for the background, text on the right, masthead at the top and buttons on left, for each page, I would only need to change the image and text; other than Winter is Coming because I would need to add my video and the Contact page because I would need to edit the location on the maps. As this was the case, I found it easier to edit the pages through the code once I created the standard layout for each page.


I followed my flat plan design for the layout of the pages and focused on the navigation and genre representation because that is what my target audience thought was important. 

Once I had added the basic content and was happy with the layout of the home page, I duplicated this page five times and renamed and edited them appropriately. This meant that I could then edit the other pages with the same layout and design.

I put my masthead at the top of each page in the middle so that my audience would be able to recognise it instantly. I edited the masthead using CSS to change the styling of the text; I made it white with a black drop shadow so that it would stand out against the background images. I also used the CSS to create the low opacity white box behind the text, and basic code to add text boxes and images in the right places. So that I could add my content and check it was in the right format, I used Dreamweaver's split screen design mode to that I could view and edit the code and layout at the same time.



For the page below, I added my video that I filmed and edited. To do this, I researched what code to use to include it next to the text:

                           <video class="vid" controls>
                              <source src="video/AmyJoMovie.mp4" type="video/mp4">
                            </video>

I added this code in the text container for this page. Below is the CSS for the video:

.vid {
width:720px;
height:380px;
padding:0px;
margin: 0px 4%;
}









After I had finished buiding and checked my website, I uploaded it with my domain name.