Navigation
Links offer a way to navigate around the website more easier. The links enable you to move to webpage to webpage more quicker and efficiently. The format of a link can come in many shapes and sizes, text or image. A link is to make the website more interactive for users. Links can also be used to enlarge an image e.g. when a user clicks on a small thumbnail, the thumbnail enlarges to its full size. This was all made possible by Web 2.0.
Metatagging
Metatags are embedded within the HTML code and are used for search engine visibility. When a user types in search criteria, the keywords that are stored in a large database are shown as a link to the website that has the metatagging for specific tags but only a search engine can display these links. Search engines, like Google, use 'spiders' to read the metatags that websites have embedded in their HTML coding.
An example of a metatag:
<Head>
Meta name = <"description" content = "Computer_Hardware_&_Components">
Meta name = <"keywords" content = "Computer, RAM, Disk, Components.......etc....">
An example of a metatag:
<Head>
Meta name = <"description" content = "Computer_Hardware_&_Components">
Meta name = <"keywords" content = "Computer, RAM, Disk, Components.......etc....">
CSS
CSS is used when constructing and shaping websites. CSS organises custom fonts, colours and orientation of any text boxes and headers and applies them to multiple pages.
The example above is part of the CSS embedded on my website that I have created. The 'Globals Classes' text means that it applies for every page no matter if I make a new page with the same CSS code attached to it. E.g. 'background:#e1ece7;' this means that the background will always be that colour on every page that I edit.
The example above is part of the CSS embedded on my website that I have created. The 'Globals Classes' text means that it applies for every page no matter if I make a new page with the same CSS code attached to it. E.g. 'background:#e1ece7;' this means that the background will always be that colour on every page that I edit.
Audio/Visual Elements
I used Adobe Photoshop to edit photos
PowerpointI have used Microsoft Office Powerpoint to produce Wireframe and place my drawings and site structure diagrams so it will be easier to start developing my website. Everything i need is on one powerpoint presentation.
On the left are my wireframes. This was to help me with my drawings which will be shown next. This was the very basic planning to do before I started doing annotations or any sort of design. Here is my quick sketch or basic drawing of how my site would look like visually. I have annotated it to show what each function (Links, banners, text etc...) does. This helped me create my site on Dreamweaver as my annotations were quite detailed an specific to what i want the website to look like. |