http://www.makeuseof.com/tag/sticky-header-bar-makeuseof/
11.12
homework
4 cmpu sketches for final
html
mood board
11.07
HOMEWORK:
- pick 3 concepts and for each concept 2/3 pages ***INCLUDE IMAGES!!!...organize images
-for fav do extra pages
-**heirarchy #1: info #2: menu #3:logo
-mood board
-looked at nytimes info graphs
-links for apple images on class blog
-critque
11.05
HOMEWORK:
-6 thumbnail sketches (home page)
-4 Computer Sketches (home page)
assigned project 3
cool hover effects:
http://tympanus.net/codrops/category/tutorials/
http://tympanus.net/Tutorials/OriginalHoverEffects/
10.24
http://www.ascii.cl/htmlcodes.htm
10.22
pre final due next class
final due monday
10.08
http://proquestcombo.safaribooksonline.com/book/web-development/usability/0321344758
link to book
10.01
9th day of class
HOMEWORK
- read chapter 10-11 in HTML CSS book
- read ch 3&7 in DreamWeaver C6 Book(link on main site)
- Read ch 1-3 in Don't make me think book (link on main site)
- Write summary of above reading 250-300 words font size 9 can include images (hard copy)
- research 2 galleries to compare to (screen shot, plus text)
- research 2 galleries to compete with (screen shot plus text)
in class:
-Read Information Architecture for Designers packet
-CSS video
- inline styles over ride embedded styles which over rides inline styles
- link to video on main site
- CSS is a good way to make it easy to change layout of every web page by only editing one page
- change CSS will change everything
- CLASS NOTES:
- Need to have external CSS NOT internal (page 235 & 236) aka in web back page you have WWW then you have index, CSS folder doesn't go into the index (if understood correctly...)
- Sawhill---> WWW---> Index and CSS folders
- apple.com provides some help for software developer library (link on site) www.jmugrph312-f12.blogspot.com
- created demo CSS folder
- 780 width = will work with iPad
- 960 is typically how wide website is
- if add # can edit just that one section (?)
- class is the group
- id is one or two unit elements
- class select is most often used on several elements
- class is defined by dot
- id is defined by #
- p dot= change for only p...not everything, if don't label dot's then it will apply to more than one thing
- Most important thing in CSS is class/element/dot/# bit
- RGB 0 is transparent
- HOW TO LINK CSS STYLES: create CSS style save in external file open up document that want to attach CSS to click attach style button (second set of options on the right, bottom buttons divided in left and right the attach button is in the right section of buttons and it is the first one looks like a darkened infinity sign)
----------------------------------------------------------------------------------------------------------------------------------
9.24
Eighth day of class
HOMEWORK
Upload Process Book *don't print, upload dropbox b4 class Wed 9.26
Upload Display Board *print on nice paper, don't mount, upload dropbox b4 class Wed 9.26
-showed final projects, received feedback
-class time to work on process book/display board/any changes needed to finals based off of in class review feedback
----------------------------------------------------------------------------------------------------------------------------------
9.17
Seventh day of class
HOMEWORK
**process book is due on wednesday, final is due on monday
-final design
-at least five different finalized designs
-splice one and add information into css
-went over second roughs
-clean up images
-too busy
----------------------------------------------------------------------------------------------------------------------------------
9.12
Sixth day of class
MISSED CLASS
learned: slicing, taught self via youtube since missed class.
http://www.youtube.com/watch?v=zOpkh2om1tI
HOMEWORK
-work on the 8 cmpu sketches
-pick 1/2 images to slice and open in a dream weaver table
-upload 8 cmpu sketches & dream weaver slicing into dropbox
----------------------------------------------------------------------------------------------------------------------------------
9.10
Fifth day of class
HOMEWORK
-pick 8 sketches, make more detailed by hand
-begin graphics via p.shop/illustrator
-computer sketches (photoshop) of the 8 detailed
-mood board: color, images, fonts/typography elements**on blog
-process book mood board= 1-2 pages for now research 10-20 images
-one page research about event (process book) site information
-upload resume html to blog
-over viewed hw
-*Center information for resume!
-*resume double check 600
-
-add resume to fetch: hostname= educ.jmu.edu
user/pass= ecampus
-when optimize picture you loose some information
-PROJECT:
600=max width
540/560 information with 600 background (if use background)
----------------------------------------------------------------------------------------------------------------------------------
9.05
Fourth day of class
HOMEWORK
-Resume: make 50% HTML 10px pic border
-ecard/Invitation: can be simple *table inside of a table
-16 Sketches for the layout of the HTML event (PROJECT ONE)**sketch paper 1 on dropbox/thumbdrive **scan images! save as PDF + description of sketches!
-turned in hw
-comments about my Resume: image=pixilated need to make sure to copy image address and save that it will also be good to not make the image larger if it is originally pixilated
-went through everyones HTML email examples
-discussed the project...project: simple, nice banner image, tables, images, links, width 600!!, height ~800! don't make too long! too much scrolling=not good
-margins
-Save for web: images worked on in Photoshop**--> view four, can pick the best one (less pixilated)
-em s: **see gd class blogger
-font size, em works with font size
-downloaded 3 HTMLeMail PDF packets (dropbox &thumb)
-change font:
<td style="font-family:Arial, Helvetica, sans-serif; color:red">
-Read HTML email 1, recreate everything in Dream Weaver
----------------------------------------------------------------------------------------------------------------------------------
9.03
Third day of class.
HOMEWORK
-read fetch
-get book
-got assigned project 1
-turned in hw
-dream weaver
-learned to insert an image:
<h2> Image </h2>
<img src=
"http://www.jmu.edu/jmucmsfiles/images/home-jmusports-dukes-invade-fedex.jpg.jpg"alt="JMU DUKES"width="300" height="150"/>
-** it is important to have "a" in the code to link it all (?)
-Server-->image folder
-make sure to save EVERYTHING used with the code, folder for each project and in that folder a folder for html codes & then separate image jpgsn **avoid spaces in folder/file names
-book page 101
-can put images in middle of text
-to change alignment do: align= "left/right/top/middle/bottom" be sure to include space and put it in quotes...same goes for if you want to change the width/height
-to upload an image from your file on the computer/jump drive you do:
<img src="images/main.image.jpg"height="150" align="top"/> then you click on the box that comes up in place of the actual picture and open up the file
-to add links highlight area and then in bottom section of dreamweaver you can link in any folder as long as you connect it to it...i.e.
<br/><br />
<a href="../Research Paper Grph 312.pdf">>>download</a><br/> **if you just leave it as <br/><br/>>>download<br/> & highlight >>download and then link that dream weaver will put in the code for the link for you.
-http://www.jmu.edu/computing/download/mac.shtml how to get to fetch
-user/password is same as ecampus, educe.jmu.edu/~mooradsa
-learned how to make tables:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
http://www.w3schools.com/html/html_tables.asp
-learned how to insert color into the table:
<table border="2" bgcolor="#00CCFF">
-can change the width/height of the table rows/columns
-can insert a picture for one of the rows/columns
-
----------------------------------------------------------------------------------------------------------------------------------
8.29
Second day of class.
-Turned in paper
-Went through everyone's 10-15 portfolio
-intro to html
-HOMEWORK
-make a simple resume using HTML code (type edit)
-helpful: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
-LEARNED SOME BASIC CODES:
-<p> is opening, </p> is closing
-<body> is body
-<p> is paragraph
-<b> is bold, another way to do bold is <strong>
-<i> is italic, another way to do italic is <em>
-<sup> makes text move up
-<ins>underline</ins> words will be underlined until <s>nolonger<s>
-<q> is quote marks
-<blockquote> makes the text indent to form a "box" around it
-<a href="mailto:mooradsa@dukes.jmu.edu"> my email </a> the text between the a's will be the link, need, can include web address in quotes to make link
-<ol> to create a number list use </ol> at the end of the <li> list to stop numbering
-<li> list 1</li> to go down on the list, either new number or new bullet
-<u|> to create a bullet list, use </ul> at the end of the <li> list to stop bullets
*with the <ul> and the <ol> to make it set up as an organized layout getting tabed in more you can add new <ul> or <ol> and just close THEM ALL at the end
**If you add in two <li> before closing the </li> you will create the same effect as if you don't close the <ul> or <ol> it will tab the line over, but it will keep the same original #/bullet until you </li>
-<br/> is a line break (move down to next line) need / on RIGHT side (and with first br)
-two <br/> = two lines down (gap in between now)
-<hr/> creates a line across the screen
-USED TYPE EDIT
-type in text using HTML, convert to PLAIN Text, save with .html
-USED WEBSITE TUTORIAL
-http://www.w3schools.com/html/default.asp used tutorial to view it online
-if get "save a version" copy & paste and start over as new so can just "save"
-EXAMPLE HTML
-My first, of many, HTML code:
<html>
<head>
<title>
James Madison Love
</title>
</head>
<body>
<h1>I love JMU </h2>
<h2>It makes me happy :] </h2>
<p> If something makes me happy, that's a good reason to love it. </p>
<h3>the end.</h3>
<h4><3</h4>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------
8.27
First day of class.
-Went through sylabus
-HOMEWORK: Recieved first two assignments
1. 10-15 images of your work (any art)
2. 1-2 page research paper, double spaced APA citation
on: -What is HTML CSS & HTML5, Relation HTML & CSS, What is HTML emails, & Examples
-Brief overview of what project 1 is about (creating HTML email using JMU event)
-Created class blog www.sarahmooradiangd312.blogspot.com
No comments:
Post a Comment