Dreamweaver: January 2020

Monday, January 13, 2020

CSS: Cascading Style Sheets

CSS - Cascading Style Sheets

Pages that give style to HTML

Structure: 3 Main Parts

CSS - Definition

CSS - Cascading Style Sheets. Adding style to web documents. i.e. color, design, typefaces, object placement, accessibility, transitions, etc.

HTML

HyperText Markup Language. This is a file format, based on SGML, for hypertext documents on the Internet. It is very simple and allows for the embedding of images, sounds, video streams, form fields and simple text formatting. References to other objects are embedded using URLs.

SOURCE:

https://docs.oracle.com/javase/tutorial/information/glossary.html

Wednesday, January 1, 2020

CSS: Navigation

4 Different States

-visited
-active
-hover
-focus

example:

a: visited {color: #f00}

CSS - Linking to HTML

CSS: adjusting space around obejcts

padding margin border

-to have no space around objects set "padding: 0, margin: 0, border"

padding values

first value is top and bottom
second value is left and right

CSS Properties - Font

font-family - type of font

font-size - size of font

font-weight - bold

font-style - italic

color: #f00

Practice - 01/01/2019

ul
<li><a href="home">Home</a></li>

ul
<li><a href="Contact"><Contact</a></li>

<section>

</section>

ul
<a href="About">

ul>li*7<a

Create a list of social media icons

ul
li<a href="http://www.facebook.com/">img src= " "</a>
li<a href"http:www.twitter.com/"> img src= " "</a>
li<a href="http:www.linkedin.com/"> img src= " " </a>
li< a href="http:www.instagram.com/"> img src- " " </a>

Website Layout

<!doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

Website Design Process

Sketch Out Site Layout. Gather resources (text, images, tables, etc.)
Setup Site in Dreamweaver
Create Pagae Structure html
Add Sample Content to Structure
Create Page Presentation CSS - Fromatting and Positioning
Repeat steps 3-5 for additional page designs
Create templates and pages to your site
Add actual content to page
Publish final site

Fundamentals: Rule for Divs

Always give divs an ID so , you can refer to them in the coding layout.

Distinguishing between Head and Body Section

<head>

</head>

<body>

</body>

users cannot see what's within head.

content goes within body section

Doc Type Statement

A Document Type Declaration, or DOCTYPE for short, is an instruction to the web browser about the version of markup language in which a web page is written. ... With HTML5 this is no longer the case and the doctype declaration is only needed to enable the standard mode for documents written using the HTML syntax

SOURCE:
https://www.tutorialrepublic.com/html-tutorial/html-doctypes.php

Insert Images

Insert Images

1. (type) ".image-one" (click tab)
<div class="image-one"></div>
2. (type) img (click tab)
<img src="" alt="">

SOURCE:
https://tutorialehtml.com/en/html-tutorial-inserting-images/

<section>

right-click, select class

<section> class"feature-images">

<div class="image-one">

<img src ="images/gameimages. jpg" width= 90% alt=" "

p>lipsum (tab)

</section>

CSS - Terms

https://www.cram.com/flashcards/coding-sites-11154992

#header {}

body in header

ex: background-blue: #EEEE

#container { }

background - color

text-align: center

color: white

center

margin-left: auto

margin-right: auto

#content - content header

#nav div - divs always appear on a new line

Code - Links (HTML)

Code - Links (HTML)

<li> </li> - bullets (list items)

<a href= "index.html">home</a> - links

<li><a href= "index.html">home</a> </li> - bullets with links

ul>li*7>a - bullets with links (shortcut)

<br> - breakout

&copy - copyright symbol

<ul>
<li><a href="index.html">home</a></li>
<li><a href="index.html">about</a></li>
<li><a href="index.html">games</a></li>
<li><a href="index.html">reviews</a></li>
<li><a href="index.html">contact</a></li>

<h1> </h1> - header

<p> </p> - paragraph

<section> </section> - section

<article> </article> - article

<footer> </footer> - footer

Insert Images

1. (type) ".image-one" (click tab)
<div class="image-one"></div>
2. (type) img (click tab)
<img src="" alt="">

<section>

right-click, select class

<section> class"feature-images">

<div class="image-one">

<img src ="images/gameimages. jpg" width= 90% alt=" "

p>lipsum (tab)

</section>

Web Page - Building (analogy0

4 Different aspects to each web page

-Structure - HTML
-Presentation - CSS
-Content - Text/Images
-Action - Javascript/PHP

Dreamweaver

Code - Cheat Sheet