第一部分、网页设计基础知识
一、“网络在WWW服务出现之后才变为彩的！”
在www服务出现之前，人们只能在网络上进行简单的交流，网站也远远不是我们现在看到的五彩缤纷的网站，在www和真正意义上的网页出现之后我们的网络才变的如此丰富多彩。有了www服务我们就可以在网络上传输声音、图象甚至多媒体。现在网页设计已经遍布各个领域，无论是企事业单位还是个人都希望通过网络了解世界，也希望通过网络让世界了解自己。所以网站设计是各行各业都用得到的一门技术。
人们通过编写代码以及应用一些网页编辑工具编辑网页，通过超链接等方式结合在一起，从而形成一个在网上信息发布与收集的整体，然后使用网站发布工具将这些网页发布到网上，就成为我们看到的网站了，网页设计就是设计这些网页并将它们链接起来并发布到网上的过程。
网站的类型
商业型网站----网络是一个绝好的广告牌、而网络更是一个无穷大的市场
介绍型网站----展现公司、企事业单位的风采
功能型网站----网络不仅是一个绝好的市场，更是一个无穷大的办公场所
个人网站----个性的体现、个人魅力的无限发挥
综合型网站----网络发展的趋势
二、html语言
1、一个简单实例
<html>
<head>
<title>
my first page
</title>
</head>
<body>
my first page
</body>
</html>
２、（ huper text mucket language ）超文本标记语言的特点是所有的语句都包含在标记中，如<html>和</html>，这些标记通常都是成对出现。
三、各种网页编辑工具简介
Dreamweaver与Flash、Fireworks组合
Frontpage 2000
react耐克泡棉
Hotdog
Pagemaker等等
数组怎样定义公式名称四、安装Dreamweaver8js留言板代码
到学院ftp站点中下载Dreamweaver8根据提示安装，安装完成后第一次使用时填入序列号
浏览器左下角显示javascript以保证正常使用。
五、网页制作工作流程
1、 网站的主题定位
  （1）、网站的题材
  （2）、网站题材的建议
1. 主题最好是你最擅长的并且感兴趣的东西。
2. 主题要小而精。
3. 题材不要太滥或者目标太高
4. 体现自己的个性。
html个人网页制作代码范列
（3）、网站的名称
2、资料搜集
3、结构设计
  （1）、栏目和版块
美甲渐变
  （2）、目录的结构设计
  注意以下几点：
