Webpage Design

Introduction

Course code : DESI1183
Course co-ordinator : David Watson
Course weighting : 40 credits

This course covers the design and implementation of web pages and small websites. It is concerned with the client-side technologies that form the “three layer web”; the structural layer, the presentation layer and the behavioural layer – HTML, CSS and JavaScript respectively. Although it begins by considering the mainstream versions of those technologies, XHTML 1.0 and CSS 2.1, it goes on to cover trending technologies such as HTML5, CSS3 and jQuery. It also aims to develop an understanding of webpage aesthetics and looks at the use of colour, images, typography and general graphic design principles, although these are covered in more detail during the Applied Art for the Web course. It also covers the web design process, from client brief through to deployment and promotion. As such, it can be considered a general introduction to web design which is why this is the first course taught on the Web Design & Content Planning programme.

Programme LogoWith a group of students from diverse backgrounds, a programme such as Web Design & Content Planning requires some common currency among those taking part. This course acts as a foundation for further study and discussion. As such, we will cover some basic aspects of web design. This is not to undervalue what you already may know but to ensure that everyone has the same basic understanding of the issues.

This course is about the technical and aesthetic aspects of web design in equal measure. The course is not about learning how to use any particular piece of software. It is about gaining a fundamental understanding of how the web works and how to create webpages to a high standard.

Aims and Outcomes

  • To understand what the web is and how webpages are composed.
  • To learn how to approach the design of simple websites.
  • To develop the skills needed to implement the design.
  • To understand how to conform to web standards and how to test webpages.
  • To learn how to be self-critical and how to assess the work of others.

Format

The course runs during Term 1 and consists of four main elements - workshops, online dialogue, coursework and projects.

Workshops

The workshops will focus on "webpage design" in the widest sense of the words. We will cover both technical and aesthetic aspects during the workshops and lively dialogue is encouraged. The various topics are given on the timetable although this is only meant to be indicative and may change to suit specific requirements. Detailed tutorials etc. may be given at the workshop sessions or made available on-line. It must be stressed that complete coverage of the topics under consideration cannot be dealt with during the workshops and you will need to allocate time to follow up each workshop with further study.

Online Dialogue

Online teaching and support is available from a number of resources. Firstly, you may contact the course tutor by email. However, for general comment and discussion, students should engage with the course tutor, other tutors and other students on the programme at the online forum. This is a public forum, specifically set up for this programme but it also has a number of private areas where course and programme specific topics can be discussed. It is well used and a popular method of communication among the other students. Your questions will be answered either by the course tutor or by other members of the forum. Use of the forum is an integral part of the learning process and you are expected to become active members. We see the forum as being a way of documenting current trends and news and a place for discussion. The forum already contains a large amount of information and is a valuable resource tool as well as an excellent "forum" for debate.

Online activity also includes blogging and commenting on other students' blog posts. You will be provided with a personal blog for the submission of written work but you may also use the blog to publish any relevant material.

Coursework

Each week you will be given one or more tasks and some recommended reading to be completed for the following week when feedback will be given. Some tasks will build on work completed the previous week so it's important not to fall behind. Coursework will be assessed at the end of the course. You will be provided with web some web space with FTP access so that you can put your coursework online. This enables tutors and students to look at coursework outside of normal teaching times and allows you the flexibility to work whenever convenient.

Projects

In addition to the weekly coursework, there are 2 projects that must be completed by the dates given in the course schedule and made available online using the web space provided. In general, project briefs are issued after relevant topics have been covered in the workshops to ensure that all students are able to complete the work. A studio crit is held the week before submission so that help, advice and feedback can be given before project work is submitted. It is particularly important to meet deadlines for project work as they constitute 50% of the assessment for this course.

Student Websites

All student websites can be seen at www.webdesignstuff.co.uk. Access to coursework and project work is password protected. Access credentials can be found in the private area of the forum.

Schedule

The course schedule gives an overview of the timetable, weekly topics and submission dates for this course. There may be occasional changes, so check back frequently.

Full-time & part-time, first year students

2013-14 Session
DateRoomTitle
25th Sep 2013 (am)T105 (Lab A)What is web design?
25th Sep 2013 (pm)T105 (Lab A)Process, context and personalities
2nd Oct 2013T301Web Thesis Project final presentations
9th Oct 2013 (am or pm)T105 (Lab A)The structural layer
16th Oct 2013 (am or pm)T105 (Lab A)The presentation layer
23rd Oct 2013 (am or pm)T105 (Lab A)Images and colour with CSS
30th Oct 2013 (am or pm)T105 (Lab A)CSS Typography
6th Nov 2013 (am or pm)T105 (Lab A)Structural elements and page layout *
13th Nov 2013 (am or pm)T105 (Lab A)More CSS goodness with CSS3 **
20th Nov 2013 (am or pm)T105 (Lab A)HTML5 are we there yet?
27th Nov 2013 (am or pm)T105 (Lab A)Responsive Web Design
4th Dec 2013 (am or pm)T105 (Lab A)Introduction to JavaScript ***
11th Dec 2013 (am or pm)T105 (Lab A)jQuery for designers
18th Dec 2013 Self Study
Winter Vacation (2 weeks)

All face-to-face sessions are 3 hours long and take place on Wednesday mornings (am); beginning at 10.00am or afternoons (pm); beginning at 2.00pm in Lab A unless otherwise indicated.

See the programme teaching schedule for an overview of all courses.

* Small Business Website project brief issued
** Small Business Website project interim crit
*** Small Business Website project submission and crit
Website Makeover project brief issued
††Website Makeover project interim crit
†††Website Makeover project submission and crit

Course Documents

These documents contain all the information about the course, projects, weekly coursework and references. All documents are provided in PDF format. Some documents are also provided in appropriate alternative formats. In order to view the PDF files, you will need the Adobe Reader. The PowerPoint Show (.ppsx) files can be viewed using the Microsoft PowerPoint Viewer if you don't already have PowerPoint installed.

There are currently 30 files in this section

File Listing
  Filename Size (KB) Date Modified
