dw网页设计基础
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
无缝滚动效果的实现
本例通过研究无缝滚动效果的实现，来认识一 下XHTML和脚本语言在网页制作中的作用。
XHTML
JavaScript
1.3.网页的设计理念和配色方案
1.3.1设计理念
网页内容第一：内容要精彩且便于浏览，导 航清晰明了。 网页大小第二：图片、多媒体的大小和多少要 细致考虑，下载速度要尽可能快 界面美观第三：精美的网站标志、合理的版面 布局（尽量简约、美观）、网站风格统一、注 重色彩搭配、能适应不同浏览器及分辨率 、
3.常见的布局样式
（1）∏形结构：如图1所示。
ቤተ መጻሕፍቲ ባይዱ
图1 ∏形结构
（2）口（同、国）字形结构：总体分为上、中、下3部分， 中间部分又分为3栏，中间是网页的主内容区，如图2所示。
图2 口字形结构
（3）T（厂）形结构：顶部通常为标志、横幅广告和站内导 航菜单，顶部下面分为左、右2栏结构，通常左右不对称， 栏宽的是页面的主题内容，如图3所示。
根据网页能够在服务器端运行，把网页分 为动态网页和静态网页。 静态网页：纯粹用html语言编写的网页，不能
在服务器端运行，没有数据库支持，交互性相 对较差。每个网页都有一个固定的url，且以 htm、html、shtml、xml等常见形式为后缀；发 布在服务器上的静态网页是事先保存在服务器 上的文件，每个网页都是一个独立的文件；内 容相对稳定，容易被搜索引擎检索。
动态网页：即采用动态网站技术动态生成的网
页，以数据库为基础，能在服务器端运行；可以 实现的功能较多，如用户注册、登陆、在线调查、 用户管理、订单管理、站内搜索、歌曲下载、软 件下载、即时更新新闻、可以留言或书写评论等； 不是独立存于服务器上的网页文件，只有当用户 请求服务器时才返回一个完整的网页。
标题:<title>标题</title>：呈现出网页的标题 ，文档标题出现在浏览器的窗口标题栏中，包含 在<head> „</head>标签内部。
以下内容(4)—(6)为选学内容。
（4）网页中的其他常用标记
<p></p>:分段标记 <br>:换行标记 <img> </img>: 是空格标记 <b> 空的标签区块 字体标签 表格标签 文字标签 文本缩进的标签<blockquote> </blockquote> 可以使用这些标记在记事本中完成网页的设计。
（2）HTML文档的基本结构
<HTML> <head> <title>标题</title> </head> <body> 正文 </body> </HTML>
（3）主要标记简介
<html></html>开始和结束标记。在它们中 间，包含网页里的所有内容。
主体:<body>页面内容</body>。主体部分包含文 本和图像等网页里所有可见部分。
课堂实例―创建和测试第一个html网页 在“记事本”窗口或者Dreamweaver网页中输入以下 内容： <html> <head> <title>欢迎光临我的第一个网页</title> </head> <body> 这是第一个简单网页! </body> </html> 选择【文件】|【保存】命令，在弹出的“另存为” 对话框中选择要保存的路径，在【文件名】文本 框中输入文件名myweb001.html。
5.按钮
在现实生活中，按钮通常是启动某些装置或机 关的开关。网页中的按钮也沿用了这个概念。 网页中的按钮被点击之后，网页会实现相应的 操作，比如页面跳转，或数据的传输等。
1.1.2组成元素
网页的组成元素有文字、图片、动画（ gif、flash）、表单（交互功能）、音 频、视频、超链接、表格、框架、导航 等。
script元素
语法格式：<script language=“脚本语言名”> <! --
程序代码
-- > </script> 属性：language style元素 语法格式： <style type=“text/css”> 样式语句 </style>
主体标签BODY部分包含的主要元素
属性
text
1.2.5
网址
网址又叫URL，它是一种网络上通用的地址格 式，用于标识网页文件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP地 址、网页在服务器中的路径和文件名4部分组 成。
1.2.6
网页的布局类型
1.网站的类型：门户网站、政府部门形象类网站、企业网站、 医院网站、科技网站、教育网站、综合网站等。 2.布局相关概念 版面指的是浏览器看到的完整的一个页面。因为每个人的 显示器分辨率不同，所以同一个页面的分辨率可能出现 800*600像素，1024*768像素等，看到的版面效果也不尽 相同。 布局就是以最适合浏览的方式将图片和文字摆放在页面的 不同位置。 网页版面布局是指定网页内容在浏览器中的显示方式，例 如徽标的位置、导航栏的显示、主要内容的排版等。
第1章
网页基础知识
网页构成要素和组成元素 网页相关知识简介 网页的设计理念和配色方案 网站建设流程 典型网站分析
1.1网页构成要素和组成元素 1.1.1网页构成要素
网页的构成要素主要有站标、导航条、广告条、 标题栏和按钮等。
站 标 按钮 广告 条 标题 栏 导航 条
1.站标
站标也叫Logo，是网站的标志，其作用是使人 看见它就能够联想到企业。因此，网站Logo通 常采用企业的Logo。 Logo一般采用带有企业特色和思想的图案，或 是与企业相关的字符或符号及其变形，当然也 有很多是图文组合，如下图所示。
脚本语言是基于对象的编程语言，网页中常用的 有VBScript、JScript和JavaScript。 VBScript和JScript是微软的产品，IE都支持。 JavaScript是Netscape的产品，不仅适用于 Netscape，同时和IE也有很好的兼容性，可以说 是一种通用的脚本语言。
课堂练习2
头部：<head>头部的内容</head>
head是除文档标题外的不可见部分，文档标题出现在浏 览器的窗口标题栏中，还可以包括META信息、关键字、 说明/描述、刷新、基础网页/首页（申请的域名空间或 网址）、链接等；若不需头部信息则可省略此标记。 【刷新就是在网址发生变化或网页经常更新时，规定在 几秒钟内更新当前网页的内容。】
Fireworks：主要用于制作网页图像、网站标志、GIF 动画、图像按钮与导航栏等。 Flash：主要用于制作矢量动画，如广告条、网站片 头动画、动画短片、MTV等。 Photoshop：Adobe公司出品的一个优秀而且强大的图 形图像处理软件，起初它的应用领域主要是平面设计 而不是网页设计，但是它所具有的强大功能完全涵盖 了网页设计的需要（除了多媒体）。
常见的列表标签 标签 描述
<ul>
<ol> <dir> <dl> <menu>
无序列表
有序列表 目录列表 定义列表 菜单列表
<li>
列表项目的标签
（6）在编写代码时的注意事项：
在书写标签属性值的时候尽量将属性值用引 号（英文标点符号）括起来。 在书写html语言的时候不区分大小写。 代码优化：清理html/xhtml和清理word 生 成的html代码。 可以使用代码片段面板插入dw中预定义的 代码片段（javascript、内容表、导航、文 本、表单元素、页眉和页脚等）。
描述 图片的源文件 提示文字 设置图片的宽度 设置图片的高度 设置图片的边框 垂直间距 水平间距 设置图片的对齐方式
字体标签<font> 属性 <face> <size> <color> 表格标签 属性 <table>„</table > <tr>„<tr> <td>„<td> 描述 表格标签 行标签 单元格标签 描述 字体 字号 文字颜色
2.导航条
导航条是网站内多个页面的超链接组合，它可 以引导浏览者轻松找到网站中的各个页面。
导航 条 导航 条
3.广告条
广告条又称Banner，其功能是宣传网站或 替其他企业做广告。Banner的尺寸可以根 据版面需要来安排，一般大型商务网站都 有自己的标准尺寸和摆放位置。
4.标题栏
此处的标题栏不是指整个网页的标题栏，而是 网页内部各版块的标题栏，是各版块内容的概 括。 标题栏可以是文字加单元格背景，也可以是图 片，一般大型网站都采用前者，一些内容少的 小网站常采用后者。
1.2
网页相关知识简介
1.2.1互联网
互联网（Internet），又叫因特网，它是目前世界上 最大的计算机网络，将无数广域网、局域网及单机按 照一定的通讯协议组织在一起，方便了计算机之间的 信息传递。
1.2.2网页的本质
一个网页由多个文件组成，网页文件是“根 ”，图像文件都是“枝叶” ，图像和动画 都以链接的形式插入到网页中。
1.2.8 HTML基础
（1） HTML语言：
HTML是网页的主要组成部分，要想精通网页制 作，必须对HTML语言有所了解。
HTML语言是利用标记（tag）来描述网页的字体、 大小、颜色及页面布局的语言，是一种早期的用 于网页制作的主要语言；它也是纯文本类型的语 言，可以使用任何的文本编辑器对它进行编辑。 使用HTML编写的网页文件是标准的纯文本文件， 可以用任何文本编辑器打开它。其后缀名 为：.html或.htm。
1.2.4
IP地址与域名
IP地址用来标识每台主机在互联网上的地址，具 有唯一性。它由4个小于256的数字组成，数字之 间用点间隔。例如，“61.135.150.126”就是一 个IP地址。 但是IP地址难以书写和记忆。 域名是用字符来表示主机地址的另一种方法，与 IP地址对应，在使用过程中易于记忆和书写。 域名也是独一无二的。 如： 和都是域名。
1.2.10 XHTML语言简介
XHTML是Extensible HyperText Markup Language(可扩展超文本标记语言)的英文 缩写，它的前身是HTML。由于HTML代码烦 琐，结构松散，所以推出了XHTML。也可 以说，XHTML是HTML的一个升级版本。
1.2.11 脚本语言简介
打开网站“搜狐网”，在浏览器中选择“ 文件”>“另存为”菜单，将网页保存到磁盘 中，然后看看网页及其组成素材。
1.2.3
网站、网页和主页
网站是多个网页的集合，各个网页通过超级 链接构成一个网站整体。 网页就是以html语言为基础编写的，能够通 过网络传输，并被浏览器翻译成可以显示出 来的包含文字、图片、声音、动画等媒体形 式的页面文件。网页由主页和其它链接页组 成。 主页也叫首页，是网站的入口，即浏览者登 录网站时看见的第一个网页。
图3T形结构
（4）上下形结构：页面划分为上下2部分。可以对称，也 可以不对称，如图4所示。
图4上下形结构
（5）左右形结构：页面划分为左右2部分。可以对称，也可以 不对称，如图5所示。
图5左右形结构
1.2.7网站管理与网页制作相关软件
在进行网页制作时，除需要Dreamweaver外，还 会用到Fireworks、Flash、Photoshop等辅助软 件。（DW、FW、Flash称作网页三剑客。）
描
述
设置页面文字的颜色
Bgcolor
Background
设置页面的背景颜色
设置页面的背景图像
Link
alink
设置页面默认的连接颜色
设置鼠标单击时的连接颜色
Vlink
Script
设置访问后的连接颜色
设置网页中的程序脚本内容
图片标签<img> 属性 Src Alt Width Height Border Vspace Hspace align
(5)Html的重要标签和属性 头部标签
HEAD部分包含的主要元素 标签 title meta link script 文档标题 描述HTML元信息 描述当前文档与其它文档之间的链接关系 脚本程序内容 描 述
style
指定当前文档的CSS层叠样式表
meta元素 描述HTML文档的元信息，即关于文档自身的信息。 定义搜索关键字、字符编码、作者、版权信息以及 文档描述.这些标签可以向服务器提供信息，如页面 的失效日期、刷新间隔和PICC等级。 PICC是internet内容选择平台，它提供了向网页 分配等级的方法。 格式例：<meta name=“keywords” content=“HTML,CSS,VBScipt”> 定义语言 格式例：<meta http-equiv=“content-type” content=“text/html”;charset=“GB2312”>