001网页设计基础.ppt

,Dreamweaver应用技术Dreamweaver8实训教程讲义,基础知识部分：第1章网页设计基础第2章规划站点第3章创建和编辑网页第4章网页文本第5章表格第6章图像和多媒体对象,Dreamweaver应用技术Dreamweaver8实训教程讲义,进阶知识部分：第7章超级链接与站点导航第8章网页布局第9章动态特效设计第10章制作动态网站第11章统一站点风格第12章站点的测试与发布,Dreamweaver应用技术Dreamweaver8实训教程讲义,第1章网页设计基础重点内容：网页与网站的相关知识网页的设计方法认识Dreamweaver8的工作区,Dreamweaver应用技术Dreamweaver8实训教程讲义,一、网页与网站的相关知识：1.网站与网页的关系网页即HTML文件，是一种可以在WWW上传输，并被浏览器认识和翻译成页面显示出来的文件。网站是网页的集合，是许多相关网页有机结合而形成的一个信息服务中心。网页之间有一定的链接关系。当访问者在浏览器的地址栏里输入网站的地址以后，浏览器就会自动链接到这个网址所指定的Web服务器，打开一个默认的网页作为浏览这个网站的开始。访问者可以通过点击网页中的链接来跳转到到其他的网页。,Dreamweaver应用技术Dreamweaver8实训教程讲义,一、网页与网站的相关知识：,普通静态网页的工作流程,2.网页的类型普通静态网页指在发送到浏览器之前不会被应用程序服务器修改的Web页。也就是说，当站点访问者请求该网页时，页面内容不会发生更改。,Dreamweaver应用技术Dreamweaver8实训教程讲义,一、网页与网站的相关知识：2.网页的类型动态网页是在发送到浏览器之前由应用程序服务器自定义的网页。动态网页要在经过服务器的修改后才被发送到请求它的浏览器。网页发生更改的特性便是称其为动态的原因。,动态网页的工作流程,Dreamweaver应用技术Dreamweaver8实训教程讲义,一、网页与网站的相关知识：2.网页的类型交互式动态网页指用户通过此网页与网站产生一定的交互性。例如，大部分的网站都有用户注册的功能，访问者申请注册后，成为它的新用户，下次再次登录时，网站即会认可这种用户关系；或者，当访问者向网站提出查询某信息等一些请求后，网页会马上给予回复，这就是动态网页的交互性。,Dreamweaver应用技术Dreamweaver8实训教程讲义,一、网页与网站的相关知识：3.组成页面的元素文本网页中信息的主要表达方式。图像常用的有三种格式：GIF、JPEG和PNG。动画常见的包括两种：GIF动画、Flash动画。视频和音频最流行的音、视频格式有两种：AVI、RM。,Dreamweaver应用技术Dreamweaver8实训教程讲义,一、网页与网站的相关知识：3.组成页面的元素超级链接是在一个网站中的各网页之间进行跳转的媒介。导航栏用于引导访问者浏览站点。表格用于布局文本和图像以及其他的列表化数据和精确控制各种网页元素在网页中出现的位置。表单访问者与网站交互的桥梁。,Dreamweaver应用技术Dreamweaver8实训教程讲义,二、网页的设计方法：1.两种方法直观设计指用所见即所得的方式直接在文档页面中添加文本、图形及其他对象，并设置它们的属性，所得到的效果与在Web浏览器中所浏览到的效果相似。代码设计指通过使用HTML语言编写代码来生成网页，通过各种标记描述不同的内容，说明段落、标题、图像及字体等在浏览器中的显示效果。,Dreamweaver应用技术Dreamweaver8实训教程讲义,二、网页的设计方法：2.HTML基本语法HTML标记HTML文件所需的最基本的标记，书写为和。HEAD标记文件头标记，以开始，以结束。TITLE标记标题标记，用于指定网页的标题。它只能出现在HEAD标记之间，其格式为网页标题。,Dreamweaver应用技术Dreamweaver8实训教程讲义,二、网页的设计方法：2.HTML基本语法BODY标记用于标识网页主体，其中包含一个网页中除标题外的所有对象，格式为：文件主体。hx标记用于标记文本的标题，包括H1-H6，共6级标题。如一级标题的格式为：标题文本转行标记BR标记，作用是强迫文本转行，而且不产生空行。该标记没有终止标记。,Dreamweaver应用技术Dreamweaver8实训教程讲义,二、网页的设计方法：2.HTML基本语法段落标记P标记，用于分开正文，使其独立成段，便于浏览器识别。以开始，以结束。超级链接标记格式为：字符串文本属性标记主要有大小、颜色和字体三种属性。以开始，结束。批注标记由括起。,Dreamweaver应用技术Dreamweaver8实训教程讲义,三、认识Dreamweaver8的工作区：1.选择工作区,Dreamweaver8的工作区布局包括设计器和编码器两种，在【工作区设置】对话框中单击相应的单选按钮即可选择该工作区。,【工作区设置】对话框,Dreamweaver应用技术Dreamweaver8实训教程讲义,三、认识Dreamweaver8的工作区：2.设计器工作区布局标题栏位于Dreamweaver8界面最上部，其中显示程序名称和当前编辑的文件名称。最左侧为控制按钮；最右侧为最小化、最大化/还原和关闭按钮。菜单栏包括10个菜单项，使用这些菜单命令基本上可以实现程序的所有功能。工具栏包括【插入】、【样式呈现】、【文档】和【标准】4个工具栏，可通过选择【查看】|【工具栏】子菜单中的相应命令来显示或隐藏它们。,Dreamweaver应用技术Dreamweaver8实训教程讲义,三、认识Dreamweaver8的工作区：2.设计器工作区布局文档窗口用于显示当前创建或编辑的文档，有【代码】、【设计】和【拆分】3种视图模式。状态栏用于显示当前编辑的文档的状态。属性检查器用于查看和更改当前选定文本或其他对象的属性。控制面板主要包括【CSS】、【应用程序】、【标签检查器】、【文件】、【框架】、【历史记录】、【结果】、【时间轴】8个面板组。,Dreamweaver应用技术Dreamweave