Web Feature

I have a place for my Web Feature for Eye Spy... Sky.com. This seems like an ideal place to give a summary of the programme and advertise it's presence:

TV Choice does not have any web banners aimed at programmes, just their own magazine...

There isn't anywhere on the Virgin web site either...

Travis Barker

This is an awesome skull I found while on the Travis Barker website, he has some pretty cool CD designs too (bottom 4 images).

Design For Web... Workshop 2

Great start to the lesson, I forgot to copy my work from the User Work folder to my Desktop so I had no files to work with!! Luckily Simon copied his files from last week...

Creating more webpages:

- Make a .dwt - Dream Weaver template

- Cuts out hours of editing time, any changes to template changes the webpages.

- Buttons and background will remain the same, select the area that will be edited, then Insert> Template Object> Editable Region.

File > Save as template

This template folder goes into the root folder automatically.

This next step is for inserting the pages from the template.

Change the content so you know which page is which.

Then File > Save As... then save the file as the button name e.g. about, contact...

The pages should appear along the top tab bar.

To link the pages, click the button:

Then click link:


Click the icon next to it, and point to the page in the file window:



Using text:

- www.ipsum.com - Good to use for fill text.

'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit ipsum a quam accumsan pharetra vehicula urna sollicitudin. Donec non nunc nibh. Suspendisse tristique, justo id euismod porttitor, justo sapien commodo urna, at bibendum nunc sem vel enim. Nulla mattis semper libero, eget commodo lorem congue quis. Sed nisl lacus, sodales eget dignissim nec, porta in lectus. Duis ullamcorper ullamcorper euismod. Fusce lectus magna, sollicitudin in iaculis eget, imperdiet laoreet lorem. Donec placerat felis nec nulla ultricies iaculis. Nulla eu odio in mi suscipit sodales non id lacus. Integer nisi sem, pretium vitae aliquet eu, condimentum eget nisl. Donec cursus turpis dolor, in placerat massa. Mauris metus ante, pretium eleifend faucibus vel, varius eu lorem. Duis facilisis dolor sit amet eros sodales ullamcorper. Nulla eget massa vel eros laoreet imperdiet. Sed urna lacus, vestibulum ac dignissim non, consequat et nulla. Morbi nunc odio, gravida lacinia ultrices eget, sagittis eu lacus. Morbi vel risus quis massa ullamcorper varius vel sed neque. Integer suscipit tristique dapibus. Ut eleifend interdum luctus.

Fusce porta mi vel erat ultricies non vulputate ligula hendrerit. Integer auctor, metus quis egestas pretium, leo tortor condimentum nunc, id fringilla justo ante nec felis. Nunc ac pulvinar risus. Donec vel molestie nisi. Quisque ullamcorper metus non risus vulputate ullamcorper at in lectus. Suspendisse varius dapibus blandit. Sed porttitor augue blandit risus faucibus sed condimentum metus luctus. Vivamus in tellus sapien, ac viverra turpis. Proin venenatis, urna a sodales tristique, lorem nisi porta metus, eget tincidunt lorem lectus at nisl. Sed lorem mauris, vestibulum non scelerisque faucibus, tincidunt in lorem. Etiam et ipsum vitae turpis aliquet semper. Morbi adipiscing urna eget eros viverra ullamcorper. Phasellus ipsum sem, porta nec pulvinar nec, gravida sed enim.'

Copy and paste into the Design View to keep the formatting.

This does not use a specific font, to change the font click Page Properties at the bottom of the window:

Then select the font family:

Select the font size - pixels not points!

- Inserting images

- Make sure they are the correct size and formatted for web.

- Give the image alternate text for screen reader.

- Insert > Image

- Or use Lightbox... http://www.yoxigen.com/yoxview/

- Inserting videos

- On Youtube, click share then embed, then paste the code.

- Or get the Vimeo code.

- Then paste into the code.

- Inserting music

- www.premiumbeat.com

- Purchasing domain name

- Make sure it's a UK company.

- 24/7 help.

- www.123-reg.co.uk

- Purchasing webspace

- www.one.com

- Free for a year, 90p a month after.

Design For Web... Workshop 1

- HTML - Hyper Text Markup Language

- PHP- Hyper Text Preprocessor

e.g. Not all webpages are physically there on a website for example, Amazon, when searching for a wheelbarrow, all information tagged 'wheelbarrow' is pulled in and applied to the website template, if all pages existed websites would be very slow.

- CSS - Cascading Style Sheets

Split view of the New HTML document. (Code on left, design on right)

Design view

Code view

- Metatag - makes a website searchable.

Original code at the start of new document:

Edited code, deleting unnecessary lines:

Web management:

- Create a folder called root, no capitals or spaces.

- Inside that folder create images, again no capitals or spaces.

Once this is made go to Dreamweaver and go Site > New Site.



Rename site and point the local site folder to your root folder.

This will feature the information for uploading to the internet.






- FTP - File Transfer Protocol - used to transfer files like email.

As we have named our root folder, every time you save it saves to the root.

- When saving the homepage, save as index.html

- Setting up the table:

Height is not an option to change in this box so it must be done using the code.

tr in brackets = table row

td in brackets = table data

= nothing/no data

Pressing space after the width brings up this menu, the height needs specifying so press h:

When height is selected, click it, it brings the height code up:


Here the pixel value can be inputted:

- Preview of the webpage so far...

Using the table and cell buttons, create the desired layout:

Creating roll over buttons:

The website has 5 so 10 need to be made, using Photoshop.

File > New > Web (specify pixel size!)

1 button needs to be created that is visible all the time, and a second button for when the user rolls over the button.

Save For Web > PNG 24 >

Save to image folder within root. 1st = home1.png

Back to Dreamweaver, choose cell to place image.

Insert > Image Objects > Rollover image

- Image name: home button

- Original image: select 1st image (home 1.png)

- Rollover image: select home2.png

- Check preload rollover image box. - to avoid lagging in loading.

- Alternate text: (for partially sighted) home button

- When clicked, go to URL : type in url

My site in Design View:

Original button:

Rollover button:

Design for Web Introduction

YCN... Auchentoshan Website

The way Auchentoshan is marketed on their website still preserves the traditional, high quality standard but, visually this could appeal to a younger audience. The website has a page on how to enjoy Auchentoshan, including cocktails, drinking it neat (on the rocks) and how it can accompany food, extremely handy for people like me, who have no idea. Also on the site shows the process in the distillery including animations, which are narrated, and the user can navigate through each stage of the process, I found this really interesting, as again, its not something I am knowledgeable about.