Summer 2013 Prepared by Prof. B . INDEX

CS

W1

31

Ste

ven

B

att

ilan

a

1

CSW 131CSW 131 Free MS Software (MSDNAA) Free MS Software (MSDNAA)

MS Visual Web DeveloperMS Visual Web DeveloperW3 / Mozilla Code ValidatorsW3 / Mozilla Code Validators

Uploading Your WebsiteUploading Your Website

Summer 2013Summer 2013Prepared by Prof. B.Prepared by Prof. B.

INDEX

CS

W1

31

Ste

ven

B

att

ilan

a

2

Download & InstallDownload & Install

Visual Web Developer (VWD) is a web page Visual Web Developer (VWD) is a web page and site development and management and site development and management environment, enabling easy uploads to environment, enabling easy uploads to WCU’s server.WCU’s server. Just ONE of Microsoft’s program that are similar to

Adobe Dreamweaver FREE Microsoft programs available to WCU student

s currently enrolled in at least one computer science course

This program is loaded on the UNA 141 PCsThis program is loaded on the UNA 141 PCs Optional: link to download VWD for use on Optional: link to download VWD for use on

your own PC is on the class website “your own PC is on the class website “Hot!Hot!” ” page and page and slide 9..

This program requires a This program requires a Windows OSWindows OS If you choose to keep it, you must If you choose to keep it, you must registerregister

the product (free)the product (free)Back to Summary (and Index)

CS

W1

31

Ste

ven

B

att

ilan

a

3

Starting the Program & Opening a Web SiteStarting the Program & Opening a Web Site

Select Start Select Start | | All Programs All Programs | | Microsoft Visual Microsoft Visual Web Developer 2010 Express EditionWeb Developer 2010 Express Edition

Insert your flash driveInsert your flash drive Click Click FileFile | | Open Web Site…Open Web Site… Click Click Class_workClass_work folder in your flash drive | folder in your flash drive |

OpenOpen

Back to Summary (and Index)

CS

W1

31

Ste

ven

B

att

ilan

a

4

Working with a Web Page in a Web SiteWorking with a Web Page in a Web Site

In In Solution Explorer Solution Explorer open open index.htmlindex.html within within ch05ch05 in your in your Class_work Class_work folderfolder

To show line numbers:To show line numbers: click Tools | Options | General, check Line numbers, then

click OK Note the Note the color codingcolor coding: some examples are:: some examples are:

