iMedia Genius Creating a Website with Dreamweaver

Get your assets ready

Export your banner, buttons and images from Canva and save them into img/.

Set up your workspace

Dock panels, reset the workspace if needed, and work in Design view (not Live View).

Watch • Pause • Do

Watch ~30–60 seconds, pause, build that bit, then repeat.

Build a complete website step-by-step

Use the videos to build your site in small chunks: watch ~30–60 seconds, pause, build that part in Dreamweaver, then repeat. This is the fastest way to learn without getting overwhelmed.

ESSENTIAL DREAMWEAVER SETUP (DO THIS FIRST!)

1) DEFINE YOUR SITE IN DREAMWEAVER (SO IMAGES + LINKS WORK):
  • Site → New Site…
  • Site Name: e.g. MyWebsite
  • Local Site Folder: choose your project folder (the folder containing index.html, style.css, and img/)
  • Save
2) SNAP THE PROPERTIES WINDOW INTO PLACE (SO YOU CAN EDIT QUICKLY):
  • Window → Properties (turn it on if missing)
  • Drag the Properties bar until it docks/snaps into the workspace (usually along the bottom)
  • If panels are messy: Window → Workspace Layout → Reset
3) USE STANDARD MODE:
  • Make sure you are in a standard workspace layout (reset if needed)
4) SWITCH TO DESIGN MODE (NOT LIVE VIEW):
  • At the top of the document window, choose Design
  • Turn OFF Live View (it can make editing confusing)

How to use the videos (do this every step)

You cannot watch the whole video and remember every step. Instead: watch ~30–60 seconds, pause, then build that section in Dreamweaver. Repeat. Split your screen so you can see Dreamweaver and the video at the same time.

Quick links

Get your assets ready Set up your workspace Watch • Pause • Do

Submission tip

  • Keep everything in one folder (pages, css, images).
  • No broken links: click every nav link before you submit.
  • File names: no spaces (use dashes).

Steps (with tips)

1 Video tutorial

Making the Banner

Design a strong banner in Canva and export it ready for web.

Tip: Keep the banner width consistent (1200–1600px). Export PNG for graphics, JPG for photos.

Open Step 1
2 Video tutorial

Saving Graphics from Canva

Export and organise images so your website stays tidy and easy to build.

Tip: Use clear names like logo.png. Avoid spaces in file names.

Open Step 2
3 Video tutorial

Creating Website Buttons in Canva

Create navigation buttons that look consistent across the whole site.

Tip: Make all buttons the same size. Check contrast so text is readable.

Open Step 3
4 Video tutorial

Setting up Dreamweaver

Set up Dreamweaver properly so links, images and panels work as expected.

Tip: If something is “broken”, it’s usually because the site isn’t defined or you’re in Live View.

Open Step 4
5 Video tutorial

HTML Layout / Structure

Build the page layout using header, nav, main content and footer.

Tip: Keep content inside a container so it doesn’t stretch too wide.

Open Step 5
6 Video tutorial

Creating a Template HTML Page

Create a reusable template so every page matches your design.

Tip: Copy the template to create new pages (don’t start from scratch each time).

Open Step 6
7 Video tutorial

Setting up Website Pages

Create your site pages and connect them with navigation links.

Tip: Use simple names: about.html, gallery.html, contact.html.

Open Step 7
8 Video tutorial

Adding Text

Add content and images neatly so your layout stays consistent.

Tip: Resize images before importing. Add alt text for accessibility.

Open Step 8
9 Video tutorial

Adding Images

Improve layout and readability so pages don’t become cluttered.

Tip: Use headings (H2/H3) and white space. Keep paragraphs short.

Open Step 9
10 Video tutorial

Adding a YouTube Video

Embed a YouTube video and keep it responsive on phones.

Tip: Use the embed iframe code. Don’t paste the normal YouTube URL into the page.

Open Step 10
11 Video tutorial

Embed an MP4 Exported from Canva

Export an MP4 from Canva and embed it into your website.

Tip: Keep file sizes sensible (720p is usually enough). Large MP4s load slowly.

Open Step 11
12 Video tutorial

Adding a Map

Embed a map and make sure it displays correctly on all screens.

Tip: Choose a useful zoom level. Check it doesn’t overflow on mobile.

Open Step 12
13 Video tutorial

Adding a Data Capture Form

Add a form and understand what data is being collected and where it goes.

Tip: Only collect what you need. Test your form properly.

Open Step 13
14 Video tutorial

Adding an HTML Gallery to a Website

Finish/polish your site: consistency, spelling, spacing, navigation checks.

Tip: Click every link. Fix broken images. Preview on a phone-sized screen.

Open Step 14
15 Video tutorial

Building a Whole Website in Canva

Final checks and publish-ready export for GitHub Pages.

Tip: Keep a backup. Ensure your homepage is called index.html.

Open Step 15