《dreamweaver基础教程—体验标准化设计流程》由会员分享，可在线阅读，更多相关《dreamweaver基础教程—体验标准化设计流程（13页珍藏版）》请在金锄头文库上搜索。
1、网页制作与网站开发从入门到精通 12 Demo，一起体验标准化设计流程 接触新鲜的事物，学之初都会有一种朦胧的冲动。如果冲动的力量足够大或者跨越的门槛 比较小，你可能因冲动而撞入崭新的世界，继而借助持续的内力和外力最终带你走向成功，这 犹如飞船遨游太空，但遨游前的发射是最重要的，也是最关键的。 在构思和撰写这本书稿时，我一直都很惴惴不安，担心读者因为信任并喜欢上这本书而选 择阅读它时，却因为我脱离实践的说教让读者迷途不知所向，甚至难以往返，实在是最大的罪 过。因此我对编辑说：“在门口立一个 Demo 级导游图吧！”，非常感谢编辑的理解和支持， 于是我就在第 1 章婆婆妈妈的唠叨之后，赶紧在本章
2、设计一个 Demo 示例，以真切的动手操作 告诉读者标准设计是怎么一回事，顺着这条道走下去，虽不能保证你绝对学有所成，但至少知 道回家的路。 与我对面办公的小王进公司已经快一年了。现在依然能够记忆起他初来面试时的情 形，当时老板委托我主考前来面试的十余位同学。这可是一个难题。因为既要照顾学生的 实际状况， 还要考虑试题的区分度，题不能简单得是人都会， 更不能难得所有人都交白卷， 于是我就想到个人简历，假设我自己是客户，请他们帮我设计一个简历，越简单越好，就 一个页面，但要体现标准设计的思路，页面符合标准和规范。”话说到这里，于是本章的 故事也就开始了。 1 1 与客户交流获取资料与客户交流获取
3、资料 考题布置完毕，我在黑板上公示了个人 QQ，并告知有问题或需要了解相关资料者请通过 QQ 联系，需要素材和工具者请在网上搜索下载。偌大的会议室，每人一台笔记本，于是并不 轻松的考试就这样开始了。 1.1 不要张口就问设计效果不要张口就问设计效果 很多同学虽然能够制作简单的页面，但是对于标准设计的理念和思路不是很清晰，于 是张口就问我：“朱老师，您喜欢什么样的封面？”，还有同学从网上下载了几种个人简历 模板请我选择风格这让我有点哭笑不得。我知道在传统设计中，设计师一般都会做几 套小样，请客户选择，或请客户提出改进和重设的意见。但是现在不是表格设计，而是标 准化设计。于是我对他们说： “请不要
4、用既有的套子束缚自己的思路，也不要用无形的套子 勒死我。 ” 当准备使用标准化思路和方法来设计页面时，设计的起点不应该着眼于页面效果，而是关 Demo，一起体验标准化设计流程 13 注页面所要传达的信息本身。实际上，如果我们认真回眸互联网起家之初，不就是为了方便信 息传递和交流吗，这期间曾经出现过本末倒置的以平面设计方法来设计网页的风气，那是表格 设计惹得祸，今天我们不能再犯这样的错误了。 1.2 向客户获取有价值的资料向客户获取有价值的资料 很多设计师在与客户交流中，不敢询问他人的隐私，担心这样直接询问会让人尴尬，甚至 招人讨厌。其实，这里就涉及到资料的采集问题。 作为设计师，在获取信息时应
5、该根据页面的性质和类型有选择地向客户索要资料。对于个 人简历这类页面来说，就必须掌握客户的个人隐私信息。当然，如果准备设计一个产品列表的 页面，索要客户的私人信息就显得不妥当了。 对于任何一个客户来说，可以索要的资料是无边的，但是围绕设计任务所要获取的资料却 是有限的，如何获取有价值的信息，设计师需要有明确的目标和敏锐的采编能力。这与新闻记 者现场采访是一个道理，虽然对于时效性的要求不是那么严格，但是盲目地获取资料，甚至是 漫无边际地见客户资料就收集，将为后期结构设计带来巨大的负担，最终导致所要显示的页面 信息与客户的预想存在巨大反差。 新手的无知可以谅解，任何人都是从不会到会的。初步判断了学
6、生的交流和信息采集能力 之后，我把页面所要显示的信息（模拟信息）在黑板上公示出来，避免大家因为获取的资料内 容不同而导致不同的页面结构和设计效果，造成无法有效比较。 标题：个人简历 副标题：样吧的头像 基本信息： 姓名：样吧 性别：田力 年龄：大男 地址：北京京北 联系信息： QQ：364077976 Email： Tel:13512345678 HTTP：http:/ 专业信息： 英语：5.4 级 职称：98 级程序员 技术：HTML、CSS、JavaScript 幼儿版 特长：ASP.NET 博士伦 网页制作与网站开发从入门到精通 14 2 2 构建符合语义的结构构建符合语义的结构 标准页
7、面的结构设计应该体现两点。 第一，结构层次清晰、嵌套合理，避免出现冗余标签和属性。 第二，结构的语义性必须明晰。 这对于新手来说是一个非常大的考验，凭借经验，我料想到很多学生会在这儿出现问题。 果然如此，下面就来看看他们的设计吧。 2.1 不要使用表格设计结构不要使用表格设计结构 小张的动作非常麻利，他使用的是表格设计的结构（截取部分代码如下） ，询问为什么使用表 格设计结构，回答说是因为制作速度快，能够可视化操作，客户一般不懂代码，只看设计效果。 实事求是地讲他的解释在现实中是存在的， 但是眼前的客户可是一位精通标准设计的人呀， 怎能这样糊弄客户呢。在标准设计中，表格的用途不是用来设计结构，
8、而是用来组织数据显示 的，所以，他的这种设计是不符合技术要求的。 个人简历 基本信息 姓名 样吧 性别 田力 年龄 大男 地址 北京京北 Demo，一起体验标准化设计流程 15 2.2 不要把结构当作段落文本不要把结构当作段落文本 当然，不使用表格设计结构，也未必都符合标准。很多新手误以为结构就是段落文本，于 是全部使用标签来设计结构（代码如下） ，这种做法既不符合标准，设计的效果也不尽人意。 对于这样的结构，信息与标签混合在一起，想使用 CSS 来控制都是件难题，对于搜索引擎来说 也很难抓取。 个人简历 基本信息： 姓名：样吧 性别：田力 年龄：大男 地址：北京京北 联系信息： QQ：364
9、077976 Email： Tel:13512345678 HTTP：http:/ 专业信息： 英语：5.4 级 职称：98 级程序员 技术：HTML、CSS、JavaScript 幼儿版 特长：ASP.NET 博士伦 2.3 div 不是万能的不是万能的 出现问题最多的就是很多同学认为 div 是万能的，所有结构全部使用标签来设计，认 为只要不使用表格，完全使用 div 元素来设计结构就是符合标准的（代码如下） 。 个人简历 基本信息： 姓名：样吧 性别：田力 年龄：大男 地址：北京京北 网页制作与网站开发从入门到精通 16 联系信息： QQ：364077976 Email： Tel:135
10、12345678 HTTP：http:/ 专业信息： 英语：5.4 级 职称：98 级程序员 技术：HTML、CSS、JavaScript 幼儿版 特长：ASP.NET 博士伦 这种设计符合前面所说的“结构层次清晰、嵌套合理” ，但是整个结构如同没有表情的机器 人，虽然能够看懂它的意思，但是却无法懂的这样的结构，对于搜索引擎来说也只能是避而 远之。 2.4 使用符合语义的元素使用符合语义的元素 标准的结构应该根据内容本身的信息恰当选用符合语义的元素。例如，下面这位同学设计 的结构就非常好。 “个人简历”是整个页面的标题，所以使用一级标题元素（h1）来设计，而副标 题虽然是一幅图像，但是它也包含
11、一定的语义，由于比网页正标题语义要轻，所以可以降级使 用二级标题来表示。一级标题语义最重，当然也最受搜索引擎青睐。 “基本信息” 、 “联系信息”和“专 业信息”属于信息块标题， 所以再降级设计， 使用三级标题来表示。 个人资料信息属于列表性质， 所以使用列表结构来定义，这里使用定义列表能够很合理地包含所有信息，标签表示列表 项的标题，而标签表示列表项的详细说明内容。整个结构既符合语义性，又层次清晰，没 有冗余代码。 个人简历 基本信息 姓名 样吧 性别 田力 Demo，一起体验标准化设计流程 17 年龄 大男 地址 北京京北 联系信息 QQ 364077976 Email Tel 1351
12、2345678 HTTP http:/ 专业信息 英语 5.4 级 职称 98 级程序员 技术 HTML、CSS、JavaScript 幼儿版 特长 ASP.NET 博士伦 还有一位同学使用无序列表的结构来组织信息，代码如下： 基本信息 姓名：样吧 性别：田力 年龄：大男 地址：北京京北 如果直观地进行比较，你可能会感觉使用无序列表结构比定义列表结构更简洁，但是它没 有最小化分隔语义，所以还不是最佳方法。因为“姓名” 、 “性别” 、 “年龄”和“地址”等内容是标题信息， 而“样吧” 、 “田力” 、 “大男”和“北京京北”等内容是具体的说明信息，不应该把它们混为一团用一个标 签来表示。 网页
13、制作与网站开发从入门到精通 18 3 3 与客户沟通并设计页面表现效果与客户沟通并设计页面表现效果 经过两轮的考查，部分面试者受不了这样的折磨，只好提前告退。余下的几位同学将要面 临最后一关的考验。我担心他们过于紧张而误解或错解，所以在动手前反复提醒：结构制作仅 是标准设计的起步，最难的一步是结构的艺术表现。你们可以参考别人的创意，引用别人的素 材，但是在设计样式表时应该注意四个问题。 第一，编写代码应惜墨如金，能借助 CSS 继承或分组的就不应该多设置一个声明。同时， 在设置样式时应避免破坏网页结构的完整性，不要任意为标签定义 id 属性和 class 属性。 第二， 样式表应该照顾主流浏览
14、器， 确保在 IE 6、 IE 7 和 FF 浏览器中看起来效果基本相同。 我们并不要求设计效果在不同浏览器中显示得完全一致，其实那样做也没有必要。 第三，要注意三权分离的原则，现在不要求编写 JavaScript 脚本来设计页面交互效果，但 是应该确保结构和样式的分离，为此可以在外部样式表中编写样式，然后导入网页。 第四，在技术设计完成的情况下，尽量使页面看起来富有特色，具有个人设计风格。例如， 在网页配色、页面版式布局和使用不同背景修饰图时要注意和谐。 3.1 不要为了设计样式而随意设置不要为了设计样式而随意设置 id 属性和属性和 class 属性属性 动手之前虽然反复强调，但是仍然有两
15、个同学在结构中随意定义 id 属性，问其原因，解释 说是为了方便 CSS 定义样式。这样做就显得画蛇添足了，虽然我们不能够说它是错误的，但是 给人感觉这种设计是很不专业的。如果能够借助语义元素或包含关系控制的样式就避免为元素 如果能够借助语义元素或包含关系控制的样式就避免为元素 定义定义 id 属性属性，除非脚本需要才可以定义 id 属性。 个人简历 基本信息 联系信息 专业信息 更离谱的是，还有一个同学使用 class 属性为每个元素设置样式，问其原因，解释说这是个 人使用习惯，只要达到目的，怎么方便就怎么用。 Demo，一起体验标准化设计流程 19 个人简历 基本信息 联系信息 专业信息
16、这样做就大错而特错了，说明这位同学没有明白 id 属性和 class 属性的含义以及如何进行 区分。实际上，id 属性仅是定义元素的“身份编码” ，这个值是唯一的，在网页文档中不能够重复。 而 class 属性表示类样式，用来在文档中定义一种通用样式，在上面代码中使用 class 属性定义 每个元素的身份就很不妥当了。 当然在设计样式时，也不是绝对禁止使用 id 属性和 class 属性，可以根据需要适当为结构 定义少数的 id 属性和 class 属性。下面是小王改善的结构。 个人简历 基本信息 姓名 样吧 性别 田力 年龄 大男 地址 北京京北 联系信息 QQ 364077976 Email Tel 网页制作与网站开发从入门到精通 20 135123
