1 / 9

Summer 2013 Prepared by Prof. B . INDEX

CSW 131 Free MS Software (MSDNAA) MS Visual Web Developer W3 / Mozilla Code Validators Uploading Your Website. Summer 2013 Prepared by Prof. B . INDEX. Download & Install.

lacy-reynolds
Download Presentation

Summer 2013 Prepared by Prof. B . INDEX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSW 131 Free MS Software (MSDNAA)MS Visual Web DeveloperW3 / Mozilla Code ValidatorsUploading Your Website Summer 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 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/ • Go to the 1st link, click the By file upload tab, use the Browse… to select index.html from index.html within ch05 in your Class_workfolder, then click the Check button. • Errors and warnings (if any) will appear. Use VWD to editline 2:<html xmlns="http://www.w3.org/1999/xhtml"> and on a new line after </title> type <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />, save and recheck. • Next try the 2nd link for both index.html and styles.csswithin ch05 in your Class_workfolder. Selecting and checking files works as above. • Again, errors and warnings (if any) will appear and you can make any needed changes within VWD, Save, then Check again. • Note: Using UTF-8encoding “internationalizes” your website. 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: http://roadrunner.cs.wcupa.edu/~fl123456 • Note:These uploads may ONLY be done WHEN ON CAMPUS!Note2: Create uploading.txt withyour server & URL information; Now! 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.

More Related