6.4网页制作探析.pptx

第4节 网页设计基础Dreamweaver CS4;;4.1 网页设计的基本概念;网页 ; HTML（Hypertext Markup Language）是一种超文本标记语言，用来描述万维网上的超文本文件。 从文件的角度来说，一个网页就是一个HTML文件。 ;构成网页的基本元素大体相同，主要包括标题、网站Logo、导航、超链接、广告栏、文本、图片、动画、视频与音频等。 按网页的表现形式可将网页分为： 静态网页 动态网页 ;网页设计的流程主要包括： 前期策划 创建站点 创建主页和其他网页 添加网页基本元素 创建网页超级链接 网页设计的版面布局 制作网页表单;4.2 网站的创建和管理;4.2.2 站点的新建与管理;2. 站点的建立;3. 站点的管理; 在网页创作中，网页上的信息大多是通过文字来表达的。文字是最基本的元素之一，具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代。;（3）网页页面属性设置;例2：打开wy1.html，将网页标题设置为“母亲河”，设置网页的超级链接颜色。;（4）文本属性设置（HTML属性）;（7）设置列表;例4：将wy1-1.html中的相应段落设置编号列表。; CSS（Cascading Style Sheet）称为“层叠样式表”，简称为“样式表”。CSS是一组格式设置规则，用于控制Web页面元素的外观布局。 使用CSS可以灵活并更好地控制许多文本属性，包括特定字体、大小、粗体、斜体、下划线等。;（1）CSS规则;（2）CSS定义;添加字体;（3）CSS的应用;4.4 网页设计的超级链接和多媒体应用; 超链接是指页面对象之间的链接关系，只有通过超链接才可以实现在不同网页，乃至不同网站之间的跳转。 超链接就是从一个网页指向一个目标的关系，目标可以是另一个网页，可以是同一网页的不同位置，还可以是一幅图像、一个文件等。;例6：在wy1.html中设置第一行中文本“黄河”的超级链接，链接文件为“huanghe.html”。;在“目标”下拉列表中可以选择超级链接的打开方式。;2. 锚记链接;例7：在wy1.html网页尾部添加“返回顶部”四个字，并建立超级链接，可跳转到网页的首部。;3. Email链接;4.4.2.多媒体的应用;例8：将图像huanghe.jpg文??插入到wy1.html文档中，并设置替换文本。;插入鼠标经过图像;例9：在wy1.html网页中插入“鼠标经过图像”，图像为huanghe1.jpg和huanghe2.jpg文件。;2 . 插入Flash动画 Flash动画以其文档容量小、效果丰富等特点深受网页制作者的钟爱。;3. 添加音频（“插入/媒体/插件”）;4. 添加视频(“插入/媒体/FLV”）;插入FLV对话框;网页是网站构成的基本元素。 一个网站是否精彩有什么影响因素呢？ 色彩的搭配、文字的变化、图片的处理 还有一个非常重要的因素——网页布局。 什么是网页布局？ 网页布局是指网页内容在页面上所处位置的设计。;常见的网页布局结构;2．T型布局 T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。 ;3．标题正文型 标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。 ;4．左右框架型布局 左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容 ;5．上下框架型 上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。 ;6. 综合框架型 综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术 ;7．POP布局 POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。 ;8．FLASH布局 FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。 ;我们学校的主页是什么布局？;;网页布局的方法;1. 利用表格布局网页;2. 表格的基本操作;例14：新建一网页文件wy3-1.html，在网页中插入一个4行×3列表格，合并第一行单元格，并设置对齐方式居中。;“修改/表格/合并单元格”;单元格“填充”和“间距”： “填充”指单元格边框与单元格内容之间的距离，单位为像素 “间距”指单元格边框与单元格边框之间的距离，单位为像素; 表格建立好