机工版信息技术教学课件11

信息技术主编：容会訾永所邱鹏瑞项目11：网页设计基础信息技术信息技术信息技术项目知识点1）了解网页设计的基本知识。2）了解 HTML 语言。3）掌握 Dreamweaver CS5 基本操作。4）学会使用 Dreamweaver CS5 创建简单的静态网页。5）掌握站点的基本管理。信息技术目录网页设计 HTML 语言Dreamweaver CS5 基本操作使用 Dreamweaver CS5 创建简单的静态网页CONTENT站点的基本管理信息技术网页设计信息技术信息技术信息技术一、网页设计基础一网页设计基础知识一网页设计基础知识设计网页页面技术也根据页面性质分为动态网页设计和静态网页设计两大类。这里我们只简单对静态网页设计做一个讲解。让大家对网页设计有个概念性认识。若要深入学习网页设计，还需专门进行网页设计系统化学习。网页设计首先要建设一个站点，接下来再分别对前后层进行设计制作，我们平时上网所见均为前层内容。接下来我们讲述的网页设计均指静态网页设计。网页设计前台技术一般常见的有XHTML技术、CSS技术、ECMAScript技术、Ajax技术等。网页设计后台技术一般常见的有ASP技术、ASP.NET技术、JSP技术、PHP技术等常用技术。信息技术信息技术一、网页设计基础（一）网页与网站一）网页与网站网页设计也叫网站建设，一般分为前台技术和后台技术，前台技术是对网页页面的设计、构思、布局、美化、链接、更新、展示等相关工作，主要是显示层的工作。而后台技术包括对后台数据库的设计、开发、构思、管理、以及对后台数据的维护、建设、更新、删除等相关工作。属于管理层的工作。前后台工作息息相关，后台设计的效果，往往展示在前层页面，因此二者不是完全独立关系。相反是有很密切的关联关系。一般而言，网页指的是前层页面的设计布局工作，而网站是指前层和后台等全局性建设、设计、维护等所有包含网站前台后台的工作。信息技术信息技术一、网页设计基础（二）网页设计原则及步骤（二）网页设计原则及步骤首先，网页设计要有完整的设计理念和制作原则，网页设计的原则和步骤一般如下：1设计草图构思和设计好网页的基本框架，并画出框架页面的关联构思草图2准备素材准备好设计网页的所需全部素材，包括声音，图片，动画，电影文件，视频文件等制作网页所需的材料，并且把素材按类型分类放置在不同的文件夹下面。3选择工具选择网页制作工具软件（如：Dreamweaver，Frontpage 等），利用网页制作工具创建站点，并将所有素材连同其分类文件夹复制到创建好的站点下面，如果需要临时补充素材，那必须把临时补充的素材放置到站点下相应的文件夹下面以便使用信息技术信息技术一、网页设计基础4建立基本页面建立基本页面根据画好的网页设计构思草图，一次性新建并保存所有框架所需页面到站点根目录下面或者建相应的文件夹分类存放页面，注意：保存名称最好与页面性质相关，以便于后面修改时查找5页面布局根据要求分别编辑各个页面，页面的编辑体现了设计者的美感和艺术造诣，在编辑过程中充分利用各类素材，一方面要体现主旨和功能，另一方面也要注意色彩的搭配和页面布局的美观。编辑的方法类似于我们在办公软件里面的稳当编辑操作，我们在这里要学会知识迁移，灵活运用。信息技术信息技术一、网页设计基础6发布站点站点建立完成并设计完成所有页面之后，我们必须把整个站点上传到互联网上面，才可以与别人分享。7维护站点网站上传之后，必须根据需要随时做两个方面的工作，一方面是维护和更新网站数据，另一方面也要随时更新页面的图片等相关内容，已达到美观新鲜，提高用户点击率。信息技术了解 HTML 语言信息技术信息技术信息技术二、HTML语言语言二二HTML语言介绍语言介绍HTML（Hyper Text Markup Language）是一种超文链接标示语言，是Web网页制作的标准语言，HTML是一种简单、全置标记的通用语言，HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。因此成为WWW上的重要应用语言，也是所有的Internet站点共同使用的语言，所有的网页都是以它作为语言基础而形成的。信息技术信息技术二、HTML语言语言（一）HTML文档结构【例11-1】通过Dreamweaver CS5“拆分”显示的一个简单页面，如图11-1所示。通过页面展示代码，可以看出HTML语言的语法结构。图11-1HTML语言的语法结构信息技术信息技术二、HTML语言语言代码如下：无标题文档三峡风光1.HTML基本语法结构.文档开始/文档结束.文件头开始/文件头结束.网页主体开始/网页主体结束从语法结构和例题展示设计效果可以看出，HTML语言很简单，代码都是成对出现的。（开始）.（结束）；（开始）.（结束）；（开始）.（结束）。信息技术信息技术二、HTML语言语言（二）HTML常用标记HTML语言中，涉及到页面布局的文档结构、控制符、超链接、图像、表格标记、表单标记等。其常用标记见表11-1所示。分分类标记符符功能含功能含义文档文档结构构声明声明标记头文件文件主体内容主体内容标记表11-1 HTML常用标记标题标记信息技术信息技术二、HTML语言语言控制符控制符为文件加上注文件加上注释块区域区域设置置粗体粗体显示包含文本示包含文本水平居中水平居中对齐所包含元素所包含元素斜体斜体显示所包含示所包含换行行标记插入水平插入水平线分段分段标记显示示预格式化文本格式化文本标记下划下划线显示所包含示所包含设置所包含文本字体的大小、置所包含文本字体的大小、颜色、等色、等标记定定义标题标记文档中包含客文档中包含客户端脚本程序端脚本程序信息技术Dreamweaver CS5 基本操作信息技术信息技术信息技术一、DreamweaverCS5简介三三 DreamweaverCS5简介简介在众多网页设计软件中，Dreamweaver因具备支持代码、拆分、设计、实时视图等多种创作方式的特点，在设计中往往不需要任何代码就可以快速设计一个完整的网页页面，所以成为网页初学者的首选。Dreamweaver CS5是由Adobe公司推出的一个较新的版本，具有自适应网格版面创建行业标准的HTML和CSS编码功能。信息技术信息技术一、DreamweaverCS5简介（一）（一）Dreamweaver CS5工作界面工作界面启动Dreamweaver CS5之后，工作界面包含菜单栏、属性检查器、标签选择器、文档工具栏、应用程序栏、文档窗口、工作区切换器、设计器、面板组等常用内容，如图11-2所示。图11-2 Dreamweaver CS5工作界面信息技术信息技术一、DreamweaverCS5简介（二）（二）Dreamweaver CS5基本功能基本功能Dreamweaver CS5是建立WEB站点和应用程序的专业工具，它组合了代码编辑、程序功能开发，可视布局功能集成在一起，增强了程序的实用性和功能，使得各个阶层的开发者都能熟练的使用它，快速创建页面，进行网页编辑。是WEB站点和应用程序工具的最佳选择。信息技术使用 Dreamweaver CS5 创建简单的静态网页信息技术信息技术信息技术一、DreamweaverCS5基本操作四四Dreamweaver CS5基本操作基本操作（一）创建和管理站点网页设计是基于站点的页面设计，因此第一步就是建立一个新的站点，只有在站点建立之后，才能通过对站点的管理，把网页设计需要的页面文件、图形图像文件、动画文件、声音文件、电影文件等一系列网页设计所需素材全部放到站点下面进行统一管理。我们可以简单的理解为站点就是一个用于存放网站建设所需全部素材的一个文件夹，是系统本身认可或者记载了的，可以执行站点运行的特殊文件夹。1新建本地站点。其步骤如下。（1）执行“站点”/“管理站点”/“新建”/“站点”（输入站点名字）操作。如图11-3所示。信息技术信息技术一、DreamweaverCS5基本操作（2）在跳出的对话框中单击“下一步”/“选择否”/“我不想使用服务器技术”/“下一步”。如图11-3所示。（3）选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）E。单击“您将把文件存放在计算机上的什么位置右下侧的文件夹按钮”。在你需要存放的位置新建文件夹并重命名（比如命名为我的站点），如图11-3所示。（4）然后在（在您如何连接到远程服务器处选“无”）/“下一步”/“完成”/“完成”。信息技术信息技术一、DreamweaverCS5基本操作图11-3新建本地站点信息技术信息技术一、DreamweaverCS5基本操作2.站点管理站点建立之后，为便于网页设计和站点管理，必须把所有网页制作所需素材全部复制到站点文件夹下面。才是合法有效的站点文件，若素材需要临时补充，也必须放置到该站点下面，才是合法有效的素材。否则网站运行的时候将无法显示非法文件或者素材内容。站点文件必须要分类放置在不同的文件夹下面，所以文件夹的命名要根据分类来命名，一般常用的命名方式是按照文本文件、声音文件、图片文件、动画文件、电影以及视频文件等来分类，文件夹名字最好使用英文，然后分类把制作页面的素材复制到相应的文件夹下面。信息技术信息技术一、DreamweaverCS5基本操作（二）网页文件的基本操作1.网页框架层次的整体构思和布局网页设计是一个整体的思维过程，在网站开发的第一步就是构思网页整体框架，根据构思绘制出一个层次脉络清晰的网站结构草图，如图11-4所示。图11-4网页框架层次信息技术信息技术一、DreamweaverCS5基本操作2.网页素材的准备（1）网页文本素材的准备Dreamweaver CS5支持直接输入文本、从外部粘贴文本、从外部文件导入文本几种文本素材的添加方法。所以，一般根据网页页面的需要，可以把规范的文本素材放置到站点文件夹下面的文本文件素材文件夹下面，最好以word格式文件存放。这样在需要的时候可以对文本文件进行复制粘贴操作，把文本直接复制到网页页面中；也可以执行“文件”“导入”操作，选中需要导入的word文档，直接将文档导入到网页页面。信息技术信息技术一、DreamweaverCS5基本操作（2）网页图像素材的准备网页图像素材的准备，可以从照片、网络下载素材（注意该渠道获得的图像需要有合法使用性）、以及自己用图像处理工具绘制的一系列图像。把整个网页设计需要的图像素材尽可能全面的准备好，一起放置到站点下面的图像文件夹下面备用，若页面设计过程中需要临时补充相关素材，也必须先放置到站点下面才能使用。（3）网页声音文件素材的准备网页图声音文件素材的准备，和图形图像素材一样，可以从网络下载素材（注意该渠道获得的图像需要有合法使用性）、以及自己用音影处理软件处理或编辑的一系列声音文件，都可以使用。把整个网页设计需要的声音文件素材尽可能全面的准备好，一起放置到站点下面的声音文件素材文件夹下面备用，若页面设计过程中需要临时补充相关素材，也必须先放置到站点下面才能使用。信息技术信息技术一、DreamweaverCS5基本操作（4）网页其他素材文件的准备网页设计过程中还涉及到动画文件素材的准备、电影文件素材的准备等其他许多页面设计所需要的素材，都应该按照前面的准备方法，把文件素材分类提前尽量完备的准备好。并放置到站点下面对应得文件夹下面。若有临时需要增加的文件，都必须把握先放入站点下面才能后使用的原则，进行对网页设计所需素材的准备工作。3.网页页面文件的基本操作信息技术信息技术一、DreamweaverCS5基本操作（1）网页文档的建立站点建立之后，必须给站点添加页面，执行“文件新建”操作，在打开的新建文档对话框中选择常规选项卡下面的“空白页”和页面类型选项卡下面的“HTML”以及布局选项卡下面的“无”选项，单击“创建”即可创建空白的网页文档。如图11-5所示。图11-5网页文档的建立信息技术信息技术一、DreamweaverCS5基本操作（2）网页文档的保存网页文件的保存，默认保存路径是站点根目录，要保存到站点根目录文件夹或者站点下层文件夹下面的网