网页制作基础ppt课件

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