Reminder: Homework for Tuesday (2/28)

Just a reminder (or, for those of you who weren't there, the basic info):

For Tuesday's class, I'd like you to bring three things, which would constitute the building blocks of the home page for the site you'll be making for yourself in the latter half of the semester. These elements are:

1. A big, dominant image for the page (what is sometimes called a "hero image").

2. A headline for the page.

3. Two or three sentences that follow the headline, that explain or "frame" what the site is about. It's an introductory mini-paragraph.

This is following the lead of the fake-news in-class assignment we did – where we chose an eye-grabbing photo, and tried to sensationalize the info around it in a way that made it click-bait. For your own site, you can be more ethically above-board! But the idea is still to grab people's attention, and to give them an expectation of what your site is about.

This doesn't have to be executed in html.  – it can be put together in photoshop, or if you're still feeling stymied by photoshop, you can just gather your picture and have the text in a word document. If you don't have the image you'd like to use for your hero image created yet, you can use an "aspirational" image – something that is in the style you'll like to create/purchase/find for yourself, when you have more time.

Class canceled today (Tuesday 2/21)

Hi all. I'm canceling class today (MT Rose is closed, according to nvdot, and it's raining slush down here in Reno). Stay safe, and see you Thursday.

Tutorial for Today (2/16)

We're going to go through the first two parts of this Dreamweaver tutorial today:

https://helpx.adobe.com/dreamweaver/how-to/make-website-pt1-site-setup.html

Some notes:

Skip the section (from part 1): Save the project assets to a Creative Cloud Library

Index.docx is in the “content” folder at the top level of the “bayside" folder

Skip the section (from part 2): Use the Quick Property Inspector to format text elements

https://video.vice.com/en_us/video/high-society-nos/57e1357ab8298923b2c1d146

For today (2/9)

The CSS Box Model:

http://www.w3schools.com/css/css_boxmodel.asp

The position declaration:

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Positioning elements with CSS:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

And a downloadable file to play with:

https://www.dropbox.com/s/igtw74jayh9nf1d/two-column.html?dl=0

I want you to us that downloadable html page, and customize it to make it a web page about Frogs. I have text I want you to import into the page - and then it is up to you to find images, embeddable videos, etc, to fill out the content of the page. I also want you to make a header for the page – we'll get into that in class.

Here's the text:

https://www.dropbox.com/s/rwu4u2nwsg130ad/frog-text.txt?dl=0

Hi, Im Hannah Greene I'm a Digital Arts and Journalism Major here at SNC. I transferred from Pace University in Manhattan New York. I am originally from Vermont. I like snowboarding hanging out with my dogs, doing art, cooking and living an active lifestyle.

References for Tuesday, 2/7

Using list elements to make a nav bar:

http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/

After I've gone over this page, take the source code from the finished example, then paste it into a blank text edit file, and save it as an html page to your computer. Edit the css for the page, and make the following stylistic changes:

1. change the names of all the nav buttons, and make them all external links to actual websites.

2. change the font face in the nav bar.

3. change the color of the nav bar, including in the "hover" state.

4. change the dimensions of the padding on the nav bar.

We'll also talk about wire framing, and lay the groundwork for:

1. A website wireframe prepared for one of the sites you picked that is in the same "genre" of the site you'd like to make, their first and second level pages. A wireframe example (click to enlarge):



2. You'll make a website flowchart as well (you can do a google image search for "website wireframe" and "website flowchart" to see examples).

 A flowchart example (click to enlarge):

Youtube clip of the day - Austin's