制作静态网页的方法

制作静态网页的方法
制作静态网页的方法

教你制作静态网页的方法

一、网页设计基础

1、熟悉Dreamweaver 8的工作环境

2、创建新站点

创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成

3、网页文件的基本操作

a、创建、打开和保存网页文件

创建:文件----新建----创建

打开:文件---打开----选择欲打开的文件

或者在右边的文件浮动面版中选择打开

保存:文件---保存或另存为

b. 设置网页的页面属性

修改---页面属性---然后设置(标题、背景、背景图像、文本等)

c. 设置网页对象的颜色

网页对象,如页面背景、文字、链接都经常需要设置颜色。

可在各自对应的属性面版中设置。

d. 网页文本的输入和属性设置

文本可键入、导入、粘帖

文字可设置字体、大小、颜色、格式等。

键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的

换行:ENTER、SHIFT+ENTER

实例练习:

1、输入以下文字

书签夹在诗集里,

落叶夹在深秋里。

喜悦夹在生活里,

追求夹在人生里。

2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。

3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项

目符号,对齐方式为“居中”。然后保存、预览。

比较两次设置的效果。

e. 网页图片的插入和属性设置

插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中)

插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。

在图像属性面版中设置

f. 插入层

方法: 1、点击插入面版中的“描绘层”;2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层;

3、可以随意移动层的位置;

4、可在层中插入图像、文字等。

g. *插入表格,用表格定位

方法:

1、先用鼠标点至欲插入表格的位置;

2、点插入面版中的“表格”—“插入表格”;

3、确定行数、列数后确定即将表格插入到选定位置了;

4、可在表格中任何单元格里插入图像、文字等。

h. 建立超链接

方法: 1、选中要建立超链接的文字或图像;

