Feeds:
Posts
Comments

Archive for the ‘Project 4 – Website Production’ Category

Designing the site

The designs for my beachcombing website were created in Photoshop. The elements were then separated and saved in the appropriate format for the web, either as jpgs or pngs depending on whether transparency was required. These separate elements were then ready to be brought into Dreamweaver. After a class tutorial on creating web pages from scratch rather than using a template, I decided to use this option as it seemed easier and more flexible.

Page structure

I produced the layout of the web pages by creating boxes using the AP divs which produced editable boxes that I could freely move around the page – apart from the body – all the elements were put within the ‘wrapper’ – which is the container for holding all the elements of the page you have created in place.

Background – body
With the background ‘body’ image – the file is quite large as I had to create a pattern that would seamlessly repeat – which I could only do by copying and flipping the image so that the blue would blend into each other. I have set this to repeat only on the y axis. – For future projects I need to consider how to reduce the file size to help with loading times.

Content container

This holds the image of the torn piece of notebook paper. It is set to repeat on the y axis. I had to create several versions of this to accommodate the differing page lengths. There is probably a cleaner and simpler way of doing this which I will explore next time. I would also make a smaller section of paper to copy and repeat to ensure smaller file sizes and therefore faster loading times.

Header and Side image

Two boxes were created to contain the header and side images of hand drawn shells (and headline text). These were imported as .pngs though they do not have transparent backgrounds. The header text could have been created using fontface, which is used for the subheadings in the rest of the site.

The main nav bar is an extra container with linked text to the other pages.

I also created hotspots for the individual shell images on the side box (but not in the header).

Bodytext container

The container that holders the bulk of the text for the site – it is also used for holding images, tables (for image gallery) and form information across the various of pages.

Imageboxes container

The container on the right hand side of the page that holds the secondary navigation bar. This contains links to information pertinent to each page.

Footer

Simple footer with simple hand drawn line illustration to divide from the rest of the page.

Call to action button – Contact us

At the top of the page I have included a contact us button. I tried to follow CSS3 instructions for creating rounded corners but failed – so I created a box in Photoshop and saved it as a png and imported it into a div tag that I had set up in the header. I made a link to my e-mail address, but had problems with obfiscating this. The appropriate code was then copied and pasted in the relevant place to make the button appear in the top right hand corner across all of the pages.

Other

The fonts used throughout were courier and Designer Face a downloaded font from Dafont. I chose these because they have an open airy feel to them. Designer Face has a hand drawn feel to it in keeping with the  overall notebook theme to the pages. I have tried to make the site as visually appealing as possible, with lots of photos of the relevant beach to draw the visitor in.

The links throughout were creating using instructions learnt in classroom sessions. The gallery page was created by using some javascript (slimbox) to create pop up boxes.

The links to sounds were created by assigning a behavior (open browser window – on click) to the relevant text – this gave me some control over when the sound could be heard without having to navigate to a completely separate page.

Favicon
I created a favicon with a pepple design in Illustrator in keeping with the beachcombing theme. I then used genfavicon.com to make it ready for the web. I followed the sites instructions and copied and pasted the relevant code that the site supplied into the head of the html code for every page. – Hopefully this has worked. At the moment I am unable to see this as I haven’t yet organised any web hosting.

Advertisements

Read Full Post »

I tried to create some webpages at home. I used the guidelines taught in the sessions at college. There were a few problems as I am using Dreamweaver 5 rather than 4 and the selected template worked in a slightly different way to the version used in college which gave me all kinds of headaches. However I managed to create a header, insert photos and text. I got the text to run around the images, made links for the navigation bar (which was the main source of my frustration as I couldn’t get it to run horizontally across the page), added a video by pasting code from You Tube, made email, external webpage and pdf links and created named anchors with java script so the viewer can be taken back to the top of a page at a click of the button. I also but text into the title page and added some meta tag information for SEO purposes. I used this exercise to kick start some very preliminary research for my departmental website which will need to utilize all of these things (though the videos won’t be so graphic, they will be more of the PR work carried out by the department).

Read Full Post »

This quick classroom project added extra elements such as sound, video, pdf downloads, links to other websites and e-mail addresses. At present the only way I control the sound was to have a link to a the mp3 sound file rather than placing it on the page where it would automatically play.

Read Full Post »

With this quick classroom project we refreshed and built on what we had learnt in last weeks lesson. We looked at divs again, changing the appearance of links for navigation purposes and added some javascript named anchors (item 1,2,3,4 etc..) to enable easy movement between articles on the same page.

The javascript was copied and pasted into the head section of the html code and links were added by joining relevant information to the named anchors using the links tool in the properties bar.

