Introduction to CSC110
Download
Report
Transcript Introduction to CSC110
CSW 131
Free MS Software (MSDNAA)
MS Visual Web Developer
W3 / Mozilla Code Validators
Uploading Your Website
Summer 2013
Prepared by Prof. B.
INDEX
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!” 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)
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 in your Class_work
folder
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)
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
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 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.
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/
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_work
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"> 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.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.
Back to Summary (and Index)
7
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
1. Click the Connect icon
2. Click the FTP Site icon
3. Server: ftp://fl123456@
roadrunner.cs.wcupa.edu/
e.g., fl is for Fran Lowe followed
by a WCU student ID number
1
4. Username: fl123456
5. Password: fl123456 (may need
2
to be entered twice)
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
3
4
5
See web site online: http://roadrunner.cs.wcupa.edu/~fl123456
Note: These uploads may ONLY be done WHEN ON CAMPUS!
Note2: Create uploading.txt with your server & URL information; Now!
Back to Summary (and Index)
8
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 free for 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.
9