2、点右键“创建链接”打开的窗口或在属性的链接栏里,填入链接的目标。(如:本网站另一个网页,或外部网页如https://www.360docs.net/doc/96363336.html,,或电子邮件如:mailto:zdhwangji@https://www.360docs.net/doc/96363336.html,)

3、在页面属性里修改链接的属性:修改--页面属性(链接、活动链接、访问过链接)

二、制作实例1

制作要求:(网页效果)

1、页面的背景图片为bg0100.jpg;

2、在合适的位置插入图片earth.gif;

3、在网页中输入横排带阴影的文字“欢迎访问网络工程08级3、4班主页”

4、将网页用index.htm为名保存在本地站点My site中。

操作步骤:

1、按下面操作建立站点:先新建一个文件夹My site(下面举例中是建立在桌面上)。

●选择“站点”---“新建站点”命令;

●在弹出的对话框中,在“站点名称”文本框中输入“应用实例1”,并点下一步;

●按下图选择“否,我不想使用服务器技术”,然后点“下一步”;

然后点“下一步”;

●在“您如何连接到服务器?”选项里选择“无”,然后点“下一步”;

然后点“完成”。这样就已经建立好一个新的站点了,可以在Dreamweaver界面右边的“文件”窗口里看到新建立的站点信息。

5、2、在文件夹My site下创建文件夹images,以后此站点中用到的图像文件准备全部存放

在images文件夹里;为方便,这里先把此例中需要用到的图片bg0100.jpg和earth.gif 事先存放在此images文件夹里了。

3、创建一个新网页:网页文件--- 新建--- 选“基本页”---创建;

然后在网页编辑器窗口中,选择“修改”-—“页面属性”命令,在“页面属性”对话框

中设置各项参数;

在“标题”文本框中输入“实例1”;

4、用index.htm为名保存文件到本地站点My site中,保存并按F12预览网页。

5、选择“插入”—“布局对象”—“层”命令,或单击工具栏中“布局”选项卡中的“绘制层”按钮,在工作区合适的位置上插入图片定位用的层Layer1,并将光标定位在层中。

6、“插入”--“图像”命令,或“常用”选项卡的“图像”按钮,在打开的对话框中选择文件earth.gif插入层中(若跳出“图像标签辅助功能属性”对话框,里面“替换文本”可填写“地球”或其他,或者不填),然后调整层及图像的位置至合适处;保存并按F12预览网页,若图像位置不合适,则调整到合适位置。

7、在网页合适位置插入第二个层Layer2,在层中输入文字“欢迎访问网络工程08级3、4班主页”,并设置文字属性中的字体、大小等,颜色为黑色;然后保存并按F12预览,若文字属性及位置不合适,则调整到合适为止。

8、选中层中的文字,将其复制到剪贴板中;在网页合适位置处插入第三个层Layer3, 并将文字粘贴到层Layer3中,将Layer3中的文字颜色改为白色,并适当调整层Layer3,使两个层中的黑白重叠文字产生阴影效果。然后保存并按F12预览,若效果不满意,则调整到满意为止。

三、制作实例2

要求:(网页效果)

1、网页名为exa.htm,网页的背景图片为bg0040.gif,网页保存在My site文件夹中;

2、在网页的顶部区域输入标题文字“人生的伴侣.知识的源泉”,用HTM样式“标题1”将其格式化,预览页面效果;

3、在网页的中部区域插入导航条,导航条的6个按钮对应的图片是a1.gif, a2.gif, a3.gif, …..f2.gif, f3.gif, f4.gif(共有24个),每个按钮可以链接一个My site文件夹中的HTML 文件。

4、在网页的合适位置上插入图片t4_1.gif, t4-2.gif, t4-3.gif。

5、在网页的底部区域插入图片wyfy.jpg,并为该图片建立电子邮件链接;

6、预览页面效果后,修改保存网页文件。

操作步骤:

先将要用到的图片素材复制到My site文件夹里的images文件夹。

1、新建一个网页,并将新网页取名为exa.htm,保存在My site文件夹中;在网页编辑器窗口中,选择“修改”--“页面属性”命令,在“页面属性”对话框中设置标题为”应用实例2”, 背景图片为bg0040.gif;

2、在网页的顶部区域合适的位置上输入标题文字“人生的伴侣.知识的源泉”,并选中这些文字。在属性面板中,选择格式中“标题1”;

3、在网页的中部区域合适的位置插入光标,选择菜单“插入”—“图像对象”—“导航条”命令,此时的网页编辑窗口中,会弹出“插入导航条”对话框。

在“项目名称”文本框中设置第1个按钮的名称为a;在下面按钮4个状态的文本框中分别输入images文件夹中的a1.gif, a2.gif, a3.gif, a4.gif 4个文件的路径和名称;在“按下时,前往的URL”文本框中输入该按钮链接的对象名称和路径(因此实例站点中只有index.htm 和exa2.htm两个网页文件,所以这里先填入index.htm来看看效果)。

选中“预先载入图象”和“使用表格”选项;选择“插入”下拉列表框中的水平方向设置导航条;

4、点“插入导航条”对话框最上面的“+”后,重复步骤3,可设置其他5个按钮(这里为简便,后五个按钮只对“状态图像”进行设置,其他三种图像不再设置了),设置完成后,

效果如下:

5、在网页合适的位置上插入3个用于图片定位的层,并在不同的层中插入images文件夹中的图片文件tu1.gif, tu2.gif, tu3.gif;

6、在网页的底部区域插入带图片wyfy.jpg的层,选中图片,在图片“属性”面板的“链接”文本框中,输入mailto:+EMAIL地址,建立电子邮件链接;

7、保存并预览网页,调整各方面属性及位置直至满意。最终效果如下:

在预览中尝试点击“科学技术”按钮和“我要发言”图片。

四、制作实例3: 用表格布局定位应用实例

要求:页面效果

(1) 创建新网页名称为shu.htm, 网页的背景图片为本bg0040.gif, 网页文件保存在My site 文件夹中.

(2) 在网页中插入7行6列的表格, 按照页面效果对网页中单元格进行合并调整,在表格上方合适位置的单元格里插入Flash文件shu.swt,在表格左边合适位置的单元格里分别插入图片文件t5-1.gif, t5-3. gif, t5-4. gif, t5-6. gif. 每个图片与My site 文件夹中的一个HTML文件或某一外部网站建立超链接,被链接的HTML文件在新窗口中打开,在表格右边合适位置的单元格中,插入逐帧动画文件shu-1.gif.

(3) 预览页面效果后,保存网页文件.

操作步骤:.

(1) 新建一个页面,选择[修改]|[页面属性]命令,在[页面属性]对话框中设置背景图片为

bg0040.gif, 并将网页取名为shu.htm保存在My site 文件夹中.

(2) “插入”---“表格”, 在弹出的“表格”对话框中设置7行6列,表格宽度设为

800像素,然后确定,则网页中插入了一个7行6列的表格。

(3) 选定第一行,然后点右键,在菜单中选“表格”—“合并单元格”;选定第五列的

三、四、五行,然后点右键,在菜单中选“表格”—“合并单元格”;

(4) 在表格中的第一行单元格中插入光标,选择菜单中“插入”—“媒体”—“Flash”,此时可在表格顶部的单元格中,插入Flash文件shu.swf。

若希望动画是透明的,则在属性中将“参数”设置入下图:

(5) 在表格的第三行第二列、第四行第三列、第五行第二列、第六行第三列和第三行第

五列的单元格中中分别插入光标,插入图像文件shu1.gif, shu3.gif, shu5.gif, shu6.gif, shu-1.gif。将图像shu1.gif链接到exa.html页面(在下面图像shu1.gif的属性面板中“链接”项填入“exa.html”),将图像shu5.gif链接到一个外部的网站(比如链接到百度,在属性“链接”项中填入https://www.360docs.net/doc/96363336.html,)。

按F12键预览页面后,保存文件。下面是预览效果图:

五、制作实例4: 框架集的使用

要求:页面效果

操作步骤:

1、新建站点名为“框架集应用”的站点;

2、“文件”--- “新建”--- 选“框架集”--- 选“左侧固定”--- “创建”,然后在弹出的

“框架标签辅助功能属性”对话框中按“确定”。

3、“文件”--- “保存全部”:将框架集页面保存为index.htm,左侧框架页面保存为

leftFrame.htm,右侧框架页面保存为rightFrame.htm。

4、在下面属性窗口中按如下进行设置,然后保存并按F12预览;

5、这里补充一点:建立了框架集页面之后,任何时候,在菜单“窗口”中选中“框架”,

在右下侧会出现“框架”窗口,点击里面不同部分则可激活相应的框架页面;

6、接下来,在左侧框架页面中用表格定位的方法插入三个竖排的图片作为导航按钮,效果

如下:

7、新建一个基本页面,在页面里输入“科学技术”,保存页面为kxjs.htm;

8、在mainFrame.htm页面中,鼠标点中“科学技术”图片,在下面的图片属性中设置其链

接属性如下:

9、保存并预览,在预览页面中,点击左侧的“科学技术”图片,可见到kxjs.htm页面会在

右侧的框架页中显示(如下图效果)。

提示:在以后需要修改框架各部分页面尺寸时,如果找不到框架边框,可通过“菜单”—“查看”---“可视化助理”--- 选中“框架边框”,即可使框架边框显示。

六、其他一些应用

1、插入声音:例如插入MP3

(1) 在右边“标签”窗口中点“行为”---“+”---“播放声音”;

(2)打开对话框中选择要插入的MP3文件后确定:

(3)打开“代码”编辑窗口,将HTML代码中的自动播放控制由“false”改为“true”:

修改后:

2、插入视频:

(1) “插入”----“媒体”-----“ActiveX”-----弹出窗口“确定”,双击页面编辑窗口中产生的图标,在打开的“选择Netscape插件文件”对话框中,选择要插入的视频文件,然后确定;把图标大小调整到合适。

(2) 保存文件并预览。

s

如何将PHP动态网站转换成真正的静态网页

如何将PHP网页转化为纯静态网页 适用范围: 1.网站的页面或部分页面片段不需要频繁刷新动态数据的 2.极度依赖SEO的企业官网、推广页面等 技术要点: 1.PHP动态生成页面 2.PHP读取生成的页面内容 3.PHP将读取的页面内容存储为纯静态文件(如:.html) 4.对外部请求直接使用静态文件路径 优点: 1.利于SEO优化 2.降低服务器资源损耗 3.提高浏览器响应速度 代码程序: 1.动态页面原网页:http:localhost/Index.php PHP动态原页面 '):($i.' '); } ?> 2.PHP(changeToHtml.php)将含有PHP代码的http:localhost/Index.php页面转化/更新为index.html

网站设计说明书

《网站开发与网页设计》设计说明书网站名:《周杰伦资料库》 班级:BX00XX 学号:BX00XX05 姓名:某某某 201X年12月08日

目录 一、网站与网页的概述 (1) 1. 什么是网站 (1) 2. 什么是网页 (1) 3 静态网页 (2) 4 动态网页 (3) 5 动态网页与静态网页的区别 (4) 二、Dreamweaver 8 (5) 1 Dreamweaver 8的概述 (5) 2 Dreamweaver 8的功能 (5) 3 Dreamweaver 8的特点 (6) 三、网页设计标记语言—HTML (8) 1 HTML语言简介 (8) 2 HTML语言特点 (8) 四、我的网站介绍 (9) 1 网站的主题、结构介绍 (9) 2 网站的内容、形式和特点的介绍 (10) 3 网站重点页面的贴图 (10) 五、网站设计感悟 (18)

一、网站与网页的概述 1. 什么是网站 因特网上一块固定的面向全世界发布消息的地方,由域名(网站地址)和网站空间构成,通常包括主页和其他具有超链接文件的页面。 网站是由多个网页组成的,但不是网页的简单罗列组合,而是用超链接方式组成的既有鲜明风格又有完善内容的有机整体。 2. 什么是网页 网页是网站中的一「页」,通常是HTML格式(文件扩展名为:html、htm、asp、aspx、php、jsp等)。网页通常用图像档来提供图画。网页要使用网页浏览器来阅读。 网页(Web page)是一个文件,他存放在世界某个角落的某一部计算机中,而这部计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取,当我们在浏览器输入网址后,经过一段复杂而又快速的程序。网页文件会被传送到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前。 网页是构成网站的基本元素,是承载各种网站应用的平台。

教你制作静态网页的方法之欧阳家百创编

教你制作静态网页的办法 欧阳家百(2021.03.07) 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点管理站点新建站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)跟随向导设置直至完成 3、网页文件的基本操纵 a、创建、掀开和保管网页文件 创建:文件新建创建 掀开:文件掀开选择欲掀开的文件 或者在右边的文件浮动面版中选择掀开 保管:文件保管或另存为 b. 设置网页的页面属性 修改页面属性然后设置(题目、布景、布景图像、文本等)c. 设置网页对象的颜色 网页对象,如页面布景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d. 网页文本的输入和属性设置 文本可键入、导入、粘帖 文字可设置字体、年夜小、颜色、格式等。

键入空格的办法:1、汉字输入法设置为全角方法,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保管、预览。 3、第二次设置格式为“题目一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项目符号,对齐方法为“居中”。然后保管、预览。 比较两次设置的效果。 e. 网页图片的拔出和属性设置 拔出图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 拔出图像占位符,在图片准备好后再加入图片。加入办法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要拔出的文件处。 在图像属性面版中设置 f. 拔出层

网站生成静态面的几种策略精编

网站生成静态面的几种 策略精编 Document number:WTT-LKK-GBB-08921-EIGG-22986

[转]网站生成静态页面的几种策略 2008-02-02 11:13 网站生成静态页面,及网站数据采集的攻、防原理和策略 目前很多人都开始注重动态页面生成HTML页了,但选择哪种生成HTML的方法和防采集却不防搜索引擎的问题却经常困扰大家。解决此问题则是本文产生的原因。 首先祥细说一下常用的几种生成HTML的方法: 生成HTML方法主要步骤只有两个: 一、获取要生成的html文件的内容 二、将获取的html文件内容保存为html文件 我在这里主要说明的只是第一步:如何获取要生成的html 文件的内容: 目前常用获取html文件的内容的方法有几下几种: 1、 str="内容" str=str&"内容数据库读取内容........." 这种方法与是在脚本内写要生成的html内容,不太方便预览生成页面的内容,无法可视化布局页面,更改html模板时会更加复杂。 用这种方法的人很多,但我感觉这种方法是最不方便的。

2、 制作单独的HTML模板页,动态的内容用特定的字符作为标记(如:有人用$title$标记为网页标题),用或者将其模板内容载入,然后再用替换方法把原先定好的标记替换为动态内容(如:Replace(载入的模板内 容,"$title$",rs("title" ) ) )。 3、 用XMLHTTP或serverXMLHTTP获取动态页所显示的HTML内容, 我常用的生成html文件的实例: 'weburl是要获取的动态页地址 'getHTTPPage(weburl)是获取动态页内容的函数 weburl="")&""‘指定动态页地址 body=getHTTPPage(weburl)'用函数取到动态页地址的内容 此方法最大的好处就是不用费力气专门去写静态的模板页面,只是将原来就有的动态页面转换为HTML静态页面,但生成速度不是太快。 我常用的生成HTML的方法就是第3种:用XMLHTTP获取动态页生成的HTML内容,再用或者保存成html文件。 第二步是生成文件的方法: ASP里常用的有用生成文件和生成文件两种 1、

