Diary Entry No: 7 (Original Date 7th May, 2011)
This week I completed my "Homes 4 Hounds" website, after finishing the final task in the production process of my project, which was adding the hyperlinks to my website.
I did this by once again using Adobe Dreamweaver. The first links which I had to make were the internal links in the site. These are the hyperlinks which connect each web page together, forming a website. I did this by creating what is known as a "Hot-Spot" over each of the images I was using for my navigation, which I could then assign a different web page for the link to lead the user to. I also inserted internal links within the text in certain articles. I did this by highlight the text I wanted to make in to a hyperlink and then clicking the "Add Hyperlink" button in Dreamweaver, allowing me to choose the destination page of the link.
The next hyperlinks which I would make on my page were the external hyperlinks, which allows the user to visit other websites suggested on my "Homes 4 Hounds" site. Similarly to the internal links I created with text earlier, I simply highlighted the text I wanted to link to an external site, clicked "Add Hyperlink" and entered the URL of the appropriate website. Once I had finished adding all of my links to each page, my website was finally complete!
In conclusion, I am pleased with the final website which I have produced, as I had little knowledge of web-page design prior to the start of this project, and had high expectations that I would struggle during the implementation process. However, in the time that it has taken me to create the site, I have begun to familiarise myself with website-design. On the other hand, in hindsight, more time could have been saved during the creation of my website if I had familiarised myself with the process beforehand.
Sunday, 22 May 2011
Adding the Text and Video to My Site
Diary Entry No: 6 (Original Date 17th April, 2011)
This week, I used Adobe Dreamweaver to insert text to my website and also to add a video to the "Home" page of the website.
I began by copying the text I had already written to be used on my articles from Microsoft Word and pasting them into "Div" boxes on each of my web pages in the position and size I required. From here, I could format the text to the appropriate size, font and layout for my articles by using the CSS function available in Dreamweaver. CSS code is a more efficient way than HTML code to edit and present web pages online, as it "conserves user bandwidth, thus speeding page load times, especially over dial-up; reduces owner server and bandwidth overhead, saving money; reduces design and development time," (Zeldman, J. (2006, 220).
Once I had finished formatting all of the text on each web page, I could add any additional media to the content in Dreamweaver. I chose to add a video to my home page, relating to the site (RSPCA television commercial) which I added by inserting the following embedding code in appropriate section of my HTML code for my "Home" page:
This week, I used Adobe Dreamweaver to insert text to my website and also to add a video to the "Home" page of the website.
I began by copying the text I had already written to be used on my articles from Microsoft Word and pasting them into "Div" boxes on each of my web pages in the position and size I required. From here, I could format the text to the appropriate size, font and layout for my articles by using the CSS function available in Dreamweaver. CSS code is a more efficient way than HTML code to edit and present web pages online, as it "conserves user bandwidth, thus speeding page load times, especially over dial-up; reduces owner server and bandwidth overhead, saving money; reduces design and development time," (Zeldman, J. (2006, 220).
Once I had finished formatting all of the text on each web page, I could add any additional media to the content in Dreamweaver. I chose to add a video to my home page, relating to the site (RSPCA television commercial) which I added by inserting the following embedding code in appropriate section of my HTML code for my "Home" page:
<iframe width="560" height="349" src="http://www.youtube.com/embed/dsnOxmp7zbM" frameborder="0" allowfullscreen></iframe>
Next week, I will begin the final part of the production process for my website: creating the links between each page.
Creating my Local Site in Adobe Dreamweaver
Diary Entry No: 5 (Original Date 4th April, 2011)
Today, I imported all of my images in to Adobe Dreamweaver which I would use as backgrounds for each page of the "Homes 4 Hounds" website. I did this by changing the background using the "Page Properties" tab on the bottom toolbar in Dreamweaver.
Before I could start adding content, I named and saved each of the pages as a HTML page in a local folder, so that I could create a local site in Dreamweaver, making it easier to access the files I need for my website when creating each page. As I saved each document, they were each created as HTML pages; " Hypertext Mark-Up Language (HTML) is a universal and networked application of hyperlinking. HTML is now the simplest way of adding human-readable data onto the web, which was developed to allow unidirectional links to be made between documents" (Dewdney, A. Ride, A (2006, P.208). This meant that even though they were unfinished, each of the documents I had created had now become functioning web-pages.
However, I still needed to add media to the pages, such as text and links in order to combine all of these pages to create a website.
Today, I imported all of my images in to Adobe Dreamweaver which I would use as backgrounds for each page of the "Homes 4 Hounds" website. I did this by changing the background using the "Page Properties" tab on the bottom toolbar in Dreamweaver.
Before I could start adding content, I named and saved each of the pages as a HTML page in a local folder, so that I could create a local site in Dreamweaver, making it easier to access the files I need for my website when creating each page. As I saved each document, they were each created as HTML pages; " Hypertext Mark-Up Language (HTML) is a universal and networked application of hyperlinking. HTML is now the simplest way of adding human-readable data onto the web, which was developed to allow unidirectional links to be made between documents" (Dewdney, A. Ride, A (2006, P.208). This meant that even though they were unfinished, each of the documents I had created had now become functioning web-pages.
However, I still needed to add media to the pages, such as text and links in order to combine all of these pages to create a website.
Creating the Background for my Website
Diary Entry No: 4 (Original Date 22nd March, 2011)
I hit a major speed-bump in my production process in the past fortnight, as it has occurred to me that my lack of knowledge in using Adobe Dreamweaver will vastly damage the time the creation of my website will take. However, I have begun to resolve this situation in two ways: the first of which being that I have found online video tutorials to help me better understand how to use Dreamweaver and its functions, on the Adobe.TV website.
The second solution I have found, which should help me get back on track with my production and speed up the process overall, is to create the backgrounds for each of my pages using Adobe InDesign (which I am a lot more familiar with and confident at using). I can still use this in my web page as I can export the InDesign document as a PDF to Photoshop, and then save it as an image file which can be used as the background image when creating my page in Dreamweaver.
After importing all of my images from Photoshop to InDesign, here is this background image for the home page which I have created:
The next step in my production process is to import these images into Dreamweaver to be used as backgrounds on each web page.
Creating the Images for My Website
Diary Entry No: 3 (Original Date 7th March, 2011)
This week I have began to create the images to use on my website using Adobe Photoshop and Adobe Illustrator. Thanks to my previous knowledge of using Photoshop during University, I was still familiar with the program, and found little difficulty when creating my images.I began by creating a variety of identical background images (each of a different colour, yet each using the same colour scheme) in Photoshop, by duplicating an image of a paw I made using the 'ellipse' tool on MS Paint (shown below).
This week I have began to create the images to use on my website using Adobe Photoshop and Adobe Illustrator. Thanks to my previous knowledge of using Photoshop during University, I was still familiar with the program, and found little difficulty when creating my images.I began by creating a variety of identical background images (each of a different colour, yet each using the same colour scheme) in Photoshop, by duplicating an image of a paw I made using the 'ellipse' tool on MS Paint (shown below).
I then created the backgrounds for each of my pages by duplicating the images I had created in order to form a pattern. I then used Adobe Illustrator to create a 'clipping mask' around the text I would use in my header, logo and links, which caused the paw-print pattern I had created to appear inside the text. I then used Photoshop again to apply the text and backgrounds to my images so that they could be used on my web page, such as this final image which was used as a link on the "Homes 4 Hounds" website:
Now that I have created all of the images to be used in my website I can begin to start building my website.
Drawing My Drafts
Diary Entry No: 2 (Original Date 25th February, 2011)
This week I have created all of the hand-drawn plans of the layouts of each of the different pages in the Homes for Hounds website. I began by quickly sketching a few rough templates, and when I had decided on one which I felt would suit my needs, I drew a quick rough first draft of each different page ("Home" page rough draft is shown in the right image below). Then, once I had roughly laid out each page, I accurately and neatly drew a draft of my design with the dimensions scaled half the size of what I intend my website to be ("Home" page second draft is shown in the left image below).
This week I have created all of the hand-drawn plans of the layouts of each of the different pages in the Homes for Hounds website. I began by quickly sketching a few rough templates, and when I had decided on one which I felt would suit my needs, I drew a quick rough first draft of each different page ("Home" page rough draft is shown in the right image below). Then, once I had roughly laid out each page, I accurately and neatly drew a draft of my design with the dimensions scaled half the size of what I intend my website to be ("Home" page second draft is shown in the left image below).
When designing my website I had to consider many different factors in order to maintain a high standard throughout the entire site; "Good design makes it easy to find the most important information and controls by drawing attention to them and by downplaying less important items" (Goodwin, Kim, (2009, p.576). Examples of these decisions which I made when designing my site are the emphasis on the word "Hounds" in the page title to instantly inform the user that the theme of the site is dogs; or the presentation of the layout which has been positioned to lead the user's eye across and down the page.
The next step which I will take in my project will be to begin to create the images to be used in my website using Adobe Photoshop.
Planning and Writing Articles & Content
I have decided to keep my blog as a personal diary, which I will write by hand, and then upload onto E-Blogger at a later time.
Diary Entry No: 1 (Original Date 14th February 2011)
Original Entry:
Diary Entry No: 1 (Original Date 14th February 2011)
Original Entry:
Today, I began to plan and research for my website. After creating a variety of brainstorms (shown above) to plan the content of my site, I began to write the articles to use in my "Homes 4 Hounds" website using Microsoft Word.
After planning my articles, I have decided to base the content of my 'Home' page around introducing the user to the company and it's aims, and also as a guide to familiarising the user with the website. I have also chosen to base the content of the 'Caring for Dogs' page based around guiding users on how to make their homes safe environments for dogs, and also as a source of links to related sites.
Also, I have themed the 'Contact Us' page around informing users on how to apply for dog adoption, how to contact Homes 4 Hounds, and also the facilities at the Homes 4 Hounds base.
I have also written to introductory articles to be used on the 'Gallery' and 'Our Dogs' page as guides to use the pages.
The next steps I will take will be to begin to design the layout of my 'Homes 4 Hounds' website.
Subscribe to:
Posts (Atom)