<tags> selector {

property: value; notation / comments general text

At the bottom of the VWD screen, click: At the bottom of the VWD screen, click: SplitSplit to see both to see both codecode & & WYSIWYGWYSIWYG DesignDesign for for WYSIWIGWYSIWIG view only view only

An approximation only; testing is still needed! SourceSource for for codecode only only Try the Try the buttonsbuttons at the bottom of the screen at the bottom of the screen


CS

W1

31

Ste

ven

B

att

ilan

a

5

Adding a New Web Page in a Web SiteAdding a New Web Page in a Web Site

Within Within Class_workClass_work,, Chapter 05 Chapter 05,, click click FileFile | | New File…New File… From From Add New Item Add New Item window select window select HTML PageHTML Page, name it , name it

test.htm test.htm (or test.html – be consistent), then click (or test.html – be consistent), then click AddAddORORRight-click the top level under Solution ExplorerRight-click the top level under Solution Explorer, and , and select select Add New ItemAdd New Item, then select , then select HTML pageHTML page

Notice the Notice the new page has been addednew page has been added to your folder and to your folder and the the default Source code to start has been inserteddefault Source code to start has been inserted..

Experiment with this fileExperiment with this file When done you can When done you can delete it delete it within within Solution ExplorerSolution Explorer

Right click test.htm (or test.html) Click Delete Click OK


CS

W1

31

Ste

ven

B

att

ilan

a

6

Creating a New Web SiteCreating a New Web Site

Create a folder on your flash drive for websitesCreate a folder on your flash drive for websites, , e.g.,e.g.,

csw131\websitescsw131\websites From within VWD program click From within VWD program click FileFile | | New Web New Web

Site…Site… From From New Web Site New Web Site window, with Visual Basic window, with Visual Basic

highlighted under Installed Templates, select highlighted under Installed Templates, select ASP.NET ASP.NET Empty Web SiteEmpty Web Site, name it , name it TestWeb TestWeb on on your flash driveyour flash drive, e.g.,, e.g.,

CSW131\Websites\CSW131\Websites\TestWebTestWebthen click then click OKOK

You can add new web pages per the previous You can add new web pages per the previous slide and delete slide and delete web.configweb.config, which is not , which is not needed. needed.


CS

W1

31

Ste

ven

B

att

ilan

a

7

Validating Your CodeValidating Your Code

With Mozilla, w3.org has a number a free tools. We can check our With Mozilla, w3.org has a number a free tools. We can check our web pages for web pages for proper (X)HTML code proper (X)HTML code at:at: http://validator.w3.org/And check for proper CSS code at: http://jigsaw.w3.org/css-validator/

Go to the 1Go to the 1stst link, click the By file upload tab, use the Browse… to link, click the By file upload tab, use the Browse… to select index.html from select index.html from index.htmlindex.html within within ch05ch05 in your in your Class_work Class_work folder, then click the Check button.folder, then click the Check button. Errors and warnings (if any) will appear. Use VWD to edit line 2:

<html xmlns="http://www.w3.org/1999/xhtml"xmlns="http://www.w3.org/1999/xhtml"> and on a new line and on a new line after after </title> type <meta http-equiv="Content-Type" <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />content="text/html; charset=utf-8" />, save and recheck.

Next try the 2Next try the 2ndnd link for both link for both index.htmlindex.html and and styles.cssstyles.css within within ch05ch05 in your in your Class_work Class_work folder. Selecting and checking files works as folder. Selecting and checking files works as above.above. Again, errors and warnings (if any) will appear and you can

make any needed changes within VWD, Save, then Check again. NoteNote: Using : Using UTF-8UTF-8 encoding “ encoding “internationalizesinternationalizes” your website.” your website.


CS

W1

31

Ste

ven

B

att

ilan

a

8

Copying a Web Site to Your WCU Server LocationCopying a Web Site to Your WCU Server Location


1

2

3

4

5

Within Within VWDVWD, and , and E:\csw131\project\E:\csw131\project\(your web site open), in (your web site open), in Solution ExplorerSolution Explorer(top right of screen), click (top right of screen), click Copy Web SiteCopy Web Site icon icon

1.1. Click the Click the ConnectConnect icon icon2.2. Click the Click the FTP Site FTP Site iconicon3.3. Server: Server: ftp://ftp://flfl123456@123456@

roadrunner.cs.wcupa.edu/roadrunner.cs.wcupa.edu/e.g., e.g., flfl is for is for FFran ran LLowe followedowe followedby a by a WCU student ID numberWCU student ID number

4.4. Username:Username: flfl1234561234565.5. Password: Password: flfl123456 123456 (may need(may need

to be entered to be entered twice)twice) Click Click OpenOpen button and MAKE button and MAKE

SURE SURE html_publichtml_public is selected on right is selected on right Highlight files & folders to uploadHighlight files & folders to upload

on left side of screenon left side of screen Click right arrow symbol Click right arrow symbol and and

pages are uploadedpages are uploaded

See web site online: See web site online: http://roadrunner.cs.wcupa.edu/~http://roadrunner.cs.wcupa.edu/~flfl123456123456

NoteNote:: These uploads may ONLY be done WHEN ON CAMPUS!These uploads may ONLY be done WHEN ON CAMPUS!Note2: Note2: Create Create uploading.txt uploading.txt withwith youryour server server && URL URL information; information; Now!Now!

CS

W1

31

Ste

ven

B

att

ilan

a

9

Summary (and Index)Summary (and Index)

WCU CSC students can get free MS software (WCU CSC students can get free MS software (slide 2).). VWD is a web page and site development and VWD is a web page and site development and

management environment, enabling easy uploads to management environment, enabling easy uploads to WCU’s server (slide 2).WCU’s server (slide 2). VWD is loaded on UNA 141 PCs, is easy to use (slide slide

33), and can be downloaded free can be downloaded free for use on any Windows PC.

Coding is color keyed (slide 4slide 4) Three coding environments (slide 4slide 4) are:

Source (code only)Design (WYSIWYG)Split (both code & WYSIWYG)

WYSIWYG is an estimated appearance: always test! Creating new web pages (slide 5slide 5) or websites (slide 6slide 6).

Validate your XHTML & CSS with W3.org tools (slide 7).Validate your XHTML & CSS with W3.org tools (slide 7). Uploads to WCU’s server are easy (slide 8), but may only Uploads to WCU’s server are easy (slide 8), but may only

be available when on campus.be available when on campus.

Documents

Summer 2013 Prepared by Prof. B . INDEX