当前位置：文档之家 › DW学习第1章 网页设计基础

DW学习第1章 网页设计基础

  • 格式：pptx
  • 大小：268.67 KB
  • 文档页数：25

下载文档原格式

  / 25

合集下载

Dreamweaver网页设计工具入门指南

Dreamweaver网页设计工具入门指南

Dreamweaver网页设计工具入门指南Chapter 1: Introduction to DreamweaverDreamweaver is a powerful web design tool developed by Adobe. It provides web designers and developers with a comprehensive set of features and functionalities to create dynamic and visually appealing websites. This chapter will introduce the basics of Dreamweaver and how to get started with the software.1.1 Installing DreamweaverTo begin using Dreamweaver, you first need to install the software on your computer. Visit the Adobe website and download the installer file for your operating system. Follow the on-screen instructions to complete the installation process.1.2 Interface OverviewUpon launching Dreamweaver, you will be greeted with a user-friendly interface. The main components of the interface include the Document window, the Toolbar, and various panels that can be customized based on your needs. Familiarize yourself with these components to effectively navigate through the software.Chapter 2: Creating a WebpageIn this chapter, we will explore how to create a webpage using Dreamweaver. Whether you are starting from scratch or working withan existing template, Dreamweaver provides a variety of tools to help you build your website.2.1 HTML BasicsBefore diving into Dreamweaver, it is important to have a basic understanding of HTML. HTML stands for Hypertext Markup Language, which serves as the backbone of webpages. Learn the basic structure of an HTML document, including tags, attributes, and elements.2.2 Design View vs. Code ViewDreamweaver offers two distinct views for designing webpages: Design view and Code view. Design view allows you to visually create and layout elements, while Code view provides a more precise control over the HTML code. Understanding the differences between these views will enhance your overall web design experience.Chapter 3: Working with CSSChapter 3 will focus on Cascading Style Sheets (CSS), a powerful tool that enhances the appearance and layout of webpages. Dreamweaver offers comprehensive CSS editing capabilities, making it easier for designers to manage and style their websites.3.1 CSS BasicsBefore applying CSS in Dreamweaver, it is essential to understand the fundamental concepts of CSS. Learn about selectors, properties, and values in order to style HTML elements effectively.3.2 CSS DesignerDreamweaver's CSS Designer allows designers to visually create and edit CSS rules. This powerful tool streamlines the process of applying styles and managing CSS properties. Familiarize yourself with the CSS Designer to enhance your workflow.Chapter 4: Responsive Design with DreamweaverIn today's mobile-driven world, it is crucial to create websites that are responsive and accessible across various screen sizes. Dreamweaver provides features and tools to facilitate the creation of responsive web designs.4.1 Media QueriesMedia queries allow websites to adapt to different screen sizes by applying specific CSS rules based on the device's characteristics. Learn how to use Dreamweaver's built-in media query feature to create responsive designs.4.2 Fluid Grid LayoutsFluid grid layouts provide a flexible and grid-based structure for designing responsive webpages. Dreamweaver simplifies the creationof fluid grid layouts by offering pre-built templates and a visual interface for easy customization.Chapter 5: Website Management and PublishingOnce you have created your webpage, Dreamweaver offers features to help you manage and publish your website effectively. This chapter will cover the process of testing, previewing, and publishing your site.5.1 Testing and PreviewingDreamweaver allows you to test your webpage across different browsers and devices to ensure compatibility. In addition, you can preview your site in real-time to see how changes affect its appearance and functionality.5.2 Publishing Your WebsiteDreamweaver provides seamless integration with web hosting services, allowing you to publish your website with ease. Learn how to configure the FTP settings and upload your files directly from within the software.In conclusion, Dreamweaver is a comprehensive web design tool that empowers designers and developers to create visually stunning and functional websites. This article has provided an overview of the software, including installation, interface, webpage creation, CSS editing, responsive design, and website management. By masteringDreamweaver, you can unleash your creativity and design websites that captivate your audience.。

Dreamweaver网页设计-网页设计基础

