Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Tutorial Psdtohtmlcss68

    Încărcat de

    Ajverson
    11 vizualizări11 pagini
    css68

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    css68

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    11 vizualizări11 pagini

    Tutorial Psdtohtmlcss68

    Încărcat de

    Ajverson
    css68

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 11

    Code a Textured Outdoors Website in HTML & CSS

    Last week we went through the process of designing a detailed website design for Pinewood Forest.
    This week well code up the Photoshop concept into a working web page. See how the design is
    exported into individual images, how the HTML skeleton is put together and how the CSS coding
    replicates the styling from the concept.

    In case you missed last weeks tutorial, heres the design well be building. The site features a large
    static background image that allows the main content to scroll over it, and the content itself is broken
    up into key focus areas with photography used to draw in the user.
    View the Photoshop tutorial
    Exporting the background images

    The first step of the build process is to chop up the concept into individual images. Some sections of
    the design can be replicated with pure CSS, but other areas will need to the help of a background
    image. The main portion of the design is the large photographic background image. With careful
    compression the filesize can be kept fairly low despite its huge size.

    Due to the design having a fixed background image, the content will have to scroll over the top of it.
    This means elements like the logo will need to be exported with transparency using the PNG-24 file
    option.

    The main content background also has a subtle element of transparency, so this also needs to be
    exported as a PNG graphic. The background will be split into three sections, the top, the bottom and a
    repeating section from the middle.
    The final collection of images is made up of a mix of PNG and JPEG files. Some are small images that
    will repeat to form a textured background, others are text replacement images for titles and headers.

    The HTML structure

    The index file is started out with the core HTML structure. A Strict doctype is used to maintain good
    practices, followed by the HTML <head> which contains the page title and link to the CSS stylesheet.
    A div is added to the <body> to contain all the following page structure.
    The design begins with a header div to contain the logo and navigation items. The logo itself is laid out
    as an image file inside an anchor. The title attribute inside the anchor provides a description for the user
    where the link will go, and the descriptive ALT attribute in the image tag describes the image as the
    Pinewood Forest logo for users without images enabled.
    The good old <ul> is the universal element for navigation menus as it accurately depicts the menu
    system in plain HTML form. In the design concept the logo sits between the navigation items, but to
    keep the HTML structure clear the two elements are separated completely. Later the CSS styling will
    move the individual elements into place to replicate the design concept.

    Following the header is the main content area. To keep the HTML structure clean and tidy this is all
    contained in its own div element. The large feature area appears first on the homepage, so this is
    contained in a child div so it can be accurately positioned on the page. The first main heading on the
    page is the Explore the forest text, so this is given <h1> status. A class of btn is added to a
    paragraph element in the feature section so this particular element can be transformed into a button
    graphic with CSS later.
    The next level heading for the intro to the content area is a <h2>. The main content area itself is split
    into two columns, the larger of which is created as a div with the ID of main. Inside this div the main
    body copy is written out as individual paragraph elements. Dont forget to convert links into HTML
    anchors and switch out any characters such as the ampersand to HTML entities.
    At the bottom of this column is an upcoming events section. The events list fits perfectly into the
    Definition List element, seeing as it compares two related elements The date and the actual event.
    Using <span> tags inside the definition list will allow unique styling of certain elements with CSS.

    The smaller of the two columns is laid out as another div, this time with an ID of side. The sidebar
    contains three mini-features, each including an image heading and description. Because each image
    contains text inside the actual image, the text content is replicated in the ALT attribute to keep
    everything accessible.
    At the bottom of the page the content div is closed, then a short footer div is added to contain a simple
    back to top anchor.
    At this stage the design can be previewed without any CSS styling and the content should be clearly
    readable with the HTML elements creating a natural hierarchy. Validating the code will ensure our
    HTML is in tip-top shape without any errors which could affect the styling of the page when CSS is
    applied.

    Styling with CSS

    Now the HTML structure is in place its time to style up the design with CSS. The first line in the
    stylesheet is a simple reset to remove any default browser styling, then the global font styling is added
    to the body. Also added to the body is the large photographic background image. Setting this image to
    fixed at the top center will allow it to stay in place while the rest of the content scrolls over it.
    For those without background images enabled, or those with supremely large monitor resolutions a
    background colour is also added so the page is still legible on a plain dark blue background.
    The main container area is given a 960px fixed width and centred up using the common margin: 0
    auto; declaration.

    The elements that make up the header are then moved into place and styled accordingly. The top
    section of the content panel is added as a background image to the bottom of the header div. The unique
    positioning of the logo and navigation menu is created using a mix of negative margin to align the
    elements according to the concept. Because the navigation items sit as either side of the logo the CSS3
    nth-child property is used to target each individual list item and add an appropriate margin. The
    font is then styled to match the concept using letter-spacing to match the tracking used in the
    Photoshop design.

    The height of the content div will vary on each page, so a repeating background image is set to allow
    the content panel to expand without limitation. Left and right padding is also added to keep the page
    content away from the edges. Because the content area will contain two floating columns, the
    overflow:hidden; declaration is used to ensure these floats will be cleared.
    Relative positioning on the feature section allows the content to be moved exactly into place, and a
    touch of negative margin compensates for the padding on the parent content div to allow the feature
    area to sit flush with the edges of the page. Simple image replacement is used on the h1 to display the
    image graphic in place of the standard HTML text, but the smaller paragraph is styled entirely with
    CSS font styling. The small button is another element that is converted to an image using the image
    replacement technique.
    The main div is the wider of the two columns at 536px. The width of main plus the width of side
    along with the margin between them equates to the width of the parent content div minus its left and
    right padding. General font styling is added to the h2, anchors and paragraph elements, then the
    definition list is styled to match the layout in the design concept. The definition title is transformed into
    the date icon by giving it a specific width and height along with a grey background. The font styling
    displays the date as large white text, and the span is made slighly smaller so the month sits neatly
    underneath the larger number. Floated alongside the definition title is the definition description which
    contains the header and paragraph. One fancy CSS trick here is the visibility:hidden;
    declaration on the more info span. This is set to remain hidden until the description is hovered with the
    mouse, the span will subsequently turn to visible to display the View more info link.
    Each aside element is given the textured watercolour graphic as a background, then the image headers
    are moved into place with a touch of padding. The following font styling is automatically added by the
    CSS set on the content div, which is continued down through each child element unless it is altered
    with specificity. The footer div is given a background image to close off the content panel and padding
    is added to accommodate this image. The back to top link sits outside the content div, so new styling
    for the anchor is needed. Because this link sits on a dark background rather than the light background
    the colours need to be altered from the main link styling on the rest of the page to keep it legible.

    This leaves us with a completely styled design as a fully working webpage. But were not finished
    quite yet! Firefox, Safari and Chrome have no problem rendering the CSS3 nth-child property, but
    Internet Explorer fails as usual. A couple of lines of jQuery soon sort that out though.
    The jQuery library and an iefix.js Javascript file is linked from the HTML document. jQuery supports
    and implements the nth-child property without any problem even in Internet Explorer, so the
    appropriate margins are replicated from the CSS stylesheet in jQuery.

    Our webpage is now fully working in the latest Internet Explorer, Firefox, Safari and Chrome. The use
    of PNG graphics scare the pants off earlier versions of IE, but those could soon be fixed with a separate
    IE-only stylesheet and the help of the Belated PNG fix. Id rather tear off my fingernails than fix IE
    bugs all day, so Ill leave that task for you ;-)
    View the finished Pinewood Forest webpage

    S-ar putea să vă placă și