Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSW131 Steven Battilana 1 CSW 131 Free MS Software (MSDNAA) MS Visual Web Developer W3 / Mozilla Code Validators Uploading Your Website Summer 2013 Prepared.

Similar presentations


Presentation on theme: "CSW131 Steven Battilana 1 CSW 131 Free MS Software (MSDNAA) MS Visual Web Developer W3 / Mozilla Code Validators Uploading Your Website Summer 2013 Prepared."— Presentation transcript:

1 CSW131 Steven Battilana 1 CSW 131 Free MS Software (MSDNAA) MS Visual Web Developer W3 / Mozilla Code Validators Uploading Your Website Summer 2013 Prepared by Prof. B. INDEX

2 CSW131 Steven Battilana 2 Download & Install Visual Web Developer (VWD) is a web page and site development and management environment, enabling easy uploads to WCU’s server. 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 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 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. Optional: link to download VWD for use on your own PC is on the class website “Hot!” page and slide 9.slide 9slide 9 This program requires a Windows OS This program requires a Windows OS If you choose to keep it, you must register the product (free) If you choose to keep it, you must register the product (free) Back to Summary (and Index)

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

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

5 CSW131 Steven Battilana 5 Adding a New Web Page in a Web Site Within Class_work, Chapter 05, click File | New File… 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 Add OR Right-click the top level under Solution Explorer, and select Add New Item, then select HTML page From Add New Item window select HTML Page, name it test.htm (or test.html – be consistent), then click Add OR Right-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. Notice the new page has been added to your folder and the default Source code to start has been inserted. Experiment with this file Experiment with this file When done you can delete it within Solution Explorer 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 CSW131 Steven Battilana 6 Creating a New Web Site Create a folder on your flash drive for websites, e.g., csw131\websites Create a folder on your flash drive for websites, e.g., csw131\websites From within VWD program click File | New Web Site… 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 TestWeb on your flash drive, e.g., CSW131\Websites\TestWeb then click OK From New Web Site window, with Visual Basic highlighted under Installed Templates, select ASP.NET Empty Web Site, name it TestWeb on your flash drive, e.g., CSW131\Websites\TestWeb then click OK You can add new web pages per the previous slide and delete web.config, which is not needed. You can add new web pages per the previous slide and delete web.config, which is not needed. Back to Summary (and Index)

7 CSW131 Steven Battilana 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: With Mozilla, w3.org has a number a free tools. We can check our web pages for proper (X)HTML code at: And check for proper CSS code at: Go to the 1 st link, click the By file upload tab, use the Browse… to select index.html from index.html within ch05 in your Class_work folder, then click the Check button. Go to the 1 st link, click the By file upload tab, use the Browse… to select index.html from index.html within ch05 in your Class_work folder, then click the Check button. xmlns="http://www.w3.org/1999/xhtml" and on a new line after Errors and warnings (if any) will appear. Use VWD to edit line 2: and on a new line after type, save and recheck. Next try the 2 nd link for both index.html and styles.css within ch05 in your Class_work folder. Selecting and checking files works as above. Next try the 2 nd link for both index.html and styles.css within ch05 in your Class_work folder. 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-8 encoding “internationalizes” your website. Note: Using UTF-8 encoding “internationalizes” your website. Back to Summary (and Index)

8 CSW131 Steven Battilana 8 Copying a Web Site to Your WCU Server Location Back to Summary (and Index) Within VWD, and E:\csw131\project\ (your web site open), in Solution Explorer (top right of screen), click Copy Web Site icon Within VWD, and E:\csw131\project\ (your web site open), in Solution Explorer (top right of screen), click Copy Web Site icon 1.Click the Connect icon 2.Click the FTP Site icon 3.Server: roadrunner.cs.wcupa.edu/ e.g., fl is for Fran Lowe followed by a WCU student ID number 4.Username: fl Password: fl (may need to be entered twice) Click Open button and MAKE SURE html_public is selected on right Click Open button and MAKE SURE html_public is selected on right Highlight files & folders to upload on left side of screen Highlight files & folders to upload on left side of screen Click right arrow symbol and pages are uploaded Click right arrow symbol and pages are uploaded See web site online: See web site online: Note: These uploads may ONLY be done WHEN ON CAMPUS! Note2: Create uploading.txt with your server & URL information; Now! Note: These uploads may ONLY be done WHEN ON CAMPUS! Note2: Create uploading.txt with your server & URL information; Now!

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


Download ppt "CSW131 Steven Battilana 1 CSW 131 Free MS Software (MSDNAA) MS Visual Web Developer W3 / Mozilla Code Validators Uploading Your Website Summer 2013 Prepared."

Similar presentations


Ads by Google