Assignment -

Assignment Instructions and SW Recommendations

Complete the initial assignment, using TinyMCE/submit. The first assignment outside canvas is hobbies.html. For the later assignments try to do them all on Dreamweaver. But you can use TinyMCE/submiit however keep in mind images can be linked from the his page or you will need to be uploaded to your cim home folder in order to use them with TinyMCE/submit.. For TinyMCE/submit. this folder is just /~class/cimw115/assets/filename.
All webpage assignments are worth 10points/each.

Checklist

  1. Make sure school e-mail has been forwarded or will be checked
  2. Watch the generic course intro videos at https://cim.saddleback.edu/~class/cimRoot/de.html
  3. Complete the Questionnaire. You need to enter a non academic e-mail.
  4. Login into Canvas take Orientation Quiz 0;
  5. We have help in the IMC lab mon-thurs. Consult office hours for exact times.

Read through the five steps at https://cim.saddleback.edu/~class/cimRoot/de.html

hobbies.html Tiny MCE - Rich Text Editors (aka DW6)

Permalink - Open Assignment New Window - submit

Rich-Text Web-based Editors

  • (i) What is a rich-text editor? Editor with formatting features and WYSIWIG interface, "DW Design Editing Window", - AI

  • A code playground allows you to test code, it supplies a very basic IDE (Integrated Developers Environment). An IDE, includes an editor, file manager, and an internal method of testing. Dreamweaver and submit is an IDE. The editor portion, may or may not have a rich-text editor. We will be introducing Adobe Dreamweaver in the next assignment.

  • (ii) What is TinyMCE? TinyMCE is the most popular Web-based rich text editors. TinyMCE has both standalone JavaScript and also a cloud version of the editor. The cloud version maintain the editing files.
    Using TinyMCE is very similar to using Dreamweaver insert panel. You can duplicate TinyMCE's top ribbon bar, by using the DW left hand grabber bars to move DW dialog panel. Dragging it to the top mimics the TinyMCE ribbon. . However, in the top position, Dreamweaver displays only icons, at the side panel position it display icons with text.

  • CkEditor - may be more powerful than TinyMCE.

  • Canvas uses TinyMCE for discussion boards. In source code mode you can paste Dreamweaver HTML code into discussion boards. However, the system will usually sanitize CSS and JavaScript code blocks. CSS code needs to be in line.

Web Page Assignment