Class 01 - Coursework.pdf 89.4 24th Sep 2013
Class 01 - What is Web Design.pdf 7,450.8 25th Sep 2013
Class 02 - Coursework.pdf 169.3 28th Mar 2013
Class 02a - The Web Design Process.pdf 2,488.9 25th Sep 2013
Class 02b - Domain Names and Web Hosting.pdf 706.1 28th Mar 2013
Class 03 - Coursework.pdf 93.3 9th Oct 2013
Class 03 - The Structural Layer.pdf 890.1 8th Oct 2013
Class 04 - Coursework.pdf 108.6 15th Oct 2013
Class 04 - The Presentation Layer.pdf 693.4 15th Oct 2013
Class 05 - Coursework.pdf 91.4 22nd Oct 2013
Class 05 - Images and Colour.pdf 2,071.6 28th Mar 2013
Class 06 - Coursework.pdf 87.9 29th Oct 2013
Class 06 - CSS Typography.pdf 1,456.9 29th Oct 2013
Class 07 - Coursework.pdf 88.0 5th Nov 2013
Class 07 - Page Layout.pdf 5,593.0 6th Nov 2013
Class 08a - Coursework.pdf 86.6 19th Nov 2013
Class 08a - Navigation with CSS.pdf 905.2 19th Nov 2013
Class 08b - Coursework.pdf 83.4 19th Nov 2013
Class 08b - CSS3 for Fun.pdf 298.9 19th Nov 2013
Class 09 - Coursework.pdf 82.5 19th Nov 2013
Class 09 - HTML5 Are we there yet.pdf 432.1 19th Nov 2013
Class 10 - Coursework.pdf 84.5 28th Nov 2013
Class 10 - Responsive Web Design.pdf 1,575.7 26th Nov 2013
Class 11 - Coursework.pdf 102.1 4th Dec 2013
Class 11 - The Behavioural Layer.pdf 454.1 4th Dec 2013
Class 12 - Coursework.pdf 101.4 11th Dec 2013
Class 12 - jQuery for Designers.pdf 551.4 12th Dec 2013
Marking up text (exercise).pdf 122.4 28th Mar 2013
Project 1 - Small Business Website 2013-14.pdf 88.6 11th Nov 2013
Project 2 - Website Makeover 2013-14.pdf 88.5 11th Dec 2013

Reference Documents

These documents are useful references. They are mostly extracts and sample chapters from some of the books on the reading list. You will find references to some of these documents in the weekly reading recommendations.

There are currently 1 files in this section

File Listing
  Filename Size (KB) Date Modified
The Glass Wall.pdf 8,073.0 28th Mar 2013

Worked Examples

Documents in this section are designed to illustrate some of the ideas discussed during the workshops. New examples will be added as and when appropriate.

There are currently 13 files in this section

File Listing
  Filename Size (KB) Date Modified
class_6_font_embed.html 2.1 29th Oct 2013
class_6_typography.html 6.0 29th Oct 2013
class_7_border_trick.html 2.7 29th Oct 2013
class_7_page_design_styled.html 6.6 29th Oct 2013
class_7_page_design_styled_image.html 6.8 29th Oct 2013
class_7_page_design_unstyled.html 5.3 29th Oct 2013
class_7_page_layout.html 3.0 29th Oct 2013
nav_back_highlight.gif 0.7 28th Mar 2013
nav_back_normal.gif 0.7 28th Mar 2013
sprite.png 1.9 28th Mar 2013
week_3_index.html 0.4 28th Mar 2013
week_3_main.css 0.4 28th Mar 2013
week_4_sprite.html 1.1 28th Mar 2013

Working with list item floats

There are currently 10 files in this section

File Listing
  Filename Size (KB) Date Modified
centred-flush-h1.css 0.5 28th Mar 2013
centred.css 0.3 28th Mar 2013
change-order.css 0.5 28th Mar 2013
cow-parsley.jpg 22.5 28th Mar 2013
float-exercise.zip 248.3 11th Nov 2013
globe-artichoke.jpg 13.8 28th Mar 2013
hawthorn.jpg 13.7 28th Mar 2013
index.html 3.5 28th Mar 2013
left.css 0.3 28th Mar 2013
right.css 0.3 28th Mar 2013

CSS 3-column layout (faux columns)

There are currently 6 files in this section

File Listing
  Filename Size (KB) Date Modified
column-bottom.png 1.3 28th Mar 2013
column-middle.png 0.9 28th Mar 2013
column-top.png 1.3 28th Mar 2013
fixed-grid.html 3.6 28th Mar 2013
fluid-grid.html 3.6 28th Mar 2013
index.html 4.8 28th Mar 2013

CSS navigation

There are currently 8 files in this section

File Listing
  Filename Size (KB) Date Modified
centred.html 0.6 28th Mar 2013
nav-back-hover.png 1.0 28th Mar 2013
nav-back.png 1.0 28th Mar 2013
no-floats.html 1.1 28th Mar 2013
no-images.html 2.3 28th Mar 2013
single-image.html 1.0 28th Mar 2013
sprite.png 1.1 28th Mar 2013
two-images.html 1.0 28th Mar 2013

CSS3

There are currently 1 files in this section

File Listing
  Filename Size (KB) Date Modified
index.html 1.6 28th Mar 2013

Responsive

There are currently 5 files in this section

File Listing
  Filename Size (KB) Date Modified
earth.jpg 26.7 28th Nov 2013
example.html 3.5 28th Nov 2013
mars.jpg 17.8 28th Nov 2013
responsive.html 9.6 28th Nov 2013
wells.jpg 21.0 28th Nov 2013

JavaScript

There are currently 11 files in this section

File Listing
  Filename Size (KB) Date Modified
javascript_00_hello_world.html 1.5 12th Dec 2013
javascript_01_change_page_background.html 2.4 12th Dec 2013
javascript_02_change_colour.html 2.3 12th Dec 2013
javascript_03_change_multiple.html 2.8 12th Dec 2013
javascript_04_change_text.html 2.2 12th Dec 2013
javascript_05_hide.html 2.3 12th Dec 2013
javascript_06_new_window.html 1.8 12th Dec 2013
javascript_07_day_of_the_week.html 2.8 12th Dec 2013
javascript_08_today.html 2.3 12th Dec 2013
javascript_09_highlight_today.html 2.7 12th Dec 2013
window.html 0.7 12th Dec 2013

jQuery

There are currently 10 files in this section

File Listing
  Filename Size (KB) Date Modified
jquery_00_hello_world.html 3.4 12th Dec 2013
jquery_01_id_selector.html 4.2 12th Dec 2013
jquery_02_class_selector.html 3.7 12th Dec 2013
jquery_03_toggle.html 2.8 12th Dec 2013
jquery_04_slidetoggle.html 3.3 12th Dec 2013
jquery_05_accordion.html 3.3 12th Dec 2013
jquery_06_table_stripes.html 4.2 12th Dec 2013
jquery_07_multiple_properties.html 4.4 12th Dec 2013
jquery_08_table_hover.html 4.4 12th Dec 2013
jquery_09_tabs.html 6.3 12th Dec 2013

