CIS 300 Week 4 Coding

Chapter 7: Pacific Trails Resort Case StudyIn this chapterâ??s case study, you will use the Pacific Trails existing website (Chapter 6) as a starting point to create a new version of the website that uses a two-column page layout. Figure 7.40 displays a wireframe with the new layout.Figure 7.40â??Pacific Trails two-column page layout.You have three tasks in this case study: Create a new folder for the Pacific Trails Resort website. Edit the pacific.css external style sheet. Edit the Home page (index.html), Yurts page (yurts.html), and Activities page (activities.html) to configure the navigation hyperlinks within an unordered list.Task 1: Create a folder called ch7pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 6 Case Study ch6pacific folder.Task 2: Configure the CSS. Launch a text editor and open the pacific.css external style sheet file. The body element selector. Change the background color to #4F6D93. Change the ending gradient color to #4F6D93. The wrapper id selector. Change the background color from white (#FFFFFF) to blue (#90C7E3). The nav element selector. This is the area that will float on the page. Remove the background-color declarationâ??the nav area will pick up the background color of the wrapper id. Remove the text-align declaration. Change the padding to 20 pixels. Configure left float and a width of 160 pixels. The homehero id selector. Configure a 190px left margin. The yurthero id selector. Configure a 190px left margin. The trailhero id selector. Configure a 190px left margin. The main element selector. Modify the style declarations to configure a white (#FFFFFF) background, 190 pixels of left margin, and change the left padding to 30px. Configure the unordered list in the main content area. Replace the ul element selector with a descendant selector (main ul) to specify only ul elements within the main content. The footer element selector. Modify the styles to configure a 190 pixel left margin and white (#FFFFFF) background color. Configure the navigation area. Use descendant selectors to configure the unordered list and anchor elements within the nav element. Style the unordered list. Configure the ul element selector with no list markers, zero margin, zero left padding, and 1.2em font size. Style unvisited navigation hyperlinks. Configure the :link pseudo-class with navy blue text color (#000033). Style visited navigation hyperlinks. Configure the :visited pseudo-class with dark blue text color (#344873). Style interactive hyperlinks. Configure the :hover pseudo-class with white text color (#FFFFFF).Save the pacific.css file. Check your syntax with the CSS validator (http://jigsaw.w3.org/css-validator). Correct and retest if necessary.Task 3: Edit the web pages. Launch a text editor and open the index.html file. Configure the navigation hyperlinks using an unordered list. Remove the   special characters. Save the file. Modify the yurts.html and activities.html files in a similar manner.Test your web pages in a browser. Your home page should be similar to the example in Figure 7.41 with a two-column page layout!Figure 7.41â??The new Pacific Trails Home page with a two-column layout. Chapter 8: Pacific Trails Resort Case StudyIn this chapterâ??s case study you will use the existing Pacific Trails (Chapter 7) website as a starting point to create a new version of the website that utilizes media queries to configure display for mobile devices. Figure 8.31 displays wireframes for desktop browser, typical tablet screen, and typical smartphone screen display. When you have finished, the website will look the same in desktop browsers (see Figures 7.41 and 8.32). The mobile displays should be similar to the screen captures in Figure 8.32.Figure 8.31â??Pacific Trails wireframes.You have five tasks in this case study: Create a new folder for the Pacific Trails Resort website. Edit the pacific.css external style sheet to include media queries and styles needed for appropriate desktop, tablet, and smartphone display. Edit the Home page (index.html). Edit the Yurts page (yurts.html). Edit the Activities page (activities.html).Figure 8.32â??Resize the browser window to approximate the new tablet and smartphone display.Task 1: Create a folder called ch8pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 7 Case Study ch7pacific folder into the ch8pacific folder.Task 2: Configure the CSS. Launch a text editor and open the pacific.css external style sheet file. Configure Support of HTML5. Add the following style rule to configure most older browsers to render HTML5 block display elements as expected. header, main, nav, footer, figure, figcaption, aside, section, article { display: block; } Configure Desktop Display. Code the following new styles 1. The mobile id. Set display to none. Youâ??ll apply this id when you edit the home page (index.html). 2. The desktop id. Set display to inline. Youâ??ll apply this id later when you edit the home page (index.html). Configure Tablet Display.â?? 1. Code a media query below the existing styles to select for typical tablet device viewport size. @media only screen and (max-width: 64em) { } 2. Configure the following new styles within the media query: The body element selector. Set margin to 0 and the background color to #FFFFFF;. The wrapper id selector. Set minimum width to 0, width to auto, and box-shadow to none. The main element selector. Set left margin to 0. The nav element selector. Eliminate float (Hint: Use float: none;), set the width to auto, centered text, and configure 0.5em padding. Navigation list items. Use a descendant selector to configure li elements within the navigation area with inline display, 0.25em top and bottom padding, and 0.75em left and right padding. The homehero, yurthero, and trailhero id selectors. Set left margin to 0. Set height to 200 pixels. The footer element selector. Set left margin to 0. Configure Smartphone Display.â?? 1. Code a media query below the existing styles to select for typical smartphone device viewport size. @media only screen and (max-width: 37.5em) { } 2. Configure the following new styles within the media query: The header id selector. Set top padding to 1em. The main element selector. Set top and bottom padding to 0.1em, left and right padding to 1em, and font size to 90%. The h1 element selector. Set font size to 1.5em. The nav element selector. Set padding to 0. Navigation list items. Use a descendant selector to configure li elements within the navigation area with block display, 0 margin, and a 2 pixel solid dark (#330000) bottom border. Navigation hyperlinks. Use a descendant selector to configure a elements within the navigation area with block display. This will provide the user a larger area to tap when selecting a hyperlink. The homehero, yurthero, and trailhero id selectors. Do not display the image. Set the background-image property to none and the height to 0. The mobile id selector. Set display to inline. The desktop id selector. Set display to none.Save your pacific.css file. Use the CSS validator (http://jigsaw.w3.org/css-validator) to check your syntax. Correct and retest if necessary.Task 3: Edit the Home Page. Launch a text editor and open the index.html file. Edit the code as follows: Configure a viewport meta tag in the head section that configures the width to the device-width and sets the initial-scale to 1.0. Add statements needed to the head section to apply the HTML5 Shim so that older browsers will successfully display the HTML5 elements. The home page displays a phone number in the contact information area. Wouldnâ??t it be handy if a person using a smartphone could click on the phone number to call the resort? You can make that happen by using tel: in a hyperlink. Configure a hyperlink assigned to an id named mobile that contains the phone number as shown below: 888-555-5555 But wait a minute, a telephone link could confuse those visiting the site with a desktop browser. Code another phone number directly after the hyperlink. Code a span element assigned to an id named desktop around the phone number as shown here: 888-555-5555Save the index.html file. Remember that validating your HTML can help you find syntax errors. Validate and correct this page before you continue. Display your page in a browser. While your home page will look unchanged in maximized desktop browsers (see Figure 7.41), as you resize and reduce the browser viewport dimensions, the displays should be similar to the screen captures in Figure 8.32.Task 4: Edit the Yurts Page. When you are finished, the Yurts page will look similar to Figure 8.33.Figure 8.33â??Browser approximation of the yurts.html page mobile display.Launch a text editor and open the yurts.html file. Edit the code as follows: Configure a viewport meta tag in the head section that configures the width to the device-width and sets the initial-scale to 1.0. Add statements needed to the head section to apply the HTML5 Shim so that older browsers will successfully display the HTML5 elements.Save the yurts.html file. Remember that validating your HTML can help you find syntax errors. Validate and correct this page before you continue. Display your page in a browser. Resize the browser window to test the media queries. Compare your work with Figure 8.33, which shows screen captures of the yurts page.Task 5: Edit the Activities Page. When you are finished, the Activities page will look similar to Figure 8.34.Figure 8.34â??Browser approximation of the activities.html page mobile display.Launch a text editor and open the activities.html file. Edit the code as follows: Configure a viewport meta tag in the head section that configures the width to the device-width and sets the initial-scale to 1.0. Add statements needed to the head section to apply the HTML5 Shim so that older browsers will successfully display the HTML5 elements.Save the activities.html file. Remember that validating your HTML can help you find syntax errors. Validate and correct this page before you continue. Display your page in a browser. Resize the browser window to test the media queries. Compare your work with Figure 8.34, which shows screen captures of the activities page. Pacific Trails Resort is mobile!

