Dreamweaver网页设计基础知识

网页设计基础知识一、认识网页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 工作界面Dw 文件时 编辑（1）查看 插入 修改（ 格式 命令 站点 窗口 帮助经典”三、Dreamweaver 窗 口组成1. 标题栏和菜单栏2. “快捷插入”面板：包含创建和插入对象的按钮，这些按钮被组织到相应的类别 中，按Ctrl+F2可以打开或隐藏。3. 工具栏：包含“文档”工具栏、“标准”工具栏4. 文档窗口：又称文档编辑区，主要用来显示或编辑文档，其显示模式为3种，代 码视图、拆分视图、设计视图、实时视图a）代码视图：显示HTML代码视图窗口b）拆分视图：同时显示代码视图和设计视图c）设计视图：为系统默认设置，只显示相应的文本、图片、视频等，没有Html 程序代码。d) 实时视图: e) “访多屏幕：编辑的网页在不同的设备上显示的效果文件管理：文件管理状态在浏览器中调试：在浏览器中显示，看实际的显示效果:W3C验证f)g)h)i)j)色检查浏览器的兼容性可视化助理：在设计的过程中，帮助显示一些元素。5. 面板组：按F4可以显示、隐藏全部面板6. “属性”面板：设置正在编辑的内容的属性，内容不同，“属性”面板中显示的属 性也不同。招待“窗口-属性”、Ctrl+F3可以显示/隐藏“属性”面板。四、页面的创建与保存1. 创建网页：“文件-新建”、Ctrl+N等方法均可以新建文档。根据需要内容选择建 立文档的类型。St建文档_空白页匚占空模板疣体网格布局|模板中的页示例中的页圈苴他邨,一,*一-,%一 哪一HTMLHTML模板XSLT (整页)XSLT (片斷) 库项目Acti onScriptCSSJavaScriptXMLASF JavaScriptASF VBScriptASP. HET C#ASF.NET VBColdFusi onColdfusion 组件JSFFHP1列固定，居中1列固定，居中，标题和脚注1列液态，居中1列液态，居中，标题和脚注2列固定，右侧栏2列固定，右侧栏、标题和脚注2列固定，左侧栏2列固定，左侧栏、标题和脚注2列液态，右侧栏2列液态，右侧栏.标题和脚注2列液龛，左侧栏2列液态，左侧栏、标题和脚注3列固定3列固定，标题和脚注3列液卷3列液态，标题和脚注HTML5: 2列固定右侧栏、标题和脚9HTML5: 3列固定标题和脚注页面类型：布局:2. 保存网页：“文件-保存”、Ctrl+S，选择保存类型、保存位置等，单击“保存” 按钮。五、Dreamweaver参数设置执行“编辑-首选参数”命令、按Ctrl+U快捷键，打开“首选参数”对话框。首选参数区览预I 式述彩元小写式示色能割较型档器 屯样验色见大改格提颜功尿比类文览 兀s C记可口码码码码助制件件建浏点体 -伺ATCS阳标不窗代代代代辅复文文新在站字罟 Bfp 辑 扁文档选项：回显示欢迎屏幕运）启动时重新打开文档迅）回打开只读文件时警告用户址便启用相关文件（1）搜索动态相关文件手动F移动文件时更新链接（1）:提示耳I编辑选项：回插入对象时显示对话框（X）回允许孜字节内联输入迢）0标题后切换到普通段落（A）允许哆于连续的空格（M）冋用strong和代替 好和i 回在如或标签中放遂可编辑医域时发出警告 历史步骤摄多次数QD： 50 拼写字典址）:确定取消六、网页基本编辑-编辑文本、编辑文本1. 在设计视图窗口中，直接在文档窗口中输入文本字符。如果需要分段换行，直接按“ Enter ”键。 Shift+Enter强制换行，行与行之间不会出现换行，它与前面内容属于一个段落 由于Dreamweaver中不允许输入多个连续空格，需要在“首选参数”中选择允 许多个连续空格”复选框就可解决；或者将输入法设为“全角半角”中的“全 角”状态，才能输入连续空格。2. 利用 Word、Wps、写字板等文档编辑软件，将其中的文本复制后，粘贴到 Dreamweaver设计视图中。、调整文本1. 单击“页面属性”，单击“页面字体”的下拉列表箭头，选择“编辑字体列表”， 选择字体、设置大小、文本颜色、背景颜色等。三、插入日期1.执行“插入-日期”命令2.或单击“常用一快捷插入”面板中的按钮，就可以插入日期四、插入文本列表：选择需要文本列表的文本内容1. 执行“格式-列表”，从右侧的子菜单中选择“项目列表、编号列表、自定义列表”, 然后再执行“属性”子命令，打开对话框，设置好相关参数。2. 将“快捷插入”面板切换至“文本”面板，单击“项目列表、编号列表”3.单击“属性面板”中的“项目列表、编号列表”按钮。网页基本编辑-水平线、插入水平线1. 执行“插入-HTML-水平线”命令2. 执行“快捷插入”的“常用”面板中的“水平线”。常用年鬲志阜1:Editing文本盘_0tt -j?l E r*b T、插入特殊字符1. 执行“插入-HTML-特殊字符”2. 将“快捷插入”面板切换至“文本”面板,丘局表单jQueiy JicbileZnCcntext Editing:B、八瓷k卑垃儈十弹可匸肛 hl h2 h3 ul ol li dl dt dd abbr朋u厘性1水平线s宽Qt) 150像素高10对齐居中对齐|v类无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. 执行“编辑一首选参数”命令，在“分类”列表下选择“文件类型编辑器”选项,式证彩元小写式示色能枷较5 繇祥验色见大改格提颜功視比 规7LS匚记可口码码码码助制件 常APCS咼标不窗代代代代辅复文J JI 在站字浏点体裆器在代码视图中打开： ,JS ,asa .css .inc .txt . as . asc . asr . ht ac cess . ht passwd浏览址)浏览设肯主要(M)国13ES扩展名 gif-JPS jPE - JPeg.p E d.tla.w av.ai ff . aif . ai fc.mp3 mpg .mpeg.m i：v.Etff . Epl编辑器iexplore （主要）帮助01)确定首选参数七、创建交互式图像1. 执行“插入-图像对象-鼠标经过图像”命令，打开对话框。选择“原始图像”、 “鼠标经过图像”两幅图像，大小要求一致，在浏览器中预览时，效果就能够显 示出来。帮助确定取消直接在表格输入文本即可。 将图像放到表格中。网页基本编辑-网页中的表格一、创建表格1. 执行“插入-表格”命令，或按Ctrl+Alt+T，可以打开“表格”的对话框。2. 表格中的宽度、高度的单位是“像素”时，表格大小固定，不受浏览器窗口变化 影响；宽度和高度的单位是“百分比”时，受浏览器窗口影响而变化。二、应用表格1. 输入表格内容输入文本:插入图像:2. 选定表格元素选定整个表格：“修改-表格-选择表格”、拖动表格、单击呗aww中table选定单行或单列：鼠标指向表格左边线、上边线，当表格出现红色边框时单击 后则选择了行或列。选定连续多行或多列 选定不连续的多行或多列：按Ctrl键后，拖动或单击左边线、上边线。 选定连续的单元格：按Shift键，两次单击即可选择连续区域。选定不连续的单元格3. 设置表格与单元格属性设置单元格属性：“不换行”设置表格中文字和图像将不会环绕排版; 设置表格属性：“填充”设置单元格内容与边框的距离；“间距”设置每个单元 格之间的距离；“边框”表格边框的宽度；“清除列宽、将表格宽度转换成像素、 将表格宽度转换为百分比”等按钮；“清除行高、将表格行高转换成像素、将 表格行高转换为百分比”等按钮。4.添加或删除行和列执行“修改-表格”命令，执行右侧的相应命令可以打开相应对话框。5.表格排序：选整个表格后，执行“命令-排序表格”命令。6. 嵌套表格：将光标放到需要插入嵌套表格的单元格，执行“插入-表格”命令， 或按“常用”面板中的“表格”按钮，再设置相应的行数和列数。7. 套用预置表格类型：将光标放到表格内，执行“命令-格式化表格”，打开表格的 对话框，可以设置相应的颜色。四、五、六、七、制作“访客信息”网页1. 新建网页，将网页标题设为“访客信息”设置“页面属性”选择“外观(CCS)”设 置大小为14像素；左边距、上边距、下边距为0像素，默认字体为“宋体”大小为 14像素。2. 插入表单，插入后会显示红色虚线3. 在表单中插入11行2列的表格，表格宽度为720像素，边框粗细为1；选择表格第1 列，将列宽设为90,水平“居中对齐”、垂直“居中对齐方式。在表格第一列中输 入图片中的文字。4. 表格第2列第1行插入“文本域”，打开“输入标签辅助功能属性”对话框，单击“取 消”选择该文本域，在属性面板中将文本域名称设为“title”初始值中输入“请在这 里输入留言标题”。5. 表格第2列第2行插入“文本域”，打开“输入标签辅助功能属性”对话框，单击“取 消”6. 表格第2列第3行中插入3个“单选按钮”，将每个按钮的属性的“选定值”分别设为 rbll、 rbl2、 rbl37. 表格第2列第4行插入1个“选择(列表/菜单)”将属性面板中，单击“列表值按钮， 输入15、16、17、18、19、20几个值，从“初始化时选定”列表框选择158. 表格第2列第5行插入1个“单选按钮组”，不同按钮采用不同值，分别将8个单选按 钮分别设置值为“a1、a2、a8”在每个按钮的右侧插入不同的图像，并将之排列 成为2行9. 表格第2列第6行插入1个“文件域”在弹出“输入标签辅助功能属性”对话框，单 击“取消”10. 表格第2列第7、8行分别插入1个“文本域”11. 表格第2列第9行插入6个“复选框”将复选框的“选定值”分别设为$1、S2S6”12. 表格第2列第10行插入1个“文本区域”13. 表格第2列第11行插入2个按钮，一个是“提交”按钮，动作选择“提交表单”另 一个是“重置”按钮，动作设置为“重设表单”其“值”自动变成为“重置”