Seminole State College - Web Publishing 2 Class

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

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

 

I will be teaching out of this book in this class. I recommend this series of books.
You don't have to have the lastest version of this series for 2 reasons; 1. they use the same website in the book everytime. 2. Adobe ads features to each program per series but you can learn EVERYTHING from an older book to get the basics! Then go online to learn the latest new features.

Get it on : amazon.com/Adobe-Dreamweaver-CC


 

You are expected to read each chapter of this book each week. It's a very quick read.
It talks about the users experince and not reinventing the wheel as a designer.
There will be a quiz each week on this book.

Get it on : amazon.com/Dont-Make...

Download the old edition as PDF: Dont_Make_Me_Think-Web_Usability_2nd_Ed_2005.pdf 
(you may not be able to answer all questions on quiz with this version)


Projects: Checklist  
1. Get Domain Name & Hosting / add HTML page with hyperlinks to class work
.99¬Ę cent Domain Name with Godaddy.com!!!!
 
2. Dreamweaver Tutorials  
3. Graphic Design of Business Website  
4. Make Business Dreamweaver template  
5. Finish Business Dreamweaver Website  
6. Wordpress Tutorials  
7. Adobe Muse Tutorials  
8. Graphic Design of your Portfilio Website  
9. Make Portfolio Website in Muse  

 

What is Dreamweaver?

Syllabus - Syllabus Agreement Form
- Talk about in-class assignments and home work
- During break Have students go to the book store and get their book
- Talk about Buying USB Flash Drives 
Chapter 1
Homework: Buy Domain name & Hosting!!!!
PLEASE SAVE USER/PASS to get into domain name providers website that you bought it from!!!!! I can't stress this enough!!! I don't want to hear "I don't remember", because you will be redirecting the domain name to a server that you'll be working off of.
Start on business website: talk to a client, find out what pages they need, what colors they like, logo, design, etc.. make a Project Proposal, start working on a wireframe of the structure of site.

Examples of Graphic Design of Business Website

 

    

Dreamweaver

Go down this column first...

MAC adding Dreamweaver layouts to a computer folder to use in Dreamweaver:

PC adding Dreamweaver layouts to a computer folder to use in Dreamweaver :

Dreamweaver CS6 Opening up the program / manage a site :

- Using a Layout we installed to make a Template in Dreamweaver 'index.dwt'
- making an 'editable region' in the Template
- Converting the template 'index.dwt' into a website page 'index.html'
- Making multiple pages from 'index.html'

- Adding a banner in the background header div with css
- Adding div to float out of header div with z index

- Adding an HTML5 tag <nav>
- Adding Navigation text to the nav
- Hyperlinking words
- Coloring the hyperlinks
- Adding text decoration to hyperlinked words
- Making the <nav> look like it's an embossed design with css properties

- float sidebar to other side of webpage
- color background in body css

- Making vertical navigation from ul list
- hide the bullets
- make the hyperlinks look like background rollovers

- Finish vertical navigation positioning
- Link vertical navigation to index, about, and contact
- Upload The index, about, and contact pages to your hosting with Dreamweaver, and go online to your website to make sure it works

- Fix border color on vertical navigation
- Fix vertical navigation width
- color the sidebar
- add words to bodycontent see what happens to sidebar
- Fix sidebar color
- Work on Footer

 

 

- add link to Butterfly logo
- add link to Butterfly logo to Home page
- add another column to bodycontent

- Work on Footer
- make CSS external
- upload to Hosting
- make sure everything works through domain name

- Horizontal background image for navigation row
- Text from Word doc
- Style Type with CSS
- Create Bulleted & numbered lists

- Drag & Drop image
- Float image with margin CSS
- Hotspots (hyperlinks) on image
- Encrypt email (no spam)

- Insert Youtube video
- Make an external link to Social Media
- Create Rollover navigation images

- Spry Accordion widget

- Behaviors to make pop up window from link
- create a table
- Discuss working in Dreamweaver to make web work for Wordpress

Creating a Contact Form
- form tag
- input & textarea tags
- Start the Dreaded PHP

- Finish the Dreaded PHP
- upload to hosting
- fill out form & submit
- check your email to see if it works

 

Examples of Wordpress websites
   

 

Wordpress

How to Install Wordpress on Hosting:



- Dashboard walk through

 

- make pages (static webpages)
- Create a menu from pages (to put links in your order, not Wordpress's order)

 

- make the sample page the post page for the Blog
- Rename the sample page Blog
- Setting a static Homepage (because the default 'home page' in Wordpress is a post 'blog page')
- Setting the Blog page

 

- Contact Form 7 (plug-in)
- Customize Contact Form by adding another field

 

- Updraftplus Backup / restore Wordpress (plug-in)

 

- Wordfence Security Wordpress plug-in
You do not need to do this video, but I have it here for those of you that are serious about using Wordpress in the future for clients
(This is not a video by myself, I am not very good at security and have a Wordpress person do it for me, but here is a video if you want to implement security yourself)

 

- Use 'Math Quiz' plugin as a Captcha for Contact Form
- Dealing with Comment spam. Settings>Discussion

 

- Lightbox Plus Colorbox (plug-in)

 

- Business Directory (plug-in)

 

- eCommerce - Woocommerce (plug-in)

 

- Add a new Wordpress theme
- Add a background color or image to header

Examples of Portfolio Websites

 
     
Muse

- Make the Master in Muse
- Make website pages from Master
- Slice images from Photoshop Graphic to insert into Master
- insert images into Master
- insert images into webpages
- Mention images in Layers panel

 

- Rollover Buttons

 

- Finish Navigation Buttons (Social Media Icons) 

 

- Finish Master page
- Add Navigation text to Footer
- Style the Footer Navigation text (Site properties)
- Add content to pages (images, text)

 
- Finish adding content for design to Home Page
- Make Favicon

 

 

- Upload to Hosting
- make a folder on server with Dreamweaver or Cyberduck to upload with Muse

 

- Finish content to Home Page
- make template for images to stay at same size for repetition & design

 
- Making Rollover images interesting
MuseThemes.com video on making transitions with their widgets: https://youtu.be/C1WhhAxKS-I

 

- Contact Form
- Doesn't work on some servers
- Works on Godaddy
- reCaptcha needs a key code
- BC Captcha only works on adobe servers

 

- errors you can ignore

 

Let your clients update the Muse website

https://helpx.adobe.com/muse/how-to/muse-in-browser-site-editing.html



Tables/Forms Download PHP
Lightbox for Photo Gallery Download
Usabilty Survey Download
Work on website
- Final website, make sure you have 5 pages linked