Class 15 Assignment: Modify your Website with your content

  • Due Dec 1, 2019 by 11:59pm
  • Points 5
  • Submitting a website url

Bringing it all together

For the remainder of the semester you will be taking all the work you have done over the course of the semester and placing them on the start file web pages that you downloaded last week.

Read pp.65-68

Class 15 Step-by-Step Video demonstrates all the steps below

Access your Website Files

If you already have the website start files on your computer from last week, then disregard the instructions for Get Files from Repl

Get Files from Repl

  1. Go to https://repl.it/
  2. Click Log In and enter your username and password
  3. Click on your name next to the icon in the top left corner and choose Student from the drop-down list
  4. Click Intro to Digital Media under Classrooms
  5. Click the ePortfolio link under Projects
  6. Click the three dots to the right of the word Files on the left side of the screen and choose Download as zip
  7. Extract the content of the .zip file and place the folder on your desktop

Download homework files needed for customizing your website

  1. Go to your Canvas class website, click Account and click Files.
  2. Click the course name hyperlink and or the Submissions hyperlink
  3. Select the following files and download: selfie (class 1), logo (lastname_class5.zip- this includes all necessary fonts for your logos), two animations (class 8 and 9 FLA file), your slideshow file (lastname_class10.mp4), your resume video (lastname_class13.mp4).
  4. Click on the gear to the right of each of the files listed above and choose Download
  5. Place these homework files into the website folder on your desktop.
  6. Check the size of lastname_class13.mp4 file. If it is bigger than 100 MB:
    • Open Adobe Media Encoder
    • Choose File>Add Source and select your video
    • When it shows up in the Queue window (top right window in Media Encoder), click on the word H.264
    • In the window that opens click Preset> Match Source High Bitrate and CHANGE to Match Source Medium Bitrate. In the bottom of the window it will show your the Estimated file size.
    • Click Output Name and save to your website folder
    • Click the Green arrow in the top right corner of the Queue window
    • Once the new file is saved, exit Adobe Media Encoder

