网页设计与制作案例教程（第2版）（胡秀娥） 项目五（网页列表与超链接）_第1页
网页设计与制作案例教程（第2版）（胡秀娥） 项目五（网页列表与超链接）_第2页
网页设计与制作案例教程（第2版）（胡秀娥） 项目五（网页列表与超链接）_第3页
网页设计与制作案例教程（第2版）（胡秀娥） 项目五（网页列表与超链接）_第4页
网页设计与制作案例教程（第2版）（胡秀娥） 项目五（网页列表与超链接）_第5页
已阅读5页，还剩62页未读， 继续免费阅读

下载本文档

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

文档简介

项目五项目导读任务一在网页中添加列表HTML5中的列表元素分为无序列表、有序列表等。使用DreamweaverCC可以直接在网页文档中添加列表，将插入点置于想要插入列表的位置，若单击“插入”面板中的“无序列表”和“列表项”按钮，可添加无序列表；若单击“插入”面板中的“有序列表”和“列表项”按钮，可添加有序列表，如图所示。需要注意的是，列表项标签应嵌套在无序列表或有序列表标签之内。ul无序列表ol有序列表无序列表会将列表项的内容依次排列，并在每一个列表项前添加项目<li></li>符号(默认为实心圆)。无序列表的列表项之间没有先后、主次、轻添加有序列表：文档窗口中自动生成有序列表的代码，如图所<li></1i>字序号，默认为阿拉伯数字。在HTML5中，使用<ol>列表，同样使用<li>标签标记列表项，且一个<ol>标签同样也可以包在“CSS设计器”面板中，可以直接设置列表的3个样式，分别为项目符号的位置、自定义项目符号与项目符号样式，如图所示。显示集示项目符号在列表项之内；outside是默认值，表示项目符号在列表项左侧。(2)list-style-image属性用于设置自定义项目符号。设置方法为，单击该属性右侧的下拉列表，在展开的列表中选择"url"选项，单击编辑框右侧的“浏览”按钮，打开“选择图像源文件”对话框，选择图像文件后单击“确定”按钮，即可自定义项目符号。(3)list-style-type属性用于设置列表项的项目符号，其属性值及说明如表所示。属性值说明属性值说明不使用项目符号小写英文字母实心圆(默认值)大写英文字母空心圆小写罗马数字实心方块大写罗马数字阿拉伯数字日文平假名中文数字日文片假名任务实施——为“传承经典网”主页添加列表+例好，请登录或免费注册体验更多功能传承经典网诗词佳作poetry传承经典“传承经典网”主页导航列表的页面效果任务二在网页中添加超链接超链接像文本和图像一样，是组成网页的基本元本任务首先介绍使用DreamweaverCC在网页中超链接并设置样式的基础知识，通过实际操作加在浏览网页时，有时会通过单击一段文本实现向目标资源的跳转，这些“文本”就是超链接。使用DreamweaverCC可以直接在网页文档中添加超链接，将插入点置于想要插入超链接的位置；单击“插入”面板中的“Hyperlink”按钮，打开“Hyperlink”对话框；接着在“文本”文本框中输入超链接的文本内容，在“链接”文本框中输入目标资源的地址(或单击其右侧的“浏览”按钮，直接选择资源文件),在“目标”下拉列表中选择打开目标资源的方式；单击“确定”按钮，如图所示。添加超链接后，文档窗口中自动生成超链接标签的代码，如图所示。</body>在DreamweaverCC中单击“文件”菜单，在展开的列表中选择“打开”选项，打开“打开”对话框，在其中选择本书配套素材“项目认拆分视图切换为“代码+设计”。单击“属性”面板左下角的矩形热点工具，在图像上按下鼠标并拖动绘制矩形热点区域，如图所示。55使用同样方法为左侧的两道菜绘制热点区域。单击“属性”面板左下角的圆形热点工具，在图像上方绘制3个圆形热点区域，如图所示。代码自动生成完毕，其中<area>标签的href属性值默认为“#”,如图所示。imgsrcimgfmjpgwidthheightusemapimapalt=""/>coords="317,187,444hrefcoords="171,190,298hrefcoords="25,189,1href根据img文件夹中的图像文件及其名称补全第一个矩形热点区域的href属性值，修改代码如下。<<areashape="rect"coords="318,188,445,356"href="img/豹子金钱蛋.jpg">参照步骤7补全剩余热点区域的href属性值，为各个热点区域设置图像链接。完成后将网页文件保存，按“F12”键，在浏览器中查看页面效果，如图所示。通访问前访问后在<body>标签中添加一个<nav>标签，在其中添加_hrefr+backgroumd+backgroumd_添加navaa选择器，设置导航栏中超链接的显示方式为“block”,外边距为“0auto”内边距为“10px000”,文本颜色为“#5d5d5d”,水平对齐方式为(居中对齐),文本划线为(无划线),边框为“1pxdotted#5D5D5D”,如图所示。_文本边征①:previewappndexhtm首页限时优惠品牌特卖实用家电超市生鲜服饰鞋帽儿童娱乐横向导的栏☆2CC中创建一个名为“nav2.html"在<body>标签中添加一个<nav>标签；在<nav>标签中添加一个<div>标签；接着在<div>标签中添加一个无序列表并添加7个列表项；为每一个列表项都添加一个<a>标签，具体代码如图所示。<li><ahref="#">限时优惠</a></li><li><ahref="#">品牌特卖</a></li><li><ahref="#">实用家电</a></li><li><ahref="#">超市生鲜</a></li><li><ahref="#">服饰鞋帽</a></li><li><ahref="#">儿童娱乐</a></li></ul></div>打开“CSS设计器”面板，在“源”窗格中单击“添加CSS源”按钮，在展开的列表中选择“在页面中定义”选项，网页文档的<head>标签中生成<style>标签，在该标签中添加样式。pxpx设置导航栏整体的样式设置导航栏容器元素的样式为“inline-为“inline-block”,左外边距为“10px”内边距均为"10px",圆角均为“10px”背景颜色为“#E0EOAD”,如图所示。:4r:4r共品布局00:设置速记padding内边距为“10px0”,如图所示。②“#D2C78A”背景T text-设置列表项其余样式对于内容较多的网页，一层导航栏无法将导航内容全部显示出来，这时一些网站会通过制作下拉菜单将导航栏进行折叠来节省空间，同时丰富导航栏的功能。例：制作带下拉菜单的横向导航栏，页面效果图。XX带下拉菜鱼的横向导航栏+127.0.contenvGHyzDUSwqwshAAAlirfGKSYKyaOVwaBrbwolxmsjGvykh在Dreamweaver横向导航栏”。CC中创建一个名为“nav3.html”的网页文档，将其网页标题修改为“带下拉菜单的在<body>标签中添加一个<nav>标签；然后在<nav>标签中添加一个class属性值为navt的<div>标签，并在该<div>标签中再添加一个class属性值为td的<div>标签；接着在第二个<div>标签中添加一个class属性值为til的<a>标签，并在<a>标签下方添加一个class属性值为down的<div>标签；在第三个<div>标签中添加5个<a>标签，表示下拉菜单的子选项，具体代码如图所示。<ahref="#"class="til">电视</a><ahref="#">全面屏电视</a><ahref="#"教育电视</a><ahref="#">0LED电视</a><ahref="#">智慧屏</a>打开“CSS设计器”面板，在“源”窗格中单击“添加CSS源”按钮，在展开的列表中选择“在页面中定义”选项，网页文档的<head>标签中生成<style>标签，在该标签中添加样式。设置选项容器元素的样式设置选项容器元素的样式color设置导航栏的样式宽度为“550px”,外边距为“0auto”如图所示。☑显示集设置导航栏容器元素的样式添加.td选择器，设置导航栏选项容器元素的显示方式为…布局+箭布局:120px区背畏pxrgba(0,0,0,0.2):px:pxbackgroundcokr添加.til选择器，设置导航栏选项超链接的显示方式(白色),字号大小为”16px”,文本划线为(无划线),圆角均为“5px”,背景颜色为“#5e9bb0”,鼠标指针形状为☑显示集:block:5px品布局本颜色为“black”,文本划线为(无划线),如图所示。指针移动至导航栏子选项超链接上时超链胜胜显示集.=e7e7e7.=e7e7e7添加.td:hover.down选择器，设置当block十#417e7f项项目实训——制作“图书交易网”主页的导航栏(1)此处可使用本书配套素材“项目五”→“项目实训”文件夹中的“bsonline.ste”站点进行操换本地磁盘中站点文件夹中的文件。(2)内容标签添加在<body>→<header>→<nav>标签内，先创建一个无序列表，然后在其中添加5个列表项，再分别为每个列表项添加一个

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

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

最新文档

评论

0/150

提交评论