Assessed Elements

This course includes 4 assessed elements; coursework, online activity and two projects. Details of these elements are given below. Each of the elements has a slightly different weighting and this is indicative of the degree of difficulty and/or the amount of work required. The weighting is as follows:

  • Coursework: 40%
  • Online activity: 10%
  • Small Business Website: 25%
  • Website Makeover: 25%

Project outlines are given below but the full brief for each project is available is the Documents section of this page.

Project Details

Small Business Website

You will design and produce a basic website for a small business concern. This project will give you the opportunity to implement some of the techniques and design ideas you have developed during the first part of the course. This project will be used to help demonstrate some of the issues involved with the development of small websites including: the design process, colour and typography, site structure and navigation, standards compliant and semantic coding. You will be given a detailed brief when the project is introduced.

Website Makeover

Some websites are built from scratch, but increasingly, web designers have to learn how to redesign existing sites. For this project, you will take an existing website and redesign it using the same content. This will give you the opportunity to critically assess the current site and to make improvements where you think they are required. You should undertake an analysis of the inherent problems with the existing design and provide an explanation of how these have been resolved in your new design. You will be given a detailed brief when the project is introduced.

Online Resources

There are literally hundreds of good web design sites on the web but a few are outstanding with excellent content added on a regular basis. I recommend that you read both A LIST Apart and Smashing Magazine regularly.

Class 01 Links ~ What is web design?

Class 02 Links ~ Web design process, context and personalities

Choosing a Domain Name

Domain Detective Tools

Domain Name Registration

Web Hosting

Class 03 Links ~ The structural layer - XHTML

Video tutorials

Class 04 Links ~ The presentation layer - CSS

Class 05 Links ~ Images and colour with CSS

Interactive Colour Pickers

Images and CSS

Class 06 Links ~ CSS Typography

Typography

Font Services

Class 07 Links ~ Structural elements and page layout

CSS Positioning and Floats

Video tutorials

Grid-based page design

Lists for Navigation

CSS Image Rollovers

Information Architecture

Website Navigation

Tabbed Navigation Design

Class 08 Links ~ More CSS goodness with CSS3

Video tutorials

Week 09 Links ~ HTML5 - Are we there yet?

Week 10 Links ~ Responsive Design

Class 11 Links ~ Introduction to JavaScript

JavaScript

The DOM (document object model)

Class 12 Links ~ jQuery for designers

jQuery (a JavaScript framework/library)

Video tutorials

Creating a jQuery accordion menu/navigation

Ajax

Further topics

Filters: hacks and conditional comments

Cross-browser checking

Web design for mobile devices

Key Texts

We are very fortunate that there are now many excellent books on the topic of web design and to some extent, selecting a list of “key texts” is a matter of personal preference. However, the books below have been chosen specifically to match the structure and content of this course and to appeal to students at an introductory level. Students who want to broaden and deepen their knowledge may want to progress to those texts listed in the Further Reading section.

Two of the texts listed here form an either/or choice. For those students who are completely new to web design and don't know their HTML from their CSS, I recommend the Head First HTML with CSS and XHTML book. For those who already have some experience of web coding, I suggest The Essential Guide to CSS ans HTML Web Design. You don't need to read both of these books.

Since web design is a fast evolving discipline, it's a good idea to keep up with current trends by reading online magazines (see below) and blogs. However, it's still nice to receive your news, reviews and articles in paper format. As far as printed magazines are concerned, there is only one worth mentioning and that is .net magazine. It's an excellent publication, covering all the areas of concern for students on this programme and I recommend that you subscribe to it. The online magazines listed below are just the most useful of many currently publishing useful material, so this should be considered a partial list only.

Essential Text Books

  • Learning Web Design (4th Ed.) by Jennifer Niederst Robbins ¦ details
  • The Modern Web by Peter Gasston ¦ details
  • Implementing Responsive Design by Tim Kadlec ¦ details
  • PHP and MySQL for Dynamic Websites (4th Ed.) by Larry Ullman ¦ details
  • Above the Fold by Brian Miller ¦ details
  • Head First HTML with CSS and XHTML by Elizabeth Freeman and Eric Freeman ¦ details
  • The Essential Guide to CSS and HTML Web Design by Craig Grannell ¦ details
  • Web Standards Solutions (2nd Ed.) by Dan Cederholm ¦ details
  • Web Style Guide (3rd Ed.) by Patrick J. Lynch and Sarah Horton ¦ details
  • Design Elements: A Graphic Style Manual by Timothy Samara ¦ details
  • The Book of CSS3 by Peter Gasston ¦ details
  • jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie ¦ details
  • PHP Solutions: Dynamic Web Design Made Easy (2nd Ed.) by David Powers ¦ details

Further Reading

  • Designing with Web Standards (3rd Ed.) by Jeffrey Zeldman ¦ details
  • What is Web Design? by Nico Macdonald ¦ details
  • Visual Design for the Modern Web by Penny McIntire ¦ details
  • Handcrafted CSS by Dan Cederholm ¦ details
  • CSS Mastery - Advanced Web Standards Solutions (2nd Ed.) by Andy Budd ¦ details
  • Simply JavaScript by Kevin Yank and Cameron Adams ¦ details
  • Universal Principles of Design by William Lidwell, Kritina Holden and Jill Butler ¦ details
  • Web Design Index by Content.05 by Günter Beer ¦ details
  • Design Basics Index by Jim Krause ¦ details

Reference Books

  • The Ultimate HTML Reference by Ian Lloyd ¦ details
  • The Ultimate CSS Reference by Tommy Olson and Paul O'Brien ¦ details

Essential Magazines

  • .NET Magazine (published monthly) ¦ details
  • A List Apart (online) ¦ details
  • Smashing Magazine (online) ¦ details
  • Six Revisions (online) ¦ details
  • Impressive Webs (online) ¦ details
  • Mashable (online) ¦ details

Essential Text Books

The books in this section form a core of texts that cover all the topics addressed during the Webpage Design course. During the course, you will be asked to do weekly reading and in most cases, it will be from these books. Many of them are available from the library but you should probably aim to own a copy of at least 3 or 4 of them, with Craig Gannell's Essential Guide to CSS and HTML Web Design or Head First HTML and Above the Fold being top of your list.

Learning Web Design (4th Ed.) by Jennifer Niederst Robbins

Learning Web Design (4th Ed.)

