当前位置:文档之家› Dreamweaver网页设计基础知识

Dreamweaver网页设计基础知识

网页设计基础知识一、认识网页1.网页分类:静态网页、动态网页◆静态网页:是标准的HTML文件,它是采用HTML(超文本标记语言)编写的,是通过HTTP(超文本传输协议)在服务端和客户端之间传输的纯文本文件,其扩展名为.html或htm◆动态网页:在多方面与静态网页是一致的,它们都是无格式的ASCII码文件,都包含HTML代码,都可以包含用脚本语言(比如JavaScript或VBScript)编写的程序代码,都存放在Web服务器上,收到客户请求后都会把响应信息发送给Web浏览器,根据采用Web应用技术不同,动态网页文件的扩展名不同,如ASP(使用Active Server Pages)技术,其中扩展名为.asp;使用JSP(Java ServerPages)技术时的扩展名为.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.网页基本编辑----网页中的表格一、创建表格1.执行“插入---表格”命令,或按Ctrl+Alt+T,可以打开“表格”的对话框。

2.表格中的宽度、高度的单位是“像素”时,表格大小固定,不受浏览器窗口变化影响;宽度和高度的单位是“百分比”时,受浏览器窗口影响而变化。

二、应用表格1.输入表格内容◆输入文本:直接在表格输入文本即可。

◆插入图像:将图像放到表格中。

2.选定表格元素◆选定整个表格:“修改---表格---选择表格”、拖动表格、单击中table◆选定单行或单列:鼠标指向表格左边线、上边线,当表格出现红色边框时单击后则选择了行或列。

◆选定连续多行或多列◆选定不连续的多行或多列:按Ctrl键后,拖动或单击左边线、上边线。

◆选定连续的单元格:按Shift键,两次单击即可选择连续区域。

◆选定不连续的单元格3.设置表格与单元格属性◆设置表格属性:“填充”设置单元格内容与边框的距离;“间距”设置每个单元格之间的距离;“边框”表格边框的宽度;“清除列宽、将表格宽度转换成像素、将表格宽度转换为百分比”等按钮;“清除行高、将表格行高转换成像素、将表格行高转换为百分比”等按钮。

◆设置单元格属性:“不换行”设置表格中文字和图像将不会环绕排版;4.添加或删除行和列执行“修改---表格”命令,执行右侧的相应命令可以打开相应对话框。

5.表格排序:选整个表格后,执行“命令---排序表格”命令。

6.嵌套表格:将光标放到需要插入嵌套表格的单元格,执行“插入---表格”命令,或按“常用”面板中的“表格”按钮,再设置相应的行数和列数。

相关主题