下载文档原格式
《Dreamweaver CS3中文版网页制作基础》课程教学大纲一、课程性质和任务本课程是网页制作的一门实用课程，是网络类专业的一门实践性很强的技术基础课。
它的主要任务是培养学生规划、设计和制作网站的实际技能。
二、课程教学目标1、掌握Dreamweaver CS3界面的组成与使用方法2、掌握创建和发布站点的基本方法3、掌握首选参数及页面属性的设置方法4、掌握文本、图象、多媒体的主要属性与设置方法5、掌握制作超级链接的方法6、掌握表格的创建、编辑与属性设置方法7、掌握框架结构网页的制作方法8、掌握使用AP Div和CSS样式布局网页的方法9、掌握使用时间轴创建动画的方法10、掌握使用模板和库项目创建网页的方法11、掌握使用行为和Spry构件的方法12、掌握使用表单设计网页的方法13、掌握创建ASP应用程序的方法四、教学内容和基本要求第1章Dreamweaver CS3概况∙了解Dreamweaver CS3的基本概况。
∙熟悉Dreamweaver CS3的工作界面。
∙掌握常用工具栏和面板的基本使用方法。
∙了解Dreamweaver CS3的新特性。
第2章规划、创建和管理站点∙了解网站制作的一般流程。
∙了解网页布局的基本方式。
∙了解网页色彩搭配的基本原理。
∙掌握定义站点的基本方法。
∙掌握设置首选参数的基本方法。
∙掌握创建文件夹和文件的基本方法。
∙掌握编辑、复制和删除站点的基本方法。
∙掌握导出和导入站点的基本方法。
第3章创建和设置文档∙掌握创建、打开、保存和关闭文档的方法。
∙掌握添加文档内容的方法。
∙掌握设置文档格式的方法。
第4章使用图像和媒体∙了解网页中常用图像的基本格式。
∙掌握插入图像和设置图像属性的方法。
∙掌握插入图像占位符的方法。
∙掌握设置网页背景颜色和背景图像的方法。
∙掌握插入Flash动画、图像查看器、ActiveX视频的方法。
第5章设置超级链接∙了解超级链接的种类。
∙掌握设置文本和图像超级链接的方法。
《网页制作基础》教案第1章基础知识（5课时）教学目标1．掌握HTML的基本知识及作用；2．掌握安装和配置IIS的方法；3．熟悉Dreamweaver CS3的工作界面；4．掌握创建和设置Dreamweaver CS3站点的方法。
教学重点1．HTML语言2．熟悉Dreamweaver CS3的工作界面3．创建本地站点教学难点HTML的基本知识教学方法任务驱动法，以学生做为主，教师使用多媒体投影演示制作过程并讲解关键环节。
学生上机操作完成实例与实训。
任务1 认识网页教学目标：1．理解掌握网页的概念2．HTML的概念3．掌握HTML的基本知识及作用教学重点：1．网页的实质2．HTML的基础知识教学难点：HTML标记教学方法：任务驱动法，讲练结合法教具准备：多媒体教学教学内容：第1课时一、网页1、网页的概念：网页是网站的基本组成元素。
网页文件的扩展名通常为.htm或.html。
一般是由HTML 语言编写的文本文件。
2、网页的实质网页文档本身是一个文本文件，这些文本能够将文字及其他媒体文件有机的组织在一起，在浏览器中合适地显示。
二、HTML1、Html的中文含义Html是Hypertext Markup Language的缩写，其中文含义是“超文本标记语言”。
2、Html的概念它是使用特殊标记来描述文档结构和表现形式的一种语言，可以用来实现WEB页面。
3、网页文档的组成一个HTML文档通常分为文档头和文档主体两部分。
三、标记1、标记的格式在HTML中定义了许多标记，这些标记用来描述文档。
这些标记使用“<”和“>”括起来。
标记通常分为开始标记和结束标记。
其格式为：<标记名属性名=属性值>标记内容</标记名>注意：若一个标记有多个属性，属性和属性之间要用空格隔开。
示例：简单的网页文档<html><!—文档头部—><head><title>我的第一个网页</title></head><!—文档主体—><body bgcolor=blue text=red><h1>这是我的第一个网页<p>欢迎大家</body></html>第2课时2、常用标记<html>…</html> 标记一个HTML文档的开始和结束。
第 7章建立框架网页教学目标：1．能够理解框架的作用2．能够合理使用框架划分窗口布局3．能够明白框架和框架集的关系4．能在框架中创建编辑网页5．能在框架中打开已有的网页进行编辑6．能够正确保存框架和框架集7．能够理解和编辑框架的属性教学重点：绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性教学难点：绘制嵌套布局表格教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。
教学过程:一、导入新课网页布局技术还有一种，叫做框架。
然而框架本质上是一种浏览器窗口的分割技术。
而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。
利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。
按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。
二、讲授新课（一）、框架和框架集的概念框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。
不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。
每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。
（二）、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
1 DESIGNING WEBSITES WITH DREAMWEAVER CS3 20:311 Comparing Web Design Options2 Appreciating CSS Advantages3 Reviewing Old School Designs4 Creating Dynamic Sites5 Reviewing Site Di erences2 CREATING A NEW WEBSITE 43:441 Creating a New Site2 Creating a New Page3 Adding Images with Alternate Text4 Inserting & Formatting Text5 Aligning Images with the Property Inspector6 Using the Page Properties Dialog Box7 Linking to Pages in a Site8 Creating an Email Link9 Linking to Other Websites10 Testing & Targeting Links11 Organizing Files & Folders3 CUSTOMIZING THE INTERFACE 24:331 Introducing the Workspace2 Opening an Existing Site3 Working in Code, Design & Split Views4 Customizing the Insert Bar5 Use the Properties Inspector & the Tag Selector6 Reviewing Menu Options & Preferences7 Comparing the Macintosh® & PC Interfaces8 Previewing in Browsers & Device Central4 CREATING & INSERTING IMAGES 22:301 Optimizing Images for the Web2 Saving GIFs & PNGs in Photoshop®3 Inserting GIFs in Dreamweaver4 Adjusting Transparency Settings5 Saving JPGs for the Web6 Edit Images in Dreamweaver & Photoshop7 Changing Editor Preferences5 CREATING CSS LAYOUTS 1:201 Getting Started with Styles2 Creating Tag & Class Styles3 Creating Styles to Format Images4 Reviewing CSS Code5 Previewing Page Styles6 Understanding Page Properties7 Creating Divs with ID Styles8 Adding Images & Lists to Divs9 Creating a Series of Divs10 Aligning Divs Side by Side11 Using the Clear Option in CSS12 Adding Borders with CSS13 Creating an Image Border14 Using Margins for Positioning15 Creating Navigation Links16 Styling a List for Navigation17 Creating a Rollover E ect in CSS18 Duplicating Existing Styles19 Changing Page Properties Styles20 Reviewing Style Selectors6 DESIGNING WITH CSS 57:061 Understanding the Box Model2 Comparing Margins & Padding3 Viewing CSS in Various Browsers4 Creating a Page from a Template5 Using Paste Special6 Using Styles to Align Images7 Creating a Two Column Layout8 Calculating CSS Spacing9 Styling Headlines10 Understanding Font Sizes11 Using External Style Sheets12 Viewing Styles13 Reviewing CSS Options7 CREATING LAYOUTS WITH ABSOLUTE POSITIONING 53:431 Explaining Absolute Positioning2 Comparing Absolute & Centered Positioning3 Warnings about Using AP Divs4 Using a Tracing Image5 Creating a Layout with AP Divs6 Naming AP Divs7 Nesting AP Divs8 Aligning AP Divs9 Inserting Images into Divs10 Calculating Page Layouts11 Re ning an AP Layout12 Setting the Z-Index8 DESIGNING ACCESSIBLE TABLES 31:521 Understanding Tables & Accessibility2 Using Tables for Tabular Data3 Styling a Table4 Editing Table Layouts5 Adding Style to a Table Using CSS9 CREATING WEBSITES WITH FRAMES 20:301 Introducing Frames2 Creating a Frameset3 Opening Pages into Frames4 Controlling Scrollbars & Borders5 Targeting Links in Frames6 CreditsPart 1 –Part 2 –1 USING BEHAVIORS TO ADD INTERACTIVITY 43:051 Viewing Behaviors in a Browser2 Introducing the Behaviors Panel3 Inserting Rollover Images4 Using the Swap Image Behavior5 Altering Swap Image Options6 Using the Show-Hide Elements Behavior7 Using the Open Browser Behavior8 Downloading More Behaviors2 SURVIVAL HTML & CSS 23:471 Writing HTML: The Fundamentals2 Understanding Doctypes3 Recognizing HTML Tags4 Understanding Links5 Working in Split View 3 USING & CREATING TEMPLATES 30:451 Using CSS Layouts2 Editing CSS Layouts3 Altering CSS Styles4 Creating a Dynamic Web Template5 Editing Dynamic Web Templates4 CREATING WEB FORMS 25:111 Creating & Inserting a Form2 Inserting Text Fields3 Adding Drop-Down Lists4 Inserting Radio Buttons5 Inserting Check Boxes & a Submit Button6 Connecting a Form to a Script5 ADDING FLASH® TO YOUR PAGES 25:371 Working with Flash2 Inserting Flash Video3 Creating Flash Buttons & Text4 Troubleshooting the Flash Options6 TESTING & PUBLISHING A WEBSITE 18:351 Using the Check Page Feature2 Testing & Fixing Links3 Running Site Reports4 Con guring FTP Settings5 Publishing a Site to a Server7 DREAMWEAVER TIPS & TRICKS 07:291 Registering a Domain Name2 Finding Fonts & Photos3 Learning More Online4 Final Comments & Credits | 800-980-1820。
《网页设计Dreamweaver CS3》教案二、网页的基本构成要素《网页设计Dreamweaver CS3》教案成修改。
步骤三：创建文件夹。
在站点的根本件夹中可以创建若干子文件夹。
我们要建设一个完整、成功的网站，其中必然要包含很多内容，如：网页文件、图片文件、声音文件、动画文件等等。
为了方便开发者分类管理、维护这些文件，使得站点中各类文件的存放有条理性、结构性，可以通过在站点根文件夹中建立若干子文件夹的形式，对各种类型的文件分类保存管理，如：建立images文件夹来存放图片文件；建立music音文件等等。
当然也可以按照其他方法分类进行保存管理步骤四：创建网页文件。
在站点的根本件夹中创建一个空白页面并命名，本例中重新将网页文件命名为index.html，该名称在站点中一般作为首页的名称。
当然，除了可以直接在站点根文件下创建网页外，还可以在根文件夹中的子文件夹里创建网页。
【知识链接】Dreamweaver简介三、创建站点的必要性Dreamweaver中的站点可组织与网站相关的所有文档，跟踪和维护链接，管理文件，共享文件以及将站点文件传输到Web Dreamweaver 站点根据站点中文件的存放地点，可以分为本地站点和远程站点，本教材中所有项目中所建立站点均为本地站点。
四、首页和网站结构通常所说的网站是由一个或多个网页组成的，而进入网站时首先打开的网页称为首页或主页。
按照行业习惯命名为“index.htm”(“index.html default.htm”(“default.html”)。
本书中站点首页名称一律采用了为。
网站结构图：主页页《网页设计Dreamweaver CS3》教案【项目目标】•能新建并保存网页文件•能掌握普通文本的输入方法、复制、粘贴。
•能设置页面背景•插入图像，图像对齐方式设置。
步骤五：插入特殊字符和日期《网页设计Dreamweaver CS3》教案【项目目标】•能正确插入普通图像•能合理设置图像属性制作要点提示1.创建一个本地站点并且新建一个子文件夹images来管理素材文件2.新建一个网页，保存网页文件，将其命名为“index.html”3.插入一个3行3列的表格4.在每个单元格中分别插入一幅图像5.保存文件，预览最终效果《网页设计Dreamweaver CS3》教案【项目目标】•能正确插入Flash动画•能掌握Flash对象的插入方法•能学会视频的插入•能正确添加背景音乐【项目分析】具体工作任务：1.一个网页，主题为“与青春有约”2.置页面背景，使效果更加完美3.入文字，进行适当的格式化设置4.入Flash动画，设置对齐方式，放置一个合适位置5.Flash文本，内容为版权信息，设置动态变换方式6.入Flash按钮，设置链接7.置背景音乐8.入视频操作方法：选中要编辑的插件，然后编辑、修改插件属性面板的参数。
