Website代做、代写HTML/CSS编程语言、HTML，CSS设计代做

日期：2019-11-01 11:28

Project 4: Website Development Using HTML and CSS

Project Instructions

This project assignment will be marked based on a number of requirements that your

website meets. Specifically, this project involves 18 tasks. Each task has some

instructions and a checklist of requirements. You may also want to check marking

scheme that posted in Assignment 4 forum.

Task #1: Choose a Text Editor

Instructions

In order to make changes to template.html and mystyle.css you'll need a basic text editor which

have syntax highlighting. On Windows, download Atom. On a Mac, download BBEdit.

Do NOT use Microsoft Word or any other text editor that you might write an essay or

formal paper in.

How to Install Atom for Windows?

1. Download theAtom installer (remember where you saved it).

2. Find the Atom Setupfile.

3. Open the Atom Setup file and wait for the setup screen todisappear.

4. You’re done! Atom will automatically open for the first time to get you started. An icon

should now be on your desktop to run Atom again in the future (You can also access

Atom by searching for it from your startmenu).

2

If you are having any issues on installing Atom, you can check out an official tutorial

on installing Atom on any platform.

How to install TextWrangler (BBEdit) – Macs Only

1. Follow the video tutorial to download and install theTextWrangler (BBEdit).

2. Download BBEdit from the following links:

http://www.barebones.com/products/textwrangler/download.html

3. You may alsofindinyour App Store

Checklist

1. You've downloaded Atom for Windows and TextWrangler for Mac.

3

Task #2: Create the Required .html Files

Instructions

It is recommended that you make a special folder on your Desktop called Website or

Project 4 and put all of your assignment related files in this folder.

Go to the Assignments page on CourseLink, click on Project 4.

1. Locate the Project_4.zip, downloadlink

2. Click the link or right-click and select Save Link as…

3. Save the file to your Websitefolder

4. Unzip Project_4.zip

i. On Windows: right-click -> Extractall…

ii. On Mac: double click

5. Copy and paste template.html so that you have four (4) copies of it.

6. Rename them: index.html, naturaldisasters.html, technologicalinnovations.html and

otherapplications.html for the option A; index.html, hotels.html, restaurants.html,

venues.html for optionB.

7. You don't need a file called template.html any more. Make sure that filenames are

lowercase and that the extensions are .html.

Checklist

Option A Option B

1. index.html exists 1. index.html exists

2. naturaldisasters.html exists 2. hotels.html exists

3. technologicalinnovations.html exists 3. restaurants.html exists

4. otherapplications.html exists 4. venues.html exists

All files in the same folder

4

Task #3: Investigate Host HTML Works

Instructions

You have investigated how HTML works in your Lab 4 activities. If you need to refresh your

memory you can check out other HTML tutorials. It is a bit overwhelming at first, but just

take it slowly. You can open up a blank file to start testing this out.

Follow along in your basic text editor to start understanding the basic of HTML. It is very

important that you understand these basics before you proceed, so go test it out now.

You can view your file as a website by right-clicking it and selecting “open with” (you can

select the web browser of your choice). This only works for .html files. Note that before any

changes will appear, you must save the file, and then reload your browser.

Checklist

1. You understand that adding text to your .html files causes the text to appear on your

website when viewed in abrowser.

2. You understand that tags (like <br>) have special effects on the content of your

webpage.

3. You understand that you must save your file and refresh your browser before

changes willoccur.

5

Task #4: Use Horizontal Rules, Paragraph Tags, and Line Breaks

Instructions

Now that you know some of the basics of HTML, it is time to start creating your webpage.

Open up a file like index.html in Atom or TextWrangler (BBEdit), or another basic text editor.

Use your knowledge of HTML to start adding some text to the page. Add some tags to

format the text how you wish.

To change the layout of your text, you can use horizontal rules, paragraph tags, and line

breaks.

Paragraphs of text can be enclosed by <p></p> tags. Paragraph tags add spacing before

and after each paragraph. Note that this won't indent the paragraph.

Line break tags <br> basically put an 'enter' or new line into your text. HTML ignores

'whitespace' – so it doesn't matter how you space things in your HTML code, it won't affect

how it displays in a web browser.

Horizontal rules <hr> place a horizontal line across the page. Their appearance can be

modified using CSS. They are usually used to separate sections. You are expected to have

at least one <hr> somewhere on your webpage.

Checklist

1. You have at least 1 <hr> tag on your website.

2. You are aware of how to use <p>tags.

3. You are aware of how to use <br>tags.

6

Task #5: Investigate How HTML Works Part 2

Instructions

It is very important that you know how HTML works before going any further in the

assignment. Re-read some of the HTML tutorials. https://www.w3schools.com/html/

Keep practicing, and then practice a little more. It may take some time getting used to this.

Try to do the following things in some of your .html files, and make sure that they work:

? bold

? italicize

? underline sometext

? add a line break <br>

? add a horizontal rule<hr>

? add a link

? add a heading like<h1>

? write a paragraph <p>

? make some lists

? insert an image

? insert a table

