Practical Web Design for Absolute Beginners

The chapter also contains advice on using free programs to enable you to produce the book’s website projects. You will learn that all websites have a standard basic structure for web pages. You will then produce your first web page structure that will form the basis of many subsequent projects and most of the adaptable templates in the book.

In this chapter you will learn how to produce hyperlinks that will enable you to move from page to page using the mouse, touch pad, or touch screen. This is essential for all websites that have more than one web page.

The easy way to style web pages is to put the styling instructions in a single external style sheet and link every page to that style sheet. A style sheet is simply a collection of instructions that tell the browser how to style the elements on a page. If we link each page to the single style sheet, the work involved in changing a website’s appearance is reduced substantially. The appearance of all the pages in a whole website can be made by a change in the single external CSS style sheet. The change cascades into all the pages that are linked to the style sheet.

Web pages are normally divided into three or four vertical columns. Before the advent of browsers that were capable of fully understanding CSS, page columns were created by using tables; this practice has now been deprecated (made obsolete and unacceptable). In fact, the inventors of HTML never intended that tables should be used for page layout.

The new style page will be created by means of small amendments to the files you created in the previous chapter.

Pictures are an important part of a website, and of course they should be chosen to suit the theme of the website. Pictures must be optimized so that the browser downloads the picture to the screen quickly. We will add pictorial content to the website that you produced in the previous chapter. This chapter contains the following sections:

In this chapter we will enhance the website that we produced in Chapter 6. The improvements consist of measures to make the site accessible to all browsers including the obsolescent Internet Explorer 8. Font sizes will be specified in percentages instead of point sizes to provide a more flexible way of adjusting fonts.

Although they worked well, the menus in previous chapters were very plain and not very professional. In this chapter we will use CSS to improve the menu’s function and appearance.

The proper use of color can affect the user’s decision about whether to stay with your website or switch to a more appealing one. Color can affect the mood of a website and also reflects the purpose of the site.

This chapter describes a way of coping with the multitude of screen sizes and resolutions. It also provides a method for creating rounded corners on borders. You will also create four useful templates.

This chapter shows you how to produce a practical website by adapting one of the templates that we created in Chapter 10. Chapter 11 contains the following sections.

This chapter uses one of four new template files that you can download in the zip file named templates-h.zip, and this will save you a great deal of coding time. I will describe how a vertical menu block is converted into a horizontal row of buttons. The template files are adaptations of the templates that we created in Chapter 10, the only difference being that the new templates have horizontal menus. By using a horizontal menu we will have enough room to add one extra picture per row.

Browsers will display three image file formats. In this chapter, the three formats are described and their pros and cons discussed.

A website with many pages will need many more menu buttons, so the simplest approach is to create an additional menu block so that pages have both vertical and horizontal menus.

The previous chapter demonstrated how tiles can be used for backgrounds in websites. This chapter contains instructions for creating your own background tiles to match the theme of your website.

Tables should never be used for page layout, although in the past many web designers used them for this purpose. The practice is now deprecated (obsolete and bad practice). Tables must now be used only for the purpose for which they were originally intended, i.e., for presenting data.

To ensure success a website must be: Carefully planned, attractive and useful. It should also be based on a knowledge of web-user psychology (how users access and view websites).

Many websites use a feedback form so that users can interact with the owner of the website. This chapter describes how to create a typical form. The project will demonstrate once again that HTML code uses only plain English words or abbreviations of English words.

When you eventually launch a website on the World Wide Web, you hope it will be found as soon as possible by search engines such as Bing, Yahoo! and Google. This chapter contains the following sections that will help you to maximize the probability that your site will be found.

Elements can be positioned accurately on a web page by using CSS styling. The two types of positioning are Absolute positioning and Relative positioning. You used absolute positioning in many of the previous projects; this enabled you to locate an element (such as the header text) at a fixed position relative to the top and left edges of a browser’s viewport. Relative positioning moves an element from where it would normally appear on the page. Several other positioning techniques are also described in this chapter.

If you have worked through the projects so far, you will have experienced the tedium of modifying the menus in every page of a website. Imagine the work involved in modifying the menus in each page of a website with 20 or more pages. In this chapter you will learn a simple piece of code that will enable you to modify all the page menus in a website by amending only one file.

The previous chapter explained the advantages of using the PHP include command. In this chapter the considerable advantages will be demonstrated in greater detail. In Chapter 21 we only used the include commands in the home page index.php. In this chapter we will create new pages and use the include commands in every page of an eight-page website. All the new pages will be adaptations of existing pages.

By using a PHP form-handler to process the feedback-form contact.php, we can provide a reasonably spam-free way of receiving emails. Also the information entered by the user can be filtered to remove malicious content. This exercise is not intended to create a fully worked website; its purpose is to demonstrate a PHP form-handler. Therefore the content of the pages will be deliberately brief to save time and space, and we will use all the pages from the previous chapter as a basis for this chapter.

