Dreamweaver网页设计基础知识
- 格式：doc
- 大小：755.08 KB
- 文档页数：16
网页设计基础知识
一、认识网页
1. 网页分类：静态网页、动态网页
静态网页：是标准的HTML文件，它是采用HTML（超文本标记语言）编写的，是通过HTTP（超文本传输协议）在服务端和客户端之间传输的纯文本文件，其扩展名为.html或htm
动态网页：在多方面与静态网页是一致的，它们都是无格式的ASCII码文件，都包含HTML代码，都可以包含用脚本语言（比如JavaScript或VBScript）编写的程序代码，都存放在Web服务器上，收到客户请求后都会把响应信息发送给Web浏览器，根据采用Web应用技术不同，动态网页文件的扩展名不同，如ASP（使用Active Server Pages）技术，其中扩展名为.asp；使用JSP（Java Server
Pages）技术时的扩展名为.jsp等等。
2. URL（统一资源定位器，简称网址）：其格式是【协议名://主机名/目录/....../文件名】，如；由于网址是最常用的协议是http是默认的协议，所以可当刮简写为 ；ftp://123.52.3.20；，
3. 网页（Web Page）：打开网站所看到的网页，一个网站可以有成千上万个网页。
4. 主页（Home Page）：打开网站时看到的第一个网页，简称首页。它默认的文件名通常是index.htm、index.html、default.htm、default.html、default.sap、index.asp等等
二、网页设计基本原则
1. 明确建立网站的目标和用户需求
2. 总体设计方案主题鲜明
3. 网站的版式设计
4. 网页形式与内容相统一
5. 三维空间的构成
6. 多媒体功能的使用
7. 网站测试和改进
8. 合理运用新技术
三、网站制作流程
1. 选择网站主题
2. 规则网站目和目录结构
对收集的资料进行分类，并为其建立专门的栏目，各栏目的主题围绕网站主题展开，栏目名称具有概括性，各栏目的名称字数最好相同。规划网站栏目的过程实际上是对网站内容细化，一个栏目有可能就是一个专栏网页。
在创建网站的目录结构时，不要将所有文件都存放一根目录下，需要应该按栏目为建立文件夹
目录文件命名时，要使用简短的斯文形式，文件名小于8个字符，一律以小写字母，另外大量的同一类型文件应该是数字序号加以区分，以利于查找。
3. 设计网页布局
4. 整合网页内容
Dreamweaver CS5概述
一、启动Dreamweaver
二、Dreamweaver工作界面
三、Dreamweaver窗口组成
1. 标题栏和菜单栏
2. “快捷插入”面板：包含创建和插入对象的按钮，这些按钮被组织到相应的类别中，按Ctrl+F2可以打开或隐藏。
3. 工具栏：包含“文档”工具栏、“标准”工具栏
4. 文档窗口：又称文档编辑区，主要用来显示或编辑文档，其显示模式为3种，代码视图、拆分视图、设计视图、实时视图
a) 代码视图：显示HTML代码视图窗口
b) 拆分视图：同时显示代码视图和设计视图
c) 设计视图：为系统默认设置，只显示相应的文本、图片、视频等，没有Html程序代码。 d) 实时视图：
e) 多屏幕：编辑的网页在不同的设备上显示的效果
f) 在浏览器中调试：在浏览器中显示，看实际的显示效果
g) 文件管理：文件管理状态
h) ：W3C验证
i) 检查浏览器的兼容性
j) 可视化助理：在设计的过程中，帮助显示一些元素。
5. 面板组：按F4可以显示、隐藏全部面板
6. “属性”面板：设置正在编辑的内容的属性，内容不同，“属性”面板中显示的属性也不同。招待“窗口----属性”、Ctrl+F3可以显示/隐藏“属性”面板。
四、页面的创建与保存
1. 创建网页：“文件----新建”、Ctrl+N等方法均可以新建文档。根据需要内容选择建立文档的类型。
2. 保存网页：“文件-----保存”、Ctrl+S，选择保存类型、保存位置等，单击“保存”按钮。
五、Dreamweaver参数设置 执行“编辑----首选参数”命令、按Ctrl+U快捷键，打开“首选参数”对话框。
六、 网页基本编辑----编辑文本
一、编辑文本
1. 在设计视图窗口中，直接在文档窗口中输入文本字符。
如果需要分段换行，直接按“Enter”键。
Shift+Enter强制换行，行与行之间不会出现换行，它与前面内容属于一个段落
由于Dreamweaver中不允许输入多个连续空格，需要在“首选参数”中选择“允许多个连续空格”复选框就可解决；或者将输入法设为“全角/半角”中的“全角”状态，才能输入连续空格。
2. 利用Word、Wps、写字板等文档编辑软件，将其中的文本复制后，粘贴到Dreamweaver设计视图中。
二、调整文本
1. 单击“页面属性”，单击“页面字体”的下拉列表箭头，选择“编辑字体列表”，选择字体、设置大小、文本颜色、背景颜色等。
三、插入日期
1. 执行“插入----日期”命令 2. 或单击“常用----快捷插入”面板中的按钮，就可以插入日期
四、插入文本列表：选择需要文本列表的文本内容
1. 执行“格式----列表”，从右侧的子菜单中选择“项目列表、编号列表、自定义列表”，然后再执行“属性”子命令，打开对话框，设置好相关参数。
2. 将“快捷插入”面板切换至“文本”面板，单击“项目列表、编号列表”
3. 单击“属性面板”中的“项目列表、编号列表”按钮。
网页基本编辑----水平线
一、插入水平线
1. 执行“插入---HTML----水平线”命令
2. 执行“快捷插入”的“常用”面板中的“水平线”。
二、插入特殊字符
1. 执行“插入----HTML----特殊字符”
2. 将“快捷插入”面板切换至“文本”面板，
三、设置水平线属性
1. 水平线：在文本框中输入水平线的名称
2. 宽、高：以像素为单位或以页面尺寸百分比的形式指定水平的宽度和高度
3. 对齐：指定水平的对齐方式，有“默认、左对齐、居中对齐、右对齐”，只有当水平线的宽度小于浏览器宽度时，该设置才适用。参数设置完成后，在右侧面板的“属性”选择卡中能够看到已经设置的参数。Color为水平的颜色设置。
网页基本编辑----网页中图像处理
一、网页中常用的图像格式
1. JPEG图像格式：
JPEG是Joint Photographic Experts Group（联合图像专家组）的缩写，文件扩展名为jpeg或jpg，是最常用的图像文件格式，是一种有损压缩格式，能够将图像压缩在很小的储存空间内，因为图像中重复或不重要的资料会被丢失，所以图像质量会下降。
JPEG图像格式应用广泛，文件较小，下载速度快，所以目前所有的浏览器均支持。
2. GIF图像格式
GIF全称是Graphics Interchange Format，其原义是“图像互换格式”，是CompuServe公司在1987年开发的图像文件格式，GIF文件的数据是一种基于LZW算法的连续色调的无损压缩格式，其压缩一般在50%左右。
GIF中可以存放多幅彩色图像，形成一个简单的动画图像。
3. PNG图像格式
PNG（Portable Network Graphics）的原名是“可移植性网络图像”，是网络上接受的最新图像文件格式，PNG能够提供长度比GIF小30%的无损压缩图像文件，同时提供24位、48位真彩色图像支持以及其他诸多技术性支持。但目前只有Fireworks、Photoshop可以处理PNG图像文件。
PNG图像质量能存储32位信息位图文件格式，其质量远高于GIF图像格式，它采用调整交替显示方案，显示速度快，只要下载1/64的图像信息就可以显示出低分辨率图像，所以下载的速度也是很快。
二、插入图像
1. 执行“插入---图像”命令，或按下“Ctrl+Alt+I”，打开图像的对话框中，选择“图像源文件”，单击“确定”按钮
三、图像占位符 1. 当制作网页时，在页面中某个位置需要插入一幅图片，但一时找不到自己喜欢的、合适的图片，这时需要插入“图像占位符”后，用户以后随时可以将其替换为真正的图像。
2. 执行“插入----图像对象”中“图像占位符”命令，打开对话框。在“名称”框中输入英文字符或数字，不允许使用空格或高位ASCII字符；“替换文本”中输入描述该图像的文本。
3. 将图像占位符替换为图像：选择图像占位符，打开占位符的属性面板，单击“源文件”右侧的文件夹按钮，选择图像文件后，占位符就会变成真实的图像。
四、设置网页的背景颜色和背景图像
1. 设置网页的背景颜色：执行“修改----页面属性”命令，或按“Ctrl+J”快捷键，打开对话框后就可以设置
五、图像映射
1. 图像映射，就是将图像划分为若干区域，每个区域称为一个热点，每个热点可以分别设置不同的超级链接，热区的可以是不同的开关，如圆形、矩形、不规则多边形等。 2. 在地图Map下面有三个按钮，单击按钮，就可以图像中绘制热点区域。然后为每个区域设置不同链接。
六、设置外部图像编辑器
1. 当将外部的图像插入到Dreamweaver时，可能图像与网页中其他元素不能很好的搭配，需要专门的编辑软件进行处理。
2. 执行“编辑----首选参数”命令，在“分类”列表下选择“文件类型/编辑器”选项， 七、创建交互式图像
1. 执行“插入---图像对象---鼠标经过图像”命令，打开对话框。选择“原始图像”、“鼠标经过图像”两幅图像，大小要求一致，在浏览器中预览时，效果就能够显示出来。
2.