You may delete the elements after you are satisfied you know how they work, the point of

this task is just for you to make sure you know how to use HTML.

Checklist

1. You have read the HTMLtutorials.

2. You have followed along with some of thesetutorials.

3. You have experimented in your .html files by adding some elements.

7

Task #6: Investigate How CSS Works

Instructions

Like HTML, CSS is going to be difficult to learn. You have worked through the Lab 4 to help

you grasp CSS and can review these additional CSS tutorials.

In mystyle.css, there is a section of code with the following structure:

In your .html files, there are 3 main sections:

Everything between the <div class="maintext"> and </div> tags represents the main

section of your webpage. In your CSS file, everything between .maintext {and} effects the

appearance of your main section.

Let's look at an example. Say we wanted all of the text in the main part of our webpage to

be blue. We could through each of us .html file and add the line <font color="blue">, but

that is a lot of repetitive work. Instead, we can just alter the CSS file and the line color:

blue.

If you save your CSS file and reload your browser, all of the text in your main section

should be blue.

8

In a similar fashion, there are also sections in your mystyle.css that correspond with your

links and header sections. Note that all of the CSS code for all there has:

This means that it is a class – and therefore you can put <div class="classname"> and all

of the code in that CSS sections will apply to this <div>.

One thing you shouldn't do in CSS is nest burly braces: {{}}. If you do, it may completely

break your CSS.

One more example before you are going to investigate CSS on your own. Remember the

HTML tags that you experimented with earlier: <h1>, <hr>, <p>, <table>, and <img>? We

can change the default behavior of these tags by alter the CSS file a bit. For instance, the

<h1> usually produces larger than normal text, and is usually bolded. But, say that we want

all of our <h1> tags to produce a red, italicized font.

First, go to the bottom of the CSS file and put the name of the HTML tag that you want to

alter, in this case h1. Then write the codes for the changes that you want to apply:

Now all of your <h1> tags should appear red and italicized.

Make sure to read the CSS tutorials to understand how to use it with your HTML.

Checklist

1. You understand that changes to your CSS code within curly braces affects the

associate element(s) in your HTML files.

2. You understand that changing your CSS code affects all of your HTML files.

3. You understand what classesare.

4. You understand that you can affect the behavior of HTML tags using CSS.

9

Task #7: Create a Link Bar

Instructions

In the <div class="links"></div> sections of your HTML pages, you will add links to other

pages. On each page, you need to have a link to every other page on your website (for

consistency, you should have a link to the current page as well). Try to make sure that the

order of the links is the same on each page, as it is makes your website easier to navigate.

In addition to your internal links (same website, different page) you should have 2 external

links (different website). They can be to any websites you like so long as they are

appropriate. The easiest options would be google.ca and the university website.

You can add a link using <a href="URL">LINK TEXT</a> where URL is the page you want

the link to go to, and LINK TEXT is what you want the link to say.

For links to your own pages, so long as the HTML file is in the same folder, you only need

the name of the file, for example: <a href="venues.html">Venues</a>

For links to external pages, you'll need a full URL, for example: <a

href="www.google.ca">Google</a>

Checklist

1. Every page on your website has a link to every other page on your website.

2. Every page on your website has a link toitself. Every page on your website has at

least 2 externallinks.

3. Every page has at least 6 links in its linkbar.

4. All links work when your HTML files are in the same folder.

10

Task #8: Set a Title to Appears in the Title Bar for Each Page

Instructions

At the top of each of your HTML files, inside the <head> section, there is a <title> tag. The

text between <title> and </title> is the title of that webpage. For each page, add an

appropriate title, it will appear at the top of the browser window, usually on a tab.

Checklist

1. Each page on your website has a title.

11

Task #9: Create and use a Background Picture for Your Header Division

Instructions

Using GIMP or a similar image editing program, modify a picture such that it is suitable as

a background for your header division. If you don't have an image editing program yet, you

can Download GIMP which is available for both Windows and Mac (keep in mind that it

isn't a very fast program). For Mac user, you may want to use iPhoto which is installed in

every Mac.

You may want to take this time to edit the other 2 images you'll need for the venues or

technological innovations page of your website.

Once you're happy with your image, you can add it into the background by going into your

CSS and adding, in the header section:

Make sure that the filenames match exactly and the extension is the same. Also make sure

that you page header is still readable on each page.

The width of the header division is 855px, keep that in mind.

Checklist

1. Every page has a background image in its header division.

2. The background image is placed usingCSS.

3. The header is stillreadable.

12

Task #10: Add Background to Your Links and Main Text Divisions

Instructions

You can add a simple color background to a section of your website by adding this line to

the corresponding section in your CSS:

This will set the background of that section to a harsh red color. This works for most basic

colors, and you can also use light colors, like lightblue and lightgreen, which aren't as

harsh (light red is pink).

To set more custom colors, you can use RGB codes like #0080FF (which is a shade of

blue).

You can also use an image for these sections as well.

The sections must have different backgrounds, but can have the same color scheme on

each page.

Checklist

1. The link section on each page has abackground.

2. The maintext section on each page has abackground.

