Changing the background colour of the web page

Although I didn’t use this feature I learned how to complete it. You have to find out what the object is called in code, then down the right hand side of Dreamweaver there is a section for CSS, find the object in here, double click on it and it brings up the properties, I simply changed the colour of the object here. This was a very simple process and was quick to change.

Giving new layers appropriate names

I learned this skill when I came to the code section of the design process. I learned that every layer needs a name, or otherwise known as 'DIV ID' This is essential because when you want to change the style of something you need to know the name of it so you can refer to it in the code section. As I was producing three web pages Artist1, Artist 2 and a feedback page it was essentail that each layer had an individual code so no confusion would happen. There are a lot of different components on a web page such as images, text, videos, headings and slide shows. Each component needs its own layer so it can be altered and moved aorund the web page.

Researching an artist biography

I acquired this new skill by the planning process of my project. Before I was t design my web page I needed to find out bacjground information on the certain artsits I was going to talk about. I needed very particular details such as:

• Full name
• Where they grew up
• Who influenced them
• Age
• Recent/old art work
• Achievements

I obviously needed some substance to my artist pages, so I decided to research my artists biography and include the information on the page. I did this by using common information websites such as Wikipedia, Yahoo and Google.

Inserting a search bar onto the web page

The search bar was a good multimedia peice in addition to the slideshow and the video's I have imported on my web page. This lesson I learned how to do this and therefore, I acquired a new skill. The search bar allows the user to be able to do a quick search of the entire website and find what they are looking for. The user is able to type in key words such as "Joel Gailer" and his artist profile would be a result.
   I acquired this skill by using an original template from a website called webtemplates.org. I browsed through a number of different website templates before finding the one that I wanted to use. The website gave me the code for the whole website, but all I wanted was the scode for the search bar. I looked through the code for this particular template and eventually found the section of code for the search bar. I then saved this code onto my hard-drive and used it in Adobe Dreamweaver. I pasted it into my code for my web pages and adjusted the properties such as colour, width height and margin size.

Importing my own titles into Adobe Dreamweaver

It was important that I included titles on the web page so the user knew what the page was about, this lesson I learned how to do this without having to use just Adobe Dreamweaver

   I created 1 graphic to use on my web page, this was the ‘Joel Gailer – Printmaking Artist’ title at the top of the page. I felt this title was essential because it gives the web page a summary of what it is about. All the user has to do is read the title and they instantly know what to expect if they choose to read on further. I created this particular graphic in a program called Microsoft Fireworks. This is basically and application where you can create titles and images in all different fonts, sizes and colours and then use them in documents such as a website. The title was fairly easy to create because I have previous experience in using Adobe Fireworks. Once I had created the title I saved it in my student drive. Then when I wanted to put it onto my web page I knew where to locate it and import it into my library. For the title, I drew a new layer and dragged the file onto the layer. I could then resize and move the image around to where I wanted it – this is my modification to the graphic.

Importing a feedback form for the feedback page

This lesson I learned how to create and import a feedback form for the website page 'your feedback'.
Firstly I imported a feedback for the users to fill out after they had finished viewing the web page. The feedback form consisted of about seven questions relating to the website. The questions were fairly open, for example “did you find the website user friendly?” users had the opportunity to write their answers in the text space provided.
   I used a code from ‘bravenet.com’ which is a tool that people can use to import things on to their website, instead of creating it themselves. I used this website to get an appropriate feedback form for my web page. On bravenet.com, I was able to modify the feedback form, choose the questions, select font size colour etc. and select the appropriate form for the answers e.g. tick boxes, text space. After I modified the form, bravenet.com gave me the specific code that was particular to the form. I then imported this onto my web page, in Adobe Dreamweaver and the feedback worked properly when the page was loaded up. I made sure I used an ALT tag for the feedback page so people could tell what the feedback form was for, if they didn’t already know.

Importing a gallery of stills on to the web page