静态网页设计-教学大纲

《静态网页设计》教学大纲 课程类别:专业基础课 课程属性:必修课 学分/学时: 4学分/64学时 制订人:课题组 适用专业:信息技术相关专业 一、课程的性质 “静态网页设计”是信息技术类专业学生的专业基础课之一。属于必修课范畴。同时它是一门针对性、实践性较强的课程。主要是培养学生静态网页设计的基本知识和静态网页设计制作的基本技能。 二、与其它课程的关系

三、教学目标 1.知识目标 (1)网站、网页、网页设计等的基本概念; (2)理解HTML语言中的各种文本格式、段落设置、列表等标记知识; (3)理解和掌握基本的DIV+CSS技术知识; (4)理解和掌握表格的基本知识; (5)理解和掌握数据表单的基本知识; (6)理解和掌握基本的框架网页知识; (7)理解和掌握网页图像、动画等多媒体应用知识; (8)理解和掌握网页超级链接知识; (9)掌握基本的动画制作知识; (10)了解网页美工相关知识; (11)了解网站的测试、发布与维护的基本知识; (12)掌握网站制作流程 2.能力目标 (1)能运用HTML语言设置和编辑网页元素; (2)会使用Dreamweaver等网页设计工具制作网页; (3)能使运用基本的CSS技术设置网页风格; (4)能在网页中嵌入图像、动画、视频等多媒体元素; (5)能运用表格布局并设计网页; (6)能正确运用文字超链接、图像超链接技术设计网页; (7)掌握框架制作网页的方法,会使用框架设计网页; (8)掌握制作表单的方法,会利用表单建立交互式页面; (9)能看懂基本的HTML网页源代码。

