《网页设计与制作》全套PPT电子课件教案-第1章电子商务网站及网页概述.ppt

网页设计与制作,南邮吴江学院,目录,第1章 电子商务网站及网页概述 第2章 站点创建与页面属性 第3章 网页中元素的添加 第4章 表格 第5章 链接 第6章 使用框架 第7章 样式 第8章 创建交互式表单 第9章 层及层动画 第10章 行为和事件的应用 第11章 dreamweaver mx与其他应用程序的集成 第12章 管理站点资源、库和模板 第13章 站点的发布 第14章 数据库与网页开发语言 第15章 html语言和xml语言,第1章要点,www服务与网页的发展 电子商务网站及网页的特点 网站建设的工作流程 dreamweaver mx概述,11 了解www服务及网页,world wide web 的诞生 网页概述 网页中的常见术语,一、world wide web 的诞生,world wide web 又称www、w3、web，中文名称叫做“全球信息网”。,1.运行浏览器阅读web文件,web 文件,2.浏览器向服务器要求超链接的文件,3.服务器将html文件传给浏览器，译成web 文件,二、网页概述,网页的定义 网页的分类 网页的构成要素 网页制作的基本原则,网页的定义,在网站中，供用户阅读的一个个页面，就称之为“网页”，又称为web页。,网页的分类,按网页在网站中所处位置不同，网页可分为主页和内页。 按网页的表现形式，可将网页分为静态网页和动态网页,导航栏,超链接,网页的构成要素,组件,文字,图片,logo,banner,按钮,三、网页中的常见术语,站点 发布 url 域名 超文本标记语言 导航条 超级链接 表单,站点,管理网页文档的场所 一个个网页页面的集合。,发布,将制作好的网页上传到网上的过程即是发布，也称为上传或上载。,统一资源定位器（universal resource locator）,url(universal resource locator,全球资源定位法)，url所代表的正是web服务器的网址。,超文本标记语言（hyper text markup language）,简称html，它是www创建超媒体文本的语言，它也是网页创建中最基本的语言，制作的任何一个网页都是基于html文本标识的。 html语言最基本的特征就是超文本和标记，用html语言编写的网页文件的扩展名一般为*.htm或*.html。,域名,域名是用一些英文字符或汉语拼音来代替ip地址的方式。,导航条,导航条能十分有效地实现超级链接功能。,超级链接,一种与其它文件的链接，当用户点击后，所链接的信息就能显示出来。,表单,表单是用于填写申请或提交信息的交互页面。 如电子邮箱、主页空间、qq号码等的申请页面，以及论坛、聊天室、留言簿等，都是采用表单来实现交互的。,四、网页制作的基本原则,整体规划 鲜明的主题 善用图像 鲜明的导航 时时更新 取个有创意的站名 制作通用网页 不要使用过多的动画,12 电子商务网站及网页的特点,网站的分类 b to c 网站的特点 b to b 网站的特点,一、网站的分类,根据网站内容来分，可以将网站分为4类，即门户网站、职能网站、专业网站和个人网站。 门户网站 职能网站 专业网站 个人网站,二、b to c 网站的特点,1、主要功能的体现 商品展示； 结算； 网上支付,2、技术体现 （1）版面规划 （2）增加网站吸引力，网页元素的添加 （3）人机交互,一般不追求直接网上交易,三、b to b 网站的特点,阶段三： 将网站上传至web服务器,阶段四： 网站的更新与维护并加以推广,阶段一： 搜集数据与规划网站结构,阶段二： 网页制作与测试,1-3 网页的一般制作步骤,图解一般流程,1、收集整理资源 2、规划站点内容 （1）描述网页的服务对象 （2）确定制作网页的目的 （3）具体确定网页的信息内容、浏览界面和信息设置 （4）具体确定网页的制作时间和软硬件环境,阶段一： 搜集数据与规划网站结构,1、构建页面框架 （1）“右框”型 （2）“亘”字型 （3）“曰”字型 （4）“目”字型 2、创建导航条 3、填充内容 4、创建返回主页链接 5、站点测试,阶段二： 网页制作与测试,阶段三： 将网站上传至web服务器 网页发布,阶段四： 网站的更新与维护并加以推广 站点的更新与维护,1-4 网页制作工具,网页制作常用软件 dreamweaver mx 2004的界面介绍 dreamweaver mx 2004中建立一般网页的方法,一、网页制作常用软件,图像处理软件 动画制作软件 网页布局软件,二、dreamweaver mx 2004的界面介绍,插入栏 文档工具栏 编辑窗口 网页标签 扩展按钮 浮动面板组 属性面板的使用 标签选择器,插入栏,“插入栏”（如下图所示）包含用于将各种类型的“对象” （如图像、表格和层）插入到文档中的按钮。,显示为菜单,应用程序,html,文本,表单,布局,文档工具栏,该栏中放置了“文档”窗口视图（如设计视图、代码视图、设计和代码混合视图）按钮、标题设置框和文档管理（如在浏览器中预览网页）等按钮，如下图所示,： 单击该按钮可以切换到“代码”视图中。“代码”视图是用于编写和编辑html、javascript、服务器语言代码（如microsoft active server page （asp）或coldfusion 标记语言）以及任何其他类型代码的手工编码环境。 ：单击该按钮可以切换到“代码”视图和“设计”视图中。在该窗口中可同时看到同一文档的“代码”视图和“设计”视图。 ：单击该按钮可以切换到“设计”视图中。“设计”视图用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。 ：在浏览器中预览/调试。单击该按钮后，在弹出的菜单中选择“预览在iexplore”命令后即可在ie浏览器中浏览或调试当前网页。 ：单击该按钮可以刷新当前网页。,编辑窗口,该窗口中显示当前创建和编辑的文档，这是进行网页设计的主要工作窗口。,网页标签,网页标签用于显示打开的网页名称，单击网页标签可在各网页间切换，如下图所示。,扩展按钮,扩展按钮有水平和纵向两种，单击编辑窗口右侧的水平扩展按钮 ，可以隐藏工作主界面右侧的浮动面板组，这样可以在水平方向扩大编辑窗口；单击编辑窗口下方的纵向扩展按钮 则可隐藏属性面板，同时在垂直方向扩大编辑窗口。,浮动面板组,浮动面板组是停靠在编辑窗口右侧的浮动面板的集合。单击某个浮动面板名称左侧的 图标 即可展开一个面板。展开后图标变为 形状，再单击 图标则合拢面板，只显示浮动面板的名称。将鼠标光标移到浮动面板的 图标上，当鼠标指针变为 开头时，拖动该面板即可将浮动面板移到窗口中的任何位置。,属性面板的使用,属性面板用于查看和更改所选对象的各种属性。选取的对象不同，其属性面板的参数设置项目也不同。如图所示为“文本”属性面板，如图所示为“图像”属性面板。单击 按钮还可打开其他的一些设置项目，单击 按钮则可还原。,“文本”属性面板,“图像”属性面板,标签选择器,标签选择器显示了一些常用的html标签，灵活运用这些标签可大大降低设计人员的工作量。比如想选择表格中的某一行，则可通过单击标签选择器中的 标签快速选择，如图所示。,菜单概述,除了掌握dreamweaver mx 2004的操作界面外，还应该熟悉dreamweaver mx 2004的命令。在实际的制作过程中，有许多操作是需要命令来完成的，下面就网页制作中常用的一些菜单及命令进行简单的介绍。 “文件”菜单 “编辑”菜单 “修改”菜单 “文本”菜单 “视图”菜单 “命令”菜单 “站点”菜单 “插入”菜单 “窗口”菜单 “帮助”菜单,“文件”菜单,“文件”菜单中包含网页文件操作的基本项目，如网页文件的新建、打开、保存、关闭、浏览、导入以及导出等，选择相应的命令即可执行相应的操作。 新建网页：选择文件新建菜单命令，即可打开如图所示的“新建文档”对话框，然后在“类别”列表中选择一种类别，在“基本页”列表中选择一种基本页，再单击 按钮，即可创建一个空白页。另外也可以按【ctrl+n】键来新建一个网页。,保存网页：选择文件保存菜单命令，则打开如图3所示的“另存为”对话框，在该对话框中选择保存网页的路径，再单击 按钮即可保存当前网页。另外，也可以按【ctrl+s】键对网页进行保存。 在浏览器中预览：网页制作过程中，需要随时对网页进行浏览，以观看网页在浏览器中的具体显示效果，以便及时发现网页中的错误，方便设计者及时进行修改。要浏览网页，选择文件在浏览器中预览iexplore菜单命令即可，dreamweaver会自动打开ie浏览器显示当前的网页，也可以按【f12】键来浏览当前网页。,新建网页,图3-16,保存网页,“编辑”菜单,“编辑”菜单中主要包括一些对网页对象进行操作的命令，如“剪切”、“复制”、“粘贴”、“撤消”和“重做”等。,“视图”菜单,“视图”菜单主要是对工作界面的一些设置，如文档的各种视图（“代码”、“设计”和“代码和设计”），显示和隐藏不同类型的页面元素和dreamweaver工具及工具栏。如“标尺”、“网格”的显示/隐藏、“文件头内容”等。,“插入”菜单,用于将对象插入的文档。大部分功能都可以通过“插入栏”中的相应按钮来实现，这里不再赘述。,“修改”菜单,“修改”菜单用于更改选定页面元素或对象的属性。使用此菜单，可以编辑标签属性，更改表格和表格元素、并且为库项目和模板执行不同的操作。,“文本”菜单,“文本”菜单可以设置文本的格式。,“命令”菜单,“命令”菜单提供对各种命令的访问，包括一个根据的格式首选参数设置代码格式的命令、一个创建相册的命令，以及一个使用macromedia fireworks优化图像的命令。,“站点”菜单,“站点”菜单用于提供与管理站点以及上传和下载文件有关的菜单项。,“窗口”菜单,“窗口”菜单提供对dreamweaver中的所有面板、检查器和窗口的访问，若访问工具栏，请参见“视图”菜单。,“帮助”菜单,“帮助”菜单用于提供对dreamweaver文档的访问，包括关于使用dreamweaver以及创建dreamweaver扩展功能的帮助系统，还包括各种语言的参考材料。,（1）启动dreamweaver mx 2004。 选择开始程序macromedia macromedia dreamweaver mx 2004菜单命令，打开如图所示的起始页。 （2）新建一个空白的html网页。 在起始页面的“创建新项目”栏中单击“html”选项（如图所示），dreamweaver即会自动创建一个空白的html网页。,三、dreamweaver mx 2004中建立一般网页的方法,（3）在工作区中输入内容。 在工作窗口的“编辑窗口”中输入一些简单的句子，如“大家好，这是我的第一个测试网哦！”，如图所示。,图3-18,（4）浏览测试。 在工作区中添加内容后需要对做好的网页进行浏览测试。浏览测试的方法有3种，第1种是直接按【f12】键，这是最快捷的方法，建议大家以后尽量采用这种方法。第2种方法是单击“文档工具栏”中的 按钮，在弹出的菜单中选择“预览在iexplore”命令后即可在ie浏览器中浏览当前网页。第3种方法是选择文件在浏览器中预览iexplore菜单命令即可在ie浏览器中浏览测试当前网页。,（5）保存网页。 在浏览测试中，如果觉得比较满意，就可以保存当前网页了。 保存的方法也有多种，一种是直接按【ctrl+s】键；另外一种方法是选择文件保存菜单命令，在打开的“另存为”对话框中选择该网页的保存路径，然后单击 按钮。,课后练习,填空题 判断题 问答题 上机操作题,填空题,（1）网页按其表现形式可分为 和 两种。 （2）简单地说， 就是一个网站的网址。 （3）url代表的是 。它的功能是提供一种在internet上查找任何信息的 。 （4） 是指将一个网站中的不同页面链接起来的功能。 （5）将制作好的网页上传到网上的过程即是 。,动态网页,静态网页,域名,全球资源定位器,标准方法,超级链接,发布,填空题,（6）dreamweaver mx 2004的工作界面主要包括 、 和 、 、 、 、网页标签、检查器、网页标签、浮动面板组几个部分。 （7）“文档”窗口视图有 、 和 3种。 （8）在dreamweaver mx 2004工作界面中，要在ie浏览器中预览测试当前编辑的网页，可以按 键。,插入栏,文档工具栏,编辑窗口,垂直扩展按钮,属性面板,设计视图,代码视图,水平扩展按