Dreamweaver网页设计-网页设计基础
1.
例1-18运行效果 例1-19运行效果
本章习题 上机练习
练习1 编写HTML代码 练习 编写 代码
用记事本创建一个HTML文档，网页效果如图1-68所示。在Dreamweaver 中利用标签选择器创建HTML文档，完成同样的效果。
练习2 文件头标签的应用 练习
练习用“HTML”工具栏中的“文件头”按钮（如图1-69所示）进行网页 文件头的设计，包括设置网页关键字、设置页面自动切换等功能。
例1-3运行效果
5. <hr>水平线标记
例1-4运行效果
6. <pre>原文显示标记
例1-5运行效果
1.2.3页面布局综合实例
下面将介绍设计一个基本页面布局的综合实例，在这 个实例中综合运用了<hr>、<hn>、<br>、<p>、 <pre>等标记。注意这个实例中各种标记的使用情况， 并结合前面的介绍深入掌握它们的用法。
一个基本的网页表格通常由表格的标题、表栏、数据 项、数据等元素组成。 标题表示了这个表格的主要内容； 表栏是指表格中一个个小的矩形区域，它用来存放数 据等； 数据项，又称表头，表示数据项所对应的名称； 数据是指存放在表栏中的文字、数字等信息。
1.6.2简单表格 简单表格
<table>基本表格标记 2. <caption>表格标题标记 3. <tr>行标记 4. <td>单元格标记 <td>
1.1.2 课堂实例――创建和测试第一个网页 课堂实例――创建和测试第一个网页 ――
选择“开始”|“所有程序”|“附件”|“记事本”，运行“记事 本”程序。在“记事本”窗口中输入以下内容： <html> <head> <title>欢迎光临我的第一个网页</title> </head> <body> 这是第一个简单网页! </body> </html>

Dreamweaver 网页设计基础知识

Dreamweaver 网页设计基础知识
● ASP的特点 ASP的特点
（1）使用VBScript、Jscript等简单易懂的脚本语言。 使用VBScript、Jscript等简单易懂的脚本语言 等简单易懂的脚本语言。 （2）ASP应用程序既可以手工编码制作，又可以通过 ASP应用程序既可以手工编码制作 应用程序既可以手工编码制作， Dreamweaver等可视化工具创作生成 Dreamweaver等可视化工具创作生成。 等可视化工具创作生成。 （3）无需编译，容易编写，并且与浏览器无关。 无需编译，容易编写，并且与浏览器无关。 （4）可以通过察见的方式，使用由第三方提供的其他脚本语言。 可以通过察见的方式，使用由第三方提供的其他脚本语言。 （5）具有无限可扩充性。 具有无限可扩充性。 （6）ASP的源程序不会被传到客户浏览器，提高了安全性。 ASP的源程序不会被传到客户浏览器 提高了安全性。 的源程序不会被传到客户浏览器，
● Freehand
Freehand提供了一系列完整的绘图工具， Freehand提供了一系列完整的绘图工具，可制作出细致的美术图 提供了一系列完整的绘图工具 工业绘图。 形、工业绘图。
1.3.3 网页动画制作工具
●
Flash Flash是一种矢量图形编辑和交互动画创作的专业软件， Flash是一种矢量图形编辑和交互动画创作的专业软件，主要应用 是一种矢量图形编辑和交互动画创作的专业软件 于网页设计和多媒体动画创作等领域，功能十分强大。Flash制作 于网页设计和多媒体动画创作等领域，功能十分强大。Flash制作 的动画不仅容量小、动画效果好，还有很强的交互性、兼容性，而 的动画不仅容量小、动画效果好，还有很强的交互性、兼容性， 且可以通过HTML语言嵌入网页中 增强网页的动感效果。 语言嵌入网页中， 且可以通过HTML语言嵌入网页中，增强网页的动感效果。

No1 网页设计基础知识

