Web Design II SS2 Digital Technologies Lesson Note
Download Lesson NoteTopic: Web Design II
In our last lesson, we learned about the “bricks” (HTML) and the “paint” (CSS). Today, we are going to learn how to put them together to build a real, functioning website.
Building a website is like cooking a meal: you need the right ingredients, a recipe (the plan), and a plate (the layout) to serve it on.
Planning Your Website (The Wireframe)
Before you touch a keyboard, you must draw. Professional designers use something called a Wireframe.
A wireframe is a simple sketch of where things will go. You don’t worry about colors or pictures yet; you just draw boxes for:
- The Header: Where the logo and site name go.
- The Navigation Bar: The menu (Home, About, Contact).
- The Main Content: Where the story or information lives.
- The Footer: The bottom part with copyright info and links.
The Folder Structure: Staying Organized
A website isn’t just one file; it’s a collection. If you don’t organize them, your images won’t show up, and your links will break.
The Golden Rule: Create one main folder for your project (e.g., “My_First_Website”). Inside it, you should have:
- index.html: This is always the name of your homepage.
- style.css: The file for your design.
- images folder: A folder to keep all your photos.
Teacher’s Warning: Never name your files with spaces (like “My Photo.jpg”). Use underscores (“My_Photo.jpg”) or the browser will get confused!
Linking HTML and CSS
To make your “Paint” (CSS) work on your “Walls” (HTML), you have to connect them. You do this by adding a special line inside the <head> section of your HTML:
<link rel=”stylesheet” href=”style.css”>
Once this link is active, any change you make in the CSS file will instantly change the look of your HTML page.
Basic Page Layout (The Box Model)
Everything you see on a webpage is actually inside an invisible box. To be a good designer, you need to understand the Box Model:
- Content: The actual text or image.
- Padding: The space inside the box (between the text and the border).
- Border: The line around the box.
- Margin: The space outside the box (to keep other boxes away).
Stepped Guide to Creating Your First Site
Step 1: The Structure
Write your HTML. Use <div> tags to create different sections for your Header, Content, and Footer. Think of <div> as a container or a “wrapper.”
Step 2: Adding Content
Fill your containers with <h1> for titles, <p> for stories, and <img> for your pictures.
Step 3: Styling
Open your CSS file. Give your header a background color. Change your font to something clean like ‘Verdana’. Use text-align: center; to put your titles in the middle.
Summary Table: Common Layout Tasks
| What you want to do… | The CSS Code to use… |
| Change background color | background-color: #colorname; |
| Move text to the middle | text-align: center; |
| Change how wide a box is | width: 80%; |
| Add space inside a box | padding: 20px; |
| Change the font style | font-family: Arial; |
Class Project: The “School Club” Website
In the lab, every student will create a 1-page website for a school club (e.g., Press Club, Football Team, or Music Club).
- Sketch your wireframe on paper.
- Create your folder and the index.html file.
- Code the header, a brief “About Us” section, and a list of members.
- Style it using CSS to match the club’s colors.
First Term Digital Technologies Lesson Notes for Other Topics
Web Publishing and Hosting
Explore lesson notes covering all topics.
Advanced Word Processing Tools
Explore lesson notes covering all topics.
Advanced Spreadsheet I
Explore lesson notes covering all topics.
Advanced Spreadsheet II
Explore lesson notes covering all topics.
Advanced Presentation Tools
Explore lesson notes covering all topics.
Web Design I
Explore lesson notes covering all topics.
History and Evolution of Digital Technologies
Explore lesson notes covering all topics.
Introduction to Renewable Energy
Explore lesson notes covering all topics.
Operating System (OS)
Explore lesson notes covering all topics.
Introduction to Digital Technologies
Explore lesson notes covering all topics.
Number System
Explore lesson notes covering all topics.
Computer Hardware
Explore lesson notes covering all topics.
Computer Maintenance and Safety
Explore lesson notes covering all topics.
Data Representation and Safety
Explore lesson notes covering all topics.
Lesson Notes for Other Classes
Basic 2 Lesson Note
The complete lesson note to guide your studies.
Basic 3 Lesson Note
The complete lesson note to guide your studies.
Basic 4 Lesson Note
The complete lesson note to guide your studies.
Basic 5 Lesson Note
The complete lesson note to guide your studies.
Basic 6 Lesson Note
The complete lesson note to guide your studies.
JSS1 Lesson Note
The complete lesson note to guide your studies.