1. 栏目的内容建立子目录
2. 在每个主目录下建立独立的images
3. 目录层次不要太深
4. 避免使用中文目录
5. 尽量使用意义明确的目录
4、形象设计
１设计网站的标志
２设计网站的标准彩
３设计网站的标准字体
４设计网站的宣传标语
5、主页设计
6、其它页面的设计
7、站点规划
用文件夹来保存文件、使用合理的文件名称、模板和库
8、定义站点
定义站点的步骤：
1. 打开dreamweaver 4，单击Site（站点）>New site（新建站点）的菜单项，新建一个站点。
2. 在出现的Local Info（本地站点）设置对话框中进行设置。
9、首页制作
1页面属性
2表格设计
3 填写内容
4添加链接和交互
5添加其它内容
10、测试
1兼容性的测试
2链接的测试
11、上传
１Dreamweaver的FTP上传
２Cute FTP上传
（1）.运行Cute FTP，设置本地站点文件夹
（2）.选择文件>站点管理，在出现的FTP设置对话框中进行设置
（3）.然后选择连接就可以上传你的网页了
（4）将左边本地站点的内容拖进右边远程站点的文件夹内。
（5）在浏览器的地址栏中键入域名，检验一下，网页上传成功了吗？
第二部分、使用dreamweaver8进行网页设计
一、建立站点
事实上，站点就是一种文档的磁盘组织形式。在Dreamweaver中有两个关于站点的概念，一个是本地站点，这是Dreamweaver虚拟出来的建在本地硬盘上的站点，另外一个是远程
站点，这个才是我们通常看到的网站，它保存在Internet服务器上。
规划站点结构时我们需要注意下边两个规则，第一，用文件夹来保存文档，第二，使用合理的文件名称。
我们是通过站点文件管理器来编辑和规划站点的。
第一步：建立站点，写明本地站点信息（站点名称、本地根文件夹等）。
第二步：填写远程站点信息，有四个选择来指明访问远程站点的方式。我们可以选择一个使用。
第三步：填写其它的站点信息，包括站点地图规划、设计笔记和站点窗口显示栏目设置等。
第四步：站点的维护。
二、合理的使用排版视图和表格
（一）排版视图
页面的设计是网站建设的重要部分。
Dreamweaver提供了三种方法来创建和设计页面。通常我们使用表格来创建一个页面。另外一种方法是使用层（在后面会有详述）。Dreamweaver为我们提供了一种方便快捷的方法，就是使用排版视图。
在排版视图中，Dreamweaver为我们提供了两种工具，自由表格和自由单元格。这两种工具使我们可以很轻松的在页面上拖拽单元格，按照我们想要的效果移动单元格的位置。并且，对于自由表格的每一列我们都可以设置成固定宽度，或者设置成它随浏览器窗口大小变化而变化。
自由表格和自由单元格实际上也是表格和单元格，它们是Macromedia公司提出的创新，对表格使用的一种新思路。特点是能使初学者轻松完成网页设计任务，缺点是使用它们产生的表格过于繁琐，不适合于大型的网站使用。
使用排版视图来规划页面要注意以下几点。
第一，尽量在只规划页面时才进入排版视图，因为很多一般视图下的功能不能在排版视图下实现，同样，排版视图下的功能有一些在一般视图下也不能实现。
第二，自由单元格都必须包含在自由表格中，没有孤立的自由单元格，虽然我们可以直接使用自由单元格，但实际上系统在使用自由单元格的同时先使用了自由表格。
第三，单元格之间不可以重叠，但可以嵌套。
第四，通过属性检查器可以对自由单元格和自由表格的样式进行设定。
（二）表格
表格可以控制文本和图形在页面上出现的位置，在Dreamweaver中创建表格后，可以为其添加内容、修改单元格和行属性以及复制和粘贴多个单元格等。还可以在表格和层之间进行转换。
1、 Dreamweaver为我们提供了十几种表格设计风格，使用这些预制的设计风格格式化表格，可以大大提高表格的设计效率。我们也可以自己设计自己的表格风格。使用命令>格式化表格。
2、 Dreamweaver还允许我们按列的内容进行排序。使用命令>排序。
3、 我们也可以把表格转化为层。使用编辑>转换>表转换成层。
4、 使用属性选择器来对表格属性进行设置。
三、文本、图像的使用及css层叠样式表
文本是网页最基本、最常用的元素，因此文本的设置和操作也非常重要。
（一） 使用属性选择器来设置文本的格式。
（二）
设置字号、颜、样式、对齐方式等等。
字体的预定义，属性中的编辑文本格式.
（三） 设置文本的超级链接。
超级链接的概念
超级链接是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。
绝对超级链接：绝对超级链接就是形如“www.china/zh_cn”的超级链接地址，它给出了超级链接目标端点完整的URL地址，包括使用的协议“”。一般用于创建站外具有固定地址的超级链接
文档相对路径
使用文档相对路径不需要给出完整的URL地址，可省去URL地址的协议，只需保留不同的
部分。如pic/logo.gif，这是本地站点超级链接中最常用的链接形式。由于相对超级链接的文件之间相互关系并没有发生变化，因此使用文档相对路径创建的超级链接在上传时可以不用更新各个超级链接。
站点根目录相对路径
站点根目录相对路径是形如“/help/help.html”的超级链接地址，它基于站点根目录，在同一个站点中网页的超级链接也可采用这种方法。
　Targat的四个选项
_blank：将链接的文件载入新的无标题浏览器窗口中。
_parent：将链接的文件载入到上级框架集或包含该链接的框架窗口中。如果框架包含的链接不是嵌入的，则链接的文件将载入到整个浏览器窗口中。
_self：将链接的文件载入到相同框架或窗口中。其目标的默认的，因此不需要指定。
_top：将链接的文件载入到整个浏览器窗口中，因此将删除所有框架。
创建命名锚记
在制作网页时，为了达到跳转到网页固定位置的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超级链接打开目标网页时可直接跳转到相应的命名位置上。
创建超级链接
在网络应用中十分广泛，在网页中建立超级链接可方便网页浏览者与设计者之间的联系。
（四） Css层叠样式表
1、样式
样式是一组可以控制文本块或文本区域外观的格式属性。使用样式可设置一篇文档的格式。
2、Html样式
HTML样式是Dreamweaver自身携带的一个非常方便的工具，帮助用户进行文本格式的设置。HTML样式实际上是一系列HTML格式化标记的组合，用于一次对文本对象进行多个方面的格式设置。HTML样式分为添加型和覆盖型两种。添加型的样式项前边有一个+号。
与CSS不同，应用HTML样式是不能自动化的，就是说，如果对某些文字已经应用了一个定义的HTML样式，当改变该HTML样式所代表的格式时，原先已经设置格式的文字格式并
不会变化。
单击Window>HTML Style菜单项，打开HTML样式面板进行设置。
３、CSS层叠样式表
CSS是一种样式表技术，它是用来进行网页风格设计的。它可以全面的支持我们常用的大多数浏览器。它的最大的优点就是它的自动更新功能。
作用：（１）可以将格式和结构分离。（２）能以前所未有的能力控制页面的布局。（３）可以制作出体积更小下载更快的网页。（４）可以更快更容易地维护及更新大量的网页。（５）浏览器成为更友好的界面。
分为两种，嵌入式：就是在独立的文档中应用CSS样式表。外部链接式：应用于多个文档，生成专门的*.css文件。
单击Window>CSS Styles，打开CSS样式面板进行设置。它分为8个面板，分别对8个不同方面进行设置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。