Don't use plagiarized sources. Get Your Custom Essay on
CIS 300 Week 4 Coding
Just from $13/Page
Order Essay
GradeAcers
Calculate your paper price
Pages (550 words)
Approximate price: -

Why Work with Us

Top Quality and Well-Researched Papers

We always make sure that writers follow all your instructions precisely. You can choose your academic level: high school, college/university or professional, and we will assign a writer who has a respective degree.

Professional and Experienced Academic Writers

We have a team of professional writers with experience in academic and business writing. Many are native speakers and able to perform any task for which you need help.

Free Unlimited Revisions

If you think we missed something, send your order for a free revision. You have 10 days to submit the order for review after you have received the final document. You can do this yourself after logging into your personal account or by contacting our support.

Prompt Delivery and 100% Money-Back-Guarantee

All papers are always delivered on time. In case we need more time to master your paper, we may contact you regarding the deadline extension. In case you cannot provide us with more time, a 100% refund is guaranteed.

Original & Confidential

We use several writing tools checks to ensure that all documents you receive are free from plagiarism. Our editors carefully review all quotations in the text. We also promise maximum confidentiality in all of our services.

24/7 Customer Support

Our support agents are available 24 hours a day 7 days a week and committed to providing you with the best customer experience. Get in touch whenever you need any assistance.

Try it now!

Calculate the price of your order

Total price:
$0.00

How it works?

Follow these simple steps to get your paper done

Place your order

Fill in the order form and provide all details of your assignment.

Proceed with the payment

Choose the payment system that suits you most.

Receive the final file

Once your paper is ready, we will email it to you.

Our Services

No need to work on your paper at night. Sleep tight, we will cover your back. We offer all kinds of writing services.

Essays

Essay Writing Service

No matter what kind of academic paper you need and how urgent you need it, you are welcome to choose your academic level and the type of your paper at an affordable price. We take care of all your paper needs and give a 24/7 customer care support system.

Admissions

Admission Essays & Business Writing Help

An admission essay is an essay or other written statement by a candidate, often a potential student enrolling in a college, university, or graduate school. You can be rest assurred that through our service we will write the best admission essay for you.

Reviews

Editing Support

Our academic writers and editors make the necessary changes to your paper so that it is polished. We also format your document by correctly quoting the sources and creating reference lists in the formats APA, Harvard, MLA, Chicago / Turabian.

Reviews

Revision Support

If you think your paper could be improved, you can request a review. In this case, your paper will be checked by the writer or assigned to an editor. You can use this option as many times as you see fit. This is free because we want you to be completely satisfied with the service offered.

Order your essay today and save 15% with the discount code DISCOUNT15