Spring 2013 Prepared by Prof. B . INDEX

1. CSW 131 Free MS Software (DreamSpark / MSDNAA)MS Visual Web Developer (VWD)W3 / Mozilla Code ValidatorsUploading Your Website with VWDNot Covered or in Book Spring 2013 Prepared by Prof. B. INDEX

2. Download & Install • Visual Web Developer (VWD) is a web page and site development and management environment, enabling easy uploads to WCU’s server. • Just ONE of Microsoft’s program that are similar to Adobe Dreamweaver • FREE Microsoft programs available to WCU students currently enrolled in at least one computer science course • This program is loaded on the UNA 141 PCs • Optional: link to download VWD for use on your own PC is on the class website “Hot!” page and slide 9. • This program requires a Windows OS • If you choose to keep it, you must register the product (free) Back to Summary (and Index)

3. Starting the Program & Opening a Web Site • Select Start | All Programs | Microsoft Visual Web Developer 2010 Express Edition • Insert your flash drive • Click File | Open Web Site… • Click Class_work folder in your flash drive | Open Back to Summary (and Index)

4. Working with a Web Page in a Web Site • In Solution Explorer open index.html within ch05 in your Class_workfolder • To show line numbers: • click Tools | Options | General, check Line numbers, then click OK • Note the color coding: some examples are: • <tags> • selector{property:value; • notation / comments • general text • At the bottom of the VWD screen, click: • Split to see both code & WYSIWYG • Design for WYSIWIG view only • An approximation only; testing is still needed! • Source for code only • Try the buttons at the bottom of the screen Back to Summary (and Index)

5. Adding a New Web Page in a Web Site • Within Class_work, Chapter 05,click File | New File… • From Add New Item window select HTML Page, name it test.htm (or test.html – be consistent), then click AddORRight-click the top level under Solution Explorer, and select Add New Item, then select HTML page • Notice the new page has been added to your folder and the default Source code to start has been inserted. • Experiment with this file • When done you can delete it within Solution Explorer • Right click test.htm (or test.html) • Click Delete • Click OK • Note: While it is not a default in VWD, we always use UTF-8 encoding. Back to Summary (and Index)

6. Creating a New Web Site • Create a folder on your flash drive for websites, e.g.,csw131\websites • From within VWD program click File | New Web Site… • From New Web Site window, with Visual Basic highlighted under Installed Templates, select ASP.NET Empty Web Site, name it TestWebon your flash drive, e.g.,CSW131\Websites\TestWebthen click OK • You can add new web pages per the previous slide and delete web.config, which is not needed. Back to Summary (and Index)

7. Validating Your Code • With Mozilla, w3.org has a number a free tools. We can check our web pages for proper (X)HTML code at: • http://validator.w3.org/ And check for proper CSS code at: • http://jigsaw.w3.org/css-validator/ • Both of these online validators allow you to check your code 3 ways: • By URl: for web pages already uploaded to a web server • By file upload: for local files on your flash drive or PC • By direct input: you can cut and paste your code into validator • Using any of the above 3 methods, when you click the “Check” button, errors and warnings (if any) will appear. • If errors or significant warnings appear, edit, save and recheck. • Note: While it is not a default in VWD, we always use UTF-8encoding. Back to Summary (and Index)

8. Copying a Web Site to Your WCU Server Location • Within VWD, and E:\csw131\project\(your web site open), in Solution Explorer(top right of screen), click Copy Web Site icon • Click the Connect icon • Click the FTP Site icon • Server: ftp://fl123456@roadrunner.cs.wcupa.edu/e.g., fl is for Fran Lowe followedby a WCU student ID number • Username:fl123456 • Password: fl123456 (may needto be entered twice) • Click Open button and MAKESURE html_public is selected on right • Highlight files & folders to uploadon left side of screen • Click right arrow symbol and pages are uploaded • See web site online (URL): http://roadrunner.cs.wcupa.edu/~fl123456 • Note:These uploads may ONLY be done WHEN ON CAMPUS!Note2: Reference UploadingTOSCW131Server.txt (for VWD & WinSCP) 3 1 2 4 5 Back to Summary (and Index)

9. Summary (and Index) • WCU CSC students can get free MS software (slide 2). • VWD is a web page and site development and management environment, enabling easy uploads to WCU’s server (slide 2). • VWD is loaded on UNA 141 PCs, is easy to use (slide 3), and can be downloaded freefor use on any Windows PC. • Coding is color keyed (slide 4) • Three coding environments (slide 4) are: • Source (code only) • Design (WYSIWYG) • Split (both code & WYSIWYG)WYSIWYG is an estimated appearance: always test! • Creating new web pages (slide 5) or websites (slide 6). • Validate your XHTML & CSS with W3.org tools (slide 7). • Uploads to WCU’s server are easy (slide 8), but may only be available when on campus.