Code - Cheat Sheet

Showing posts with label dreamweaver. Show all posts
Showing posts with label dreamweaver. Show all posts

Wednesday, April 29, 2020

04/29/2020 - "Inspect" Exploration



CODE that we learned;


www.tarotgoddess.com

    .content-left {
    padding: 1px 30px 1px 0px;

    • this correlates with the paragraph section in the left-hand side.
    • 389x342.8000 are the dimensions of the div.
    • padding is space between image or cell cotnents and it's outside border*

    30 px is the padding that has been applied to this paragraph div, providing space between the ad and the paragraph

    * .content-left {
        padding: 1px 30px 1px 0px;

      .homecontent {
            float: left;
            max-width: 389px;
            margin: 0px auto 0px auto;
        }


        body, div, table {
            color: #000000;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 15px;
            font-weight: normal;
            line-height: 150%;
            text-align: left;
        }

        Wednesday, January 1, 2020

        CSS - Linking to HTML

        <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"

        -name of css file
        -rel, type, and media

        CSS Properties - Font

        font-family - type of font

        font-size - size of font

        font-weight - bold

        font-style - italic

        color: #f00

        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.

        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

        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

        Tuesday, December 17, 2019

        Terms

        HTML - structure and content to a web page
        CSS - provide style to the web page

        Panels

        Panels are the items at the right side of the Photoshop window that can display layer information and text options SOURCE: https://www...