This helps to keep large amounts of related information on the same page and means the visitor doesn’t have to scroll back to the top of the page or navigate to superfluous pages. We looked again at meta tags to increase optimisation of website.

Read Full Post »

This second classroom project built on what we learnt in the previous session. We built 4 linked webpages using a Dreamweaver template and applied CSS styling to the pages. We brought in artwork created in Photoshop and other photos and generally began to feel our way around Dreamweaver. We did not use coding to build the site, but instead built it in the design option -Dreamweaver automatically generates the code. We looked at the general rules to building the site such as how and where to save files, how to name pages (i.e. the home page is always called index.html) and also how to key in information to optimise the pages – i.e metadata, alt tags,

Prior to building the pages we looked at various websites to analyse what information is included on successful websites (ie those that appear in the the top five) to give an idea how to optimise a site. My research is included below for the top five Brighton garden design websites

Lilybud –gardens by design

<head> Info down to end of Meta name description

Title = Lilybud Gardens by Design: Brighton &amp; Hove Garden Designer

Meta name = Keywords:  gardening,garden,design,brighton,garden design

brighton,landscaping,sussex,planting plans,garden maintenance,landscape gardeners”

meta name = description: Lilybud Gardens by Design: Garden and landscape design and build in Brighton, Hove and Sussex. Tel: 01273 500407.

Header 1 <h1>

Beautiful Gardens that don’t cost the Earth

Body text <p>

We are a garden design and build company, based in Brighton & Hove, creating beautiful gardens across Sussex.  We hope you’ll find us friendly, professional and enthusiastic.

Images <img>

moroccan-large.jpg

title=”Small garden with a Moroccan feel.

alt=”Moroccan inspired garden, Brighton” title=”Moroccan inspired garden, Brighton”

lawn-large.jpg

title=”Garden with curved lawn.

alt=”Curved lawn with metal edge and pebble path, Brigthon”

large-hove-garden-large.jpg”

title=”Large Hove town garden

alt=”Large Hove town garden”

ball-large.jpg”

title=”Wildlife garden with willow ball

alt=”Wildlife garden with willow ball

Langlea Garden Design

<head> Info down to end of Meta name description

title = Langlea Garden Design Brighton, Landscapers Brighton &amp; Hove East Sussex, UK

meta name keywords = Garden Design, Garden Designer, Garden Designers, Landscape Gardeners, Brighton, Hove, East Sussex, UK”

meta name description = Langlea Garden Design – Landscape Garden Designers – Garden designers and landscape gardeners in Brighton &amp; Hove East Sussex UK.

Header 1

No text header – animated gif

Body text

Langlea Garden Design – Brighton & Hove, East Sussex Whether it’s a tiny roof garden, traditional cottage garden, contemporary courtyard or a minimalist retreat……

Langlea Garden Design and Construction based in Brighton & Hove East Sussex, will exceed your dreams. For many years Langlea have been creating unique, timeless gardens with enduring appeal and a harmonious sense of place.

Our landscaped gardens are executed to the highest standards with meticulous attention to detail.

We specialise in garden or landscape design and construction, including planting, water features, decking, paving, outdoor rooms, and more.

About Us >>

View our recent landscape garden design projects

Images

Java script gallery

Zachary Lewis Garden Design and Build

<head> Info down to end of Meta name description

Title = Garden Design Brighton and Sussex, Landscape and Garden Designers in Brighton and Sussex

Meta name = Keywords: content=”garden designers brighton, landscape designers brighton, landscape garden designers brighton, garden design brighton, landscape design brighton, landscape garden design brighton, garden designers sussex, landscape designers sussex, landscape garden designers sussex, garden design sussex, landscape design sussex, landscape garden design sussex

meta name = description: Garden design from our garden designers and landscape designers in Brighton, Sussex. We offer garden and landscape design services for large scale domestic, commercial as well as smaller gardens.

Header 1 <h1>

No text header – part of image

garden-design-brighton.gif”

alt – ZL Garden Design – Landscape design &amp

Body text <p>

ZL Garden Design Brighton – Landscape and Garden Designers in Brighton, Sussex

Based in Brighton, Sussex ZL Garden Design are firmly established landscape designers and garden designers. We have a passion for all styles of garden in both private and commercial settings. We would hate to be considered only capable of contemporary works, we are led greatly by the space itself and of course the brief and preferences of the client.

“Style is a matter of taste, but design is a matter of principle”.

Covering Brighton, Sussex, London and the south, the landscape and garden designers at ZL Garden Design have forged a reputation for consistently delivering stunning gardens and landscapes

Please take a moment to browse our online garden design portfolio.

For more information, or to talk to our landscape and garden designers