No1 网页设计基础知识
主讲教师：艾迪 aidipub@
基本术语扫盲 网站的规划 DW CS4工作环境
HTML语言概览
HTML HTTP
CSS WebSite
JavaScript WebPage
URL WWW
FTP
DNS
DOM
HyperText
Markup Language 超文本标记语言
专门用于在Web上传递信息
或
index.html
◦ <HTML> <HEAD>
<title></title> <meta>
</HEAD> <BODY>
HTML 文件的正文
</BODY> ◦ </HTML>
<html>...</html> <head>...</head> <body>...</body> 是HTML语言的基本部分 元素总是成对出现，每一对元素一般都有一 个开始的标记（如<body>），也有一个结 束的标记（如</body>）。 元素的标记要用一对尖括号括起来，并且结 束的标记总是在开始的标记前加一个斜杠。
插入面板提供“常用”等8组面板视图，可以快 速插入各种对象。
（注意） 有些命令按钮旁 边有黑色小箭头，如 图像按钮 ，则该类 别下还包含子菜单项， 直接单击这类按钮会 执行该按钮的默认操 作，默认操作即最近 一次使用该按钮时的 选项。
属性面板用于显示或者修改所选对象的各种属性， 当选择不同的对象时属性面板也会随之改变。
HTML 文档描述网页 HTML 文档包含 HTML 标签和纯文本 HTML 文档也被称为网页 Web 浏览器的作用是读取 HTML 文档，并 以网页的形式显示出它们。浏览器不会显 示 HTML 标签，而是使用标签来解释页面 的内容。

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.规则网站目和目录结构◆对收集的资料进行分类，并为其建立专门的栏目，各栏目的主题围绕网站主题展开，栏目名称具有概括性，各栏目的名称字数最好相同。

规划网站栏目的过程实际上是对网站内容细化，一个栏目有可能就是一个专栏网页。

DW_教案讲解[五篇范例]

DW_教案讲解[五篇范例]

DW_教案讲解[五篇范例]第一篇：DW_教案讲解一网页制作与网址建设基础知识（1学时）一.教学目标初步了解WEB工作原理、初步了解URL构成、了解网页版面布局连接了Internet计算机、DreamWeaver 8和IE 6软件二．教学环境、设备三.教学步骤（一）背景知识简述WEB网站也是常用的一种软件开发模式（B/S）网站的访问是通过网址（URL地址）进行网页版面布局是网页制作中最为重要的环节之一（二）实验步骤1.Web和浏览器2.网页制作的相关知识3.网页制作的基本方法4.熟悉Macromedia Studio 8安装及操作界面四．实验习题1.确认计算机连接了Internet2.双击IE浏览器3.在地址栏中输入网址二认识DreamWeaver 8基本操作（1学时）一.教学目的了解DreamWeaver软件，能够使用DreamWeaver制作简单的网页站点的作用，创建WEB站点、创建一个静态网页并能够保存在磁盘上形成文件二．教学难点三．教学环境、设备计算机、DreamWeaver 8和IE 6软件四.教学步骤（一）背景知识简述DreamWeaver软件是当前最为流行的网页制作软件之一，熟悉和熟练掌握该软件对学生在进行后面的学习中将起到关键的作用（二）教学步骤1.了解Dreamweaver及其基本特点2.了解Dreamweaver 8的新功能3.Dreamweaver 8概述4.Dreamweaver 8的新功能5.Dreamweaver 8的编辑环境6.建立站点7.创建简单的页面8.预览页面四．实验习题1、确认计算机连接了Internet2、双击IE浏览器3、在地址栏中输入网址五．实验拓展习题使用DreamWeaver 8创建一个站点，并创建一个名为Index.html的网页三插入文本和图像（1学时）一.教学目的了解网页中插入文本和图像的基本操作、并能对插入的文本和图像进行属性设置二．教学难点文字图像的排版三．教学环境、设备计算机、DreamWeaver 8和IE 6软件四.教学步骤（一）背景知识简述文本和图像是一个网页的基本元素，向网页中插入文本和图像以及对问本和图像进行属性设置也是网页制作人员必备的技能（二）实验步骤1.掌握插入与修改文本的方法2.了解CSS样式3.插入文本4.设置文本属性5.创建列表项6.拼写检查7.图像编排 9.文本和图像应用五、实验习题1、新建一个静态页面2、在网页中输入文本3、利用属性面板对文本进行格式化操作4、向网页中插入图像5、利用属性面板对图像进行格式化操作六．实验拓展习题（学生选做）使用DreamWeaver 8创建一个图文并茂的网页四超级链接（1学时）一.教学目的了解超链接的基本特点、掌握超链接的创建与管理方法二．教学难点创建图像及热点超链接、创建邮件、关闭窗口和后退的超链接三．教学环境、设备计算机、DreamWeaver 8和IE 6软件四.教学步骤（一）背景知识简述超链接是网页间的桥梁、是一个网站必备的元素；一个有效网站就是有一个主页和多个网页构成的，网页间的相互访问就是通过超链接来实现的（二）教学步骤1.创建超链接概述2.在页面中创建文本超链接3.在页面中创建图像超链接4.在页面中创建图像热点超链接5.在页面中创建邮件超链接6.在页面中创建后退、前进和关闭超链接7.超链接管理五.实验习题1、创建两个网页，并命名为test1.htm和test2.htm2、在test1.htm中输入文本3、选中输入的文本，在属性面板中使用超链接属性来选中test2.htm 六．实验拓展习题（学生选做）制作网页间的超链接制作图像及热点超链接制作邮件、关闭窗口和后退的超链接五表格（2学时）一.教学目的了解Dreamweaver 8中表格的基本特点、掌握表格的基本操作、掌握使用表格创建网页的方法二．教学难点插入并美化表格进行页面布局。

