大学计算机基础 第9章_第1页
大学计算机基础 第9章_第2页
大学计算机基础 第9章_第3页
大学计算机基础 第9章_第4页
大学计算机基础 第9章_第5页
已阅读5页，还剩51页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第9章网页制作大学计算机基础（Windows10+Office2016）（微课版）COMPUTER目录9.2

制作基本网页CONTENTS9.1

网页设计基础大学计算机基础（Windows10+Office2016）（慕课版）9.3

使用表格布局网页9.4

使用DIV+CSS统一网页风格9.5

使用表单和行为9.1.1

网页与网站的概念网站：网站是指在互联网上根据一定的规则，使用HTML（标准通用标记语言）工具制作的用于展示特定内容相关的一组网页的集合。通常情况下，网站只有一个主页，主页中会包含该网站的标志和指向其他页面的链接，用户可以通过网站来发布想要公开的资讯，或者利用网站来提供相关的网络服务。也可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。网页：网页是组成网站的基本单元，用户上网浏览的一个个页面就是网页。网页又称为Web页，一个网页通常就是一个单独的HTML文档，其中包含有文字、图像、声音和超链接等元素。9.1.2网页的构成要素文字Logo导航超链接视频音频动画表单元素图像9.1.3常见的网站类型门户网站个人网站职能网站企业网站专业网站9.1.4网站开发的工具DreamweaverCC是集网页制作和网站管理于一身的网页编辑器，是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的网页。目录9.2制作基本网页CONTENTS9.1网页设计基础大学计算机基础（Windows10+Office2016）（慕课版）9.3

使用表格布局网页9.4

使用DIV+CSS统一网页风格9.5

