About
Civil Right Project Part One
Civil Right Project Summary
DEADLINE AND DELIVERABLES
Thursday, March 3, 2016, end of class
- Attach a screenshot of the home page, 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. There should only be the content for the website and nothing else in the 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.
Civil Rights Website Files – Download now!
Students will choose from a provided list of groups that have fought for civil rights in the United States. Students will then research that group, in particular the leaders of their movement for equality. The list is posted in Civil Rights Project Part One.
Website you will be making – See it now!
Website version two, full page slider – See it now!
Ask for help if you want to create version two of the Civil Rights Website.
Applications – Using Adobe Dreamweaver Creative Cloud, students will built their own website using best practices. This project will use Bootstrap from one of the Dreamweaver themes that is ready to use. Student will prepare photos to use on their website in friendly formats using Adobe Photoshop Creative Cloud.
Make sure you understand how to create compressed folder for delivery.
See directs listed below. You project will be late if you have not delivered project by the deadline.
Compress website folder for dropbox
1. Find your website folder, make sure it is closed, located on desktop or DataHD or portable hard drive.
It can’t be located on a jump drive or flash drive.
2. Make sure all the required content is located in the folder for your website: images, css, js, fonts and pages.
3. Compress folder: Right click and press compress. An archived folder should have been created.
4. Right click to compress on Mac.
5. Ready for upload to drop box!
CIVIL RIGHTS PROJECT PART TWO
Website Creation – What you are doing – You will be creating a website with Dreamweaver Creative Cloud about your civil right topic and at least one leader or person that helped advancements in civil rights.
Civil Rights Website Files – Download now!
REQUIREments – Checklist
Use this list before handing in your project.
If you don’t understand, get help!
- h1, h2 headlines on each page
- Required Text: See all requirements at bottom of this page or go to Civil Rights Part One.
About – At least 100 words, can be more than 100 words
General Description – At least 200 words, no more than 300 words
Biography – At least 150 words, no more than 250 words
Welcome message – required only for the full slider, version two website design. – If you are doing the version two of the website, full page slider, an additional welcome message of 50 words is required. - Navigation – Update all navigation links and names for your website. All links must be working.
- At least one photo in the main content area of each page, banners are optional, expect for the index page.
- A video – There must be at least one video on your website, but you can include more. Changing out the iframe code for a new embed code for video.
- Hyperlinks – Make sure you have examples of working hyperlinks. They must be properly formatted without the code showing. This was learned in the previous assignment. Details listed below.
- Update and add metadata to all pages – see information listed below
- Update Header – Update h1 and h2 and banner image
- Update Footer – Update all content, see information listed below
- Carousel or slider Photos – 1600 pixels by 500 pixels. The slider must be functioning with three photos and link to internal pages or to original source. If the size of the photo is too small you will need to use a canvas for the image.
Go to tutorial on how to size images for banners, carousel.
Go to video tutorials on how to place images in carousel using Bootstrap.Optional Version Two design, full page slider, banner images for carousel, slider, is 1400 pixels by 875 pixels or a size that will function properly. - Update all content or remove. Get help if you do not understand. There should be no default content on website and all hyperlinks must be functioning.
- Photo attribution – Name the source and the license you are able to publish images on your website. Photo Attribution help
- Spelling – Check the spelling on your website in Word. One point off for each typo. Full sentence are required. You can also check spelling with Dreamweaver. Ask for help.
- View Video Tutorials – Learn how to create banner images, placing images and more.
- Page titles – All page titles must be update and match the current page.
Example: <title>Home – Civil Rights Website</title>
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.
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 File
Example: JannetWalsh_Website030316
- 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. (Read the last sentence again!) A flash or jump drive is only for transferring data, not storage. Drag the website folder to the DataHD or desktop to work on project. When you are done working on the project for the day, save the updated website folder to the DataHD and your flash or jump drive or portable hard drive.
(Read this again until you completely understand!)
Your motto
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.
Bootstrap, HTML insert panel
This project uses Bootstrap, an application that’s inside of Dreamweaver. There is a panel located on the right side. There is also an HTML panel you can use. If you can’t find these panels, go to Window, and turn on the Insert Panels.
MAKE A PLAN, SKETCH
Required Pages for Website
Here’s a list of the require and optional pages for your website:
- Home (index.html)
- About(about.html)
- Optional pages
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.
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 a tag.
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 – 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
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 about page.
- 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.
- 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.
Video tutorial for making banner image
Page titles
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, adjunct 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 – if needed
Creating pages
You might not need to add any additional pages, idex.html and about.html are required unless you are adding more 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)
- Additional pages for Version Two of website: civilrights.html, contact.html,
WRITING
- About Page
- General Description
- Biography
About Page
(At least 100 words, can be more than 100 words)
Write a brief description about your project, including yourself, what the project is for and technology used, such as Dreamweaver Creative Cloud with Bootstrap, Photoshop, other software and hardware. It will be helpful to write your About Page before starting your general description and biography to help give yourself a focus on your topic. Write in your own words, not plagiarism. (This information will go on your about page when you create your website.)
General Description
(At least 200 words, no more than 300 words)
Write a short history or description, but don’t copy word by word, but make a summary of what you learned from your research, no plagiarism. Save all your web links and other resource so you can give credit to your sources, and add hyperlinks back to the source. Description of the group or theme should be in general terms, an overall view or summary, with historical information that would be important to know. (This information will go on your home or index page when you create your website in the summary or overview section.)
Biography
(At least 150 words, no more than 250 words)
Select one person or leader you would like to feature. Write a short biography about the person. Try to select someone that had a positive influence on civil rights. Don’t copy word by word, but make a summary of what you learned from your research, no plagiarism.
(This information will go on your index page in a section about the featured person when you create your website.)
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.