(10)会设计网页线框图,并能运用PS进行网页效果图设计 (11)掌握切片的基本原则和基本方法,综合运用网页排版技术进行切片素材排版 (12)熟悉网站项目工作流程,能独立进行中小型网站设计。 3.素质目标 (1)具有信息资料收集与整理能力; (2)具备简单的需求市场分析能力; (3)具有一定的语言表达、沟通和协调能力; (4)具有良好的心理素质和责任意识,能及时完成任务的能力; (5)具有踏实肯干的工作作风; (6)具有一定的创新意识和艺术设计素质 四、内容结构与目标任务

静态网页设计总结报告

网页设计总结报告 目录 一、设计介绍 (2) 二、制作过程 (3) 1、布局............................................................................................................................................... (3) 2、相关插入 (4) 3、相关链接 (4) 三、制作代码 (5) 四、心得体会 (7) 五、参考资料 (8)

一、网页设计介绍 从文件的角度来说,一个网页就是一个HTML文件。当浏览者输入一个网址或单击某个链接后,在浏览器中显示出来的就是一个网页。一般网页上都会有文本、图片等信息,而复杂一些的网页上还会有声音、视频、动画等多媒体内容,为网页增添了丰富的色彩和动感。静态网页是指网页文件中没有程序,只有HTML代码,一般以.html或.htm为后缀名的网页,静态网站内容不会在制作完成后发生变化,任何人访问都显示一样的内容。网站是一系列逻辑上可以视为一个整体的网页集合,是许多相关网页有机结合而组成的一个信息服务中心。对于小型网站,是指带有一定主题的多个网页集合;对于大型网站还包含数据库和服务器端应用程序等如新浪、网易、搜狐等门户网站。在构成网站的众多网页中,有一个页面比较特殊,称为首页,即网站的第一个页面。动态网页是指网页文件不仅具有HTML标记,而且还含有程序代码,并使用数据库连接。动态网页能根据不同的时间,不同的来访者显示不同的内容,动态网站更新方便,一般在后台直接更新。 我的网站是介绍自己的个人网站,这是一个关于家乡美食的介绍,总共6 个页面,其中上有首页5个链接,包括剁椒鱼头,蚂蚁上树,浏阳蒸菜,家常酸菜鱼,长沙臭豆腐,而然后每个子页可以和上一页和下一页相连。 首页部分:介绍了湖南一些好吃的资料菜名,其中附有一张凤凰的图片,很想与老师和同学们分。 然后就是每个子页中,前四张介绍了五道菜和它们的做法,则是一道比较有名的小吃,为长沙臭豆腐,但由于其做法是秘方,只附有对其的介绍。 二、制作过程 网页布局 它们不仅能点缀网页,使网页更活泼有趣,而且在网上娱乐、电子商务等方面也有着不可忽视的作用。

PHP生成静态页面--实例

看到很多朋友在各个地方发帖问PHP生成静态文章系统的方法,以前曾做过这样一个系统,遂谈些看法,以供各位参考。好了,我们先回顾一些基本的概念。 一,PHP脚本与动态页面。 PHP脚本是一种服务器端脚本程序,可通过嵌入等方法与HTML文件混合,也可以类,函数封装等形式,以模板的方式对用户请求进行处理。无论以何种方式,它的基本原理是这样的。由客户端提出请求,请求某一页面----->WEB服务器引入指定相应脚本进行处理----->脚本被载入服务器----->由服务器指定的PHP解析器对脚本进行解析形成HTML 语言形式---->将解析后的HTML语句以包的方式传回给浏览器。由此不难看出,在页面发送到浏览器后,PHP就不存在了,已被转化解析为HTML语句。客户请求为一动态文件,事实上并没有真正的文件存在在那里,是PHP解析而成相对应的页面,然后发送回浏览器。这种页面处理方式被称为“动态页面”。 二,静态页面。 静态页面是指在服务器端确实存在的仅含HTML以及JS,CSS等客户端运行脚本的页面。它的处理方式是。由客户端提出请求,请求某一页面---->WEB服务器确认并载入某一页面---->WEB服务器将该页面以包的形式传递回浏览器。由这一过程,我们对比一下动态页面,即可方现。动态页面需由WEB服务器的PHP解析器进行解析,而且通常还需连接数据库,进行数据库存取操作,然后才能形成HTML语言信息包;而静态页面,无须解析,无须连接数据库,直接发送,可大大减轻服务器压力,提高服务器负载能力,大幅提供页面打开速度和网站整体打开速度。但其缺点是,不能动态地对请求进行处理,服务器上必须确实存在该文件。 三,模板及模板解析。 模板即尚未填充内容html文件。例如: temp.html { title} this is a { file} file's templets PHP处理: templetest.php

教你制作静态网页的方法

教您制作静态网页的方法 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开与保存网页文件 创建:文件----新建----创建 打开:文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存:文件---保存或另存为 b、设置网页的页面属性 修改---页面属性---然后设置(标题、背景、背景图像、文本等) c、设置网页对象的颜色 网页对象,如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d、网页文本的输入与属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。 3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项目符号,对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e、网页图片的插入与属性设置 插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。