For this assignments your will be using submit, to create a file called hobbies.html. In the assignment, in your own works answer the two questions above. Then talk about one of your favorite or some of your favorite hobbles. Steps in completing this assignment.

    Caveats.

  1. If the file hobbies.html already exists in your home web folder, submit will insert hobbies.html <body> contents into it's editing pane.
  2. With submit , when you click upload, TinyMCE editing pane content is copied into your home page hobbies.html file.
  3. Submit adds a generic <head> tag content to your file, if you want links to external CSS or JavaScript, you must locally edit hobbies.html.
    Nota Bene, if you edit the <head> block or add JavaScript to the end of hobbies.html, you will lose this content if you use submit tests a second time.
    YouTube Short on <head> and <body> tag.

    Login to submit and answer basic questions

  4. Login to submit, using your SB or IVC username, password is your banner ID (letter A followed by 8 Digits)
  5. If you are in more than one class of mine, select this class and then select the file hobbies.html. This will take you to the submit web page with a TiinyMCE dialog editing pane.
  6. In your own words answer the two questions, ( i what is a rich-text-editor, ii what is TinyMCE. Make sure you take advantage of some of TinyMCE editing features.
  7. Also answer these Three questions:
    1. What are view menu features, view → source code <>; view → preview ; and view → full screen?
    2. Does the Preview exsit in multiple places (check the extended ribbon panel)?
    3. Does canvas's TinyMCE have preview and source code, hint check bottom of discussion board editing pane?
      Canvas does use different Icon images, if you got to extended editing ribbon in submit, you will see the default icons. &eye;

  8. Put the answers/questions (25 or more words) at the bottom of your page, begin your hobby discussion in the top half. You can be brief on answers, but use own words.

    Discuss your hobbies (150 words) use at least 7 capabilities of TinyMCE, including a © line at bottom    .
  9. In your hobbies.html at the bottom Insert → Emojis, Insert → Date/Time. with copy right (insert → special character) symbol.
  10. You will need to discuss a hobby or your hobbies. Looking for 150 words (you can use tools → word count, or notice word count at bottom).
  11. In the header and main-text make sure you implement at least 7 capabilities of the TinyMCE editing ribbon.
  12. When finished click the upload to cim button, this will create a web page hobbies.html in your home folder.
    Note TinyMCE is just the body of your web-page. Current version of submit doesn't create a link in your home page to hobbies.html.
    On Submit notice the location of your CIM home page, it will be of the form protocol://server/folder/file which is https://cim.saddleback.edu/~sbusername/hobbies.html

    View Your HTML Source Code
  13. View → Source code icon is <>
  14. Notice all CSS code is in-line, they usually sanitize CSS and JavaScript code blocks.
    At this stage, not worry too much about HTML tags, we will look at them later.

    Images and Test home pages/hobbies.html
  15. You can add images, but you need to link to a public domain image. On most image searches you can select size small, license public domain or free to share. You can upload images to your home folder, but we will not be covering FTP until the next assignment. HTTP is used to get content from a server. FTP allows one to put content to a server.
    The image dialog panel accepts the image path. Nota Bene on canvas, they upload the images and store them in a SQL database.
    You should not resize images in a web page, you should always resize images to anticipated size before uploading. It is okay to have both small thumbnail and full size images in a web folder.
  16. You can add relative links, TinyMCE, so you can add a link to your home like <a href="index.html">Home Page</a>, it will work when you upload, bu twill not work in preview.
  17. Using submit, click the hobbies.html, this will allow you to preview your hobbies.html in your home folder, pay attention to the URL in the web browsers address bar.
    In the next assignment, we will be creating your home page and also learning about FTP (file transfer protocol)


index.html Web Page 1 Create CIM Home Page

Permalink - Open Assignment New Window - submit

Canvas has full set of videos on creating your home page.

Watch Canvas videos on creating a home page on CIM and create your CIM home page, you can use this index page as a starting block. Canvas has the full set of Zip data files for both index.html and the book. If you have completed other classes you should already have a Dreamweaver site definition. If you don't know Dreamweaver, you can use any FTP client to put files to CIM. FileZilla is the recommended FTP client.

Also watch the Browser add-on video. We will cover chromes internal developers tools when we get to RWD, part 3 of the textbook.

  1. Use DW get your hobbies.html, and add home page link
  2. In DW file manage download the file hobbies.html from CIM.
  3. Edit your index.html file to add a link to hobbies.html.
  4. Test your home page and file hobbies.html in a separate browser window.

 

 

htmlSummary.html HTML Summary Web Page Table Quiz 1 (aka h1.html)

Permalink - Open Assignment New Window

Spring webcasts is using the file name h1.html, on submit name has been updated to htmlSummary.html.

Watch the Canvas three video sequence on HTML. For this class you only need a very basic HTML understanding. For a more in-depth HTML understanding take cimw 100 HTML. After watching the videos take the Canvas HTML intro quiz.
If you are new to HTML don't worry it you don't do that well on the quizzes. This assignment covers a lot of material and remember it is a point-based class not a percentage-based grading system.

Web page assignment.

I will be using either DW, or NetBeans to create web pages, But you may use whatever editor or IDE you are comfortable with. MS Word is a word processor not an IDE or editor. In Dreamweaver (DW) make sure you site definition was previously created. When you open DW the site definition your previously defined should be active. DW maintains the previous workspace.
Create Dreamweaver Step:

Create file h1.html

  1. File → New Dialog Panel New Document HTML click create,
  2. Set Screen to Split Mode design on top, HTML code at bottom)
  3. Goto main editing windows (file is called Untitled-Number) put your cursor inside the editing pane

  4. Insert → Table, Set Table Properties 90%, 14 Rows, 2 Columns, Border 1px, Header row top, Caption to top 13 HTML tags.
  5. Save the file at htmlSummary.html (don't get fancy on file name, and maintain a consist nomenclature, and use mnemonics)
  6. Header row, Column 1 is html tag, Column 2 header is description.

  7. List the following tags in column 1, rows2-14(use↓ to drop down to next row): html, head, body, a, div, ol, li, span, table, td, th, tr, ul.
  8. Add Descriptions for each tag, you can use tab key to to to next field, tab at end adds row.

  9. You can file → save, or ctrl^s to save file - DW hardly ever crashing but saving work is always a good idea.
  10. Note width of column is "set" by content.
  11. Test tab at last row, notice it adds new column, You can right^click for table editing menu.
  12. You can go into table expanded table editing mode, but usually its best to let browser set column width.

Open Your Home Page and Add Link to your new h1.html

  1. In files Panel find your index.html file (double click to open)
  2. Add line in file H1 HTML tag summary,
  3. You can create link to the text H1 HTML tag summary, one of three ways,
    1. using the editing pane,
    2. click and drag over text right click Make link or
    3. use Windows → Properties, select text use point to file icon, drag to file h1.html
  4. add these three steps to your h1.html file
  5. File → Save All
  6. Put your site to cim, and check your home page
  7. You may need to use F5, reload your home page in your browser

Checklist:

  • Watch Canvas HTML videos
  • Take Canvas HTML quiz
  • Complete canvas discussion board

  • Upload and test your htmlSummary.html HTML table page

dw3.html Web Page Intro to DW Insert Panel

Permalink - Open Assignment New Window

Objective: Create a web page that identifies and implements key element of the DW insert dialog panel.

Good Habits to Establish: Save Work Frequently, Pay attention to green check mark at bottom, Test on Server.

Steps
Caveat did use the name h3.html in 2/2025 webcast

  1. File → New HTML (click Create)
  2. File → Save As dw3.html (note we are using same nomenclature as previous)
  3. Define the standard work space,
  4. Using File Panel verify h3.html is in same level "folder" as index.html and h1.html

  5. Use the Hamburger Icon Menu to Close the far left Files Insert panel group
  6. What is a hamburger icon, "menu"?
    For all questions first state title (i.e., Hamburger Menu), on next line define it.
  7. What is a tab group?
  8. On Main Menu open dialog panel Window → Insert

    Add div, paragraph and dw3 header using Insert Panel
  9. For Text you have currently typed, select it and hit the Insert Div, it will insert a div block
  10. Use the fourth Heading drop down and set Hamburger Menu and Tab Group as H3 headers
    Drag over select Hamburger Menu select Heading H3, on second one just click it, notice it has been updated.
  11. Make your two answers <p> paragraph.

    Add Image to File using Insert Windows
  12. Add image of Hamburger, Search on duck-duck-go, look for small 400x400 transparent copy link
    Nota Bene, anything you put on the Web has an automatic Intellectual property right, therefore you should just not copy down images.
  13. Insert DW click, image, paste link in dialog panel
  14. Ctrl^s or file^save all, you can also put the file to CIM server

    Create assets Folder
  15. Move all images to assets folder, let system update links, notice how links are updated.
  16. What does Insert → Table icon do?
  17. Create an Insert → Unordered list
  18. Identify the next set of HTML 5.0 semantic tags
    PS I stick with div, class and ID.

    Set page title
  19. Right^Click Page Properties, give page a long title name
  20. Save file, you can close it now.

    Create Home Page Link to dw3.html
  21. Open index.html, using index.html complete the next four steps
  22. type enter dw3.html Web Page DW Insert Panel
  23. select the text you just typed
  24. click Insert → hyperlink icon, click browser folder click h3.html
  25. Make sure link is relative, you can also use the properties panel and point to file icon.

  26. Put your site to cim server
  27. Test your site with a browser or on a phone

Checklist:

dw4.html Work Space, Emoji/UTF-8 and DW Tools

Permalink - Open Assignment New Window

Adobe Dreamweaver DW Steps

  1. Open DW to your current site definition for CIM
  2. File → New HTML, or Right^click Local Site root new file
  3. Create File dw4.html (and save)
  4. Experiment with Edit → Preferences; I set the interface to light, it seems its easier to read. But let me know what you feel is easier to see with Zoom.
  5. Create a Adobe Dreamweaver (DW) table and identify the Following "Universal" Hot Keys listed below, make sure you give the name a meaningful caption, table will have 7 v rows, 2 columns; identify the one key specific to DW.

      • Ctrl^A
      • Ctrl^C
      • Ctrl^F
      • Ctrl^S
      • Ctrl^V
      • Ctrl^Z
      • F12


    Short-cut Keys
  6. Identify Items A-I in the Image Dreamweaver Light Work Space
  7. Bring in Image set it to style="float:right", image right next content upper left. Note you can use table tag for positioning, but you should use CSS.
  8. Compare the Insert Menu with the Insert Dialog Panel
  9. Briefly define Form, Bootstrap and jQuery UI.
  10. Use the Insert Dialog Panel bottom Icon insert Date, Horizontal Rule, and and an HTML entity.

    UTF-8 Emojis are subset of UTF-8
  11. Where do we see UTF-8, what is UTF-8, Goto split screen, type a less than sign, what do you see in the code window. The & is the special character for inserting a UTF-8 character, your can insert the decimal representation of an Emoji using &#number, to insert the hexadecimal number we use &#xNumber. You will need to use the code window to insert UTF-8 values. This is two good websites: Emoji Web Samples - UTF 8 Table; 🐄

  12. Insert some of your favorite Emoji animals into your web page, Can put them inside of insert heading H1.

    DW Tools Spell Check, Validation
  13. Use Tools → Spell Check your document
  14. Add an empty tag to your document and Use Tools → Clean up HTML to remove it
  15. Bring up Validation Dialog Panel, File → Validation (Use w3c)
  16. File → Edit Browsers, add browsers to your list, and set default to your favorite browser.
  17. Update your home page link to include this assignment
  18. Put updated home page and this assignment to the CIM server.
  19. Goto Expanded mode on File Dialog panel connect to cim, check cim home page
  20. Verify cim home and this new file using a browser

aboutMe.html Create an About Yourself Page Using Dreamweaver Responsive Starter (aka DW5)

Permalink - Open Assignment New Window

Template Bullet Points

  • Technically a template for creating Web pages, all pages have the same structure

  • Class site cimw105 is based on DW template, this class uses a consistent HTML structure template, notices same structure as cimw160.

  • With Dreamweaver you can create your own template or use a starter template.

  • Goal of a template, is to create a consistent structure (aka framework) so all pages on a website have the same look and feel, are responsive to all devices, and ease web page creation.
    Responsiveness of a web page, displaying optimal on different devices is often called RWD (Responsive Web Design)

  • The original Twitter framework, was released as an Open Source Project, twitter-bootstrap

  • Twitter (x.com) is currently using intercom for messaging, react.js or an internal version of bootstrap.

  • wappalyzer Most Popular UI Framework - Versions 1,3 and 4 Most Used - Dreamweaver default is bootstrap 4.4.1.

  • 16.5% of All Websites Use Bootstrap, Animate is a CSS code for animation, Foundation is 2nd must used CSS/RWD framework

  • Many sites will use a JavaScript Framework

  • Bootstrap is a 12 column CSS framework, popular JavaScript Libraries See Assignment H13 Skeleton - chapter 16 webcast notes

  • Dreamweaver has bootstrap 4 integration. It also includes proprietary responsive, and email frameworks "templates".

  • With Dreamweaver you can create custom templates, this was done for cimw105 and cis405nc.

Web Page Assignment

    Open site and create aboutMe.html based on Responsive - About page.
  1. Open your DW site definition
  2. File → New On Dialog Panel Select Starter Templates | Responsive Templates | Responsive - About Page (click create button)


  3. Once your create the file, save it as aboutMe.html
  4. If you already have a file called aboutMe.html, use the file panel and change is name to aboutMeBackup.html
  5. Try to do all work using just Design pane, Insert Panel, and Insert Menu (avoid the code window)

    Personalize your aboutMe.html page and test RWD
  6. Update your aboutMe.html page
  7. First fix any HTML validation errors, the pages has two & not set as HTML entity code &amp;
    To fix this use code view, and type &a, your will get auto completion for the full HTML entity name for ampersand, you can always use the decimal or hex code.
  8. Test you responsiveness of your page in a Web browser. (Lower right hand corner in Inspect often has the responsive icons)
  9. Notices the structure of the page. - It is using HTML 5.0 semantic tags.

    Related Files and RWD
    Notice the related files line

  10. Use the first related file link, analyze the aboutPageStyle.css, how do they accomplish RWD? Put answer in company section
  11. Use DW test RWD; Goto devices size in lower right hand corner, and select a phone. Then site the editing pane to live view mode, Notice the scrubber can resize display window width. Also notice the three @media query max size 480px, and 1024px and min-size 1025px; These key points blue text on the image on the image to the right.

    Add Images
  12. At the bottom of the page install 1-3 social media icons
  13. Can also add Image of yourself
    Best Way to add Images with existing dummy images, just click the dummy image in Dreamweaver, select Source File and paste in the http link, DW will copy it into the site root.
  14. Best Practices resize images to smaller size (i.e., display size) using an external application.
  15. Add your contact information to middle ("can use dummy information") - want spam proof emails
  16. Talk about your self at top.

    Update home page index.html and aboutMe.html to cim
  17. Goto your index.html home page and add link to aboutMe.html
  18. Optional rearrange folders to just one assets folder
  19. Upload your site, select the two files right^click put.
  20. Test home page and your aboutMe.html page on cim,
    Notice the DW put, automatically puts the HTML file and supporting images.

email.html Create Fancy Email using DW email template (Previously DW7)

Permalink - Open Assignment New Window

This is the last Dreamweaver (DW) (CIS415NC) assignment for Spring/25. I will be adding 2 or 3 word press assignments to the Fall cimw115 DW and cis415nc. You can repeat the non credit course or take cimw115 in the Fall. I'm also considering adding an AI/DW assignment. AI would generate the PHP side code.

For this assignment you will be summarizing the important points we covered in using Dreamweaver and also best web page design practices. In addition you will create an email flyer for a party or upcoming holiday. You can make up the party. To do this you will be using an internal Dreamweaver email template.

Background

  • Using HTML/CSS in Emails - can give a very professional look and feel.
  • Some email clients have a TinyMCE editor or ability to go into a code editing mode.
  • CSS/HTML restrictions inside email, this is key set of guidelines
    • Fancy CSS is not supported,
    • Outlook and Microsoft as usual is a problem.
    • Don't use HTML semantic Tags,
    • All CSS is in-line
    • Use tables for formatting.
    • Table header th tags are dropped, use td with strong tag
    • check into this later on data-editing-info="{'topBorderColor':'#ABABAB','bottomBorderColor':'#ABABAB','verticalBorderColor':'#ABABAB','hasHeaderRow':true,'hasFirstColumn':false,'hasBandedRows':true,'hasBandedColumns':false,'bgColorEven':'#1B1B1B20','bgColorOdd':null,'headerRowColor':'#ABABAB','tableBorderFormat':0,'verticalAlign':'top'}">
    • Always Test emails (send to yourself)
    • On canvas I cannot always tests

  • Always need to test emails, problem is vendor specific discrepancies
  • The have tools like litmus and dyspatch to test on various client email systems.
    For this assignment we only need to get things working on Outlook and Your CIM home page.
  • Thunderbird is well recommended Email client app
  • If you are sending from Outlook, doesn't mean user has outlook.
  • Microsoft Outlook is using a word-based rendering engine/ribbon, not HTML rendering.
    From GetResponse outlook especially tables is a nightmare: "Outlook: Often s Dis-regrades CSS-based Layouts"
  • Gmail is based on AMP (Accelerated Mobile Pages) HTML framework, Hints on optimizing HTML for AMP.

Dreamweaver has a full set of email templates, we will use one of them to create a fancy email.

  1. File →New Select an email template.
  2. Create a flyer for a party or a holiday.
  3. I will be creating a Easter egg hunt announcement. You can create any party you want.

    Find and Resize, Upload to CIM for Absolute email links.
  4. Will look for Easter eggs, Easter bunny and daffodil image
  5. You can use either fireworks or Photoshop, to export and/or resize images.
    On export, you will have a resize option.
    You can also resize using the scaling tool, then save the new images.
    Check file sizes using a windows browser.
    I will put the original images in a assets/sub folder original, and resize folder medium.
  6. Add resized images to holiday flyer - for Mobile phones size matters.
  7. You can either replace the default file names, and/or replace the images in the document.
    To replace images in document right^click Image look for source file option, or select properties and change src using file browser.
  8. Test locally (F12) and put files to cim and test on CIM
  9. Test RWD design using Dreamweaver Scrubber and Web Browsers Inspect Responsive Design Mode (left hand corner icon)

  10. Identify 5 Best Practices for Web Page Creation. Hints, filename, validation, image size, CSS JavaScript separate file, use relative links.

  11. Answer the following basic DW editing questions:
    1. What is the DW configurable work space.
    2. What is the grabber vs scrubber bar.
    3. What is the insert dialog panel
    4. Which popular JavaScript code is similar to the insert panel dragged to the top.
    5. In design editing window, how do you insert HTML entities/emojis.
    6. What is the hotkey for displaying a web page in a browser.
    7. How do you select the default browser
    8. How do you use Dreamweaver with Canvas Discussion boards.

    12. Make images absolute links, Update home page, Copy and Paste Finished Web Page From Browser Window into Outlook.
  12. Add a link to your email.html file, from your home page.
  13. Replace all local relative links, with the full link address, do a global place on src="images/", with the full address.
    On Outlook you have to paste HTML code, pasting images can causes problems.
  14. Upload and test your new file.
  15. At the bottom of the test, add an absolute link to your email.html page (My file had the text "View as a Web Page")

  16. Make sure outlook Settings (gear icon) - how to insert HTML
    Compose and Reply make sure compose message in HTML is set, cut and paste merge of source formatting
  17. Preview your Email pages using F12, a browser, you will need to cut and paste the browser window into outlook. Some of the advance formatting may be lost.
    Not worry if this version is lame, But make sure you upload a good email template to your cim account and link to it from your home page.
    I'm assuming sooner or later Microsoft will render outlook using HTML rather than word, but I could be wrong.
  18. Guide how to insert HTML into an Outlook
  19. Email yourself a version of the file. When you are pleased with your, email me a copy.

 

Final Class Reminders aka Final Checklist... Week 9

  • Canvas Quizzes maintain final due dates
  • Make sure you have a Canvas posts for H1
  • Make sure you have completed all Canvas quizzes
  • Refer to syllabus Review Syllabus Grading
  • Make sure you have a working home page on CIM
  • Make sure you have completed the book tutorials chapter 2-chapter 10

Thanks for taking the class, cimw 280 Portfolio, cimw 160 JavaScript/jQuery and cimw 145 Intro PHP, CMS WordPress and E-Commerce are good classes to take next.

.