Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Week 7

    Загружено:

    api-218675166
    33 просмотров25 страниц
    Links, Images, and Backgrounds links Relative Links - Do not use protocol or domain name - for files within the same file system - Start at the location of the current URL Absolute Links - include protocol and domain name Generally, this is the best practice / standard Tips about links avoid "click here" or "here"

    Исходное описание:

    Оригинальное название

    week7

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PPT, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Links, Images, and Backgrounds links Relative Links - Do not use protocol or domain name - for files within the same file system - Start at the location of the current URL Absolute Links - include protocol and domain name Generally, this is the best practice / standard Tips about links avoid "click here" or "here"

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    33 просмотров25 страниц

    Week 7

    Загружено:

    api-218675166
    Links, Images, and Backgrounds links Relative Links - Do not use protocol or domain name - for files within the same file system - Start at the location of the current URL Absolute Links - include protocol and domain name Generally, this is the best practice / standard Tips about links avoid "click here" or "here"

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 25

    Links, Images, and Backgrounds

    Links

    Relative Links
    Do not use protocol or domain name For files within the same file system Start at the location of the current URL

    Absolute Links
    Local: Start at root with a / Remote: include protocol & domain name Generally, this is the best practice/standard

    Tips about links


    Use useful link text Avoid click here or here Bad: Click here to flush the toilet Worse: Click here to flush the toilet Better: Flush the toilet.

    Use Dreamweaver to
    Create relative links Create absolute links Create an email link Link from an image Image map Insert image Use image placeholders

    target attribute
    Generally, this is used for frames, but it can be used to avoid frames _blank, _parent, _top, _self, are the default target attributes (note the underscores) In-page links (aka bookmark, target)

    <a name=whatever /> W3C recommends eliminating the name attribute in favor of the id attribute Since any element can have an id, <a> can simply be used for hyperlinks

    Images

    Bitmap images
    JPG, GIF, PNG These are reproductions of images

    Vector graphics
    Flash, Fireworks Instructions to create images

    This is similar to sound reproduction Sampling vs. Modeling

    Favicons
    The favicon is show in the address bar 16x16 pixel icon (special image type) Must exist as favicon.ico in the root Must include the following in the <head>

    <link rel=shortcut icon href=/favicon.ico type=image/x-icon />

    Graphics Modification

    Antialiasing vs. Sharpening


    They are opposites Antialiasing blends outlines and softens edges Sharpening makes the lines distinct Both processes modify the image

    Transparency

    Index transparency
    Supported by GIF and PNG Pick one color and it becomes transparent Issues with Halos due to dithering; the remaining gradient in the transition zone remains

    Alpha transparency
    Each pixel, regardless of color has a transparency index from 0 (opaque) to 255 (completely transparent) PNG only

    Colors
    Dithering: Creating the illusion of more color by creating patterns with existing colors Palette: Available colors

    32-bit color: 232 = 4.3 billion colors 24-bit color: 216 = 16.7 million colors 8-bit color: 28 = 256 colors Web safe colors reduce 256 to 216

    Web Safe Colors


    Include 6 intensities of the 3 primary colors 6x6x6 = 216 colors For each color, the following are valid

    00 33 66 99 CC FF

    Hexidecimal

    Base 10 1

    We use hex for colors because base 16 is a round number for binary, and FF = 255 (8-bit, 256 #s)
    Binar y 1 Hex 1 Base Binary 10 11 1011 Hex B Base 10 21 Binar y Hex Base 10 31 Binary 11111 100001 100010 100011 Hex 1F 21 22 23 10101 15

    2
    3 4 5

    10
    11 100 101

    2
    3 4 5

    12
    13 14 15

    1100
    1101 1110 1111 10001 10010 10011 10100

    C
    D E F 11 12 13 14

    22
    23 24 25

    10110 16
    10111 17 11000 18 11001 19

    32
    33 34 35

    100000 20

    6
    7 8 9 10

    110
    111 1000 1001 1010

    6
    7 8 9 A

    16
    17 18 19 20

    10000 10

    26
    27 28 29 30

    11010 1A
    11011 1B 11100 1C 11101 1D 11110 1E

    36
    37 38 39 40

    100100
    100101 100110 100111 101000

    24
    25 26 27 28

    Specifying Colors in CSS


    By name
    Red, Green Blue

    Triplet Pairs
    #ff0000, #00ff00, #0000ff

    Short form
    f00, 0f0, 00f

    RGB Values (utilize base 10, 0-255)


    rgb(255,0,0), rgb(0,255,0), rgb(0,0,255)

    Dreamweaver Page Properties

    Three ways to reach it


    Properties inspectors page properties button Modify menu page properties Control-J

    Allows you to pick background colors and background images, as well as other page-wide settings

    Background Images
    Should be flat in color depth (i.e. all relatively brown, or blue, or whatever) Should have low contrast (i.e. difference in brightness is minimal) Avoid background images with transparent areas

    Types of Background Images


    Tiled
    A single image repeated in a tiling pattern

    Margin
    A thin, wide image that is repeated on top of itself, resulting in a pattern with distinct areas as you go left to right (be careful with the widths)

    Watermark
    A single image {background-repeat:no-repeat}

    Background tip
    If using a background image, still apply a background color Some users have images off, so if you have a dark background image, use a dark background color in case the image is not rendered.

    Link Colors in css


    Forget about the <body> attributes alink, vlink, and link. Use psuedo-classes instead (:)

    a:link a:visited a:active (works for all elements such as input boxes in some browsers) a:hover (works for all elements in some browsers)

    DHTML

    What is DHTML
    DHTML is Dynamic HTML DHTML = HTML + CSS + a scripting language (usually Javascript) Allows you to change content on the web page without a full page reload

    Saves network traffic Saves user wait time Prevents screen jumping

    DHTML CSS Positioning (CSS-P)

    position:relative
    Moves an element relative to its original position, had there been no positioning

    position:absolute
    Puts an element in an exact location, as specified by other CSS attributes

    Visibility
    visibility:visible Visibility:hidden

    The three dimensions of CSS-P


    left:
    specifies the elements left position

    top:
    specifies the elements top position

    z-index:
    specifies whether an element is on top of or behind other elements. Done by rank with 0 being the default (-/+ values allowed)

    Accessing an Element (object)

    All elements to be accessed should have an id attribute.


    Some may work without one, but the direction is for this field to be required

    Use DOM (Document Object Model)


    Traverse the hierarchy

    Use document.getElementById
    Dont need to worry about the hierarchy

    Changing an element

    Make it visible/invisible Change the text

    Change the visibility property object.visiblity = visible;


    Change the innerHTML property object.innerHTML = <p>Hi!</p>; Change the src property object.src = yeah.jpg; object.style.color = red;

    Change the image

    Change the style (possibilities are limitless)

    AJAX Asynchronous Javascript and XML

    A technology that involves


    a call to the server to retrieve more information via Javascript XML (or some other textual data, such as HTML or JSON) is returned from the server and processed by a Javascript listener The listener utilizes DHTML to render the results appropriately.

    All this is done without a full page refresh Example:

    Pick a state from the state dropdown. Javascript calls the server to get list of counties The server returns a list and the county dropdown is populated from this list.

    Вам также может понравиться