COAP:COAP-3150 - week 5: Difference between revisions
Jump to navigation
Jump to search
| (8 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 3150</categorytree> | |||
==Site management with Dreamweaver (or [http://edutechwiki.unige.ch/en/COAP:COAP-3150_-_week_4 Komposer])== | ==Site management with Dreamweaver (or [http://edutechwiki.unige.ch/en/COAP:COAP-3150_-_week_4 Komposer])== | ||
===File management=== | ===File management=== | ||
| Line 11: | Line 10: | ||
*[http://oreilly.com/web-development/excerpts/0636920001393/introducing-site-management-ch16.html Introducing Site Management - Dreamweaver CS5: The Missing Manual] from O'Reilly | *[http://oreilly.com/web-development/excerpts/0636920001393/introducing-site-management-ch16.html Introducing Site Management - Dreamweaver CS5: The Missing Manual] from O'Reilly | ||
*[https://wiki.brown.edu/confluence/display/CISDOC/Dreamweaver+Site+Design+and+Management+Tutorial Dreamweaver Site Design and Management Tutorial] - Brown University wiki | *[https://wiki.brown.edu/confluence/display/CISDOC/Dreamweaver+Site+Design+and+Management+Tutorial Dreamweaver Site Design and Management Tutorial] - Brown University wiki | ||
* [ | * [https://www.thesitewizard.com/dreamweaver/dreamweaver-cs6-tutorial-1.shtml Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS6] | ||
* [ | * on lynda.com: [https://www.lynda.com/Dreamweaver-tutorials/Creating-First-Website-Dreamweaver-CC-2015/374769-2.html Creating a First Website in Dreamweaver CC 2015] | ||
* on lynda.com: [https://www.lynda.com/Dreamweaver-tutorials/Responsive-Design-Dreamweaver-CS6/101071-2.html Responsive Design with Dreamweaver CS6] | |||
===Readings=== | ===Readings=== | ||
| Line 18: | Line 18: | ||
==[[HTML]], [[CSS]] review== | ==[[HTML]], [[CSS]] review== | ||
(self-study or if time permits) | |||
* Graphic formats for the web | * Graphic formats for the web | ||
* images using the <img> tag | * images using the <img> tag | ||
| Line 26: | Line 27: | ||
*In Dreamweaver, choose ''Insert > Media >''... Select file and click ''Choose''. | *In Dreamweaver, choose ''Insert > Media >''... Select file and click ''Choose''. | ||
*[[XHTML#Composite_documents | embedding SVG]] example | *[[XHTML#Composite_documents | embedding SVG]] example | ||
===Embedding web apps/widgets=== | |||
*[[Using web widgets]] | |||
*Examples and collections of widgets | |||
** [http://www.google.com/ig/directory?synd=open Some Google Gadgets] | |||
** [http://www.widgipedia.com/ Widgipedia] | |||
;In class exercise. | |||
* Embed an object (widget or from a site like Youtube) into an HTML file | |||
;Assignment 7 – HTML mockup prototype | ;Assignment 7 – HTML mockup prototype | ||
Latest revision as of 17:24, 16 November 2016
Site management with Dreamweaver (or Komposer)
File management
Defining your file structure to separate form from content.
Site setup
- local site - from Adobe Help for CS3
- local test site vs remote live site - Defining your site in Dreamweaver CS3
Tutorials
- Introducing Site Management - Dreamweaver CS5: The Missing Manual from O'Reilly
- Dreamweaver Site Design and Management Tutorial - Brown University wiki
- Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS6
- on lynda.com: Creating a First Website in Dreamweaver CC 2015
- on lynda.com: Responsive Design with Dreamweaver CS6
Readings
Chapter 6 - Site management essentials, Artistic Web Design by Vickie Ellen Wolper.
HTML, CSS review
(self-study or if time permits)
- Graphic formats for the web
- images using the <img> tag
Embedding multimedia
Embed external media in HTML using the <embed> tag. The <embed> calls up external plugins or players.
- tutorial from HTML Source[1]
- some examples of embedded files and code
- In Dreamweaver, choose Insert > Media >... Select file and click Choose.
- embedding SVG example
Embedding web apps/widgets
- Using web widgets
- Examples and collections of widgets
- In class exercise.
- Embed an object (widget or from a site like Youtube) into an HTML file
- Assignment 7 – HTML mockup prototype