使用表单和行为9.2.1创建本地站点【例】创建一个名称为“wzsj”的本地站点。启动DreamweaverCC2019，选择【站点】/【新建站点】命令，打开“站点设置对象未命名站点1”对话框。在“站点名称”文本框中输入站点名称，这里输入“wzsj”，单击对话框中的任一位置，确认站点名称的输入，此时对话框的名称会随之而改变。在“本地站点文件夹”文本框后单击“浏览文件夹”按钮。打开“选择根文件夹”对话框，在该对话框中选择存放站点的路径，然后单击按钮。9.2.1创建本地站点返回到“站点设置对象wasj”对话框中，在“本地站点文件夹”对话框中则会显示存储站点的路径，单击按钮。9.2.1创建本地站点返回DreamweaverCC2019主界面中，则会在“文件”面板中查看到创建的wzsj站点。9.2.2管理站点中的文件和文件夹添加文件或文件夹：网站内容的分类决定了站点中创建文件和文件夹的个数，通常，网站中每个分支的所有文件统一存放在单独的文件夹中，根据网站的大小，又可进行细分。移动和复制文件或文件夹：新建文件或文件夹后，若对文件或文件夹的位置不满意，可对其进行移动操作。删除文件或文件夹：选中需删除的文件或文件夹，单击鼠标右键，在弹出的快捷菜单中选择【编辑】/【删除】命令，或直接按“Delete”键，在打开的对话框中单击“是”按钮可删除文件或文件夹。重命名文件或文件夹：选择需重命名的文件或文件夹并单击鼠标右键，在弹出的快捷菜单中选择【编辑】/【重命名】命令，使文件或文件夹的名称呈可编辑状态，在可编辑的名称框中输入新名称即可。9.2.3创建网页基本元素【例】在“hhjj.html”网页中输入文本。打开“hhjj.html”网页文件，将插入点定位到内侧DIV中，输入“花火植物家居馆……”文本（具体内容可参见提供的花火简介.txt素材），当输入完“进出口等为一体的农业产业化国家重点龙头企业。”后按“Enter”键分段。1．在网页中添加文本9.2.3创建网页基本元素打开“花火简介.txt”文件，选择除第1段外的其他文本，按“Ctrl+C”组合键复制，返回“hhjj.html”网页文件，然后按“Ctrl+V”组合键粘贴。9.2.3创建网页基本元素（1）插入图像在网页恰当的位置插入图像，不但可以为网页增彩增色，还可以使整个网页更有说服力，从而吸引更多浏览者。2．在网页中添加图像（2）插入鼠标经过图像插入鼠标经过图像，是指当鼠标经过图像时变化成另一张图像，是网页中较为常见的一种操作。选择【插入】/【鼠标经过图像】命令，打开“插入鼠标经过图像”对话框，在其中进行设置。9.2.3创建网页基本元素（1）插入HTML5VideoHTML5最重要的新特性就是对音频和视频的支持，如视频的在线编辑、音频的可视化构造等。而HTML5Video元素是一种将视频和电影嵌入到网页中的一种标准样式。（2）插入HTML5Audio音频文件HTML5Audio是HTML5音频元素提供的一种将音频内容嵌入网页中的标准方式。同样，HTML5音频文件在插入时，只是以一个占位符的形式进行显示。3．在网页中添加多媒体元素9.2.3创建网页基本元素（3）插入并设置Flash文件的属性动态元素是一种重要的网页元素，其中，Flash是使用最多的动态元素之一。Flash元素表现力丰富，可以给人极强的视听感受。而且它的体积较小，可以被绝大多数浏览器支持，因此，被广泛应用于网页中。（4）使用FlashVideo视频文件Flash视频即扩展名为.flv的Flash文件，在网页中插入Flash视频的操作与插入Flash动画的方法类似，插入Flash视频后还可通过设置的控制按钮来控制视频的播放。9.2.4创建网页超链接通过菜单命令：在需要插入超链接的位置选择【插入】/【Hyperlink】命令，在打开的“Hyperlink”对话框中进行链接文本、链接文件和目标打开方式的设置。通过“属性”面板：在网页中选择要创建超链接的文本，在“属性”面板的“链接”下拉列表框中直接输入链接的URL地址或完整的路径和文件名即可1．创建文本超链接9.2.4创建网页超链接通过“浏览文件”按钮：单击“链接”下拉列表框后的“浏览文件”按钮，在打开的“选择文件”对话框中选择需要链接的文件，单击按钮即可链接，或按住“链接”下拉列表框后的“指向文件”按钮，拖动到右侧的“文件”面板，并指向需要链接的文件即可。HTML代码：切换到“代码”或“拆分”视图中，直接在<body></body>标签间输入<ahref="链接路径及名称">链接内容</a>，如<ahref="">百度</a>，表示单击“百度”文本，链接到百度网页。9.2.4创建网页超链接在网页中创建图像超链接与创建文本超链接的操作方法基本相同，都是先选择需要创建超链接的对象，然后在“属性”面板中设置图像链接的路径及名称。2．创建图像超链接9.2.4创建网页超链接热点链接的原理是利用HTML语言在图像上定义不同形状的区域，然后再为这些区域添加链接，这些区域被称为热点。在创建热点链接时，需要先选择需要创建热点的图像，再在“属性”面板中选择不同的热点形状，在图像中绘制热点区域后，在其“属性”面板的“链接”文本框中输入链接路径或名称即可。3．创建热点链接9.2.4创建网页超链接通过菜单命令通过“插入”面板通过HTML代码4．创建电子邮件超链接9.2.4创建网页超链接下载超链接与其他超链接的不同之处在于链接的对象不是网页而是一些单独的文件。在单击浏览器中无法显示的链接文件时，会自动打开“文件下载”对话框。一般扩展名为.gif或.jpg的图像文件或文本文件（.txt）都可以在浏览器中直接显示，但一些压缩文件（.zip、.rar等）或可执行文件（.exe）不可以显示在浏览器中，因此，会打开“文件下载”对话框进行下载。5．创建下载超链接目录9.2制作基本网页CONTENTS9.1网页设计基础大学计算机基础（Windows10+Office2016）（慕课版）9.3使用表格布局网页9.4