If any book could claim to be a single volume introduction to everything a beginner needs to know about web design, this book comes closer than any other I know. If I tell you that the subtitle to this book is “A beginner's guide to HTML, CSS, JavaScript and web graphics”, that will give you some idea of the scope of this excellent book. At just over 600 pages long, this isn't a short read, but it is a surprisingly light read. Robbins is obviously a teacher and her clear and logical explanations of the topics in this book are delivered at a sensible pace, which makes even complex concepts such as progressive enhancement and responsive web design easy to understand. Web design beginners should make this book number one on their shopping list.

See more information about Learning Web Design (4th Ed.)

Learning Web Design (4th Ed.) is available at Amazon.co.uk

Preview Learning Web Design (4th Ed.) at Google Books

Greenwich library: 4 copies + electronic copy ~ view catalogue entry

The Modern Web by Peter Gasston

The Modern Web

Inevitably, and even after 600 pages, Jennifer Robbins can't take us to the cutting edge of web design but fortunately, Peter Gasston can take us there with his book, The Modern Web. In it, Peter discusses many of the changes in web design technology happening right now and those that are set to become important in the near future such as the CSS Flexbox module. However, the book is not just about the headline design tools of the future, it also covers many topics that will just make you a better coder. Coverage of WAI-ARIA roles and HTML5 Microdata will help you write code that is semantically rich and accessible by assistive technologies. Of course, there's graphics too and Peter spends a whole chapter covering the SVG file format, which is destined to become possibly the most important graphics format on the web. This book will take your understanding of web technologies to an advanced level.

See more information about The Modern Web

The Modern Web is available at Amazon.co.uk

Preview The Modern Web at Google Books

Greenwich library: Electronic copy only ~ view catalogue entry

Implementing Responsive Design by Tim Kadlec

Implementing Responsive Design

Of all the conceptual and applied challenges that face the contemporary web designer, it is probably responsive design that causes the most difficulties. Partly this is due to the fact that it is still relatively new and optimised workflows have yet to be invented and certainly, the tools we currently use are far from ideal. Of course, every web designer must read Ethan Marcotte's Responsive Web Design published by A Book Apart in order to grasp the fundamentals of this approach, but what then? Well, Tim Kadlec's excellent book is the next step. It takes the principles outlined by Marcotte and expands on them, taking the reader on a journey through a typical web design project and demonstrating how responsive design principles can be implemented.

A good understanding of responsive design is important for all web designers and I recommend reading as much as you can on the subject. On your reading list should also be the chapters by Brad Frost and Trent Walton from The Mobile Book, published by Smashing Magazine.

See more information about Implementing Responsive Design

Implementing Responsive Design is available at Amazon.co.uk

Preview Implementing Responsive Design at Google Books

Greenwich library: 4 copies ~ view catalogue entry

PHP and MySQL for Dynamic Websites (4th Ed.) by Larry Ullman

PHP and MySQL for Dynamic Websites (4th Ed.)

Sometimes it seems as though there are as many books about web development as there are web developers. Certainly, when it comes to PHP, the choice is wide and varied. However, although I've now read a number of books on server-side development, I keep returning to the first book I ever read on the subject, Larry Ullman's PHP and MySQL for Dynamic Websites. Why this book? Well, because the format is neat and the approach is logical. Everyone has their own way of learning and this is the book that fits for me but I suspect it's not just me; Ullman makes the learning curve not too steep, never assumes anything and keeps explanations clear and succinct.

At over 600 pages, the book is comprehensive enough to cover everything a beginner needs to know, including a new chapter on jQuery. It manages to be both a reference and a learning guide, with chapters on specific topics and some example projects to reinforce the learning.

See more information about PHP and MySQL for Dynamic Websites (4th Ed.)

PHP and MySQL for Dynamic Websites (4th Ed.) is available at Amazon.co.uk

Preview PHP and MySQL for Dynamic Websites (4th Ed.) at Google Books

Greenwich library: 10 copies ~ view catalogue entry

Above the Fold by Brian Miller

Above the Fold

Above the Fold is an ideal book for the web design newbie. Although it doesn't cover any particular topic in any great depth, it gives a great overview of the visual web design process and covers everything from the history of the web to the use of analytics via web page anatomy, typography, site planning, marketing and SEO. This book won't teach you how to code but it makes the perfect companion to your favourite book on HTML and CSS. It's printed in full colour with lots of really informative illustrations and lots of examples of websites that clearly illustrate the points made in the text. The book is a quick and easy read but there's enough here to make it a great reference too.

From the introduction: “The phrase ‘above the fold’ reminds us that there are both close similarities and vast differences between print and Web design. The principles of space usage, typography, and other elements of effective hierarchical communication are essential to both print and Web design, but the methods of achieving these principles involve different skill sets and consideration for the end user. That's what this book is about – the fundamentals of graphic design and the specific considerations a designer makes for effective web communication. And it's the reason Above the Fold is a fitting title.”

If I have one small criticism, it is that the book shows a bias towards the author's particular area of expertise (typography) but for those who need a visual design primer for the web that takes in other considerations like standard IAB banner sizes, this book is perfect.

Above the Fold is available at Amazon.co.uk

Greenwich library: 10 copies ~ view catalogue entry

Head First HTML with CSS and XHTML by Elizabeth Freeman and Eric Freeman

Head First HTML with CSS and XHTML

I have to hold my hands up and concede that when I first came across this book, I was very sceptical about its style and how well it was able to communicate its message. Well, I was just plain wrong. Head First HTML, in spite (or possibly because) of its quirky delivery style is a brilliant book for beginners. It is ideally suited to those who have never heard of HTML or CSS but who want to learn how to build websites the right way.

From the back cover: “We think your time is too valuable to waste struggling with new concepts. Using the latest research in cognitive science and learning theory to craft a multi-sensory learning experience, Head First HTML with CSS and XHTML uses a visually rich format designed for the way your brain works, not a text-heavy approach that puts you to sleep.”

The curious thing is, this doesn't look like a professional-level book but it does take a professional-level approach to the subject of web design. Just like the best modern books on the subject, it stresses the importance of semantic markup, of separating content from presentation, and of code validation. It also is very careful not to assume any previous knowledge and begins by suggesting some simple software tools (text editors) for coding and later, a great introduction to FTP. Many other books would simply assume you already knew this stuff or expect that you'd pick it up along the way.

So this is a fantastic book for absolute beginners but not designed for those who already have some basic experience of web design – there are plenty of other excellent books out there for you.

Head First HTML with CSS and XHTML is available at Amazon.co.uk

