Transcript Introduction to CSC110 - West Chester University of
CSW 131
Free MS Software (DreamSpark / MSDNAA) MS Visual Web Developer (VWD) W3 / Mozilla Code Validators Uploading Your Website with VWD Not Covered or in Book
Spring 2013
Prepared by Prof. B.
1
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!
This program requires a Windows OS If you choose to keep it, you must register product (free) the Back to Summary (and Index) 2
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) 3
Working with a Web Page in a Web Site
In Solution Explorer open index.html
within ch05 folder in your Class_work To show line numbers:
click Tools | Options | General , check Line numbers Note the color coding : some examples are: , then click OK
< 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) 4
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 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 .
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) 5
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 Empty Web Site window, with Visual Basic highlighted under Installed Templates, select ASP.NET , 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. Back to Summary (and Index) 6
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 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.
By URl : for web pages already uploaded to a web server By file upload : for local files on your flash drive or PC If errors or significant warnings appear, edit, save and recheck.
Note : While it is not a default in VWD, we always use UTF-8 encoding.
Back to Summary (and Index) 7
Copying a Web Site to Your WCU Server Location
1.
2.
3.
4.
5.
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: e.g., fl ftp:// is for fl F 123456@ roadrunner.cs.wcupa.edu/ ran L owe followed by a WCU student ID number Username: fl 123456 Password: fl 123456 (may need to be entered twice) 1 Click Open button and MAKE SURE html_public is selected on right Highlight files & folders to upload on left side of screen Click right arrow symbol and pages are uploaded 2 4 5 3 See web site online (URL): http://roadrunner.cs.wcupa.edu/~ fl 123456 Note : These uploads may ONLY be done WHEN ON CAMPUS!
Note2: Reference UploadingTOSCW131Server.txt (for VWD & WinSCP) Back to Summary (and Index) 8
Summary (and Index)
WCU CSC students can get free MS software (
VWD is a web page and site development and management environment, enabling easy uploads to WCU’s server (
).
VWD is loaded on UNA 141 PCs, is easy to use (
), and can be downloaded free for use on any Windows PC.
Coding is color keyed (
Three coding environments (
) are:
Source (code only)
Design (WYSIWYG)
Split (both code & WYSIWYG) WYSIWYG is an estimated appearance: always test!
Creating new web pages (
) or websites (
).
Validate your XHTML & CSS with W3.org tools (
Uploads to WCU’s server are easy (
available when on campus.
9