网站html静态化解决方案

网站html静态化解决方案 篇一:关于网页是否要静态化HTML的问题 关于网页是否要静态化HTML的问题 很多人提倡在网站设计时将页面静态化,难道页面静态化就没有什么缺点吗?有人问关于网页静态化的问题:很多人提倡在网站设计时将页面静态化,难道页面静态化就没有什么缺点吗?专家回答如下: 虽然页面静态化在一定程度上提高了页面访问速度和有利于搜索引擎优化以外,其实静态化带来的问题和后续成本也是不容忽视的:1、由于生成的文件数量较多,存储需要考虑文件、文件夹的数量问题和磁盘空间容量的问题,导致需要大量的服务器设备;2、程序将频繁地读写站点中较大区域内容,导致硬件损耗大、站点备份麻烦;3、页面维护的复杂性和大工作量,增加了更新维护难度和网站管理人员工作强度。 楼上说的有道理,不是每个网站都耗得起这个成本,如果你们公司的开发人员实力和时间都允许,那么可以实施你们的网站静态化,否则不提倡。 页面静态化有利用于蜘蛛的抓取,可以增加网页的权重. 楼上的楼上,不用担心,网页的静态化不会增加多少磁

盘容量,一个网页也就是几十K,现在硬盘很便宜.页面的维护不会有问题,网站后台还是采用动态的数据库管理,前台显示页面,可以生成静态的html 篇二:WEB网站架构分析HTML静态化 HTML静态化 1 介绍 其实大家都知道,效率最高、消耗最小的就是纯静态化的html页面,所以我们尽可能使我们的网站上的页面采用静态页面来实现,这个最简单的方法其实也是最有效的方法。但是对于大量内容并且频繁更新的网站,我们无法全部手动去挨个实现,于是出现了我们常见的信息发布系统CMS,像我们常访问的各个门户站点的新闻频道,甚至他们的其他频道,都是通过信息发布系统来管理和实现的,信息发布系统可以实现最简单的信息录入自动生成静态页面,还能具备频道管理、权限管理、自动抓取等功能,对于一个大型网站来说,拥有一套高效、可管理的CMS是必不可少的。 除了门户和信息发布类型的网站,对于交互性要求很高的社区类型网站来说,尽可能的静态化也是提高性能的必要手段,将社区内的帖子、文章进行实时的静态化,有更新的时候再重新静态化也是大量使用的策略,像Mop的大杂烩

静态网页制作心得体会

静态网页制作心得体会 姓名:张继宏第三组8.18 20世纪40年代科学字发明了计算机之后,人们的工作效率大大提高,但是单个计算机能够存储和处理的信息是非常有限的,为了便于信息的传递和处理,人们就把众多的计算机连接起来。 网页制作的心得体会----网页制作论文摘要通过这次个人网页的制作,我对计算机有了更深层次得到了解,也有了更浓厚的兴趣。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解,对网页制作的基础知识也有了一定的掌握。通过把自己的网页上传到互联网上,对文件的保存、上传、下载以及修改等知识有了更牢靠的掌握。通过自己的努力完成了自己上传到网上的第一个作品,那种成就感是无法用语言形容的。所以我觉得这次制作网页我已经达到了自己的目的,而不是单单为了完成作业而已。这是一个完全关于自己的个人网页,既然是介绍自己,就应该让观者在浏览了之后了解自己其人,我觉得这点我已经基本上做到了。 关键字页面设计ASP和数据库 1.一般来说,个人主页的选材要小而精。如果你想制作一个包罗万象的站点,把所有您认为精彩的东西都放在上面,那么往往会事与愿违,给人的感觉是没有主题,没有特色,样样有却样样都很肤浅,因为您不可能有那么多的精力去维护它。注意:网页的最大特点就是更新快。目前最受欢迎的个人主页都是天天更新甚至几小时更新一次。 2.题材最好是你自己擅长或者喜爱的内容。比如:您对诗歌感兴趣,可以放置自己的诗词;对足球感兴趣,可以报道最新的球场战况等等。这样在制作时,才不会觉得无聊或者力不从心。 3.不要太滥或者目标太高。“太滥”是指到处可见,人人都有的题材;“目标太高”是指在这一题材上已经有非常优秀,知名度很高的站点,你要超过它是很困难的。选定了一个好的题材,是不是可以立刻动手制作了?不,经验告诉我们,必须要先规划框架。这是很重要的一步!每个网站都是一项庞大的工程。好比造高楼,没有设计图纸,规划好结构,盲目的建造,结果往往是倒塌;也好比写文章,构思好提纲,才不至于逻辑混乱,虎头蛇尾。全面仔细规划架构好自己网站,不要急于求成。 规划一个网站,可以用树状结构先把每个页面的内容大纲列出来,尤其当你要制作一个很大的网站(有很多页面) 的时候,特别需要把这个架构规划好,也要考虑到以后可能的扩充性,免得做好以后又要一改再改整个网站的架构,十分累人,也十分费钱。 大纲列出来后,你还必须考虑每个页面之间的链接关系。是星形,树形,或是网形链接。这也是判别一个网站优劣的重要标志。链接混乱,层次不清的站点会造成浏览困难,影响内容的发挥。 为了提高浏览效率,方便资料的寻找,本站的框架基本采用“蒲公英”式,即所有的主要链接都在首页上,链接的层次不多,深度浅。 框架定下来了,然后开始一步一步有条理,有次序地做来,就胸有成竹得多,也为你的主页将来发展打下良好的基础。

静态化技术文档

