SlideShare a Scribd company logo
Interactive Web Design 5
Introduction January 13, 2015
Week 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
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.”
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
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)
Course schedule and
assessment
(Let’s flip into eLearn to review…)
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
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)
Module 1
Defining a site in
Dreamweaver
We’ll be using Dreamweaver to
work on Exercise 1.
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
Question:
On the web, what is the difference
between
relative and absolute paths?
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
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
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
Let’s open Dreamweaver
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
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
Defining a site in
Dreamweaver
6. From the files panel, in the
dropdown, select “Manage Sites”
Defining a site in
Dreamweaver
7. From the files panel select
“Manage Sites”
• Either using beside the dropdown
• Or, from the dropdown
Defining a site in
Dreamweaver
7. Click “New Site”
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
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.
Module 1
Saving images
for the web
Review of web file types and
saving for the web…
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?
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
Let’s open Photoshop
and try it out…

More Related Content

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
  • 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…