Homework
UPDATED – June 3, 2017
Caution – Use the website folder provided for this homework in Solo D2L.
Website you will create – View the website now!
Student Gallery Covers – View student pages Visit Kaitlyn Anderman’s website Visit Kaci Jelle’s website
You will only be asked to work on the index.html and civilright.html page, but you can also add the additional pages listed below.**** The index page is always named index.html and serves as the start or welcome page.
You can continue to work throughout the homework if you want.
the index.html page will require:
- h1, h2 headlines
- Home Welcome page or text of at least 100 words
- At least one photo in the main content area
- One video , update the current video; change the iframe code to a new embed code for video.
- Hyperlinks: Make sure you have examples of working hyperlinks.
- Update and add metadata – See below information
- Update Header – Update h1 and banner image
- > Update Footer – Update all content, see below information
- Update Sidebar or Margin – Includes all content such as social media, text, and photos
- Civil Rights Page: Required civilright.htmlCivil Rights: Select One If your topics are not listed below, get help before you start your project.African American – People with African ancestryEuropean-American – People with European ancestryAsian American – Americans of AsianLatino descent – People with cultural ties to Latin AmericaIndigenous – Native Americans Female LGBTDisabledCivil Rights Page Requirements1. Select topic 2 from Civil Rights. You need to update the banner image to go with the theme. 3. Write 100 words on the topic: Write in your own words. 4. Write 200 words about a specific person related to the topic of civil rights; write in your own words. 5. Must include a related video displayed on the page.
Class Lectures – Be There!Most of the items listed below for the homework will be shown in class during lectures. Optional items will be included as time allows or individually with students. If you need help, ask in class!
About First Website This is a learning or practice website for creating a first website. It is a portfolio website to highlight your career, skills and talents. It can be used to apply for an internship or a job to showcase your work.
You can make the website live using Husky’s web space for free, optionally, or you can purchase web space from a service web hosting, optional. (Details are listed below.) This website is required work for students in the Introduction to Multimedia course, COMM 240, at Saint Cloud State University. The design is responsive, adjusts to all devices, from mobile to desktop, and is based on a website at w3school.com. Get more details on Instructor Jannet Walsh’s website, Multimedia Toolkit.
DUE DATE AND DELIVERABLES
Deadline: 14 June 2017 11:59 PM m.
*** No assignment will be accepted via email, it will be deleted, counted as late. It should be submitted to D2L.
- Attach a screenshot of the home page in a web browser, index.html, of your D2L website. Do not include in website folder. (Screen store: Shift, option, 4 on the Mac.)
- Attach the zipped folder of the website folder in D2L. There should only be the content of the website and nothing else in the website folder.See more details on how to create a zipped website folder.Zip Folder: Your folder cannot be located on the flash drive or skip when the folder is compressed. Move the folder to the desktop, DataHD, or your portable hard drive. Right-click, select zip, and an archived folder is ready to upload.Get help with this in class.
- If your website is lagging because it cannot compress the folder, your task will be considered late. Make sure you understand how to zip your website folder. See this link on how to compress a file.
CHECKLIST
Download the list check 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 to qualify. If you haven’t completed a required step, then you’re not done!
See what you’ll be doing
Website online! Go to practice website now!
Adjust screen size now! See how a responsive website works now by adjusting the size of this browser web and now see the content move to fit the size of the page. That’s like viewing a web page on your iPhone and then on your desktop.
Look at the source codeThis is the visual part of a Hypertext Markup Language, HTML page . . If you want to see what is hidden behind this page in the actual source code, you can simply press Ctrl+U (Windows) or ⌘-Option-U (Mac). If you’re confused, go to Google’s helpful page on how to view the source code with this hyperlink.
Viewport Settings The secret to this responsive design is called a viewport. . This code is in the header of this page. Look for Viewport now in the source code of this web page.
PROCEDURE – GETTING STARTED
Download folders
- Download Files: D2L or Multimedia ToolkitWebsite Folder and Reference Folder are located in D2L and COMM 240 Required Work Page .
- Optional for your computer: Get Adobe Dreamweaver CC tutorials and Dreamweaver free trial, for your own computer, from Adobe.
- Free, optional text editors – If you want to learn how to use a text editor, TextWrangler for Mac and Sublime, PC, download it and ask an instructor for help. It’s good to know how to use a text editor and Dreamweaver. Please use the text editor outside of the classroom as the lectures will use Dreamweaver or you will be lost! You are expected to use Dreamweaver in class to follow the lectures.
- Social media icons and more located in D2L in the Design Assets folder. li>
- Find: first website folder and resources folder
- rename first folder websiteFirstLastName_Website021116 Use your name and project deadline.Example: JannetWalsh_Website021116
- Website Folder – The newly renamed folder will be your new folder of the website for the first website project. It is vital that you always and only save your work in two locations! This is the folder that will be sent when the website is complete.
- Locate the images folder: You will find an images folder inside the website folder. All images used for your website should be in this folder and nothing else!
- Important – Do not save Photoshop PSD files in the images folder, only jpeg , png, or favicon, favicon.ico, or related elements to be displayed on your website.
- Resources folder: This folder contains the files that you will use for your project.
Always save your project in two places! Never work on a project directly from a flash or jump drive!
1. Save to your personal hard drive and DataHD on lab iMacs.
2. Save to DataHD, your personal hard drive, or a flash or jump drive. ** Do not work on a Dreamweaver project from your flash or jump drive. A flash or jump drive is only for transferring data, not for storage. Drag the website folder to the DataHD or desktop. (Reread this until you fully understand it!)
Your motto when working with websites: Make a change. Save a change.
If you make any changes to your project, always make sure to save the changes. You’re working hard on your project and need to stay organized.
Start Dreamweaver
When you’re working on a Dreamweaver project, make sure you have the following settings. It will make it easier to work on your project.
<img src="https://multimediatoolkit.files.wordpress.com/2016/01/dreamweaver-screen.jpg" alt="Here" /
- Get Started: Go to the Tasks folder and drop the index.html file into the Dreamweaver application. The page will now load. You can load style.css the same way if you’re updating the css.
- Beginner: set the designer window to Beginner, top right corner of the window.
- Split View: Set the window to Split View, left corner, below the gray area.
- Live View – Make sure Live View is selected, not Design View, nest under Code and Split.
- Properties Panel – Located at the bottom of the panel .If you can’t see it, go to the top of the Dreamweaver window, go to Window, check the properties.
- Insert Panel – Go to the top of the Dreamweaver window. Dreamweaver, go to Window, select Insert and the Insert panel will appear on the right. Then set the Embed Panel to HTML.
- Document Object Model (DOM) and Application: At the top of the Dreamweaver window , go to Window, then make sure DOM and Application Frame are selected.
Make a plan, draw
Pages required for websiteHere is a list of required and optional pages for your website:
- Home (index.html)
- Civil Rights (civilrights.html)
- About(about.html )
- Blog (blog.html)
- Summary (resume.html)
- Contact (contact.html)
Optional Pages You can include a portfolio page with samples of your 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 THE INSTRUCTOR FOR HELP.
Sketches – optional, but highly recommendedNow it’s time to think about how many pages you plan to have on your website. Making a simple thumbnail sketch helps you understand what you’re trying to create for your first website and beyond. This is optional, but recommended. This layout will not have a dropdown menu as it is a simple website for the first time website.
Learn more about how to sketch and wireframe your website in the Multimedia Toolkit.
Learn more about how sketch and wireframe your website in Multimedia Toolkit.
You will have the required pages: Home, About, Blog, Resume, and Contact. Want to include optional pages for your portfolio, photos, or more? Make a simple sketch now.
Adding Style – Make it your own
Make a web page as a template for the whole website
You should update all the default settings for hyperlinks, photos, text, and more. Customize the website page.
How it will work: A web page will be designed with the colors, banner and other elements, and all the details, such as menu, photos and more for home page, index page. When everything is ready, additional required and optional pages will be created, actually copied from your index page. That is a typical method and it is easy to do. You can make any changes you want to your other pages.
Text, Styling, and Hyperlinks
- The headings and body text should be black or a readable gray color. The website name in the header is set to blank. It can be changed, but it must be readable, or just leave it as is.
- Create a hyperlink: The Properties Panel must be open, go to the top of the Dreamweaver panel , select Window, then Properties and a box will appear at the bottom of the page. Have Dreamweaver set to split view. On the live view side of the screen, highlight the word or words you want to link to a page or image. Go to the Properties Panel and add the link to the box called Link. Update and save. Verify that the link works.
- Hyperlinks or links can be updated to the color you want or to match your color theme. Currently set to a shade of green, but can have a color to match your colors.<img src="https://multimediatoolkit.files.wordpress.com/2016/01/greenhyperlinks.png" alt="GreenHyperlinks" /
- Change hyperlink color, .body a: Create a hyperlink first, see above, if you don’t have a hyperlink to work with to change the color. Highlight a hyperlink, go to the CSS Designer, place a .body selector, then color the hyperlink text. Update this with the color you want for the hyperlink, save and test. If this didn’t change, you may need to update the div p a.
Color picker for header, footer, menu, sidebar
Will update the header, footer, menu and sidebar colors. There are some great resources to help you select color schemes.
- Adobe Color
- W3schools Color Picker
Sidebar , apart – right sideAll content in the sidebar, called sidebar in the source code, should be updated. Social media, photos, Twitter feed and more. You can change the color of the sidebar.Learn more at W3schools about responsive web design.
Change background color: sidebar, footer, header, and navigation Set Dreamweaver to split view. On the live view side of the screen, highlight the word or words you want to link to a page or image. The CSS Designer must be open. Otherwise, go to the top of the Dreamweaver window, go to Window, see CSS Designer.
Sidebar: to change the background color of the sidebar, in view split, click on the Live View section and click on the .aside div and the blue box will surround the side. 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 hexadecimal code, the number and the letters that represent the color to use in other sections of the website. Save and update.
Background color: footer , Header – Follow the same instructions as above, click on the footer and header. Footer, look for .footer in the CSS Designer panel selectors, locate the background color, and update. Header, find .header in the CSS Designer panel selectors, locate the background color, and update.
Navigation or menu – left side Update menu links and page names. Do not include a menu item on a page if you are not going to have an optional page. All menu links must correspond to an actual page or site navigation will not work. Update or Delete: Points will be removed if the menu doesn’t update or if you leave the optional pages in the menu, but don’t include optional pages. The navigation should work, 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, look for .menu li. strong>. This is the main color you see when you don’t hover over the navigation, originally set to blue. To change the color, click .menu li, and change the color using the color picker. Save changes, command S on Mac. Note: See how the li tag is highlighted in the code section, which helps you find the tag for .menu li.
.menu li:hover –In the CSS Designer panel, under selectors, search for .menu li:hover. This is the color the menu changes to when you hover over the menu. Locate the color in the CSS Designer panel, update the color. Save changes, command S on Mac. Note: See how the entire link is highlighted in the code section, which helps to find the tag for the .menu li:hover.
li a:hover: This is the internal color in the menu originally set to a gray color. This color changes when you hover over the menu. To switch, 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 hover tag is highlighted in the code section, which helps you find the tag for li a:hover.
Social networks , optional All social media links must be updated to your social media links or removed. Social media icons can be changed, resources in D2L for options.
Update or remove: If you don’t include your social media, you should remove the default social icons and links in the source code. Points will be removed if you don’t update with your social media link or if the default social media links are removed.
Update your social media, or any image, with the Properties 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 Heads Up Display, HUD – Click on the image you want to update and a small blue sandwich will appear. Click the sandwich and you’ll see options to update the link, alternate information, or more.
Twitter feed, optionalYou can add your Twitter feed to your page, suggested in the right sidebar.
- Get Twitter on your website: Login to your Twitter account, then go to settings, then locate widgets to customize and get the required code twitter.com/settings/widgets
link You must update 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 o.Update or Delete: Points will be removed if the footer is not updated with your required details and makeup by the date indicated above for the footer. *Follow the instructions listed above to change the background color, same as for the sidebar and footer.
Banner image, website title
/p>
- First you must create banner images of the required size and save them for web size images. If the photos are too big, the file size will slow down the upload time on devices. Watch the video below.
- A banner image is required on all pages. You can use the same banner on all pages or change the banners for each page. All banner images must link to the index.com page; do it in the Properties panel. Select your banner size using the details listed below. Try placeholder images in your website folder.
- 1600px by 180px – This banner will take up less header space, but will be hard to find a picture that looks really tight. This image should be set as a responsive image and linked to the home page, index page, when placing the photo using the properties panel. View page with 1600 x 180 pixel banner.
- 1600 x 300 pixels: This option is 1600 x 300 pixels . strong>. You’ll have to see what looks better. This image should be set as a responsive image and linked to the home page, index page, when placing the photo using the properties panel. See page with 1600 x 300 pixel banner.
- 1600 x 500 pixels: the other option is 1600 x 500 pixels >. (You can also try 1600 pixels by 400 pixels.) You’ll need to see what looks better. This image should be set as a responsive image and linked to the home page, index page, when placing the photo using the properties panel. View page with banner size 1600 pixels by 500 pixels.
- The title of the website should be your name. It is a professional or career website. Example: Jannet Walsh or Jannet Walsh Portfolio.
Video Tutorial for Creating a Banner Image
Title of the page Each page should have a page title. You will need to refresh each page. The page title appears in the top area next to the favicon in a web browser. The page title is not the headlines, H1 and H2. This is the information that appears at the top of a web browser and is found in 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.
Metadata Requirements Metadata is information located in the header, not visible to page visitors, but search engines use the information to find your page. This is required on all pages. See below for required metadate. This content is added to the header area using the HTML insert panel or the Insert menu at the top of the Dreamweaver window. You need to place your cursor in the header section and then use the HTML embed panel for metadata.
- Description – example: Jannet Walsh website (update with her name).
- Author – example: Jannet Walsh (This is already in the index.html, but you need to update with your name).
- Keywords – example: Jannet Walsh,HTML,CSS,web design, St. Cloud State University, multimedia, COMM 240 (update with their details).
- Description – example: This is a professional and career website by Jannet Walsh, Assistant Professor at Saint Cloud State University, This website is used to learn Web Design, HTML, CSS, Adobe Dreamweaver Creative Cloud, Adobe Photoshop Creative Cloud and more.( Please update with your details.)
- Robots: To prevent robots from indexing pages, the content is noindex,nofollow
- Googlebot – To keep Rob out of indexing pages, content is noindex,nofollow
Favicon, optional There is currently a default favicon, the small image or icon that appears on the top of a web browser, such as 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. It will add a new favicon to the images folder in your website folder, but you must remove the default favicon or it won’t appear. The name must be favicon.ico or it won’t work. The favicon as special code placed in the header to make it work. Learn more about favicons on the W3C website.
- Favicon.cc
- Favicon Generator
- Favicon HTML Kit
Add pages: (Do not add pages until you plan to go beyond the index page.)
Go to final steps
Create pages If you have completed all of the above information, you are ready to create additional required pages, any optional pages. Create Additional Page – This is a process of duplicating pages. Go to Save As, the name of the page, example about.html. Save to your website folder. The pages must be named the same as the links in your navigation or the pages will not be connected. Example: contact.html, NOT ContactPage.html
Pages required for website
- Home (index.html)
- About(about.html)
- Blog (blog.html )
- Resume (resume.html)
- Contact (contact.html)
Optional pages May include a portfolio page with samples of your 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.
H1, H2 required, on all pages All web pages require an H1 and H2 title, since used by search engines to find your web page. This is a professional website to highlight your career, skills and talents.
Home Page RequirementsView Index PageNo less than 100 words required, fully written sentences about your website and you. This is the welcome page to your website and a brief introduction to your site. Add photos, videos, or more as you like, but don’t overdo it! You must update the page title. Example: Home – Welcome to my website! See the Resources folder.
About page RequirementsSee about page No less than 200 words required, written in complete sentences about your site website and you This is the welcome page to your website and a brief introduction to your site. Add photos, videos, or more as you like, but don’t overdo it! You must update the page title. Example: About – Welcome to my website! View the Resources folder.
Blog Page RequirementsView Blog Page This will be a page that includes a screenshot of screenshot of your WordPress website, a short description, and links to both the page and the screenshot to the home page of your WordPress site. Add photos, videos, or more as you like, but don’t overdo it! Go to the blog page of the practice website to see the sample ideas. You must update the page title. Example: Blog – Welcome to my website! See the Resources folder.
Resume Page RequirementsView Resume Page This is a page for including a resume on line. A template has been provided along with links to help you write your resume. You must update the page title. Example: CV – Welcome to my website! Check the Resources folder.
Resume Help: View sample resumes at Saint Cloud State University’s Career Services Center. Get help with your resume at Career Services, it’s free!
Here’s a great example of a resume you should look at! Look at the brief summary, jobs, education, skills and experience and professional associations are handled.
Contact page Requirements View 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 page title. Example: Contact – Welcome to my website! See the Resources folder.
Portfolio, optionalSee the portfolio page Share your photos, stories, videos and more. You must update the page title. Example: Portfolio – Welcome to my website! See the Resources folder.
Lightbox photo gallery, optionalSee Lightbox photo gallery page See examples on the demo website. The Dreamweaver photo on this page is an example of a Lightbox. Just click on the images and the photo will enlarge. Learn more about Lokesh Dhakar’s Lightbox on his website. 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, doing it live!
Final steps Make sure your website is up and running. That means all the links, photos and everything has been updated and works, along with the navigation. If you finished early, send a link to the instructor or get help in class.
Spell checking: One point is deducted for each typo! Be sure to spell check everything on their website. Learn more about spell checking with Dreamweaver.
You can check spelling in Dreamweaver, but you must first be in Design view, toggle between the top of code and visual views. Insert your cursor into a heading, then go to Commands, then select Check Spelling.
Note: If you start spell checking at the bottom of the page, you’ll need to restart again at the top of the page. It will not check the non-editable area.
Find and replace text If you need to find a word and replace it, you can do it in Dreamweaver as well. First, make sure you’re in Design view. Insert your cursor, go to Choose Edit, Find and Replace. The dialog box will open, type the word you need to replace and type what needs to be replaced. You can replace one at a time or all at once.
Make it alive! – Optional
SCSU Student Server, Optional– Ask for help in class to get our website up and running. It’s good to know how to build a website, but it’s also important to make your website live. Here are the instructions for uploading to the student web space. Go to the instructions now!
Are you graduating or want to have your own live website? If you are graduating this semester or just want to have your own live website, I suggest hosting your website. That depends on you. If you do this during the semester, I can give you suggestions and help you with the process. Hosting providers: Blue Host, I’ve used it for several years and Go Daddy, popular, but I’ve never used it. Read reviews before deciding on a hosting service.
Search: Makes it easy to update your website instead of going to the hosting server.
I also suggest you get something like Fetch, a plugin that makes it easy to upload your site to the server. Learn more about Fetch.
Grading Rubric
Potential Errors
Loss of dots (per occurrence)
- Incorrect tags used around an element
- The closing tag of a pair is missing
- Tag misspelled
- Tags added where they shouldn’t be
- A required or recommended attribute is missing
- Incorrectly nested tags
- Pages not updated or corresponding to the page
- Typographical error
- Another minor error
-1
- Missing mandatory tags around of an element
- Missing required element
- Missing required content
- Use of non-existent tags
- Hyperlinks don’t work
- Photos in slideshow index.html not all the same size
- Metadata out of date
- Other moderate error
-2
- Significant structure error, missing required pages or layout elements
- Navigation not complete or not working
- Missing required pages
- Text is not legible or in complete sentences.
- Photos not properly cited
- Another major error
-3 or more
.