Learning Web Design by Jennifer Niederst Robbins
Learning Web Design
A BEGINNER’S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS
Jennifer Niederst Robbins
My GitHub Files: https://github.com/Li-YangZhong/Learning_Web_Design_Book_by_Jennifer_Niederst_Robbins_home.git
The biggest web graphics story, however, is the emergence of SVG (Scalable Vector Graphics).
companion website: learningwebdesign.com.
It features materials for the exercises, downloadable articles, lists of links from the book, contact information, and more.
Here are a few of the most popular site building services as of this writing:
• WordPress (www.wordpress.com)
• Squarespace (squarespace.com)
• Wix (wix.com)
• SiteBuilder (sitebuilder.com)
• Weebly (weebly.com)
The approach of designing around the user’s needs is referred to as User-Centered Design (UCD)
A wireframe diagram shows the structure of a web page using only outlines for each content type and widget (FIGURE 1-1). The purpose of a wireframe diagram is to indicate how the screen real estate is divided and where functionality and content such as navigation, search boxes, form elements, and so on, are placed. Colors, fonts, and other visual identity elements are deliberately omitted so as not to distract from the structure of the page. These diagrams are usually annotated with instructions for how things should work so the development team knows what to build.
A site diagram indicates the structure of the site as a whole and how individual pages relate to one another.
One option for separating style from screen size is to use style tiles, a technique introduced by Samantha Warren (see Note). Style tiles include examples of color schemes, branding elements, UI treatments, text treatment, and mood (FIGURE 1-5). Once the details are decided upon, they can be implemented into working prototypes and the final site. For more on this technique, visit Samantha’s excellent site, styletil.es, where you can download a template.
Frontend Development
Frontend development includes the following web technologies:
• HyperText Markup Language (HTML)
• Cascading Style Sheets (CSS)
• JavaScript and DOM scripting, including AJAX and JavaScriptbased frameworks
I recommend Learning JavaScript by Ethan Brown (O’Reilly) to learn more.
Backend Development
The following technologies are typically in the domain of the backend developer:
• Server software (Apache, Microsoft IIS)
• Web application languages (PHP, Ruby, Python, JSP, ASP.NET)
• Database software (MySQL, Oracle, SQL Server)
There are many server software options out there, but the two most popular are Apache (open source software) and Microsoft Internet Information Services (IIS).
Domain Name System (DNS)
Browsers come equipped with default styles for every HTML element they support, so if an HTML document lacks custom style instructions, the browser will use its own.
You can write a style rule that makes an element background red, but also include a style that gives it a cool gradient (a blend from one color to another) for browsers that know how to render gradients. Or you can use a cutting-edge CSS selector to deliver certain styles only to cutting-edge browsers. The knowledge that browsers simply ignore properties and rules they don’t understand gives you license to innovate without bringing older browsers to their knees. You just have to be mindful of styling the baseline experience first, then adding improvements once the minimum requirements are met.
Responsive Web Design (RWD) is a strategy for providing appropriate layouts to devices based on the size of the viewport (browser window). The key to Responsive Web Design is serving a single HTML document (with one URL) to all devices, but applying different style sheets based on the screen size in order to provide the most optimized layout for that device. For example, when the page is viewed on a smartphone, it appears in one column with large links for easy tapping. But when that same page is viewed on a large desktop browser, the content rearranges into multiple columns with traditional navigation elements. It’s like magic! (Except that it’s actually just CSS.)
Good responsive websites:
https://www.nasa.gov/
https://mediaqueri.es/
By default, headings and paragraphs display as block elements. Browsers treat block elements as though they are in little rectangular boxes, stacked up in the page. Each block element begins on a new line, and some space is also usually added above and below the entire element by default.
The em element is an inline element (also called a text-level semantic element or phrasing element). Inline elements do
not start new lines; they just go with the flow.
All browsers have their own built-in style sheets (called user agent style sheets in the spec) that describe the default rendering of elements.
Attributes are instructions that clarify or modify an element. For the img element, the src (short for “source”) attribute is required, and specifies the location (URL) of the image file.
Most attributes take values, which follow an equals sign (=). In HTML, some attribute values are single descriptive words. For example, the checked attribute, which makes a form checkbox checked when the form loads, is equivalent to checked="checked". You may hear this type of attribute called a Boolean attribute because it describes a feature that is either on or off.
Wrapping attribute values in double quotation marks is a strong convention, but note that quotation marks are not required and may be omitted. In addition, either single or double quotation marks are acceptable as long as the opening and closing marks match. Note that quotation marks in HTML files need to be straight ("), not curly (”).
The best web-based validator is at html5.validator.nu.
For example, the following is a workaround that applies only to IE8 and earlier. Not only do those browsers not recognize the HTML5 elements, but they also ignore any styles applied to them. The solution is to use JavaScript to create each element so IE knows it exists and will allow nesting and styling. Here’s what a JavaScript command creating the section element looks like:
documen.createElement("section"); Fortunately, Remy Sharp wrote a script that creates all of the HTML5 elements for IE8 and earlier in one fell swoop. It is called “HTML5 Shiv” (or Shim) and it is available on a server that you can point to in your documents. Just copy this code in the head of your document and use a style sheet to style the new elements as blocks:
The HTML5 Shiv is also part of the Modernizr polyfill script that adds HTML5 and CSS3 functionality to older non-supporting browsers. Read more about Modernizr online at modernizr.com.
The content of a main element should be unique to that page. In other words, headers, sidebars, and other elements that appear across multiple pages in a site should not be included in the main section
Listing of named and numerical entities, I recommend this archived page at the Web Standards
Project: www.webstandards.org/learn/reference/charts/entities.
Adobe Illustrator can create and save files in SVG format.
How to Password Protect a PDF
8 Free Ways to Put a Password on a PDF File
From
PDFMate PDF Converter Free
From
使用Word 2016可以打开PDF进行编辑
Git Large File Storage (LFS) replaces large files such as audio samples, videos, datasets, and graphics with text pointers inside Git, while storing the file contents on a remote server like GitHub.com or GitHub Enterprise.
From
Windows 不能直接创建 .gitignore的三种解决方法
方法一：
在项目根目录下面先创建 gitignore.txt 文件,也可以使用任意的名字来命名。
右键选择 Git Bash , 调出 Git 命令行。
输入 mv gitignore.txt .gitignore 即完成重命名。
编辑 .gitignore 添加规则即可。
方法二：
创建一个文件命名为 .gitignore. 的文件, 注意文件最后有一个.
随后会弹出提示“如果改变文件扩展名，可能会导致文件不可用。确实要更改吗？。
点击确定后文件名后末尾的多余的点会被自动移除。
方法三 :
1. 在项目根目录下面创建 gitignore.txt 文件
2. 在项目根目录下面按住Shift键后点击鼠标右键，在跳出的菜单中选择“在此处打开命令窗口”
3. 执行命令 ren gitignore.txt .gitignore 后就完成了重命名
原文链接：https://blog.csdn.net/stupid56862/article/details/80659076
https://html5.validator.nu/
http://validator.w3.org/#validate_by_input+with_options
The following books will help fill out your knowledge of HTML5:
• HTML5 for Web Designers, 2e by Rachel Andrew and Jeremy Keith (A Book Apart)
• HTML5: Up and Running by Mark Pilgrim (O’Reilly and Google Press)
• Introducing HTML5, 2e by Bruce Lawson and Remy Sharp (New Riders)
Canvas demonstration
The Cloth Simulation
From
http://bomomo.com/
The book HTML5 Canvas, Second Edition, by Steve Fulton and Jeff Fulton (O’Reilly).
Take your time learning, but keep your eye on the prize.
Inline boxes encompass just the characters or image they contain.
• CSS: The Definitive Guide, 4th Edition by Eric A. Meyer and Estelle Weyl (O’Reilly)
• CSS Cookbook by Christopher Schmitt (O’Reilly)
CSS-Tricks (css-tricks.com)
The is the blog of CSS guru Chris Coyier. Chris loves CSS and enthusiastically shares his research and tinkering on his site.
A List Apart (www.alistapart.com/topics/code/css/)
This online magazine features some of the best thinking and writing on cutting-edge, standards-based web design. It was founded in 1998 by Jeffrey Zeldman and Brian Platz.
Typekit, from Adobe (www.typekit.com) Typekit was the first web font service and is now part of Adobe. Their service uses JavaScript to link the fonts to your site in a way that improves performance and quality in all browsers.
Specificity Calculator
From
The required order for link pseudo-classes is :link, :visited, :focus, :hover, :active (LVFHA, which you can remember with LoVe For Hairy Animals, or the mnemonic device of your choice).
Ultimate CSS Gradient Generator
From
//
CSS: The Definitive Guide, 4th edition (O’Reilly), by Eric A. Meyer and Estelle Weyl, is a megavolume of everything you could ever want to know about CSS. It contains the entire Grid Layout in CSS book as a chapter
The Grid Layout Module is one of the more complex specs in CSS, the finer points of which could fill a book. In fact, Eric Meyer has written that book: Grid Layout in CSS (O’Reilly)(see Note). I found that Eric helped me make practical sense of the dense language of the spec itself (which you will also want to reference at www.w3.org/TR/css-grid-1/). I also highly recommend Grid expert Rachel Andrew’s book, The New CSS Layout (A Book Apart) for a complete view of how we got to grid layouts and how to use them.
Responsive Web Design (or RWD) is a design and production approach that allows a website to be comfortably viewed and used on all manner of devices.
https://responsivedesign.is/podcasts/
https://bradfrost.github.io/this-is-responsive/resources.html
https://guides.github.com/introduction/flow/
The return keyword inside a function effectively turns that function into a variable with a dynamic value!
Keeping Variables Out of the Global Scope
If you want to be sure that all of your variables stay out of the global scope, you can put all of your JavaScript in the following wrapper:
This little quarantining solution is called an IIFE (Immediately Invoked Functional Expression), and we owe this method and the associated catchy term to Ben Alman (benalman.com/news/2010/11/immediately-invoked-functionexpression/).
The DOM gives us a way to access and manipulate the contents of a document. We commonly use it for HTML, but the DOM can be used with any XML language as well. And although we’re focusing on its relationship with JavaScript, it’s worth noting that the DOM can be accessed by other languages too, such as PHP, Ruby, C++, and more.
The DOM is a programming interface (an API) for HTML and XML pages. It provides a structured map of the document, as well as a set of methods to interface with the elements contained therein. Effectively, it translates our markup into a format that JavaScript (and other languages) can understand. It sounds pretty dry, I know, but the basic gist is that the DOM serves as a map to all the elements on a page and lets us do things with them. We can use it to find elements by their names or attributes, and then add, modify, or delete elements and their content.
How can you tell whether a PNG is 8-bit or 24-bit? You can peer into its soul by using the file command. Just use the command line to navigate to the directory that contains the image file, and type file filename. It returns a brief description of the file including its dimensions, color information, and whether it is interlaced