Web设计与编程导论(双语)教案.doc

Web设计与编程导论（双语） 教案单位：信息学院电子商务系编写：聂笑一时间：2006年课时：24节01内 容：绪论（Introduction）教学目的：通过web发展的历史，让同学们准确了解web的过去、现在和未来；对比web1.0与web2.0， 介绍web2.0衍生的当今流行的技术种类，让同学们从宏观上掌握web的技术分类和了解当前技术潮流的同时，激发对课程的兴趣。教学重点、难点：Web技术的核心是教学的重点，又是教学的难点。这是因为：Web技术衍生出来的门类和方向多达上百种，表象纷繁复杂，本质却是web的标准。基于标准的三大部分结构、表现和行为是今后学习的重点。让同学们接受双语教学另一个难点。计算机的技术、标准和知识基本来自与欧美，专有名词和计算机代码几乎都是用英语进行书写，作为教师应该引导逐步接受和习惯双语教学。教学方法：讲授法结合谈话法、案例法参考书目与资料：什么是Web 2.0 Tim OReilly Web2.0与社区 Web开发技术史话 Web应用的发展简史 Web标准与网站重构 xml基础教学过程：（一）自我介绍和教材介绍（二）推荐参考书目（三）讲授新课绪论（共两课时）的课堂教学实施过程共分五步。STEP 1：Internet 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） 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先驱者的事迹给同学一个深刻鲜明的印象，让同学们感悟到了坚持不懈的重要性；通过个人的亲生经历和英语趣事激发了同学们对英语学习热情，达到了同学们对进行双语教学产生认同感的目的。一位教育学家曾经说过“教师在课堂上传授知识的同时，还要通过个人的人格魅力影响同学们世界观和价值观。”在这堂课后对这句话有了更深刻的认识和理解。不足的是在web历史介绍时有点拖沓，在以后的课中应更注意时间和节奏的控制。02内 容：第1章 Web基础与概述（Chapter 1：Web Basics and Overview）教学目的：要求同学们掌握网页的概念、网页的样式、网页的组成元素；网页的种类与用途；与网页相关的概念介绍，如域名、URL（统一资源定位器）、超链接、书签、表单、数据库、动态网页、服务器/客户端（Server/Client）运行模式、服务器与浏览器、网站发布等等。教学重点、难点：Web、WWW和Internet是教学的难点。这是因为：人们常常把三者混为一谈，然而他们表达的并非相同的含义。必须从三者英文的定义上进行分析得出其侧重和区别。URL是教学的重点。URL 全称是Uniform Resource Locator，格式构成是同学们需要重点掌握的，这是网页交互性基础；URL惟一性是此知识点中的一个难点，同学们比较难理解，须从其组成结构分析。教学方法：讲授法结合谈话法、案例法参考书目与资料：计算机网络 第四版 Apache经典实例 WEB设计技术手册（第三版，影印版）教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课（三）讲授新课第一章（共两课时）的课堂教学实施过程共分三步。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，WWW 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 accessed 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教学后记： 解释计算机端口时的类比举例（餐卡与银行的关系；邮件与寝室门牌的关系）较为成功。 今天上课有两位督学听课。课后对我进行了指导。除肯定我上课的逻辑感较强等优点外也提出了一点意见适当减慢语速。以后的上课要注意这个问题，多向老教师学习。03内 容：第2章 创建Web页面：XHTML（Chapter 2：Creating Web Pages: XHTML）教学目的：要求同学们准确掌握HTML的特点、HTML的工作原理、HTML标记、HEAD标记、BODY标记、链接标记和其他常用标记。培养同学们掌握网站开发初步运用表格布局模式，在网页设计的过程中采用web1.0的制作方法。教学重点、难点：Html的基本结构是教学的重点，HTML标记、HEAD标记和BODY标记构成了网页的主体架构，是网页的基础。链接标记是教学的难点。链接标记构成了网页超链接的主体，是WEB拓扑结构实现的基础。教学方法：讲授法结合谈话法、案例法参考书目与资料：html与xhtml权威指南 Teach Yourself HTML and CSS in 24 Hours 第七版 HTML和CSS网页标准指南教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课（三）讲授新课第二章（共四课时，本次为前两课时）的课堂教学实施过程共分八步。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 comment 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 than sign () that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).STEP 8：HTML LinksHTML uses a hyperlink to link to another document on the Web.教学后记：04内 容：第2章 创建Web页面：XHTML（Chapter 2：Creating Web Pages: XHTML）教学目的：要求同学们准确掌握图像标记、表格标记、框架标记、列表标记、表单和html标准属性。培养同学们运用html知识在网页设计的过程中解决实际问题。教学重点、难点：Html的表格标记是教学的重点，表格标记在web1.0时代是网页设计布局中的核心，虽然web2.0的时代已经来临，但中国仍然落后欧美23年的时间，国内99的网站依然是采用表格布局的模式，因此有必要掌握表格标记的使用和表格拆分属性的使用。表单标记和输入标记是教学的难点。表单标记构成了网页人机交互的主体，是网页交互性和动态性的体现形式；输入标记type属性的多样性构成不同的输入方法，name属性是表单正确提交的关键。格式良好（有些书翻译成：良构）的理解是教学的又一个难点。IE浏览器和NN浏览器在2000年的浏览器大战后遗留下的产物是书写不规范的代码也能在浏览器中正常显示，这往往会让同学们对良构的理解产生错觉。计算机界有这样一句话，“Garbage in， garbage out”，就是其中的道理教学方法：讲授法结合谈话法、案例法参考书目与资料：HTML与XHTML权威指南 Teach Yourself HTML and CSS in 24 Hours 第七版 HTML和CSS网页标准指南教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课（三）讲授新课第二章（共四课时，本次为后两课时）的课堂教学实施过程共分四步。STEP 1: HTML Structure (2)HTML FramesHTML TablesHTML Lists-Unordered Lists-Ordered ListsHTML Forms and InputHTML ImagesHTML ScriptsSTEP 2:How to Handle Older BrowsersA browser that does not recognize the 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 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?教学后记：课后有东方科技学院的同学们提出在授课的过程中对于每一个标记在讲解完成后，应该演示其功能而不是解释功能。对此我有些不解，html标记在4.01标准中共有96个，在课件中我列出与xhtml兼容的40多个（其它标记已经被w3c组织废除），对于其中常用的10多个标记演示了功能，剩余的解释了功能。对于本科生来说应该有对文字抽象的理解能力和想象力，在课后应该自己上机完成其它标记的试验，而不能依靠教师在有限的课时中演示全部的内容。本科教育阶段主要是培养同学们的自学能力。对于这个问题我问过信息院的同学们，没有出现这种问题。这个事情引出的问题值得思考。我想提出这个问题比回答这个问题更有意义。05内 容：第3章 高级XHTML（Chapter 3:Advanced XHTML）教学目的：要求同学们准确掌握xhtml的概念和特点、DTD文件声明的用法和divcss布局模式的使用。培养同学们掌握网站开发初步运用divcss页面布局模式，在网页设计的过程中采用web2.0标准的制作方法。教学重点、难点：html向xhtml的过渡方法是教学的重点，又是教学的难点。这是因为：Xhtml是html过渡到xml的产物，xhtml是用xml对html进行规范化后的结果，这就注定了html与xhtml的关系。它们之间有很多相同点和不同点，对此不同点进行了9点总结，可将html向xhtml过渡有效性是教学的另一个重点和难点。有效性是DTD被引入到xhtml文档中的原因。很多人对有效性和良构混为一谈，实质上两者有这本质上的不同，良构是有效性的基础，有效性是良构的发展和升华。教学方法：讲授法结合谈话法、案例法参考书目与资料：网站设计的思考 html与xhtml权威指南 网站重构 WEB标准与网站重构教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课（三）讲授新课第三章（共两课时）的课堂教学实施过程共分五步。STEP 1：What is XHTML?XHTML stands for Extensible Hypertext 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.Because 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 names 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 markup, 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：Div + Css Layout教学后记： 在有效性和良构的异同时举了一个例子帮助同学们理解，因为这个例子用中文表述更加容易让人理解，所以在课件中第一次出现了中文。这个例子的趣味性既活跃了课堂的气氛又增加了同学们的理解，达到了预定的教学目的。06内 容：第7章 颜色与图形（Chapter 7:Color and Graphics）教学目的：要求同学们准确掌握颜色的概念、RGB/CMYK/HSU颜色模型、色轮和配色方法、网页中颜色定义的四种方法和网页设计中颜色的使用方法。培养同学们掌握网站或网页设计中对颜色的正确使用和在实际设计中解决网页配色等难题。教学重点、难点：色轮和配色方法既是教学的重点，又是教学的难点。这是因为：色轮是网站配色的基础，通过色轮可以产生多种配色原理，其中十种常见的配色原理是同学们必须掌握的，通过这些原理同学们建立专业的网站配色方案。216种网页安全色是教学的另一个重点。在异构的电子设备、操作系统和浏览器中同样的颜色值可能会出现不同的颜色，造成色彩的偏差和失真。为了解决这个问题，引入了216安全色模型。216安全色模型的特点和其使用方法要求同学们掌握。教学方法：讲授法结合谈话法、案例法参考书目与资料：优秀网页设计欣赏 设计师谈网页色彩和风格 Web Color Design设计师谈网页配色 计算机图形学 计算机图形学原理及实践教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课（三）讲授新课第七章（共两课时）的课堂教学实施过程共分七步。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(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 Space of Match ColorsSTEP 6：Safety color palette STEP 7：Classified Design by Color教学后记：在这一章的教学中明显感觉到了教材滞后性的问题，这本教材英文原版是2003年10月出版的，2004年8月高教出版社出版了其影印版，2005年1月才出现中文翻译版。在WEB教材中此书可称得是佼佼者，与此形成鲜明对比的是国内很多的教材（包括最新出版的）在现在看来仍然停留在国外2000年的水平。教材滞后性在这本较好的教材中仍然明显，Web技术发展如此迅速，以至很多国外最新的知识和技术都没出现在书中，有一些在业界中属于常用的方法（如课程提到的216安全色模型等）也没有出现。个人认为：计算机教师应该是现代知识的先驱者，需要不断努力跟踪和丰富这个范围广泛、变化迅速的课程。在本次授课中得到了两种截然不同的反馈意见，一些同学们认为增加的内容更贴近使用、可用性更强，乐于接受；一些同学们认为超出了教材的范围，增加了他们学习和考试的负担，不愿接受。这个问题的出现很有研究的价值。07内 容：第4章 设计基础(Chapter 4:Design Basics)教学目的：要求同学们准确掌握网站开发流程，学会在设计中获得灵感的途径，培养同学们在网站开发的过程中处理好用户、设计者和开发者三者之间的关系。要求同学们准确掌握logo概念和logo的分类和特点，培养同学们掌握logo设计的方法和进行创新性思维的能力。教学重点、难点：灵感的来源既是教学的重点，又是教学的难点。这是因为：网页设计是“灵感导向”的创造性劳动，“灵感”的主要来源是我们对其他优秀设计作品的“借鉴”，当然借鉴不等于抄袭。真正的借鉴应该是在解读和共鸣的基础上的心灵互通，以及由此产生新灵感或新创意的全过程。网站开发流程是教学的另一个重点和难点。对于网站开发流程多个脚色的交互，同学们比较难理解，往往简单地认为是网站设计的步骤及为网站开发流程，而忽视用户的作用。教学方法：讲授法结合谈话法、案例法参考书目与资料：优秀网页设计欣赏 设计师谈网页色彩和风格 Dont make me think教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课（三）讲授新课第四章（共两课时）的课堂教学实施过程共分五步。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 format 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 may 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, 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: Client ApprovalStep 9: Additional Page DesignStep 10: ConfirmationStep 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 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. Step 2: The logo is an emblem. Step 3: The logo is an emblem and a name. 教学后记：在logo设计部分提出的一个标志设计思维扩展训练起到了很好的作用，通过一个简单的数字与字母的作合（2mm）衍生出多个设计思路和发展方向，让同学们对logo设计有了更加全面的理解。个人认为Logo设计这个部分应该调整到页面布局中去更加合理，也就是调至第五章。Logo是布局中header中的一个重要部分，从那里展开在知识的连贯性上来讲同学们更加容易理解。教材是死的，教师应该是灵活的，对教材的内容和顺序不应该盲从，或许作者或编者有从某种角度出发的考虑，而教师应该根据自己对本学科知识的理解和对知识结构的掌握情况大胆进行调整。08内 容：第5章 信息体系结构、页面布局(Chapter 5:Information Architecture, Page Layout, and Typography)教学目的：要求同学们准确掌握网站页面布局的常用方法。要求同学们掌握在设计过程中一些值得借鉴的可用性和易用性设计理念，以及尽量避免的设计禁忌。培养同学们掌握和运用页面布局的方法、设计理念和设计禁忌的原理在网页设计的过程中解决实际问题。教学重点、难点：页面布局是教学的重点。对于网站开发来说，页面布局决定这网站可用性和易用性的优劣，网站的使用对象是用户，在设计时需要重点注意用户的使用习惯和进行换位思考。流动布局（fluidlayout）是教学的难点。采用这种设计方法可以在用户缩放页面时，让布局的文字以数据流的形式在页面进行自适应显示，当然这种方法优点很明显同样缺点也很明显，在教学过程中需要提出一种结合各种设计优点的布局方法。 教学方法：讲授法结合谈话法、案例法参考书目与资料：Dont make me think GUI禁忌 WEB禁忌 网页留白的艺术教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课（三）讲授新课第五章（共两课时）的课堂教学实施过程共分五步。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 client? 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 is 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 best practice and Web Bloopers教学后记：网页设计与其它艺术设计有着相通的地方。比如留白是页面布局设计中的难点，对于同学们来说比较难于理解。而在国画中，有一句描述谋篇布局的话比较经典，叫做“计白当黑”，所谓“疏可走马，密不透风”，就是说空着的地方和着了墨的地方一样，都是整体的组成部分。引入大家都常见的或是在共同的文化范畴内的例子比较容易让人接受。通识教育是西方教育的主要模式，美国这方面做得最好，而我们这一代的教师是按照苏联模式的专识教育培养起来的，在知识结构方面都有偏科的现象，文理难于互通，对于当今的时代对高校教师有着更高的要求，青年教师务必在知识层次进一步扩展。09内 容：第6章 控制页面样式：级联样式表（Chapter 6： Controlling Page Style: CSS）教学目的：要求同学们准确掌握CSS的概念、CSS的用途、CSS的使用方法、常见CSS的属性和CSS中对属性单位等内容。培养同学们掌握和运用CSS在网页设计的过程中对web页面外观进行控制的能力。教学重点、难点：选择器的优先级是教学的重点。CSS的选择器有三种模式，在对同一个内容进行控制样式的时候根据优先级的不同会有不同的表现形式，同学们务必了解它们的用途。盒模型（Box Model）是教学的难点。在区域边界左右存在着多个属性对边界的样式进行控制，它们之间的层次关系比较复杂，需要借助辅助图片来教学。 教学方法：讲授法结合谈话法、案例法参考书目与资料：CSS2中文手册 CSS权威指南 CSS Hacks and Filters CSS Cookbook Teach Yourself HTML and CSS in 24 Hours教学过程：（一）提问复习，总结上节课所学的知识。（二）导出新课（三）讲授新课第六章（共两课时）的课堂教学实施过程共分七步。STEP 1：What is CSS?CSS stands for Cascading 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 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 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学习的热情。背景的横纹、斜纹效果是课堂上临时想到提及的，引起了同学们兴趣，对于计算机理论知识的讲解如果能适当加入实际应用中的一些案例和技巧，可以改变沉闷的教学气氛。以后的教学过程中，我可结合WEB工程、项目的经验多加入一些这方面的知识。10内 容：第8章 表单与表单处理；第9章 客户端脚本：JavaScript（Chapter 8：Forms and Form Processing Chapter 9：Client-Side Scripting: JavaScript）教学目的：要求同学们准确掌握JavaScript的语法结构、在网页文档中插入JavaScript语句的方式表单提交的方法、输入、输出语句及使用、JavaScript变量、表达式、运算符和表单的处理方法。培养同学们掌握在网站开发中初步运用JavaScript的方法在网页设计的过程中解决网站动态交互的问题。教学重点、难点：输入、输出语句的使用是教学的重点，又是教学的难点。熟练使用窗口方法window.alert( )、prompt（），文档方法document.write（）， 使用JavaScript的变量及运算符、表达式设计简单的JavaScript网页是输入、输出语句最基本的使用形式。教学方法：讲授法结合谈话法、案例法参考书目与资料：JScript中文帮助 html与xhtml权威指南 The Real Business of Web Design教学过程：（一）提问复习，总结上节课所学的知识情况。（二）讲授新课第八、九章（共两课时）的课堂教学实施过程共分五步。STEP 1: What is JavaScript?JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more.JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, Opera.STEP 2: JavaScript How To .The HTML tag is used