Web Design 2 - Quarter 1
Standards
Standards-Information and Communications Technology Sector
Standards-Arts, Media, and Entertainment Sector
Part 10
Server Permission Forms
How FTP Works (white board lecture)
GoDaddy FTP Video
2020-2021
FTP Setup Example
School Year: 2020-2021
Student:Oscar Toad
Period: 1
SID: 500000001029
Username: otoad012020@chsserver01.org
Password: Otoad1029!
FTP Server option: 142.4.2.162 or ftp.chsserver01.org
FTP Client Setup Dialog Box Screenshot (Dreamweaver)
Directory Example: https://chsserver01.org/2020/otoad012020/
Use the last for digits of your long student ID.
Test your FTP username and password
Work Time - Review - Create a basic index page
Visual Studio Code Review - index.html : code
- Code HTML
- Code CSS
REQUIRES one line of code to make it Mobile
Part 11
FTP Presentation
- FTP
- Dreamweaver Config (easy example)
- FileZilla Config
Use File Transfer Protocol for web site uploads to the Internet
Find your website on the chsserver01.org server
Host Options:
142.4.2.162 or ftp.chsserver01.org or chsserver01.org
Computers on a network are given ip addresses
FileZilla
Download and Install FileZilla
Configure FileZilla
Upload proto index.html to server and test with your phone
Decorate your index page
Add Links to Footer
chsserver01.org | chs.chusd.org | color.adobe.com | aeries.chusd.org
Part 12
On Your Own 1 - Responsive Web Design
- Create a ResponsiveWebDesign folder in Demos
- Create a responsivewebdesign.html file and save it to the ResponsiveWebDesign folder
- Create an Images folder within the ResponsiveWebDesign folder
- Download the provided images to the Images folder
- Add the basic tags to your responsivewebdesign.html file (html, head, title, body)
- Use the following resources to complete the web page
- Remember, you are using an Images folder so adjust your HTML code accordingly
Text | Images 1 2 3 4 5 6 | HTML Code | CSSCode | Finished Web Page
To complete On Your Own 1, you must add the following meta tag to your page (right above the title tag):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The above meta tag forces your device (phone, tablet, desktop) to set the width of the web page to the width of your device.
IP Addresses - Check Your IP Address
DNS Servers - Video up to 2:30
Domain Names Explained - Video
Search for a Domain Name - Go Daddy Search
Email Your Chosen Domain Name to Teacher (3 choices)
Domain Name Extensions
Explain and Research Web Hosting (Shared, VPS, Dedicated, Cloud)
CHS SLOs/ESLRs
We need to know about our high school's student learning outcomes(SLOs). Dr. Ragland was kind enough to provide this quizlet to help you learn them.
Grading Guide
Portfolio
Maintain a simple Portfolio page (index.html)
Upgrade throughout the year...
medina | delacruz | droberts | mfertig
Activities Folder
Activity001 - Photoshop Review - Color Wheel - Color the Color Wheel
Install Chrome Color Picker - ColorPick Eyedropper
Show filename extensions - Go to Finder, Preferences and click on Show all filename extensions
Use the first file (1) to help complete the color wheel file (2).
Use Photoshop to label and color the color wheel correctly . The colorpicker addon will be useful.
Save your work in an Activities folder inside of your student folder.
Export the .psd file as a .jpg or .gif and place the image on a web page named activity001.html. Save this file in an Activity001 folder.
Link actvitiy001.html to your index.html file and upload your work to the server using FTP. (FileZilla).
Activity002 - Color Theory Review - Color Harmonies
Color Theory Basics: Video
Review - Color Wheel Schemes
Label the the following file with the correct color harmony name.
Image - 1
Save the file as a .psd Photoshop file when complete.
Export the .psd file as a .jpg or.png and place the image on a web page named activity002.html. Save the file in an Activity002 folder.
Link actvitiy002.html to your index.html file and upload your work to the server using FTP. (FileZilla).
Practice Assignments
Complete the following and save your work in your PracticeAssignments folder:
Practice Assignments - Code with Visual Studio Code Download, install, and setup Visual Studio Code with popular extensions - Beautify (F1 then Beautify File) - Indent Rainbow - Bracket Pair Colorizer - Open in Browser (alt + b) - HTML Preview (ctrl + shift + v) or (ctrl + k + v) - Live Server (click go live) - Path Intellisense - HTMLtagwrap (alt + w) - VS Code Pigments - VS Code Icons - CSS Peek (hover over + ctrl) - Auto Rename Tag Download install and setup FileZilla (client) (requires admin) Use the File Site Manager Use the General and Advanced Tabs
Code with teacher |
|
| P001 | Basic HTML5- basic tags (upload and test - walk through) |
| P002 | Basic HTML5 - headings (upload and test - walk through) |
| P003 | Basic HTML5 - lists (upload and test - walk through) |
| P004 | Basic HTML5 - external links (upload and test) |
| P006 | Basic HTML5 - tables (upload and test) |
| P007 | Basic HTML5 - tables and image (upload and test) |
| P009 | Color Wheel Review Use of Hex Color Codes (no color names) Use Default, Pastel, Dark Pastel, Light Pastel, and Pale Hue, Saturation, and Lightness (Photoshop) Videos: Beginning Graphics Design Color (2017) Understanding Colors (7:40) - Basic techniques for combining colors Color Pyschology - The effects of colors Psychology and Advertising (2:50) - The effects of colors Resources: Interactive Color Wheel Scheme Generator Articles: The Color Wheel and Color Theory Codrops - Build a Color Scheme: The Fundamentals Colors in Film: Colors in Film (2017) |