This lesson I leanred how to import a gallery of stills on to the web page. This was necessary becasue the web pages needed a bit more interactivity than just a video. The gallery of stills is a slideshow based application where you click the smaller images along the bottom row and as you click each one, a larger version of that image appears above. I created this in Adobe Flash Professional where I had created a front end for a DVD before. Therefore, I was very familair with this and I could produce this easily. The slideshow was based around the art works that the particualr artist I was talking about, produced. This was a good way to show the user a taster of their work with out them having to click through the work samples on the web page.

Importing a video on to the web page

This lesson I learned how to import a video on to my web page. I decided to put a video on my web page becasue I thought it would be appropriate to give the users a better understanding about types of art such as printmaking. The video was fairly easy to import and it made the web pages look more professional.
   To import the video I used 'saveyoutube.com' This is a website which allows you to save a video as an FLV file onto your hard drive. Then you could use it on my website. To do this I had to select a video from youtube that I felt was appropriate. Then I pasted the URL into the converting bar on 'saveyoutube.com' The website then converted the format of the video to an FLV file and I then downloaded it onto my hard drive. One I had done this I opened up Adobe Dreamweaver and imported the video into the library. I then drew a new layer for the video and dragged it onto the web page. I then moved the layer around to get the positioning of the video right.
   'saveyoutube.com' was a very easy website to use and was user-freindly. This was good becasue it sped up the design process. From 'saveyoutube.com' I was able to choose different skins for the video, whereby the scroll bar along the bottom of the video had different styles.

Using CSS

In this lesson I learned the basic features of CSS (Cascading style sheets). CSS styles are basically essential for the website to work and load up correctly on Internet explorer. I was to ensure that I saved each change each and every time I made one. CSS means that the project will not be easily modifiable if these are absent. I learned that I needed to make sure each  part of the website on a different CSS layers to make sure the CSS styles loaded up.
   The cascasing style sheets have a lot of different styles that you can alter. For example I altered my naviagtion bar at the top of my web page quite frequently. I changed the colour, text font and border thickness quite a lot. This could only be done by using CSS. To do this I had to find the DIV tag (a name for each component on the web page) for the navigation bar and then try and find it in the CSS styles column down the right hand side of Dreamweaver. Double - clicking on the name of the navigation bar would bring up a small box with the properties that it held. This had things like width, colour, background colour and so on. Playing around with these enabled me to change the look of the navigation bar on each web page.

Playing around with Dreamweaver

It was important that I was familiar with the software we were going to be using before designing the website and putting it into production. Before jumping straight into designing the website we were advised by our teacher to play around with the software and get used to the ‘code,split,design’ features. When a code starts with <html> it means it is a website and  <h/tml> closes the code. The main features that I got used to first of all was the code/split/design feature of Adobe Dreamweaver.
   The split feature shows you a split version of your publication. The top half shows you the code section of your website and the bottom half shows you what your design actually looks like. This is a really good feature when creating the website because you can see what item on the website refers to in code terms.
   The design feature of Adobe Dreamweaver shows you purely the design of your website, this is a much larger screen than the split feature and you can clearly see what your website looks like and it gives you more room to enlarge, resize and change around the component of your web page.
   The code section of Adobe Dreamweaver is a preview of purely the code of the webpage and you are unable to see your website design. This is useful when inserting new codes to the webpage becasue you need to see all of the code that your web page consists of. It also makes it easier to scroll through.
   A final feature of Adobe Dreamweaver that I played around with was the previewing of the web pages. There is a little icon on the toolbar of Dreamweaver which looks like a globe. A drop-down menu appears and if you click 'Preview in I-Explore' a preview of your web page will pop up in an Internet Explorer format. This is useful because when designing my web page the layout of the page lookes really messy and did not line up. However, when I previewed the page I was able to see what it really looked like in Internet Explorer. I could then go back and move around anything that was out of place or did not line up properly.
 

Solving problems when creating my Gantt chart

It was important that when I created my Gantt chart the period of time for each individual task was appropriate and realistic at the same time. When I was creating my Gantt chart the dates kept changing and making my project duration a lot longer that what it was realistically. In order to fix this I used mainly my own initiative to work out how to change this. I also asked my subject teacher to help me correct and make the changes that I needed to make. All i had to do was click the tab at the top of the column which I wanted to change, then highlight the particular task I wanted to alter. Once this was highlighted, all I had to do was change the figures in the 'end date' column. I did also use the Internet for assisstance with this.

