Create and edit web pages 4 Learning Aim C

Introduction In this section we will look at how you can use colour schemes, styles and templates to create a consistent look and feel to your website and how accessibility features can be used to give all users a good experience of your website.

Accessibility features Accessibility features are important as visually impaired people may wish to view the site using a text-to-speech reader. The text reader reads out the alternative text tags for the non-text features of your site including images, forms and tables.

Accessibility features When your cursor is in a table, the properties panel at the bottom shows the properties of the cell your cursor is in. To change the properties of more than one cell, select the cells you want to change.

Accessibility features You can change the text alignment and formatting of content. You can also resize columns and rows by dragging the borders.

Accessibility features Most modern browsers also allow users to zoom in and out of their view of the site. By zooming in, a user can view a site at a much larger size than normal.

Colour schemes, styles and templates - Page layout There are two main ways in which you can create multi-section page layouts for your web pages, including elements like title bars, side bars (content boxes which run down the side of the page) and main content areas. Using a table to achieve this type of page layout is fairly easy and individual cells within the table can be used to create each section of the page. You can use the table properties (e .g. table width) to set the size, position and colour scheme of each section.

Colour schemes, styles and templates - Page layout An alternative method is to use cascading style sheets (CSS), although it is more flexible, this method is also more complex. You can set up CSS styles with colour scheme, width and alignment settings, and then use sections within your page formatted with these styles. Text will wrap within both a table cell and CSS section at the right-hand edge of the cell or section, and you can adjust the gap between the edge of the text and the edge of the cell or section using the cell padding (in a table) or padding (in a CSS style) property.

Cascading style sheets (CSS) With cascading style sheets, you don't need to format the text and other items on each page individually. Instead, you create a single set of formatting styles in a separate file, which is then applied to all the pages in your site.

Cascading style sheets (CSS) Dreamweaver® comes with some template style sheets for you to use, although you can also create your own. Try the sample ones included with Dreamweaver®.

Cascading style sheets (CSS) Remember this is not a web page - it's a style sheet that is used with a web page. Each style name is shown in purple and then in between the brackets, the formatting that applies to that style is listed in blue.

Cascading style sheets (CSS) To use this style sheet, you need to save it in your local site folder.

Cascading style sheets (CSS) CSS can also be used to create sections or boxes within your web pages, such as headers, side bars and footers. You can use SECTION tags to create these sections in web pages, and CSS styles to format and position them.

Cascading style sheets (CSS) Creating complex page layouts like this isn't easy, so Dreamweaver® comes with some pre-set CSS layouts.