about your garden, please do not hesitate to contact us.

You will see why we are a popular choice for those looking for quality

garden design in Brighton and Hove, Sussex.

Lewispol has ceased trading, anyone wishing to contact Gabriel Pol please click here.

Images <img>

Scroll viewer

flower.jpg alt  – Echinacea flowers

buddhist-garden.jpg alt – Buddhist walled garden

coastal-garden.jpg  alt Coastal Garden

chair.jpg alt – Modern garden design

outdoor-dining.jpg  alt – Outdoor design

courtyard.jpg alt – Modern courtyard

fountains.jpg alt – Garden water features

Read Full Post »

This was a first attempt at coding in Dreamweaver completed as a Classroom exercise

Read Full Post »

HTML

HTML (Hypertext Mark-up Language) was originated and developed by British Physicist Tim Berner Lee and is first mentioned on the Internet in late 1991.

It is a mark-up language  (not programming language) used to create HTML documents that are made up of HTML tags and plain text. Web browsers such as Safari and Firefox read the HTML documents and display them as web pages by using the HTML tags to interpret the content of a page.

HTML 4.0 is the current version as recommended by the World Wide Web Consortium (W3C). It supports multimedia options, scripting languages, style sheets and documents that are more accessible to users with disabilities.

HTML Tags

HTML mark-up tags describe the web pages and consist of keywords or letters surrounded by angle brackets that normally come in pairs. The first tag in the pair is called the start tag and looks something like this: <p>, the second tag is called the end tag and looks like this </p>. They are also known as opening and closing tags. Information appears between these pair of tags and are known as elements. Tags can also have attributes, which are extra bits of information that appear inside quotation marks. These are specified in the start tag and come in name/value pairs such as <style type=”text/css”>.

HTML Document (web page)

A typical web page may be coded in the following way:

The text between <html> and </html> describes the web page. The start tag will appear at the very beginning of the document and the end tag at the very end. All other information appears between these pairs of tags.

The head area  <head> </head>

Information about the document is placed between this pair of tags this can include the following:

Title – defines the title of the document and is essential to produce a valid document and helps with SEO(Search Engine Optimization).

Example: <title>CMC – the Clinical Media Centre at Brighton and Sussex University Hospitals in Brighton</title>

In a browser this will appear at the very top of the page, above where the url is situated.

Meta information – used to provide information about the page – this helps with SEO. SEO is very important, Good titling and descriptions  or a webpage/site help to push them get them on to the top pages of a browser.

Example: <meta name=”Description” content=”CMC  – The Clinical Media Centre specialises in clinical and non-clinical photography, video, graphics and retinal photography ” />

Style -used to describe CSS (Cascading Style sheets) at page level  – This describes how elements of a page will physically look and act.

Example: <style type=”text/css”> <!– –> </style>

This information can also be included by using links.

Links -Defines a link to an external resource. It is most commonly used to link a CSS file to an HTML document. Different links specify different actions

Links example: <link href=”styles.css” rel=”stylesheet” type=”text/css” />