Splitting cells in an inserted table

This was a piece of homework for my course. In order to show what types of pages I needed for my website I needed to present them as a spreadsheet diagram. I did not know how to split the cells up so they are larger in an individual column. I researched and found the answer. The website I used to help me do this is below:

www.office.microsoft.com/excelhelp/mergeorsplitcells

This website was a help page from the Microsoft Excel website. There was some useful tips that showed me how to split the cells up into individual columns.

Creating website structure diagrams

This lesson I learned how to create website structure diagrams for my website. The diagrams were like a tree diagram which showed the main page such as the 'homepage' and all the other pages which filtered off from this like 'artist 1' and 'feedback' for example. I had to create a structure diagram for my website so the group knew what pages the website should include. We used Microsoft Visio for this because it was well structured. Visio was a good program to use for creating website structure diagrams becasue it was easy to create text boxes and join them up with lines. The print out of the website structure diagrams looked very professional and these are filed in my portfolio.

Creating a Gantt chart

I acquired this skill after I produced my mind maps. After everything that needed to be covered was draw out I could then put it into a Gantt chart. By doing this I was able to view my tasks in chronological order, how long they will take me and putting in the predecessors. This made my tasks easy to digest and easily viewable. The Gantt chart had a number of different columns to it. These included:

• Task description
• Date started
• Date finished
• Number of days to complete
• Task number

Creating mind maps

In this lesson I acquired a new skill in terms of planning. This was the development of mind maps, a sort of brainstorming idea. Each mind map was relevant to what I had to do to complete the tasks that were set. Overall, i created three mind maps, these were planning, testing and research.
   The planning mind map consisted of things like:

• design sketches
• gantt chart
• pertt chart

The testing mind map consisted of things like:

• Tesing the speed of the website
• Testing ALT tags
• Testing videos
• Testing slides
• Testing hyperlinks

The research mind map consisted of things like:

• Researching agenda and minutes
• Research commercial websites
• Research pert chart

These mind maps were a key feature to the planning of the website production. This is becasue it acted as a sort of check list that I could tick off once each task was completed and it gave me structure to my work. Furthermore, these mind maps helped me create my Gantt chart.

Sketching out possible ideas

This was a new skill I learned associated with the planning for my website design. A rough sketch would help me when coming to design my pages. This is because it gives you a rough guideline as to what I should be aiming for. For example, my sketches consisted of the main srtucture of the website pages, the layout, colour schemes and the appropriate text. So when it came to actually creating my website, all I had to do was follow the guidelines that the sketch gave me. It was important that i produces two sets of sketches for each page I was going to create. I divided them up into desgin A and design B. For each of the pages I was allocated by my group, had two sketch ideas. This was so I could choose which sketch would be the best to go with and produce. This was a good and effective way of planning out my design process and gave me more ideas, as opposed to just producing one sketch per page.
   However, my final website pages did not alway match up completely to my primary sketch ideas. Along the way there were some design issues, so I had to alter how the pages looked becasue what I had planned was not feesable. The main problems that occured were:

• Layout issues not lining up with the text
• Certain interactive features such as puzzles
• Headings
• Button types

Being a chair person

In this lesson I learned how to be a chair person of the group and take this role into the group meetings. During the meetings being held each week in the lesson, each team member has to take it in turns to be a chairperson, the role of the chairperson is to ensure all group members are complying to the meeting and what is said in the meeting relates to the agenda and purpose of it. The chairperson is the group member who ensures everyone in the group is doing the tasks they should be doing. They are basically a supervisor of the group and ensures the group meeting goes to plan.

Being a minutes secretary

In this lesson I learned how to be a minutes secretary. A minutes secretary is an important part of the group and plays a vital role in the team meetings because the minutes secretary creates the agenda before the meeting and types up the minutes of the meeting after the meeting has been held. This is a vital role becasuse the minutes secretary basically documents everything that has been discussed in the meeting. It is the minutes secretary's job to print out four copies of this and hand it to every member of the group. These minutes are then filed into each members portfolio.