留学生EECS 1012辅导、HTML/CSS语言辅导留学生、解析CSS设计、辅导CSS/HTML

2018.09.26 - 首页 >> 其他

EECS 1012: LAB #2 – HTML and CSS (September 24 – 28, 2018)

1) Remember to do the pre-lab quiz.

2) Once again, you must attend your assigned lab session (we will be marking your submission in the lab).

3) You must arrive on time – anyone later than 30 minutes will not be admitted to the lab.

4) Only a valid physician statement will be accepted if you are absent.

5) NOTE: This lab is more complicated, you need to attempt to complete as much of the lab as possible

before coming to the lab.

1. GOALS/OUTCOMES FOR LAB

- To learn how to change the presentation an HTML document using CSS

- To help you analyze an HTML page and decide how to modify it for improved appearance using CSS.

It will be very useful to go over the Case Study in the examples I provided on the Additional Resource link

week 3. The 12 minute video on CSS is also very useful, especially in showing you how to arrange div

sections. You will also need to look at the lecture on “Layout” (see week 4).

2. LAB 2 – TASK

1) You are provided a simple eatfood.html document and corresponding images. Your job will be to

improve the presentation of the HTML content and structure in an iterative (step-by-step) fashion.

2) You will generate a total of four HTML files and CSS files in this process. You should demo each HTML

file to the TA. When the TA comes by, have each HTML file open in a different tab so you can show the

progression.

3) See next pages for details on how to modify your HTML and CSS files.

3. SUBMISSIONS

1) [Manual verification by a TA]

You will need to have one of the TAs verify your lab before submission. The TA will look at your various

files in their progression. If you have completed the lab assignment before coming to lab, the TA may ask

you to make minor modifications to the lab to demonstrate your knowledge of the materials.

The TA will mark your name off a list and ask you to sign that you have been verified.

2) Moodle submission

You will see an assignment submission link on Moodle.

1) Create a folder named “Lab2” and copy all of your lab materials inside (image folder,

eatfood_ex{1,2,3,4}.html and eatfood_ex{1,2,3,4}.css). This folder should be compressed (or tar.gz on the

VirtualBox machines) and the compressed file submitted. Please follow the instructions in the following

video that we used for Lab 1:

https://www.youtube.com/watch?v=stEOh6ntV5o

STARTING POINT: eatfood.html and images in image folder. You are given the following HTML file and

associated images. This file has no CSS file. The lab task is to improve the presentation of this HTML

document by modifying the HTML slightly at each iteration and creating an associated CSS. We will do this

step by step so you can see the process.

Download the lab’s ZIP file and unzip the contents into your WWW directory (if you are using your own

laptop, you can save it to any folder). After unzipping the content, you will have two (2) files in the WWW

directory (eatfood.html and Lab2.pdf). You will also have one (1) directory called “images”. The image

directory will have five (5) images (background.gif, idly.png, jianbing.jpg, pide.jpg, shawarma.jpg). If you

click on the eatfood.html file it should appear as shown below.

Exercise 1: (CREATE: eatfood_ex1.html and eatfood_ex1.css)

Try to match the output below as closely as possible – see the annotation for details. This exercise is to set

up the basic HTML structure to assist in further modification. The associated CSS is to help you see how the

item flow in the document. You need to organize the HTML content by adding in ids, classes, and associate

these with <spans> and various <div>. This requires you to modify the HTML page to add in these new

elements. In your CSS, create the corresponding selectors to set the borders to have a color and border

(make it at least 2 pixels thick). The intention of this exercise is to to help you see the layout of your

sections created using div, span, and classes. 1) Place a green border

around all of the

content.

7) Bottom (footer) should

have a yellow border.

6) All paragraphs should

have a thin black border.

This is so you can see the

page flow. Note, all images

should be nested within

<p> elements.

4) Each journal entry

should have a blue border.

5) The dates within these

entries should have a

purple border (consider

span element).

2) Top of the page should

have a red border.

3) The “Good things to eat”

(and h2 element) should

have its own border that is

orange.

Exercise 2: Create files: eatfood_ex2.html and eatfood_ex2.css. NOTE: The only change to

eatfood_ex2.html is that it links to eatfood_ex2.css instead of eatfood_ex1.css.

i) Modify the CSS based on the annotations on the right.

ii) Pay attention to the difference between margin and padding.

iii) Use the rgb(-,-,-); notation for the color property in your CCS.

1) Change the body of

the HTML page to have

a background of

“background.gif”

(provided).

Add a left and right

margin of 10% to al of

the main content.

2) Change the div

around all the elements

(the one with a green

border) to have a white

background.

3) Change all the

entries (all items with a

blue border) to have

the following

background color:

R=196, G=226, B=255

You should also add

padding of 5px and a

top-margin of 10px.

(Note the difference

between padding and

margin)

4) Remove the black

border for the <p>

elements.

Exercise 3: (create files: eatfood_ex3.html and eatfood_ex3.css. )

This exercise will change the alignment of elements using float, overflow, and alignment attributes in the

CSS. This should be possible without editing the main HTML page (other than the link to the new CSS).

See the annotations for the changes to make. Your webpage should look as close as possible to below.

The heading text in

the red box should

appear on the right

side of that section of

the page.

The journal entries’

images should float

on the right side next

to the surrounding

text. The image should

stay within the

bounds of the blue

box; that is, it should

not bleed into the