13

Task #11: Make Use of Different Heading Levels

Instructions

When you were investigating HTML, you should have stumbled across the different levels

of headings: <h1>, <h2>, <h3>. Each level of heading should be slightly smaller than the

previous level. Heading 1 is usually used to introduce articles or large sections of text.

Heading 2 and lower would be used for subdivisions of articles or sections. You should

make use of at least 2 levels of heading on your website.

The reason the headings are so important is that search engines like Google use headings

to judge the content of your website. Google still looks at all of the content on the page, but

considers text in <h#> tags to be more relevant than other text, progressively less relevant

as the heading gets smaller.

You should also use CSS to customize the appearance of each level of heading.

Checklist

1. At least 2 levels of headings are used on yourwebsite.

2. You have used CSS to customize the appearance of your headings.

14

Task #12: Make Use of Lists

Instructions

There are two basic type of list in HTML – ordered lists and unordered lists. Ordered lists

are numbered, and unordered lists have bullets. You are expected to have at least one

ordered list and one unordered list on your website (each list must contain at least 3

elements).

Ordered lists use <ol></ol> tags and unordered lists use <ul></ul>. Between these tags,

you can use <li> and </li> to denote list items. Remember to close the tags (use the </ul>

or </ol> tag at the end of the list, and </li> at the end of each item), otherwise the rest of

your page will be indented.

You will lose marks if your page style is messed up because you didn’t close a tag.

Checklist

1. Your website has at least 1 orderedlist.

2. Your website has at least 1 unorderedlist.

15

Task #13: Modify and Use Two Pictures on Your Website

Instructions

If you haven't already, use GIMP or similar program to modify 2 pictures for your

otherapplications.html or venues.html page. Some simple and acceptable modifications

are:

? Border effects

? Filters

? Cropping

? Adding pieces of otherpictures

Your header background does not count towards the 2 pictures. Remember to include the

changes you've made to the images.

Checklist

1. Your otherapplications.html or venues.html page have 2 modified pictures onit.

2. You've included the changes you've made to theimages.

3. Your otherapplications.html or venues.html page has 2 original pictures onit.

16

Task #14: Make Use of a Table

Instructions

Your technologicalinnovations.html or restaurant.html page may be the perfect place for an

HTML table, but you can use them on any page you want. A table uses the <table></table>

tags.

<tr></tr> tags denote rows in the table. <td></td> tags denote cells in the table. Your table

must have at least 2 rows and columns.

Checklist

1. Your website has a table on it (Pictures of tables don't count).

17

Task #15: Centre a Table or an Image Using CSS

Instructions

You can center an image or table by adding a new class to your CSS, like:

Apply it to the image or table by adding class="imagecenter" or class="tablecenter" inside

of its opening tag. Inside of the new CSS class, add these lines:

This will force the element to occupy the center of its section. You can also force

something to the right or the left by using: float: left; or float: right;

Checklist

1. At least 1 table and/or image is centered.

18

Task #16: Use Appropriate Indentation in Your HTML and CSS Files

Instructions

Good indentation makes it easier to read and debug your code. Whenever a new logical

section of your code starts, you increase the number of tabs by one.

Whenever a logical section of your code ends, you decrease the number of tabs by one.

Look at the indentation tutorial, and the given files for more information.

Checklist

1. You've indented your code appropriately.

19

Task #17: Implement the Hover, Link, Visited and Active Pseudo-Classes

Instructions

Implement the CSS hover, link, visited and active pseudo-classes as per the tutorials. Each

pseudo-class should use at least one selector.

Checklist

1. The hover pseudo classworks.

2. The link pseudo classworks.

3. The visited pseudo classworks.

4. The active pseudo classworks.

20

Task #18: Use Correct Naming for all Webpages and Pictures

Instructions

It is essential that all of your webpages and pictures have correct naming, as if they don’t

you will encounter complications uploading your files.

All filenames should be lowercase with correct extensions.

In order to modify file extensions in Windows, under Windows Explorer, go to Tools-

>Folder Options, then go to the View tab, and deselect the box labeled “Hide file

extensions of known file types”.

Correct extensions:

? Webpage files should have the extension.html

? Picture file extensions vary from picture format to picture format.

It is safe to make the extensions lowercase, but do not change them from one type to

another, unless you are using a graphics program such as The GIMP. (The graphics

program will change the graphics format to match the extension.)

Incorrect extensions:

? Anything withcapitals.

? Anything such as.html.html

If you have used inappropriate filenames or extensions, then you will have to fix them, and

fix all references to them in your HTML code. (i.e. <a> tags and <img> tags).

On a related note, when you are working on your webpage on your computer, you should

have all files in the same folder.

Checklist

? All filenames are in lowercase with correctextensions.

? All references to inappropriate filenames in your code have been updated.

21

Submission Instructions

Once you’ve finished your website, save it on a USB key and use a different computer to make sure

all internal links and external links are working.

Then compress (zip) the website folder (including all files and images) and submit the zipped folder

through the Dropbox link located in the NavBar on the Course Home page. Please do not publish it.