TUTORIAL 8: Enhancing a Web Site with Advanced CSS - PowerPoint PPT Presentation

1 / 19
About This Presentation
Title:

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

Description:

TUTORIAL 8: Enhancing a Web Site with Advanced CSS SESSION 8.1. The page layout is always scaled to match the resolution of the device screen. * OBJECTIVES Designing ... – PowerPoint PPT presentation

Number of Views:407
Avg rating:3.0/5.0
Slides: 20
Provided by: caro111
Category:

less

Transcript and Presenter's Notes

Title: TUTORIAL 8: Enhancing a Web Site with Advanced CSS


1
TUTORIAL 8 Enhancing a Web Site with Advanced
CSS
  • Session 8.1.

2
OBJECTIVES
  • Designing for the Mobile Web
  • Testing a Mobile Design
  • Configuring the Viewport
  • Introducing Media Queries within HTML Documents
  • Creating a Mobile Style Sheet
  • Introducing Media Queries within CSS Files
  • Designing for Portrait Orientation
  • Designing for Landscape Orientation

3
DESIGNING FOR THE MOBILE WEB
4
TESTING ON MOBILE DEVICES
  • Six Free Mobile Devices Emulators for testing
    your site
  • http//www.webdesignerdepot.com/2012/11/6-free-mob
    ile-device-emulators-for-testing-your-site/

5
CONFIGURING THE VIEWPORT
  • Mobile devices can display pages written for the
    larger screens found on desktop computers.
  • The contents of a Web page are displayed within a
    window known as the viewport.
  • Visual viewport
  • Layout viewport

6
CONFIGURING THE VIEWPORT
7
PRACTICE CONFIGURING THE VIEWPORT
  1. Open the tmc.htm file. Add the viewport meta tag.

8
INTRODUCING MEDIA QUERIES WITHIN THE HTML DOCUMENT
  • To create a media query for loading a style
    sheet, add the media attribute
  • media devices andor (features)
  • to the link element, where devices is a list of
    media devices, and features is a list of display
    features and their values as found on those
    devices

9
INTRODUCING MEDIA QUERIES WITHIN THE HTML DOCUMENT
  • To associate a style sheet with screen devices
    that are less than or equal to a specific width,
    use the query
  • media screen and (max-width value)
  • where value is the maximum allowable width of
    the screens viewport
  • To associate a style sheet with screen devices
    that are greater than or equal to a specific
    width, use the query
  • media screen and (min-width value)
  • where value is the minimum allowable width of
    the screens viewport.

10
INTRODUCING MEDIA QUERIES WITHIN THE HTML DOCUMENT
  • To associate a style sheet with screen devices
    that fall within a range of screen widths, use
    the following query
  • media screen and (min-width value and
    max-width value)
  • To associate a style sheet with screen devices in
    portrait or landscape mode, use the query
  • media screen and (orientation type)
  • where type is either portrait or landscape.

11
PRACTICE MEDIA QUERIES WITHIN HTML
  1. Add a link to the tmceffects.css style sheet
    file, using the style sheet for screen devices
    that have a minimum width of 501 pixels. Add the
    same media query for the tmclayout.css style
    sheet file.
  2. Use an Internet Explorer conditional comment for
    versions of IE before version 9 to link to the
    tmclayout.css and tmceffects.css style sheet for
    screen devices.
  3. Many patients and visitors visit the TMC website
    using mobile devices. Create a mobile version
    for TMC. Open tmcmobile.css from your data file
    folder in your text editor. Enter your name and
    the date in the comment section of the file, and
    then save tmcmobile.css.
  4. Create a link to the tmcmobile.css file to be
    accessed by only screen devices with maximum
    widths of 500 pixels.

12
CREATING A MOBILE STYLE SHEET
13
PRACTICE CREATING A MOBILE STYLE SHEET
  • Within the tmcmobile.css file, add a style rule
    to hide the ag
  • Set the background color to the value ot.
  • For the header element, create a style rule to
  • Change the background with the image file
    hospview.jpg placed in the center-bottom of the
    background with no tiling
  • Set the width to 100
  • Set the height to 150 pixels.

14
PRACTICE CREATING A MOBILE STYLE SHEET
  • 4. The navigation list containing links to each
    of the departments at TMC has the id depts.
    Create a style rule to set the width of this
    navigation list to 100.
  • 5. For the h1 elements within the depts
    navigation list, create a style rule to
  • Set the font size to 25 pixels
  • Set the font color to white
  • Set the margin to 15 pixels
  • Center the text of the heading

15
INTRODUCING MEDIA QUERIES WITHIN CSS
  • To apply a media query to a collection of style
    rules, apply the _at_media rule
  • _at_media devices andor (features)
  • styles
  • in your style sheet, where styles is those
    styles applied to the specified devices and
    features.
  • To import a style sheet based on a media query,
    apply the following _at_import rule
  • _at_import url(url) devices andor (features)

16
DESIGNING FOR PORTRAIT ORIENTATION
17
DESIGNING FOR LANDSCAPE ORIENTATION
18
PRACTICE MEDIA QUERIES WITHIN CSS
  • The preceding styles will be applied by default
    to the page in portrait orientation. Create an
    _at_media rule for the page in landscape
    orientation.
  • Add the following style rule for list items of
    the nav element with the depts id displayed in
    landscape orientation
  • Set the width to 30
  • Float the list items on the left
  • Set the margins to 5 pixels
  • For portrait orientation, the navigation list
    containing links to each of the departments at
    TMC has the id depts. Create a style rule to set
    the width of this navigation list to 100.

19
PRACTICE MEDIA QUERIES WITHIN CSS
  • 4. For the h1 elements within the depts
    navigation list for the portrait orientation,
    create a style rule to
  • Set the font size to 25 pixels
  • Set the font color to white
  • Set the margin to 15 pixels
  • Center the text of the heading
  • 5. Along with the portrait orientation styles,
    create style rule for list items in the depts
    navigation list to
  • Display the items as blocks
  • Add the background image file arrow.png to the
    right-center of the background with no tiling
  • Set the width to 60 and the height to 50 pixels
  • Add top and bottom margins of 5 pixels, and add
    left and right margins of auto
Write a Comment
User Comments (0)
About PowerShow.com