Dreamweaver网页设计从零开始

Dreamweaver网页设计从零开始Chapter 1：认识DreamweaverDreamweaver是一款由Adobe公司开发的专业网页设计软件。

它集成了丰富的功能和工具，为用户提供了一种简便而高效的方式来创建和编辑网页。

Dreamweaver支持多种开发语言，包括HTML、CSS、JavaScript和PHP等，使得用户可以灵活地设计和开发网页。

Chapter 2：Dreamweaver的基本设置在开始使用Dreamweaver之前，我们需要进行一些基本的设置。

首先，我们可以选择合适的界面布局，例如工作区布局、代码布局或设计布局，以便于我们更好地编写和编辑代码。

其次，我们可以根据自己的需求设置代码提示和自动补全功能，提高工作效率。

Chapter 3：创建网页模板在设计网页时，使用模板可以让我们更加方便地保持风格的一致性。

Dreamweaver提供了创建网页模板的功能。

我们可以先设计一个主模板，包含网页的共同元素，例如页眉、页脚和导航栏等。

然后，我们可以基于这个主模板创建其他页面，只需要修改页面中的内容，而不必每次都从头开始设计。

Chapter 4：网页布局设计网页的布局设计是网页设计中的重要一环。

Dreamweaver提供了多种布局工具和功能，例如网格系统和响应式布局。

网格系统可以帮助我们将网页划分为几个等分，有助于页面元素的排列和对齐。

而响应式布局可以根据不同的设备屏幕大小自动调整网页的布局，保证用户在不同设备上都能有良好的浏览体验。

Chapter 5：网页元素的设计与编辑在Dreamweaver中，我们可以方便地设计和编辑网页的元素。

例如，我们可以使用图像编辑工具对图片进行裁剪、调整大小和优化处理，以便网页加载更快。

我们还可以使用CSS样式对文字、链接和按钮等元素进行美化。

此外，Dreamweaver还提供了预设的网页元素模板，可以快速插入常用元素，如表格、表单和轮播图等。

Chapter 6：添加动态效果动态效果能够增加网页的互动性和视觉效果。

网页设计与制作——Dreamweaver CS5标准教程第1章 网页设计基础

色彩，网页设计元素和页面布局是网页创意设计的 三个重要组成部分。
1.2.1色彩
1.2网页设计知识
1.认识色彩 任何色彩都具有色相、明度和纯度三种属性。 色相是色彩的名称，是一个色彩区别与另一个色彩
的主要因素。 明度也称为亮度，表示了色彩的明暗程度，明度越
大，色彩越亮。 纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识 网站logo，将网站logo置于页面比较醒目的位置，如左
上角。 2. 网站banner 网站banner一般位于页面的顶部，即可以表达和突出网
站创意和形象，也可以传达某种特定信息。 网络banner通常是由GIF动画、JPEG图像或Flash动画完
Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup
Language，可扩展的超文本标记语言）是 HTML的升级版本。
1.3网页标准化技术
1.3.2 CSS样式
CSS（Cascading Style Sheets，层叠样式表）是由W3C 指定和发布的，用于描述网页元素格式的一组规则， 其作用是设置HTML和XHTML语言编写的结构化文档外 观。
1.3网页标准化技术
网页由三部分组成：结构（Structure）、表 现（Presentation）和行为（Behavior），相 应的技术标准由3个部分组成：结构化标准语 言，CSS样式表和脚本语言。
1.3网页标准化技术
1.3.1 结构化语言 结构化语言HTML（Hyper Text Markup
名，表达为如下形式： 协议名://服务器的IP地址或域名/路径/文件名 /s2012/shicha URL地址，或Web地址，或网址，它可以是本地磁盘