2010-01-26 09:59 首先说说为什么要静态化。 对于现在的Web Application来说,动态页面是占有绝对高的地位的,正因为有了动态化,才有了现在Web的丰富多彩,但是如同所有别的事实一样,好处往往都是有代价的。 为了产生出动态的效果,每一次对页面的请求都会要求服务器对页面进行编译或者执行,这些操作都很消耗系统资源。如果这期间还有和数据库的通讯,那么代价将会更大。 如果一个页面在一定的时间内,其内容没有发生改变,那么就不必为每一次对它的访问进行一次“新”的编译或执行。我们可以把它在这段没有发生改变的时间内的结果保存到一个静态的页面里面,然后每次访问这个页面时,就用刚才保存的静态页面进行回复。这样便能大大地减少系统资源的消耗,并且提高对客户的响应速度。而这个过程就称之为页面静态化。 现在所面临的问题就是如何在JSP中将页面的内容保存下来。 在访问JSP页面的时候,服务器会先将JSP文件编译为Servlet文件,然后对这个Servlet编译、执行,并最终把结果返回给客户端。而我们的任务就是要把这个最终生成的HTML静态页面保留下来,存放在服务器上。 解决的方法其实很简单。普通的对于JSP的访问,最终的数据流是回写到客户端的,如果我们把它重定向,让它回写到服务器上一个本地的文件,这样就能把JSP的执行结果保存起来,而这个文件就是我们想要得到的静态化的结果。 好了,说了那么多废话,现在说说具体怎么实现。 看过将JSP编译成的Servlet文件以后,可以知道这个Servlet是通过一个"JspWriter"类型的对象将数据回写给客户端的,而这个对象正是JSP里面的内置对象"out",现在我们只需要定义一个自己的类,让它继承"JspWriter"类,覆盖里面的输出相关函数,让数据都输出到一个指定的文件就可以了。 例如(省略了部分重载函数): 程序代码 import java.io.*; import javax.servlet.jsp.*; public class ConstPageWriter extends JspWriter { private PrintWriter pw; public ConstPageWriter(String fileName){ super(JspWriter.DEFAULT_BUFFER, false); try{ pw = new PrintWriter(fileName, "UTF-8"); }catch(Exception e){ e.printStackTrace(); } } @Override public void print(String arg0) throws IOException { pw.print(arg0);

ASP生成静态网页技术的实现-最新文档

ASP生成静态网页技术的实现 当今大型网站页面都改用了静态的页面,这是因为静态页面可以提高浏览速度,减轻服务器的负担,方便搜索引擎收录,网站更安全,静态页面从理论上讲是没有攻击漏洞的,基于以上的好处所以现在知名、主流的大站基本上都静下来了。 ASP(Active Server Pages)是 Web 的服务器端脚本编写环境,也是绝大多数从事网站开发人员很熟悉的编程环境。如何用asp生成静态网页一般有两种方法:1使用FSO生成,2使用XMLHTTP生成。下面将综合这两种方法来实现静态页的生成。 1 ASP生成静态页的方法 我们用标签替换的方法生成静态网页,做一个模版页 mb.asp,生成静态页的时候直接把需要变化的部分的标签替换掉就行了。此例中我们把模板页mb.asp设置两个标签%title%和%content%。模板页可以是静态页也可以是动态页,但出于实际应用的方便我们用动态页做为模板页。静态网页执行页面为do.asp里面是具体生成静态页的代码。 2 程序中用到相关技术的方法和属性 1) Request.ServerVariables Request.ServerVariables("Server_Name")服务器的主机名、DNS地址或IP地址 Request.ServerVariables("Server_Port")接受请求的

服务器端口号 Request.ServerVariables("Path_Info")客户端提供的路径信息 2) ADODB.Stream对象 mode 读写模式,可选值:1-读,2-写,3-读写 type 数据类型,可选值:1-二进制,2-文本 charset 编码方式,可选值:utf-8,gb2312 position 数据流位置,表示数据操作从这里开始,第一个位置的值为 0,不是 1。 size 数据流大小(字节) LoadFromFile 从文件读取数据到 Stream 对象,Stream 对象原有内容将被清空 SaveToFile 将 Stream 对象数据保存为文件,第二个参数:1-不允许覆盖,2-覆盖写入 Open 打开数据流 Close 关闭数据流 Read([长度])从 Stream 对象中读取二进制数据,不指定长度表示全部读取 ReadText([长度])从 Stream 对象中读取文本数据,不指定长度表示全部读取 Write(buffer)将缓存数据写入 Stream 对象 WriteText(data, [option])将文本数据写入 Stream 对

JSP生成静态页面

jsp生成静态页面 转自:https://www.360docs.net/doc/96363336.html,/space/?233 生成静态页面技术解决方案系列(一) 2006-10-26 相信很多人都希望自己的页面越快越好,最好是能静态的,提高客户访问速度。也便于搜索引擎搜索。所以,就希望我们的动态读取数据库的页面,尽可能的生成静态页面。一下系列文章,介绍一下个人的解决方案。 本系列将介绍个人的一种方法,在不改变原来jsp 文件的基础上,只需 要加入少量的代码,就让你的新闻发布系统,很容易就完全变成静态的页面。 本文假设你是用java开发的web动态页面。 第一步,加入servlet.代码如下。 public class ToHtml extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String url = ""; String name = ""; ServletContext sc = getServletContext(); String file_name = request.getParameter("file_name");// 你要访问的jsp 文件名,如index,不包括扩展名 // 则你访问这个servlet时加参数.如 http://localhost/test/toHtml?file_name=index url = "/" + file_name + ".jsf";// 你要生成的页面的文件名。我的扩展名为jsf . name = ConfConstants.CONTEXT_PATH+"\\"+ file_name + ".htm";// 这是生成的html文件名,如index.htm.文件名字与源文件名相同。扩展名为htm //ConfConstants.CONTEXT_PATH为你的应用的上下文路径。

教你制作静态网页的方法

教你制作静态网页的方法 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开和保存网页文件 创建:文件----新建----创建 打开:文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存:文件---保存或另存为 b. 设置网页的页面属性 修改---页面属性---然后设置(标题、背景、背景图像、文本等) c. 设置网页对象的颜色 网页对象,如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d. 网页文本的输入和属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。 3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项

