Designing For Web: Software Induction Workshop 2

We started the session with Criting each others Scamps which we were asked to produce for this session. We had to lay them out and leave a notebook next to them so that people would be able to write feedback regarding the Scamps.

Scamps laid out for Crit

When I had put Feedback onto other people's work, I returned to my place to collect the feedback that I got from my Scamps

Scamps Feedback

The main piece of feedback which became unanimous was the idea of using the bottom Scamp as it came across as more professional and effective. What was good was the fact that people could tell what the theme was straight away which meant that it was easy to understand and the intention was instantly clear. I will defiantly consider the feedback I received when determining what to do with my Website.

Software Induction Session 2:

Following on from last weeks session, we are going to continue with the website we set up and start adding to it.

Opening a Previous File:

Selecting Previous File and Root Folder

For every time you use Dreamweaver, you need to tell it where the root folder is to make sure that it is using the correct one. Select Manage Sites, Select the website you want to continue with and select the corresponding Root Folder.

Opening a Previous File

You can tell this has worked from the files being in the bottom right-hand corner. Select index.html to open the file.

Creating a Style Sheet:

Create a new CSS Document

In order to be able to make aspects/ details of the website, you need to create a new CSS Document by Selecting New File, CSS Document and Create. This document acts as a 'Style  Sheet' which records all the aesthetic components of the site and links all of the web pages together. A CSS Document can only be viewed in code therefore you can't see whether it has worked, however, it does have advantages such as it has better choices of fonts, colours and complicated layout as well as allowing you to only code something once instead of multiple times like you would in HTML.

The first line of the 'Style Sheet' states that it is a CSS Document and the Second line is called a 'Note' which is a Note to other designers stating what something is. The */ and */ open and close the 'Note'

Adding a Font Family:

Adding a Generic CSS Code for a Font- Family

There are 2 ways to write code, either Inline CSS, which is Code all on 1 line, or Indented, where all the code is separate. We are using separate as it is easier to see when something goes wrong. This font-family coding is Generic CSS Code as it will be Generic to the whole site. Starting on a new line, type body, make a space and then open curly bracket. Press Return and begin writing the word font which comes up with options in a drop down menu before closing with a semi-colon. Select font and then select the font-family that you wish to use before again closing with a semi-colon. Then close the entire setting with a closed curly bracket on the next line.

Linking CSS Style Sheet to HTML File:

Linking Style Sheet

For the aesthetics to go with the site, you need to link your 'Style Sheet' to your HTML document. Save and Close the CSS file and then, using the HTML file, go to the CSS Styles option and select the Chain Link icon. Browse your files and select the 'Style Sheet' you created. This will allow the 'Style Sheet' to embed itself within the HTML code. You can tell it has worked as it will come up along the top bar. Save All and refresh the Internet to make sure the saved changes have worked- from this, my font on my website has changed to Arial.

Creating a Container:

CSS Code for Container

Unlike the Generic Code for the font-family, Producing a Container or Wrapper (a fixed dimension which fits all of the websites components inside and can be split into separate sectors) is a Div ID which is a specific organisation of content. This is made in the CSS Style Sheet, opened by a Hashtag and the word 'container', space and then an open curly bracket. On separate lines, enter the height and width in pixels as well as a background colour to clearly see whether it has worked.

Creating Container

In HTML, enter in-between the body option by creating a new line and entering <div (space) id container. After this, close the Div ID by using </div>. Save this and refresh the internet to see whether it was successful.

Aligning Position of Container:

Aligning/Positioning of Container to Left

When working, you work from the left so when your positioning the container, you need to align it so there is no unwanted margins. Underneath the background colour, type position and select fixed. Fixed position means that the Container will always stay in the same place. Then you enter your co-ordinates for the top and left hand side to '0' so there is no gaps. Save and refresh the Internet Browser to make sure this has worked.

Positioning/ Aligning Container Centrally

In order to Centre the Container, you move it 50% to the left so that the Container's left side is int he middle. From this, you then need to move the Container back half of its width. You do this by selecting the Margin-left option and entering the half-width as a minus number to go backwards. save and refresh the Internet Browser to make sure this has worked.

Adding a Navigation Bar:

Navigation along the Top

Like with the Container, you open a new Hashtag and type top to make a along the top navigation bar. You input the width of the container with the height that you want for the navigational bar in pixels. Alongside, set a background colour so you can differentiate between the 2. Save this and then add the Div ID into the Body section of HTML on a new line, making sure to open and close the Div ID, underneath the container so it the Software knows that it is within the parameters of the Container. Save and refresh the Internet Browser to make sure it has worked.

Adding a Logo:

Illustrator File for Web

When wanting to make a Logo for the Website, create a New File on Illustrator making sure the settings are for Web, such as an RGB Colour Mode and working in Pixels. Design your logo and when saving, select the option 'Saving For Web'. This gives you the opportunity to save the logo as a compressed image and therefore making the file size smaller and easier to run.

Saving Illustrator File for Web

When Saving for Web, use the column on the right-hand side and you need to select the option of the file being either a PNG or a JPEG- Make sure that the transparency box is ticked. select the save option at the bottom of the screen and save into the Images file of the Root Folder. Make sure to save it as one full word and with the file name at the end.

Adding Logo

Enter the logo into the CSS 'Style Sheet' using the dimensions you imputed into the Illustrator File in Pixels. For the position, select the Relative option as this allows it to determine where the logo would fit best alongside everything else. For it to appear quite central to the navigational bar, we used the Float option to make it appear like it is in the middle of the Navigational bar but chose the option of the left so that it has some orientation. To add the Logo, you then input the term "Background Image' which comes up with an option to browse your files for the image you want to use. save and add the Div ID for the Logo into the HTML after the Navigational Bar so the Software knows it is to be within the confines of the Bar. Close the Div ID, save and refresh the Internet Browser to make sure it has worked.

Creating a Roll Over Button:

Use the same settings as for the Logo when creating a new Illustrator File for Web. To produce a roll-over button, make the first visual for the button and then on a new layer, make a visual change to the first image. This allows the user to see that it has been effectively selected. This is going to be inputted into the CSS 'Style Sheet' so that the button can be made only once but inputted several times, in our case, 4 times.

Save both Images separately with the Save for Web option and then save them as same files you used for the Logo, naming them button1 and button2 within the Image file of the Root Folder.

Same as for the other aesthetic additions, open a new Hashtag option within the CSS 'Style Sheet' and select button, putting in the width of the site divided by 5 to fit all of the neccessary buttons but the chosen height of the Illustrator file. The pixel amount must divide equally as you can never work with half a pixel. Select a Relative Position so it goes along with any other additions, such as alongside the Logo as it is to float to the left also. Save and return to the HTML File where you put it within the confines of the navigation Bar so the Software knows it is to be within it. We decided to indent all of the Div ID's at this point so it makes it easier and clearer to see where each one opens and closes.

Creating a Roll-Over Button

For this to be successful, we need to input some JAVA Script Coding but this would be quite complicated to do by hand. We can do this by opening a new line of code after making an open and close for the Button and go to Insert- Image Objects and Roll Over Image. This comes up with options to include 2 images in one together so that one image changes to the other. You can name the image but also give it some Alternate Text which allows for the image to be readable and accessible to any user, including Blind users. After approving these options, the amount of Script goes from a small simple amount to a large amount. Save this and then refresh the Internet Browser to make sure it has been successful.