Dreamweaver网页设计第一章


1.4 层的使用
1.4.1 层的基本概念 图层是一个独立于网页的区块，它允许被放置在网页中的任何位 置。图层中可以放置文本、图像、表单、对象插件，甚至可以放 入其他层。 层的主要特性是可以在网页中上下浮动，即可以在网页中改变层 的位置。另外，层还可以重叠，做出网页中的文档或图片重叠的 效果；可以被显示或隐藏，做出层内容交替显示的效果。
1.4 层的使用
1.4.2 绘制层并设置层属性
绘制层：【插入】 →【布局对象】 →【AP Div】，然后在需要的地方 用鼠标绘制出层。 层属性设置同样可以通过属性面板进行修改，其中“可见性”可以设 置层是否隐藏，合理命名层ID可以有效管理并提高效率。
1.4 层的使用
1.4.3 层的嵌套 层的嵌套就是指在一个层中嵌入其他的层，新嵌入的层称为 子层，原来的层称为父层。子层与父层有如下特点：
课程设置
模块一：静态网页（HTML）的设计与制作
模块二：动态网页（ASP）与数据库（access2003） 模块三：综合应用实例
第一章
走进Dreamweaver
1.1 Dreamweaver的基本操作 1.2 表格布局 1.3 图片应用与超链接 1.4 层的使用
1.5 框架技术
1.1 Dreamweaver的基本操作
• • • • 子层与父层可以重叠，也可以不重叠。 子层大小可超过父层。 子层的可见性与父层保持一致。 子层与父层的相对位置保持一致。
创建嵌套层的方法如下： 先创建父层，将光标放在父层中，然后，在Dreamweaver CS4主窗口中，单击 菜单【插入】→【布局对象】→【AP Div】，即可创建嵌套层，新插入的层为 子层。 利用“层”面板创建嵌套层，在“层”面板中选中作为子层的层，按住【 Shift】键，将选中的层拖动到要作为父层的层上，释放鼠标即可创建嵌套层 ，这时子层与父层以连接线相连，表明其从属关系。单击父层左边的号可以展 开其所有子层，单击号可以折叠其子层。

网页设计基础知识1

1.ftp:///软件/设计工具/ 也可以下载8/CS3/CS4的绿色版本
2.使用老师提供的Adobe_CS3_LJF_3in1.iso 虚拟光驱加载ISO文件进行安装，序列号任意填写
3.确保“FLEXnet Licensing Service”服务开启 （即确保“FNPLicensingService”这一服eaver CS3
➢ Dreamweaver操作界面 1.菜单栏 2.文档窗口 3.属性面板:PS、office属性在上方，DW在下方 4.插入栏：对象面板，快速插入各种网页元素 可以设定该工具条界面为制表符模式或者菜单模式 5.文档工具栏 6.面板组：浮动面板，实现特定的功能 设计面板、代码面板、应用程序面板、文件面板等
（插件）支持。
－－动态效果
常见的客户端动态技术：Javascript、JavaApplet、 DHTML、ActiveX、Flash、VRML
多媒体网页，但并不是真正的动态网页
a
6
1.网页设计概述
➢ 服务器端动态技术需要服务器和客户端的共同参 与，客户通过浏览器发出页面请求后，服务器根 据请求的参数运行服务器端程序产生结果页面再 返回给客户端。一般涉及到数据库。 典型的服务器端动态技术：ASP、、PHP、 JSP、CGI
DW和Frontpage为“所见即所得”工具，不懂HTML语言也 可以制作专业的网页,图形化界面操作，自动生成相应代码。
a
12
2.网页制作相关工具
➢ 本课程主要讲解使用Adobe Dreamweaver CS3 制作静态网站。
➢ DW最新版本为Dreamweaver CS4，其基本功能 跟Dreamweaver 8/CS3类似，CS3/CS4跟8的最 大区别主要为：界面“色调”不一样、多了Ajax 框架、CS3/4和Photoshop的整合、CSS样式表 的增强。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

