搜索
网页设计DreamweaverCS3基础篇第一章网页制作基础知识和Dreamweaver软件基础（制作“我的第一张网页”）概要：MacromediaDreamweaverCS3提供了强大的网页制作功能，其可视化的操作界面更接近广大的网页制作人员。所见即所得的界面可以使那些只要掌握了文档编辑能力的人就可完成一张网页的制作。本章主要通过三个活动的开展，让学生了解DreamweaverCS3网页浏览的基本原理和网页制作技术的发展，知道目前网页制作的几种工具。了解HTML语法的基本构成及几种常用的标签。通过具体的网页实例制作，掌握起始页的设置以及基本的界面操作。了解网页浏览的基本原理和当前站点网页制作情况。了解网页制作技术的发展及目前网页制作的几种工具。教学目标：知识要点：活动一：初识网页客户机－服务器体系、静态网页和动态网页、浏览器的种类、网页制作技术、常用的网页制作工具。准备知识：（1）网页浏览的基本原理活动一：初识网页客户/服务器模式客户/服务器模式准备知识：（2）静态网页和动态网页活动一：初识网页静态网页动态网页准备知识：（3）认识不同的浏览器活动一：初识网页IE浏览器腾讯浏览器（4）网页制作技术的发展（5）网页制作工具介绍活动一：初识网页准备知识：活动一：初识网页一、注册一个邮箱。二、观察网页元素的类型。三、使用Dreamweaver打开网页，观察软件的特点。活动引导：活动小结：网页中使用的最多的元素是文字和图片。图片的一般格式为jpg或gif文件。flash的使用能使网页增加动感。动态网页能对用户提交的信息作出及时的反馈，使网页更具人性化。Dreamweave有着可视化的操作界面，特别在与flash和fireworks的相互配合，成为网页创意组件中最重要的一员。活动一：初识网页活动二：认识HTML了解HTML语法的基本构成，并能认识几种常用的标签，能简单的应用这些标签。教学目标：知识要点：html、head、title、body、p、font、img、a等标签。准备知识：（1）HTML标签：标识HTML文件的开始和结束（2）head标签：标题信息，包含了许多网页的属性信息（3）title标签：标识当前网页的标题（4）body标签：主体标签，body标签和/body标签之间包括文档中所有文本、图像等网页元素的内容。（5）p标签：段落标签，p标签和/p标签之间是一个段落的内容（6）font标签：字体标签，用来设置文字的格式（7）img标签：图像标签，设置网页中图像的来源、尺寸、对齐方式等属性（8）a标签：设置超级连接目标和名字等活动二：认识HTMLHTML是HyperTextMarkupLanguage的简称一、网页的属性（背景与标题）二、网页中的文字三、网页中的图片四、网页中的链接活动二：认识HTML活动引导：通过直接修改网页中的代码可以很快地改变网页中各个网页元素的属性，但要记住如此众多的标签和相关属性的代码，却不是一件容易的事情。那么让我们来通过对Dreamweaver的学习，利用它所见即所得的优势，来轻轻松松地做自己的网页吧！活动二：认识HTML活动小结熟悉基本的界面操作，并对网页的制作有一个初步的认识。活动三：制作“我的第一张网页”教学目标：知识要点：界面基本组成、基本操作。主程序界面大致分为以下几个区域：菜单栏插入栏文档工具栏编辑区状态栏属性面板面板组活动三：制作“我的第一张网页”准备知识：DreamweaverSC3主程序界面活动引导：活动三：制作“我的第一张网页”一、建立站点二、制作网页，将各种网页元素放入到网页中去。活动三：制作“我的第一张网页”制作完成后的效果图制作网页的基本流程可以分为：建立站点-创建网页-插入网页元素-编辑网页元素-保存网页-预览效果。活动三：制作“我的第一张网页”活动小结：第一章实验：制作“我的个人介绍”实验要求：一、建立站点目录mysitelx，并将站点指定至站点目录。二、制作网页“我的个人介绍”，在网页中加入背景图片、文字、水平线、图片和超级链接。三、通过记事本打开网页，修改现有的HTML代码，比较前后效果。注意：本实验提供的样例仅供参考，也许你能设计出别具一格的网页。修改后效果第一章实验：制作“我的个人介绍”第二章站点的建立与管理（制作“个人博客”）概要：建立站点是制作网页的第一步，然而要建立一个较好的站点并不是一件容易的事，需要前期的素材准备和站点结构的规划。要学会制作网页，掌握站点建立和编辑的方法尤为重要，所有的网页都是基于站点建立的。这些知识的掌握，对今后的网页制作将极为关键。本章主要通过四个活动的开展，通过为“我的个人网站”收集相关资料，掌握站点素材及其制作工具的有关知识。为“我的个人网站”规划站点目录，并比较大型站点的站点结构与小型站点的站点结构区别，从而了解站点的设计流程。使用“高级”标签为“我的个人网站”建立站点，并设置相关参数。通过网站地图，实现对“我的个人网站”中的网站文件进行管理、检查链接等。活动一：为我的个人网站作准备了解一般站点的设计流程，为我的个人网站收集相关资料，并掌握站点素材及其制作工具的有关知识。教学目标：知识要点：站点的设计流程、素材文件类型、素材制作工具。准备知识：（1）站点设计流程创建站点大致包括以下四步曲：第一步：对要创建的站点进行规划，确立建站的目的、规模、面向的群体、服务器端的配置等各项情况。第二步：建立一个完整的站点目录结构。第三步：使用网页制作软件及辅助软件，如flash、fireworks等完成网站的制作。第四步：对网站进行测试，并发布。活动一：为我的个人网站作准备准备知识：（2）站点素材文件类型简介①文字资料:目前常用的、能够合并到网页文本内容的常见文档类型有ASCII文本文件、RTF文件和MSOffice文档②图片资料:目前网页中用到比较多的图片类型有两种，主要是JPEG和GIF.③动画资料:目前使用较多的是用Flash制作的swf格式的动画，此外，网页中用得比较多的另一种动画形式是Shockwave④音频资料:目前常见的有.midi或.mid（乐器数字接口）格式，由于其文件量小，声音质量好，所以被广泛使用。另一种使用非常广泛的音频文件类型是.mp3,ra、.ram、.rpm或RealAudio格式也具有非常高的压缩程度，文件大小要小于MP3，它同样可以进行“流式处理”.⑤视频资料:网页上视频表现的形式一般分为两种，一种是用户下载链接的视频文件，然后在本地机上看。另一种是可以在浏览器中播放的视频文件，称为内嵌视频。内嵌视频格式主要有MPEG、QuickTime、RealVideo、ActiveMovie等。⑥其他资料:在Dreamweaver中还能插入ActiveX控件和Javaapplet。ActiveX控件（以前称作OLE控件）是可以充当浏览器插件的可重复使用的组件，有些像微型的应用程序。活动一：为我的个人网站作准备准备知识：（3）网页素材制作工具之一①Photoshop活动一：为我的个人网站作准备Photoshop操作界面活动一：为我的个人网站作准备准备知识：（3）网页素材制作工具之二②FireworksFireworks操作界面活动一：为我的个人网站作准备准备知识：（3）网页素材制作工具之三③FlashFlash操作界面活动一：为我的个人网站作准备准备知识：（3）网页素材制作工具之四④CorelDRAWCorelDRAW操作界面活动引导：一、收集文字资料二、收集图片资料三、收集背景音乐活动一：为我的个人网站作准备活动小结：这个活动是为后面制作个人站点做准备，素材的内容可以自己决定。如果我们已经学过了flash，那么我们还可以为网页中添加自己制作的flash动画。在以上的活动中我们主要收集了文字与图片，甚至是音乐文件，这些素材将构成我们个人网站的内容。活动一：为我的个人网站作准备比较大型站点的站点结构与小型站点的站点结构区别，为“我的个人网站”规划站点目录。活动二：规划自己的网站教学目标：知识要点：站点结构规划、大型站点的站点结构、小型站点的站点结构。准备知识：（1）规划站点结构在组织站点结构时，需要注意以下三点：其一、将站点内容分门别类，即将相关页面放置在同一文件夹内。其二、单独放置图像、声音或其他多媒体文件的位置。即将所有图图像、声音或其他多媒体文件放在独立的文件夹内。其三、对本地站点和远程站点使用相同的结构，即在创建并测试完站点后，将所有文件都上传到远程站点，使本地结构完整地复制到远程站点上。活动二：规划自己的网站（2）常见的站点结构站点结构一：学校网站活动二：规划自己的网站站点结构示意图2站点结构示意图1活动二：规划自己的网站活动引导：在下面的活动中我们来为自己的站点建立站点目录，并将上一次活动中所收集的资料放入相对应的文件目录中。（1）资源管理器，在D盘建立站点目图2.7站点目录结构（2）将收集的素材复制到相关文件夹中，图片文件放置到images内，文字、音乐、flash文件放置到other文件夹内。目录结构图活动小结:通过本活动我们重点要学会如何规划自己的站点结构，这可是网站制作很关键的一步！如果站点目录规划不合理的话，那么在以后的具体的网页制作中以及维护时，就会遇到很大的问题。此外，特别要注意的是目录中的所有文件夹不要有中文名字，不然会有意想不到的后果活动二：规划自己的网站掌握站点的建立及站点参数的设置方法。活动三：打造自己的个性化站点教学目标：知识要点：“高级”标签、建立站点。准备知识：（1）站点管理的概念（2）设置站点参数活动三：打造自己的个性化站点“编辑”|“首选参数”命令“首选参数”对话框活动三：打造自己的个性化站点活动引导：一、建立站点二、制作首页三、制作分页四、完成链接活动三：打造自己的个性化站点网页效果活动小结：在这次活动中我们完完整整的制作了一个个人的网站，是不是比想象中的容易啊！在本次制作中使用了“高级”选项卡来建立网站，这比使用向导建立更快捷。在制作中，网页间的链接是很重要的，作为一个设计者值得注意的是，你的设计要让使用者能方便的在你的站点中的任何网页之中进行跳转。活动三：打造自己的个性化站点掌握编辑站点的方法。活动四：编辑我的站点教学目标：网站地图，管理网站文件、链接检查、添加和删除站点。知识要点：准备知识：（1）站点管理功能（2）站点视觉地图（3）添加和删除站点活动四：编辑我的站点“管理站点”对话框视图工具栏一、导入站点二、使用站点视觉地图管理站点文件三、删除站点活动四：编辑我的站点活动引导：活动小结:在本活动中我们使用了站点视觉地图来管理活动三中所建立的站点，我们通过站点视觉地图完成对站点文件的删除、重命名、修改网页标题、检查链接等管理站点的常用操作。这些操作对我们以后建立的站点管理是非常有用的。活动四：编辑我的站点第二章实验：制作“我的心灵小站”实验要求：一、建立站点目录mysitelx，并将站点指定至站点目录。二、制作站点“我的心灵小站”中的网页，在网页中加如文字、图片、音乐以及flash等网页元素。三、通过站点视觉地图完成对站点文件的删除、重命名、修改网页标题、检查链接等。注意：本实验提供的样例仅供参考第二章实验：制作“我的心灵小站”网页效果第三章新建文档与对象概要：一个网站是由许多网页组成的，网页中的各项元素决定了网页的多样性。在这众多的网页元素中文字、列表等是组成网页的基础。本章主要通过四个活动的开展，让我们学会制作网页的一些基本操作，其中包括：通过三种方法创建网页、打开现有网页文档及保存网页；文本和特殊字符的输入及编辑方法，学会创建列表；掌握在网页中插入日期、水平线等常见网页元素的方法，并分析其共同之处；掌握设置网页属性的方法，并了解站点设计的一些基本理念。活动一：初识网页熟练掌握网页文件的新建和保存方法。教学目标：知识要点：网页基本操作（新建、打开、保存）、标签选择器、调整页面大小。准备知识：（1）新建网页方法一：方法二：方法三：活动一：初识网页“新建文档”对话框启始页中的“创建新项目”在“文