03 - Website Layout and Assets v2

• Computing
• Lower Secondary (Key Stage 3)

03 - Website Layout and Assets

Starter

1: Open a similar website to your idea for reference.

i.e. if it's a restaurant, open the website for your favorite restaurant.

2: If you were away or have lost your work, open this template to continue your work from: CLICK HERE

What is an asset?

1. Content writing
2. Website code
3. An object on a website
4. A part of CSS

What is website layout?

1. Graphic design
2. Arrangement of assets on a webpage
3. Coding HTML
4. A broken website

KO: Adding assets to and publishing a website

Outcomes:

All - Add assets to a website

Most - Create a suitable layout for their website and choose suitable assets

Some - Understand how to make a website accessibel to a wide range of users

What is Website Layout and Assets?

Website layout and assets are the visual elements of a website like graphics, images, videos, and other objects that help to create an aesthetic experience for the user.

Explain the purpose of website layouts and assets.

Types of Layouts and Assets

There are three types of website layouts and assets: Static, Responsive, and Adaptive.

Discuss the three types of website layouts and assets.

Static Layouts

Static layouts are designed with fixed widths that cannot change. They are best used for sites with limited content or where images and graphics are more important than content.

Explain the advantages and disadvantages of static layouts.

Responsive Layouts

Responsive layouts are designed with changeable widths that can adapt to different device sizes. They are best used for sites where content is the focus.

Explain the advantages and disadvantages of responsive layouts.

Adaptive Layouts

Adaptive layouts use predefined breakpoints to adjust the layout of a website for different size devices. They are best used for sites with large amounts of content.

Explain the advantages and disadvantages of adaptive layouts.

Design Tips

When designing websites, it’s important to consider the layout, messaging, navigation, colors, fonts, and more.

Discuss important design elements to consider when designing a website.

Best Practices

When using web assets, make sure to use high-resolution graphics, optimize images for web use, and use appropriate file formats.

Discuss best practices for using web assets.

Conclusion

Web layouts and assets are important for creating a great user experience on websites. It’s important to consider design elements, types of layouts, and best practices when using web assets.

Summarize the key points of the lesson.