简单网页的制作(转)

Android下保存简单⽹页到本地（包括简单图⽚链接转换）实现代码最近在做⼀个项⽬涉及到将包含图⽚的简单⽹页下载到本地，⽅便离线时观看，在这⾥分享⼀下，⼤家做下简单修改就可以⽤到⾃⼰的项⽬中了。

（这⾥⽤到了AQuery库）复制代码代码如下:package com.nekocode.xuedao.utils;import java.io.File;import java.io.FileOutputStream;import java.util.ArrayList;import java.util.regex.Matcher;import java.util.regex.Pattern;import android.content.ContentValues;import android.content.Context;import android.database.Cursor;import android.database.sqlite.SQLiteDatabase;import com.androidquery.AQuery;import com.androidquery.callback.AjaxCallback;import com.androidquery.callback.AjaxStatus;import com.nekocode.xuedao.PublicData;import com.nekocode.xuedao.PublicData.Subscribe;public class HtmlStorageHelper {private String URL = "/fetchurl.php/getcontent/";private PublicData pd;private AQuery aq;private SQLiteDatabase mDB;private String mDownloadPath;public HtmlStorageHelper(Context context) {pd = PublicData.getInstance();aq = new AQuery(context);mDB = context.openOrCreateDatabase("data.db", Context.MODE_PRIVATE, null);mDB.execSQL("create table if not exists download_html(_id INTEGER PRIMARY KEY AUTOINCREMENT, content_id TEXTNOT NULL, title TEXT NOT NULL)");mDownloadPath = pd.mAppPath + "download/";File dir_file = new File(pd.mAppPath + "download/");if(!dir_file.exists())dir_file.mkdir();}public void saveHtml(final String id, final String title) {if(isHtmlSaved(id))return;aq.ajax(URL+id, String.class, new AjaxCallback<String>() {@Overridepublic void callback(String url, String html, AjaxStatus status) {File dir_file = new File(mDownloadPath + id);if(!dir_file.exists())dir_file.mkdir();Pattern pattern = pile("(?<=src=\")[^\"]+(?=\")");Matcher matcher = pattern.matcher(html);StringBuffer sb = new StringBuffer();while(matcher.find()){downloadPic(id, matcher.group(0));matcher.appendReplacement(sb, formatPath(matcher.group(0))); }matcher.appendTail(sb);html = sb.toString();writeHtml(id, title, html);}});}private void downloadPic(String id, String url) {File pic_file = new File(mDownloadPath + id + "/" + formatPath(url)); aq.download(url, pic_file, new AjaxCallback<File>() {@Overridepublic void callback(String url, final File file, AjaxStatus status) {}});}private void writeHtml(String id, String title, String html) {File html_file = new File(mDownloadPath + id + "/index.html");FileOutputStream fos = null;try {fos=new FileOutputStream(html_file);fos.write(html.getBytes());} catch (Exception e) {e.printStackTrace();}finally{try {fos.close();} catch (Exception e2) {e2.printStackTrace();}}ContentValues values = new ContentValues();values.put("content_id", id);values.put("title", title);mDB.insert("download_html", "_id", values);}public boolean isHtmlSaved(String id) {File file = new File(mDownloadPath + id);if(file.exists()) {file = new File(mDownloadPath + id + "/index.html");if(file.exists())return true;}deleteHtml(id);return false;}public String getTitle(String id) {Cursor c = mDB.rawQuery("select * from download_html where content_id=?", new String[]{id}); if(c.getCount() == 0)return null;c.moveToFirst();int index1 = c.getColumnIndex("title");return c.getString(index1);}public ArrayList<Subscribe> getHtmlList() {Cursor c = mDB.rawQuery("select * from download_html", null);ArrayList<Subscribe> list = new ArrayList<Subscribe>();if(c.getCount() != 0) {c.moveToFirst();int index1 = c.getColumnIndex("content_id");int index2 = c.getColumnIndex("title");while (!c.isAfterLast()) {String id = c.getString(index1);if(isHtmlSaved(id)) {Subscribe sub = new Subscribe(id,c.getString(index2),Subscribe.FILE_DOWNLOADED);list.add(sub);}c.moveToNext();}}return list;}public void deleteHtml(String id) {mDB.delete("download_html", "content_id=?", new String[]{id});File dir_file = new File(mDownloadPath + id);deleteFile(dir_file);}private void deleteFile(File file) {if (file.exists()) { // 判断⽂件是否存在if (file.isFile()) { // 判断是否是⽂件file.delete(); // delete()⽅法你应该知道是删除的意思;} else if (file.isDirectory()) { // 否则如果它是⼀个⽬录File files[] = file.listFiles(); // 声明⽬录下所有的⽂件 files[];for (int i = 0; i < files.length; i++) { // 遍历⽬录下所有的⽂件this.deleteFile(files[i]); // 把每个⽂件⽤这个⽅法进⾏迭代}}file.delete();} else {//}}private String formatPath(String path) { if (path != null && path.length() > 0) { path = path.replace("\\", "_");path = path.replace("/", "_");path = path.replace(":", "_");path = path.replace("*", "_");path = path.replace("?", "_");path = path.replace("\"", "_");path = path.replace("<", "_");path = path.replace("|", "_");path = path.replace(">", "_");}return path;}}。

⽹页设计与制作（附微课视频第2版）参考答案第⼀章习题参考答案⼀、选择题1、A2、A3、B4、C5、A、B、C、D6、A、C、D7、B8、C9、B⼆、简答题1．答：URL是UniformResourceLocation的缩写,译为“统⼀资源定位符”，URL是Internet 上⽤来描述信息资源的字符串,主要⽤在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。

采⽤URL可以⽤⼀种统⼀的格式来描述各种信息资源,包括⽂件、服务器的地址和⽬录等；2答：⽂本、图像、动画、视频等。

3.答：⽹页结构语⾔的作⽤是将⽹页需要的内容以结构化、模块化的⽅式总结和存储，供表现语⾔和⾏为进⾏调⽤。

⽹页结构语⾔包括可扩展超⽂本标记语⾔XHTML 1.0和HTML 5等两种结构语⾔。

其中，XHTML 1.0为当前被⼴泛使⽤的标准，⽽HTML 5标准则是⽹页未来将被使⽤的标准。

⽹页表现语⾔的作⽤是为⽹页的结构语⾔定义尺⼨、位置、背景，以及⽂本的各种效果。

⽬前⽹页表现的国际标准语⾔为CSS 样式表技术。

⽹页结构语⾔和⽹页表现语⾔共同作⽤可以为⽤户呈现⽹页的整体画⾯，然⽽，⽹页是⼀种交互性的媒体，其除了可以呈现内容外，还可以根据⽤户的界⾯操作响应各种事件，此时，就需要⽤到⽹页的⾏为语⾔。

⽹页的⾏为语⾔包括多种类型，例如，JavaScript、JScript以及VBScript等。

4.答：⼀个完整的HTML5⽂档包含声明、头部和主体三个部分组成。

第⼆章习题参考答案⼀、选择题1.A、B2.A3.B4.D5.D6.D7.C⼆、简答题1．答：（⼀）⽹站功能需求分析；（⼆）⽹站的策划，本阶段主要包含⽹站栏⽬，内容，产品提炼等等；（三）⽹站设计，根据策划开始进⾏设计；（四）程序代码的开发；（五）上线测试；（5）后期维护；2.答：（1）对称与均衡对称分为左右对称、上下对称、重复对称、旋转对称等形式。

对称的造型在⼤⾃然中⽐⽐皆是，同时也是版式设计常⽤的构成形式。

《用Dreamweaver制作网页五》学案——实现网页间跳转（超链接）1课时学习目标：1、各小组完善首页和栏目网页。

2、实现网页间跳转（超链接的使用）资源平台：1、Dreamweaver 8.02、上节课收集的图片和文本素材、老师准备的网页素材、网上素材3、老师课前准备的信息技术学科资源网观看老师演示：1、如何实现网页间跳转（超链接的使用）前面我们已经做好了网站首页、栏目网页，并将它们都保存在了小组站点文件夹中，然而一个网站不仅仅只有一张网页，而是有很多张网页组成，并且各网页之间就是通过超级链接连在一起，那么Dreamweaver中如何来建立网页的超链接呢？超链接的标志：在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。

操作方法如下：1、在网页中选中要做超级链接的文字或者图片。

2、在属性面板中单击“链接”栏后的黄色文件夹按钮，在弹出的对话框里选中相应的网页文件就完成了。

做好超级链接属性面板出现链接文件显示。

（如下图）3、保存文件，按F12预览网页。

在浏览器里光标移到超级链接的地方就会变成手型。

〖提示〗你也可以手工在链接输入框中输入地址。

给图片加上超级链接的方法和文字完全相同。

扩展：如果超级链接指向的不是一个网页文件。

而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。

超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。

例如，在链接框里写上/那么，单击链接就可以跳转到网站制作教程网站。

【邮件地址的超级连接】在网页制作中，还经常看到这样的一些超级链接。

单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。

这也是一种超级链接。

制作方法是：在编辑状态下，先选定要链接的图片或文字（比如：欢迎您来信赐教！），在插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。

提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。

HTML跳转及导航栏的制作方法1. HTML跳转的基本概念在网页设计和编写过程中，跳转是一个非常重要的功能。

通过跳转，用户可以在不同的页面之间进行导航，从而更好地浏览全球信息湾内容。

HTML中最常用的跳转方式是超信息（hyperlink），即通过<a>标签来创建信息，让用户点击文字或图片时可以跳转到其他页面或相应位置。

2. 超信息的基本语法在HTML中，超信息的基本语法如下：```html<a href="目标页面的URL">信息文本或图片</a>```其中，href属性用于指定信息的目标页面，可以是其他网页的位置区域，也可以是页面内的指定位置（如锚点）。

信息文本或图片则是用户点击时显示的内容。

3. 导航栏的制作方法导航栏是网页中常见的组件，用于提供全球信息湾的整体导航功能。

制作一个简单的水平导航栏可以通过HTML和CSS来实现。

在HTML 中创建一个无序列表，并设置列表项为导航信息：```html<ul><li><a href="首页.html">首页</a></li><li><a href="关于我们.html">关于我们</a></li><li><a href="产品.html">产品</a></li><li><a href="通信我们.html">通信我们</a></li></ul>```然后使用CSS来美化导航栏，设置样式、布局和动画效果，使其更加美观和易于操作。

4. 深入理解HTML跳转除了简单的静态跳转外，HTML还提供了一些更加复杂和灵活的跳转方式，如表单提交、页面定时跳转等。

⽤CSS_DIV画表格（table）进⾏⽹页排版【转】以往传统⽹页设计都喜欢使⽤table(表格)來建构⽹页，這樣的建构⽅式对于⽹页整体排版來讲并沒有太⼤的问题，可以完美相容于各个浏览器。

但是時代在进步，还在⽤table排⽹页感觉就有点过时了。

会这样说并不是想引起table和div之战，⽽是想要说对于⽹页的维护，table表格是⽐较⿇烦⼀点的，再加上程式码不太⼲净、过多的巢状，对于搜索引擎来讲，也⽐较难发现其中重要的部分。

那如果⽤CSS+DIV进⾏⽹页排版，就会⽐较好吗？基本上是可以这样讲，但是⼤家⼜会遇到⽹页校正的问题，⼀⼝⽓要调整四、五种版本的浏览器，这样很可能让⽹页设计者⼜跑回去⽤table表格排版。

但其实在CSS中，已经有语法是⽀援表格的了，并不是对表格进⾏样简单的样式定义，⽽是透过CSS的表格属性，完美画出表格，排除浏览器相容的问题，让传统的table排版的设计师，也可以快速转换。

本來想说使⽤table來产⽣清单排版，免除浏览器校正问题，但碍于搜索引擎对表格式的⽹页不好解析其內容，所以还是使⽤DIV排版，并默默的校正⼀堆浏览器。

但是这回因为⽹页化，因此所有的CSS与DIV⼏乎是重构的状态，所以在本來的分类⽂章清单中，样式也順便进⾏重构，可是问题來了？「重构=花时间」，因为要⽤CSS+DIV模拟成table的样式，如果⼀直使⽤float來排版，校正上其实很⿇烦，当然在浏览器的校正上，更是头⼤。

后來找了⼀下发现有不错的好东西，在diplay的属性上，有table相关的属性值可以使⽤！传统的table排版的问题⼀般來讲，table打好语法就可以呈现效果了，⽽且语法很简单，就单纯的table、tr、td，这三个语法就可以画出表格，在各个浏览器下也都可以正常的显⽰。

如果觉得排版不漂亮，就直接在语法內加上width、color等等的属性值，效果很容易就达到了，可是这样会让程式码杂乱。

对于搜寻引擎來讲，他们抓⽹站內容通常不会⼀次抓完，会先抓到⼀定的⽹页⼤⼩，之后再來，如果你把样式调整的程式码都放进去，很快的，搜寻引擎可能光收录你的表格样式，还沒抓到重点就已经达到抓取額度了，重要的资料沒被收录，倒是收录了⼀些不重要的样式设定。