目符号,对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e. 网页图片的插入和属性设置 插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。 在图像属性面版中设置 f. 插入层 方法: 1、点击插入面版中的“描绘层”;2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层; 3、可以随意移动层的位置; 4、可在层中插入图像、文字等。 g. *插入表格,用表格定位 方法: 1、先用鼠标点至欲插入表格的位置; 2、点插入面版中的“表格”—“插入表格”; 3、确定行数、列数后确定即将表格插入到选定位置了; 4、可在表格中任何单元格里插入图像、文字等。 h. 建立超链接 方法: 1、选中要建立超链接的文字或图像; 2、点右键“创建链接”打开的窗口或在属性的链接栏里,填入链接的目标。(如:本网站另一个网页,或外部网页如https://www.360docs.net/doc/96363336.html,,或电子邮件如:mailto:zdhwangji@https://www.360docs.net/doc/96363336.html,) 3、在页面属性里修改链接的属性:修改--页面属性(链接、活动链接、访问过链接) 二、制作实例1

wordpress 全站生成静态html页面插件

wordpress 全站生成静态html页面插件 wordpress 全站生成静态html页面插件 只要被浏览页面就会自动生成一个html页面 文件名可以自己设,网上找的,分享下, 说明: **** 概述**** cos-html-cache 将会大大地提高你wordpress的运行效率和载入速度。该插件会在页面第一次载入的时候产生和url对应的真正的html文件作为缓存,后面的运行将会直接载入该html从而大大的提高了页面的效率。当页面内容发生变化时将会自动更新对应的页面,更新缓存的触发事件有:修改文章、删除文章、评论成功提交,同时这些事件也将会更新与之相邻的文章。 cos-html-cache2.0和之前的版本相比大大的提高了速度,改进了缓存的机制,使之更加科学 **** 安装**** 1. 下载插件,解压缩,你将会看到一个文件夹cos-html-cache,请确认文件夹里面没有二级目录,然后将其放置到插件目录下,插件目录通常是 `wp-content/plugins/`; 2. 在后台对应的插件管理页激活该插件; 3 在网站的根目录下创建一个文件 "index.bak",并将属性设置成0666 4 安装完成; **** 卸载插件 **** 1. 进入后台 admin->设置->cos-html-cache; 2. 点击按钮删除所有的html缓存文件(请一定要删除);

3. 删除首页根目录下的index.html(如果存在); 4. 进入插件管理界面,禁用该插件; 5. 卸载完成,若还有相关的html文件,请手动删除之。 **** FAQ **** 1. 我后缀名是.htm不是.html的可以用么? 后缀名是html或者html均可,其他方式不可以 2. 如果我的永久连接是目录形式的可以用么? 不可以,插件将会在目录下生成index.html文件。 3. 缓存的静态HTML文件在哪里? 放在你URL链接对应的地方,比如你页面的地址是https://www.360docs.net/doc/96363336.html,/dir1/dir2/2.ht ml那么静态文件就在 dir1/dir2 目录下 4. 为什么后台没有批量更新了? 请看最前面的说明,2.0的机制发生变化,已经不需要这个功能了! 5. 如果我的永久连接不合理怎么办?放心修改就是,不用担心链接失效问题,我自己都修改过几次。 6. 静态化后不支持pingback,如何处理? 在你的模板文件夹下的header.php文件中,加上这样的pingback meta:” />,加在css调用之前,当调用静态文件的时候,htaccess和这个meta会帮你处理ping back的! 7. 如何确定静态化成功? FTP查看有没有html文件生成,或者看看当前页面的源代码的最后面是否有这样的代码: 8. 生成了index.html为什么访问的还是index.php 服务器配置文件访问优先级的问题,本插件无能为力,请修改服务器配置,如果你的服务器支持自定义htaccess,请在htaccess中增加DirectoryIndex index.html index.htm in dex.php index.cgi。 9. 无法生成cache,如何处理? 页无法生成是因为你的网站根目录不让写入文件,你可以自行建立index.html,设置属性为

网页设计说明

网页设计说明

《我爱篮球》网站设计说明书 1、设计理念 本网站定位本身是用于展示个人爱好——篮球的一个平台页面系统。在展示之余也有结交拥有共同爱好的网友的功效。页面主要以蓝色调风格为主,站点分为有首页、篮球动态、NBA明星简介、用户注册、用户登录、留言交流、后台管理等模块。 本站页面主要展示的是NBA篮球资讯、明星等内容,整体页面使用到了CSS 层样式技术、Flash动画效果制作、以及 JavaScript的脚步技术应用。 值得一提的是首页明星照片展示采用了基于CSS+JS特殊的图片向左滚动的浏览效果。 2、设计流程 通过在网络参考相应模板,设计出接近于NBA网站的效果,并根据相应要求到网上寻找相应的图片素材以及应用到PS图片设计结束。 最后应用HTML网页设计,以及ASP + Access动态网页设计使用CSS进行页面样式的设计。 并且,附带应用一些JavaScript特效技术。 总体设计流程为:确定主题及颜色—→用Dreamweaver设计html静态网页效果—→建立数据库—→将静态网页改为asp动态网页—→测试、发布网站。 3、使用的工具与技术 网页制作工具:Dreamweaver 8 多媒体设计制作工具:Flash 8 、Photoshop cs3 应用到的设计技术:HTML、CSS、JavaScript 4、网站设计说明 网站名称:我爱篮球——篮球网站 整体形象设计包括标准字、标题、标准色彩等。 首页作为网站的形象页、网站的欢迎页面,引入的元素大致有网站名称、标题、形象图片、文字、栏目导航等要素,是彰显网站整体风格的重要页面,

并结合Flash动画来展示。 网站形象页的设计突出了所要展示的主题,通过文字、形象、图片的巧妙烘托,令页面富有层次感,达到赏心悦目的效果。 网页富有动感,通过JS实现突破轮播效果,文字采用marquee滚动展示新闻动态。 页面大小采用了960px*200px。 网站调试采用“边制作边调试”的方式。保证了页面在各个浏览器间的相互兼容性。 在风格等各方面追求保存一致。 5、页面结构布局 首页布局框架构思示意图

静态网页制作

静态网页制作 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开和保存网页文件 创建:文件----新建----创建 打开:文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存:文件---保存或另存为 b. 设置网页的页面属性 修改---页面属性---然后设置(标题、背景、背景图像、文本等) c. 设置网页对象的颜色 网页对象,如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d. 网页文本的输入和属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。

3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项目符号,对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e. 网页图片的插入和属性设置 插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。 在图像属性面版中设置 f. 插入层 方法: 1、点击插入面版中的“描绘层”;2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层; 3、可以随意移动层的位置; 4、可在层中插入图像、文字等。 g. *插入表格,用表格定位 方法: 1、先用鼠标点至欲插入表格的位置; 2、点插入面版中的“表格”—“插入表格”; 3、确定行数、列数后确定即将表格插入到选定位置了; 4、可在表格中任何单元格里插入图像、文字等。 h. 建立超链接 方法: 1、选中要建立超链接的文字或图像; 2、点右键“创建链接”打开的窗口或在属性的链接栏里,填入链接的目标。(如:本网站另一个网页,或外部网页如https://www.360docs.net/doc/96363336.html,,或电子邮件如:mailto:zdhwangji@https://www.360docs.net/doc/96363336.html,) 3、在页面属性里修改链接的属性:修改--页面属性(链接、活动链接、访问过链接)

静态网页设计3:设计网页布局

设计网页布局 本章要求: 1.掌握插入表格的方法及表格属性的设置 2.掌握单元格格式的设置、添加和删除行或列以及单元格的合并及拆分 3.掌握布局表格和布局单元格的绘制、属性设置和内容编辑 4.悉在网页中插入框架和嵌套框架,制作框架页面 重点:表格的插入和单元格的编辑,布局表格和布局单元格的绘制及编辑。 难点:表格数据的导入和导出,布局单元格的排版及嵌套布局表格的使用。 一.表格布局 设计网页的第一步是设计版面布局。所谓布局,就是以最适合浏览的方式将图片、文字以及表单等元素排放在页面的不同位置。网页设计常用布局方法是表格布局。另外一种方便的工具,就是使用框架。框架的作用就是把浏览器窗口划分为若干个区域,每个区域可以分别显示不同的网页。 案例:①在网页中插入表格,不显示边框只用来布局;②在单元格内插入文字、·图片,设置丰富的效果;③通过拆分单元格或者插入嵌套表格来细化某些单元格内部的布局。 1.插入表格 插入表格的具体操作步骤如下: 1)将光标定位。选择【插入】→【表格】命令或在“常用”插入栏中单击“表格”按钮,打开“表格”对话框。 2)在该对话框中可进行表格行数、列数、表格宽度、边框粗细、单元格边距等属性设置。 3)单击”确定“按钮即可按设置创建表格。

