网页制作基础ppt课件

第4节 网页设计基础 Dreamweaver,计算机基础部,2017.4,1,本节学习目标,网页设计的基本概念,2,4.1 网页设计的基本概念,1. 网页与HTML, 网页与HTML 网页与HTML ,网页,HTML,3,网页,HTML,4,网页,HTML,5,HTML（Hypertext Markup Language）是一种超文本标记语言，用来描述万维网上的超文本文件。 从文件的角度来说，一个网页就是一个HTML文件。,设计、创建、制作与发布网页,Dreamweaver CS4、 FrontPage、 Adobe Pagemile、 Claris Home Page 等网页制作工具,42万字符的HTML文本需要我们自己编写吗？,6,构成网页的基本元素大体相同，主要包括标题、网站Logo、导航、超链接、广告栏、文本、图片、动画、视频与音频等。 按网页的表现形式可将网页分为： 静态网页 动态网页,2. 网页设计的流程,网页设计的流程主要包括站点设计和网页制作两大部分。,7,网页设计的流程主要包括： 前期策划 创建站点 创建主页和其他网页 添加网页基本元素 创建网页超级链接 网页设计的版面布局 制作网页表单,8,本节课后网页制作课题,制作一个属于自己的兴趣主题网站： 例：自己喜爱歌手的网站 主页：歌手的介绍及发行唱片 为每一张唱片建立一张网页，对应网页上为该唱片的各曲目介绍，如歌词，词曲作者，歌曲试听、演唱会视频等等。,9,4.2 网站的创建和管理,4.2 .1 Dreamweaver的界面,10,4.2.2 站点的新建与管理,在Dreamweaver CS4中，“站点”是一个文件夹，用于存放网站的所有图像、多媒体等文件，便于用户对站点进行发布、维护和管理。,1. 站点的结构,要制作一个能够被公众浏览的网站，首先要在本地磁盘上制作一个网站，然后把这个网站上传到Web服务器上。 放在本地磁盘上的网站称为本地站点，处于Internet中Web服务器上的网站称为远程站点。,11,2. 站点的建立,本地站点是存放网站内容的集合体，网站的内容都分门别类地保存在各类文件夹中。,步骤： （1）打开“站点定义”对话框 （2）定义站点,例1：建立一个本地站点“站点1”，站点文件夹为C盘的“计算机应用”。,12,3. 站点的管理,站点建立后，Dreamweaver可以对站点及站点中的文件进行管理，可以对所建立的站点进行移动、复制、删除、导入、导出等操作。,（1）打开“管理站点”对话框 （2）切换站点 （3）编辑站点 （4）复制站点 （5）删除站点 （6）导入/导出站点 （7）站点的查看方式,13,在网页创作中，网页上的信息大多是通过文字来表达的。文字是最基本的元素之一，具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代。,（1）输入文本和空格 （2）文本换行（Enter与Shift+Enter）,4.3 网站设计的基本操作,1. 文本操作,14,（3）网页页面属性设置,设置网页的标题、背景图像、背景颜色、文本颜色、链接颜色、页边距等，对外观进行整体上的控制，以保证页面属性的一致性。,单击此按钮， 打开“页面属性”对话框,15,例2：打开wy1.html，将网页标题设置为“母亲河”，设置网页的超级链接颜色。,16,（4）文本属性设置（HTML属性）,例3：在wy1.html中添加日期和水平线。,水平线属性设置,日期属性设置,（5）添加特殊字符（“插入”/“HTML”/“特殊字符”）,（6）添加日期（“插入”/“日期”）和添加水平线（“插入”/“HTML” /“水平线”）,17,（7）设置列表,网页文本编排中，一些类型相同或具有序列关系的文本内容可以通过列表的方式来呈现，如此可以使网页资料显得整齐规则，便于阅读。有两种列表：编号列表和项目列表（“格式/列表”）。,编号列表效果,项目列表效果,18,例4：将wy1-1.html中的相应段落设置编号列表。,列表属性设置,列表菜单选择,19,CSS（Cascading Style Sheet）称为“层叠样式表”，简称为“样式表”。CSS是一组格式设置规则，用于控制Web页面元素的外观布局。 使用CSS可以灵活并更好地控制许多文本属性，包括特定字体、大小、粗体、斜体、下划线等。,2. CSS样式,20,（1）CSS规则,CSS规则主要有选择器和声明两个部分组成，选择器是表示格式元素的术语，声明用于定义元素样式，如右侧所示的.a1是选择器，介于之间的内容就是声明。,选择器,声明,21,（2）CSS定义,例5：建立如前页图所示的CSS规则.a1，并应用到wy1.html的第二段文本上。,步骤： 单击文本“属性”面板上的按钮 ，“目标规则”中选择“” ，单击出现 “新建CSS规则”对话框。,输入选择器名称.a1，单击“确定”按钮，在“.a1的CSS规则定义”对话框中点开“Font-Family”下拉列表，选择“编辑字体列表”选项。 在“编辑字体列表”对话框中，单击 按钮可以将右边“可用字体”中的“宋体”放入左边的“选择的字体”中，单击上面的“+”号，可将字体上面的添加到字体列表中，并可以继续添加新字体。 单击“确定”按钮，回到定义CSS规则对话框进行设置。,22,添加字体,定义规则,23,（3）CSS的应用,选择需设置属性的文本，在属性面板的“类” 下拉列表框中选择.a1规则。,选择a1规则,24,4.4 网页设计的超级链接和多媒体应用,4.4.1.超级链接的设置,练习：完成下面网页中各式超级链接的设置：,25,超链接是指页面对象之间的链接关系，只有通过超链接才可以实现在不同网页，乃至不同网站之间的跳转。 超链接就是从一个网页指向一个目标的关系，目标可以是另一个网页，可以是同一网页的不同位置，还可以是一幅图像、一个文件等。,26,例6：在wy1.html中设置第一行中文本“黄河”的超级链接，链接文件为“huanghe.html”。,插入链接对话框,1. 文本链接,27,在“目标”下拉列表中可以选择超级链接的打开方式。,_blank：在一个新的浏览器中打开。 _parent：在父框架中打开。 _self： 在网页所在的窗口或框架中打开，此为默认选项。 _top： 在浏览器窗口打开。,28,2. 锚记链接,Dreamweaver提供了锚记链接功能，可创建跳转到页面的指定位置的链接。当建立一个锚记后，会在屏幕上显示锚记标记 。 执行菜单“编辑/首选参数”命令，在“不可见元素”中选取“命名锚记”复选框，“确定”后即可显示锚记。,显示锚记,29,例7：在wy1.html网页尾部添加“返回顶部”四个字，并建立超级链接，可跳转到网页的首部。,步骤 ： 定义锚记名“m1” 尾部添加“返回顶部”文字 选择文字，设置链接。,注意：锚记前必须加上#号，即“#m1”。,30,3. Email链接,在对象的“属性”面板的“链接”框内输入“mailto:”并输入Email地址，如mailto:aa。,4. 外部链接,在“属性”面板的“链接”框内直接输入外部链接地址，如。,31,4.4.2.多媒体的应用,练习：完成如下网页中多媒体元素的添加设置：,32,例8：将图像huanghe.jpg文件插入到wy1.html文档中，并设置替换文本。,选择图像,1. 插入图像（“插入/图像”）,输入替换文本“母亲河”,图像的属性设置,33,插入鼠标经过图像,“鼠标经过图像”是指在浏览器中，当鼠标指针移动到图像上时，图像随即变成另外一幅图像，当鼠标指针移开时，又会恢复到第一幅图像。 命令：“插入/图像对象/鼠标经过对象”,34,例9：在wy1.html网页中插入“鼠标经过图像”，图像为huanghe1.jpg和huanghe2.jpg文件。,原始图像,鼠标经过图像,插入“鼠标经过图像”对话框,35,2 . 插入Flash动画 Flash动画以其文档容量小、效果丰富等特点深受网页制作者的钟爱。,例10：将Flash文件001.swf插入到新建的网页wy2.html中。,“插入/媒体/SWF”菜单命令,选择Flash文件,36,3. 添加音频（“插入/媒体/插件”）,例11：将声音文件ex2.wav添加到网页wy2.html中。,插入音频后，打开“窗口”菜单中的“标签编辑器”，可以对音频进行属性设置。,打开标签编辑器,音频属性设置,37,4. 添加视频(“插入/媒体/FLV”）,例12：将视频文件Musicvedio.flv添加到网页wy2.html中。,FLV视频标签,FLV预览效果,38,插入FLV对话框,设置视频的宽度和高度,设置自动播放,设置循环播放,39,网页是网站构成的基本元素。 一个网站是否精彩有什么影响因素呢？ 色彩的搭配、文字的变化、图片的处理 还有一个非常重要的因素网页布局。 什么是网页布局？ 网页布局是指网页内容在页面上所处位置的设计。,4.3 网页布局,40,常见的网页布局结构,1“国字”型布局 因布局结构与汉字“国”相似而得名。页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。,41,2T型布局 T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。,42,3标题正文型 标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。,43,4左右框架型布局 左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容,44,5上下框架型 上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。,45,6. 综合框架型 综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术,46,7POP布局 POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。,47,8FLASH布局 FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。,48,网页布局的方法,在网页制作中，网页布局的重要性是显而易见的。布局有很多方法，但最基本的方法有两种： 表格 框架（*选学*）,49,1. 利用表格布局网页,右图为利用表格进行网页布局的页面，表格为9行5列，采用创建后合并单元格方式，表格无边框线。布局后的表格可以插入文字、图像、超级链接、Email链接和所有网页元素，且整齐美观。,50,2. 表格的基本操作,表格是网页制作的一个重要组成部分，是最常用的网页布局元素之一。利用表格可以在页面上整齐地显示各种数据资料，以及对文本和图像进行定位，利用表格的背景、边框线等属性可以使网页更加美观。 表格的组成元素主要是：行、列、单元格。,51,例14：新建一网页文件wy3-1.html，在网页中插入一个4行3列表格，合并第一行单元格，并设置对齐方式居中。,（1）表格的创建（“插入/表格”）,插入表格对话框，确定行数、列数。,表格宽度可以为绝对像素单位，或为浏览器宽度的百分比,52,“修改/表格/合并单元格”,在属性面板中，打开“对齐”下拉列表，设置居中对齐方式,百合并单元格操作,53,单元格“填充”和“间距”： “填充”指单元格边框与单元格内容之间的距离，单位为像素 “间距”指单元格边框与单元格边框之间的距离，单位为像素,（2）表格的属性设置,54,表格建立好以后，选择菜单“修改/表格”命令，可以对表格的行、列、单元格等进行编辑。,（3）表格的编辑,“插入行”和“插入列”：在光标所处行或列上插入一空行或一空列，原来的行或列相应地往下移或往右移。 “插入行或列”：从光标开始处可一次插入多行或多列。 “删除行”和“删除列”：可一次删除选取的多行或多列。如未选取行或列，则删除光标所在行或列。 “拆分单元格”：将一个单元格拆分为多行或多列。 “合并单元格”：将选取的多个单元格合并为一个单元格。,55,单元格是表格的最基本单位，单元格属性与表格的属性稍有不同。,（4）单元格的属性设置,“水平”和“垂直”：指单元格内容的对齐方式。“水平”为左对齐、右对齐、居中对齐等水平对齐方式，“垂直”为“顶端”、“居中”、“底部”等垂直对齐方式。 “宽”和“高”：表示单元格的宽度和高度，单位 像素。若要指定百分比，可在数值后使用百分比符号%。 “背景颜色”：设置单元格的背景颜色。 “标题”：单元格中的内容为粗体并居中。 “不换行”：防止换行，当单元格内容宽于原单元格宽度时，单元格会加宽宽度来容纳所有内容。,56,框架集由一组框架构成，框架集把浏览器窗口划分为若干个区域，每个区域定义为一个框架，在此框架中可以显示不同的网页，从而实现在同一页面中显示多个网页文档内容。,3. 框架的创建及使用（*选学）,57,（1）创建和保存框架（*选学）,例15：新建一框架集文件wy3.html，框架为“对齐上缘”，两个框架文件分别保存为wy3-1.html、和wy3-2.html。,上框架wy3-1.html,主框架wy3-2.html,58,插入框架集操作：,“对齐上缘”框架集包含顶框架“topFrame”和主框架“mainFrame”,59,步骤： 新建网页文件（未命名） 插入框架集 光标置于上框架内，执行“文件/在框架中打开”命令， 选择wy3-1.html文件，单击“确定”。 光标置于下框架内，执行“文件/在框架中打开”命令， 选择wy3-2.html文件，单击“确定”。 执行“文件/保存全部”命令，输入文件名wy3.html，单击“保存”。,注意：执行“在框架中打开”命令，wy3-1.html和wy3-2.html网页文件必须事先已存在于站点中。,60,可以发现，当把光标定位在不同框架时，在窗口标题上显示的是在此框架中打开的网页文件名。而选取整个框架集外框时，窗口显示框架集文件名。 如果创建的框架不是所需的，可以直接拖动框架分割线到窗口顶部或底部，清除框架。,61,（2）设置超级链接（*选学）,例16：在wy3-1.html（即上框架）中设置文本的超级链接。选择“黄河游”文本，设置超级链接到wy1.html网页，目标为mainFrame。,注意：框架中的超级链接，目标可以设置为某个框架（mainFrame、topFrame、leftFrame、rightFrame、bottomFrame等）。,框架超链接目标,62,（3）框架面板（*选学）,利用框架面板可以灵活地选取某个框架，对框架进行属性设置。选择菜单“窗口/”框架可打开框架面板。,框架面板,63,（4）框架与框架集属性设置（*选学）,框架的属性分为框架集属性和框架属性两部分。,“框架集”属性面板,“框架”属性面板,64,在一个网站注册时，首先填写注册表，然后点击“提交”或“确定”按钮后，注册表的信息提交到网站。这个操作就是通过表单实现的。 什么是表单： 表单在网页中主要负责数据采集功能。 表单是服务者与用户进行交互的通道。 通过表单，用户可以在表单对象中输入或选择相关的信息，然后提交到站点服务器的数据库，而服务器脚本或应用程序即对这些信息进行处理，最后服务器回应请求，将信息发送回用户或客户端页面，从而达到人站交流的目的。,4.4 表单的使用,65,表单组成,一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的脚本或者取消输入，还可以用表单按钮来控制其他数据处理工作。,66,“调查问卷”表单,单行文本,单选按钮,复选框,菜单/列表,文件域,命令按钮,67,在网页中添加表单对象，必须先创建表单（或称表单域），在编辑状态下，表单以虚线框出现，同一表单中的各种表单元素应集中在表单中才会有效。表单对象可通过“插入”面板的“表单”选项卡来插入。,表单域，表单中需提交的内容都必须放置在红色虚线框内。,表单选项卡,1. 表单及表单属性,（1）表单,68,“表单ID”：用来设置表单的名称，当同一页面中有多个表单时，需要有不同名称来区分。 “动作”：用来制定处理该表单的动态页或脚本的路径。例如需要通过Email发送，则可以输入mailto:aa “方法”：设置将表单数据发送到服务器的方法，其中POST表示用标准输入方式发送数据到服务器，GET表示把表单数据附加到请求URL后发送到服务器。 “目标”：设置表单数据被处理后，反馈网页的打开方式。 “编码类型”：设置发送数据的编码类型。,（2）表单属性,69,插入表单（表单域）后，可以在其中插入各种表单对象。,2. 表单对象,（1）文本框,例17：在wy4.html网页中插入表单域，插入文本域并设置属性。,单行文本域属性设置,密码设置,可输入的最多字符数,可显示的最多字符数,70,（2）文本区域,显示行数,（3）单选按钮和复选框,例18：在wy4.html网页中添加单选按钮。,单选按钮,单选按钮属性,多行文本域属性设置,71,复选框属性,例18：在wy4.html网页中添加复选框。,复选框,72,（4）列表/菜单,插入菜单项，单击属性面板上的“列表值”按钮，添加菜单内容。,例19：在wy4.html网页中添加菜单。,单击此按钮可添加菜单内容,单击“+”号可添加内容,“菜单”属性,73,“列表”设置,菜单预览,列表预览,列表允许多选,74,（5）文件域,利用文件域可以将选择的文件作为表单数据提交到服务器上。,例20：在wy4.html网页中添加文件域。,75,（6）按钮,按钮是控制表单提交或重设的操作。,按钮,“提交表单”表示将数据提交到服务器,“重设表单”表示将表单数据重设为原始值,76,（7）图像域,可以使用图像作为按钮来提交表单。,（8）跳转菜单,在表单中使用跳转菜单，用户可以从菜单中选择需要打开的相应的网页或文件。,例22：在wy4.html网页中添加跳转菜单，内容是“上海热线”和“新浪网”。,77,插入跳转菜单对话框,单击“+”号可添加菜单项,选择此项，可插入“前往”按钮,78,4.5.1 站点的发布 4.5.2 站点的管理,4.5 站点的发布与管理（*选学）,79,4.5.1 站点的发布（*选学）,“站点的发布”是指利用Dreamweaver将本地站点的网站内容传输到远程站点这一过程。 远程站点通常位于一台已经开启Web服务器的计算机上。,80,1. 远程站点的建立（*选学）,一般而言，远程站点和本地站点位于两台不同的计算机上。 在建立远程站点之前必须先搞清楚三个问题： 远程站点位于哪一台计算机上 本地站点以什么通信方式访问远程站点 根据特定的通信方式，本地站点访问远程站点时需要设置哪些参数,81,远程文件夹一般指Web服务器上存储文件的位置，这些文件可以用来向互联网用户发布。 如果计划开发动态网页，Dreamweaver 需要测试服务器的服务以便生成和显示动态内容。在测试服务器上存放站点内容的文件夹就是测试服务器文件夹。,（1）远程文件夹和测试服务器文件夹,82,Dreamweaver CS4提供的在本地和远程文件夹之间传输文件时可以使用的访问方法：,（2）远程文件夹的访问方法,FTP： 如果使用 FTP 能够连接到 Web 服务器，可使用此设置。 本地/ 网络： 如果远程文件夹位于网络文件夹或在本地计算机上时可使用此设置。 RDS （远程开发服务）：对于这种访问方法，远程文件夹必须位于运行 Adobe ColdFusion 的计算机上。,注意：上述不同的访问方法对应着不同的配置参数。只有正确配置参数才能确保本地站点与远程站点之间能正常传输文件。,83,选择菜单“站点/ 管理站点”命令，进入“站点定义”对话框。 在“站点定义”对话框中，输入相应内容并进行属性设置。,（3）定义远程文件夹（以FTP方式访问）,定义远程文件夹,选择FTP方式,选择远程信息,主机名称,84,远程文件夹一旦创建成功，就可以从本地站点向远程站点上传文件了。在Dreamweaver中，上传文件的操作主要通过“文件”面板来执行。,2. 远程站点的发布（*选学）,上传文件按钮,85,4.5.2 站点的管理（*选学）,随着站点的发布和站点内容的不断更新，新增、删除和重命名文件的现象将不断出现，这将导致文件内部链接的失效以及本地站点、远程站点内容的不一致。因此必须及时更新站点的内容。,86,1. 远程站点的编辑（*选学）,当远程站点的位置发生改变时（例如更改上传文件目录，或彻底改变Web服务器），就必须重新编辑与远程文件夹有关的信息，保证本地站点与远程站点能正常通信。 打开“管理站点”对话框在“站点定义”对话框左侧选择“高级”选项卡，在右侧修改远程文件夹相关参数。,87,2. 站点链接的更新（*选学）,每当本地站点内发生移动或重命名文档时，Dreamweaver都可更新与该文档相关的链接。 利用这项功能，可以先在本地让Dreamweaver修复所有失效链接，然后上传远程站点，确保发布时所有文档内的链接指向正确。,88,（1）站点链接的自动更新,常规选项页,“首选参数”对话框,自动更新选项,总是：每当移动或重命名选定文档时，总是自动更新与该文档相关的所有链接更新选项,从不：当你移动或重命名选定文档时，不自动更新与该文档有关的所有链接,提示：显示一个对话框，列出此更改影响到的所有文件。单击“更新”可更新这些文件中的链接，而单击“不更新”将保留原文件不变。,89,在“文件”面板的“本地”视图中选择一个文件。选择菜单“站点/改变站点范围的链接”命令。 在“更改整个站点链接”对话框中完成下列选项： 更改所有的链接：单击文件夹图标 ，浏览到并选择要取消链接的目标文件。如果更改的是电子邮件链接、FTP 链接、空链接或脚本链接，请键入要更改链接的完整文本。,（2）站点链接的手动更新,90,变成新链接：单击文件夹图标 ，浏览到并选择要链接到的新文件。如果更改的是电子邮件链接、FTP 链接、空链接或脚本链接，请键入替换链接的完整文本。,更改站点链接对话框,91,（1）在折叠的“文件”面板中切换站点视图,3. 站点视图切换（*选学）,站点视图下拉框,92,（2）在展开的“文件”面板中查看站点,远程站点,本地站点,93,Thank You !,94,