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.
Subscribe to:
Comments (Atom)