First Website combined with Civil Rights website
Assignment
UPDATED – June 3, 2017
Caution – Use the website folder provided for this assignment in the D2L only.
Deadline – June 14, 2017
11:59 pm, D2L
See below for deadline and deliverables.
Website you will be making – See website now!
Student Gallery Front Pages – See student pages
Visit website of Kaitlyn Anderman
Visit website of Kaci Jelle
You will be required to only to work on the index.html page and a civilright.html, but can also add the additional pages listed below.
****The index page is always named index.html, serving as the home or welcome page.
You can continue to work on the entire full assignment if you desire.
index.html page will require:
- h1, h2 headlines
- Home page or welcome text of at least 100 words
- At least one photo in the main content area
- A video, update the current video – changing out the iframe code for a new embed code for video.
- Hyperlinks – Make sure you have examples of working hyperlinks.
- Update and add metadata – see information listed below
- Update Header – Update h1 and banner image
- Update Footer – Update all content, see information listed below
- Update sidebar or aside – Includes all content such as social media, text and photo
- Civil Rights page – Required civilright.html
Civil Rights – Select one
If your topics is not listed below, please get help before starting your project.African American – People with ancestry from Africa
European American – People with ancestry from Europe
Asian American – Americans with ancestry from Asia
Latino – People with cultural ties to Latin America
Indigenous – Native Americans
Women
LGBT
Disabled
Civil Civil Rights Page Requirements
1. Select Civil Rights topic
2. Must update the banner image to go with topic.
3. Write 100 words about the topic – write in your own words.
4. Write 200 words about a specific person related to the civil rights topic – write in your own words.
5. Must include one related video displayed on page.
In class lectures – be there!
Most of the items listed below for the assignment will be shown in class during lectures. Optional items will be included as time permits or individually with students. If you need help, ask in class!
About the first website
This is a learning or practice website for creating a first website. It’s a portfolio website to highlight your career, skills and talents. It can be used for applying for internship or job to show case your work.
You can make the website live using the Husky webspace free, optional, or you buy web space from a web hosting service, optional. (Details listed below.) This website is required work for students in the Introduction to Multimedia, COMM 240, course at Saint Cloud State University. The design is responsive, adjusts to all devices, mobile to desktop, and is based on a website at w3school.com. Learn more details at instructor Jannet Walsh’s website, Multimedia Toolkit.
DEADLINE AND DELIVERABLES
Deadline – June 14, 2017, 11:59 p.m.
*** No assignment will be accepted by email, will be deleted, counted as late. Must be delivered to the D2L.
- Attach a screenshot of the home page in a web browser, index.html, of your website in D2L. Do not include in the Website folder. (Screen shop: Shift, option, 4 on the Mac.)
- Attach compressed folder of the website folder in D2L. There should only be the content for the website and nothing else in the website folder.
See more details about creating a compressed website folder.
Compress folder – Your folder can’t be located in jump or flash drive when compressing folder. Move folder to the desktop, DataHD or your portable hard drive. Right click, select compress and an archived folder will be ready for upload.
Get help with this in class.
- If your website is late because you can’t compress the folder, your assignment will be considered late. Make sure you understand how to compress your website folder. See this link on how to compress a file.
CHECKLIST
Download the checklist for this assignment. Download now!
NOTE: You are only creating the index page, index.html, not the entire website as indicated in the checklist. NOTE: This checklist does not include the requirements for the Civil Rights page.
This will help you manage your website project. It is the same list that will be used for grading. If you have not completed a required step, then you are not done!
See what you’ll be making
Website online! Go to the practice website now!
Click here to go to the practice website.
Adjust the screen size now!
See how a responsive website works now by adjusting the size of this web browser and see now the content moves around to adjust to the size of the page. That’s just like viewing on web page on your iPhone, then on your desktop.
Look at the source code
This is the visual part of an Hyper Text Markup Language, HTML, page. If you want to see what’s hidden behind this page in the actual source code, you can simply press Ctrl+U (Windows) or ⌘-Option-U (Mac). If you are confused, then go to Google’s helpful page about viewing source code with this hyperlink.
Setting the Viewport
The secret to this responsive design is called the viewport. This code is found the head of this page. Look for the Viewport now in the source code of this web page.
PROCEDURE – GETTING STARTED
Download folders
- Download files – D2L or Multimedia Toolkit
Website folder and reference folder are located in the D2L and at the COMM 240 Required Work page. - Optional for your computer – Get Adobe Dreamweaver CC tutorials and free Dreamweaver trial, for your own computer, at Adobe.
- Optional Text Editors, free – If you want to learn how to use a text editor, TextWrangler for Macs, and Sublime, PC, download and ask instructor for help. It’s good to know how to use a text editor and Dreamweaver. Use the text editor outside the classroom as lectures will be using Dreamweaver or you will get lost! You will be expected to use Dreamweaver in class to follow lectures.
- Social Media Icons and more located in the D2L in the Design Assets folder.
- Find: First Website folder and the Resources folder
- Rename the First Website folder
FirstLastName_Website021116 Use your name and the deadline of project.
Example: JannetWalsh_Website021116
- Website folder – The newly renamed folder will be your new Website folder for the first website project. It’s vital you always and only save your work in two locations! This is the folder that will be submitted when the website is complete.
- Locate Images folder – You will find an images folder inside the Website folder. All images that are used for your website must be in this folder and nothing else!
- Important – Do not save Photoshop PSD files in the images folder, only the jpeg, png or favicon, favicon.ico, or related items that will be displayed on your website.
- Resources Folder – This folder has files you will be using for your project.
Always Save your project in two locations!
Never work on project directly from jump or flash drive!
1. Save on your personal hard drive and the DataHD on lab iMacs.
2. Save on the DataHD, your personal hard drive or a flash or jump drive. *
* Don’t work on Dreamweaver project from your flash or jump drive. A flash or jump drive is only for transferring data, not storage. Drag the website folder to the DataHD or desktop. (Read this again until you completely understand!)
Your motto working with websites:
Make a change.
Save a change.
If you make any changes to your project, always make sure save changes. You are putting a lot hard work into your project and need to stay organized.
Launch Dreamweaver
When you are working on a Dreamweaver project, make sure you have the following setting. It will make it easier to work on you project.
- Get started – Go to your assignment folder and drop the index.html file on to the Dreamweaver app. The page will now load. You can load the style.css the same way if you are updating the css.
- Beginner – Set the designer window to Beginner, upper right corner of window.
- Split View – Set the window to Split View, left corner, under the gray area.
- Live View – Make sure Live View, not Design view, is selected, nest to Code and Split.
- Properties Panel – Located on the bottom of the panel. If you can’t see it, go to the top of the Dreamweaver window, go to Window, check properties.
- Insert Panel – Go to the top of the Dreamweaver window, go to Window,select Insert, and the Insert panel will appear to the right. The set the Insert Panel to HTML.
- Document Object Model (DOM) and Application – At the top of the Dreamweaver window, go to Window, then make sure the DOM and Application Frame is selected.
Make a plan, sketch
Required Pages for Website
Here’s a list of the require and optional pages for your website:
- Home (index.html)
- Civil Rights (civilrights.html)
- About(about.html)
- Blog (blog.html)
- Resume (resume.html)
- Contact (contact.html)
Optional Pages
You can include a portfolio page with samples of you work, such as stories, videos, marketing plans, photos and more. You can call it Gallery or Photos other. You can use the Lightbox app to display photos and photo galleries, optional. ASK FOR HELP FROM INSTRUCTOR.
Sketches, optional, but highly recommended
It’s now time to think about how many pages you plan to have on your website. Making a simple thumbnail sketch helps you understand you are trying to create for your first website and beyond. This is optional, but recommended. This design will not have a drop down menu as it’s a simple website for the first time website.
Learn more about making a sketch and wireframe of your website at Multimedia Toolkit.
Learn more about making a sketch and wireframe of your website at Multimedia Toolkit.
You will have the required pages: Home, about, blog, resume and contact. Do you want to include optional pages for your portfolio, photos or more? Make a simple sketch now.
Adding style – Making it your own
Make one web page as a template for entire website
You must update all default settings for hyperlinks, photos, text and more. Make the website page your own.
How this will work – One web page will be styled with the colors, banner and other elements, and all details, such as menu, photos and more for the home page, index page. When it’s all ready, the additional required and optional pages will be made, actually copied from your index page. That’s a typical method and it’s easy to do. You can make changes to your other pages as you like.
Text, styling and hyperlinks
- The headlines and body text must be black or a readable color of gray. The website name in the header is set to white. It can be changed, but it must be readable, or just leave it alone.
- Create a hyperlink – The Properties Panel must be open, go to top of Dreamweaver panel, select Window, then Properties and a box will appear on the bottom of page. Have Dreamweaver set to split view. In Live view side of screen, highlight the word or words you want to link to a page or image. Go to Properties Panel, and add the link to the box call Link. Refresh and Save. Check to make sure link is working.
- Hyperlinks or links can be be updated to a color you want or matches your color theme. Currently set to a shade of green, but you can have a color that matches your colors.
- Change hyperlink color, .body a – First create a hyperlink, see above, if you don’t have a hyperlink to work with to change color. Highlight a hyperlink, go to the CSS Designer, locate .body a selector, then the color the hyperlink text. Update this with the color you want for the hyperlink, save and test. If this didn’t change, you might have to update the div p a.
Colors picker for header, footer, menu, sidebar
You will be updating the header, footer, menu, sidebar colors. There are great resources for helping you select color combinations.
Sidebar, aside – right side
All the content in the sidebar, called the aside in the source code must be updated. Social media, photos, Twitter feed and more. You can change the color of the side bar. See more at W3schools about responsive web design.
Changing background color – Sidebar, footer, header and navigation
Have Dreamweaver set to split view. In Live view side of screen, highlight the word or words you want to link to a page or image. The CSS Designer must be open. If not, go to top of Dreamweaver window, go to Window, check CSS Designer.
Sidebar – To change the background color of the sidebar, in split view, click on the Live view section of screen, and click on the div .aside and blue box will surround the aside. Go to the CSS Designer and the background color should appear for the original color, #33b5e5. Click on the color and a color picker will appear. Select the color you want. Copy the hex code, the number and letters that represent the color to use in other sections of the website. Save and update.
Color Background – Footer, Header – Follow the same directions as above, expect click on the footer and header.
Footer, look for .footer in selectors in the CSS Designer panel, locate the background color, and update.
Header, look for .header in the selectors in the CSS Designer panel, locate the background color, and update.
Navigation or menu – left side
Update the menu links and page names. Don’t include a menu item to a page if you are not going to have one an optional page. All menu links must correspond to an actual page or the navigation of the site will not work.
Update or Remove – Points will be taken off if menu is not updated or you leave the optional pages on menu, but don’t include optional pages. The navigation must function, and go to the corresponding page in the navigation.
Navigation background colors – Using the CSS Designer Panel
.menu li – In the CSS Designer panel, under the Selectors, locate .menu li. This is the main color you see when not hovering over the navigation, originally set to a blue color. To change color, click on the .menu li, and change color using the color picker. Save changes, command S on Mac. Note: See how the li tag is highlighted in the code section, helping find the tag for .menu li.
.menu li:hover –In the CSS Designer panel, under the Selectors, locate .menu li:hover. This is color the menu changes to when you hover over the menu. Locate the color in the CSS Designer panel, update color. Save changes, command S on Mac. Note: See how the entire link is highlighted in the code section, helping find the tag for .menu li:hover.
li a:hover – This is the internal color in the menu originally set to a gray color. This color changes with you hover over the menu. To change, to to the CSS Designer panel, locate li a:hover under the selector. Make changes if with the color picker. Save changes, command S on Mac. Note: See how the just the a hover tag is highlighted in the code section, helping find the tag for li a:hover.
Social Media, optional
The social media links all must be updated to your social media links or removed. The social media icons can be changed, resources in the D2L for options.
Update or Remove – If you don’t include your social media, you must remove the default social icons and links in the source code. Points will be taken off if not updated with your social media link or remove the default social media links.
Update Social Media, or any image, with Property Panel – Click on the social media icon or photo, add your social media links using the Properties Panel, save and update.
Update Social Media, or any image, with the Heads Up Display, HUD – Click on the image you want to update, and a small blue sandwich will appear. Click on the sandwich, and options will appear for updating the link, alternative information or more.
Twitter feed, optional
You can add your Twitter feed to your page, suggested in the right sidebar.
- Get Twitter on you web page – Log into your Twitter account, then go to settings, then locate widgets to customize and get the required code. twitter.com/settings/widgets
Footer – bottom of web page
Update all information in the footer. You can remove the link about the student gallery if you want or change it to another link. You must update the the copyright information with your name and a link to your WordPress site. Update or remove the SCSU logo. If updated, make sure the link is also updated.
Update or Remove – Points will be taken off if the footer is not updated with your details and make required updated listed above for footer. *Follow directions listed above for changing the background color, same as for sidebar and footer.
Banner image, website title
- Banner images first must be created the required size and saved for web size images. If the photos are too large, the file size, it will slow down the loading time on devices. See video below.
- A banner image is required on all pages. You can use the same banner on all pages or change out the banners for each page. All banner images must be linked to the index.com page – do this in the Properties panel. Select the size for your banner with the details listed below. Test with place holder images in your website folder.
- 1600 pixels by 180 pixels – This banner will take up less space in header, but difficult to find an image that looks great narrow. This image must be set as responsive image and link to the home page, index page, when placing photo using the properties panel. View page with 1600 pixels by 180 pixels banner.
- 1600 pixels by 300 pixels – This option is 1600 pixels by 300 pixels. You will need to see what looks best. This image must be set as responsive image and link to the home page, index page, when placing photo using the properties panel. View page with 1600 pixels by 300 pixels banner.
- 1600 pixels by 500 pixels – The other option is 1600 pixels by 500 pixels. (You could also try1600 pixels by 400 pixels.) You will need to see what looks best. This image must be set as responsive image and link to the home page, index page, when placing photo using the properties panel. View page with 1600 pixels by 500 pixels banner.
- The website title should be your name. It’s a professional or career website. Example: Jannet Walsh, or Jannet Walsh Portfolio.
Video tutorial for making banner image
Page title
Each page must have a page title. You will need to update each page. The page title appears in the top area next to favicon in a web browser. Page title is not the headlines, H1 and H2. It the information that is listed at the top of a web browser and is found the header section of a web page.
The easiest way to add the title is to use the properties panel. You can also go to the head of a page, and use the title tag.
Meta data requirements
Meta data is information located in the header, not visible to page viewers, but the search engines use the information to find your page. This is required on all pages. See below for required meta date. This content is added the header area, using the HTML insert panel or the Insert menu located on the top of the Dreamweaver window. You must place your cursor in the header section, then use the HTML insert panel for Meta Data.
- Description – example: Jannet Walsh website (Update with your name.)
- Author – example: Jannet Walsh (This is already on the index.html page, but you must update with your name.)
- Keywords – example: Jannet Walsh,HTML,CSS,web design, St. Cloud State University, multimedia, COMM 240 (Update with your details.)
- Description – example: This is a career and professional website by Jannet Walsh, Assistant Professor at Saint Cloud State University. This website is used for learning web design, HTML, CSS, Adobe Dreamweaver Creative Cloud, Adobe Photoshop Creative Cloud and more. (Update with your details.)
- Robots – For keeping robots from indexing pages, content is noindex,nofollow
- Googlebot – For keeping robots from indexing pages, content is noindex,nofollow
Favicon, optional
Currently there is a default favicon, the small image or icon that appears on the top of a web browser, like a logo or image. You can use the default favicon or update it.
Create Favicon, optional – You can use one of the many free favicon generators online. You will add new favicon to the images folder in your website folder, but must remove the default favicon or it will not appear. The name must be favicon.ico or it won’t work. The favicon as special code located in the header to make it work. Learn more about favicons at the W3C website.
Adding Pages – (Don’t add pages until you plan to go beyond the index page.)
Go to Final Steps
Creating pages
If you have completed all the information listed above, you are ready to create the additional required pages, any any optional pages.
Create additional page – It’s a process of duplicating the pages. Go to Save as, the name the page, example about.html. Save to your website folder. The pages must be called the same as the links in your navigation or the pages will not be connected. Example: contact.html, NOT ContactPage.html
Required Pages for Website
- Home (index.html)
- About(about.html)
- Blog (blog.html)
- Resume (resume.html)
- Contact (contact.html)
Optional Pages
You can include a portfolio page with samples of you work, such as stories, videos, marketing plans, photos and more. You can call it Gallery or Photos other. You can use the Lightbox app to display photos and photo galleries, optional.
Required H1, H2, on all pages
All webpages require an H1 and H2 headlines as it’s used by search engines to find your webpage. This is a professional website to highlight your career, skills and talents.
Home Page Requirements
See index page
No less than 100 words required, written in full sentences about your website and you. This is the welcome page to your website and a brief introduction to your site. Add photos, video or more as you like, but don’t over do it! You must update the title of the page. Example: Home – Welcome to my website! See the Resources folder.
About Page Requirements
See about page
No less than 200 words required, written in full sentences about your website and you. This is the welcome page to your website and a brief introduction to your site. Add photos, video or more as you like, but don’t over do it! You must update the title of the page. Example: About – Welcome to my website! See the Resources folder.
Blog Page Requirements
See blog page
This will be a page that includes a screen shot of your WordPress website, a brief description and links both the page and the screen shot to the home page of your WordPress site. Add photos, video or more as you like, but don’t over do it! Go to the blog page of the practice website to see the example for ideas. You must update the title of the page. Example: Blog – Welcome to my website! See the Resources folder.
Resume Page Requirements
See resume page
This is a page to include an online resume. A template has been provided along with links for help writing your resume. You must update the title of the page. Example: Resume – Welcome to my website! See the Resources folder.
Resume help – See examples of resumes at Saint Cloud State University Career Services Center. Get help with your resume at Career Services, it’s free!
Here is an excellent example of a resume you should look it! Look at the short summary, jobs, education, skills and expertise and professional associations are handled.
Contact Page Requirements
See contact page
A contact form is required, along with the required headlines. You can add a photo, video or other details as you like. You must update the title of the page. Example: Contact – Welcome to my website! See the Resources folder.
Portfolio, optional
See portfolio page
Share your photos, stories, videos and more. You must update the title of the page. Example: Portfolio – Welcome to my website! See the Resources folder.
Photo Gallery with Lightbox, optional
See Photo gallery page with Lightbox
See examples at the demonstration website. The Dreamweaver photo on this page is a Lightbox example. Just click on the images and the photo will expand. Learn more about Ligthbox, by Lokesh Dhakar at his website. The use of Lightbox is covered by an open source license, The MIT License, from The Massachusetts Institute of Technology (MIT). See the Resources folder.
Final steps, making it live!
Final steps
Make sure your website is functioning. That means all links, photos, and all have been updated and work, along with the navigation. If you are done early, send a link to the instructor or get help in class.
Spell Check – It’s one point off for each typo! Make sure you spell check everything on your website. Learn more about spell checking with Dreamweaver.
You can check spelling in Dreamweaver, but first must be in Design view, toggle on top of the code and visual views. Insert the cursor on a heading, then go to Commands, then select Check Spelling.
Note: If you start the spell check at the bottom of the page, you will need to restart again at the beginning of the page. It will not check area that are not editable.
Find and Replace text
If you need to search for a word and replace, you can also do that in Dreamweaver.
First, make sure you are in Design view. Insert your cursor, the go to Choose Edit, the Find and Replace. The dialog will open, type in the word you need to replace, and write what needs to be replaced. You can replace one at a time or all at once.
Make it live! – Optional
SCSU Student server, Optional– Ask in class for help to make our website live. It’s good to know how to create a website, but also important to make your website live. Here are the instructions for uploading to the student webspace. Go to the instructions now!
Graduating or want your own website live?
If you are graduating this semester or just want your own live website, I suggest you host your website. That’s up to you. If you do this during the semester, I can get you suggestions and help with the process. Host providers: Blue Host, I’ve used for several years and Go Daddy, popular, but I’ve never used it. Read reviews before deciding on a hosting service.
Fetch – Makes it easy to update your website instead of going to the host server.
I also suggest you get something like Fetch, an up that makes it easy to upload your site to the server. Learn more about Fetch.
Grading rubric
|
Possible Errors |
Point Loss |
|
-1 |
|
-2 |
|
-3 or more |
Multimedia Toolkit 
You must be logged in to post a comment.