第二篇 网页设计制作篇(skb)
如何用Photoshop制作网页设计图
如何用Photoshop制作网页设计图第一章：网页设计图的基本要素网页设计图是指在Photoshop中创建的一种视觉呈现，用于展示网页的布局、颜色、字体等设计元素。
在制作网页设计图时，需要注意以下几个基本要素：1. 页面尺寸：合适的页面尺寸可以确保网页在不同设备上显示完整。
常见的页面尺寸有1200px、1920px等。
在Photoshop中，可以通过选择“新建”来设置页面尺寸。
2. 布局结构：网页设计图应该包含网页的整体布局结构，如头部、导航栏、正文、侧边栏、底部等。
根据设计需要，可以使用参考线和网格来辅助布局。
3. 颜色方案：选取合适的颜色方案是网页设计中至关重要的一步。
Photoshop提供了丰富的颜色选择工具，如调色板、渐变工具等。
可以根据品牌色彩和网页主题选择合适的颜色。
4. 字体和排版：选择适合网页内容和风格的字体是网页设计的关键。
在Photoshop中，可以通过文本工具选择合适的字体、大小、行间距等，并进行对齐、调整字距等操作。
第二章：利用图层和样式创建网页元素在网页设计中，常见的元素有按钮、图标、标题、背景等。
借助Photoshop的图层和样式功能，可以轻松创建这些元素：1. 图层：使用图层可以将设计元素分开管理，方便修改和调整。
可以通过图层面板对图层进行命名、分组、调整不透明度等操作。
2. 图层样式：Photoshop提供了丰富的图层样式，如阴影、边框、渐变等。
通过在图层样式对话框中进行设置，可以快速添加元素的样式效果，使网页看起来更加美观。
3. 矢量图形：矢量图形可以无损放大，并能保持其清晰度和光滑度。
在Photoshop中，可以使用形状工具绘制矢量图形，并进行填充、描边、变换等操作。
第三章：优化和导出网页设计图在制作网页设计图后，还需要进行一些优化和导出操作，以确保图像加载速度和质量：1. 图像优化：使用Photoshop的图像处理工具，如图像调整、图像压缩等，可以优化网页设计图的质量。
网页设计第2章 Dreamweaver CS5基础
2.2.2新建和保存网页
1．新建网页文档 2．保存网页文档
2.5网页文档头部信息设置
META标签位于在网页<head>…</head>标签之间，用来 记录当前页面的相关信息，如作者和版权信息、搜索关 键字等，它也可以用来向服务器提供信息，如页面的失 效日期、刷新时间间隔等。 META标签分为http-equiv属性和name 属性。name属性主 要用于描述网页，如Keywords（关键字）、description （网站内容描述）等。http-equiv属性类似于HTTP的头部 协议，它回应给浏览器一些有用的信息，以帮助正确和 精确地显示网页内容，如Refresh（刷新）等。
第2章 Dreamweaver CS5基础
网页设计与制作 Dreamweaver CS5 标准教程 邢帅教育
本章学习主要内容：
1.Dreamweaver CS5工作界面 2.创建网站站点 3.管理站点文件和文件夹 4.管理站点 5.网页文档头部信息设置 学习QQ群69364320
2.6课堂案例-慈善救助中心
案例学习目标：学会创建站点、管理站点文 件和文件夹。 案例知识要点：创建站点、移动文件、重命 名文件。 素材所在位置：光盘/案例素材/ch02/课堂案 例-慈善救助中心。 案例效果如图2-29所示。
2.5网页文档头部信息设置
2.5.1插入搜索关键字 2.5.2设置描述信息 2.5.4插入版权信息 2.5.3设置刷新时间 可以指定浏览器在一定的时间后重新加载当前页 面或转到不同的页面，比如论坛网站中通常要定 时刷新页面，以便实时反映在线用户信息、离线 用户信息以及动态文档的实时改变情况。
网页设计2：HTML网页的创建及其基本标记
特殊符号元素标记的使用
HTML超级链接和列表标记
超级链接标记及属性 A href=“” target=“” 属性target的不同取值及对应的含义 _self _blank _top
_parent
邮件链接与书签链接的实现 <a href=mailto:liangrui@></a> <a name=“ab” id=“ab”>aa</a>
作业：
1. 对“个人简介”的网页进行美化，掌握字体、字号、颜色的设置，
并掌握简单的排版 2. 制作显示网页效果及显示网页代码的网页，并实现相互链接 3. 制作个人像册；制作课表表格；制作立体式表格 4．制作一个含有表单的网页，在网页中加入背景音乐、移动文字 5．制作对本课程简介的框架网页，实现将指定的网页显示在指定的 窗口，制作含有浮动窗口的网页。
标记常用属性及应用
浮动框架标记及应用
从标签的角度分解网页构成
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN“ ”/TR/html4/loose.dtd”> 本行代码是用来说明该网页文件使用的标记语言标准,是一组固定代 码,请不要修改 <html></html> 此对标签构建一个页面文件,所有属于该网页的内容原则上都是放在 这对标签之中的. 一个网页从结构上可分为两个部分,即head部分和body部分 Head部分:放置网页中不可见部分的元素 网页的标题 <title>页面标题</title> 网页的描述,网页的关键字,网页使用的字符标准等,都是 <meta> 标签来定义 网页中使用的样式 ,使用<style></style>标签定义 网页中使用的javascript脚本,使用<script></script>标签定义
网页设计与制作教程
网页设计与制作教程网页设计与制作是一门很有趣的技术，可以通过学习和实践来掌握。
下面将为大家分享一些关于网页设计与制作的教程。
第一步：准备工作在进行网页设计与制作之前，首先要做好准备工作。
这包括确定网页的主题和目标，以及收集所需的素材和资源。
可以通过调研、分析竞争对手和用户需求来确定网页的主题和目标。
同时，也要收集所需的图片、文字和其他媒体资源。
第二步：规划网页结构在进行网页设计与制作之前，需要规划网页的结构。
这可以通过制作网页原型来实现。
网页原型是网页的草图，可以用纸笔或专门的原型工具来制作。
在制作网页原型时，要考虑网页的布局、导航和内容组织。
第三步：选择合适的设计风格选择合适的设计风格是网页设计与制作的重要一步。
可以根据网页的主题和目标来选择适合的设计风格。
常见的设计风格包括简约风格、扁平化风格和材料设计风格等。
在选择设计风格时，要考虑网页的整体风格和用户体验。
第四步：设计网页布局设计网页布局是网页设计与制作的核心环节。
可以使用设计软件或代码来实现网页布局。
要注意网页的整体结构和各个部分的排列。
可以使用网格系统来实现网页布局，使网页看起来更加整齐和美观。
第五步：添加内容和媒体在设计网页布局之后，可以开始添加内容和媒体。
这包括文字、图片、音频和视频等。
在添加内容和媒体时，要注意选择合适的字体、颜色和大小，并保持整体风格的一致性。
同时，也要考虑内容的可读性和媒体的加载速度。
第六步：优化网页性能优化网页性能是网页设计与制作的重要一环。
可以通过压缩图片、合并脚本和样式表、使用缓存等技术来提升网页的加载速度。
还可以进行网页的优化测试，找出并解决性能问题。
第七步：测试和发布网页在完成网页设计与制作之后，要进行测试和发布。
可以在不同的浏览器和设备上进行测试，确保网页在各种环境下正常显示和运行。
测试通过后，可以将网页发布到线上服务器，并进行必要的优化和维护工作。
综上所述，网页设计与制作需要经过一系列的步骤，包括准备工作、规划网页结构、选择设计风格、设计网页布局、添加内容和媒体、优化网页性能、测试和发布网页。
网页设计与制作案例教程
网页设计与制作案例教程网页设计与制作是现代社会中非常重要的一项技能。
随着互联网的发展，许多企业、组织和个人都需要一个专业的网页来展示他们的产品和服务。
而设计和制作一个漂亮、功能齐全的网页需要一定的技巧和经验。
本文将介绍一个网页设计与制作的案例教程。
首先，我们需要确定网页的主题和目标。
一个好的网页设计应该有明确的主题和目标，这样才能更好地吸引和满足用户的需求。
比如，如果我们要设计一个电商网站，主题可以是售卖电子产品，目标可以是吸引用户购买商品。
在确定主题和目标之后，我们需要进行一些市场调研和用户分析，了解用户的需求和喜好，以便更好地设计和制作网页。
接下来，我们需要设计网页的布局和结构。
一个好的网页布局应该简洁明了，让用户一目了然。
通常，一个网页可以分为顶部导航栏、主要内容区和底部版权栏三个部分。
顶部导航栏可以用于展示网站的品牌和主要功能，主要内容区可以展示产品和服务的详细信息，底部版权栏可以展示网站的版权信息和联系方式。
同时，我们还可以使用一些配色方案和排版技巧，使网页看起来更加美观和专业。
然后，我们需要选择合适的网页制作工具和技术。
目前，有许多网页制作工具和技术可供选择，如HTML、CSS、JavaScript、WordPress等。
这些工具和技术可以帮助我们更快速地制作网页，并添加一些交互效果和特效。
同时，我们还需要注意网页的兼容性和响应式设计，确保网页在不同的设备和浏览器上都可以正常显示和使用。
最后，我们需要测试和优化网页。
在设计和制作完成之后，我们需要对网页进行测试，确保网页的功能和性能都正常。
同时，我们还可以收集用户的反馈和意见，根据实际情况对网页进行优化和改进。
这样可以提高用户的体验和满意度，使网页更加具有竞争力。
综上所述，网页设计与制作是一项非常重要的技能。
通过合理的设计和制作，我们可以创建出漂亮、功能齐全的网页，吸引和满足用户的需求。
但是，网页设计与制作也是一个不断学习和提升的过程，需要我们不断学习和实践。
如何使用Photoshop创建完美的网页设计
如何使用Photoshop创建完美的网页设计在当今数字化的时代，拥有一个吸引人且功能齐全的网页对于个人和企业来说都至关重要。
Photoshop 作为一款强大的图像编辑软件，为网页设计师提供了丰富的工具和功能，帮助他们将创意转化为令人惊艳的网页设计。
接下来，我将详细介绍如何使用 Photoshop 来创建完美的网页设计。
一、前期准备在打开 Photoshop 之前，我们需要先明确网页的设计目标和需求。
考虑网页的用途（是商业网站、个人博客还是在线商店？）、受众群体（年龄、兴趣、职业等）以及要传达的主要信息。
同时，收集一些灵感，浏览其他优秀的网页设计案例，分析它们的布局、色彩搭配、字体运用等方面的优点。
确定好设计方向后，根据常见的网页尺寸（如 1920x1080 像素、1366x768 像素等）新建一个文档。
在新建文档时，要注意分辨率设置为 72 像素/英寸，颜色模式选择 RGB 模式。
二、规划布局布局是网页设计的基础，它决定了网页的整体结构和内容的组织方式。
在 Photoshop 中，可以使用矩形选框工具、形状工具和参考线来规划布局。
首先，根据网页的类型和内容，确定是采用单列布局、两栏布局还是多栏布局。
例如，博客类网页通常采用两栏布局，一侧是文章列表，另一侧是文章内容；而电商网站则可能采用多栏布局，展示不同的商品类别。
然后，使用参考线来划分页面的各个区域，如页眉、导航栏、主体内容区、侧边栏和页脚等。
参考线可以帮助我们保持元素的对齐和比例协调。
在规划布局时，要考虑到用户的浏览习惯，将重要的内容放在显眼的位置，并且保证页面的平衡和对称。
三、色彩搭配色彩是网页设计中最具表现力的元素之一，它能够影响用户的情绪和对网页的第一印象。
选择合适的色彩搭配对于创建一个吸引人的网页至关重要。
首先，确定网页的主色调。
主色调应该与网页的主题和品牌形象相符。
例如，科技类网站可能会选择蓝色和灰色作为主色调，以传达专业和创新的感觉；而儿童类网站则可能会选择鲜艳的色彩，如粉色、黄色和绿色。
网页设计
江西师范大学网页设计课程组
2.1 Dreamweaver 8.0界面介绍 8.0界面介绍
2.1.1 Dreamweaver 8.0界面介绍 8.0界面介绍 在首次启动Dreamweaver8时会出现如图 在首次启动Dreamweaver8时会出现如图2-1的一个界面, 时会出现如图2 的一个界面, 这是一个“工作区设置”对话框， 这是一个“工作区设置”对话框，在对话框左侧是 Dreamweaver8的设计视图 右侧是Dreamweave 8的代 Dreamweaver8的设计视图，右侧是Dreamweave 8的代 的设计视图， 码视图。Dreamweaver8设计视图布局提供了一个将全部 码视图。Dreamweaver8设计视图布局提供了一个将全部 元素置于一个窗口中的集成布局。 元素置于一个窗口中的集成布局。我们选择面向设计者的设 计视图布局。
江西师范大学网页设计课程组
2.2 Dreamweaver 8.0常用工具 8.0常用工具
2.2.2文档工具栏 2.2.2文档工具栏 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口 视图（如“设计”视图和“代码”视图）的选项、各种查看 选项和一些常用操作（如在浏览器中预览）。界面如图2-4所 示。
江西师范大学网页设计课程组
2.3 Dreamweaver8.0的功能简介（3） Dreamweaver8.0的功能简介 的功能简介（
6.运用完整的集成开发环境来开发 运用完整的集成开发环境来开发HTML、XHTML、XML、 运用完整的集成开发环境来开发 、 、 、 ASP、、JSP、PHP和Macromedia Cold Fusion 、 、 、 和 站点。通过Macromedia插件中心可以获取 插件中心可以获取800多个免费插 站点。通过 插件中心可以获取 多个免费插 件来制定和扩展你的开发环境。 件来制定和扩展你的开发环境。 7.所有传输的文件完全加密，并阻止越权存取你的信息、文 所有传输的文件完全加密， 所有传输的文件完全加密 并阻止越权存取你的信息、 件内容、用户名和口令。 件内容、用户名和口令。 8.从Microsoft Word和Excel中直接拷贝粘帖内容到 从 和 中直接拷贝粘帖内容到 Dreamweaver中，同时保留字体、颜色和 样式。 中 同时保留字体、颜色和CSS样式。完全 样式 支持Unicode，支持使用和 存任何字体以及编码（ 支持 ，支持使用和chu存任何字体以及编码（包括 存任何字体以及编码 双字节字符）。 双字节字符）。 9.使用改进后的 使用改进后的对象和属性检测工具构建 使用改进后的 对象和属性检测工具构建 Microsoft Web forms.
网页设计与制作教程
网页设计与制作教程网页设计与制作教程网页设计与制作是一门充满创造力和技术性的艺术，它涉及到许多方面的知识和技能。
下面是一个简单的网页设计与制作教程，帮助初学者入门。
第一步：规划和研究在开始设计和制作网页之前，首先需要规划和研究。
明确网页的目标和需求，了解目标受众和他们的需求。
同时研究一些优秀的网页设计作品，学习他们的布局、配色和排版等。
第二步：设计草图设计草图是设计师将想法落实为可视化的工具。
可以使用纸和笔，也可以使用草图设计软件。
在设计草图中，要考虑网页的整体布局、主要内容块、导航栏、配色等。
第三步：创建原型原型是一个初步的网页模型，用于展示网页的功能和交互。
可以使用线框图或者原型设计软件创建原型。
原型的制作，可以将设计草图转化为更真实的网页样式。
第四步：编写HTML和CSSHTML是网页的骨架，CSS是网页的样式。
在这一步中，需要学习HTML标签和CSS属性，了解如何创建网页的基本结构和样式。
可以使用文本编辑器编写HTML和CSS代码。
第五步：图像和多媒体网页设计中常常需要图像和多媒体元素来增强用户体验。
可以使用图像编辑软件创建和优化图像，使用多媒体文件来添加音频、视频等。
第六步：响应式设计响应式设计是指网页能够适应不同屏幕尺寸和设备。
可以使用CSS媒体查询来实现响应式设计。
在设计和制作网页时，要考虑不同设备的适配。
第七步：测试和优化在完成网页设计和制作后，需要进行测试和优化。
测试网页在不同浏览器和设备上的显示和功能是否正常。
可以使用一些测试工具和技术来辅助测试，如浏览器兼容性测试工具和网页性能测试工具。
第八步：发布和维护在网页测试通过后，就可以发布到服务器上，让用户可以访问。
同时需要定期维护网页，更新内容、修复bug等。
可以使用一些网页分析工具来了解网页的访问情况，从而做出优化和改进。
以上就是一个简单的网页设计与制作教程。
通过学习和实践，不断提升自己的设计和制作能力，打造出漂亮、实用的网页作品。
网页设计案例教程
网页设计案例教程网页设计案例教程在当今的互联网发展中，网页设计已经成为一个非常重要的领域。
优秀的网页设计可以提升用户体验，增加用户粘性，提高转化率。
下面将为大家介绍一个网页设计案例教程，帮助大家更好地掌握网页设计的技巧。
首先，我们需要确定网页的目标和主题。
一个好的网页设计应该与目标和主题相符，能够准确传递信息。
例如，假设我们要设计一个用于销售手机的网页，那么我们的目标就是促进手机的销售，主题应该和手机销售相关。
接下来，我们需要进行网页的布局设计。
网页布局要注意简洁明了，不要出现过多的干扰，让用户能够快速找到需要的信息。
一般来说，网页布局可以分为两栏、三栏或层叠式布局。
根据不同的需求选择合适的布局。
然后，我们需要选择合适的颜色和字体。
颜色和字体的选择应该与网页的主题相符，能够给用户带来良好的视觉效果和阅读体验。
一般来说，网页设计应该避免使用过多的颜色，保持简洁和统一。
字体的选择也应该简洁明了，易于阅读。
接下来，我们需要设计网页的导航和菜单。
导航和菜单是用户浏览网页的重要工具，应该清晰明了，易于使用。
导航和菜单的设计应该考虑用户的习惯和易用性，尽量少的使用下拉菜单和弹出窗口。
最后，我们需要考虑网页的响应式设计。
随着移动设备的普及，网页要兼容不同的屏幕尺寸和设备类型。
响应式设计可以使网页在不同设备上都能够良好地显示和使用。
为了实现响应式设计，可以使用CSS媒体查询和网格布局等技术。
综上所述，一个优秀的网页设计需要从目标和主题出发，进行布局设计，选择合适的颜色和字体，设计清晰的导航和菜单，并考虑响应式设计。
通过这个案例教程，希望能够帮助大家更好地掌握网页设计的技巧，设计出更加优秀的网页。
网页设计怎么做-网页设计与制作案例教程
网页设计怎么做?网页设计与制作案例教程互联网的不断进展，网页设计已经成为了一个特别重要的行业。
在这个行业中，网页设计师需要具备肯定的技能和学问，才能够设计出优秀的网页。
本文将为大家介绍网页设计与制作案例教程，关心大家更好地了解网页设计的相关学问。
网页设计的基本原则在进行网页设计之前，我们需要了解一些基本的原则。
这些原则可以关心我们设计出更加美观、易用的网页。
1、简洁明白网页设计应当简洁明白，不要过于简单。
网页上的元素应当尽量少，排版应当清楚明白，让用户能够快速找到自己需要的信息。
2、颜色搭配网页设计中的颜色搭配特别重要。
颜色的选择应当与网页的主题相符合，同时也要考虑到用户的视觉感受。
3、布局合理网页的布局应当合理，不要让用户感到混乱。
网页上的元素应当根据肯定的规律排列，让用户能够快速找到自己需要的信息。
4、易用性网页的易用性特别重要。
网页上的元素应当易于操作，让用户能够快速完成自己的操作。
网页设计的步骤在进行网页设计之前，我们需要了解一些基本的步骤。
这些步骤可以关心我们更好地进行网页设计。
1、确定网页的目标在进行网页设计之前，我们需要确定网页的目标。
我们需要考虑到用户的需求，设计出符合用户需求的网页。
2、制定网页的结构在确定网页的目标之后，我们需要制定网页的结构。
我们需要考虑到网页上需要包含哪些元素，以及这些元素的排列方式。
3、设计网页的样式在制定网页的结构之后，我们需要设计网页的样式。
我们需要考虑到网页的颜色、字体、图片等元素，以及它们的搭配方式。
4、制作网页在设计网页的样式之后，我们需要进行网页的制作。
我们需要使用一些网页制作工具，如HTML、CSS等，来制作网页。
5、测试网页在制作网页之后，我们需要进行网页的测试。
我们需要测试网页的易用性、速度等方面，以确保网页的质量。
网页设计的案例教程下面我们将为大家介绍一些网页设计的案例教程，关心大家更好地了解网页设计的相关学问。
1、制作一个简洁的网页在这个案例中，我们将制作一个简洁的网页。
网页设计怎么做？网页设计制作网站教程
网页设计怎么做？网页设计制作网站教程当我们打开扫瞄器，输入网址，一个精致、功能齐全的网站便呈现在我们面前。
这个网站可能是一个电商平台、一个新闻网站，或者一个个人博客。
无论是哪种类型的网站，它们都离不开细心的网页设计和制作。
网页设计是一门综合性的学科，它涉及到视觉设计、用户体验、交互设计等多个方面。
本文将为您介绍网页设计制作网站的教程，关心您了解如何设计和制作一个精彩的网站。
网页设计的基础学问在开头设计和制作网站之前，我们需要了解一些基础学问。
首先，我们需要明确网站的目标和受众群体。
不同类型的网站有不同的设计风格和功能需求，因此在设计之前需要明确网站的定位。
其次，我们需要了解网页设计的基本原则，如布局、颜色、字体等。
合理的布局可以使网站更易于扫瞄和导航，恰到好处的颜色和字体选择可以增加用户的视觉体验。
网页设计工具的选择在进行网页设计之前，我们需要选择适合自己的设计工具。
市面上有很多专业的网页设计工具，如Adobe Photoshop、Sketch、Figma 等。
这些工具供应了丰富的设计功能和资源，可以关心我们快速高效地进行设计。
此外，还有一些在线设计工具，如Canva、Fotor等，它们供应了简洁易用的界面和模板，适合初学者使用。
网页设计的流程网页设计的流程通常包括需求分析、原型设计、视觉设计、前端开发等多个环节。
首先，我们需要进行需求分析，明确网站的功能需求和用户需求。
然后，我们可以使用原型设计工具创建网站的草图和交互模型，以便更好地理解和展现设计思路。
接下来，我们可以进行视觉设计，选择合适的颜色、字体和图片，打造出独特的网站风格。
最终，我们需要进行前端开发，将设计转化为可交互的网页。
这一过程通常涉及到HTML、CSS、JavaScript等技术的运用。
网站的优化和测试设计和制作完成后，我们需要对网站进行优化和测试。
优化可以包括网站的性能优化、SEO优化等。
性能优化可以提高网站的加载速度，提升用户体验;SEO优化可以提高网站在搜寻引擎中的排名，增加流量和曝光度。
网页设计与制作项目教程 第2版 项目4 “爱家居”企业网站首页制作
知识储备
1.边框属性
边框颜色
border-width属性 用于设置边框的宽度 常用取值单位为像素
border-top-width：上边框宽度; border-right-width：右边框宽度; border-bottom-width：下边框宽度; border-left-width：左边框宽度;
掌握使用盒子模型相关属性设置不同的盒子模型样式的方法。 掌握使用浮动和定位属性对页面进行布局的方法。 掌握清除元素浮动的方法。
项目描述/ Summary
在互联网时代，企业网站因其方便、快捷和低成本的优势，被越来越多的企业所使用。企 业网站作为企业宣传品牌，展示服务与产品的平台，在营销活动中起到了至关重要的作用。 “爱家居”是一家从事线下家居销售的店铺，最近“爱家居”经理老王找到小思，想请小 思帮忙制作一个企业网站。 通过前面两个页面的制作，小思已经掌握了HTML与CSS的基础。接到老王的委托后，小思 首先制定了这段时间的知识学习计划，包括盒子模型、元素的类型与转换、浮动与定位等 网页布局的基础知识。然后再动手制作“爱家居”企业网站。由于篇幅限制，本项目只讲 解“爱家居”企业网站首页的制作过程。
知识储备
项目4 “爱家居”企业网站首页制作
《网页设计与制作项目教程（HTML+CSS+JavaScript）》（第2版）
学习目标/Target
了解盒子模型的概念，能够举例描述盒子模型结构。 掌握元素的类型，能够归纳不同元素类型的特点。 熟悉常见的布局类型，能够总结不同类型布局的差异。
学习目标/Target
只沿水平方向平铺
no-repeat
不平铺（图像位于元 素的左上角，只显示 一次）
repeat-y
网页设计与制作案例教程(第2版)(胡秀娥) 项目九(模 板 与 库)
步骤 1 启动Dreamweaver CC，打开blog站点。
步骤 2 单击“文件”→“新建”菜单，打开“新建文 档”对话框。在左侧列表中选择“新建文档”选项，在 “文档类型”列表中选择“HTML模板”选项，在“布局” 列表中选择“<无>”选项，如图所示。
01
任务一 模板的基本操作
使用模板可以高效率地制作同一网站中结构相同的页面。 本任务将介绍模板的基础知识，以及使用Dreamweaver CC利 用模板制作网页的基本操作。
Dreamweaver CC中创建模板的方法有两种。一种是新建空白模板文档，然后像制作普通网页一在样设置模 板内容；另一种是将已经制作好的普通网页转换为模板。（本项目内容都将以blog站点为例，即本书配套素材“ 项目九”→“blog”文件夹，读者可先使用该文件夹创建站点，便于后续学习。） 1．新建空白模板文档
相同的其他页面。 步骤 1 继续在前面的blog站点中操作，双击“文件”面板中的“bowen1.html”选项，打开网页文 档。将插入点置于“代码”视图中，单击“文件”→“另存为模板”菜单。 步骤 2 打开“另存模板”对话框，在“另存为”文本框中输入模板文档名，此处为“t2”，单击“保存” 按钮，打开“Dreamweaver”对话框，询问是否更新链接，一般情况下都应单击“是”按钮，如图所示。
“新建文档”对话框
步骤 3 单击“创建”按钮，使用模板创建的网页文 档便出现在文档窗口中，该文档中只有可编辑区域的 内容可以修改，如图所示。
步骤 4 按“Ctrl+S”组合键，打开“另存为”对话 框，保存位置选择站点根目录，在“文件名”文本框 中输入“bowen2.html”，单击“保存”按钮，如图 所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一、添加文本
• • • • • • 添加普通文本 添加空格 添加日期时间 添加水平线 添加特殊字符：© ® 实例操作：
–我的足球网－首页
¥
等
实例
二、设置文本样式
• CSS：Cascading Style Sheet，层叠样式表 或级联样式表，是一组格式设置规则，用于控 制web页面的外观。 • 字体：建议选择常用字体 • 大小 • 颜色 • 风格
四、创建锚点链接
锚点链接：指到网页某一特定位置的超链接。这种链接的目标 点不是网页,而是文档中的命名锚记，利用这种链接，可以 跳转到当前文档中的某一指定位置上，也可以跳转到其他 文档中的某一指定位置上。 步骤:
**创建命名锚记，就是在网页中设置位置标记，并给该位置 一个名称，以便引用。 **属性面板的链接栏中直接输入“#锚点名”
第一讲
网页制作基础
学习内容
• • • • • • • 初识Dreamweaver Dreamweaver CS5工作界面 网页文件的基本操作 设置网页外观属性 创建站点 设置默认图像文件夹 站点的管理
一、Dreamweaver CS5简介
• 软件下载
• 安装 • 启动 • 退出
二、Dreamweaver CS5工作界面
**在图像属性面板中，使用热区工具(矩形、椭圆、多 边形)，在图像上划分热区 **为绘制的每个热区设置不同的链接地址和替代文字
九、创建导航条链接
介绍：使用鼠标经过变换图像的特效，创建图像导 航条。导航条中按钮图像的状态可根据浏览者的 鼠标动作而改变。 步骤： **将光标放到要插入导航条的位置 **设置鼠标经过时变换图像的特效，并为其设定链 接目标
onClick="this.style.behavior='url(#default#homepage) ';this.setHomePage('/')"
设默认主页的具体操作：先创建一个空链接，然后在代码 视图相应处中的“#”后空一格，再粘贴上面的一串代码 即可实现
上机作业
• 模仿练习
– 模仿本讲课内容，在以前你创建好的站点下 制作多个网页文件，并尝试设置学过的各种 超链接，制作成品请提交至邮箱： computer_hustwh@
书面作业
1.什么是超链接？常用的超链接有哪些类型？并 分析其特点。
第四讲 表格处理
学习内容
• • • • • • • 插入表格 设置表格大小 创建数据表格 表格的设置 表格的html标记 表格嵌套：实例操作 利用表格进行网页布局
网页设计与制作
第二篇 网页设计制作篇
（Dreamweaver CS5）
主要内容纲要
• • • • • • • • • • 回顾HTML Dreamweaver CS3简介与工作界面 网页文件的基本操作 网页制作的基本操作 建立网页链接 表格处理 框架结构 插入多媒体元素 AP DIV元素 行为特效
• .PNG格式
–特点：是一种逐步流行的网络图像格式。既融合了gif能 做成透明背景的特点，又具有jpeg处理精美图像的优点。 –用途：常用于制作网页效果图。
六、在网页中插入图片
**插入→图像
**插入面板→常用→图像 **直接将图像文件拖入编辑区
注意：
**在插入图像前应先将网页文件已保存，从而使所插图像 引用正确 **图像插入网页后，应确定图像文件已经存入站点，否则 在下次打开网页时，会出现看不到图像的情况。
什么是超链接
• 所谓的超链接是指从一个网页指向一个目
标的链接关系，这个目标可以是另一个网 页，也可以是相同网页上的不同位置，还 可以是一个图片，一个电子邮件，一个文 件，甚至是一个应用程序。
一、创建内部链接
**step1：选中页面中的文字或图像，在属性面板中 单击“链接”文本框右侧的文件夹图标，以通过浏 览选择一个文件 **step2：在“目标”下拉菜单中，选择文档的打开 位置
**插入栏|常用|电子邮件链接|输入邮件地址 或 在属性面板的链接栏中直接输入“mailto：邮件 地址”
六、创建下载链接
当被链接的文件是exe文件或zip、rar等类型的文 件时，浏览器无法直接打开，便会提示文件会被 下载，这就是网上下载的方法。 步骤： **创建一个到是exe文件或zip、rar类型文件的超链 接即可
实例
五、设置段落格式
• 对齐方式 • 列表编号
– 列表可以将文本段落用符号或序号标注起来，有两 种类型：项目列表和编号列表。设置项目列表的操 作过程如下：
• 选择要添加列表的若干文本段落
• 单击属性检查器中的“项目列表”按钮或“编号列 表”按钮
• 缩进
六、在网页中插入图片网页中使用的图片格式• NhomakorabeaGIF格式
上机作业
• 熟悉Dreamweaver CS5工作环境 • 模仿练习
– 模仿本讲课内容，创建自己的个人站点，并制
作简单的一句话网页，切换网页试图模式为“
拆分试图”，观察起文档基本语法格式。
第二讲
制作网页的基本操作
学习内容
• • • • • • • • • • 添加、编辑文本 设置文本样式 分段和换行 设置段落格式 网页中使用的图片格式 在网页中插入图像 设置图像属性 图文混排 编辑图片 鼠标经过时更改图片特效
十、创建跳转菜单
介绍：跳转菜单是网页中的弹出式菜单，可以创建任何文件 类型的链接。利用跳转菜单可以有效地节约版面，因此 广泛应用。
步骤： **插入栏——“表单”——“跳转菜单”按钮 **在“插入跳转菜单”对话框中， 在文本后输入对应的文 本 **在“选择时，转到RUL”文本框中输入要跳转的完整网址 **单击+号继续添加其他菜单项 **选中跳转菜单，通过属性面板可以编辑菜单“列表值”， 并可设定初始显示状态
•
创建站点：
六、设置默认图像文件夹
操作
• 在“文件”面板中点击管理站点→选中一
站点→打开“站点管理”对话框→然后点
“编辑” →再设置“默认图像文件夹”路
径即可。
七、站点管理
站点管理
• • • 编辑站点 复制站点 删除站点
文件面板中实现的操作
• • • 选择编辑网页文件 创建文件或文件夹 剪切/粘贴/复制/删除/重命名文件或文件夹
上机作业
• 模仿练习
– 模仿本讲课内容，制作一张图文并茂的网页， 素材自备，内容自定。
第三讲 建立网页链接
学习内容
• • • • • • • • • • • 超链接的概念 内部链接 外部链接 设置链接样式 锚点链接 电子邮件链接 下载链接 空链接 图像热区链接 创建导航条链接 跳转菜单（即友情链接）
三、编辑文本
• 拖动鼠标选中一个或多个文字、一行或多行文 本，也可以选中网页中的全部文本 • 按BachSpace键或Delete键实现删除文本操作
• 实现复制、剪切、粘贴等操作
• 实现查找与替换查找
• 实现撤销或重做
四、分段与换行
• 分段按Enter回车键（隔一行）
• 换行按Shift+Enter（不分段）
**锐化
**对比度/亮度
**重新采样：当图片的宽、高缩小后，重新生成更 小的图片
**优化：为图片“瘦身”
鼠标经过时更换图片特效制作
概念：
–指在页面中先显示一张图像，当鼠标移动到该图 像上时，图像切换成另一张图像。
步骤：
**将光标放到要插入图像的地方 **单击菜单“插入记录”→“图像对象”→“鼠标经过 图像”→“插入鼠标经过图像对话框” →设置
内部链接：目标端点是本站中的其他网页。 外部链接：目标点是不同站点或本站点以外的网页。
注意：链接中须使用完整的URL地址 如：
浏览网页网络协议 域名
三、设置链接样式
• 链接颜色：指定用于链接文字的颜色 • 已访问链接：指定链接被访问过的颜色 • 变换图像链接：指定当鼠标位于链接上时的颜色 • 活动链接：指定当鼠标在链接上点击时的颜色
注意： (1)如果链接的目标锚点标记在当前页面即输入“#锚点名” (2)如果链接的目标锚点标记在其他网页，即要输入目标网页 的地址和名称，然后在输入“#锚点名”
五、创建电子邮件链接
Email链接：单击这种链接，可以启动电子邮件程序 （如outlook）书写邮件，并发送到指定地址。
步骤：
**选中文本和图像
认识 Dreamweaver CS5
标题栏 菜单栏
插入面板 文档工具栏
水平标尺
垂直标尺
文档编辑窗口
浮动面板
状态栏
属性面板
• 插入面板：主要用于在网页中插入各类网页元素。默认情况 下显示的是“常用”插入栏。
• 文档工具栏：用于切换编辑区视图模式、设置网页标题等， 还可用于在浏览器中浏览网页。 • 浮动面板组：是浮动面板的集合。位置可任意拖动。 • 属性面板：用于设置和查看所选对象的各种属性。不同对象 其属性面板的参数设置项目不同。 • 扩展按钮：可以显示或隐藏浮动面板和属性面板。扩展按钮 有水平和纵向两种，其作用分别介绍如下：水平扩展按钮： 单击编辑窗口右侧的”水平扩展“按钮，可以隐藏或展开工 作界面右侧的浮动面板组，这样可以在水平方向扩大编辑窗 口….. • 状态栏：选择标签、选取工具、手形工具、缩放工具、设置 缩放比率、调整窗口大小，显示文件大小及下载可能需要时 间。
_self：会在当前网页所在的窗口或框架中打开（默 认方式） _blank：每次链接都创建一个新窗口 _new：在同一个刚创建的窗口中打开 _parent：如果是嵌套的框架，则在父框架中打开
_top：会在完整的浏览器窗口中打开
二、创建外部链接
**步骤1：选中文字或图像后，直接在属性面板的“链 接”文本框中输入外部的链接地址，如 **步骤2：然后在“目标”下拉菜单中设置这个链接的 目标窗口