Preview Head First HTML with CSS and XHTML at Google Books

Greenwich library: 12 copies ~ view catalogue entry

The Essential Guide to CSS and HTML Web Design by Craig Grannell

The Essential Guide to CSS and HTML Web Design

At long last, here is a book that talks about “a modern, modular approach to standards-compliant web design” in a clear, logical and friendly manner. No small feat because contemporary web design practice is complex and a good understanding of a whole range of topics is required in order to master the art.

Craig Grannell approaches the topic by looking at various aspects of web design, with chapters like “Working with Type” and “Page layouts with CSS” rather than the more prosaic approach of many code-based books. The initial chapters of the book give a comprehensive background and primer to HTML and CSS but avoid the mistake of looking at code in the abstract. All through the book, code examples are illustrated with the rendered result so that the reader can make a clear connection between code and image.

This is an excellent book that covers a lot of ground (it even includes some useful JavaScript techniques) and is probably the best single volume introduction for anyone serious about web design. If I have one criticism it is that the book is a little dry and there are few concessions for absolute beginners but it is highly recommended for those who want to improve their web design skills.

The Essential Guide to CSS and HTML Web Design is available at Amazon.co.uk

Preview The Essential Guide to CSS and HTML Web Design at Google Books

Greenwich library: 4 copies ~ view catalogue entry

Web Standards Solutions (2nd Ed.) by Dan Cederholm

Web Standards Solutions (2nd Ed.)

OK, so you learned about XHTML and you learned about CSS and you even learned about how they can work together. But what about technique and method? What is the best practice for creating navigation bars? Never fear, Dan Cederholm is here to show you how.

In truth, many of the methods described in this book are now standard practice for the seasoned web designer but for the beginner who has just got to grips with XHTML and CSS, this book is invaluable. The book focuses on best practice coding for the most common page elements such as headings, navigation, forms, page layout, styling text and, of course, image replacement. The book is well written and although it deals with some complicated issues, it does so in an easy and engaging way.

Web Standards Solutions (2nd Ed.) is available at Amazon.co.uk

Preview Web Standards Solutions (2nd Ed.) at Google Books

Greenwich library: 13 copies ~ view catalogue entry

Web Style Guide (3rd Ed.) by Patrick J. Lynch and Sarah Horton

Web Style Guide (3rd Ed.)

The Web Style Guide (3rd Ed.) by Patrick J. Lynch and Sarah Horton is a relatively slim volume but it packs a lot in. The book is concise and clear and covers all the basic considerations of site and page design. In fact, this is the book you should read first if you are considering building a web site. It covers topics such as site hierarchy, page layout, typography and web graphics to name but a few. The book contains lots of example sites and explanatory diagrams, illustrated in full colour. This book is a perfect compliment to coding texts by covering the non-technical areas of web design.

Despite the fact that this book is now a few years old, it is not out-of-date because the authors have been careful not to focus on the technologies used for building websites nor the browsers used for displaying them. Rather, they consider the generic design elements of webpage and website design. These basic design principles hold true, irrespective of the technological context and in this 3rd edition, they bring the book up-to-date by considering the disign of contemporary webpages.

This book is excellent and it's even available free on the web in a HTML version at www.webstyleguide.com.

Web Style Guide (3rd Ed.) is available at Amazon.co.uk

Greenwich library: 16 copies ~ view catalogue entry

Design Elements: A Graphic Style Manual by Timothy Samara

Design Elements: A Graphic Style Manual

Timothy Samara's book is a primer that illustrates and discusses all the basic principles of graphic design in a direct and easily digestible format. The book consists of 5 chapters; “Form and Space”, “Color Fundamentals”, “Choosing and Using Type”, “The World of Image” and “Putting it All Together”. Each one is lavishly illustrated with excellent examples that clearly illustrate the topic under consideration. Although the book is not specifically targeted at web designers, it covers the universal principles of graphic design that are as applicable to web design as they are to traditional analogue media design.

In addition to the 5 chapters, the reader will learn the author's “Twenty Rules for Making Good Design”, a very good checklist of what to do and what to avoid. Although a book of this nature cannot contain everything that may be relevant, this book comes close and is the best one-volume introduction to graphic design I have seen.

Design Elements: A Graphic Style Manual is available at Amazon.co.uk

Preview Design Elements: A Graphic Style Manual at Google Books

Greenwich library: 12 copies ~ view catalogue entry

The Book of CSS3 by Peter Gasston

The Book of CSS3

The Book of CSS3 is not a book for CSS beginners, it is written for those who are already comfortable writing semantic markup with clear CSS2.1 for presentation.

From the back cover: “The Book of CSS3 distils the dense technical language of the CSS3 specification into plain English and shows you what CSS3 can do right now, in all major browsers. With real-world examples and a focus on the principles of good design, it extends your CSS skills, helping you transform ordinary markup into stunning, richly-styled web pages.”

This is an important book that guides you along the cutting-edge of CSS as it is used now and how it may be used in the future – the CSS3 specification is not finalised and the various modules are in different states of development, so it's important to understand what can be used now, what should be used with caution and what cannot be used. You would be forgiven for asking, “if CSS3 is in such a state of flux, why use it at all?” Well, the simple answer is that what there is of it at the moment is proving to be so useful to web designers that it is well worth adding it to your toolkit. Although CSS3 is a work in progress, it actually solves current web design problems that previous versions of CSS cannot.

Fortunately, this book is clearly written. Peter Gasston not only describes how CSS3 can be used but also demonstrates “bulletproof” methods of deployment that removes any doubt about its effectiveness in different browser environments. Reading the book, you get the impression that you're in a safe pair of hands and it will give you the confidence to create beautiful websites that just work.

The Book of CSS3 is available at Amazon.co.uk

Greenwich library: 12 copies ~ view catalogue entry

jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie

jQuery: Novice to Ninja

These days, no web designer worth their salt needs to bother learning how to use JavaScript when there are fantastic JS libraries around like jQuery. This book assumes that you can write well-formed, semantic HTML and you are able to style websites using clear and concise CSS rules, so it's not for the absolute web design beginner. However, it doesn't assume any knowledge of JavaScript or any previous experience of jQuery.

From the introduction: “If you're a front-end web designer looking to add a dash of cool interactivity to your sites, and you've heard all the buzz about jQuery and want to find out what the fuss is about, this book will put you on the right track.