Start editing your web pages

  1. Export your logo from Adobe Illustrator
    • Open lastname_class5.zip and extract the files.
    • Install the fonts in the fonts folder by double-clicking on each of them.
    • Choose File> Export> Export for Screens
    • Export to: images folder within the website folder on your desktop
    • Click Export Artboard, renaming your favorite of the three logos as logo and the other two as logo_backup1, and logo_back2.
    • Choose Export to: the images sub-folder of your website folder.
    • Make sure to deselect Create Sub-folders.
    • When prompted Do you want to overwrite the existing logo.png, select Yes. (NOTE: If you do not get this prompt, you are not saving the artboards with correct name to the images folder of your website).
      Export Artboard
    • Exit Illustrator
  2. Open Dreamweaver
    • If you set up your site on your home computer last week you should see all your website files appear in the Files panel on the right side of the screen.
    • IF NOT
      • Select New Site
      • Local Site folder> Browse to the website folder on your desktop
      • Choose Select Folder
      • Choose Save
    • Make sure your workspace in set to Standard
    • Select Window> Properties and drag the Properties panel to the bottom of the Application (it will have a blue line when it ready to be docked).
    • Double-click on all five html pages within the files panel
  3. Modify and upload all pages with logo and title changes.(1 point)
    • If you properly named your favorite logo as logo.png and placed it in the images folder of your website, you should see your logo on ALL your pages. If not, go to your website folder, find the files (likely in a sub-folder called 1x, and place them into them images folder.
    • Single-click on the logo.
    • Select the Properties panel and change the Alt text information to the name of your company
    • Click on the body tag directly above the Properties panel
    • Select the Document Title field in the Properties panel
    • Change the text to something that reflects the content of the page, like Your Name ePortfolio.
    • Do this on all five pages with meaningful and unique names for each page. For example your video resume title tag should be Your Name Video Resume, etc.
  4. Modify the index page with paragraphs, and selfie (1 point).
    • Open index.html
    • Double-click on the header text (Your Brief Introductory Paragraph) and change it to what you want the potential client or employer to see when arriving at your ePortfolio landing page
    • Double-click on each of the Sub-title and paragraph text blocks and provide your story
    • Single-click on the SRJC Superhero on the right side of the page and select the Browse for File icon in the Properties panel.
    • Choose your selfie image which should be in the images folder of your website root folder
    • Change the Alt text in the Property Inspector to Your Name
  5. Place your resume video on your resume.html page
    • In the Files panel double-click on resume.html (1 point)
    • Choose Code View at the top of the Document window
    • Select line 32 of the code and click and drag your cursor from the beginning of the tag.
    • Hit the DELETE key
    • Choose Insert> HTML> HTML5 Video
    • In the Properties panel, look in the Video Properties and click on the Browse for file icon next to Source and navigate to the location of lastname_class13.mp4 file.
    • Click on the dropdown next to Preload and change it to auto.
    • Select File> Save

Modifying Opt1 and Opt2

The two optional pages on your website are your opportunity to highlight various aspects of your digital media area of focus or even personal information. For example, if you have a keen interest in video or audio production, you can embed videos or audio playlists into one or both of the pages. This must be YOUR digital media content. The instructions below give four examples of how you can either embed content into an iframe tag, use the HTML video tag to insert videos, or insert your animation files into your two optional pages. Your goal is to replace the content on both option 1 and option 2 pages with your content.

Open Dreamweaver and modify your opt1 and opt2 pages (2 points)

  1. Open Dreamweaver
  2. Double-click on opt1.html and opt2.html in the Files panel on the right side

Choice A- Modify an existing iframe tag and embed your music from soundcloud

  1. Open a web browser, navigate to soundcloud.com
  2. Choose your Profile under your username and you will see the sound files you have uploaded
  3. Click the share icon under the song or playlist you want to place on your web page
  4. Choose Embed from the popup window
  5. Select the code in the text filed below, right-click and choose copy
  6. Go back to Dreamweaver and choose either opt1.html or opt2.html
  7. Choose Code View.
  8. Select line 33, click and drag your cursor from the beginning of the <iframe> tag all the way through the end of the </iframe> tag.
  9. Select Edit> Paste
  10. Go back to Live View. Double-click on the placeholder text at the top of the page and write a paragraph (at least three full sentences) discussing and describing your audio composition.
  11. Select File> Save
  12. Close your page and exit Dreamweaver.

Choice B- Modify an existing iframe tag and embed your video from YouTube

  1. Open a web browser, navigate to youtube.com
  2. Choose your Profile under your username and select My Channel
  3. Select Videos
  4. Click on the video your want to embed into your one of your optional content web pages
  5. Click share under the video you want to place on your web page
  6. Choose Embed from the popup window
  7. Select the code in the text filed below, right-click and choose copy
  8. Go back to Dreamweaver and choose either opt1.html or opt2.html
  9. Choose Code View.
  10. Select line 33, click and drag your cursor from the beginning of the <iframe> tag all the way through the end of the </iframe> tag.
  11. Select Edit> Paste
  12. Go back to Live View. Double-click on the placeholder text at the top of the page and write a paragraph (at least three full sentences) discussing and describing your audio composition.
  13. Select File> Save

Choice C- Embed another video directly from your website folder (for example your slide show video)

  1. Choose either opt1.html or opt2.html
  2. Choose Code View.
  3. Select line 33, click and drag your cursor from the beginning of the <iframe> tag all the way through the end of the </iframe> tag.
  4. Click and drag your cursor from the beginning of the <iframe> tag all the way through the end of the </iframe> tag.
  5. Hit the DELETE key
  6. Choose Insert> HTML> HTML5 Video
  7. In the Properties panel, look in the Video Properties and click on the Browse for file icon next to Source and navigate to the location of your mp4 file.
  8. Click on the dropdown next to Preload and change it to auto.
  9. Go back to Live View. Double-click on the placeholder text at the top of the page and write a paragraph (at least three full sentences) discussing and describing your video.
  10. Select File> Save

Choice D- Inserting an animation (for example- your skateboarding apple or your 5-second animation)

  1. Open Animate and select either your 5-second story or your Happy apple animation
  2. Click File> Export> Export Animated GIF
  3. In the bottom right corner of the Export image dialog box change Looping Forever to Once
  4. Click Save and choose the images folder of your website to save the file
  5. Open either opt1.html or opt2.html
  6. Choose code view
  7. Select ALL of line 33 (includes open and closing iframe tags)
  8. Choose Insert> Image and choose your animated gif
  9. Choose File> Save

Now that you have replaced the content with your own for the option 1 and option 2 pages, all Option 1 and Option 2 text in the navigation bar must be changed (ON ALL FIVE PAGES) to reflect your new content. (Do not change the names of the html pages themselves).

  1. Double-click on all five pages in the Files panel. They will open up as tabs in Dreamweaver's document window
  2. Choose any of the five pages and complete the steps below on ALL FIVE PAGES
  3. Double-click on the text Option 1 in the Navigation bar. With the text selected overwrite the name of your page. For example, if your Option 1 page is about Video, Change the navigation bar text to reflect that.
  4. Repeat the step above with the Option 2 text.
  5. Repeat this process on all five pages

Upload your updated website folder

  1. Go to https://repl.it/
  2. Click Log In and enter your username and password
  3. Click on your name next to the icon in the top left corner and choose Student from the drop-down list
  4. Click Intro to Digital Media under Classrooms
  5. Click the ePortfolio link under Projects
  6. Select the website folder from your computer and drag it into the Files panel on the Repl website
  7. When the Overwrite dialog box appears click Replace. NOTE: If the Overwrite dialog box does not appear, you are placing the website folder inside another folder.
  8. Double-click on the existing index.html page outside of the website folder
  9. This index page will already be pointing to your index.html page
  10. Click the Run button at the top of the code panel
  11. Click the Open in a new tab icon at the top of the Results panel. This will open a new browser tab.
  12. From the new browser tab, click on the link to your index.html page
  13. Copy the URL to your page from the web address bar
  14. Click on all of the links in the navigation bar and check that all the pages reflect the changes you have made
  15. Click on the Submit Assignment button at the top of the page
  16. Scroll down and paste the web address that you copied into the Web URL text field
  17. Click the Submit Assignment button
1575273540 12/01/2019 11:59pm