Student Pages | Weeks 3 & 4 | Weeks 5 & 6 | email Ms Bolognani

Day 7

Friday Fun Site: Four Squares Check out the code on this.

The class will continue to work in Dreamweaver on the sample page with attached sample CSS. Try adding your banner that should be saved as .jpeg.

HTML for Adding an Image: <img src="your image.jpg" alt="a name for your image">

Once you have successfully added your banner - go to the Navigation Bar Tutorial and try them out. Copy and paste code that you like and add it to your sample.html and sample.css.

Please move the 2 sample files into the assign folder.
You are now ready to start your personal homepage. Open up a new html page in Dreamweaver. Remember to clean up the code. Name this file index.html and save it in your folder.
Make a CSS page to use with index.html and save it in your folder.

Day 6

Today we will look at Dreamweaver and CSS (Cascading Style Sheets)
Tasks:

  1. Open Dreamweaver and start a new page using html. View in code and design so that you can see what it looks like when you change your code.
  2. Try placing your banner on the page.

    HTML for Adding an Image: <img src="your image.jpg" alt="a name for your image">

  3. Start a Cascading Style Sheet in Dreamweaver
  4. A sample html page and the CSS page that goes with it.

  5. FTP using FileZilla

Day 5

  1. Decide on which wireframe you want to use.
  2. keyboard
  3. Folders you need to have. Create a folder and name it first initial and last name. Use all lower case letters. Betty Smith would be bsmith. Inside this folder create 2 more folders. Name one images and the other assign (short for assignments.)
  4. Work on your banner and when it is finished save it as a .jpg in the images folder.
  5. Work in photoshop on tutorial 2 - Photoshop Tutorial 2  


divider

Day 4

Creating Wireframes -To build a web site that has multiple web pages you need to start with some planning. The wire frame is a sketch of your site layout that includes what you will put on the page and where it will be on the page. A wireframe keeps each page on your site uniform.

Take some time to think about what you want your page to look like. Start by looking at the layout of a few web pages that you like. Make a list (Collins Type 1) of the sites to share with the class.

wireframe example
Above is an example of a wireframe. Here is another example.

Draw your wireframe on paper. You can sketch out a couple of different ones. Wireframes are always done without color, fancy fonts, or other design features. They are just a blueprint for your site.

Your first web site will be a site about you.

There will be three pages. Each page needs to include a banner, an image, and some text, a footer that includes email and date, and navigation links to the pages in your site and a link to Twin Valley MS/HS.


The Pages:
  1. Home page -This is the first page people will see when they click on your link.
  2. Sport, hobby or something from the year you were born
  3. Assignments - you post assignments on this page or link to them from here

Rubric for the website.

Assignment Due Date
Wireframe September 5
Banner September 7
CSS September 11
Navigation Bar and footer September 13
Images September 17
Personal Web Pages September 19

Day 3

Fun Friday website: https://www.patatap.com/

Here are some things you should know about…
Common file naming conventions

. (dot)
is used for file name extensions
Quotation marks are reserved for HTML to indicate the value of tags and attributes
/
Slashes indicate flies are nested in folders.
:
Colons are used to separate certain script commands. Avoid using them in your file names
!
Exclamation marks are used in comment tags.

File name extensions

.htm or .html These two extensions are commonly used to denote an HTML file.
.gif GIF images
.jpg JPEG images
.png PNG images
.psd a Photoshop file
.swf Adobe Flash files
.avi AVI Flash video files
.mp3 sound file

 

View Source Code

On Firefox - Click on Tools > Web Developer > Page Source

On Chrome - Click on View > Developer > View Source

The class will use text editor on Macs to code or on Chromebooks coding with Caret.

Chromebook App for HTML editing and photo editing.

Open up Web Store and search for Caret - and add that app. Then search for pixlr editor and add that app.

Start a document using Caret. You will use html5 coding. Here is the format that you will need to use and some definitions of each section.

You will save this 2 times. The first time you will use save as and name it sample. The second time you will use save as and name it sample.html

Next, click on sample.html and see what happens.

Go back to the code and add some more code and information. You can save your files: create a new folder called sample html.

If you are working on a Chromebook you will need to save this to Google Drive but keep the folder name so you know where your work is.

If you have time you can work on your banner or try this Photoshop tutorial.

Photoshop Tutorial 2     

Day 2

Today you will use Photoshop to edit a couple of pictures and then create a banner for your first web page about yourself.

The first project will be 3 pages that include navigation, pictures and text.

We will also go over file naming conventions and a few terms that you will need to know.

There are some great alternatives to Photoshop! pixlr.com is web based and works on Chromebooks and krita.org looks promising, but is a download.

Photoshop tutorial and pictures to download:

Photoshop how to make a banner.

 

Welcome

Welcome to your Web Design class website. Each week the new assignments and handouts for class will be found here. The newer assignments will be on top, but you can always check past assignments as they will stay here, just move down the page as more assignments are posted. By the end of the semester you will have created a whole body of work, your ePortfolio (electronic portfolio) in the form of a personal website. Your website ePortfolio will be your final exam. Your work will be graded as it appears online.

You will learn how to design and manage web pages and put work online as well as create and manipulate images to make your web sites more interesting.

You can stop in the library during your ac lab or email me with any questions or problems.

Class Expectations:

Class 1

Technology is all around us. We live in an amazing time period. We have access to so many great products that were never available before. How is technology used in your everyday life?

Today we will take a look at some history of the world wide web (www) and some fun sites.

The first web page: http://info.cern.ch/hypertext/WWW/TheProject.html

More history of the web https://www.fastcompany.com/3039402/the-history-of-web-design-explained-in-9-gifs

Evolution of the web: http://www.evolutionoftheweb.com/

Task: Take a look at this site http://tenyearsago.io/ Choose a couple of items to look at. Write down your answers to share with the class.

1. Something that amazed you. 2. Something you did not know about. 3. What does this all mean for the future?

You will have 15 minutes to complete this task.

Part 2

Crazy Card Trick https://www.crazycardtrick.com/

You will start your web design by learning the language, Hyper Text Markup Language - HTML. Click here for a tutorial practice. Please work on this page - Chapter 1. These codes are the basics and every web page uses them.

Try using h2, h3, h4, etc. to see what happens.

Be ready to share one or more ways you think technology has improved our world. And, are you ready for coding HTML5?