Interactive Web Design 5 - Week 2 - Introduction

1. Interactive Web Design 5
Introduction January 13, 2015
Week 2

2. Introduction
Our goals:
• Further your understanding of
CSS and HTML
• Introduce Bootstrap framework for
responsive design
• Review content management system
(CMS) options
• Build a portfolio website using
Wordpress
• Look at ways to get found online

3. Course description
“Create a personal portfolio
website that includes social media
elements, forms and various
levels of interactivity.
Integrate technologies and
methodologies such as e-
marketing strategies, reserving a
domain name and web site
hosting.”

4. What we’ll cover
5 modules:
• Module 1: CSS basics
• Module 2: Using CSS to create image rollovers
• Module 3: Bootstrap framework
• Module 4: Templates using Dreamweaver
• Module 5: Creating a Portfolio in Wordpress
Each module contains:
• In-class lecture content
• Online learning/independent study content
• 10-20 question quiz based on the independent
study content and activities
• In-class exercises and assignment

5. Online learning
• Short videos (a few minutes each)
• Reviewing video content before class
will helps to prepare you for the in-class
instruction and tasks
• Complete the quiz after each video
Each video/quiz component is worth
4% of your mark for a total of 20
(…there are 5 of them)

6. Course schedule and
assessment
(Let’s flip into eLearn to review…)

7. Katherine McCurdy-Lapierre
Please call me Katherine
• Work full time in Marketing at Mohawk College as the
Creative and Web Services Manager/Art Director
• Employed as a Graphic/Web Designer for the past 15 years
• Registered Graphic Designer with RGD Ontario
• Contact me via eLearn email
Your instructor

8. HTML & CSS Review
• HTML and CSS basics will be covered in the Online
Learning content for this week
• Please review and complete the quiz before next class
Today:
• Review how to define a site in Dreamweaver
• Saving images for web (file types)

9. Module 1
Defining a site in
Dreamweaver
We’ll be using Dreamweaver to
work on Exercise 1.

10. Why do we define our site?
• Dreamweaver was designed to
create websites; other editors
were designed to create
webpages
• Defining a site Dreamweaver
allows it to resolve links, check
related files or help you manage
any of your assets

11. Question:
On the web, what is the difference
between
relative and absolute paths?

12. Answer:
Absolute Links:
• specifies a fully-qualified URL
• the protocol
(eg. http://)
+ domain name
(eg. www.canada.com)
…may also include:
a file name / path
(/articles/2014/why-vote.com)
• This link is accessible from anywhere on the web:
http://www.canada.com/articles/2014/why-vote.com

13. Answer (continued):
Relative Links:
• specifies a path to a page or file from the current
page
• E.g., links on “PageB.htm:”
• Link to “PageA.htm” will look in the same folder
• Link to “../Application3/Page1.html” will look up/out
one folder to find the “Application3” folder, then
look for Page1.html within it
• “../file.html” will look up/out of folder for the file (no
file exists in the example to the right)
• Dreamweaver helps to build relative links correctly
• Corrects them if you move files/folders

14. Defining a site in
Dreamweaver
• Websites are a collection of files and folders
with links connecting them
• Standards have emerged when structuring
your site, e.g:
• Images and graphics go in a folder called
“assets” or “images”
• CSS files go in a folder called “CSS” or
“style”
• Javascript files go in a folder called “JS”
or “scripts”
• Using this typical structure helps keep the
site organized
• Allows other site editors or developers to
easily find files

15. Let’s open Dreamweaver

16. Defining a site in
Dreamweaver
1. Decide what the root folder is. When you define
your site, this is the folder that you'll point Dreamweaver
to. (For Exercise 1, this will be the folder we download from eLearn… let’s do that
now…)
2. Inside the root folder you'll structure any folders for
assets (images), video, CSS, JS, etc.
• For HTML-based sites, the folder structure is visible in the URL
(http://www.url.com/folder/folder/file.html)
• Mapping out the site structure is essential for larger sites

17. Defining a site in
Dreamweaver
3. Site’s homepage typically sits in
the root folder
• Homepage is often called index.html
4. Open Dreamweaver.
5. Ensure the Files panel is visible. If it’s
not, you’ll find it in the Menu under Window

18. Defining a site in
Dreamweaver
6. From the files panel, in the
dropdown, select “Manage Sites”

19. Defining a site in
Dreamweaver
7. From the files panel select
“Manage Sites”
• Either using beside the dropdown
• Or, from the dropdown

20. Defining a site in
Dreamweaver
7. Click “New Site”

21. Defining a site in
Dreamweaver
8. Give your site a name, e.g. Exercise1
9. Select the root folder under “Local Site Folder”
• The root folder is the one that will house all your site files

22. Defining a site in
Dreamweaver
10. You will now see the folders and files in the root folder
• Note: if you are using a public computer, do this every time
you work on your site. (You’ll need to save it to a memory
stick.) If you are using your own personal laptop you will only
have to do this once.

23. Module 1
Saving images
for the web
Review of web file types and
saving for the web…

24. Saving images for the web
Key things to remember:
• Save at size-as
• Do not insert a larger image then shrink it down
• Use the “Save for Web” tool in Photoshop and Illustrator
• Easily compare and preview how the file will appear in various formats and
qualities
• Optimize
• What is the lowest quality setting you can go while still maintaining the quality of
the image?
• Choose the best format for the type of graphic
• jpg? png? gif?

25. File format comparison
Best for… type of image Extension
JPG
• colourful, complex images
• images containing gradients or colour
blend
• creates smaller files sizes because of
lossy compression
• 8-bit grayscale images
• 24-bit color images (8 bits each
for red, green, and blue)
• no transparency
.jpg
GIF
• line art (such as one- or two-color logos)
• simple drawings
• images with no gradients or blends
• limited to an 8-bit palette, or 256
colours
• allows for transparency, matted
to a defined colour
.gif
PNG
• images with large, uniformly coloured
areas
• files size is typically larger than jpg
because of lossless compression
• 8 bit paletted images
• 24 or 48 bit truecolor
• allows for transparency on any
colour/background
.png
SVG
• images that must be scalable
• most browsers have at least some degree
of SVG rendering support
• XML-based vector image format
for two-dimensional graphics
with support for interactivity and
animation
.svg

26. Let’s open Photoshop
and try it out…