Week 3ART239 Web Design I

Class Notes for Monday 9/17/18

Root folder setup

Basic site structure is important for organizing file. Follow the model below to have a clean, organized site structure:

Site structure
css folder
Stores all external CSS files
images folder
Stores all images used in the site
js folder
Stores all javascript fils for the site (used for added functionality)
index.html file
Webpages sit in the "root" of your site folder. The index.html page is always your default/home page

Adding a site to Dreamweaver

Add a new site to Dreamweaver by selecting the SITE menu, then NEW SITE (Click the folder icon next to "Local site folder" and navigate to the folkder you just made):

Dreamweaver Site Add Window

This will now set up your Dreamweaver Site palette with your files for easy access

Dreamweaver site palette


Introduction to CSS

CSS, or Cascading Style Sheets, is how we style web pages and make them look the way they look. But it isn't just for text styles and layout, you can do so truly amazing art and animation with it as well:

A CSS rule is made up of the following:

CSS structure: Selector{ declaration(property:value;)}

CSS "cascades" which means children inherit the properties of their parents. By declaring the same properties on children, you can override the parent's properties.

 

The CSS Box Model

The core principle of HTML layout with CSS. Review it on the W3Schools site which does a great job of explaning and illustrating it.

Dreamweaver CSS Designer palette interface

Use the Dreamweaver CSS Designer feature to quickly build your CSS.

CSS Layout Properties

CSS Layout Properties
width
sets the width for an element
height
sets the height for an element
min-width
when an element is responsive, this specifies the minimum width of the element
min-height
when an element is responsive, this specifies the minimum height of the element
max-width
when an element is responsive, this specifies the maximum width of the element
max-height
when an element is responsive, this specifies the maximum height of the element
display
indicates if, or how, an element is rendered
box-sizing
tells the browser what sizing properties (width and height) to include - border-box or just the content-box
margin
specifies the amount of space around an element
padding
specifies the amount of space between the content of an element and its edge - increases the size of the element
position
alters the way elements are positioned on a page
float
specifies the side around which other elements flow around the floated element
clear
specifies the sides of an element that do not allow other floating elements - avoids a non-floating element going under a floating element
overflow (x or y)
determines what happens if the contents of a container exceed its size:
visible
increases the container’s size so that all of its contents are visible
hidden
maintains the container’s size and clips content that doesn’t fit - no scroll bars are provided.
scroll
adds scroll bars to the container regardless of whether the contents exceed the container’s size
auto
makes scroll bars appear only when the container’s contents exceed its boundaries
visibility
determines the initial display condition of the content
z‑index
determines the stacking order of the content
opacity
specifies how much you can see through an element

CSS Text Properties

CSS Text Properties
color
sets the text color
font-family
sets the font family (or series of families) for the style - with the default font list browsers display text in the first font of the series that is installed on the user’s system - web fonts appear the same on all systems as the font data is online
font-style
specifies Normal, Italic, or Oblique as the font style
font-variant
sets the small caps variant on text - Dreamweaver does not display this attribute in design mode
font-weight
applies a specific or relative amount of boldface to the font - normal is equivalent to 400 - bold is equivalent to 700
font-size
defines the size of the text
line-height
sets the height of the line on which the text is placed - this setting is traditionally called leading - select Normal to have the line height for the font size calculated automatically or enter an exact value
text align
sets left, right, center or justify alignment of text within the element
text-decoration
adds an underline, overline, strike-through, or makes the text blink
text indent
specifies how far the first line of text indents
h-shadow
adds a shadow to your text on the horizontal axis
v-shadow
adds a shadow to your text on the verticle axis
blur
controls the amount of blur in the shadow
color
specifies the color of the shadow
text-transform
changes the case of your text: capitalize, uppercase, or lowercase
letter-spacing
defines the amount of white space between letters
word-spacing
defines the amount of white space between words
white-space
tells the browser how to handle line breaks and spaces in a block of text
vertical-align
aligns inline elements, such as text and images, in relation to elements that surround them
list-style-position
sets whether list item text wraps and indents (outside) or whether the text wraps to the left margin (inside)
list-style-image
specifies a custom image for bullets
list-style-type
sets the appearance of bullets or number

CSS Border Properties

CSS Border Properties
the tabs choices on the top
choose full border around entire shape or top, right, bottom, and/or left border individually, where you can set different attributes for any side
border-width
specifies the thickness of the border - top, bottom, left, and right can be done individually
border-style
specifies the kind of border, such as solid, dashed, or double - top, bottom, left, and right can be done individually
border-color
specifies the color of the border - top, bottom, left, and right can be done individually
border-radius
creates rounded corners
border-collapse
specifies whether table borders are combined into a single border or detached
border-spacing
sets the spacing between borders of adjacent table cells when the border-collapse option is set to separate

CSS Background Properties

CSS Background Properties
background-color
sets the background color of an element
background-image
sets a background image for an element
gradient
displays smooth transitions between two or more specified colors
background-position
sets the starting position of a background image
background-size
specifies the scale of a background image
background-clip
specifies where the background is cropped
background-repeat
indicates if a background image will be repeated and on what axis
background-origin
specifies where the background image is positioned
background-attachment
specifies whether the background image will be fixed or scroll with page
box-shadow
attaches one or more shadows to an element
h-shadow
position of the horizontal shadow
v-shadow
position of the vertical shadow
blur
blur distance
spread
size of the shadow
color
color of the shadow
inset
changes the shadow to inside an element