2.设置表格属性 选中表格后其“属性”面板,在其中可进行表格的属性设置,各项参数的含义如下: “表格Id”下拉列表框:为表格进行命名。 “行”和“列”文本框:设置表格的行数和列数 “宽”和“高”文本框:设置表格的宽度和高度,在其后的列表框中可选择单位像素和百分比 “填充”文本框:设置单元格边界和单元格内容之间的距离。 “间距”文本框:设置相邻单元格之间的距离。 2.设置表格属性 “对齐”下拉列表框:设置表格与文本或图像等网页元素之间的对齐方式,只限与表格同段落的元素。 “边框”文本框:设置表格边框的粗细。 “边框颜色”文本框:设置表格边框的颜色。 “背景颜色”文本框:设置表格的背景颜色。 “背景图像”文本框:设置表格背景图像,单击文本框右侧的“浏览文件”按钮,可在打开的“选择图像源文件”对话框中选择背景图像。 “清除列宽”按钮、“清除行高”按钮:分别为清除已经指定过的列宽和行高。“将表格宽度转换成像素”按钮:将表格宽度由百分比转为像素 “将表格宽度转换成百分比”按钮:将表格宽度由像素转换为百分比。 3.设置单元格、行或列的属性 先选中单元格、行或列,在“属性”面板中进行设置,属性面板如图:

静态网页制做指南(学生)

综合实例——“宝贝爱网站”制做指南 2.1 创建站点 在编辑网页之前,首先要定义一个站点,以下是高级模式的定义过程: [1] 启动Dreamweaver CS3软件,执行【站点】→【新建站点】菜单命令。 [2] 在【站点定义为】的对话框中选择“高级”选项卡,点击新建两个文件夹baby (根文件夹)和images(图像文件夹),如下图所示,设置“本地信息”的各个参数。 本例的主目录为baby,在信息服务默认站点EC中,“HTTP地址”为http://localhost/,其他默认,完成后点“确定”。因为是静态网页,可以不设测试服务器。 [3] 将素材文件复制到baby文件夹下(含images文件夹和news.html文件)。 2.2 制作网页模板 为便于理解,我们将网页模板的制作分为4小节,下面来看具体操作。 1.新建模板文档 (1)选择【文件】→【新建】菜单,打开【新建文档】对话框。单击“空模板”,在“模板类型”列表中选择“HTML模板”,默认“布局”为 <无>,最后单击“创建”按钮,如图2-1所示。

图2-1 (2)按【Ctrl+S】组合键保存文档,弹出图2-2所示提示框,勾选“不再警告我”复选框,之后单击“确定”按钮。 图2-2 (3)在打开的【另存模板】对话框中,从“站点”下拉列表中选择“宝贝爱”,在“另存为”文本框中输入模板文件名“ml”,最后单击“保存”按钮,如图2-3所示。 图2-3 (4)按【Ctrl+J】组合键,打开【页面属性】对话框。单击左侧“分类”列表中的“标题/编码”,设置标题为“宝贝爱网站”,其余默认,如图2-4所示。

图2-4 (5)再次按【Ctrl+S】组合键保存文件(*养成习惯)。 2.设置模板内容 (1) 单击【插入】面板【常用】栏中的“表格”按钮,在页面中插入一个1行2列,宽1000像素,边框粗细、单元格边距和间距均为0的表格,如图2-5所示。 图2-5 在该表格【属性】面板中,设置“表格ID”为“1”(定义为表格1,参见图2-6底部提示标签),“对齐”方式为“居中对齐”,如下图所示:

相关文档
最新文档