This is our third and last web session. In this session, we will be completing our website so that we have a functional four page website with text and an image.
We started from where we left off; adding the buttons to the top of our website. We already had the home button there from the last session, although I had slightly changed the appearance of my home button so that it was more fitting with the logo. We added each button in the same way that we added the first, using the same '#button'. Once this had been done, it looked like this:
As these buttons are all rollover images, when the mouse cursor is over the button, its appearance changes so that it is obvious that it is a link. It looks like this when the cursor is over it:
In the highlighted section, where there is a '#', this means that this button link goes nowhere. When it is clicked, nothing will happen because it is not linked with any other pages. In order to link the button to a page, you need to replace this # with the name of another page. Because we have no other pages yet, we need to insert the page names here and then select 'Save As' and save it as another page.
As this is the homepage, and I am linking the 'Home Page' button with the home page, I need to replace the # with 'index.html', as seen below:
For the other three buttons, I selected 'Save As' and made up a new page; a Work page, an About page and a Contact page. Now all of the #'s have been replaced and saved as separate pages. This looks likes so:
We then changed the text from each page so that we could see if the links were all working. For each page, we just changed the text so that it said 'This is the...'.
We then decided that, as far as aesthetically, the text on these pages was awful. In order to make it more aesthetically pleasing, we were going to try adding padding around the text so that it wasn't flushed all the way to the left of the page. To do this, we had to go back into the stylesheet and insert a new section. This was called '#left' and referred to the left-hand column that we were about to make. We had to work out how wide and tall the column would be, considering how large our padding would be on each side. As a class, we agreed on a margin of 50pixels and so inserted all of the information that we needed. This was then repeated for the right hand column:
When we are inserting this information, we need to make sure that we are considering the margin, border and padding. We are inserting numbers that correlate to the dimensions of the actual content, and so the padding, border and margin all need to be subtracted from this number also.
We then had to link these columns in with our 'index.html', meaning that the columns would be applied to our homepage. This needs to be placed within the <body>, and it is much easier to work from the bottom. We placed the text within the left column which looks like this:
As you can see from the preview of my website above, the text is now aligned much better on the page and is no longer flush against the side of the blue box. For the right hand box, we wanted to fill it with text to see how it would look. Because we don't have any content right now, we are going to use 'lorem ipsum', which is placeholder text. This can be taken from the internet and is very useful to see if our columns are successful and effective.
We simply copy and paste the placeholder text into the <div id="right"> section, and then save and preview.
As you can see, the margins and columns have clearly worked very well and make the text look much more considered and organised. However, in the code we can clearly see that the text is in two paragraphs, yet on the website it has been put into one long paragraph. In order to insert a paragraph break, we need to enter <p> wherever we want the spacing to be. Like this:
We then copied the text across into the left column, after the text that is already there. We want to make the existing text the title of this page, and therefore we will need to add a line break. This can be done in the same way as the paragraph break, only this time we need to put <br>. It looks like this:
This is where the line break is inserted:
There are many ways that the text can be edited, these have then been explored further. Initially, we learnt how to change the font size. Inside the #body, along with the font choice, we can also change other aspects of the text. I changed the size of the text first, so that it looked like this:
I then also changed the colour of the text, which is another simple adjustment. I made my text white, so it looked like this:
You can also add headers within the text, which allow you to make selected parts of the text different from the rest. This is done by simply adding another section after the #body, named h1. This does not need a # and thus looks like this:
In order to apply this to certain parts of your text, you simply go back onto the index.html document and insert <h1> before, and </h1> after the part you want to apply your new appearance to. When done so, it looks like this:
You can create multiple headers, each applied to various parts of the text. I experimented with this, and added another header to a different section of the text. This is how it looked:
However, we are now going to look into how we insert images into our web documents meaning this text will be deleted. Initially, we had to quickly gather an image that we wanted to use. I chose this as it is the sort of thing I will actually be using within my final website.
You then open the document within Photoshop, editing the image size so that it fits within your column. You also need to make sure that it is set to be 72dpi, which is the correct setting used for web. Once it is the correct size, you then select 'Save For Web'.
In this window, you need to adjust the quality of the image so that it is as small as it will go before it starts to lose quality. In this case, I could get the quality down to 52 before it started to become pixelated. You then save the image within the image folder, inside the root folder. When back in Dreamweaver, you simply go to insert, then 'Image' and choose the image you want.
As we wanted this image to go inside the right column, it needs to be inside the <div id="right"> section. When saved and previewed, it looks like this:
I played around slightly with the appearance of the image, as well as the title of the text, so that it looks like this:
I also wanted to see if I could insert a gif onto my website. As I have recently experimented with making my own gif, I moved it into the root folders images and inserted it the same way I did the other image. Although it did work, it isn't the correct size to completely fill the column, and so looks like this:
In order to insert videos or audio, we need to use Vimeo and Soundcloud. These websites allow us to easily alter the settings of the files and the way they will be seen on my website before I copy the coding. Because these files are embedded within my website, it uses their bandwidth and data instead of using up any space on my site. The files are also streamed directly from Vimeo and Soundcloud, meaning that the viewer won't have to wait for the file to load.
Simon also informed us of a software called 'Lightbox'. This website allows you to create an image reel that when an image is clicked on, a larger version of it appears. This is something that will be very useful when creating my final website and is definitely something I will download and experiment with.
No comments:
Post a Comment