The first part of this chapter deals with the use and misuse of video and slideshows. The second part describes how to add videos and slideshows to a web page. The chapter does not contain a project, but it gives a full description of how to embed slideshows and videos within a web page. I have also provided examples so that you can view a video and a slideshow. The download folder for this chapter contains a fully worked website with 11 pages. Since the advent of HTML5, the task of incorporating videos has become much easier.

Tab menus are sometimes used in smaller websites with few pages, say a maximum of 12 pages. Tab menus are not particularly suitable for large sites because of the limited number of tabs that can be placed across a page. In this chapter you will view a ready-made website with six tabs so that you can see how the tabs work. Because people learn by doing and not by reading, you will be asked to add two more pages and two more tabs.

In the previous chapter we explored tab menus; tabs can also be created as drop-down menus. However, in the past, I would never use drop-down menus in my own websites and I used to advise my clients to avoid them. I could not see the point of hiding page links behind drop-down menus. Since the advent of mobile phones capable of viewing websites, I have been forced to change my mind because drop-down menus take up less space on the tiny screens of mobile devices. Drop-down menus for mobile devices are described in Chapters 36 and 37 of this book.

Drop shadows can be created in many ways. Most graphics programs can create drop shadows for images, but with the advent of CSS3, the process is greatly simplified.

This project is suitable for a small society or club. It hides certain information from the general public but makes it available to members (or a restricted group of members such as a committee). We achieve this by means of a user name and password.

However, some people prefer to pay by check because either they don’t have a PayPal account, or they feel uncomfortable about divulging their debit/credit card details over the Internet. To avoid losing sales, we should make provision for payments by PayPal, card, and check. The traditional way of achieving this is to have an ordering page that presents the user with a choice of payment methods. If users choose to pay by PayPal/card they will presented with an appropriate page where they can select the goods and see the total cost before clicking the “Buy Now” button.

A search field can increase a website’s usefulness, or it can draw people away from your site, depending on how it is implemented. If you choose to provide search capability on a specific website, this presents no problem. The search results will concentrate on that particular website, but occasionally one or two other websites might show up among the search results.

The appearance and positioning of bullet points can be modified using CSS. This overcomes a problem associated with the default bullets in multicolumn text pages. This chapter contains the following sections to enable you to customize the bullets and to improve the layout of bulleted text:

Users should be able to navigate to another page from anywhere within the site; this is also vital for search engine optimization. It is also important that users should know exactly which page they are currently viewing; there are two indicators that will inform the user. The technique described in this chapter is suitable for a small website (say up to 12 pages). For a large website you could generate the menu on each page using PHP includes and then use an interactive PHP technique to highlight the clicked menu button. That PHP technique is beyond the scope of this book for absolute beginners.

The previous chapter described how to provide a page indicator on a horizontal menu button. This chapter uses a vertical menu, which presents us with a problem; the user might be uncertain whether a black line refers to the menu button above the line, or the menu button below the line. The solution is to add a line around the entire clicked button.

In this chapter you will create a menu with two rows, and a picture gallery with four rows of pictures. The chapter consists mainly of description and explanation with very little project work.

The great majority of websites designed for desktop computers can be viewed on a tablet and a smartphone; however, problems may be revealed when the site is displayed on the smaller devices.

The menu will be rearranged and augmented by means of a basic drop-down menu. This will allow several new pages to be added to the website. The previous menu used large buttons suitable for touch screens on smartphones. You might be tempted to use smaller buttons to allow more to be squeezed into a smartphone screen, but this would make them too fiddly to operate easily.

Many responsive websites collapse the navigation menu into a single button or icon for narrow viewports. The single menu button or icon can be clicked to expose the other navigation buttons. This technique allows plenty of room on the smartphone’s viewport for content. When this technique is combined with a drop-down menu, a website can have additional pages.

This chapter begins with a reminder and summary of media query formats for a responsive website.

DIY (CMS) programs have helped millions of unskilled people to produce millions of dreadful websites.

You will require a domain name, a host, and a file transfer program to launch your website so that the whole world can view it. This chapter gives guidance on choosing a domain name and a host. Instructions are provided for installing and using a free file transfer program that will enable you to place a copy of your website in the host’s folder. The section on validating your web pages will help you to troubleshoot your code and ensure that your code conforms to the W3C standard.

This chapter is for reference only and contains no projects. Its sections are as follows:

An HTML text editor is essential for producing customized fast loading websites. Chapter 1 provided a list of free text editors, and it stated that you should refer to Chapter 42 for instructions on downloading, installing and using a text editor.