Expert answer:web design
Expert answer:Updating website to look like website. The information attached is steps
to how the instructor wants it done. I’ve created a HTML and CSS. I
will attach them as well
web_koech.docx
Unformatted Attachment Preview
Assignment #5: Links
•
This assignment will demonstrate using hypertext links.
1. You will add some pages to your Web site.
2. You will be adding a set of relative links near the top of your index page.
3. You will also add some absolute links to a new “Resources” page. See below
for details.
4. You put a title attribute into each of the links that you make for this assignment.
•
If you have not yet done so, design your pages around a 1024 x 768 pixel screen
resolution. What this really means is that you have about 980 by 600 pixels, at most, of
screen real estate to work with. To be safe, design around a page size of 960 by
560 pixels.
•
Add some hyper-text links to your index page, as the main “navigation bar”. You have
only two choices about where to put your main navigation links:
1. Near the top of the page (probably under the banner image if you have one)
2. Down the left side of the page’s body
•
Later in the semester, you will alter these main navigation links to use images. For now,
just use text links.
•
You need to use the same index.html page that has been your assignment page for
your previous assignments.)
•
These links will be your main navigation area, as you continue through the semester.
•
Here are the three relative-URL links that you will add to your index.html page:
o Home (with an href attribute of index.html) (This is a purposely circular link and
will make more sense later in the semester.)
o About Us (with an href attribute of aboutus.html)
o Resources (with an href attribute of resources.html)
•
Here are some details below about what to put into the new pages About
Us and Resources:
o
In the About Us page, just put a few very brief paragraphs of text. Make sure
you identify the page as the “About Us” page in one of the paragraphs. The text
that you put into these paragraphs, once you have put “About Us” in there
somewhere, can either be pretend descriptions of your pretend site, or “Greek”
text from the Lorem Ipsumsite.
o
In the Resources page, put a paragraph which includes some text that identifies
the page as the “Resources” page. Then put in another paragraph which
contains at least two absolute-URL links to some web sites of your choice. I
suggest that you link to sites such as
▪ Google.com
▪ Wikipedia.org
▪ W3Schools.com
And make sure you put the attribute target=”_blank” into your exteral-URL
tags.
•
Make sure you put a title attribute into all of the tags, meaning all of the relativeURL tags and all of the absolute-URL tags that you have created for this
assignment.
•
Continue to use your external stylesheet, myStyles.css, if you need to make any
formatting and/or styling changes.
Assignment #6: CSS Positioning
•
This assignment will demonstrate:
o Using CSS style rules to position elements on a page.
o Putting some positioned content into your Resources page.
•
Use the same stylesheet that you have been using for your other
assignments, myStyles.css.
•
Put some additional content (and tags) into your Resources page. You should already
have some hypertext links in this page, so put in some other “resource”-related content.
o Put in some paragraphs ( tags) containing text describing why it is
important to locate reliable resources related to your site’s topic;
o Also consider putting in some images relating to your site’s topic;
o And consider putting in some additional hypertext links to relevant resources.
•
•
If you don’t already have a tag containing everything else in your “Resources”
page, put a main tag into your page, which contains everything else in the page.
Give it an id attribute which identifies it as your main , something
like id=”mainDiv”. Put a selector into your stylesheet, #mainDiv (or whatever you put
as the id of your main tag) and give it style properties which include at least these
properties:
o width: 960px;
o height: 560px;
o margin-left: auto;
o margin-right: auto;
o position: relative;
The most important of the above style properties, relevant to the rest of this assignment,
is the position: relative;property. You can be somewhat flexible with the others, if you
wish.
•
Add an “id” attribute to each paragraph if they don’t already have one, and use “id”
selectors in your stylesheet to position your paragraphs with these properties (which
you can add to the selectors that you have already used to style your paragraphs, if that
is the case):
o width: 400px;
o position: absolute;
o left: 15px; (for odd-numbered paragraphs)
o left: 445px; (for even-numbered paragraphs)
o top: 200px; (or whatever fits into the rest of your page) from the top edge of the
display area
If you position your paragraphs properly, they should look like a two-column layout like
you might see in a magazine.
•
Now give your other content tags which you added for the “Put some additional content
(and tags) into yourResources page” step above, an id attribute if they do not already
have one.
Use the id attributes as selectors in your stylesheet to position the content
using absolute positioning. Position your tags/content wherever it makes sense, but do
use CSS positioning with a value of “absolute”.
Assignment #7: Headings and Lists
•
•
This assignment will demonstrate:
o headings
o lists
Modify your resources.html file from the “Links” assignment, for this assignment.
•
Add at least one heading.
•
Add at least one list. You might want to consider putting the external links that are
already in the page, into this list. This is an option, not a requirement. You can, instead,
put a list of something else into the page.
Assignment #8: Breadcrumbs
•
Add breadcrumbs to each of your site’s pages.
•
If you want to get an idea of what your site will look like after this assignment is done,
take another look at the instructor’s assignment site. (But remember that you have not
yet fleshed out any of the other pages except for the Home, About Us, and possibly
Resources pages.)
Assignment #9: Design Points
•
This assignment will demonstrate:
o
Understanding basic Web-page and Web-site design.
o
Using an Alternative (Text) Menu.
o
Using breadcrumbs.
•
With this assignment, you will expand your Web site with more pages and more
features.
•
What other pages will you have in your mini Web site? (You already have About
Us and Resources.) Unless you have other ideas for your site, I suggest that you will
make these pages in addition to your index page:
•
o
About Us
o
Portfolio
o
Media Kit
o
Resources
o
Contact Us
o
Site Map
If you have not already done so, change your main navigation links into image links.
(You will not change the Alternative Text Menu links; they will remain as text links.)
There are some images at the bottom of this assignment page, which you can use if you
wish.
You will also need to add a tag (and its ending counterpart, of course) as a
container for your navigation links.
•
So you will need to create or download some images that will be used as the navigation
buttons for your mini-site. Unless you have designed other types of pages into your site,
your images will need to be links to these new pages (which you will make later in this
assignment):
o
Home (which is your Index page)
o
About Us
o
Portfolio
o
Media Kit
o
Resources
o
Contact Us
o
Site Map
You can download these buttons from the images at the bottom of this page or from another
source of online images, or you can create your own if you have a good image editor (such as
Photoshop or GIMP) and the skills to do so.
Save these images to your local images folder.
•
Add more links to your main navigation bar and also to your alternative text links (see
the next step), so you have links to all of your site’s pages. (You will make more pages
later in this assignment.)
You will also need to add a tag (and its ending counterpart, of course) as a
container for your navigation links.
•
Add the alternative text menu links to your index page. These links usually go at the
bottom of the page, in or near the footer.
You will also need to add a tag (and its ending counterpart, of course) as a
container for your alternative text menu links.
•
Add breadcrumbs to your pages. I suggest that you add the “Home” breadcrumb to
your index.html page, and use it as the basis for the other breadcrumbs in your various
pages. See the next item.
•
I suggest that you use CSS positioning rules to place your content, navigation buttons,
logo/banner image, and alternative text menu in the index page.
•
I suggest that you get your index page in good shape, with the logo/banner, navigation
buttons, and alternative text menu, along with the other content that you want to keep in
your index page; VALIDATE your index page; and then copy the index page (or Save
As) to make the rest of the pages for this assignment.
•
Make the other pages for your mini-site. Unless you have designed other types of pages
for your site, I suggest that you make these pages:
1.
About Us page (aboutus.html), which you should already have
2.
Portfolio page (portfolio.html)
3.
Media Kit page (mediakit.html)
4.
Resources page (resources.html), which you should already have
5.
Contact Us page (contactus.html)
6.
Site Map page (sitemap.html)
But don’t worry about putting meaningful content into these new pages yet. Just put some text
into each new page that identifies it, like “Media Kit”, “Contact Us”, etc.
As I indicated above, if the theme of your site does not easily blend into these six pages, you
may make six different pages, but make sure you can’t fit the pages I mention here into your
theme before you do that. If you do make different pages, you will need to keep track of your
substitutions for subsequent assignments.
•
The instructor’s mini-site has all of these items on the index page. You can look at these
pages as an example.
•
Validate your index.html page with the W3C’s HTML Validator page. I will also be
validating your page, so this validation will be part of your grade. Don’t worry about
validating the six new files yet; you will validate those in later assignments after you add
real content to them.
•
Validate your stylesheet page with the W3C’s CSS Validator page. I will also be
validating your page, so this validation will be part of your grade.
•
Before you upload (FTP) this assignment to your student site, make sure that I have
graded all of your previous assignments!! If not, get your previous assignments done
and uploaded, send me an email asking me to grade them, and when you have verified
that I have graded them, ONLY THEN do the next step…
•
Upload (FTP) the pages and images to your student site.
•
Test all of the links in your pages.
Here are some images that you can download for your navigation buttons, if you don’t want to,
or can’t, make your own. Right-click in the images that you want, and save them to
your images folder:
If you are interested in making some of your own buttons, here are some details about how I
made my buttons in GIMP:
•
The image for each button is 140 pixels by 30 pixels.
•
The bevel effect for the background color is done with one of the GIMP filters. In GIMP,
look in the “Filters” menu for “Decor”, then “Add Bevel…”. I used a Thickness of 10.
•
The colors for each set of buttons are given below. Please note that the Background
Color is the color before the “Add Bevel” filter is applied.
Set Name
Background Color
Text Color
Blue
#9be1f3
#3144bc
Yellow
#f2ee87
#3144bc
Red
#eca1a8
#774f28
Green
#a2d69f
#357728
Gray
#bfbfbf
#3144bc
Assignment #10: Tables
•
This assignment will demonstrate:
o Using tables
•
For this assignment, you will use a table to display some “tabular” data in one of your
HTML pages. You may decide which of your pages will most logically have a table in it. If
you can’t decide, or it doesn’t matter to you, put the table into your About Us page.
The data in your table can be anything that makes sense to have in a table/grid display,
for instance:
o
o
o
o
Current stock prices (with columns for, say, the company name, yesterday’s
price, today’s price, etc.)
Last night’s scoreboard for your favorite sports league
The most recent additions to your product catalog
Whatever else you want to put into a table/grid display
•
•
You may also, if you wish, put a table into your index page which contains your
navigation buttons (images).
If your navigation buttons are currently in a horizontal row across the page, make a
table with one row and seven cells, to contain your navigation buttons.
If your navigation buttons are currently in a vertical column down the page, make a
table with seven rows and one cell in each row, to contain your navigation
buttons.
Assignment #11: Forms
Updated 7/12/2016 at 7:30pm
•
This assignment will demonstrate:
o Using forms for user input
o Adding another page to your site
o Adding more breadcrumbs to your site
•
Put a “Feedback Form” link on your “Contact Us” page. This link should display a new
page which has a form that the visitor can use to send comments and other feedback to
you. (This form will not actually allow anyone to send anything to you. It will merely send
the visitor’s information to a simple server-side display page.) Combine your knowledge
of CSS positioning, tables and forms to lay out the form fields neatly. The new page will
be feedbackForm.html or something similar to that name.
•
To be more specific: On the “Contact Us” page you will have
o Whatever instructions and information you think are appropriate for your site, that
the user can use to contact you.
o A link to your Feedback Form (which will be on new page feedbackForm.html).
On the new page, feedbackForm.html, you will have the form itself. See below for
details about what will be in the form.
•
Use a method=”post” attribute in your form tag.
•
Make the action attribute of your form tag to be
“https://www.jimlink.net/PHPStuff/testFormData.php”. This page will display the form
data that your page sends to it.
•
You may optionally put a target attribute in the form tag, with a value of “_blank”.
•
Include, as a minimum, these fields in your form:
o An input text box for the visitor’s name (or two text input boxes, one for first name
and the other for last name). You may choose either one or two text input boxes
here.
o An input text box for the visitor’s e-mail address.
o A drop-down select list that asks why the visitor is contacting you. Your list
should include items such as feedback, suggestion, sales inquiry, broken link
report, advertising inquiry, etc.
o An input text area (multi-line input, meaning a textarea element) for the visitor’s
comments.
o A submit button
o A reset button (This button is optional.)
•
I will give you 20 extra credit points if you put a working set of radio buttons in your
form. By working set, I mean a set of radio buttons which allows the user to select only
one choice (at a time) in the set.
•
Put breadcrumbs on the Feedback Form page. Keep in mind that the logical path to
the Feedback Form page is through the Home page and the Contact Us page. You can
refer to the instructor’s assignment site for some more clues about how these
breadcrumbs should look. (Click on the “Contact Us” and the “Feedback Form” links on
the instructor’s site page.
…
Purchase answer to see full
attachment
Studypool values your privacy. Only questions posted as Public are visible on our website.
How it works
- Paste your instructions in the instructions box. You can also attach an instructions file
- Select the writer category, deadline, education level and review the instructions
- Make a payment for the order to be assignment to a writer
- Download the paper after the writer uploads it
Will the writer plagiarize my essay?
You will get a plagiarism-free paper and you can get an originality report upon request.
Is this service safe?
All the personal information is confidential and we have 100% safe payment methods. We also guarantee good grades