By the end of this book, you'll be able to take your static HTML and CSS web pages and bring them to life with a bit of jQuery magic. You'll learn how to select elements on the page, move them around, remove them entirely, add new ones with Ajax, animate them... in short, you'll be able to bend HTML and CSS to your will!”

This is a very readable book and jQuery newbies will be using the library in no time and adding simple behaviour to their websites soon after. As the title suggests, the reader can take this as far as they want but for a good, straightforward introduction to the world of jQuery, this is one of the best books around.

jQuery: Novice to Ninja is available at Amazon.co.uk

Greenwich library: 12 copies ~ view catalogue entry

PHP Solutions: Dynamic Web Design Made Easy (2nd Ed.) by David Powers

PHP Solutions: Dynamic Web Design Made Easy (2nd Ed.)

Here is a book on PHP for people who don't need to be PHP gurus. Most books on the subject tend to assume that you want to learn to use the scripting language like a pro but there are plenty of web designers out there (myself included) for whom PHP is just a convenient way of making websites more modular and a bit dynamic. This book then, is for the rest of us.

In this book, David Powers doesn't blind us with esoteric code, he just gives us enough to do the simple stuff that will make the difference and turn our sites from dull, static affairs into interesting, dynamic places.

From the back cover: “PHP Solutions starts at the ground level showing you how to set up PHP, how to write scripts, and how you can include them in your web pages… You don't need to know PHP or MySQL to follow this book, but even if you do you won't find yourself wading through needless exercises. The emphasis throughout is on discussing the most practical solutions to everyday problems faced by web designers and developers.”

PHP Solutions: Dynamic Web Design Made Easy (2nd Ed.) is available at Amazon.co.uk

Preview PHP Solutions: Dynamic Web Design Made Easy (2nd Ed.) at Google Books

Greenwich library: 6 copies ~ view catalogue entry

Further Reading

The books below all fill in gaps, overlap and expand upon the "Essential Text Books" listed above. You do not need to own them but they may be used as good alternatives or simply to explore a bit more of the subject.

Designing with Web Standards (3rd Ed.) by Jeffrey Zeldman

Designing with Web Standards (3rd Ed.)

This is a very important book. In Designing with Web Standards, Jeffrey Zeldman describes the way websites were coded in the twentieth century, clearly explains why this is now wrong and demonstrates how twenty-first century websites should be coded. The common perception is that designing websites to web standards is onerous for the designer and transparent to the user - naturally, many designers choose to ignore web standards. Zeldman demonstrates that working with standards, creating semantically correct XHTML in conjunction with structural CSS is, in fact, liberating rather than oppressive.

Some may fear that this book will give them a hard time and that Zeldman (standards guru) will push web standards for the sake of web standards. Nothing could be further from the truth. Zeldman is himself a website designer and as such, he delivers a very pragmatic approach to coding. The examples in the book are mainly based upon XHTML 1.0 Transitional (not Strict). Zeldman even covers the use of tables for page structure, heresy to most hard-line standards coders. The truth is that Zeldman is the best sort of evangelist. One who tells you it's OK not to go by the book if that seems impractical and you won't burn in hell as a consequence.

The book is also very instructive in the way it describes the development of web browsers and helps the reader to make sense of the many peculiarities that some browsers exhibit.

This may all sound rather dull but Zeldman has a very personable approach to technical writing. He is aware of the arcane nature of much of his subject matter and does a very good job of making it accessible and occasionally humorous.

This book has changed the way many web designers think and design. Whether you are a web design beginner or a seasoned professional, this book must be read; it will help you form opinions on web coding and will certainly help you to create better sites.

Designing with Web Standards (3rd Ed.) is available at Amazon.co.uk

Preview Designing with Web Standards (3rd Ed.) at Google Books

Greenwich library: 10 copies ~ view catalogue entry

What is Web Design? by Nico Macdonald

What is Web Design?

This is a gem of a book. For once, a book that treats web design as just another field of Design endeavour and talks about it intelligently within the context of the wider world of graphic and communication design. Many books on this topic tend to get bogged down by issues involving current and changing technologies. This book takes a much more objective look at web design and is much more rewarding as a result.

The author describes the book so: “Web design has much in common with other areas of design and this book begins by establishing general design principles and applying them to the web” This book doesn't advocate absolute rules, as rules are specific to particular scenarios. Likewise it advocates a general model for the design process rather than an absolute approach. It doesn't address technical issues such as coding and programming, as these change from month to month and can be better learned online."

Note that this book is currently out of print but copies can be bought at Amazon for next to nothing.

For more information, see the companion web site, which contains updates and links.

What is Web Design? is available at Amazon.co.uk

Preview What is Web Design? at Google Books

Greenwich library: 1 copies ~ view catalogue entry

Visual Design for the Modern Web by Penny McIntire

Visual Design for the Modern Web

This is one of only a few books that attempts to make the crossover between graphic design principles and the coding of web pages and in the main it succeeds very well. In fact, it goes beyond visual design and introduces the idea of design for usability with a very good chapter on navigation.

The book is written for web design beginners but it has great aspirations. Rather than simply plodding through a series of themed chapters, the book begins with a couple of excellent chapters that give a firm grounding in the concepts of visual design and its relation to the functioning of the site (interaction design). In chapter 2, “Site Analysis”, the author devises a very useful schema that will help beginners understand the entire web design process.

The book includes one of the best chapters on colour, covering, colour theory, a good explanation of hexadecimal values and a suggested approach for the creation of colour schemes. Throughout the book, web design principles are clearly stated and explained.

Unfortunately, this book is currently out of print but is available second-hand.

Visual Design for the Modern Web is available at Amazon.co.uk

Preview Visual Design for the Modern Web at Google Books

Greenwich library: 4 copies ~ view catalogue entry

Handcrafted CSS by Dan Cederholm

Handcrafted CSS

This is an inspirational book. It's full of useful techniques that produce excellent and beautiful results. Most importantly, it demonstrates how CSS3 can be implemented now by adopting what Dan Cederholm describes as “progressive enrichment”, a philosophy that says it's OK that websites can look different in different browsers - in fact, that they should look different because some browsers are more capable than others and we should allow those browsers to provide a better user experience.

