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.