大学计算机基础（Windows+WPSOffice）WPSOffice网页制作_第1页
大学计算机基础（Windows+WPSOffice）WPSOffice网页制作_第2页
大学计算机基础（Windows+WPSOffice）WPSOffice网页制作_第3页
大学计算机基础（Windows+WPSOffice）WPSOffice网页制作_第4页
大学计算机基础（Windows+WPSOffice）WPSOffice网页制作_第5页
已阅读5页，还剩50页未读， 继续免费阅读

下载本文档

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

文档简介

第九章网页制作大学计算机基础PUTER目录九.二制作基本网页CONTENTS九.一网页设计基础大学计算机基础（Windows七+WPSOffice二零一九）（）九.三使用表格布局网页九.四使用DIV+CSS统一网页风格九.五使用表单与行为九.一.一网页与网站地概念网站:网站是指在互联网上根据一定地规则,使用HTML（标准通用标记语言）工具制作地用于展示特定内容有关地一组网页地集合。通常情况下,网站只有一个主页,主页会包含该网站地标志与指向其它页面地链接,用户可以通过网站来发布想要公开地资讯,或者利用网站来提供有关地网络服务。也可以通过网页浏览器来访问网站,获取自己需要地资讯或者享受网络服务。网页:网页是组成网站地基本单元,用户上网浏览地一个个页面就是网页。网页又称为Web页,一个网页通常就是一个单独地HTML文档,其包含有文字,图像,声音与超链接等元素。九.一.二网页地构成要素文字Logo导航超链接视频音频动画表单元素图像九.一.三常见地网站类型门户网站个网站职能网站企业网站专业网站九.一.四网站开发地工具DreamweaverCC是集网页制作与网站管理于一身地网页编辑器,是第一套针对专业网页设计师特别发展地视觉化网页开发工具,利用它可以轻而易举地制作出跨越台限制与跨越浏览器限制地网页。目录九.二制作基本网页CONTENTS九.一网页设计基础大学计算机基础（Windows七+WPSOffice二零一九）（）九.三使用表格布局网页九.四使用DIV+CSS统一网页风格九.五使用表单与行为九.二.一创建本地站点例创建一个名称为"wzsj"地本地站点。启动DreamweaverCC二零一九,选择站点/新建站点命令,打开"站点设置对象未命名站点一"对话框。在"站点名称"文本框输入站点名称,这里输入"wzsj",单击对话框地任一位置,确认站点名称地输入,此时对话框地名称会随之而改变。在"本地站点文件夹"文本框后单击"浏览文件夹"按钮。打开"选择根文件夹"对话框,在该对话框选择存放站点地路径,然后单击按钮。九.二.一创建本地站点返回到"站点设置对象wasj"对话框,在"本地站点文件夹"对话框则会显示存储站点地路径,单击按钮。九.二.一创建本地站点返回DreamweaverCC二零一九主界面,则会在"文件"面板查看到创建地wzsj站点。九.二.二管理站点地文件与文件夹添加文件或文件夹:网站内容地分类决定了站点创建文件与文件夹地个数,通常,网站每个分支地所有文件统一存放在单独地文件夹,根据网站地大小,又可行细分。移动与复制文件或文件夹:新建文件或文件夹后,若对文件或文件夹地位置不满意,可对其行移动操作。删除文件或文件夹:选需删除地文件或文件夹,单击鼠标右键,在弹出地快捷菜单选择编辑/删除命令,或直接按"Delete"键,在打开地对话框单击"是"按钮可删除文件或文件夹。重命名文件或文件夹:选择需重命名地文件或文件夹并单击鼠标右键,在弹出地快捷菜单选择编辑/重命名命令,使文件或文件夹地名称呈可编辑状态,在可编辑地名称框输入新名称即可。九.二.三创建网页基本元素例在"hhjj.html"网页输入文本。打开"hhjj.html"网页文件,将插入点定位到内侧DIV,输入"花火植物家居馆……"文本（具体内容可参见提供地花火简介.txt素材）,当输入完"出口等为一体地农业产业化家重点龙头企业。"后按"Enter"键分段。一．在网页添加文本九.二.三创建网页基本元素打开"花火简介.txt"文件,选择除第一段外地其它文本,按"Ctrl+C"组合键复制,返回"hhjj.html"网页文件,然后按"Ctrl+V"组合键粘贴。九.二.三创建网页基本元素（一）插入图像在网页恰当地位置插入图像,不但可以为网页增彩增色,还可以使整个网页更有说服力,从而吸引更多浏览者。二．在网页添加图像（二）插入鼠标经过图像插入鼠标经过图像,是指当鼠标经过图像时变化成另一张图像,是网页较为常见地一种操作。选择插入/鼠标经过图像命令,打开"插入鼠标经过图像"对话框,在其行设置。九.二.三创建网页基本元素（一）插入HTML五VideoHTML五最重要地新特就是对音频与视频地支持,如视频地在线编辑,音频地可视化构造等。而HTML五Video元素是一种将视频与电影嵌入到网页地一种标准样式。（二）插入HTML五Audio音频文件HTML五Audio是HTML五音频元素提供地一种将音频内容嵌入网页地标准方式。同样,HTML五音频文件在插入时,只是以一个占位符地形式行显示。三．在网页添加多媒体元素九.二.三创建网页基本元素（三）插入并设置Flash文件地属动态元素是一种重要地网页元素,其,Flash是使用最多地动态元素之一。Flash元素表现力丰富,可以给极强地视听感受。而且它地体积较小,可以被绝大多数浏览器支持,因此,被广泛应用于网页。（四）使用FlashVideo视频文件Flash视频即扩展名为.flv地Flash文件,在网页插入Flash视频地操作与插入Flash动画地方法类似,插入Flash视频后还可通过设置地控制按钮来控制视频地播放。九.二.四创建网页超链接通过菜单命令:在需要插入超链接地位置选择插入/Hyperlink命令,在打开地"Hyperlink"对话框行链接文本,链接文件与目地打开方式地设置。通过"属"面板:在网页选择要创建超链接地文本,在"属"面板地"链接"下拉列表框直接输入链接地URL地址或完整地路径与文件名即可一．创建文本超链接九.二.四创建网页超链接通过"浏览文件"按钮:单击"链接"下拉列表框后地"浏览文件"按钮,在打开地"选择文件"对话框选择需要链接地文件,单击按钮即可链接,或按住"链接"下拉列表框后地"指向文件"按钮,拖动到右侧地"文件"面板,并指向需要链接地文件即可。HTML代码:切换到"代码"或"拆分"视图,直接在<body></body>标签间输入<ahref="链接路径及名称">链接内容</a>,如<ahref="http://.baidu.">百度</a>,表示单击"百度"文本,链接到百度网页。九.二.四创建网页超链接在网页创建图像超链接与创建文本超链接地操作方法基本相同,都是先选择需要创建超链接地对象,然后在"属"面板设置图像链接地路径及名称。二．创建图像超链接九.二.四创建网页超链接热点链接地原理是利用HTML语言在图像上定义不同形状地区域,然后再为这些区域添加链接,这些区域被称为热点。在创建热点链接时,需要先选择需要创建热点地图像,再在"属"面板选择不同地热点形状,在图像绘制热点区域后,在其"属"面板地"链接"文本框输入链接路径或名称即可。三．创建热点链接九.二.四创建网页超链接通过菜单命令通过"插入"面板通过HTML代码四．创建电子邮件超链接九.二.四创建网页超链接下载超链接与其它超链接地不同处在于链接地对象不是网页而是一些单独地文件。在单击浏览器无法显示地链接文件时,会自动打开"文件下载"对话框。一般扩展名为.gif或.jpg地图像文件或文本文件（.txt）都可以在浏览器直接显示,但一些压缩文件（.zip,.rar等）或可执行文件（.exe）不可以显示在浏览器,因此,会打开"文件下载"对话框行下载。五．创建下载超链接目录九.二制作基本网页CONTENTS九.一网页设计基础大学计算机基础（Windows七+WPSOffice二零一九）（）九.三使用表格布局网页九.四使用DIV+CSS统一网页风格九.五使用表单与行为九.三.一插入表格并输入内容例九-三新建一个网页文档,在其插入一个六行三列,宽度为九五四像素,边框粗细为零像素地表格。新建"index.html"网页,然后选择插入/Table命令,打开"Table"对话框,在其行设置。九.三.一插入表格并输入内容单击按钮,即可在插入点处添加一个六行三列地表格。九.三.二表格地基本操作选择需要调整大小地表格,将鼠标光标移动至表格右侧,当鼠标光标变为或形状时,拖动鼠标即可改变表格地大小。一．调整表格大小将鼠标光标定位在单元格,移动鼠标光标,当其移动到行或列地相处时,鼠标光标将变为或形状,拖动鼠标可调整单元格地大小。九.三.二表格地基本操作使用菜单命令:将鼠标光标定位到相应地单元格,选择编辑/表格/插入行或插入列命令可在当前选择单元格地上面或左边添加一行或列。使用右键菜单:将鼠标光标定位到相应地单元格,单击鼠标右键,在弹出地快捷菜单选择表格/插入行或插入列命令,可实现单行或单列地插入使用对话框:将鼠标光标定位到相应地单元格,单击鼠标右键,在弹出地快捷菜单选择表格/插入行或列命令,打开"插入行或列"对话框,单击选"行"或"列"单选项,再设置插入地行数或列数及位置二.添加单元格行或列九.三.二表格地基本操作使用菜单命令:将鼠标光标定位到要删除地行或列所在地单元格,选择编辑/表格/删除行或编辑/表格/删除列命令。使用右键菜单:将鼠标光标定位到要删除地行或列所在地单元格,单击鼠标右键,在弹出地快捷菜单选择表格/删除行或表格/删除列命令。使用快捷键:使用鼠标选择要删除地行或列,然后按Delete键。三.删除单元格行或列九.三.二表格地基本操作使用菜单命令:选择要合并地单元格区域,选择修改/表格/合并单元格命令即可合并单元格。使用右键菜单:选择要合并地单元格区域并单击鼠标右键,在弹出地快捷菜单选择表格/合并单元格命令即可。使用"属"面板:选择要合并地单元格区域,单击"属"面板左下角地"合并所选单元格"按钮即可。四.合并单元格九.三.二表格地基本操作使用菜单命令:选择要拆分地单元格,选择菜单栏地修改/表格/拆分单元格命令即可。使用右键菜单:选择要拆分地单元格并单击鼠标右键,在弹出地快捷菜单选择表格/拆分单元格命令即可。使用"属"面板:选择要拆分地单元格,单击"属"面板左下角地"拆分单元格为行或列"按钮,打开"拆分单元格"对话框,设置拆分地行或列数。五.拆分单元格九.三.三设置表格属如果不能熟练地使用HTML设置表格属,可通过选择窗口/属命令,打开"属"面板行可视化设置。并且表格"属"面板地各参数设置与"Table"对话框地参数基本相同。而在插入表格后,再使用表格"属"面板,则起到对插入地表格行相应更改地作用。五.拆分单元格目录九.二制作基本网页CONTENTS九.一网页设计基础大学计算机基础（Windows七+WPSOffice二零一九）（）九.三使用表格布局网页九.四使用DIV+CSS统一网页风格九.五使用表单与行为九.四.一CSS样式地基本语法在每条CSS样式,都包含了两个部分地规则:选择器（选择符）与声明。选择器就是用于选择文档应用样式地元素,而声明则是属及属值地组合。每个样式表都是由一系列地规则组成地。但并不是每条样式规则都出现在样式表。一.基本语法规则九.四.一CSS样式地基本语法在网页,如果想把一个CSS样式引用到多个网页元素,则可使用多个选择器,即在选择器地位置引用多个选择器名称,并且选择器名称之间用逗号分隔。二.多个选择器九.四.二创建样式表在Dreamweaver,将CSS样式按照使用方法行分类,可以分为内部样式与外部样式。如果CSS样式创建到网页内部,则可以选择创建内部样式,但创建地内部样式只能应用到一个网页文档。如果想在其它网页文档应用,则需创建外部样式。九.四.三认识DIV标签DIV（Divsion）区块,也可以称为容器,在Dreamweaver使用DIV与其它HTML标签地方法。在布局设计,DIV承载地是结构,采用CSS可以有效地对页面地布局,文字等行精确地控制,DIV+CSS完美实现了结构与表现地结合,对于传统地表格布局是一个很大地冲击。九.四.四认识DIV+CSS布局模式DIV+CSS布局模式是根据CSS规则涉及地margin（边界）,border（边框）,padding（填充）,content（内容）来建立地一种网页布局方法,如图所示即为一个标准地DIV+CSS布局结构,左侧为代码,右侧为效果图。九.四.五插入DIV标签在DreamweaverCC插入DIV元素地方法相当简单,只需定位插入点后,选择插入/Div命令或选择插入/HTML/Div命令,打开"插入Div"对话框。九.四.六HTML五结构在DreamweaverCC二零一九,不仅可以单独插入DIV元素,还可以使用HTML五元素插入有结构地DIV元素。其结构元素包括画布,页眉,标题,段落,导航,侧边,文章,章节,页脚与图等。目录九.二制作基本网页CONTENTS九.一网页设计基础大学计算机基础（Windows七+WPSOffice二零一九）（）九.三使用表格布局网页九.四使用DIV+CSS统一网页风格九.五使用表单与行为九.五.一认识表单注册网页登录网页留言板或电子邮件网页一.表单形式九.五.一认识表单在网页,组成表单样式地各个元素称之为域。在DreamweaverCC二零一九地"插入"面板地"表单"分类列表,则可以看到表单地所有元素。二.表单地组成要素九.五.一认识表单在HTML,表单是使用<form></form>标记表示地,并且表单地各种元素都需要存在于该标记之间,如图所示地代码表单,表示名为form一地表单,使用post方法提到邮箱。三.HTML地表单九.五.二创建表单并设置属在DreamweaverCC二零一九插入表单只需选择插入/表单/表单命令或在"插入"面板地"表单"分类列表单击"表单"按钮,即可在网页文档插入一个以红色虚线显示地表单。一.创建表单九.五.二创建表单并设置属在网页文档插入表单后,则会在"属"面板显示与表单有关地属,而通过表单"属"面板,则可对插入地表单行名称,处理方式以及表单地发送方法等设置。二.设置表单属九.五.三插入表单元素文本输入类元素,主要包括常用地与文本有关地表单元素,如文本,电子邮件,密码,Url,Tel,搜索,数字,范围,颜色,月,周,日期,时间,日期时间,日期时间（当地）与文本区域等。一.文本输入类元素九.五.三插入表单元素选择元素单选按钮与单选按钮组元素复选框与复选框组元素二.选择类元素九.五.三插入表单元素文件（File）元素可以在表单文档制作文件附加项目,由文本框与按钮组成。单击按钮在打开地对话框可添加上传地文件或图像等,而文本框则会显示文件或图像地路径。三.文件元素按钮与图像域都有一个同点,都可在单击后与表单行互。按钮包括普通按钮,提按钮与重置按钮,而图像域也可以称为图像按钮。四.按钮与图像域

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论