大学网页设计第3章
(完整版)网页设计毕业论文
网站的设计与制作目录第一章前言第二章1.1课题来源1.2 网站开发项目需求分析1.3 软件1.4 软件运行环境第二章网站制作2.1做网页的步骤2. 2做网页的要素2.3 系统各模块功能实现第三章网站的设计3.1主页的要求3.2子页的要求第四章结束语参考文献摘要汽车网站是一个结合了汽车销售等多功能浏览的汽车网站,我所使用的软件是Macromedia 公司推出的一款用于网页设计的软件——dreamweaver8。
在网页的制作与链接中,我学到了很多。
关键词:超链接外观性能第一章前言1.1课题来源随着二十一世纪新兴科技的飞速发展,如今的电子信息产业正在经受着一个巨大的挑战,同时也面临着一个重大的机遇。
就目前的科技发展水平而言,电子信息产业的发展已经不能够满足社会化大生产的要求,因此,各个国家集中人力、财力加大对信息技术产业的投入,以适应目前需要。
可喜的是在这几十年的发展中我们有了互联网。
互联网加大了我们了解世界的眼界,缩紧了人与人之间的距离,这就更容易的使我们走上信息化的道路。
以往,人们出行都以自行车居多,后来公交事业发展壮大,人们便乘坐公交汽车,现如今,随着人们生活水平的提高,越来越多的家庭已经拥有或者想拥有自己的私家车。
正是因为人们的这些需求,越来越多的汽车网站出现在网络上,使人们可以随时了解自己想知道的汽车方面的新闻,真正的做到足不出户,便知天下事。
把汽车销售与网络连接起来,是今后汽车销售发展的必然方向之一。
1.2 网站开发项目需求分析一个网站项目的确立是建立在各种各样的需求上面的,这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要,其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。
面对对网站开发拥有不同知识层面的客户,项目的负责人对用户需求的理解程度,在很大程度上决定了此类网站开发项目的成败。
因此如何更好地的了解、分析、明确用户需求,并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员,保证开发过程按照满足用户需求为目的正确项目开发方向进行,是每个网站开发项目管理者需要面对的问题。
网页设计与制作 第3章 CSS技术基础
第3章 CSS技术基础
用户可以在CSS中插入注释来说明用户代码的意思,
3.3 在网页中使用CSS
3.3.1 在标记符中直接嵌套样式信息
在标记符中直接嵌套样式信息又称为“局部引 用”,即将样式直接嵌套在 HTML 标记里使用的。 用这种方法,可以很简单的对某个元素单独定义 样式。 使用style属性可以在HTML标记符中直接嵌入 样式定义,如下所示: <标记符style:"property l:value l;property 2: value 2;……">
3.4.2 文本属性
1.文字间隔属性(word-spacing)
文字间隔属性定义一个附加在文字(单词)之 间的间隔数量。该值必须符合长度格式,允许使
用负值。
需要特别说明的是,该属性是针对英文单词的
间隔,而不是中文的文字间隔,中文的文字间隔
应该用下面讲到的letter-spacing。同时在中文版的 IE浏览器中也不支持该属性。
CSS 的主要功能是通过对 HTML 选择器进行设定,
来实现对网页中的字体、字号、颜色、背景、图像记
其他元素的控制,使网页能够完全按照设计者的要求
来显示。
3.2 CSS样式
3.2.1 CSS样式表组成
CSS 的定义由三部分构成:选择符 selector、属性 property和属性值value。其基本格式如下: selector{property l : value l ; property 2 : value 2;……} property表示由CSS标准定义的样式属性,value表示 样式属性的值。
网页设计第3章习题答案
习题1.下面哪一项是换行符标记?( C )A.<body> B.<font> C.<br> D.<p>2.在HTML中,标记<font>的Size属性最大取值可以是(C )。
A. 5 B.6 C.7 D.83.在HTML中,标记<pre>的作用是( B )。
A.标题标记B.预排版标记C.转行标记D.文字效果标记4.下面的( B )特殊符号表示的是空格。
A." B. C.& D.©5.要设置一条1像素粗的水平线,应使用的HTML语句是_ <hr size=1>_ 。
6.在HTML文件中,版权符号的代码是__©___。
7.使页面的文字居中的方法有<center>…</center>__。
8.标题字的标记是<h>____。
实验1 关于我们<html><head><title>班级网站</title></head><body><h2 align="center">关于我们</h2><font size="3"><p align="left"> <font color="#FF3300" size="5" face="宋体"><b>五</b></font>十个不同的分子,在不同状态下进入了同一容器,这就组成了我们的家——<strong>多媒体专业</strong>。
网页设计教程第3章
<head>标签内包含文档的元信息 ,如字符集定义、样式表链接、 脚本链接等。
一个基本的HTML文档结构包括 `<!DOCTYPE html>`、`<html>` 、`<head>`和`<body>`等标签 。
<html>标签是整个HTML文档的 根元素。
<body>标签内包含网页的所有 内容,如文本、图片、链接、视 频等。
网页设计教程第3章
目录
• 网页计实战
01
网页设计基础
网页设计概述
网页设计的定义
网页设计是指使用HTML、CSS和 JavaScript等技术,将内容、布局 和交互效果整合在一起,创建出 能够在互联网上访问的网页的过 程。
网页设计的目的
网页设计的目的是为了向用户传 递信息、提供服务或产品,同时 给用户带来良好的视觉和交互体 验。
或提供额外信息。
02 动画与过渡效果
运用适当的动画和过渡效 果,提升页面的动态感和 视觉效果。
04 响应式设计
确保网页在不同设备和屏
幕尺寸上的适应性,提供
一致的用户体验。
THANKS
感谢观看
网页设计的发展历
程
随着互联网的普及和发展,网页 设计经历了从静态网页到动态网 页,再到响应式网页的演变过程。
网页设计的基本元素
文本
文本是网页设计中最重要的元素之一,它能够直 接向用户传递信息。在网页设计中,应选择易于 阅读和理解的字体和字号,同时注意文本的可读 性和可访问性。
链接
链接是网页设计中不可或缺的元素之一,它能够 引导用户跳转到其他页面或网站。在网页设计中 ,应合理设置链接的位置、颜色和样式,同时注 意链接的可点击性和可用性。
网页制作教程第3章
3.2.2 插入图像
(2) 在【选择图像源文 对话框中点选【 件】对话框中点选【文 件系统】单选钮, 件系统】单选钮,在 ch3】 【ch3】文件夹的列表 框中选择要插入的图像 文件,单击【确定】 文件,单击【确定】按 如图3 所示。 钮,如图3-6所示。弹 出【图像标签辅助功能 属性】对话框。 属性】对话框。
3.1.1 添加文本
2. 插入空格 若要在文本中插入空格,可执行下列操作之一。 在菜单栏中选择【插入记录】→【HTML】→ 【特殊字符】→【不换行空格】命令。 按<Ctrl>+<Shift>+<空格>组合键。 在【插入】工具栏的【文本】选项卡中,选 择【字符】下拉列表框中的【不换行空格】命令。
3.1 添 加 文 本
3.1.1 添加文本 3.1.2 设置文本格式
3.1.1 添加文本
1. 插入文字 若要将文字添加到网页文档中,可执行下列操 作之一。 ◆直接在【文档】窗口中输入文字。 ◆从其他应用程序中复制文本,切换到 Dreamweaver,将插入点定位在【文档】窗口的【设 计】视图中,然后在菜单栏中选择【编辑】→【粘 贴】命令。 ◆在菜单栏中选择【编辑】→【选择性粘贴】命 令,弹出【选择性粘贴】对话框,然后选择需要的 选项。
3.3 添 加 声 音
3.3.1 适合网页使用的声音格式 3.3.2 链接到声音文件 3.3.3 嵌入声音文件
3.3.1 适合网页使用的声音格式
MIDI格式 1. MIDI格式 MIDI是 乐器数字接口” MIDI是“乐器数字接口”(Musical Instrument Digital Interface)的简称 其扩展名为MID MIDI记录的不是声音本 的简称, MID。 Interface)的简称,其扩展名为MID。MIDI记录的不是声音本 而是将每个音符记录为一个数字, 身,而是将每个音符记录为一个数字,从而形成声音文件的格 MIDI格式文件声音效果的好与差 格式文件声音效果的好与差, 式。MIDI格式文件声音效果的好与差,与用户计算机声卡质量 有直接关系。很小的MIDI MIDI格式文件就可以提供较长时间的声音 有直接关系。很小的MIDI格式文件就可以提供较长时间的声音 剪辑。 剪辑。 MP3格式 2. MP3格式 MP3格式 是运动图像专家组音频第3 格式, MP3格式,是运动图像专家组音频第3层(Motion Picture Layer-3),或称为MPEG音频第3 MPEG音频第 Experts Group Audio Layer-3),或称为MPEG音频第3层的一 种压缩格式,它可使声音文件明显缩小。MP3文件的声音质量 种压缩格式,它可使声音文件明显缩小。MP3文件的声音质量 非常好,如果正确录制和压缩mp3文件,其音质甚至可以和CD mp3文件 非常好,如果正确录制和压缩mp3文件,其音质甚至可以和CD 音乐相媲美。MP3技术用户可以对文件进行 流式处理” 技术用户可以对文件进行“ 音乐相媲美。MP3技术用户可以对文件进行“流式处理”,以 便用户不必等待整个文件下载完成即可收听该文件。 便用户不必等待整个文件下载完成即可收听该文件。
第3章 Dreamweaver基本操作
本章目标任务:
3.1 中文Dreamweaver8工作环境
中文Dreamweaver8提供可视化的网页开发环境,具 有所见即所得的功能。它的工作窗口简洁明了,功能面 板及工具栏中几乎集中了所有的重要功能,属性面板放 在窗口底部外,其他面板多放在窗口的右边,可随时打 开与关闭,并能折叠和展开,这样就克服了以往版本浮 动面板位置较乱,有时会影响网页编辑的不足。 中文Dreamweaver8工作环境即中文Dreamweaver8应 用程序窗口,该应用程序窗口由标题栏、菜单栏、文档 工具栏、文档编辑窗口、浮动面板等组成,文档编辑窗 口由文档标题栏、页面编辑区、状态栏等组成,浮动面 板包括插入面板、属性面板、面板组等。中文 Dreamweaver8工作环境图3-1所示:
3.1 中文Dreamweaver8工作环境
输入面板 文档工具栏 文档窗口 菜单栏 标题栏 面板组
属性面板
页面编辑区
状态栏
图3-1 中文Dreamweaver8工作环境
3.1 中文Dreamweaver8工作环境
1. 标题栏 标题栏上显示当前网页的页面标题及打开 的文件名。若是对一个新网页进行编辑,则在 对此网页命名之前自动将此文件命名为 “Untitled-x”(x是按顺序产生的数字)。 2. 菜单栏 和其他应用软件基本相同,菜单栏中的每 一项都有一个下拉式菜单,Dreamweaver中大部 分操作都可以通过菜单项的下拉菜单来实现。
3.1 中文Dreamweaver8工作环境
属性面板 属性面板是使用频率最高的一个浮动面板,被放置在窗口的下 边。属性面板中的项目会随着网页中选定对象的不同而改变的。在 属性面板中,详细地列出了所选对象的属性参数,用户可以通过属 性面板查看或修改这些参数。 选择【窗口】→【属性】菜单命令或按快捷键【Ctrl】+【F3】, 可显示或隐藏属性面板。 面板组 常用面板组显示在窗口的右侧,如文件面板、资源面板、CSS 样式面板、框架面板层面板、行为面板等。非常用面板组显示在窗 口的下面,如结果面板、时间轴面板等。 使用“窗口”菜单中的相应面板选项,可以显示或隐藏相应面 板。在面板标题上单击右键,在快捷菜单中选择“关闭面板组”, 也可关闭相应面板。 各种面板的具体应用性操作在后面课程中再具体介绍。
网页设计与开发第3章试卷与答案
《网页设计与开发第3章》试卷一、选择题1.在HTML中,下面是段落标签的是()。
A.<html>与</html>B.<head>与</head>C.<body>与</body>D.<p>与</p>答案: D2. 创建黑体字的文本标签是()A. <pre></pre>B. <h1></h1>C. <h6></h6>D. <b></b>答案:D3. 正确描述创建一个一级标题居中的句法是()。
A.<h0 align=center> heading text </h0>B.<h1 align=center> heading text </h1>C.<h align=center> heading text </h>D.<ht align=center> heading text </ht>答案: B4. 下面哪一项是换行符标记()。
A.<body>B.<font>C.<br>D.<p>答案: C5 .要在文本的首行空两个汉字,就要插入()个空格。
A.lB.2C.3D.4答案: D6 .在网页的源代码中表示加粗文字显示的标记是()。
A.<b></b>B.<p></p>C.<body></body>D.<table></table>答案: A7 .缩进排列对应的源代码中的标记是()。
A.<block></block>B.<blockquote></blockquote>C.<quote></quote>D.<qutoeblock></quoteblock>答案: B8.当网页既设置了背景图像又设置了背景色,那么()。
计算机基础实训作业-第3章 网页设计实验
第三章网页设计实验1 网站的创建和管理一、实验目的1、学会创建网站。
2、理解网站与网页的概念,了解网站结构。
3、掌握网站中网页的基本编辑方法。
二、实验内容和步骤1、创建一个新站点在Dreamweaver中使用“站点定义向导”创建一个本地新站点。
(1)选择“站点”|“新建站点”命令,打开站点定义对话框的“基本”选项卡,在“您打算为您的站点起什么名字”文本框中输入新建站点的名称,如图3-1所示。
图3-1站点定义对话框(2)单击“下一步”按钮,在“编辑文件,第2部分”选项区中,显示是否选择使用的服务器技术,这里选择“否,我不想使用服务器技术”单选按钮。
(3)单击“下一步”按钮,在“编辑文件,第3部分”选项区的“您将把文件存储在计算机的什么位置?”文本框中输入站点文件存放的位置或者点击右边的文件夹图标在本地计算机选择一个文件夹(例:E:\MySite\),没有输入或选择将使用系统默认值。
(4)单击“下一步”按钮,将站点定义对话框的“共享文件”选项区的“您如何连接到远程服务器”下拉列表框中选择“无”选项。
(5)单击“下一步”按钮,将站点定义对话框的“总结”选项区中,将显示以上设置步骤的详细信息。
(6)单击“完成”按钮,一个本地新站点已经创建完成。
此时选择“窗口”|“文件”命令,在打开的“文件”面板中将显示创建的新站点,如图3-2所示。
图3-2 “文件”面板(7)要设置本地文件夹,可以选择“站点”|“管理站点”命令,将打开管理站点对话框,如图3-3所示。
在左侧的列表中选择“我的站点”或对应的站点,在右侧选择“编辑”命令,将显示“本地信息”的所有参数设置选项,如图3-4所示。
如果显示的是如图3-1的站点定义对话框,点击上面的“高级”标签即可切换到如图3-4所示。
图3-3 管理站点对话框图3-4 本地信息对话框2、在站点中创建一个新的网页(1)在文档窗口中,选择“文件”|“新建”命令,在打开的“新建文档”对话框中选择要创建的文档类型,如图3-5所示。
网页设计
编号 0 4 7 10 13 16 19 22
过滤方式 盒状收缩 由下往上 由下往上 水平格状百叶窗
从左右两端向中间展开 从中间向上下两端展开 从左上角向右下角展开
编号 1 5 8 11 14 17 20 23
设置上标与下标:sup、sub
使用上标与下标可以将一段文字以小字体方式显示在另一段 文字的右上角或右下角,在各种数学公式、计算、书籍文章 注解中都有广泛的运用 <sup>……</sup> <sub>……</sub> Xx+Yy
16
HTML入门基础
文字段落与列表设计
输入空格等特殊符号
在HTML文件中,使用键盘上的空格键只能输入一个空格, 如果想输入多个空格,许利用空格符号: 除了空格之外,网页中还有一些其它的特殊符号,需要用 代码来表示:
<nobr>……</nobr>
换行标记:br
段落之间是隔行换行的。如果觉得段落间的行间距过大, 可以使用换行标记br来完成文字的紧凑换行。
登鹳雀楼 <P>白日依山尽,<br>黄河入海流。<br> 欲穷千里目,<br>更上一层楼。 </P>
20
HTML入门基础
3.3 文字段落与列表设计
预格式化标记:pre
过滤方式 盒状放射 由上往下 由下往上 垂直格状百叶窗
从中间向左右两端展开 从左上角向右下角展开 从左下角向右上角展开 随即产生一种过渡方式
编号 3 6 9 12 15 18 21
网页设计与制作第3章 建立本地站点
3.1 创建本地站点
图3-3 “站点设置”对象对话框
3.1 创建本地站点
• 单击“本地站点文件夹”文本框后的按钮,打开 “选择根文件夹”对话框,选择“mysite”文件夹 作为根文件夹,当对话框左下角显示“选择: mysite”,单击“选择”按钮,如图3-4所示。这 时回到了“站点设置”对话框界面,如图3-3所示。 此时“C:\mysite”文件夹与“mysite”站点相对应, 存放本站点的所有文件夹和文件。 • 提示:在“本地站点文件夹”文本框中可直接输 入站点对应文件夹的路径。
3.1 创建本地站点
• (2)远程站点,即远程文件夹,存储用于测试、生 产和协作等用途的文件,远程文件夹通常位于运 行 Web 服务器的计算机上。远程文件夹包含用户 从英特网访问的文件。
3.1 创建本地站点
• 3.1.2 创建本地站点 • 1.创建站点文件夹 • 建立本地站点就是在某台电脑硬盘上建立一个文 件夹,然后将所有与制作网页相关的文件(图片、 视频等)都存放在里面,以便进行网页的制作和管 理。 • 通常一个网站包含多种类型的文件,比如图片、 视频、CSS、脚本文件,为了方便上传和维护, 在建立站点文件夹时,应注意以下几点:
3.1 创建本地站点
• 不要将所有的文件都存放在根文件夹下,否则容 易混淆,不利于管理和上传。 • 按照文件的类型建立不同的子文件夹。 • 根文件夹、子文件夹、文件的命名最好使用简短 有一定含义的小写英文或拼音。 • 按照以上原则,在磁盘上建立一个文件夹,例如: C:\mysite,用于存放站点中所有文件夹和文件,然 后在mysite文件夹下新建三个名称为images、 video、styles的子文件夹。images用
3.2 管理本地站点
图3-7 “站点管理”对话框
网页设计第3章
3.6 插入Flash动画
2.设置透明背景
(1) 在“文档”窗口的“设计”视图中,选择插入的Flash占位符, 打开Flash属性面板。 (2) 单击编辑参数按钮,出现参数对话框。 (3) 单击“添加”按钮,输入如图所示参数,单击“确定”按钮。
“参数”对话框
3.6 插入Flash动画
3.插入Flash按钮
列表项目
“文本属性”面板
3.1 文本的输入和编辑
(1) 设置文本字体 设置文本字体,先选择要设置字体的文本,然后在文本属性面板的“字体”列 表中选择合适字体类型。DreamWeaver中默认的是宋体字,“字体”列表默认显 示的是英文字体类型,若设置其他中文字体,要先将中文字体类型添加到字体列表 中,方法是: ①单击文本属性面板中“字体”列表按钮,选择“编辑字体列表”命令,弹出 “编辑字体列表”对话框。 ②在“可用字体”列表中选择要添加的字体,双击鼠标或单击按钮,将其添加 到“选择的字体”列表中。字体添加完毕后,单击“确定”按钮。
3.3 网页图像格式
3.PNG图像
PNG的含义是“可移植性网络图像”,是网络接受的新型图像文 件格式。PNG能够提供长度比GIF小30%的无损压缩图像文件,但与 JPEG相比,压缩量较少,它同时提供 24位和48位真彩色图像支持以 及其他诸多技术性支持。由于PNG非常新,所以目前并不是所有的程 序都可以用它来存储图像文件, Photoshop可以处理PNG图像文件,
(2) 链接 在“链接”选项中可以设置链接的字体、颜色和下划线样式等,如图 所示。
“链接”对话框
3.2 页面属性
(3) 标题/编码 在“标题/编码”选项中可以设置网页标题和编码类别,如图所示。
“标题/编码”对话框
网页设计教程-第3章课件
• 在这段源代码中设置了网页的一些基本属性如页名、标题、正文和页面 背景色等。
• 2. 保存文档 • 当创建一个新的文档并编辑后,就要保存该文档。 • 保存文档可以单击【文件】|【保存】命令,或是按下Ctrl+S组合键。如果
文档尚未被保存,则会出现如图3.5所示的【另存为】对话框。选择路径 并输入文件名,单击【保存】按钮,即可保存文档。如果文档已经被保 存过,则会直接保存文档,不会出现该对话框。
学习交流PPT
4
3.1 制作文本特效
• 文本是网页中最基本的元素。好的文本格式,能够 充分体现文档要表述的意图,激发读者的阅读兴趣。 在网页中设置丰富的字体、多种的段落格式以及赏 心悦目的文本效果,对于一个专业的网站来说,是 必不可少的要求之一。在本节中将讲述如何创建一 个文档,并在文档中添加各种各样的文字。
利用【已访问链接】文本框可以设置文档页面中已经访问过的超链接的 文字颜色。
网页设计第3章
表单
网页中的表单通常用来接受用户在浏览器端的输入, 网页中的表单通常用来接受用户在浏览器端的输入,然 后将这些信息发送到用户设置的目标端。 后将这些信息发送到用户设置的目标端。这个目标可以 是文本文件、 是文本文件、Web页、电子邮件,也可以是服务器端的 页 电子邮件, 应用程序。表单一般用来收集联系信息、接受用户要求、 应用程序。表单一般用来收集联系信息、接受用户要求、 获得反馈意见、设置来宾签名簿、 获得反馈意见、设置来宾签名簿、让浏览者注册为会员 并以会员的身份登陆站点等。 并以会员的身份登陆站点等。 表单由不同功能的表单域组成, 表单由不同功能的表单域组成,最简单的表单也要包含 一个输入区域和一个提交按钮。站点浏览者填写表单的 一个输入区域和一个提交按钮。 方式通常是输入文本,选中单选按钮或复选框, 方式通常是输入文本,选中单选按钮或复选框,以及从 下拉列表框中选择选项等。 下拉列表框中选择选项等。 根据表单功能与处理方式的不同, 根据表单功能与处理方式的不同,通常可以将表单分为 用户反馈表、,留言簿表单、 、,留言簿表单 用户反馈表、,留言簿表单、搜索表单和用户注册表单 等类型。 等类型。
常见的视频格式
4、ASF和WMV格式 以*.asf和*.wmv为后 、 和 格式 和 为后 缀名的视频文件,针对RM应运而生,也 应运而生, 缀名的视频文件,针对 应运而生 的核心。 是WindowsMedia的核心。它们的共同特 的核心 点是采用MPEG-4压缩算法,所以压缩率 压缩算法, 点是采用 压缩算法 和图像的质量都很不错(只比VCD差一 和图像的质量都很不错(只比 差一 点点,优于RM格式)。与绝大多数的视 格式)。 点点,优于 格式)。与绝大多数的视 频格式一样, 频格式一样,画面质量同文件尺寸成反比 关系。也就是说,画质越好,文件越大; 关系。也就是说,画质越好,文件越大; 相反,文件越小,画质就越差。 相反,文件越小,画质就越差。在制作 ASF文件时,推荐采用 文件时, 文件时 推荐采用320×240的分辨率 × 的分辨率 和30帧/秒的帧速,可以兼顾到清晰度和 帧 秒的帧速, 秒的帧速 文件体积,这时的2小时影像约为 小时影像约为1GB左 文件体积,这时的 小时影像约为 左 右。
Dreamweaver CS6网页设计立体化教程 第2版 第3章 插入图像和多媒体对象
3.3.2 制作“科技产品”网页
20
1. 实训目标
本实训需要制作“科技产品”网页, 科技类产品的功能和概念比较抽象,设 计者在制作这类网页时,通常会采用形 象的图片和科技产品的使用方法或制作 原理视频来具体展现。因此,可通过插 入HTML5动画、图像、图像占位符来直 观地展示网页中的内容,并编辑图像, 最后输入文本。完成后的效果如右图所 示。
按钮。打开“锐化”对话框,在“锐化”文本框中输入“5”,单击
按钮即可。
3.1.2 美化与优化图像
8
3. 裁剪图像
选择插入的图像,单击“属性”面板中的“裁剪”按钮,在打开的提示对话框中单击 按钮,此时图像上将出现裁剪区域,拖动该区域四周的控制点调整裁剪后保留的图像范围,调 整好裁剪范围后按【Enter】键确认裁剪即可。
3.3 项目实训 3.4 课后练习
3.2.1 添加多媒体插件
12
选择【插入】/【媒体】/【插件】菜单命令,打开“选择文件”对话框,选择“bgmusic.mp3”
音乐文件,单击
按钮,选择插入音乐文件后创建的图标,在“属性”面板中将宽度和高度分
别设置为“300”和“45”,保存网页后预览即可看到效果。
行业提示:插入网页图像的注意事项
3
好的设计者应该合理使用各种图像,并灵活运用图像处理技巧。好的网页图像在传达信息和美 化页面的同时又不会降低用户的浏览速度。一般来讲,使用图像时首先要注意位置,如网站Logo图 像、网站Banner图像,以及网站导航条图像的放置位置等;其次应注重图像的尺寸、清晰度与图像 文件大小和下载速度的平衡。掌握以上两点,就能提高设计者使用图像的能力。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
2.网页命名
网页名称应该是网页主题的概括,原则: 名称要合理、合法、易记。 名称要能体现网页主题。 字数不超过5个。 名称要有个性,体现一定内涵,这样可以 吸引点击率。
3.网站标志(logo)
网站标志可以体现网站特色和内涵,一般 放在主页上,可以是英文字母,也可以是 图案或其他特殊符号,作用和商品的商标 类似。
音频与视频
声音是多媒体网页的一个重要组成部分。当前 存在着一些不同类型的声音文件,也有不同的 方法将这些声音添加到Web页中。在决定添加 声音之前,需要考虑的因素包括其用途、格式、 文件大小、声音品质和浏览器差别等。不同浏 览器对于声音文件的处理方法是非常不同的, 彼此之间很可能不兼容。 常用的格式有MIDI、WAV、WMA和MP3 等
常见的视频格式
4、ASF和WMV格式 以*.asf和*.wmv为后 缀名的视频文件,针对RM应运而生,也 是WindowsMedia的核心。它们的共同特 点是采用MPEG-4压缩算法,所以压缩率 和图像的质量都很不错(只比VCD差一 点点,优于RM格式)。与绝大多数的视 频格式一样,画面质量同文件尺寸成反比 关系。也就是说,画质越好,文件越大; 相反,文件越小,画质就越差。在制作 ASF文件时,推荐采用320×240的分辨率 和30帧/秒的帧速,可以兼顾到清晰度和 文件体积,这时的2小时影像约为1G构是指利用不同的文件夹将不同的网页 内容分别保存在各个文件夹中,合理的组织站点结 构。 在规划站点结构时,用户应在本地磁盘上创建一个 文件夹作为站点的根目录,根据站点内容,所有被 创建和编辑的网页都保存在该文件夹或下属子文件 夹中。发布站点时,只需将站点文件夹中所有内容 上传到Web服务器上即可。 由于站点是提供给全球各地用户浏览的,因此有必 要保证不同的操作平台的用户都可以访问页面。在 对文件及文件夹命名的时候,应回避中文和长文件 名,最好使用小写等等。
常见的视频格式
2.AVI格式 AVI是目前电视台和影视公司使 用比较广泛的一种格式。它最直接的优点 就是兼容好、调用方便而且图象质量好. 与MPEG-2格式文件体积差不多的情况下, AVI格式的视频质量相对而言要差不少, 但制作起来对电脑的配置要求不高,经常 有人先录制好了AVI格式的视频,再转换 为其他格式。
超级链接
超级链接是从一个网页指向另一个目的端 的链接,例如指向另一个网页或者相同网 页上的不同位置。这个目的端通常是另一 个网页,但也可以是一幅图片,一个电子 邮件地址,一个文件,一个程序或者是本 网页中的其他位置。其热点通常是文本, 图片或图片中的区域,也可以是一些不可 见的程序脚本。
表单
网页中的表单通常用来接受用户在浏览器端的输入,然 后将这些信息发送到用户设置的目标端。这个目标可以 是文本文件、Web页、电子邮件,也可以是服务器端的 应用程序。表单一般用来收集联系信息、接受用户要求、 获得反馈意见、设置来宾签名簿、让浏览者注册为会员 并以会员的身份登陆站点等。 表单由不同功能的表单域组成,最简单的表单也要包含 一个输入区域和一个提交按钮。站点浏览者填写表单的 方式通常是输入文本,选中单选按钮或复选框,以及从 下拉列表框中选择选项等。 根据表单功能与处理方式的不同,通常可以将表单分为 用户反馈表、,留言簿表单、搜索表单和用户注册表单 等类型。
4.色彩搭配
适合网页标准色的颜色有黄色/橙色、蓝色、 黑色/白色3大系列。 标准色多用于网站标志、网站标题、主菜 单和主色块,给人以整体统一的感觉。
Dreamweaver8的界面元素介绍
工作区布局 起始页 窗口布局
工作区布局
首次启动Dreamweaver8时,会弹出“工作区设 置”对话框。在该对话框中,提供了“设计器” 与“编码器”两种布局风格,用户可以根据需 要从中选择一种工作区布局。系统默认为“设 计器”方式。 设计器是一个使用了多文档界面的集成工作区, 其中全部文档窗口和面板被集成在一个应用窗 口中。 编码器也是一个集成的工作环境,但更加适应 手工编码人员使用。
多媒体
动画 音频与视频
动画
动画是网页上最活跃的元素 ,动画的制作手段有很 多, GIF动画依旧是占据主体地位的网页动画之一。 因为GIF动画的标准简单,在各种类、各版本的浏览 器中都能播放。另一种现在正逐渐成为最重要的 Web动画形式的是Macromedia的Flash,Flash不仅 比DHTML易学得多,而且有很多重要的动画特征, 如关键帧补间、运动路径、动画蒙版、形状变形和 洋葱皮等。它显示连贯,文件体积小,还可以增加 声音。设计者不仅可以可以建立Flash电影,而且可 以把动画输出为QuickTime文件、DIF98a文件或其 他许多不同文件格式。
常见的视频格式
5、MOV格式 在所有视频格式当中,也 许MOV格式是最不知名的。也许你会听 说过QuickTime,MOV格式的文件正是 由它来播放的。在PC几乎一统天下的今 天,从Apple移植过来的MOV格式自然是 受到排挤的。它具有跨平台、存储空间要 求小的技术特点,而采用了有损压缩方式 的MOV格式文件,画面效果较AVI格式 要稍微好一些。到目前为止,它共有 4 个 版本,其中以 4.0 版本的压缩率最好。
其他常见元素
网页中除了以上几种最基本的元素之外, 还有一些其它的常用元素,包括悬停按钮, Java特效,ActiveX等各种特效。它们不 仅能点缀网页,使网页更活泼有趣,而且 在网上娱乐、电子商务等方面也有着不可 忽视的作用。
网页设计的构思
1. 网页主题(题材) 自然、科技、生活、影视、教育等。 原则: 题材要短小而且精良,不要选择一个过大 的范围,到时无从着手。 选择比较熟悉的题材,比如喜欢体育就制 作一个有关体育的网页。
导航栏
导航栏是用户在规划好站点结构,开始设 计主页时必须考虑的一项内容。导航栏的 作用就是引导浏览者游历站点。事实上, 导航栏就是一组超级链接,这组超级链接 的目标就是本站点的主页以及其他重要网 页。在设计站点中的诸网页时,可以在站 点的每个网页上显示一个导航栏,这样, 浏览者就可以既快又容易的转向站点的其 他网页。
常见的视频格式
3、RM格式 它是Real公司对多媒体世界的一大贡 献,也是对于在线影视推广的贡献。它的诞生, 也使得流文件为更多人所知。这类文件可以实 现即时播放,这种“边传边播”的方法避免了 用户必须等待整个文件从Internet上全部下载完 毕才能观看的缺点,因而特别适合在线观看影 视。RM主要用于在低速率的网上实时传输视频 的压缩格式,它同样具有小体积而又比较清晰 的特点。RM文件的大小完全取决于制作时选择 的压缩率,这也是为什么有时我们会看到1小时 的影像只有200MB,而有的却有500MB之多。
常见的视频格式
1、MPEG-1、MPEG-2和MPEG4 MPEG-1被广 泛应用在 VCD 的制作和一些视频片段下载方面, 其中最多的就是VCD——几乎所有VCD都是使 用Mpge-1格式压缩的(*.dat格式的文件)。 MPEG-1的压缩算法可以把一部 120 分钟长的 电影(原始视频文件)压缩到1.2 GB左右大小。 MPEG-2则应用在DVD的制作(*.vob格式的文 件),同时也在一些HDTV高清晰电视广播) 和一些高要求视频编辑、处理有相当的应用。 使用MPEG-2的压缩算法制作一部 120 分钟长 的电影(原始视频文件)在4GB到8GB大小左 右,当然其图象质量方面的指标是MPEG-1 所 无法比拟的。 MPEG-4是一种新的压缩算法, 使用这种算法的ASF格式文件可以让一部120分 钟长的电影(原始视频文件)“瘦身”到 300MB左右,由于其小巧便于传播,故成为网 上在线观看的主要方式之一。
图像
图像在网页中具有提供信息,展示作品, 装饰网页,表达个人情调和风格的作用。 用户可以在网页中使用GIF, JPEG(JPG), PNG三种图象格式,其中使用最广泛的是 GIF和JPEG两种格式。当用户使用所见 即所得的网页设计软件在网页上添加其他 非GIF, JPEG, 或PNG格式的图片并保存 时,这些软件通常会自动将少于8位颜色 的图片转化为GIF格式,或将多于8位颜 色的图片转化为JPEG。
第三章 Dreamweaver8概述
内容提要
网页中的基本元素 Dreamweaver8的界面元素介绍 获取帮助 创建本地站点
网页中的基本元素
文本 图像 多媒体 超级链接 表单 导航栏 其他常见元素
文本
网页中的信息主要以文本为主。与图象相比, 文字虽然不如图象那样能够很快引起浏览者的 注意,但却能准确地表达信息的内容和含义。 为了克服文字固有的缺点,人们赋予了网页中 文本更多的属性,如字体,字号,颜色,底纹 和边框等,通过不同格式的区别,突出显示重 要的内容。这里指的文字是文本文字,而并非 图片中的文字。此外,用户还可以在网页中设 计各种各样的文字列表,来清晰表达一系列项 目。
起始页
在打开的文档窗口中,可以看到起始页对 话框,该对话框由三个栏目组成。
1 3 2
窗口布局
标题栏 菜单栏 插入工具栏 文档工具栏
文档窗口
面板组
属性面板
获取帮助
帮助文档 选择“帮助”菜单中的“帮助”可以打开帮助文 档,在文档中包含有“目录”、“索引”、 “搜索”、“书签”4个标签 参考”面板 “参考”面板为用户提供了标记语言、编程语言 和 CSS 样式的快速参考工具。它提供了有关用 户在“代码”视图(或代码检查器)中处理的 特定标签、对象和样式的信息。“参考”面板 还提供了可粘贴到文档中的示例代码。