第二篇 网页设计制作篇(skb)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
上机作业
• 模仿练习
– 模仿本讲课内容,制作一张图文并茂的网页, 素材自备,内容自定。
第三讲 建立网页链接
学习内容
• • • • • • • • • • • 超链接的概念 内部链接 外部链接 设置链接样式 锚点链接 电子邮件链接 下载链接 空链接 图像热区链接 创建导航条链接 跳转菜单(即友情链接)
十、创建跳转菜单
介绍:跳转菜单是网页中的弹出式菜单,可以创建任何文件 类型的链接。利用跳转菜单可以有效地节约版面,因此 广泛应用。
步骤: **插入栏——“表单”——“跳转菜单”按钮 **在“插入跳转菜单”对话框中, 在文本后输入对应的文 本 **在“选择时,转到RUL”文本框中输入要跳转的完整网址 **单击+号继续添加其他菜单项 **选中跳转菜单,通过属性面板可以编辑菜单“列表值”, 并可设定初始显示状态
认识 Dreamweaver CS5
标题栏 菜单栏
插入面板 文档工具栏
水平标尺
垂直标尺
文档编辑窗口
浮动面板
状态栏
属性面板
• 插入面板:主要用于在网页中插入各类网页元素。默认情况 下显示的是“常用”插入栏。
• 文档工具栏:用于切换编辑区视图模式、设置网页标题等, 还可用于在浏览器中浏览网页。 • 浮动面板组:是浮动面板的集合。位置可任意拖动。 • 属性面板:用于设置和查看所选对象的各种属性。不同对象 其属性面板的参数设置项目不同。 • 扩展按钮:可以显示或隐藏浮动面板和属性面板。扩展按钮 有水平和纵向两种,其作用分别介绍如下:水平扩展按钮: 单击编辑窗口右侧的”水平扩展“按钮,可以隐藏或展开工 作界面右侧的浮动面板组,这样可以在水平方向扩大编辑窗 口….. • 状态栏:选择标签、选取工具、手形工具、缩放工具、设置 缩放比率、调整窗口大小,显示文件大小及下载可能需要时 间。
七、创建空链接
创建空链接的作用:
–使一些文本具有链接的效果,但是没有链接的 作用 –促发某段代码以执行某些特殊的功能
步骤:
**选中要制作空链接的对象,在链接文本框中直接 输入#。一般站点首页的导航栏中的首页链接,就 可以是一个空链接。
八、创建图像热区链接
介绍:图像热区指在一幅图片上创建多个区域(热 点),并可以点击出发。当用户单击某个热点时 ,会发生某种链接或行为。 步骤: **选中图像
_self:会在当前网页所在的窗口或框架中打开(默 认方式) _blank:每次链接都创建一个新窗口 _new:在同一个刚创建的窗口中打开 _parent:如果是嵌套的框架,则在父框架中打开
_top:会在完整的浏览器窗口中打开
二、创建外部链接
**步骤1:选中文字或图像后,直接在属性面板的“链 接”文本框中输入外部的链接地址,如 http://www.baidu.com **步骤2:然后在“目标”下拉菜单中设置这个链接的 目标窗口
**锐化
**对比度/亮度
**重新采样:当图片的宽、高缩小后,重新生成更 小的图片
**优化:为图片“瘦身”
鼠标经过时更换图片特效制作
概念:
–指在页面中先显示一张图像,当鼠标移动到该图 像上时,图像切换成另一张图像。
步骤:
**将光标放到要插入图像的地方 **单击菜单“插入记录”→“图像对象”→“鼠标经过 图像”→“插入鼠标经过图像对话框” →设置
一、相关概念
• 表格边框粗细 • 单元格边距 • 单元格间距
内部链接:目标端点是本站中的其他网页。 外部链接:目标点是不同站点或本站点以外的网页。
注意:链接中须使用完整的URL地址 如:http://www.baidu.com
浏览网页网络协议 域名
三、设置链接样式
• 链接颜色:指定用于链接文字的颜色 • 已访问链接:指定链接被访问过的颜色 • 变换图像链接:指定当鼠标位于链接上时的颜色 • 活动链接:指定当鼠标在链接上点击时的颜色
一、添加文本
• • • • • • 添加普通文本 添加空格 添加日期时间 添加水平线 添加特殊字符:© ® 实例操作:
–我的足球网-首页
¥
等
实例
二、设置文本样式
• CSS:Cascading Style Sheet,层叠样式表 或级联样式表,是一组格式设置规则,用于控 制web页面的外观。 • 字体:建议选择常用字体 • 大小 • 颜色 • 风格
onClick="this.style.behavior='url(#default#homepage) ';this.setHomePage('http://www.baidu.com/')"
设默认主页的具体操作:先创建一个空链接,然后在代码 视图相应处中的“#”后空一格,再粘贴上面的一串代码 即可实现
• .PNG格式
–特点:是一种逐步流行的网络图像格式。既融合了gif能 做成透明背景的特点,又具有jpeg处理精美图像的优点。 –用途:常用于制作网页效果图。
六、在网页中插入图片
**插入→图像
**插入面板→常用→图像 **直接将图像文件拖入编辑区
注意:
**在插入图像前应先将网页文件已保存,从而使所插图像 引用正确 **图像插入网页后,应确定图像文件已经存入站点,否则 在下次打开网页时,会出现看不到图像的情况。
七、设置图像属性
**图像——设置的名称
**宽、高——可缩小和放大图片的显示尺寸
**源文件——图片的路径和名称
**替代——图像的说明文字
**边框——图片是否要加边
实例
八、图文混排
**垂直边距和水平边距——图片四周突出的尺寸 **对齐——在一行中图形和文本的对齐方式
实例
九、编辑/优化图片
**裁切
实例
五、设置段落格式
• 对齐方式 • 列表编号
– 列表可以将文本段落用符号或序号标注起来,有两 种类型:项目列表和编号列表。设置项目列表的操 作过程如下:
• 选择要添加列表的若干文本段落
• 单击属性检查器中的“项目列表”按钮或“编号列 表”按钮
• 缩进
六、在网页中插入图片
网页中使用的图片格式
• .GIF格式
什么是超链接
• 所谓的超链接是指从一个网页指向一个目
标的链接关系,这个目标可以是另一个网 页,也可以是相同网页上的不同位置,还 可以是一个图片,一个电子邮件,一个文 件,甚至是一个应用程序。
一、创建内部链接
**step1:选中页面中的文字或图像,在属性面板中 单击“链接”文本框右侧的文件夹图标,以通过浏 览选择一个文件 **step2:在“目标”下拉菜单中,选择文档的打开 位置
**插入栏|常用|电子邮件链接|输入邮件地址 或 在属性面板的链接栏中直接输入“mailto:邮件 地址”
六、创建下载链接
当被链接的文件是exe文件或zip、rar等类型的文 件时,浏览器无法直接打开,便会提示文件会被 下载,这就是网上下载的方法。 步骤: **创建一个到是exe文件或zip、rar类型文件的超链 接即可
网页设计与制作
第二篇 网页设计制作篇
(Dreamweaver CS5)
主要内容纲要
• • • • • • • • • • 回顾HTML Dreamweaver CS3简介与工作界面 网页文件的基本操作 网页制作的基本操作 建立网页链接 表格处理 框架结构 插入多媒体元素 AP DIV元素 行为特效
上机作业
• 模仿练习
– 模仿本讲课内容,在以前你创建好的站点下 制作多个网页文件,并尝试设置学过的各种 超链接,制作成品请提交至邮箱: computer_hustwh@126.com
书面作业
1.什么是超链接?常用的超链接有哪些类型?并 分析其特点。
第四讲 表格处理
学习内容
• • • • • • • 插入表格 设置表格大小 创建数据表格 表格的设置 表格的html标记 表格嵌套:实例操作 利用表格进行网页布局
三、网页文件的基本操作
• 新建网页文件
• 多个编辑文件的切换选择
• 保存指定文件
• 关闭文件
• 打开已建网页文档:
• 预览编辑中的网页(快捷键F12)
四、设置网页外观属性
• 网页标题
• 网页默认字体
• 默认字体大小 • 背景颜色 • 背景图片 • 边距
五、创建站点
什么是站点?
• Dreamweaver 的站点是一种网站中所有相关联文 件的工具。通过站点可以对网站的相关页面及各 类素材进行统一管理,还可以实现将文件上传到 网页服务器,测试网站。 简单的说站点就是一个文件夹。在这个文件夹里 包含了网站中所有用到的文件。通过这个文件夹 (站点)对我们的网站进行管理,有次序,一目 了然。
四、Baidu Nhomakorabea建锚点链接
锚点链接:指到网页某一特定位置的超链接。这种链接的目标 点不是网页,而是文档中的命名锚记,利用这种链接,可以 跳转到当前文档中的某一指定位置上,也可以跳转到其他 文档中的某一指定位置上。 步骤:
**创建命名锚记,就是在网页中设置位置标记,并给该位置 一个名称,以便引用。 **属性面板的链接栏中直接输入“#锚点名”
注意: (1)如果链接的目标锚点标记在当前页面即输入“#锚点名” (2)如果链接的目标锚点标记在其他网页,即要输入目标网页 的地址和名称,然后在输入“#锚点名”
五、创建电子邮件链接
Email链接:单击这种链接,可以启动电子邮件程序 (如outlook)书写邮件,并发送到指定地址。
步骤:
**选中文本和图像
十一、创建脚本链接
通过链接触发脚本命令 **添加到收藏夹: javascript:window.external.addFavorite('http://www .baidu.com','百度网') **表示关闭窗口:javascript:window.close() **表示弹出一个提示对话框:javascript:alert('hello!') **设置为默认主页:(需通过空链接#触发onClick事件)
•
创建站点:
六、设置默认图像文件夹
操作
• 在“文件”面板中点击管理站点→选中一
站点→打开“站点管理”对话框→然后点
“编辑” →再设置“默认图像文件夹”路
径即可。
七、站点管理
站点管理
• • • 编辑站点 复制站点 删除站点
文件面板中实现的操作
• • • 选择编辑网页文件 创建文件或文件夹 剪切/粘贴/复制/删除/重命名文件或文件夹
上机作业
• 熟悉Dreamweaver CS5工作环境 • 模仿练习
– 模仿本讲课内容,创建自己的个人站点,并制
作简单的一句话网页,切换网页试图模式为“
拆分试图”,观察起文档基本语法格式。
第二讲
制作网页的基本操作
学习内容
• • • • • • • • • • 添加、编辑文本 设置文本样式 分段和换行 设置段落格式 网页中使用的图片格式 在网页中插入图像 设置图像属性 图文混排 编辑图片 鼠标经过时更改图片特效
三、编辑文本
• 拖动鼠标选中一个或多个文字、一行或多行文 本,也可以选中网页中的全部文本 • 按BachSpace键或Delete键实现删除文本操作
• 实现复制、剪切、粘贴等操作
• 实现查找与替换查找
• 实现撤销或重做
四、分段与换行
• 分段按Enter回车键(隔一行)
• 换行按Shift+Enter(不分段)
–特点:它的图片数据量小,可以带有动画信息,且可以透 明背景显示,但最高只支持256种颜色。 –用途:大量用于网站的图表Logo、广告条Banner及网页背 景图像。但由于收到颜色的显示,不适合用于照片级的网 页图像。
• .GPEG格式
–特点:可以高效地压缩图片的数据量。使图片文件变小的 同时基本不丢失颜色画质。 –用途:通常用于显示照片等颜色丰富的精美图像。
**在图像属性面板中,使用热区工具(矩形、椭圆、多 边形),在图像上划分热区 **为绘制的每个热区设置不同的链接地址和替代文字
九、创建导航条链接
介绍:使用鼠标经过变换图像的特效,创建图像导 航条。导航条中按钮图像的状态可根据浏览者的 鼠标动作而改变。 步骤: **将光标放到要插入导航条的位置 **设置鼠标经过时变换图像的特效,并为其设定链 接目标
第一讲
网页制作基础
学习内容
• • • • • • • 初识Dreamweaver Dreamweaver CS5工作界面 网页文件的基本操作 设置网页外观属性 创建站点 设置默认图像文件夹 站点的管理
一、Dreamweaver CS5简介
• 软件下载
• 安装 • 启动 • 退出
二、Dreamweaver CS5工作界面