Scribd Logo
Unggah

Selamat datang di Scribd!

  • Linel: Creating A Web Site With CSS

    Diunggah oleh

    jturner
    39 tayangan4 halaman
    Creating a web site with CSS Prelude If using Mac X - 1. Use Word to write the html 2. Save as text only with a html suffix [eg indexpage.html] 3. Test using Safari or Firefox If using Windows Use Internet Explorer and View Source to access Notepad in Notepad - For CSS - use to divide page using class id names - add content for within areas.

    Deskripsi Asli:

    Judul Asli

    SK15_CSS website

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Creating a web site with CSS Prelude If using Mac X - 1. Use Word to write the html 2. Save as text only with a html suffix [eg indexpage.html] 3. Test using Safari or Firefox If using Windows Use Internet Explorer and View Source to access Notepad in Notepad - For CSS - use to divide page using class id names - add content for within areas.

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    39 tayangan4 halaman

    Linel: Creating A Web Site With CSS

    Diunggah oleh

    jturner
    Creating a web site with CSS Prelude If using Mac X - 1. Use Word to write the html 2. Save as text only with a html suffix [eg indexpage.html] 3. Test using Safari or Firefox If using Windows Use Internet Explorer and View Source to access Notepad in Notepad - For CSS - use to divide page using class id names - add content for within areas.

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 4

    Creating a web site with CSS

    Prelude
    If using Mac X – 1. use Word to write the HTML
    2. save as text only with a html suffix [eg indexpage.html]
    3. test using Safari or Firefox

    If using Windows • Use Internet Explorer and View Source to access Notepad
    • in Notepad save using html suffix

    1. Storyboard your page


    Head Graphic [h: 50 px]
    [centre] linel
    Navigation Menu Body data Graphic
    [h: 600 w;215px [w: 515px] [w:200]
    Margin [T: 20, L:0] Margin [T:20, L:200] Margin [T:20,L:750]
    [navigation] [centreDoc] [rightDoc]
    Footer area [h: 20px, w:100%] [bottomDoc]
    Margin [T:670, L:960]

    2. Create the html outline using Word or Dreamweaver


    - For CSS - use <div> to divide page using class id names
    - add content for within areas [no style other than type – eg <p> <h1>
    <html>
    <head>
    <title>First CSS Tutorial</title>

    <link href="myCSS2.css" rel="stylesheet" type="text/css"> Linking to the css page

    </head>
    <body>
    <div class="centre">
    <div class="line">
    <div class="l"> </div>
    <p>Dr T's Wonderful Web Page</p>

    <div class="r"> </div>


    </div> Identify the areas
    </div>

    <div id="navigation">
    <h2> Main navigation</h2>
    <p><a href = "example2css.html"> DR T Home </a></p>
    <p><a href = "example1css.html"> example1css</a></p>
    </div>

    <div id="centerDoc">
    <h1>Dr T's CSS Web page</h1>
    <p>
    Welcome to my web page
    </p>
    </div>

    <div id="rightDoc">
    <h2>Here is where the graphic goes</h2>
    <img src = “smiley2.jpg” class = “figure” />
    </div>
    </body>
    </html>
    1
    3. Create a css file [eg mycss1.css] to include style settings for each id

    body {

    font-family: Georgia, "Times New Roman", Times, serif;


    font-size: 14px; Setting font style
    color: #333333;
    background-color: #F9F9F9;
    }

    p{
    width: 80%; Setting styles for paragraph [p]
    } line [li] headings [h1]
    li {
    list-style-type: none;
    line-height: 150%;
    list-style-image: url(images/arrowSmall.gif);

    h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    color: #000000;

    /**************** Pseudo classes ****************/

    a .alt { display: none; }


    Setting link styles [can also do
    a:link { for :active,
    color: #00CC00;
    text-decoration: underline;
    font-weight: bold;
    }

    li :link {
    color: #00CC00;
    text-decoration: none;
    font-weight: bold;

    /************************* ID's *************************/ Styles for ids such as centrec,


    linel, navigation
    .centre { text-align: center; }
    .line {
    display: block;
    position: relative;
    background: #330099;
    color: #ffff00;
    text-align: center;
    line-height: 64px;
    height: 64px;
    width: 400px;
    margin: 0 auto 2ex auto;
    2
    padding: 0;
    }

    #navigation {

    position: absolute;
    width: 180 px;
    height: 600px;
    margin: 0;
    margin-top: 50px;
    border-right: 1px solid #C6EC8C;
    font-weight: normal;
    }

    #centerDoc {
    position: absolute;
    padding: 0 0 20px 0; /*top right bottom left*/
    margin-top: 50px;
    margin-left: 215px;
    }

    #rightDoc {
    position: absolute;
    padding: 0 0 20px 0; /*top right bottom left*/
    margin-top: 50px;
    margin-left: 615px;
    }

    .figure{
    float: left; Image settings
    }

    4. You can now use the css styles for all pages of your site.

    Some Knowledge
    • Core Attributes
    class (.): elements covered by class may share aspects of presentation
    [eg .info]
    id (#): specifies a unique identifier for an element
    [eg #intro]
    style: specifies CSS properties for the element
    * is a universal selector that applies to all elements in the document
    [eg * {color: blue} would apply a blue foreground to all
    element selector selects all instances of an element, specified by its tag name
    [eg em {color: red;} gives every em element the same foreground colour.
    Pseudo class selector (:)
    combining selectors can narrow down what is being selected
    [eg p.info {color: blue} selects only paragraphs belonging to the info class.

    • In CSS a more specific selector trumps a less specific selector [eg class beats element]

    3
    Background graphic

    Add the following code into your css file [for a background graphic called bg1.gif]
    Within .Navigation identifier or style body [at top]

    CSS
    background-image: url(bg1.gif);

    • Optional: background-repeat: no-repeat;


    background-repeat: repeat-x;

    Containers

    HTML [in body]


    <p class = “red”>
    container 1
    </p>
    <p class = “white”>
    container2
    </p>
    <p class = “blue”>
    container 3
    </p>

    CSS
    p {border-width: thin; border-style: solid; height: 100px; width: 100px; text-align: center}
    p.red {background-color: red; position: relative; left: 0;}
    p.white {background-color: white; position: relative; top: -100px; left: 50px;}
    p.blue {background-color: blue; ; position: relative; top: -200px; left: 100px;}}

    These are stacked

    Absolute positioning

    CSS
    p {border-width: thin; border-style: solid; height: 100px; width: 100px; text-align: center}
    p.red {background-color: red; position: relative; left: 0;}
    p.white {background-color: white; position: relative; top: -100px; left: 50px;}
    p.blue {background-color: blue; ; position: relative; top: -200px; left: 100px;}}

    Anda mungkin juga menyukai