网页制作步骤
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
静 态 网页 的 制作 步骤
网页制作步骤及教程
1.5 详细步骤 ◆在电脑中安装Macromedia Dreamweaver 8或 FrontPage 2003软件 ◆安装完成后双击打开Macromedia Dreamweaver 8 （在这以Macromedia Dreamweaver 8 为例）如图 双击图标
静 态 网页 的 制作 步骤
网页的基本操作
1.1新建与保存
1.1 .1 新建网页 创建简单网页的步骤如下：
1) 在“视图”中选择“网页”模式，在此模式下执行下面的任一步骤： 在“新建网页或站点”任务窗格中，单击“新建”区中的“空白网页”； 或在“文件”菜单中选择“新建”，从其子菜单中选择“网页或站点”，在 程序窗口右侧就会弹出“新建网页或站点”的子窗口，选择“新建”栏中的 “空白网页”选项。也可单击常用工具栏中的键，按缺省模板生成空白网页。
1.4 设置网页属性 设置网页属性，方法如下： 1) 选择要设置网页属性的网页（从“窗口”菜单中选择网页，或者在 “导航”视图中双击需要的网页），出现网页编辑工作区。 2) 在“文件”菜单中指向“属性”（或者右键单击网页编辑区，从快捷 菜单中选“网页属性”），打开“页面属性”对话框的“常规”选项卡， 如图9-14所示。
静 态 网页 的 制作 步骤
设置页面属性
3) 在“标题”栏中填入标题，如“ASP基础”。在IE浏览器的标题中可 以看到效果。在设计阶段控件脚本项的“平台”栏中选择“服务器 （ASP）”、在“服务器”栏选择“VBScript”脚本语言、在“客户端”选 择“JavaScritp”脚本语言。 4) 单击“背景”选项卡，选择“背景”、“文本”、“超链接”等属性， 如图9-15所示。 5) 单击“边距”选项卡，选中“指定上边距”和“指定左边距”，值为0， 如图9-16所示。
静 态 网页 的 制作 步骤
网页的基本操作
设置网页的编码（“查看”——―文件头内容”） 设置编码的好处在于，浏览器打开网页时会根据该对象中的设 置自动找到合适的字符集，从而解决不同语种间的网页不能正 确显示的问题. 设置文档标题 网页标题是指打开网页时在浏览器标题栏位置上显示的文字。
文件头标签也就是Meta（网页的编码）标签，它在网页中是看不到的， 包含在网页中<head>…</head>标签之间。
文件头主要包括： Meta（网页的编码） 、关键字、描述文字、刷新 等内容
静 态 网页 的 制作 步骤
网页的基本操作
定义关键字、说明文字 关键字用来协助网络上的搜索引擎寻找网页。 若有多个关键字，可 以用逗号将关键字分开。说明性文字提供了更详细的网页说明信息， 可供搜索引擎寻找网页 操作： 插入栏（HTML)----―文件头”---关键字/说明 创建自动刷新网页 操作：插入栏（HTML)----―文件头”---刷新 设置网页过渡效果 – “网页过渡效果”是指浏览器在更新网页时两个网页之间 替换过渡的方式。 – 网页过渡效果分为：混合、盒状收缩、… – 设置操作步骤：格式/网页过渡/网页过渡对话框/事件/进入 网页/过渡效果/…/周期（过渡效果的持续周期）
静 态 网页 的 制作 步骤
文本的处理
1.3 文本的输入
• 1.要向 Dreamweaver 文档添加文本，可以直接在 Dreamweaver“文档”窗口中键入文本，也可以剪切并粘 贴，还 可以从word文档导入文本 • 2.文本换行，按Enter键换行的行距较大，按Enter＋Shift键换行的 行间距较小。 • 3.文本空格，我们选择编辑/首选参数，在弹出得对话框中左侧的分 类列表中选择“常规”项，然后在右边选“允许多个连续的空格” 项，我们就可以直接按“空格”键给文本添加空格了。
静 态 网页 的 制作 步骤
文本的处理
• 设置文本格式
• 1.网页的文本分为无（无特殊格式的规定，仅是文本本身）、段落和标 题1-6、预先格式化的（使用预定义的格式）等格式。 • 注：格式设置对插入点所在的整个段落起作用。 • 2.Dreamweaver使用字体组合来取代给文本指定一种字体的做法（为网 页中的文本指定了一个字体组合，在浏览器中浏览网页时，会按照字体 组合中给定的顺序查找用户计算机上安装的字体。） • 3.设置文字大小：一般选择用数值定义文字大小，数值单位选择“点数 （pt）”，因为利用点数定义的文本大小不会随分辨率的改变而发生变 化。 • 4.文本样式的设置：“文本\样式”命令
• 另外，在属性面板中还可定义文字的字号、颜色、加粗、加斜、对齐、 缩进/凸出等内容
静 态 网页 的 制作 步骤
插入的使用
1.3.1 插入水平线
• 水平线：能够将页面分割成特定的区域，对组织和安排页面版式很 有用。向一个网页文档中插入水平线，就是在它的HTML代码中添 加了一个<hr>标记。 • 操作步骤： • 选定插入点—选择“插入”/HTML/―水平线”命令
静 态 网页 的 制作 步骤
设置页面属性
• 操作：修改—页面属性
• “外观” 是设置页面的 一些基本属性。
• “链接” 选项内是一些 与页面的链接效果有关的 设置。“ • “标题” 用来设置标题 字体的一些属性。这里的 标题指的并不是页面的标 题内容，而是可以应用在 具体文章中各级不同标题 上的一种标题字体样式。
图像的编辑 在Fireworks中优化图像、剪裁图像、调整图像亮度/对比度、锐化图像 插入其它图像元素 “图像占位符”--如果要在网页中插入一张图片，可以先不制作图片， 而是使用占位符来代替图片位置。 “鼠标经过图像--实际上由两个图像组成，主图像（当首次载入页时 显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。这两 张图片要大小相等，如果不相等，DW自动调整次图片的大小跟主图像大 小一致。
1.3.2 插入日期
浏览者经常会在网页上看到最近一次修改网页的 时间，这说明网页是在不断更新的，从而吸引访 问者下次再来光顾。
步骤：选定插入日期的位置—插入菜单---日期
静 态 网页 的 制作 步骤
插入的使用
1.3.3使用图像
• 网页中图像的格式 • 网页中图像的格式通常有3种：GIF、JPEG和PNG。其中使用最为广 泛的是GIF和JPEG，因大多数浏览器都可以查看它们。 • 插入图像 • 操作：常用“插入栏——图像按钮”
网页制作步骤及教程
1.5.1 制作实例 1
◆以此为例，做个静态网页的视频，请大家观赏
请点击查看 静态网页示例
观 看 教 程 请 点 击 此 处
静 态 网页 的 制作 步骤
网页制作步骤及教程
此为静态网页制作实例2教程， 请直接点击下面观看！
1.5.1 制作实例 2 请 单 击 此 处 浏 览 网 页
静 态 网页 的 制作 步骤
网页制作步骤及教程
◆打开软件后，自动弹出一提示，请从创建新项目里面选择 HTML
选择HTML
◆新建HTML之后 会弹出以下对话框
静 态 网页 的 制作 步骤
网页制作步骤及教程
首部开始
HTML文档开始
首部结束 文档标题
主体开始 HTML文档结束
主体开始
静 态 网页 的 制作 步骤
THANKS
网页制作注意事项
The web page creates a regulation
静 态 网页 的 制作 步骤
网页制作注意事项
要沉稳，不要花里胡哨。自助网站制作的人往往喜欢猎奇，弄一些不 必要的乱七八糟的东西，比如弹出窗口啦、脚本代码啦、很大的图片啦， 等等。 要素净、大气，不要五彩缤纷。要注意在一个自助网站的页面里不要 用色太杂。要确定一个颜色主调，再搭配一两种反差不太大的颜色即可。 正文文字的大小要基本统一，文字的颜色也不要红红绿绿。不要认为如 何制作网页的关键是以大文字和鲜艳的色彩来强调很多意思，实际上使 人眼花缭乱，什么都强调不了，也很不大气。 要有个性、有风格，要突出行业的特点。比如娱乐业可以热烈 一些、活泼一些，政府网站则要庄重一些；收藏、书画业要古朴典 雅，策划、时装业则要前卫一些。 一个网页不要太长，一般两屏到三屏就可以了。在同一个网页 里，如果文字或图片太多，既不美观，也会影响你的网页打开的速 度。如果内容实在太多，应该分作几个页面，或者分为几个二级栏 目。
静 态 网页 的 制作 步骤
文本的处理
• 首行缩进
• • • • • 插入栏（文本）——“字符”——“不换行空格”（单击四次段前空 两个字空格） 使用列表（项目列表、编号列表） 1.创建项目列表、编号列表 2.修改项目列表、编号列表的外观：选定列表文本\右击选择编辑标签 3.要停止项目列表的输入，按两次回车键
静 态 网页 的 制作 步骤
设置页面属性
• “标题/编码”选项中设置网页标 题和文字编码
• “跟踪图像”中设置跟踪图像 的属性。跟踪图像一般在设计 网页时作为网页背景，用于引 导网页的设计。拖动“透明度” 滑块可以指定图像的透明度， 透明度越高图像显示的越清晰。
静 态 网页 的 制作 步骤
设置页面属性
修改图像属性
1.图像名称 由于程序代码中往往不支持中文，因此命名只允许使用英文字母、数字 以及“—‖ 2.图像大小、图像替代文本、边框、水平和垂直边距、对齐、链接
静 态 网页 的 制作 步骤
插入的使用
•
3.低解析度源：用来载入主图像之前载入的图像（文件一般体积小， 只包括黑白两色），让访问者对等待的内容先有所了解（增加网络负 担）
1.1.2 保存网页
用户可以保存当前正在编辑的网页， 也可以同时保存打开的所有网页，并可 以为网页定义不同的名字或路径。
保存网页可以分为保存新的网页、另 存已经保存的网页、同时保存多个网页 等。“文件”菜单中的保存命令如图9-2 所示。
静 态 网页 的 制作 步骤
网页的基本操作
操作方法为：
1) 保存新建网页或不对保存网页进行更名、更改保存路径操作时，可以 直接单击工具栏上的“保存”按钮，或从“文件”菜单中选择“保存”， 还可以直接按〈Ctrl〉+〈S〉键。在弹出的“另存为”对话框的“文件名” 中键入要保存网页的名称，在“保存位置”选择保存的位置，然后单击 “保存”按钮。如图9-3所示。然后单击“保存”按钮。 2) 对保存网页进行更名、更改保存路径操作时，在“文件”菜单中选择 “保存”，在弹出的“另存为”对话框的“文件名”中键入要更改的网页 名称，在“保存位置”选择要更改的保存位置，然后单击“保存”按钮。 3) 一次保存多个网页时，在“文件” 菜 单中选择“全部保存”，在弹出的多个“另 存为”对话框的“文件名”中，依次键入要 保存网页的名称，在“保存位置”选择相应 的保存位置，然后单击“保存”按钮。
START
Please click START to broadcast slide543
L
O O
A A
D
I
N
G
静 态 网页 的 制作 步骤
网页的基本操作 文本处理
啊！
插入的使用
O
设置页面属性 网页制作的步骤及教程
静 态 网页 的 制作 步骤
网页的基本操作 网页的基本操作 文本处理
插入使用 设置页面属性 网页制作步骤及教程
在“文件”菜单上，指向“新建”，再单击“网页或站点”。在“信笺网 页或站点”任务栏中的“根据模版新建”下，选择“网页模版”。在弹出的 “页面模版”选项卡中选择所要的网页模板，例如“普通网页”，如图9-1所 示。
静 态 网页 的 制作 步骤
网页的基本操作
2) 在“new_page_1.htm‖文件中可以输入各种信息。每次按下〈Enter〉 键，两段之间有一个空行；如果每次换行时同时键入〈Shift〉+〈Enter〉 键，则无空行。如想方便工作，可以单击常用工具栏中的按钮，显示出编 辑区的换行标记。
静 态 网页 的 制作 步骤
网页制作步骤及教程
1.5.1 制作实例 2
制作要求： 1、页面的背景图片为 2、在合适的位置插入图片 在网页中输入横排带阴影的 文字“欢迎访问数计系 09级计应班” 3、将网页用index.htm为名 保存在本地My site文件 中。
观 看 教 程 请 点 击 此 处