This is a full-colour book so that you can easily see the graphic results of the accompanying code - a really good way to learn. Read this book, cover-to-cover (it's not that long) and start working with CSS3 now. Also, if you can afford a little extra, the DVD edition is excellent too.

Handcrafted CSS is available at Amazon.co.uk

Preview Handcrafted CSS at Google Books

Greenwich library: 3 copies ~ view catalogue entry

CSS Mastery - Advanced Web Standards Solutions (2nd Ed.) by Andy Budd

CSS Mastery - Advanced Web Standards Solutions (2nd Ed.)

As its title suggests, this book picks up where Dan Cederholm's book (Web Standards Solutions) leaves off. Essentially, Andy Budd gives us more of the same. More methods, more power, and being a more recent publication, more “now”. The book covers many of the same topics as Designing with Web Standards but just takes them to the next level. The two books, though, are not interchangeable. Beginners are strongly advised to work with Dan Cederholm's book first and then move on to this one. There is lots of really nice stuff in this book but if I were pressed to pick one section over the others, it would be the two chapters on Styling Links and Creating Nav Bars. They contain some lovely methods with beautiful results.

CSS Mastery - Advanced Web Standards Solutions (2nd Ed.) is available at Amazon.co.uk

Preview CSS Mastery - Advanced Web Standards Solutions (2nd Ed.) at Google Books

Greenwich library: 4 copies ~ view catalogue entry

Simply JavaScript by Kevin Yank and Cameron Adams

Simply JavaScript

The best JavaScript book for beginners used to be "JavaScript for the World Wide Web" by Tom Negrino and Dori Smith but it has lost it's way in recent editions and has failed to keep up with JavaScript's recent renaissance. So, the crown for best beginner's book on JavaScript (in my opinion) goes to Simply JavaScript by Kevin Yank and Cameron Adams. Published in June 2007, the book is written from the ground up as a modern introduction to JavaScript for those who have never done any scripting before.

The book begins by placing JavaScript in context; so before a line of code is written, the reader is given a tour of the three layers of the web (structure, presentation and behaviour). Chapter 2 gives a very simple and clear introduction to programming with JavaScript covering such basics as syntax and data types etc. Chapter 3 introduces the DOM and puts it at the heart of JavaScript development. Chapter 4 looks at JavaScript events and uses some great examples to illustrate the concepts. Thereafter, chapters focus on specific webpage functions such as animation and the enhancement of forms. Of course, no modern book on JavaScript can be complete without a chapter on Ajax and this book does not disappoint. There's a very good introduction to the topic and some good examples to back-up the ideas.

Despite the fact that this book is aimed at beginners, it is comprehensive and covers all the important topics thoroughly, is written in a mature but easy manner and is well illustrated. More seasoned web designers may prefer Christian Heilmann's Beginning JavaScript with DOM Scripting and Ajax but for those just starting out, Simply JavaScript is just the ticket. Best of all, the first 3 chapters are available as a free download from Sitepoint.

Simply JavaScript is available at Amazon.co.uk

Greenwich library: 4 copies ~ view catalogue entry

Universal Principles of Design by William Lidwell, Kritina Holden and Jill Butler

Universal Principles of Design

Universal Principles of Design, subtitled “100 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design” is essentially a directory of all those design terms and “buzz phrases” that you know you ought to know the meaning of. The authors have chosen 100 design ideas and concepts and devote a double-page spread to each. Concepts such as Ockhams Razor, Fibonacci Sequence, Iteration and Legibility (the basics that all designers must understand) are beautifully described and illustrated with excellent examples to illustrate each point.

This is a general design reference although website examples are used where appropriate. All students of design should read this book and all designers should at least consider it a check list for their own knowledge and understanding.

Universal Principles of Design is available at Amazon.co.uk

Preview Universal Principles of Design at Google Books

Greenwich library: 5 copies ~ view catalogue entry

Web Design Index by Content.05 by Günter Beer

Web Design Index by Content.05

If you need a little inspiration for the design and layout of your website, this is a great place to start. The book is organised by website type, so there are sections such as “Architecture & Interior Design”, “Design & Illustration”, “Food & Drink”, “Internet”, “Photography” etc. The variety of sites is good, ranging from graphic-strong to text based and in all cases, the design is exemplary. Such indexes are often stuffed with Flash-based site designs because they are often the most graphically rich. To its credit, this book also features a high proportion of XHTML/CSS sites that clearly demonstrate how such techniques can be used to create beautiful, sites.

This is the 5th volume of this excellent series and it's worth checking out the previous volumes also available in the library.

Web Design Index by Content.05 is available at Amazon.co.uk

Greenwich library: 3 copies ~ view catalogue entry

Design Basics Index by Jim Krause

Design Basics Index

This book is the perfect graphic design primer for those who have never previously had to think about where and how objects should be placed on a page. The book is designed as a quick reference but can easily be read through from start to finish (recommended). It covers all of the basic components of graphic design such as colour, image, typography, and the grid but it also takes a detailed look at various concepts such as hierarchy, flow, grouping and proportion.

This is a comprehensive but compact and accessible book. It is written in a clear and informal style and along the way there are numerous exercises for the reader that help to create a better understanding of the topics being discussed. Needless to say, the book itself is beautifully designed. All design students should read this book.

Design Basics Index is available at Amazon.co.uk

Preview Design Basics Index at Google Books

Greenwich library: 9 copies ~ view catalogue entry

Essential Reference Books

You may not need these books in the first instance but as your work develops, you may find that you need something more comprehensive than the references that are often appended to most text books.

The Ultimate HTML Reference by Ian Lloyd

The Ultimate HTML Reference

It may seem a bit geeky to have a whole book that just tells you what all the HTML tags are, what they do and what parameters they can use; oh, and how the various flavour of browser render them, but when the chips are down, a book like this can save your life. Well, not your life, obviously but it could save your sanity.

Since buying this book, I have found myself coming back to it again and again - it really is the authority. Not only does it contain references to all the tags you use every day but it also contains references to those tags and parameters you never knew existed. In short, this book helps you increase the width your knowledge of HTML and not just the depth. The Ultimate HTML Reference is available in a free online version at Sitepoint.

The Ultimate HTML Reference is available at Amazon.co.uk

Greenwich library: 3 copies ~ view catalogue entry

The Ultimate CSS Reference by Tommy Olson and Paul O'Brien

The Ultimate CSS Reference

This book is possibly even more useful than its HTML partner because the browser support for CSS is much more variable than that for HTML and this book documents which browsers support the various CSS properties and which do not. Again, this can be a real sanity-saver for those occasions when the browser is just not rendering a page the way you intended.

The book is organised by property type but fortunately also includes an alphabetic index, so you always have two chances of finding what you need. There is also an excellent first chapter (What is CSS?) that describes how CSS works, the syntax of CSS rules and how to link CSS with your HTML pages. The Ultimate CSS Reference is available in a free online version at Sitepoint.

The Ultimate CSS Reference is available at Amazon.co.uk

Greenwich library: 6 copies ~ view catalogue entry

Essential Periodicals

The Web is ever-changing. New ideas in webpage design come and go and you need to keep up-to-date. Sadly, most web design text books are out-of-date after 2 or 3 years and the best way to stay in touch with emerging ideas and technologies is to subscribe to regularly published magazines. The magazines described below (paper and online) are some of the best around. Great new material on Web Design is being published all the time and it's a good idea to subscribe to RSS feeds and newsletters so that you at least get a digest of what's available.

.NET Magazine (published monthly)

.NET Magazine

.NET magazine has been around for a while but over the past few years it has matured into a magazine aimed at professional web designers and serious amateurs. The monthly articles are always relevant, well researched and full of useful information. The magazine has benefited from the work of an advisory panel of net worthies, including Andy Budd and Andy Clarke.

Each month also includes a number of technical articles on various topics relevant to the course by some excellent technical writers, including Craig Grannell. It is the best paper-based web design magazine and I recommend you take out a subscription.

In recent times, .NET has developed a really useful online version of the magazine with new articles published daily. It's well worth visiting regularly or adding to your list of RSS feeds.

A List Apart (online)

A List Apart

A List Apart "for people who make websites" is an e-zine that published new articles monthly. All content is free and there is now an extensive archive of articles on a range of relevant topics.

The articles are informative and well written and are often by well-known web luminaries like Dave Shea and Jeffrey Zeldman. This is all good stuff and free, so just read it and/or subscribe to the RSS feed.

Smashing Magazine (online)

Smashing Magazine

Smashing Magazine is a fantastic resource. Articles are published daily and its focus is graphic design for the web. That's not to say there aren't plenty of technical articles on CSS, usability and interface design - there are, but it's a great place to go for inspiration and design ideas. The site also has a tutorials section, covering many graphic techniques and applications like Photoshop. The Smashing Network includes useful and relevant articles from other web blogs and magazines so it's a good central information hub.

Six Revisions (online)

Six Revisions

Six Revisions is another excellent resourse that publishes new content almost daily. Topics vary widely; there is a bias towards graphic design (in a good way) but there is plenty on coding too. All the content is of high quality and all relevant to this programme. Tutorials are archived, so if you need to learn how to make web buttons in Photoshop, how to use visual weight in your designs or how to reset your CSS, there's a tutorial for that.

Impressive Webs (online)

Impressive Webs

Impressive Webs is a bolg/magazine that publishes content every few days. It has a more technical focus and there are very useful articles and tutorials covering all the relevant coding languages; HTML, CSS, PHP etc. Content is well written and the topics are always at the cutting edge of web design. It's a great place to see new techniques for using CSS3 and HTML5 for example and for advice on how browsers behave with these new technologies.

Mashable (online)

Mashable

Mashable describes itself as a news site for social media and Web tips. In truth, it's rather more than that, covering a wide range of Web industry and technology news. As such, it's a great way of keeping up-to-date with what's going on in the online world. News items cover all the big players such as Google, Apple, Facebook, Microsoft and the like. News articles are published frequently (too many each day to read everything) but just scaning through the headlines is a good way to get an overview and then dip in to the ones of particular interest.

A Web Design Toolkit

Although many web designer/developers will prefer to work with applications like Dreamweaver and Photoshop for maximum flexibility and functionality, it isn't really necessary. A perfectly adequate toolkit can be had for free. The applications listed below are all you need to create brilliant web pages.

Basic Web Dev Toolkit (free)

Both Notepad++ and Firefox are available as portable apps for the PC and can be taken with you wherever you go on a USB stick. Firefox portable for OS X is also available.

Some alternatives worth considering

Aptana StudioWrite your HTML and CSS code in Notepad++, create and edit your images in Paint.NET, preview and check the results in Firefox and then upload to your web server using Fire FTP.

If you prefer working in an integrated development environment, take a look at Aptana Studio. In a nutshell, it's Dreamweaver without the WYSIWYG editor and because it's open source, there is a free version.

Tutorials

FTP (File Transfer Protocol)

Files are copied from your local computer to the web server using a protocol known as FTP. To make the transfer, you need an FTP client - a software application. FTP clients such as FileZilla, Cyberduck and SmartFTP are commonly used for uploading files to web servers. However, software applications like Dreamweaver have their own built-in FTP client and can also be used for uploading files.

FTP Security

Unlock FTPSome hosting services require that you unlock FTP on the web server before uploading files. This is a security feature and although it's an extra step in the process, it is good practice to keep your website as secure as possible by restricting FTP access.

If your website is hosted with Eco Web Hosting, you will need to login to your control panel and unlock FTP before atempting to upload files with your FTP client. There are 2 options for unlocking: time and IP address. In most cases, the simplest method is to unlock FTP for a set time period, during which you can upload files to the server. When the set time has elapsed, FTP is automatically locked again. The alternative method is to unlock FTP using your IP address. Unlocking this way means that files can only be uploaded from your current IP address. This method is a good option if you have a fixed IP address but as most broadband ISPs use dynamic IP addresses (they change every time your router reconnects to the Internet), it may not be convenient. This is especially true if you upload files to your site from different physical locations.

Connecting to your webspace with FileZilla

If you are using Eco Web Hosting, make sure you have unlocked FTP (see above) before you begin.

FileZilla
  1. Enter the host name e.g. "www.webdesignstuff.co.uk".
  2. Enter your username in the form "username@webdesignstuff.co.uk".
  3. Enter your password.
  4. Leave the "Port" option blank and click the "Quickconnect" button. You should see the file listing of your personal folder.
  5. Be sure to upload your files to the web root folder; this is usually called public_html.
FileZilla

The index.html file is your personal homepage and may be edited. Do not edit or remove any of the other files or folders you find on the web server - they are there for a reason.

FileZilla

You can download the FileZilla FTP client here.

Connecting to your webspace with Dreamweaver

During site definition, click the "Advanced" tab and then select the "Remote Info" category.

  1. Set the Access type to "FTP".
  2. Enter the FTP host name e.g. "www.webdesignstuff.co.uk".
  3. Leave the Host directory blank. Your account details will default to your home folder so you do not need to specify it.
  4. Enter your Login username in the form "username@webdesignstuff.co.uk" and enter your password.
  5. Click the "Test" button to make sure you can connect.
Dreamweaver Remote Info

My first web page - video tutorials

WordPress - video tutorials

Other - video tutorials

Copyright David Watson 2005–2014
XHTML, CSS