CIS 204 Intro to Website Development

CIS 204 Intro to Website Development Additional Topics

Tutorial #9 Review – Forms • Forms <form> • Legend and fieldset • Fields <input> • Text • Email • Password • Radio buttons, check box, text area, select lists • Buttons (submit, reset) • Placeholder • Iframes

iframes • Iframes - An inline frame is used to embed another document within the current HTML document. • Example: <iframe class="dmacc" src="http://www.dmacc.edu"></iframe> • Can style like other elements iframe.dmacc { height: 500px; width: 800px; border: solid thick red; }

iframes • Some sites have really nice iframes for you to use • Google Maps has a great one (demo)

Placing Multimedia • Object Element – used to embed a variety of data types • Appendix A has examples <object data =“moviename.swf” type= “application/x-shockwave-flash” classid = “” height=“400” width=“400” > <param name = “src” value=moviename.swf” /> </object>

The Parameter Element • Object uses parameter <param> to define the characterizes of the object • Can only be used within the object start and end • The <embed> element can be used for when browsers have trouble with the object being used • HTML5 has <video src=“”> and <audio src=“”> elements to use video and audio within your page

Image Maps • Discussed in Tutorial # 2 • An image map is an image that is divided into sections that server as links • Uses the usemap attribute to assign the value of the image map • You create the maps by defining the area • <area shape=“” coords = “x, y, r”

Image Maps <imgsrc="dmacclogo2009.gif" alt="DMACC Logo" width="205" height="85" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="5,0,85,86" href="#" /> <area shape="rect" coords="100,1,205,87" href="#" /> </map> • This is a lot easier in Dreamweaver. (Demo)

Java Script – Image Rotation • The simplest one here: http://www.dmacc.info/Rotate/banner.htm • The <script> element is used to define the javascript • It is placed in the <head> section (or could also be linked in) • The onload attribute of the body element calls the script in this case. • There are multiple attributes that can call js.

Java Script – Image Rotation • DMACC.edu uses a WOW Slider • http://wowslider.com/?gclid=CM-qoK3vwbgCFdBcMgodHS0A3A • Costs money for use other than personal stuff but very powerful • Demo

Java Script - General • A lot of sites off free java script that you can just paste in code • Some sites have things to buy • Getting pre-made JS can really help add functionality while developing a site.

Gradient Background • This was a requested topic. This site can be used to generate gradients • http://www.colorzilla.com/gradient-editor/ • Pick the style and paste the CSS into the selector you want to style. • Demo

User File Upload • Create a form for user to enter values • Input type File used for file browser <input type="file" name="file" id="file"> • Create the PHP to handle the upload • Example: http://www.w3schools.com/PHP/php_file_upload.asp

Larry’s Topics • Hosting • http://www.heartland-webhosting.com/

What to do after this class • Some general ideas of things to look into if you want to continue with web development • Advanced Dreamweaver • Server Side (PHP, ASP, JSP) • Scripting (Java Script) • Photoshop (other photo editing) • Database • Web Dev at DMACC https://go.dmacc.edu/programs/webdevelopment/Pages/welcome.aspx https://go.dmacc.edu/pibs/documents/webdevaas.pdf

CIS 204 Intro to Website Development