Seminole State College - Web Publishing 1 Class

Contact Mr. D school email: dufnerg@seminolestate.edu
School Email:
https://mail.seminolestate.edu/owa/
Webcourse@Seminole: https://online.seminolestate.edu/login
School Website: https://my.seminolestate.edu

My YouTube Channel: https://www.youtube.com/channel...

I recommend this book whole heartedly!!! 'HTML and CSS: Design and Build Websites'. It's GREAT for artists/designers with visual learning!!!! BUT... you don't have to have this book, and you can actually learn EVERYTHING about HTML through the http://www.w3schools.com/html/

Get it on Amazon.com for around $15: http://www.amazon.com/HTML-CSS-Design-Build-Websites


Projects: Checklist Due
1. Purchase $12 Hosting/Domain Name for a year with Godaddy.com!!!! (write down user/pass)
Home Page with links to upcoming projects
(html - one webpage)
Video Tutorial Week 2
2. Fantasy (html - one web page) Notes Week 2
3. Storm (html - 3 web pages with button navigation) Notes Week 4
4. Double Identity (5 pages linked with html / css / div) Notes Week 8
5. Dentist Website (5 pages linked with html / css / div, and Contact Form) Notes Week 12
6. Business Website (Yoga studio, Hair Stylist, Restaurant, your choice) Notes Week 16
I've been a web designer since 2002. I've been teaching since 2003. I have my Masters in Fine Art from UCF http://garydufner.com
My Master's Thesis as a book http://www.webskinz.com/gary_dufner_thesis Write HTML & CSS with:
MAC Text Wrangler: http://www.barebones.com/products/textwrangler/download.html
PC Notepad + + : Notepad-plus-plus.org/download/v6.6.3.html

Upload to hosting with:
Filezilla:
Filezilla-project.org

GET ORGANIZED!!!!
Make folders and links on 'idex.html' page to future folders
In Class Assignment:
- HTML 101
  Start here
- First HTML
This is a zip file, to open see directions below, then rewrite all code from 'write_code_in_notepad.jpg' into notepad and save as 'index.html' Directions to ZIP or unZip a File

need more html help? here are 3 more sites that may help:
- http://www.lissaexplains.com/html.shtml
video tutorials - http://www.youtube.com/watch?v=v4oN4DuR7YU&feature=related
- http://www.webmasternow.com/html/learninghtml.html

HTML HELP!!!!!!! CodeCademy.com
create your first website page: http://html.net/tutorials/html/lesson4.php

Week 1
Syllabus
Work: Basic HTML
Project: 'Fantasy' Webpage
* Disclaimer: Do not use Dreamweaver or a template. Project will not be graded.

Buy Hosting & Domian Name for $12 for first year   Mac html editor download
 
     
creating first website page with an html editor   PC : How to open and edit HTML files using Notepad
 
     
What is HTML?   HTML coding
 
     
HTML code formatting (structure)    
   

Week 2
Work:
'Hosting / Domain Name' DUE
Work: 'Fantasy' Webpage DUE

Download Filezilla, then use to upload website to Hosting    
   

Week 3
Work:
HTML / Tables / Navigation / Buttons
Work:
'Storm' Webpages
* Disclaimer:
Do not use Dreamweaver or a template based html editor. Project will not be graded.
Week 4
Work:
'Storm' Webpages DUE
Week 5
Work:
HTML / CSS / DIVs / Navigation / Colored Hyper Text Links
Work:
'Double Identity' Webpages
* Disclaimer:
Do not use Dreamweaver or a template based html editor. Project will not be graded.

Week 6
Work:
'Double Identity' Webpages
Week 7
Work:
'Double Identity' Webpages
Week 8
Work:
'Double Identity' Webpages DUE
Week 9
Work:
'Dentist' Website
* Disclaimer:
Do not use Dreamweaver or a template based html editor. Project will not be graded.
Week 10
Work:
'Dentist' Website
Week 11
Work:
'Dentist' Website
Week 12
Work:
'Dentist' Website DUE
Week 13
Work:
'Business' Website
Dreamweaver can be used

Week 14
Work:
'Business' Website
Week 15
Work:
'Business' Website
Week 16
Work:
'Business' Website DUE

- work on Tables, HTML, navigation

Files and Directories - Powerpoint: Download

In Class Assignment: Tables & Navigation

Homework: Storm (3 linked pages)


- work on Forms

In Class Assignment: Table with a Form

Homework: Replicated Form
1. Link your in-class assignments and homeworks on your home page on your online website
2. Make a new form that looks like this: form.jpg and link it on your website

File Directories on a server:


CSS Box Model:

Examples to understand
- Powerpoint
- http://www.brainjar.com/css/positioning/
- http://www.w3schools.com/css/css_boxmodel.asp
- http://www.lissaexplains.com/css.shtml
- http://www.w3schools.com/css/css_syntax.asp
- CSS Tags
- CSS PRoperty Index
- text Shadow ( cool but doesn't work in Explorer :(
http://www.twistedsifter.com uses the drop shadow on text

* Why CSS Powerpoint
* linked stylesheets
* Embedded Styles
* inline syles
* Basic Styles
* Fonts that are WebSafe Download

In Class Assignment: Basic CSS

Homework: Start on Resume (CSS Resume)

unordered bullets hovering over your image?
p, ul, ol {
width: auto;
overflow: hidden;
}
Source: http://access2learn.com/tutorial/html-css/controlling-the-look-of-elements-next-to-floated-items

CSS Box Model conclude, onto position & layout
Class = .   

Homework: Use resume to make into website, use CSS.

* background image, fixed, repeat
* Ids vs classes
* <div> <span> tags
* Text and Font Styles
* box model
* margins, padding, border
* dimension

The BOX MODEL & POSITIONING in CSS chapter 4, & 5

* absolute
* relative
* fixed
* static
* positioning: http://www.elated.com/articles/css-positioning
* floating: http://css.maxdesign.com.au/floatutorial
* clearing

Homework: Finish Resume (CSS Resume)

Double Identity (Graphic Slices DIV/CSS} Double Identity (Download)

Slicing Double Identity in Photoshop


Homework: Graphic For Your Website like Double Identity (done in Photoshop)
Photoshop tutorials on how to use Photoshop to design a website: http://cs6forwebdesign.tutsplus.com
Website Colors: WebDesignerDepot.com/...
Examples of Graphic Design of Dentist Website

Spring 2006 Before & After

Click on design to see bigger

 

Fall 2015

Examples of Graphic Design of Business Website

     

Make Rollover Buttons with CSS: http://www.elated.com/articles/css-rollover-buttons/
Serif Vs Sans for websites: http://www.noupe.com/infographics-2/serif-vs-sans-typography-basics-and-loads-of-free-fonts-infographic-75252.html
Add SEO (Search Engine Optimization) to your website: http://www.one-serve.com/tools/search_engine_tips_02.ph
Sticky Menus: http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/
Facebook Banner/Profile examples: http://www.noupe.com/showcases/best-practice-facebook-cover-photo-71438.html

Time to work on your Portfolio website

- Lightbox for Photo Gallery
- Usabilty Survey Download

Do Survey of this class in Portal

Homework: Portfolio Website (XHTML/CSS - 5 web pages)

PDF of html/css book download