1.2网页设计知识
2. RGB色彩模式和网页安全色 每种色彩都可以用红(R)、绿(G)、蓝(B)3种色彩按一 定的比例调和而成，这3种色彩被称为光的3原色 将在不同操作系统和浏览器中具有一致显示效果的 颜色定义为网络安全色，网络安全色有216种。在网 页设计软件中，任何颜色都有一个六位的十六进制 编号，如#D6D6D6，任何由00、33、66、99、CC或 者FF组合而成的颜色值，都表示一个Web安全色
1.3网页标准化技术
1.3.4 ASP技术
在开发制作动态网站时，除了以上标准化网页技术 外，还需要ASP技术和数据库技术作为支撑条件和环 境。 ASP（Active Server Pages，动态服务网页）是微软 公司发布的动态网页开发技术组件，用来创建和运 行动态网页或web应用程序。Asp文件由文本、 HTML标签，ASP脚本代码以及COM组件等部分组成。
1.4 网站设计软件
1.4.1 Dreamweaver 1.4.2 Flash 1.4.3 Photoshop
Photoshop借助于在平面设计领域的出色功能，将Web 设计功能融入到软件系统中，提供了图像切片和优化 Web图形的功能，可以导出HTML页面文档用于网页设 计。 Dreamweaver，Photoshop和Flash是由Adobe公司开发 的3款软件，具有良好的集成性。Photoshop和Flash的 输出结果可以直接导入Dreamweaver网页中。
1.3网页标准化技术
1.3.2 CSS样式
CSS（Cascading Style Sheets，层叠样式表）是由W3C 指定和发布的，用于描述网页元素格式的一组规则， 其作用是设置HTML和XHTML语言编写的结构化文档外 观。
1.3.3脚本语言
脚本语言是一种面向对象的程序设计语言，是专为 HTML设计者提供的一种编程语言。 在dreamweaver中，行为就是由内嵌的JavaScript脚本 语言实现的。
1.2网页设计知识
5. 动画 网页设计中常用的动画有Gif动画和Flash动画。 6. 背景 使用合理能够增强页面的整体创意效果。
1.2.3页面布局
1. 结构布局 常用的结构布局方式包括“国”字型、拐角型、上下框 架和左右框架等类型。 2. 艺术布局 常用的平面艺术设计原则有分割、对称和平衡等。
第1章 网页设计基础
网页设计与制作 Dreamweaver CS5 标准教程 邢帅教育
本章学习主要内容：

