My reflection unfortunately is still the same as in my previous assignment.
I struggle with this class. The thing I find difficult is to remember each piece of code, for now I am constantly looking back on paperwork to find a particular piece.
I also am constantly searching google for tutorials and pieces of code to copy. I still have unsure thoughts about this as I feel I can create a whole website in code by just copy and pasting code from someone else.
Its very difficult to work out some objectives I would like to complete, I also still have trouble deciding on where to place div's that when I place them within my code it moves everything else around in places that I dont want.
I do understand the concept of coding, and think I would be fine with simple coding with a little more practice, but I really don't see myself going anywhere with it. For me personally I would have no trouble designing a website, but I would probably just pay someone to code it.
Monday, 17 November 2014
Gallery
The last thing needed for my web site was a gallery.
I did research this but found it quite beyond my skill level. For now I photo shopped some images and placed them within the site. For now the gallery is not interactive.
This is an example of some code for a gallery.
I did research this but found it quite beyond my skill level. For now I photo shopped some images and placed them within the site. For now the gallery is not interactive.
This is an example of some code for a gallery.
<html>
<head>
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
<head>
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
Also a video from youtube.
Content
I now needed to insert all content.
This was basically copy and paste as all the information was supplied for us to add.
I still dont understand the process of formatting your text to the way you want it, this I will have to study more on this topic.
I created a div to place all the copied text within, but to manipulate the format was still an issue.
This was basically copy and paste as all the information was supplied for us to add.
I still dont understand the process of formatting your text to the way you want it, this I will have to study more on this topic.
I created a div to place all the copied text within, but to manipulate the format was still an issue.
Css style sheets.
I then completed the same steps that I did with my html with my css style sheets.
I needed to create a style sheet for each page so I could manipulate individual bits of html if needed.
The difference I had to do was to link my stlye sheet with the page it was going to manipulate.
To do this I had to change this particular code on each html page.
<link href="css1.css"rel="stylesheet"type="text/css">
<link href="styles/contacts"rel="stylesheet"type="text/css">
<link href="styles/gallery"rel="stylesheet"type="text/css">
and so forth...
I needed to create a style sheet for each page so I could manipulate individual bits of html if needed.
The difference I had to do was to link my stlye sheet with the page it was going to manipulate.
To do this I had to change this particular code on each html page.
<link href="css1.css"rel="stylesheet"type="text/css">
<link href="styles/contacts"rel="stylesheet"type="text/css">
<link href="styles/gallery"rel="stylesheet"type="text/css">
and so forth...
Next step
My next step was to create all my pages that my list tabs would be linked too.
I did this by the following steps.
1. First created a new html document.
2. I then gave the document a file name. The name would be what I text in my html code enaballing my to link each page together.
3. Once this was done I copy and pasted all my html from my homepage as I wanted to keep my page exactly the same on all linked pages. I did however remove the coding for the slide show as this was feature was only going to stay on my homepage.
4. I now needed to link each page with each other by placing the page file names within my list tab links.
Now these steps were taken I can now click on each tab from each tab.
I did this by the following steps.
1. First created a new html document.
2. I then gave the document a file name. The name would be what I text in my html code enaballing my to link each page together.
4. I now needed to link each page with each other by placing the page file names within my list tab links.
Now these steps were taken I can now click on each tab from each tab.
Completed homepage
I completed my homepage by adding in a small intro that welcomed students to the art department of Witt.
My homepage consisted of a few Witt logos, a welcoming, and a image slide. I also decided to black out the background of the page with a div that surrounded the html code.
My homepage consisted of a few Witt logos, a welcoming, and a image slide. I also decided to black out the background of the page with a div that surrounded the html code.
Tabs
I needed to create my tabs that are linked towards my other pages. I had to google this and I found a simple tutorial that gave me instructions to do this.
The code I used in my html is as follows.
<div id="menulist">
<ul>
<li><a href="index1.html"> Home</a> </li>
<li><a href="Contacts.html"> Contacts</a> </li>
<li><a href="whatIf.html"> What If?</a> </li>
<li><a href="Gallery.html"> Gallery</a> </li>
<li><a href="Courses.html"> Courses</a> </li>
</ul>
</div>
This created a list of links or though these links weren't true as I still had not created my extra pages, but for now this gave me an idea of where the links would go after mouse clicking on them.
The css code for this is as follows.
#menulist li {
display: inline;
text-align: center;
height:80px;
width:80px;
background-color:#36ADD8;
margin: 30px 30px 30px 30px;
padding-left:35px;
padding-right:35px;
box-shadow:10px 10px 5px #000000
}
#menulist ul li a { text-decoration: none;
color:#FFFFFF;
background-color:#36ADD8;
text-align: center;
}
This css code created a small blue box around each list name, I also added the the effect of a shadow box which gives each of those tabs a hovering look.
The code I used in my html is as follows.
<div id="menulist">
<ul>
<li><a href="index1.html"> Home</a> </li>
<li><a href="Contacts.html"> Contacts</a> </li>
<li><a href="whatIf.html"> What If?</a> </li>
<li><a href="Gallery.html"> Gallery</a> </li>
<li><a href="Courses.html"> Courses</a> </li>
</ul>
</div>
This created a list of links or though these links weren't true as I still had not created my extra pages, but for now this gave me an idea of where the links would go after mouse clicking on them.
The css code for this is as follows.
#menulist li {
display: inline;
text-align: center;
height:80px;
width:80px;
background-color:#36ADD8;
margin: 30px 30px 30px 30px;
padding-left:35px;
padding-right:35px;
box-shadow:10px 10px 5px #000000
}
#menulist ul li a { text-decoration: none;
color:#FFFFFF;
background-color:#36ADD8;
text-align: center;
}
This css code created a small blue box around each list name, I also added the the effect of a shadow box which gives each of those tabs a hovering look.
Image slide
I now had my basic layout of my homepage created with a few Witt logos and Div's.
I knew from the start I wanted some type of feature on my main page...sure I wanted it simple but there had to be something other than a few tabs and information.
In my design for the site, there is the feature of a image slide that I wanted to automatically scroll through a couple of images. I thought it would be effective and wanted to show some photos without cramming the home page of images.
Here is the Html for the image slider within a div.
<div id="para">
<div id="slidecontainer">
<div id="slide">
<img src="../newsimage.jpg" width="830" height="480">
<img src="../students_working_together_v3.jpg" width="830" height="480">
<img src="../students-safety.jpg" width="830" height="480">
<img src="../students-working-with-teacher.jpg" width="830" height="480">
<img src="../newsimage - Copy.jpg" width="830" height="480">
</div>
I now needed to munipulate the css of the slide. This is where it become a little tricky and I was to separate each image into a percentage while adjusting how many pixels the image would move at each percentage point.
This is the css code for what I did.
#slidecontainer {
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
width: 830px;
height: 480px;
overflow:hidden;
}
#slide {
background-color:#0E69C9;
width: 3320px;
height: 480px;
position: relative;
-moz-animation-name: slidershow;
-moz-animation-duration: 20s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
}
@-moz-keyframes slidershow {
0% {right:0px;}
20% {right:0px;}
25% { right:830px;}
45% {right: 830px;}
50%{right: 1660px;}
70%{right: 1660px;}
75%{right: 2490px;}
95%{right: 2490px;}
100%{right:0px;}
}
This did work out quite well, and wasnt too difficult to achieve, I did however have issues looping the images in a circle, instead they move from the start to the end, and then slide back to the start passing through all the image that have already moved through the slide.
I knew from the start I wanted some type of feature on my main page...sure I wanted it simple but there had to be something other than a few tabs and information.
In my design for the site, there is the feature of a image slide that I wanted to automatically scroll through a couple of images. I thought it would be effective and wanted to show some photos without cramming the home page of images.
Here is the Html for the image slider within a div.
<div id="para">
<div id="slidecontainer">
<div id="slide">
<img src="../newsimage.jpg" width="830" height="480">
<img src="../students_working_together_v3.jpg" width="830" height="480">
<img src="../students-safety.jpg" width="830" height="480">
<img src="../students-working-with-teacher.jpg" width="830" height="480">
<img src="../newsimage - Copy.jpg" width="830" height="480">
</div>
I now needed to munipulate the css of the slide. This is where it become a little tricky and I was to separate each image into a percentage while adjusting how many pixels the image would move at each percentage point.
This is the css code for what I did.
#slidecontainer {
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
width: 830px;
height: 480px;
overflow:hidden;
}
#slide {
background-color:#0E69C9;
width: 3320px;
height: 480px;
position: relative;
-moz-animation-name: slidershow;
-moz-animation-duration: 20s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
}
@-moz-keyframes slidershow {
0% {right:0px;}
20% {right:0px;}
25% { right:830px;}
45% {right: 830px;}
50%{right: 1660px;}
70%{right: 1660px;}
75%{right: 2490px;}
95%{right: 2490px;}
100%{right:0px;}
}
This did work out quite well, and wasnt too difficult to achieve, I did however have issues looping the images in a circle, instead they move from the start to the end, and then slide back to the start passing through all the image that have already moved through the slide.
Linking html, to css
I first set the pages up with <div>'s. This allowed me to layout my page, and easily insert images were needed. This was fine and I proceeded by creating a CSS style sheet for my home page to munipulate my divs and everything else that was going to be placed within my html.
I needed to link my html with my css. I do however always forget this code. Fortunately I found the code I needed and placed it within my html.
<link href="css1.css"rel="stylesheet"type="text/css">
I needed to link my html with my css. I do however always forget this code. Fortunately I found the code I needed and placed it within my html.
<link href="css1.css"rel="stylesheet"type="text/css">
Design
I want to keep with the colour scheme of Witt, allowing for the page to be recognizable in an instant.
As I said earlier I wanted my site to be simple, keeping away from too many distractions on the page, so a user can easily guide themselves around without getting lost.
For me there was nothing more simple than a page with a few tabs that lead you directly to the information you were after and back to the home page again.
Sunday, 16 November 2014
New assignment
For our new assignment, we basically had to create a student handbook detailing the art department and do it in a web base form.
I knew straight away I had to keep this as simple as possible, as I really struggled with this class in last semester, and I needed to keep my coding simple so I wouldn't confuse myself anywhere along the way.
I first started by making a simple design for my page. There was not much skill involved as I have already mentioned simple was going to be the key for my project this semester.
I knew straight away I had to keep this as simple as possible, as I really struggled with this class in last semester, and I needed to keep my coding simple so I wouldn't confuse myself anywhere along the way.
I first started by making a simple design for my page. There was not much skill involved as I have already mentioned simple was going to be the key for my project this semester.
Subscribe to:
Comments (Atom)