href specifies  the target of a link (in this case the target is css styles which contains the information about how the page should look

rel specifies the relationship of the target of the link to the current page.  stylesheet is telling us that we are linking to a page (styles.css) that defines the different elements of styling that can be applied across the website.

Type can be used to specify the MIME type of the target of a link . A MIME is a two-part identifier for file formats on the internet. (Or an attribute?) In this case the MIME is =”text/css” and is telling us (I think) that the type is text that has had css styling applied to it as specified by the href and rel links as discussed above. (another example of a type is audio – the MIME could be audio/mpeg).

Script -Used to define a scripting language, such as JavaScript. JavaScript works in conjunction with HTML and create an ‘event’ to make enhanced user interfaces and dynamic websites.  An example of this are pop-up slim boxes which create pop-up boxes for enlarged images:

<script type=”text/javascript” src=”js/mootools.js”></script>

<script type=”text/javascript” src=”js/slimbox.js”></script>

<link rel=”stylesheet” href=”css/slimbox.css” type=”text/css” media=”screen” />

Body area <body> </body>

This is where all of the content is placed. This element must be used and used once only. It must start immediately after the closing head tag and end directly before the closing html tag.

The body area can contain the following:

Heading <h1> </h1> – If your document contains headings than you can apply html tags specifically to those. These range from <h1> through to <h6> and determine the size of the heading so that it displays either as a main or sub heading. – <h1> displays as the largest size and is normally only used once on a page and <h6> as the smallest. <h2> to <h6> can be used as often as required, but should always be used in order, as they were intended. For example, an <h4> should be a sub-heading of an <h3>, which should be a sub-heading of an <h2>.

Example: <h1>Beachcombing at Saltdean</h1>

Paragraphs <p> </p> – The main body text is placed between this pair of tags. If you want text to appear on different lines then you need to explicitly state this by place each line of text within p tags like so:

<p>This is the first line of text</p>

<p>this is the second</p>

This is because web browsers don’t usually take notice of what line your code is on.

Lists – The two main kinds of lists are ordered and unordered. Ordered are sequential lists which are normally represented by incremental numbers and are defined by the <ol> tag while unordered lists are non-sequential lists list items which are usually preceded by bullets and are defined by the <ul> tag. Within the lists, the li tag is used to define each list item.

Example: <ul>

<li>shells</li>

<li>stones</li>

<li>seaweed</li>

</ul>

Links – These can be used to make pages of a website link together, to send the user to another part of the page they are viewing or to link to any file anywhere on the web.

An anchor tag <a is used to define the link, for these to become active you need to add the destination of the link.

Example (This is for a navigation bar):

<div id=”navbar”><a href=”index.html”>Home</a>|<a href=”about.html”>About</a>|<a href=”guidelines.html”>Guidelines</a>|<a href=”finds.html”>Gallery</a>|<a href=”contact.html”>Contact</a></div>

Images – The img tag is used to put an image into a document

Example: <img src=”images/seaweed-2.jpg” alt=”Seaweed on shore” width=”164″ height=”164″ />

The src attribute tells the browser where to find the image.

It is important to include width and height attributes. If they are excluded, the browser will try to calculate the size of the image as it loads, instead of when the page loads – this can cause the layout of the document to jump around while the page is loading.

The alt attribute is the alternative description, it is important as it is used for people who cannot or choose not to view images.

Forms <form> </form> – These are used to pass data to a server and contain input elements such as text fields, checkboxes, radio-buttons and submit buttons.

Example (text field): <form> First name: <input type=”text” name=”firstname”</form>

Check boxes let a user select one or more options of a number of choices.

Radio buttons let a user select only one of a number of choices.

Submit buttons are used to send form data to a server. The data is sent to the page specified in the form’s action attribute.

Divs <div> </div>– Divs stand for division and their purpose is to divide up a web page into distinct sections, thus providing a definite structure to the page. It can be used in combination with CSS to provide design and layout.

Example: <div id=”footer”>

<p>Copyright J Lewis. All rights reserved | Private Policy | Terms and Conditions | Site Map</p>
</div>

CSS

CSS stands for Cascading Style Sheets and allows for flexible formatting of web pages. It was created by W3C to overcome the expensive and unwieldy process of HTML having to format documents.

It enables content, style and interaction to be put into separate ‘layers’ which makes the job of creating a web document quicker, cleaner and easier as well as adding the ability to create fantastic looking sites with all kinds of multimedia additions. It also makes websites more accessible and are an attempt to ‘future proof” against ongoing developments in technology and functionality.

CSS has been around for nearly a decade, but it is only had recent widespread support and been integrated into the majority of browsers.

Basic CSS Syntax

Whereas HTML defines the content of a web document, CSS defines how HTML elements are to be displayed.

A CSS rule has two main parts: a selector, and one or more declarations:

Selector: The selector is normally the HTML element you want to style (for instance the paragraph <p>

Declaration: A declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

Example: p {color:red; font-size: 14px; text-align:centre;}

P is the selector, colour, font-size and text align are the properties while red, 14px and centre are the values.

CSS declarations always end with a semicolon, and declaration groups are surrounded by curly brackets.

id and class selectors can also be specified. An id selector is used to specify a style for a single, unique element whereas a class selector is used to specify a style for a group of elements and in contrast to the id selector is most often used on several elements.  The id selector is define with “#” and the class selector with “.”.

Finally, when a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External Style Sheet: External CSS style sheets enable the appearance and layout of all the pages in a Web site to be changed, just by editing one single file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

Example: <head> <link href=”styles.css” rel=”stylesheet” type=”text/css” /> </head>

Internal Style Sheet: Internal style sheets are be used when a single document has a unique style. Internal styles are defined in the head section of an HTML page, by using the <style> tag.

Example: <head>

<style type=”text/css”>

hr {color:blue;}

p {margin-left:10px;}

body {background-image:url(“images/background.jpg”);}

</style>

</head>

Inline Styles: Inline styles are place within an HTML element and lose many of the advantages of style sheets by mixing content with presentation. This method should be used sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

Example: <p style=”color:blue;margin-right:20px”>This is a paragraph.</p>

For examples of HTML coding and CSS styling please look at post –  Classroom Project – Coding, further up this blog.

Read Full Post »