使用DIV+CSS统一网页风格9.5

使用表单和行为9.3.1插入表格并输入内容【例9】新建一个网页文档，在其中插入一个6行3列，宽度为954像素，边框粗细为0像素的表格。新建“index.html”网页，然后选择【插入】/【Table】命令，打开“Table”对话框，在其中进行设置。9.3.1插入表格并输入内容单击按钮，即可在插入点处添加一个6行3列的表格。9.3.2表格的基本操作选择需要调整大小的表格，将鼠标光标移动至表格右侧，当鼠标光标变为或形状时，拖动鼠标即可改变表格的大小。1．调整表格大小将鼠标光标定位在单元格中，移动鼠标光标，当其移动到行或列的相交处时，鼠标光标将变为或形状，拖动鼠标可调整单元格的大小。9.3.2表格的基本操作使用菜单命令：将鼠标光标定位到相应的单元格中，选择【编辑】/【表格】/【插入行】或【插入列】命令可在当前选择单元格的上面或左边添加一行或列。使用右键菜单：将鼠标光标定位到相应的单元格中，单击鼠标右键，在弹出的快捷菜单中选择【表格】/【插入行】或【插入列】命令，可实现单行或单列的插入使用对话框：将鼠标光标定位到相应的单元格中，单击鼠标右键，在弹出的快捷菜单中选择【表格】/【插入行或列】命令，打开“插入行或列”对话框，单击选中“行”或“列”单选项，再设置插入的行数或列数及位置2.添加单元格行或列9.3.2表格的基本操作使用菜单命令：将鼠标光标定位到要删除的行或列所在的单元格，选择【编辑】/【表格】/【删除行】或【编辑】/【表格】/【删除列】命令。使用右键菜单：将鼠标光标定位到要删除的行或列所在的单元格，单击鼠标右键，在弹出的快捷菜单中选择【表格】/【删除行】或【表格】/【删除列】命令。使用快捷键：使用鼠标选择要删除的行或列，然后按【Delete】键。3.删除单元格行或列9.3.2表格的基本操作使用菜单命令：选择要合并的单元格区域，选择【修改】/【表格】/【合并单元格】命令即可合并单元格。使用右键菜单：选择要合并的单元格区域并单击鼠标右键，在弹出的快捷菜单中选择【表格】/【合并单元格】命令即可。使用“属性”面板：选择要合并的单元格区域，单击“属性”面板左下角的“合并所选单元格”按钮即可。4.合并单元格9.3.2表格的基本操作使用菜单命令：选择要拆分的单元格，选择菜单栏中的【修改】/【表格】/【拆分单元格】命令即可。使用右键菜单：选择要拆分的单元格并单击鼠标右键，在弹出的快捷菜单中选择【表格】/【拆分单元格】命令即可。使用“属性”面板：选择要拆分的单元格，单击“属性”面板左下角的“拆分单元格为行或列”按钮，打开“拆分单元格”对话框，设置拆分的行或列数。5.拆分单元格9.3.3设置表格属性如果不能熟练地使用HTML设置表格属性，可通过选择【窗口】/【属性】命令，打开“属性”面板进行可视化设置。并且表格“属性”面板中的各参数设置与“Table”对话框中的参数基本相同。而在插入表格后，再使用表格“属性”面板，则起到对插入的表格进行相应更改的作用。5.拆分单元格目录9.2制作基本网页CONTENTS9.1网页设计基础大学计算机基础（Windows10+Office2016）（慕课版）9.3使用表格布局网页9.4使用DIV+CSS统一网页风格9.5

使用表单和行为9.4.1

CSS样式的基本语法在每条CSS样式中，都包含了两个部分的规则：选择器（选择符）和声明。选择器就是用于选择文档中应用样式的元素，而声明则是属性及属性值的组合。每个样式表都是由一系列的规则组成的。但并不是每条样式规则都出现在样式表中。1.基本语法规则9.4.1