1. 互联网基础 2. 网页设计知识 3. 网页标准化技术 4. 网站设计软件 5. 网站制作流程 6. HTML语言 学习QQ群：69364320
1.1互联网基础
1.1.1 Internet与Web服务 互联网就是借助通信线路将计算机和各种相 关设备相连接，并按照统一的标准在各种设 备之间进行数据传输和交换，实现互联互通， 以达到计算机之间资源共享和信息交换的目 的。
1.2网页设计知识
3. 导航条 导航条是网站设计中最重要的元素之一，即表现了网站 的站点结构和内容分类，又方便了用户对网站的浏览。 4. 图像 Gif用于画面简单、细节信息少的图像，如背景图片， 可以减少图像文件的大小；Jpeg用于画面较为复杂、 细部信息多的图像；PNG用于有透明背景的图像。 一种是独立完整的图像，二是在Firework或Photoshop 中使用切片功能获得的图像。
1.6 HTML语言
1.6.1文件结构标签 1.6.2表格标签 1.6.3文本段落标签 1.6.4图像标签 1.6.5链接标签 1.6.6框架标签 1.6.7表单 1.6.8块标签
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识 网站logo，将网站logo置于页面比较醒目的位置，如左 上角。 2. 网站banner 网站banner一般位于页面的顶部，即可以表达和突出网 站创意和形象，也可以传达某种特定信息。 网络banner通常是由GIF动画、JPEG图像或Flash动画完 成的。
1.3网页标准化技术
网页由三部分组成：结构（Structure）、表 现（Presentation）和行为（Behavior），相 应的技术标准由3个部分组成：结构化标准语 言，CSS样式表和脚本语言。
1.3网页标准化技术
1.3.1 结构化语言 结构化语言HTML（Hyper Text Markup Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup Language，可扩展的超文本标记语言）是 HTML的升级版本。
1.1互联网基础
1.1.2 URL路径
Uniform Resource Locator，统一资源定位器 URL由三部分组成：协议类型，主机名和路径及文件 名，表达为如下形式： 协议名://服务器的IP地址或域名/路径/文件名 /s2012/shicha URL地址，或Web地址，或网址，它可以是本地磁盘 路径，或局域网上的某一台计算机，也可以是 Internet上站点。 学习QQ群：69364320
1.2网页设计知识
页面设计要具有一定的独创性，符合用户的审美情 趣，同时还要兼顾表达主题，满足表达内容和使用 便捷的要求。 色彩，网页设计元素和页面布局是网页创意设计的 三个重要组成部分。 1.2.1色彩 学习QQ群：69364320
1.2网页设计知识
1.认识色彩 任何色彩都具有色相、明度和纯度三种属性。 色相是色彩的名称，是一个色彩区别与另一个色彩 的主要因素。 明度也称为亮度，表示了色彩的明暗程度，明度越 大，色彩越亮。 纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高 的颜色越鲜艳，纯度越低的颜色越灰暗。
1.1互联网基础
1.1.3服务器与客户机 服务器是提供共享资源和服务的计算机，其 作用是管理大量的信息资源。 客户机是用户用来获取资源和服务的计算机。 浏览器软件是客户机上必备软件。
学习QQ群：69364320
1.1互联网基础
1.1.4互联网数据中心
互联网数据中心（Internet Data Center，IDC）为企业、 媒体和各类网站提供专业化的网络服务器管理，网络 带宽等一系列服务，是网络基础资源的重要组成部分。 IDC向用户提供服务包括整机租用、服务器托管、机 房租用、专线接入和网络管理服务等。 数据中心体系包括四个主要部分：服务器系统，电力 保障系统，数据传输保障系统以及环境控制系统。 学习QQ群：69364320
1.5 网站制作流程
3. 网站定位 在市场调查和分析以及资料收集的基础之上，初步确定 网站的定位，包括大致内容和结构，页面创施
根据前期准备工作，具体规划网站的栏目和布局，页面 设计风格和外观效果；确定网站所使用的各种技术，完 成网站制作的全部工作。
1.5 网站制作流程
3．网站推广 注册搜索引擎是最直接和有效的方法。 通过在同行或相关行业网站中，建立网站的相互链 接；或通过论坛、博客、QQ和电子邮件等方式，发 布网站信息，是低成本的推广方式。 4．网站维护
1.6 HTML语言
在Dreamweaver可视化环境中，制作网页的各种 操作都会自动生成HTML语言代码，网页是由 HTML语言编写的文本文件。 HTML是一个结构化描述语言，格式非常简单， 由文字及标签组合而成，其书写规则如下： 任何标签皆由“<”、“>”和文字组成，如<p>为段 落标签；某些起始标签可以加参数，如<font size="12"> Hello </font>表示字体大小为12；大部 分标签既有起始标签，又有终结标签，终结标签 是在起始标签之前加上符号“/”构成的，如 </font>；标签字母大小写均可。
1.5 网站制作流程
1.5.1前期准备工作
在网站建设之前，需要对与本项目相关的互联网市场进 行调查和分析，同时收集各种相关的信息和资料，为网 站建设提供必要的前期数据，为决策提供依据。 1. 市场调查与分析 市场调研包括用户需求分析、企业自身情况和竞争对手 情况的调查与分析。 2. 收集资料 收集和整理资料为网站建设提供基础素材。
1.5 网站制作流程
1．规划网站 规划网站实际上是网站定位的一个延续。 2．页面设计 采用图形图像类软件进行创意和设计，也可以采用动画 软件设计动感十足、富于变化的页面效果。 3．静态网页制作 4．动态网页制作 采用动态网页技术。ASP技术，数据库技术以及前后台 页面设计在动态网站建设中尤为重要。
1.5 网站制作流程
5．整合网站 在整合过程中，需要对各个部分以及整合后的系统进行 检查，发现问题，及时调整。
1.5.3后期工作
1．网站测试 网站测试包括网站运行的每个页面和程序。兼容性测试， 超链接测试是必选的测试内容。 2．网站发布 网站发布包括申请域名，申请服务器空间和上传网站内 容。
学习QQ群：69364320
1.1互联网基础
互联网提供的主要服务包括万维网（World Wide Web，WWW，3W，Web），电子邮件（E-mail）， 文件传输（FTP）和远程登录（Telnet）等。 Web网采用超文本标记语言（Hyper Text Mark-up Language，HTML），可以存取包括文本、图像、动 画、音频和视频等多媒体信息，还可以基于超链接 通过众多的网页和网站构成了一个全球范围内的庞 大信息网络。 学习QQ群：69364320