web网站设计与开发的笔记（web网站设计与开发教程）
今天给各位分享web网站设计与开发的笔记的知识，其中也会对web网站设计与开发教程进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
- 1、web网页设计创意课读书笔记怎么写
- 2、《点石成金-访客至上的web和移动可用性设计秘笈》读书笔记
- 3、如何设计网站——对Web设计的一点总结
- 4、电子商务网站设计原理笔记！
- 5、响应式web设计读书笔记
- 6、开发笔记1-Web网页开发一些尺寸的计算
web网页设计创意课读书笔记怎么写
可以写一些你感觉有深刻意义句子。并借用括号的帮助写出你觉得这些句子好在哪。还有摘抄一些平常鲜少见到的好词。必多次阅读，把书的中心思想终结出来。
《点石成金-访客至上的web和移动可用性设计秘笈》读书笔记
最近工作中主要是在做交互设计。作为一个非设计专业出身，没有任何底子的人来说，着实做的痛苦且进展缓慢，因此开始想要有针对性地看看设计方面的经典书籍，学习一些交互设计方面的基础理论。《点石成金》是我看的第一本设计方面的书，作为经典，很适合初学者看。花了两周时间看完，做了如下的笔记梳理。
1、不言而喻，意味着不用思考。当我看到一个不言而喻的网页时，脑袋里浮现的会是：“嗯，这是XX，那是XX，我想要的东西在这里。
2、强迫人思考的可能是不清楚的命名，也可能是不明确的交互指向。因此在设计中要注意避免。
1、不是阅读，而是在扫描。用户通常是带着目的进入网页，能吸引到注意力的只是页面上一小部分的内容。
2、不作最佳选择，而是满意即可。关于用户决策行为的满意策略——绝大多数的时间里不会选择最好的，而是选择第一个过得去的。
3、不是追根究底，而是勉强应付。用户使用网站，但并不会也不需要去了解运作原理，因为那对他们来说并不重要。但是用户体验更好的网站的出现会让其摒弃掉体验一般般的。
1、使用习惯用法。例如页面不同内容所处的位置；服务将如何运作；视觉元素的外观等，均会有一些约定俗成的习惯性设计。例如网站的导航栏设计。遵循习惯和惯例，有利于减少学习成本，而创新也常常可能面临不被接受的代价。另外，即便创新，也要考虑周到，留条后路，因为可用性大于一切，简洁则大于一致。
2、有效的视觉层次。通过突出、分组、嵌套等方法，将信息按重要程度划分，并利用逻辑关系进行关联。
3、划分出明确定义的区域。
4、明显标识可以点击的地方。
5、降低视觉噪声。例如主次信息的组织排列、疏密设计、色彩设计；无用信息的删减。
6、涉及到文本内容时，需要为文本设置格式。包括标题的设计、段落符号的使用，关键词语的突出。
1、意义明确。就像动物、植物、无机物般绝不会混淆。
2、导向明确。不会一下子呈现所有的细节，而是根据目的的不同，呈现不同的入口。
3、当困难的选择不可避免时，给以清晰的指引，要求简短、及时、不会被错过。
1、好处是降低页面的噪声；让有用的内容更加突出；让页面更加简短，用户能看见更多内容，而不必滚动屏幕。
2、方法是消灭欢迎词；消灭指示性文字，剔除掉无用的，让说明和指示更佳明确。
1、网站导航使用逻辑流程图
2、网站导航的包含元素
站点ID ：页面可视层次的首要位置，要么是本页最显眼的内容，要么涵盖页面所有其他元素
栏目 ：即主导航条，是到达该站点主要栏目的链接，位于站点结构层次的最顶层
实用工具 ：帮助使用站点（例如注册／登录、帮助、站点地图、购物车），或提供网站发布者的信息（例如关于我们、联系我们）
返回主页的按钮
搜索 ：要避免花哨用词、无谓的指示说明和选项
页面名称 ：显眼且位置合适
当前位置的指示器 ：层级菜单（面包屑）和Tab标签
后备箱测试：在某个网站的某个网页上，能回答一下几个问题：
这是什么网站？（站点ID）
我在那个网页上？（页面名称）
这个网站的主要栏目是什么？（栏目清单）
在这个层次上我有哪些选择？（本页导航）
我在导航系统的什么位置？（“你在这里”的指示器）
我怎么搜索？
1、用户对网站的第一印象。这是什么网站？我能在这里做什么？网站上都有些什么？为什么应该在这里，而不是别的地方？
2、首页应当包含什么。
3、如何传达网站是做什么的。口号、欢迎光顾、了解更多。
1、人自然有一种把自己的喜好投射到用户身上的倾向；
2、不同职位的人有不同的思维模式和喜好及关注点；
3、没有什么普通用户，用户体验并非是非黑即白。
4、方法：测试。测试用户的动机、理解、反应的差异。
1、 可用性测试 ：观看用户试用一些东西（网站、原型、甚至设计方案草图），去完成一些典型的任务，通过观察用户的行动，检测到那些让用户混淆和倍感挫折的地方，并修复它们。
跳楼大减价的简易可用性测试：
2、典型问题：
用户不清楚概念，不理解网站或者页面，或者理解错误。
用户找不到自己要找的字眼。
页面内容太多以至于找不到自己想要的。
需要：减少页面上的整体干扰；把他们需要看到的信息设计的更佳醒目，让他们在可视结构层次中更加突出。
3、总结会：决定修复哪些问题
原则：最严重的问题最先修复
收集一份问题列表——选择10个最严重的问题——问题评级——建立一份排序列表——对于非常容易解决的问题，另建一份清单——***添加的冲动——不要太看重人们对新功能的要求——忽略“皮划艇”问题（用户暂时出现错误，但马上又能回到正确轨道上来）
其他方法：远程测试／无人主持的远程测试
对比PC端：
1、通过提示（信号）给出使用线索，例如按钮的设计
2、没有了鼠标悬停（hover）
3、设计可以扁平化，但不能丢失可用性。
4、设计方案要考虑网速。
5、让人惊喜——使用新技术实现人们本想实现的想法，例如听歌识曲功能。
6、可学习
7、可记忆
8、一样要进行可用性测试
提高好感的几种方式：
1、知道人们在你的网站上想做什么，并让它们明白简易。
2、告诉我我想知道的，而非隐藏，即便是一些对自己不利的信息。
3、尽量减少步骤。
说服高层的技巧
1、演示投资回报率。去收集数据，进行分析，来证明一项可用性方面的改进导致了成本上的节约或者额外的收入。
2、用他们的语言说话。意思是我们不再谈论用户和给用户带来的好处，相反，去了解当前公司内部的难题，并陈述我们的方法可以有力地协助解决这些问题。谈论痛点、触点、KPI、CSI或者任何管理上的热词。
3、让老板来观察可用性测试
4、在你的个人时间进行第一次测试
5、对竞争对手进行测试
6、理解管理层
7、弄清楚自在整个公司大局中的位置
8、你最主要的角色应该是分享你的知识，而不是告诉别人应该怎么做
可用性的几个小的总结：
不要使用小而对比不强的字体
不要把标签放到表单的字段里面
保留访问过的链接和未访问的链接之间的区别
不要让标题漂浮在段落之间
推荐书籍：由Randolph Bias 和 Deborah Mayhew编著的《Cost-justifying Usability:An Update for the Internet Age 》
Tomer Sharon《 It's our research:Getting Stakeholder Buy-In for User Experience Research Projects》
Leah Buley 《Tne User Experience Team of One:A Research and Design Survival Guide》
Robert Cialdini《影响力》
如何设计网站——对Web设计的一点总结
在最近的工作中，遇到了导航的问题，无意中发现了找出了收藏已久的《别让我思考》，花了一周时间读了两遍，才清楚的理解导航对于一个产品的重要作用。也更加印证了产品圈中将用户当做小白的理论，其实并不是在产品设计中将一切都为用户标注出来，而是让用户能够通过自己的方式更加轻松的使用产品，这样的产品对于用户来说必定是不言而喻的，也就是主题“别让我思考”。下面是这次读书的笔记，虽然这本书给我很大的启发，但是一切需要归于实践，在实践中验证这个理论。
一、指导原则
第一章：别让我思考 --- 可用性第一定律
web设计的终极法则：别让我思考，即看到一个界面应该是 不言而喻 ， 一目了然 ， 自我解释 。
强迫我们思考的地方：（1）酷炫的名字或技术名词。（2）看起来不太明显的按钮和链接
当思考时，需要权衡，权衡应该更倾向于“显而易见”，而不行hi需要额外的思考
每个需要思考的地方会加重用户的认知负担，把用户的注意力从要完成的任务上拉开
访问网站时不需要思考的事都有什么？
我在什么位置？
该从哪里开始？
他们把xx放在什么地方？
这个项目上最重要的是什么？
为什么他们给它取这个名字？
如果做不到让一个页面不言而喻，那么至少应该让它自我解释
当浏览网站遇到问题时，用户会认为是自己的错误，而不会责怪网站
如果要让网页有效，它们必须在用户第一眼看到时将自己展示出来，而要做到这一点，最好的方法是创建不言而喻的网页，或者至少是自我解释。
第二章：我们实际上是如何使用Web的 --- 扫描，满意即可，勉强应付
事实1 -- 我们不是阅读，而是扫描，寻找能吸引用户注意力的文字或词语（除新闻故事，报告，产品描述界面）
为什么扫描？
（1）我们总是处于忙碌之中 --- 使用web是想节约时间
（2）我们知道自己不必阅读所有内容 --- 寻找感兴趣或手头的任务相关的内容
（3）我们善于扫描 --- 生活习惯，找感兴趣的内容
用户在网页上看到什么却决于想看到什么，通常为页面的一小部分内容
吸引注意力的文字和短语是什么？
（1）与手头任务有关的
（2）我们当前或接下来的个人兴趣
事实2 --- 我们不作最佳选择，而是满意即可
用户大多数时间不会选择最佳选项，而是选择第一个合理的选项 --- 满意策略
为什么不寻找最佳选择？
（1）我们总是处于忙碌之中 --- 最佳策略时间久，满意策略效率高
（2）如果猜错了，也不会产生什么严重的后果
（3）对选择进行权衡并不会改善我们的机会
（4）猜测更有意思 --- 猜测不会像权衡那么累，猜对了，可能看到意外的内容
事实3 --- 我们不是追根究底，而是勉强应付
勉强应付不仅限于初学者，技术专家也会在理解事物的工作原理上有着惊人的误会
原因是什么？
（1）这对我们来说并不重要 --- 明白事物工作机制并不重要
（2）如果发现某个事物能用，我们会一直使用它 --- 如果遇到更好的方法，会用好的方法，但是很少主动寻找更好的方法
如果用户明白网站，而不是勉强应付的作用
（1）用户更容易找到自己需要的东西，对用户和网站都好
（2）用户更容易理解你的网站有哪些服务 --- 不仅仅是用户偶然看到的
（3）引导用户看到你希望他们看到的内容（网站上）
（4）在你的网站上，用户会感到掌控全局，并逐渐成为老用户
第三章：广告牌设计101法则 --- 为扫描设计，不为阅读设计
吸引用户的5个重要方面（为下方2-6部分内容）
在每个页面上建立清楚的视觉层次
尽量利用习惯用法
把页面划分成明确定义的区域
明显标识可以点击的地方
最大限度降低干扰
建立清楚的视觉层次
视觉层次清楚的页面的特点
（1）越重要的部分越突出
（2）逻辑上相关的部分在视觉上也相关
（3）逻辑上包含的部分在视觉上进行嵌套
一个页面没有清楚的视觉层次，用户会降低扫描页面的速度，会寻找关键的文字和短语，然后拼凑出感觉重要的内容和内容的组织方式，这样会增加工作量
习惯用法是你的好帮手
web的习惯用法
（1）它们非常有用 --- 适当使用习惯用法，让用户访问更容易，减少额外学习工作原理ide成本
（2）设计师通常不愿意利用它们
如果不打算使用习惯用法，需要的做法：
a.必须确定你在使用一种同样清楚、同样不言而喻，没有学习曲线的方法
b.带来很大的价值
把页面划分成明确定义的区域
明显标识可以点击的地方
降低视觉噪声
噪声的分类
（1）眼花缭乱 --- 所有的信息都想吸引用户的目光，没有突出点
（2）背景噪声 --- 页面没有一个地方会造成过分干扰，但是这些很小的噪声太多会惹人厌烦
第四章：动物、植物、无机物 --- 为什么用户喜欢无需思考的选择
真正的问题不是到达目标之前要点击的次数，而是每次点击有多难，需要多少思考，多大的不确定性来判断自己是否在进行正确的选择
关键：如果用户需要一直在网络上进行选择，那么让这些选择变得无需思考是让一个网站容易使用的原因
第五章：省略不必要的文字 --- 不要在Web上写作的艺术
有力的文字都很简练。句子里不应该有多余的文字，段落中不应该有多余的句子
去掉没人看的文字的优点有哪些？
可以降低页面的噪声
让有用的内容更加突出
让页面简洁，让用户在每个页面上以言就能看见更多的内容，而不必滚动屏幕
需要去掉的文字是 欢迎词 和 指示说明
二、必须正确处理的几个方面
第六章：街头指示牌和面包屑 --- 设计导航
如果在网站上找不到方向、人们不会使用你的网站
网络导航101法则
你通常是为了寻找某个目标
你会决定先询问还是先浏览
如果选择刘兰兰，你将通过标志的引导再层次结构中穿行
最后，如果找不到想要的东西，你会离开
web与生活从空间角度来看的不同点
感觉不到大小
感觉不到方向
感觉不到位置
用户使用Web导航是因为需要得知自己当前的位置
导航的用途 --- 显而易见的用途
帮助我们找到想要的任何东西
告诉我们现在身处何处
导航给了用户一些固定的感觉，让用户感到脚踏实地
导航的其他用途 --- 被忽视的用途
导航告诉我们当前的位置 --- 告诉网站有些什么，导航表现了内容，导航站点比告诉我们位置更重要
导航告诉我们如何使用网站 --- 从哪里开始，如何进行选择
导航给了用户对网站建造者信心
Web导航的习惯用法
网站ID
栏目
实用工具
指示器（指明用户当前位置）
下一级栏目
页面名称
页面导航（当前这一层的内容）
小字体版的底端导航
持久导航（或全局导航） ：来描述出现在网站每个页面的一组导航元素
持久导航应在在整个网站保持一致，使用户只需要了解一次就够了，减少学习成本
持久导航的五个元素
站点ID
回首页的方式（Home）
搜索的方式
栏目
实用工具
主页和表单 不需要使用持久导航
主页：承担一些不同的任务，遵守一些不同的承诺，所以不需要使用持久导航
表单：在填写表单的页面，持久导航会产生干扰
如何设计Web导航各元素（表格下方为示例 - 亚马逊）
导航元素名称
细节点
站点ID
1.在Web上需要在每个页面都能看到网站的名称 --- 页面ID，通常在左上或靠近左上
2.网站ID代表整个网站，也就是说在当前站点结构中层次最高
3.站点ID如何出现在页面可视层次的首要位置
（1）让网站站点成为本页最显眼的内容
（2）让网站ID涵盖页面所有其他元素
4.站点ID需看起来像一个站点ID --- 例如logo
栏目
1.栏目（或称主导航条）是到达站点主要栏目的链接，结构的最顶层
2.大部分情况，持久导航也包括二级导航（当前栏目的下一级栏目清单）的显示位置
实用工具
实用工具是到达网站中不属于内容层次的重要元素的链接
返回主页Home
1.返回主页（Home）的按钮需要始终可见，给用户一种随时可以从新开始的感觉
2.Home的用法
（1）在栏目或使用工具清单中包含一个回到主页的链接
（2）在主页之外的站点ID上小心地加上Home的字样，让用户知道点击它
搜索
1.避免混淆的方法
（1）花哨的用字
（2）指示说明
（3）选项 --- 将选项写下来
2.需要对低层次导航给予足够的重视（***导航）
页面名称
1.页面名称的注意事项
（1）每个页面都需要一个名称
（2）页面名称要出现在合适的位置
（3）名称引人注目
（4）名称要和点击的链接一致
指示器
1.如何标记当前位置
（1）在旁边放置一个指示器
（2）改变文字的颜色
（3）使用粗体
（4）按钮反白
（5）改变按钮的颜色
2.告诉用户你所在的站点层级结构的前后关系（在网页中的位置）
层级菜单
1.告诉用户从主页到当前位置的路径（如何到达）
2.层级导航的最佳实践方式
（1）将它们放在最顶端
（2）使用“”对层级进行分隔
（3）使用小字体（表明是一种补充机制）
（4）使用了文字“你在这里”
（5）将最后一个元素加粗
（6）不需要把它们用作 页面名称
标签
1.为什么标签做导航是一个上佳的选择
（1）它们不言而喻
（2）它们很难错过（视觉上与众不同）
（3）它们灵活
（4）它们暗示了一个物理的空间
2.注意事项
（1）正确绘制 --- 激活的标签页在其他标签页之前
（2）颜色编码 --- 提高关注度
示例
如何评判一个网站设计的好
这是什么网站？（站点ID）
我在哪个网页上？（网页名称）
这个网站的主要栏目有哪些？（栏目清单）
在这个层上我有哪些选择？（本页导航）
我在导航系统的什么位置？（“你在这里”的指示器）
我怎么搜索？（搜索栏）
第七章：首先要承认，主页不由你控制 --- 设计主页
主页主要完成的任务
站点的标识和使命 --- 告诉用户这是什么网站，做什么的
站点层次 --- 提供服务的概貌，包括内容，功能，服务是如何组织
搜索
导读 --- 需要有内容推介，功能推介
友情链接 --- 预留空间放置广告，交叉推广，品牌合作
快捷方式 --- 最常访问的内容片段值得在网页上放置链接
注册
主页需要满足的抽象目标
让用户看到自己在寻找东西 --- 让用于想要的任何东西显而易见
......还有我没有寻找的 --- 让用户看到一些精彩的内容，就算这些内容用户没有寻找
告诉用户从哪开始
建立可信度和信任感
主页的常见约束有哪些
每个人都想占一席之地 --- 推介内容过多
想要参与的人太多
一个尺寸要适合所有的人 --- 普遍适用于大众
主页需要传达整体形象，让用户一眼就能清楚你的网站是说什么的
如何向用户传达网页的整体形象
口号 --- 靠近站点ID的地方，整个网站的描述
欢迎广告 --- 网站的简要描述，在主页的首要位置，不需要滚动屏幕就能看到
传达信息的原则
需要多大空间就使用多大空间
但也不要使用过多的空间 --- 保持简短
不要把实名陈述当做欢迎广告
最后的是进行测试
口号的注意事项
好的口号
不好的口号
清楚、言之有物
含混不清
长度适中，易让用户领会表达思想
太笼统
表达出网站特点和显而易见的好处
把口号（传达某种价值主张）和宗旨（表达某种指导原则，某个目标或某个理想）混淆起来
有个性、生动、有时候很俏皮
由于主页独特的职责，通常不必使用持久导航，它们之间的差异
栏目描述 --- 主页需要尽可能多的表现网页内容，其他页面不需要
不同的方向 --- 主页和其他页面布局不同，主页通常用
用于表示的空间更多 --- 主页上站点ID比较大，口号留有空间也较大
让栏目的名称保持不变，同样的顺序、同样的文字和同样的分组，尽可能多地保持视觉提示，同样的字体，颜色和大小写
下拉框存在的问题
用户必须将它们找出来 --- 必须找到下拉框，才能看到下拉列表
它们难以扫描
不好控制 --- 下拉列表收缩速度难以控制
下拉框对于组织按照字母顺序排列的项目比较有效
下拉框的优点是节约空间
任何共享的***（共有区域）都会因为过度使用而遭到破坏 --- 在主页上增加更多的项目所得到的的和付出的并不一致，虽然给推荐栏目巨大的访问量，但是让主页变得混乱，所遭受的损失将由所有栏目承担
三、确定你没有做错的几件事
第八章：农场主和牧羊人应该是朋友 --- 为什么Web设计团队讨论可用性是在浪费时间，如何避免这种情况
由于各自的职位不同，Web团队成员对于好的网站设计的看法不同
通过测试将讨论对错转移到什么有效、什么无效上，测试会让我们看到用户的动机、理解和反应的不同，从而不再让我们坚持用户和我们的想法相同
第九章：一天10美分的可用性测试 --- 让测试简单，这样你能进行充分的测试
焦点小组并不是可用行测试，焦点小组是在项目早期阶段，用来收集用户的意见和感觉
可用性测试主要是希望得到用户是否知道该网站是做什么的，并且能用它完成一项典型任务
测试的作用是什么
如果想建立一个优秀的网站，一定要测试
测试一个用户比不做测试好一倍
在项目中，在点测试一位用户好过最后测试50位用户
人们对招募用户代表的重要性评估过高
测试的关键不是要证明什么或者反驳什么，而是了解你的判断力
测试是一个迭代的过程
没有什么比现场用户的反应更重要
寻找能够反应目标群体的测试用户，但别裹足不前
寻找的测试用户可以和目标群体有差别的理由是什么
差别的原因
例外
实际上，我们都是初学者
如果你的网站几乎只由某一类用户使用，且招募并不难，那就去招募
设计出的网站只有你的目标群体能使用，这通常并不是一个好主意
如果你的目标群体分为几个明显阵营，且各阵营有着完全不同的需求，那你至少要从每个阵营选择用户进行一次测试
专家通常不会介意对初学者来说很清楚的界面
如果使用你的网站需要专业的领域知识，那么你需要在该领域中招募有专业知识的用户
进行招募，需要注意的问题是什么
提供合理的激励
邀请要简单
避免对网站（或网站背后的组织结构）进行预先讨论
别不好意思请朋友帮忙
测试中遇到的问题
用户不清楚概念
用户找不到自己想要的字眼 --- 网站用来组织内容的分类不符合用户习惯；分类符合习惯但是没有使用他们期望的名字
内容太多 --- 减少页面上的干扰；将需要看到的内容涉及的更加醒目
一些关于问题分类指南
问题
行为（用户/主持）说明
正确解决方式
忽略Kayak（皮划艇）问题
1.出现问题的人马上发现自己偏离了原来的主题
2.用户尽量回到原来的方向而不需要帮助
3.这种情况并没有扰乱用户的活动
可以忽略
***添加的冲动
增加一些内容，注释，指导说明
去除某个让人混淆的内容
不要太看重用户对新功能的要求
抓住能够的着的果子
1.恍然大悟型
2.便宜型
尽量实现变更
进行变更
只要你进行改变，就要仔细思考它将会影响哪些内容，当你把某些部分调整的更为突出时，想想是不是把其他内容的重要性降低了
四、大的方面和外界影响
第十章：可用性是基本礼貌 --- 为什么你的网站应该让人尊敬
降低好感度的方式
隐藏我想要的信息
因为没有按照你们的方式行事而惩罚我
向我询问不必要的信息
敷衍我，欺骗我
给我设置障碍
你的网站看上去不专业
提高好感度的方式
知道用户在你的网站上想做什么，并让网站明白简易
告诉用户，他们想知道的
尽量减少步骤
花点心思
（1）保证网站准确有用
（2）产生解决我的问题所需要的信息
（3）网站用清楚的方式表达
（4）组织良好，用户可以轻松找到解决方案
知道用户有哪些疑问，并给予解答
为用户提供协助
容易从错误中恢复
如果不确定，记得道歉
总结
这本书主要讲了Web设计的一些核心的原则，以及用户在使用Web时的心理，并且基于用户的信息，来设计Web的导航和主页。并且结合实践，在项目中需要不断的进行可行性测试迭代，从而使Web可行。这样的网站才是一个成功的网站，在符合用户的习惯的基础上，让用户能够自行的解决问题，从而达到网站和用户的目的。
***类：
大家都知道，学习本身是一个特别耗费时间和财力的事情，但是为了自身发展，却不得不学习，而且现在对于职业教育的课程特别贵，并且专业书籍也是非常贵的。虽然说是投资自己，但是对于生活来说还是较大的开销，因此算是众筹了，毕竟一个课程可能动则几千块，但是我并不贪心，所以分享的课程的价格很低，不会超过5块钱吧，毕竟大家都是为了生活，只希望弥补一点生活压力吧，各位加油吧
链接：在线教育***课（产品设计）
pan.baidu***
提取码：afvs
俞军产品方***：
链接：
pan.baidu***
提取码：lizk
梁宁产品思维30讲：
链接：
pan.baidu***
提取码：tr7i
增长黑客：
链接：
pan.baidu***
提取码：dpm3
电子商务网站设计原理笔记！
1． 什么是Web服务器？Web浏览器的作用是什么？简述浏览器打开文件的步骤。
答：Web服务器是用于存储WWW文件并响应处理客户机请求的计算机。浏览器的作用在于解释并显示超文本文档，包括指向其他文档的引用（或指针），与其他HTTP服务器上非常相似，这些指针也称为链接。从一个超文本页上选择一个链接时，浏览器将请求送回支新的服务器，然后在客户端上显示另一个充满链接的页面。
打开一个Web文件的基本步骤如下：
A在浏览器中指定要访问的Web文件的URL。
B浏览器将请求发给服务器。
C服务器将靖求转递给指定URL处的服务器。
D该服务器将文件送回到服务器上。
E服务器将文件送回到客户端浏览器上。
F浏览将文件显示在计算机屏幕上。2． IP地址与域名之间存在对应关系吗？如果存在，那么二者是怎样对应起来的？如果不存在，试讲述在Internet中是如何惟一地标识一个***的位置的？
答IP地址与域名存在着对应的关系。IP地址上全球通用地址，在协议软件中IP地址由表及里2位二进制浸透表示，每八位为一组，以圆点“.”分隔,在面向用户的文档中,IP地址被直观地表示为四个以圆点滴隔开的十进制数,其中每个十进制浸透对就一个八位二进制数组(即一个字节),每个十进制数可取值0~255.IP地址理一种层次型地址,在概念上分为三个层次:主机、由主机构成起来也不方便。为了解决这个问题，同时也为了便于网络地址的分层管理各分配，自1984年起在互联网上***有了一种字符型的地址标识，这便是域名（Domain Name）.
域名系统，域名标识了一个有户所属的机构、所使用的主机或节点机。域名的命名方式自然称为域名系统，域名必须ISO有关标准进行。
同IP地址类似，域名***用层次型命名机制，域名由n级组成，各级之间以圆点分隔。
域名是人们容易记忆的字符型号主要内容名，IP地址则是计算机容易处理的数值型主机名，两者均描述了主机在Internet中的地址，而且一一对应。域名系统实现了域名—IP地址映射。
域名系统实质是一个公布式数据库，包括突出数据的标准格式，数据库查询方法，以及本地更新数据的标准方法
域名系统将主机的信息管理公布与许多国家地区和组织，用户在自己的域名上更新所在域的信息，域名服务器则将这些信息传送给其他的域名服务器。另外，域名服务器能被几乎所有的计算机软件所有，包括电子邮件，远程终端，文件传输程序。3.图象处理工具主有哪几样应用？
答 图象处理工具可对图象进行编辑，修饰，优化，图形文件格式转化等处理。
A图形编辑包括制作业面中的字体，制作3D效果，建立透明GIF文件，插入背景，阴影，处理字体，箭头，徽标等业面元素，并能对图形进行剪辑，移动和旋转处理
B图象修饰是指对网业中已有的图象加以认识和做其他的修改，包括调整图象亮度和对比度，***用变体，给黑白图象着等以改善网页中图象的质量
C图象优化是指***用各种滤镜对已建立的图象进行色彩校正的优化处理。
一般来说，图象处理工具包括公用图象处理工具，专用图象处理工具，网页制作软件自代图象处理工具4.为了满足页面制作的目标，应该注意哪些问题？
答 要注意以下几个问题
A网页结构网页结构要清晰，易于导航，思路和脉络要符合访问者的想法。可***取的措施有：***用框架结构表现主题，索影和正文；网页的大小一般控制在50KB以内；在网页的尾部放上联系方式，如E-MAIL，以方便访问者能建立联系，反馈必要的信息 B页面内容一般情况下，网页都要以内容为主，不必过分的追求复杂的表现形式，但必须写好简介，要有特色，避免太空，泛泛而谈。页面本身要简单，结构复杂的网页不仅要花费很多的精力，而且由于超连接复杂，让浏览者阅读时也感觉困难
C文字在以内容为主的前提下，应当尽量把形式与内容结合起来。既不要把页面弄的花哨，也不呀只讲内容完全不讲究文字和图片的安排，要容易阅读。要注意：网页的标题要简洁，明确，能反映整个文档的内容；在文本叙述部分使用水平线分割不同的部分；对重点的文章和段落要使用强调字体表达
D图形 设计好图形并合理使用能给网页增色。网页中插入的图形尽量要小，网页中图形要附加文字说明，使人在图形出来之前了解相关内容；不要为图形加太长的交互文本，也不要把所有的超连接放在图上；控制页面中的图的数量，不要滥用图象GIF5.什么是所见既所得的网页制作工具？什么是标记形网业制作工具？他们的优缺点？
答 标记型网业制作工具既直接书写原代码。他的好处是用户可很方便的控制代码。由于都是自己书写，没有冗余部分，因此能非常好的把握整个HTML文件在浏览器中的表现；最大的缺点是用户必须非常熟悉HTML语言。
可视化网页制作工具既所见既所得的方法制作网页，可以非常直观的对网页进行排版，往往使设计工作事半功倍。它不需用户对HTML标记熟悉，只要用户有好的创意，就能够作出符合用户需求的网页。但是它有个致命的缺点：难以精确的达到与浏览器完全一致的显示效果，而且它生成的代码也不能完全适应各种不同的情况，往往出现冗于度高，不如手工书写来得简洁。6.在学习网页制作时，可以从哪些方面来增强学习效果？
答 A从了解HTML的基本标记开始。
B选择自己认为顺手的工具，从第一个页面开始。
C多访问他人网页，从中受到启发
D深入分析成功的网站，网页。1. 网站设计的过程中，最中要的一个原则是什么？为什么？
答：网站最重要的原则是创意。虽然网站的主要目的是传送给人们它的信息，但在传递信息的同时还把他的文化传递给获取信息的这些人。软件的掌握是短期就能速成的，而且新的软件成出不穷，功能越来越强大，但是使用这些软件必须要有良好的网站设计概念才能创造优秀的网站，这是网站制作的核心。网站的制作是按一定的步骤进行的，不同的网站设计着对网站有不同的见解和看法，但是有个共同观点：仅会输入文本，制作超级连接，排列图片不是真正意义上的网页制作，因为网页制作最重要的一个原则是创意。2. 什么是信息看版？有什么作用？
答：信息看版是WEB站点中为访问者提供的各种最新的信息***。通常位于首页上，或者在首页打开的同时通过脚本控制同时把信息看版打开。3. 简述网站的设计流程，并详细描述流程中每个步骤应该进行的工作
答：设计流程为8个部分：A初始商讨。收集相关信息，确定包括站点目标用户，要发布的内容及开发WEB服务器平台。B构思。设计师根据收集的信息，开始构思站点的内容组织，栏目的设置，页面的基本结构等。C综合内容讨论。设计师先制作一些初始页面，将陪以文章的图样打印出来也顾客讨论，研究。D页面布局与导航。一旦顾客同意了这些内容，设计师就开始编制WEB页面，站点也编制到页面中，让顾客看到页面的处世效果。E图形制作。顾客同意了站点的外观设计，设计师就将制作图形，进行图形优化。F内容流程。利用各种网页技术，把客户的书面材料和相并进行修改。G测试。在站点被提交给拥护之前，开发人员要彻底测试每个WEB页面和连接并进行修补。H验收交付。一但开始验收工作，客户要对站点进行大量测试，找出排版错误的地方，进行修改。在作完了必要的工作后，站点可以对外宣传，开放了。4. 什么是站点的风格，典型的商业网站的风格有哪些？
答：站点的风格是指整个网站所***取的结构布局，色调，文字，标志，图案等要素带给浏览者的关于该网站的印象。商业公司的风格主要表现在如下方面：
A公司的会标或商标应出现在页面的最上方，尽可能作到色彩醒目，同时站用面积小。B可***用主题图形产品广告来突出公司形象和风格。C主要栏目一般才用图文并茂的超连接，要考虑主要栏目的图片，文字的色彩配合，主题图形相互寸托。D不要把主要栏目和次要栏目放在同一个页面显示。E商业网站一般都有固定的栏目页面。F建立站内收索引擎，方便浏览者在站内查找所需要的信息5．在组织网站目录结构是需要遵循哪些原则？
答：A不要将所有文件放在根目录下面。B按栏目内容分别建立子目录。C在每个栏目下面都建立独立的IMAGES目录。D目录的层次不要太深。E切忌使用中文目录。F不要使用过长的目录。G尽量使用意义明确的目录6．究网站的连接结构意义何在？主要的网站结构有哪几种？
答：网站的连接结构是指页面间相互连接的拓卜结构。他建立在木结构基础之上，但是可以跨越目录。形象的说，每个页面都是一个固定点，连接则是每2个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是这些点不是分布在一个平面上，而是存在于一个立体的空间。研究网站连接结构的根本目的在于，用最少的连接，使浏览最有效率。一般的建立网站的连接结构有树型和星型2种，在实际中，总是将2重结构相互混合起来，我们希望浏览者可以方便快捷的达到自己需要的页面，有能清晰的知道自己的位置。所以最好的方法就是首页和2级页面间用星型连接，2级和3级之间用树型连接结构。1． 什么是页面的重心？为什么要使页面的重心平衡？常用的有哪几种重心平衡方法？
答：重心平衡既页面重心反映的是网页上各种元素分布的协调程度。任何一个图片或者文字，都在网页上占有一定的空间，作为一个模块，其本身就具有重心位置，当插入到空白网页后就会明显的改变整个网页的重心。重心的平衡代表网页必须对称布局，虽然对称的分布更容易的获得重心的平衡，但是对称分布往往使页面失去活力，因此非对称布局反而是更多网页的首选。一般情况下，重心平衡是指在左右重心的平衡。而上重下轻也是网页构图经常***用的方法。既对页面上下重心的平衡上要求不严。这是因为由于在浏览器的滚动时，显示的是整个页面，访问者一般不会注意。
2． 什么是WEB安全色？什么是抖动？2者之间是否有联系？
答：WEB安全色是由于浏览器在显示各种颜色时是有选择的。它只能选择其中的216色显示。无论是BLUE，RED，GREEN的颜色通道，他都是***用跳 跃的显示方法进行颜色的编码，既它们都只能在00-FF之间取值。这些跳跃的色彩被称为WEB的安全色，意思是在任何浏览器上都能显示。 抖动是由于浏览器不能显示所有的颜色，因此伪造了在调色板中不能显示的颜色，通过邻近的象素混合而产生在图象中实际并不存在的颜色，达到一种补偿的目的。 抖动的图象有很多颗粒，图象显示粗糙。 抖动是由于WEB安全色的限制产生的，抖动时使用的色彩范围是在WEB安全色内的。 .... 参考资料
响应式web设计读书笔记
css中的媒体查询
link标签中的媒体查询
注意 ：大多数情况下，不需要指定screen这种媒体类型，使用简写语法即省略关键词all，换句话说，如果不指定关键字，则关键字就是all
弹性布局，即网站的宽度都以百分比形式定义。
另外，可以结合媒体查询，来实现较小视口垂直显示，较大视口水平显示：
关键点就是，设置body整体height: 100%，让main部分flex-grow: 1自动伸展占据空余空间
图片进行分辨率切换，可以根据视口空间的大小显示分辨率不同的图片，让高分辨率的用户看到高分辨率的图片
提供不同分辨率的图片，由浏览器来决定选择哪一个
sizes对浏览器给出提示，根据需要宽度的不同决定选择不同图片
根据视口宽度的不同，提供不同的图片，其中img标签作为不支持picture标签的后备
开发笔记1-Web网页开发一些尺寸的计算
1、前置已知数据：设W为设备屏幕的宽，H为设备屏幕的高，以及***元数据的比例S，如16 : 9。
2、设w为***元数据的宽，h为***元数据的高，h=H时，S=16/9，在苹果x上W=1125px，H=2436px，求w和***居中偏移量。
PS：适合设置父容器overflow为hidden，其下的video高度百分百的情况。
1、前置已知数据：设W为设备屏幕的宽，H为设备屏幕的高
2、设在750x1334设计稿上，w1为背景图片的宽200px，h1为背景图片的高300px，w2为互动元素的宽，h2为互动元素的高，x2为互动元素的x轴坐标50px，y2为互动元素的y轴坐标250px。当在苹果x上W=1125px，H=2436，h1=H时，求互动元素在苹果x上的x轴坐标x3、y轴坐标y3。
关于web网站设计与开发的笔记和web网站设计与开发教程的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