CSS样式的基本语法在网页中，如果想把一个CSS样式引用到多个网页元素中，则可使用多个选择器，即在选择器的位置引用多个选择器名称，并且选择器名称之间用逗号分隔。2.多个选择器9.4.2创建样式表在Dreamweaver中，将CSS样式按照使用方法进行分类，可以分为内部样式和外部样式。如果CSS样式创建到网页内部，则可以选择创建内部样式，但创建的内部样式只能应用到一个网页文档中。如果想在其他网页文档中应用，则需创建外部样式。9.4.3认识DIV标签DIV（Divsion）区块，也可以称为容器，在Dreamweaver中使用DIV与其他HTML标签的方法。在布局设计中，DIV承载的是结构，采用CSS可以有效地对页面中的布局、文字等进行精确的控制，DIV+CSS完美实现了结构和表现的结合，对于传统的表格布局是一个很大的冲击。9.4.4认识DIV+CSS布局模式DIV+CSS布局模式是根据CSS规则中涉及的margin（边界）、border（边框）、padding（填充）、content（内容）来建立的一种网页布局方法，如图所示即为一个标准的DIV+CSS布局结构，左侧为代码，右侧为效果图。9.4.5插入DIV标签在DreamweaverCC中插入DIV元素的方法相当简单，只需定位插入点后，选择【插入】/【Div】命令或选择【插入】/【HTML】/【Div】命令，打开“插入Div”对话框。9.4.6HTML5结构在DreamweaverCC2019中，不仅可以单独插入DIV元素，还可以使用HTML5元素插入有结构的DIV元素。其结构元素中包括画布、页眉、标题、段落、导航、侧边、文章、章节、页脚和图等。目录9.2制作基本网页CONTENTS9.1网页设计基础大学计算机基础（Windows10+Office2016）（慕课版）9.3使用表格布局网页9.4使用DIV+CSS统一网页风格9.5使用表单和行为9.5.1

认识表单注册网页登录网页留言板或电子邮件网页1.表单形式9.5.1

认识表单在网页中，组成表单样式的各个元素称之为域。在DreamweaverCC2019的“插入”面板的“表单”分类列表中，则可以看到表单中的所有元素。2.表单的组成要素9.5.1

认识表单在HTML中，表单是使用<form></form>标记表示的，并且表单中的各种元素都必须存在于该标记之间，如图所示的代码表单，表示名为form1的表单，使用post方法提交到邮箱。3.HTML中的表单9.5.2

创建表单并设置属性在DreamweaverCC2019中插入表单只需选择【插入】/【表单】/【表单】命令或在“插入”面板的“表单”分类列表中单击“表单”按钮，即可在网页文档中插入一个以红色虚线显示的表单。1.创建表单9.5.2

创建表单并设置属性在网页文档中插入表单后，则会在“属性”面板中显示与表单相关的属性，而通过表单“属性”面板，则可对插入的表单进行名称、处理方式以及表单的发送方法等设置。2.设置表单属性9.5.3

插入表单元素文本输入类元素，主要包括常用的与文本相关的表单元素，如文本、电子邮件、密码、Url、Tel、搜索、数字、范围、颜色、月、周、日期、时间、日期时间、日期时间（当地）和文本区域等。1.文本输入类元素9.5.3

插入表单元素选择元素单选按钮和单选按钮组元素复选框和复选框组元素2.选择类元素9.5.3

插入表单元素文件（File）元素可以在表单文档中制作文件附加项目，由文本框和按钮组成。单击按钮在打开的对话框中可添加上传的文件或图像等，而文本框中则会显示文件或图像的路径。3.文件元素按钮和图像域都有一个共同点，都可在单击后与表单进行交互。按钮包括普通按钮、提交按钮和重置按钮，而图像域也可以称为图像按钮。4.按钮和图像域9.5.3

插入表单元素隐藏（Hidden）元素主要用于传送一些不能让用户查看到的数据。在表单中插入隐藏元素后，是以图标显示的，而且该元素只有

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论