1、Web 设计与编程导论（双语） 教案- 1 -Web 设计与编程导论（双语） 教案单位：信息学院电子商务系编写：聂笑一时间：2006 年课时：24 节01内 容：绪论（Introduction）教学目的：通过 web 发展的 历史，让同学们准确了解 web 的过去、现在和未来；对比web1.0 与 web2.0， 介绍 web2.0 衍生的当今流行的技术种类，让同学们从宏观上掌握 web 的技 术分类和了解当前技术潮流的同时，激发对课程的兴趣。教学重点、难点：Web 技术的核心是教学的重点，又是教学的难点。这是因为：Web 技术衍生出来的门类和方向多达上百种，表象纷繁复杂，本 质 却是 web
2、 的标准。基于标准的三大部分结构、表现 和行为是今后学习的重点。让同学们接受双语教学另一个难点。计算机的技术、标准和知识基本来自与欧美，专 有名词和计算机代 码几乎都是用英语进行书写，作为教师应该引导逐步接受和习惯双语教学。教学方法：讲授法结合谈话法、案例法参考书目与资料：什么是 Web 2.0 Tim OReillyWeb2.0 与社区Web 开 发技术史话Web 应 用的发展简史Web 标 准与网站重构Web 设计与编程导论（双语） 教案- 2 -xml 基础教学过程：（一）自我介绍和教材介绍（二）推荐参考书目（三）讲授新课绪论（共两课时）的课堂教学实施过程共分五步。STEP 1：Inte
3、rnet Pioneers（J.C.R. Licklider 、Larry Roberts、Tim Berners-Lee）STEP 2：History of WebGeneralized Markup LanguageStandard Generalized Markup LanguageHyperText Markup LanguageeXtensible Markup LanguageSTEP 3：Web1.0 vs Web2.0STEP 4：What is Web 2.0？（1（ IM：Instant Messenger（2（ Blog：Weblog（3（ Podcasting（4（
4、P2P：peer-to-peer（5（ SNS：Social Network Service（6（ Wiki（7（ Bookmark（8（ RSS：Really Simple Syndication / Rich Site Summary （9（ Ajax：Asynchronous JavaScript and XML STEP 5：Web standards（1（ Structure（2（ Presentation（3（ Behavior教学后记：通过 Internet 先驱者的事迹给同学一个深刻鲜明的印象，让同学们感悟到了坚持不懈的重要性；通过个人的亲生经历和英语趣事激发了同学们对英语学习
5、热Web 设计与编程导论（双语） 教案- 3 -情，达到了同学们对进行双语教学产生认同感的目的。一位教育学家曾经说过“教师在课堂上 传授知识的同 时，还要通过个人的人格魅力影响同学 们世界观和价值观。 ”在这堂课后对这句话有了更深刻的认识和理解。不足的是在 web 历史介绍时有点拖沓，在以后的课中应更注意时间和节奏的控制。02内 容：第 1 章 Web 基础 与概述（Chapter 1：Web Basics and Overview）教学目的：要求同学们掌握网页的概念、网页的样式、网 页的组成元素；网页的种类与用途；与网页相关的概念介绍，如域名、URL（统一资 源定位器）、超 链接、书签、表单
6、、数据库、动态网页、服 务器/客户端（Server/Client）运行模式、服务器与浏览器、网站发布等等。教学重点、难点：Web、WWW 和 Internet 是教学的难点。这是因为：人 们常常把三者混为一谈，然而他们表达的并非相同的含义。必须从三者英文的定义上进行分析得出其侧重和区别。URL 是教学的重点。URL 全称是 Uniform Resource Locator，格式构成是同学们需要重点掌握的，这是网页交互性基础；URL 惟一性是此知识点中的一个难点，同学们比较难理解，须从其组成结构分析。教学方法：讲授法结合谈话法、案例法参考书目与资料：计算机网络 第四版Apache 经典实例WEB
7、 设计技术手册（第三版，影印版）教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课（三）讲授新课Web 设计与编程导论（双语） 教案- 4 -第一章（共两课时）的课堂教学实施过程共分三步。STEP 1：Web Vocabulary（1）World Wide Web（2）Hypertext linking（3）Web page（4）URL（5）Web address（6）URI（7）Web site（8）Web browser （9）Web server （10）Apache（11）IISSTEP 2：What is the difference between Internet，W
8、WW and Web?Internet: a physical network connecting millions of computers using the same protocols for sharing/transmitting information (TCP/IP).Web: an internet-based distributed information system.World Wide Web: a collection of interlinked multimedia documents that are stored on the Internet and a
9、ccessed using a common protocol (HTTP).Key distinction: Internet is hardware; Web is software. Many other Internet-based applications existSTEP 3：Network（1）Network Addresses（2）Client and Server（3）Domain name system（4）Domain name registration（5）URL（6）Static vs. Dynamic pages教学后记：解释计算机端口时的类比举例（餐卡与银行的关
10、系；邮件与寝室门牌的关系）较为成功。今天上课有两位督学听课。课后对我进行了指导。除肯定我上课的逻辑感较强等优点外也提出了一点意见适当减慢语速。以后的上课要注意这个问题，Web 设计与编程导论（双语） 教案- 5 -多向老教师学习。03内 容：第 2 章 创建 Web 页面：XHTML（Chapter 2：Creating Web Pages: XHTML）教学目的：要求同学们准确掌握 HTML 的特点、HTML 的工作原理、HTML 标记、HEAD 标记、BODY 标记 、链接标记和其他常用标记。培养同学们掌握网站开发初步运用表格布局模式，在网页设计的过程中采用 web1.0 的制作方法。教学
11、重点、难点：Html 的基本结构是教学的重点，HTML 标记、 HEAD 标记和 BODY 标记构成了网页的主体架构，是网 页的基础。链接标记是教学的难点。链接标记构成了网页超链接的主体，是 WEB 拓扑结构实现的基础。教学方法：讲授法结合谈话法、案例法参考书目与资料：html 与 xhtml 权威指南Teach Yourself HTML and CSS in 24 Hours 第七版HTML 和 CSS 网页标准指南教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课Web 设计与编程导论（双语） 教案- 6 -（三）讲授新课第二章（共四课时，本次为前两课时）的课堂教学实施过程共
12、分八步。STEP 1：Basic HTML SyntaxSTEP 2：Minimal legal HTML documentTest DocumentSTEP 3：HTML Structure(1)HTML has two partsHEAD: Information about the document-standard format-extensible formatBODY: visible content of document STEP 4：Block Structure STEP 5：Presentation Phrase StructureSTEP 6：CommentsThe c
13、omment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.STEP 7：HTML Entities Some characters have a special meaning in HTML, like the less tha
14、n sign ( tag at all, will display the tags content as text on the page. To prevent the browser from doing this, you should hide the script in comment tags. An old browser (that does not recognize the tag) will ignore the comment and it will not write the tags content on the page, while a new browser
15、 will understand that the script should be executed, even if it is surrounded by comment tags.STEP 3:HTML 4.0 Standard Attributes-Core Attributes-Language Attributes-Keyboard Attributes-Event AttributesSTEP 4:Ready to Publish Your Work?教学后记：课后有东方科技学院的同学们提出在授课的过程中对于每一个标记在讲解完成后，应该演示其功能而不是解释功能。 对此我有些不解
16、，html 标记在 4.01 标准中共有 96 个，在课件中我列出与 xhtml 兼容的 40 多个（其它标记已经被 w3c组织废除），对于其中常用的 10 多个标记演示了功能，剩余的解释了功能。 对于本科生来说应该有对文字抽象的理解能力和想象力，在课后应该自己上机完成其它标记的试验，而不能依靠教师在有限的课时中演示全部的内容。本科教育阶段主要是培养同学们的自学能力。对于这个问题我问过信息院的同学们，没有出Web 设计与编程导论（双语） 教案- 9 -现这种问题。这个事情引出的问题值得思考。我想提出这个问题比回答这个问题更有意义。05内 容：第 3 章 高级 XHTML（Chapter 3:A
17、dvanced XHTML）教学目的：要求同学们准确掌握 xhtml 的概念和特点、 DTD 文件声明的用法和 divcss布局模式的使用。培养同学们掌握网站开发初步运用 divcss 页面布局模式，在网页设计的过程中采用 web2.0 标准的制作方法。教学重点、难点：html 向 xhtml 的过渡方法是教学的重点，又是教学的难点。这是因为：Xhtml是 html 过渡到 xml 的产物， xhtml 是用 xml 对 html 进行规范化后的结果，这就注定了 html 与 xhtml 的关系。它 们之间有很多相同点和不同点， 对此不同点进行了 9 点总结，可将 html 向 xhtml 过
18、渡有效性是教学的另一个重点和难点。有效性是 DTD 被引入到 xhtml 文档中的原因。很多人对有效性和良构混为一谈， 实质上两者有这本质上的不同，良构是有效性的基础，有效性是良构的发展和升华。教学方法：讲授法结合谈话法、案例法参考书目与资料：网站设计的思考html 与 xhtml 权威指南网站重构WEB 标准与网站重构教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课Web 设计与编程导论（双语） 教案- 10 -（三）讲授新课第三章（共两课时）的课堂教学实施过程共分五步。STEP 1：What is XHTML?XHTML stands for Extensible Hyper
19、text Markup Language. XHTML is aimed to replace HTML. XHTML is almost identical to HTML 4.01. XHTML is a stricter and cleaner version of HTML.STEP 2：The problem with HTMLHTML started out as a way of describing the structure of documents, with tags to indicate headers, paragraphs, and the like.Becaus
20、e people wanted to control the appearance of documents, HTML acquired tags to control fonts, alignment, etc.The result is a markup language that does both, but isnt very good at either.STEP 3：From HTML to XHTML(1)XHTML elements must be properly nested(2)XHTML documents must be well-formed(3)Tag name
21、s must be in lowercase(4)All XHTML elements must be closed(5)Attribute names must also be in lower case(6)Attribute values must be quoted(7)Attribute minimization is forbidden(8)The id attribute replaces the name attribute(9)Mandatory XHTML ElementsSTEP 4：XHTML DTD (1)StrictUse for really clean mark
22、up, with no display information (no font, color, or size information).Use with CSS (Cascading Style Sheets) if you want to define how the document should look.(2)TransitionalUse with standard HTML and/or with CSS.Allows deprecated HTML elements.(3)FramesetUse if your document uses HTML frames.STEP 5
23、：Div + Css Layout教学后记：在有效性和良构的异同时举了一个例子帮助同学们理解，因为这个例子用Web 设计与编程导论（双语） 教案- 11 -中文表述更加容易让人理解，所以在课件中第一次出现了中文。这个例子的趣味性既活跃了课堂的气氛又增加了同学们的理解，达到了预定的教学目的。06内 容：第 7 章 颜色与图形（Chapter 7:Color and Graphics）教学目的：要求同学们准确掌握颜色的概念、RGB/CMYK/HSU 颜色模型、色轮和配色方法、网页中颜色定义的四种方法和网页设计中颜色的使用方法。培养同学们掌握网站或网页设计中对颜色的正确使用和在实际设计中解决网页配色
24、等难题。教学重点、难点：色轮和配色方法既是教学的重点，又是教学的难点。这是因为：色轮是网站配色的基础，通过色轮可以 产生多种配色原理，其中十种常见的配色原理是同学们必须掌握的，通过这些原理同学们建立专业的网站配色方案。216 种网页安全色是教学的另一个重点。在异构的电子设备、操作系统和浏览器中同样的颜色值可能会出现不同的颜色，造成色彩的偏差和失真。为了解决这个问题，引入了 216 安全色模型。216 安全色模型的特点和其使用方法要求同学们掌握。教学方法：讲授法结合谈话法、案例法参考书目与资料：优秀网页设计欣赏设计师谈网页色彩和风格Web Color Design设计师谈网页配色计算机图形学We
25、b 设计与编程导论（双语） 教案- 12 -计算机图形学原理及实践教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课（三）讲授新课第七章（共两课时）的课堂教学实施过程共分七步。STEP 1：What Is Color? Color is the byproduct of the spectrum of light, as it is reflected or absorbed, as received by the human eye and processed by the human brain. STEP 2：Color Models(1)Paint Colors Model
26、(2)Digital Color Models-RGB Color Models -CMYK Color Models-HSB Color ModelsSTEP 3：Color Wheels (1)12 Hue Wheel(2)10 Hue WheelSTEP 4：Basic Match Colors(1)achromatic (2)analogous(3)clash (4)complement(5)monochromatic (6)neutral(7)splitcomplement (8)primary(9)secondary (10)tertiarySTEP 5：Impression Sp
27、ace of Match ColorsSTEP 6：Safety color palette STEP 7：Classified Design by Color教学后记：在这一章的教学中明显感觉到了教材滞后性的问题，这本教材英文原版是2003 年 10 月出版的，2004 年 8 月高教出版社出版了其影印版，2005 年 1 月才出现中文翻译版。在 WEB 教材中此书可称得是佼佼者，与此形成鲜明对比的是国内很多的教材（包括最新出版的）在现在看来仍然停留在国外 2000 年的水平。教材滞后性在这本较好的教材中仍然明显，Web 技术发展如此迅速，以至很多国外Web 设计与编程导论（双语） 教案-
28、13 -最新的知识和技术都没出现在书中，有一些在业界中属于常用的方法（如课程提到的 216 安全色模型等）也没有出现。个人认为：计算机教师应该是现代知识的先驱者，需要不断努力跟踪和丰富这个范围广泛、变化迅速的 课程。在本次授课中得到了两种截然不同的反馈意见，一些同学们认为增加的内容更贴近使用、可用性更强，乐于接受；一些同学们认为 超出了教材的范围，增加了他们学习和考试的负担，不愿接受。这个问题的出现 很有研究的价值。07内 容：第 4 章 设计基础(Chapter 4:Design Basics)教学目的：要求同学们准确掌握网站开发流程，学会在设计中获得灵感的途径，培养同学们在网站开发的过程中
29、处理好用户、设计者和开发者三者之间的关系。要求同学们准确掌握 logo 概念和 logo 的分类和特点，培养同学们掌握 logo设计的方法和进行创新性思维的能力。教学重点、难点：灵感的来源既是教学的重点，又是教学的难点。 这是因为：网页设计是“ 灵感导向”的创造性 劳动， “灵感”的主要来源是我们对其他 优秀设计作品的“ 借鉴”，当然借鉴不等于抄袭。真正的借鉴应该是在解读和共鸣的基础上的心灵互通，以及由此产生新灵感或新创意的全过程。网站开发流程是教学的另一个重点和难点。对于网站开发流程多个脚色的交互，同学们比较难理解，往往简单地认为是网站设计 的步骤及为网站开发流程，而忽视用户的作用。教学方法
30、：讲授法结合谈话法、案例法参考书目与资料：优秀网页设计欣赏设计师谈网页色彩和风格Dont make me think教学过程：（一）提问复习，总结上节课所学的知识。Web 设计与编程导论（双语） 教案- 14 -（二）导出新课（三）讲授新课第四章（共两课时）的课堂教学实施过程共分五步。STEP 1：Like the traditional software development, the process of web site development can also be divided into different life cycle steps. This can help to f
31、ormat the team effectively, and the standards and procedures can be adopted to achieve maximum quality. This article explains the steps of development which can be possibly arranged as a process of web engineering. This is just a guideline to help you, to know, how a process can be done. The steps m
32、ay vary from application to application.（1）Analysis（2）Specification Building（3）Design and development（4）Content writing（5）Coding（6）Testing（7）Promotion（8）Maintenance and UpdatingSTEP 2：I put this photo on my PPT. The photo was actually one in a whole series of photos I shot for a client presentation,
33、 detailing the website design / development process in a manner that was easily understandable and also fun to look at.The steps includes:Step 1: DiscussionStep 2: BrainstormingStep 3: WireframeStep 4: Planning the ContentStep 5: Initial DesignStep 6: Client FeedbackStep 7: Design ReworkStep 8: Clie
34、nt ApprovalStep 9: Additional Page DesignStep 10: ConfirmationWeb 设计与编程导论（双语） 教案- 15 -Step 11: Build the HTMLStep 12: and the CSSStep 13: Present to ClientStep 14: TestStep 15: LaunchSTEP 4：Aggregate(1) Demand Analysis(2)Coding(3)TestSTEP 5：What is logo? A logotype, commonly known as a logo, is the
35、graphic element of a trademark or brand, which is set in a special typeface/font, or arranged in a particular, but legible, way. The shape, color, typeface, etc. should be distinctly different from others in a similar market.How to design logo?Step 1: The logo is a name in special typeface or font.
36、Step 2: The logo is an emblem. Step 3: The logo is an emblem and a name. 教学后记：在 logo 设计部分提出的一个标志设计思维扩展训练 起到了很好的作用，通过一个简单的数字与字母的作合（2mm）衍生出多个设计思路和发展方向，让同学们对 logo 设计有了更加全面的理解。个人认为 Logo 设计这个部分应该调整到页面布局中去更加合理，也就是调至第五章。Logo 是布局中 header 中的一个重要部分，从那里展开在知 识的连贯性上来讲同学们更加容易理解。教材是死的，教师应该是灵活的，对教材的内容和顺序不应该盲从，或 许作者
37、或编者有从某种角度出发的考虑，而教师应该根据自己对本学科知识的理解和对知识结构的掌握情况大胆进行调整。Web 设计与编程导论（双语） 教案- 16 -08内 容：第 5 章 信息体系结构、页面布局(Chapter 5:Information Architecture, Page Layout, and Typography)教学目的：要求同学们准确掌握网站页面布局的常用方法。要求同学们掌握在设计过程中一些值得借鉴的可用性和易用性设计理念，以及尽量避免的设计禁忌。培养同学们掌握和运用页面布局的方法、设计理念和设计禁忌的原理在网页设计的过程中解决实际问题。教学重点、难点：页面布局是教学的重点。对于
38、网站开发来说， 页面布局决定这网站可用性和易用性的优劣，网站的使用 对象是用户，在 设计时需要重点注意用户的使用习惯和进行换位思考。流动布局（fluidlayout ）是教学的 难点。采用 这种设计方法可以在用户缩放页面时， 让布局的文字以数据流的形式在页面进行自适应显示，当然这种方法优点很明显同样缺点也很明显，在教学过程中需要提出一种结合各种设计优点的布局方法。 教学方法：讲授法结合谈话法、案例法参考书目与资料：Dont make me thinkGUI 禁忌WEB 禁忌网页留白的艺术Web 设计与编程导论（双语） 教案- 17 -教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新
39、课（三）讲授新课第五章（共两课时）的课堂教学实施过程共分五步。STEP 1：Defining a Web Site The very first step in designing a Web site is to define it. And to properly define a site there are three questions that must be answered.(1)What is the purpose of the site? (2)Who will be visiting the site? (3)How will the site serve the cl
40、ient? STEP 2：Page Size and Layout Of the biggest challenges for Web builders is the variability of the screen sizes with which they must work. Deciding on how wide a Web page should be is based on several factors. One of the biggest decisions for anybody creating a Web page involved choosing which i
41、s the most appropriate size for the design. STEP 3：How to do web page layout?Part 1: Header - logo- SloganPart 2: Site Navigation Part 3: Content - Left Column- Right ColumnPart 4: FooterSTEP 4：layout model(1)Left T model(2)Right T model(3)三 model(4)二 model(5)口 model(6)POP modelSTEP 5：Website layout
42、 best practice and Web Bloopers教学后记：网页设计与其它艺术设计有着相通的地方。比如留白是页面布局设计中的难点，对于同学 们来说比较难 于理解。而在国画中，有一句描述谋篇布局的话比较Web 设计与编程导论（双语） 教案- 18 -经典，叫做“ 计白当黑”，所谓“疏可走马，密不透 风”，就是说空着的地方和着了墨的地方一样，都是整体的组成部分。引入大家都常 见的或是在共同的文化范畴内的例子比较容易让人接受。通识教育是西方教育的主要模式，美国这方面做得最好，而我们这一代的教师是按照苏联模式的专识教育培养起来的，在知识结构方面都有偏科的现象，文理难于互通， 对于当今的时代
43、对高校教师有着更高的要求，青年教师务必在知识层次进一步扩展。09内 容：第 6 章 控制页面样式：级联样式表（Chapter 6： Controlling Page Style: CSS）教学目的：要求同学们准确掌握 CSS 的概念、 CSS 的用途、CSS 的使用方法、常 见 CSS的属性和 CSS 中对属性单 位等内容。培养同学们掌握和运用 CSS 在网页设计的过程中对 web 页面外观进行控制的能力。教学重点、难点：选择器的优先级是教学的重点。CSS 的选择器有三种模式，在对同一个内容进行控制样式的时候根据优先级的不同会有不同的表现形式，同学们务必了解它们的用途。盒模型（Box Mode
44、l）是教学的难点。在区域 边界左右存在着多个属性对边界的样式进行控制，它们之间 的层次关系比较复杂，需要借助辅助图片来教学。 教学方法：讲授法结合谈话法、案例法参考书目与资料：CSS2 中文手册CSS 权 威指南CSS Hacks and FiltersCSS CookbookTeach Yourself HTML and CSS in 24 Hours教学过程：（一）提问复习，总结上节课所学的知识。Web 设计与编程导论（双语） 教案- 19 -（二）导出新课（三）讲授新课第六章（共两课时）的课堂教学实施过程共分七步。STEP 1：What is CSS?CSS stands for Cas
45、cading Style Sheets. Styles define how to display HTML elements. Styles are normally stored in Style Sheets. Styles were added to HTML 4.0 to solve a problem. STEP 2：CSS SyntaxThe CSS syntax is made up of three parts: a selector, a property and a value Styles define how to display HTML elementsSTEP
46、3：selector Syntaxtag Selectorclass Selector id SelectorSTEP 4：CSS Pseudo-class STEP 5：CSS Properties(1)CSS Background Properties(2)CSS Text Properties(3)CSS Font Properties (4)CSS Units(5)CSS Border Properties (Box Model)(5)CSS Margin Properties (Box Model)(5)CSS Padding Properties (Box Model)(5)CSS
47、 Positioning Properties (Box Model)(5)CSS Classification Properties STEP 6：How to Insert a Style Sheet(1)External Style Sheet(2)Internal Style Sheet(3)Inline StylesSTEP 7：The Web Site Was Validated教学后记：在介绍 CSS 的用途 时选用的案例引起来 轰动的效果，同学们们接触互联网多年但是从来没有想到过 CSS 在网站维护和改版过 程中有如此巨大作用， 这样的案例激发了同学们对 CSS 学习的热情。背
48、景的横纹、斜纹效果是课堂上临时想到提及的，引起了同学们兴趣， 对于Web 设计与编程导论（双语） 教案- 20 -计算机理论知识的讲解如果能适当加入实际应用中的一些案例和技巧，可以改变沉闷的教学气氛。以后的教学过程中，我可 结合 WEB 工程、项目的经验多加入一些这方面的知识。10内 容：第 8 章 表单与表单处理；第 9 章 客户端脚本：JavaScript（Chapter 8：Forms and Form ProcessingChapter 9：Client-Side Scripting: JavaScript）教学目的：要求同学们准确掌握 JavaScript 的语法结构、在网 页 文档中插入 JavaScript语句的方式表单提交的方法、输入、 输出语句及使用、JavaScript 变量、表达式、运算符和表单的处理方法。培养同学们掌握在网站开发中初步运用 JavaScript 的方法在网页设计的过程中解决网站动态交互的问题。教学重点、难点：输入、输出语句的使用是教学的重点
