静态网页制做指南(学生)
综合实例——“宝贝爱网站”制做指南
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底部提示标签
标签定位,或Ctrl+鼠标选定)。执行【插入记录】→【模板对象】→【可编辑区域】菜单命令,弹出“新建可编辑区域”对话框,默认“名称”为“EditRegion3”,单击“确定”按钮,创建可编辑区域,如下图: (2)将插入点置于表格2右侧的第2个单元格,单击“标签选择器”中对应的“ | ”标签选中整个单元格,然后将其创建为可编辑区域“EditRegion4”,如图2-14所示。 图2-14 4.定义CSS样式表 (1) 执行【窗口】→【CSS样式】菜单命令,打开“CSS样式”面板。单击面板下方的按钮,打开【新建CSS规则】对话框。 (2) 在“选择器类型”区选择“标签(重新定义特定标签的外观)”,在“标签”下拉列表中选择“body”,在“定义在”下拉列表中选择“新建样式表文件”,之后单击“确 定”按钮,如图2-15所示。 图2-15 (3) 打开“保存样式表文件为”对话框,在“保存在”下拉列表中选择baby文件夹, 在“文件名”文本框中输入“sl”,之后单击“保存”按钮,如图2-16所示。 图2-16 (4) 打开“body的CSS规则定义”对话框,设置“字体”为“宋体”(可能需要添加),“大小”为“1像素”,“行高”为“20像素”,颜色为黑色,如图2-17所示。 图2-17 (5)在左侧的“分类”列表中选择“方框”,设置“边界”为“0”,之后单击“确定”按钮,如图2-18所示。 图2-18 按【Ctrl+S】组合键,保存模板文件m1和样式表文件s1,完成本节。 2.3 制作网站首页 在制作好的网页模版基础上,设计网站的首页(其他页同)。 (1)执行【文件】→【新建】菜单命令,打开“新建文档”对话框。 (2)点击“模版中的页”,选择“站点”:宝贝爱,在站点“宝贝爱”的模板中选择前面创建的模版文件“m1”,然后,单击“创建”按钮创建文档,如图2-19所示。 图2-19 (3) 按【Ctrl+S】组合键,保存文档为“index.html”。 (4) 将插入点置于可编辑区域“EditRegion3”标志下方的单元格中,单击【插入】“常用”栏中的“表格”按钮,在其中插入一个8行2列,宽为248像素(边框粗细、单元格边距和间距为0)的表格,如图2-20所示。 图2-20 (5)分别在表格的第1行插入产品图片index_10.gif、index_15.gif ;第3行插入index_17.gif、index_24.gif ;第5行插入index_25.gif、index_30.gif ;第7行插入index_31.gif和index_33.gif ,在第2、4、6、8行输入对应的文本(配方奶粉 营养米粉、葡萄糖、饼干、辅食、鱼肉酥、哺育用品、玩具)。然后,自上向下拖动鼠标选中所有单元格,单击【属性】面板上的“居中对齐”按钮,使所有文本和图片在单元格中居中对齐,如图2-21所示(用“ ”替换或删除“EditRegion3”提示字符)。 图2-21 注:按【Ctrl+S】保存;再另存为wly.dwt(我要留言模板,更新链接,后用)。 (6)回到index.html,将插入点置于可编辑区域“EditRegion4”中。然后,执行【插入记录】→【HTML】→【框架】→【IFRAME】菜单命令(插入一个浮动框架iframe)。 单击【拆分】按钮,打开代码视图(双窗口),如下图: 将插入点置于 图2-22 (7) 在代码视图中输入“height”值=“280”。再将插入点置于height="280"字符后,按【空格键】,在弹出的“标签选择器”中,双击“width”,设置“width” = “745”。按照同样的方法,在width="745" 后面插入frameborder="0",然后插入“src”并单击其右下方的“浏览”按钮,随后,弹出【选择文件】对话框;选择要设置为源文件的 文档“news.html”,之后单击“确定”按钮,如图2-23所示。 图2-23 (8) 保存文档后,按【F12】键预览网页,效果如图2-24所示。 2.4 制做子页面(略) 按教材提示做。 预览:一级网页 预览:二级子网页 总结 制作网站时,首先要做好规划,定义站点并准备好相关素材。制作时,可首先制作首页,然后制作其他子页,用户可利用模板和CSS样式表来统一网站风格,并达到事倍功半的效果。此外,用户在设置超链接时,目标网页一定要设置正确。 如何将PHP动态网站转换成真正的静态网页如何将PHP网页转化为纯静态网页 适用范围: 1.网站的页面或部分页面片段不需要频繁刷新动态数据的 2.极度依赖SEO的企业官网、推广页面等 技术要点: 1.PHP动态生成页面 2.PHP读取生成的页面内容 3.PHP将读取的页面内容存储为纯静态文件(如:.html) 4.对外部请求直接使用静态文件路径 优点: 1.利于SEO优化 2.降低服务器资源损耗 3.提高浏览器响应速度 代码程序: 1.动态页面原网页:http:localhost/Index.php 网站设计说明书《网站开发与网页设计》设计说明书网站名:《周杰伦资料库》 班级: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. 拔出层 静态网页设计-教学大纲《静态网页设计》教学大纲 课程类别:专业基础课 课程属性:必修课 学分/学时: 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 教你制作静态网页的方法教您制作静态网页的方法 一、网页设计基础 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.不要太滥或者目标太高。“太滥”是指到处可见,人人都有的题材;“目标太高”是指在这一题材上已经有非常优秀,知名度很高的站点,你要超过它是很困难的。选定了一个好的题材,是不是可以立刻动手制作了?不,经验告诉我们,必须要先规划框架。这是很重要的一步!每个网站都是一项庞大的工程。好比造高楼,没有设计图纸,规划好结构,盲目的建造,结果往往是倒塌;也好比写文章,构思好提纲,才不至于逻辑混乱,虎头蛇尾。全面仔细规划架构好自己网站,不要急于求成。 规划一个网站,可以用树状结构先把每个页面的内容大纲列出来,尤其当你要制作一个很大的网站(有很多页面) 的时候,特别需要把这个架构规划好,也要考虑到以后可能的扩充性,免得做好以后又要一改再改整个网站的架构,十分累人,也十分费钱。 大纲列出来后,你还必须考虑每个页面之间的链接关系。是星形,树形,或是网形链接。这也是判别一个网站优劣的重要标志。链接混乱,层次不清的站点会造成浏览困难,影响内容的发挥。 为了提高浏览效率,方便资料的寻找,本站的框架基本采用“蒲公英”式,即所有的主要链接都在首页上,链接的层次不多,深度浅。 框架定下来了,然后开始一步一步有条理,有次序地做来,就胸有成竹得多,也为你的主页将来发展打下良好的基础。 网站生成静态面的几种策略精编网站生成静态面的几种 策略精编 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、 JSP生成静态页面jsp生成静态页面 转自:https://www.360docs.net/doc/6811039761.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/6811039761.html,,或电子邮件如:mailto:zdhwangji@https://www.360docs.net/doc/6811039761.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/6811039761.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/6811039761.html,,或电子邮件如:mailto:zdhwangji@https://www.360docs.net/doc/6811039761.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底部提示标签 |