简单网页的制作(转)
Android下保存简单网页到本地（包括简单图片链接转换）实现代码
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版）参考答案
⽹页设计与制作（附微课视频第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）对称与均衡对称分为左右对称、上下对称、重复对称、旋转对称等形式。
对称的造型在⼤⾃然中⽐⽐皆是，同时也是版式设计常⽤的构成形式。
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
10.网页设计(实训)
将广告图置入图层
广告图设计
第二节 网页设计Photoshop部分
第四步进行翻页图标设计，使用“自定义形状工具” 绘制箭头，使用“矩形工具” 绘制正方形， 对图形进行旋转设置。
绘制箭头图形旋转源自效果图第二节 网页设计Photoshop部分
第五步进行内容，利用“横排文字工具”输入文字信息，利用“直线工具”绘制一条短横线。
内容效果图
第二节 网页设计Photoshop部分
第六步进行成员介绍设计，“矩形工具”绘制边框和“查看” 框，“椭圆工具”绘制头像区域， 置入头像，将头像图层挪动到圆形框图层上方，按下“Ctrl+Alt+G”，将头像置入到圆形框中，利 用“横排文字工具”输入文字信息。最后，利用“矩形工具”和“自定形状工具”绘制浏览按钮。
绘制圆形框
删除多余路径
形状宽度配置
第一节 网页设计设计Illustrator部分
logo效果图
海峡钓鱼logo
第二节 网页设计Photoshop部分
打开Photoshop CC软件，新建一个页面，设置宽度为1366px，设置高度为1473px，名称命 名为网页设计。
第一步进行顶部设计，使用“矩形工具”绘制搜索框，利用“横排文字工具”输入文字信息， 置入所需要的logo和图标。
第一节 网页设计展示图
第一节 网页设计Illustrator部分
在Adobe Illustrator CC软件中制作企业logo，通过对“椭圆工具”、 “剪刀工具”的使用， 绘制logo轮廓，接着选择“变量宽度配置文件 < 宽度配置文件1”，对轮廓进行变形处理，利用 “文字工具”，输入文字，最后进行排版。
绘制搜索框
填充顶部信息
第二节 网页设计Photoshop部分
软件分类
一、网页制作软件 ③Adobe Pagemill Pagemill功能不算强大，但使用起来很方 便，适合初学者制作较为美观、而不是非常复杂的主页。 如果你的主页需要很多框架、表单和Image Map图像，那么 Adobe Pagemill的确是你的首选。 Pagemill另一大特色是 有一个剪贴板，可以将任意多的文本、图形、表格拖放到 里面，需要时再打开，很方便。
13
Neobook介绍 NeoBook软件界面：
Cult3D演示：
14
WPF和Silverlight介绍
Windows Presentation Foundation ，缩写为WPF，WPF是微软新一 代的多媒体桌面设计软件，为用户界面、2D/3D 图形、文本、声音、视 频和动画提供了非同一般的设计方法。程序员在WPF的帮助下，开发出和 Mac系统比美的酷炫界面已不再是遥不可及的奢望。WPF生成EXE文件运行 于Windows系统。 Silverlight是网络环境设计软件，可以生成网页格式文件，目前其 功能还不及WPF。 XAML是WPF和Silverlight的界面描述语言，后台脚本语言可以是C#、 等。 微软提供了开发工具：Visual Studio和Expresion Blend （MEB） 微软要和同行们竞争，抢占多媒体技术开发的市场。
30
（14）选择播放方式，默认：我的电脑。
31
PPTtoFlash
PPT向flash和html的转换
PPTtoFlash安装后实际上是PPT的一个插件
16
三分屏课件制作软件 微软的Producer for PowerPoint 2003
17
Producer可以将PowerPoint文件以网页形式发布到 互联网、支持实时录像、可以做到视频和演讲文本的同 步，而且简单、易学、实用。 下面简要介绍制作步骤：
网页制作教程课件4
7.2.2 链接伪类
超链接标记<a>的伪类有4种：
a:link{ CSS样式规则; }
未访问时超链接的状态；
a:visited{ CSS样式规则; } 访问后超链接的状态；
a:hover{ CSS样式规则; } 鼠标经过、悬停时超链接的状态；
a: active{ CSS样式规则; } 鼠标点击不动时超链接的状态。
7.1.2 列表的分类
列表分为无序列表、有序列表和定义列表。接下来我们就一起来学习一下这三类列表在页面中的用法。
7.1.2.1 无序列表
无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别 之分。
定义无序列表的基本语法格式如下：
每对<ul></ul>中至少应包含一对<li></li>。
7.1.2.2 有序列表
有序列表就是其各个列表项会按照一定的顺序排列的列表，例如网页中常见的新闻排行榜、游戏排行榜等都可以通过有序列表来定 义。定义有序列表的基本语法格式如下：
7.1.2.2 有序列表
在有序列表中，除了type属性之外，还可以为<ol>定义start属性、为<li>定义value属性，它们决定有序列表的项目符号，其取值 和含义如下表7-2所示。
7.2.1 超链接标记
注意:
暂时没有确定链接目标时，通常将<a>标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
7.2.1 超链接标记
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。 创建图像超链接时，在某些浏览器中，图像会添加边框效果，影响页面的美观。 为了不影响页面的美观，通常需要去掉图像的边框效果，使图像正常显示。去掉链接图像的边框很简单， 只需将图像的边框定义为0即可，代码如下所示：
《Web前端开发项目教程》网页的蓝图--简单布局--使用盒模型划分页面
四个数值依次表示上、右、下、左
圆角边框的设置
可以使用下面方式同时设置四个角的样式：
border-radius:水平半径1~4/垂直半径1~4
取值单位可以是px，表示圆角半径，值越小，角越尖锐，负数无效，例如8px；还可以使用百 分比，此时圆角半径将基于盒子的宽度或高度像素数进行计算，例如50%，此时若盒子宽与 高取值相同，则得到一个圆形，否则为椭圆形。
“秋，揪也，物于此而揪敛也”。古人把立 秋当作夏秋之交的重要时刻，一直很重视这 个节气。据记载，宋时立秋这天宫内要把栽 在盆里的梧桐移入殿内，等到“立秋”时辰 一到，太史官便高声奏道：“秋来了。”奏 毕，梧桐应声落下一两片叶子，以寓报秋之 意。</p>
</div> </body>
2.4 盒子的外边距属性
border-top
Content内容
padding-right 右填充
border-bottom Margin-bottompadding-bottom
下填充
2.3 盒子的内填充属性
<style type="text/css">
*{padding: 0; margin: 0;}
/*将页面元素的默认内外边距置零*/
同时设置盒子的右外边距和下外边距，使盒子和父级元素之间拉开一定的距离，是一种 常见的页面排版方法。
div{
border:5px solid red;
margin-right:50px;
/*设置盒子的右外边距*/
margin-bottom:30px; /*设置盒子的下外边距*/
/*上面两行代码等价于margin:0 50px 30px 0;*/
《用Dreamweaver制作网页六》实现网页间跳转(超链接)学案
《用Dreamweaver制作网页五》学案——实现网页间跳转（超链接）1课时学习目标：1、各小组完善首页和栏目网页。
2、实现网页间跳转（超链接的使用）资源平台：1、Dreamweaver 8.02、上节课收集的图片和文本素材、老师准备的网页素材、网上素材3、老师课前准备的信息技术学科资源网观看老师演示：1、如何实现网页间跳转（超链接的使用）前面我们已经做好了网站首页、栏目网页，并将它们都保存在了小组站点文件夹中，然而一个网站不仅仅只有一张网页，而是有很多张网页组成，并且各网页之间就是通过超级链接连在一起，那么Dreamweaver中如何来建立网页的超链接呢？超链接的标志：在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。
操作方法如下：1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击“链接”栏后的黄色文件夹按钮，在弹出的对话框里选中相应的网页文件就完成了。
做好超级链接属性面板出现链接文件显示。
（如下图）3、保存文件，按F12预览网页。
在浏览器里光标移到超级链接的地方就会变成手型。
〖提示〗你也可以手工在链接输入框中输入地址。
给图片加上超级链接的方法和文字完全相同。
扩展：如果超级链接指向的不是一个网页文件。
而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。
例如，在链接框里写上/那么，单击链接就可以跳转到网站制作教程网站。
【邮件地址的超级连接】在网页制作中，还经常看到这样的一些超级链接。
单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。
这也是一种超级链接。
制作方法是：在编辑状态下，先选定要链接的图片或文字（比如：欢迎您来信赐教！），在插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。
提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图2：保存文件
2015-3-28
19
2.页面属性设置
制作网页时，设置页面属性是非常重要 的。页面属性包括：标题、背景图像、 背景颜色、页面边界、链接、编码等。 步骤1：执行【修改】→【页面属性】命 令、单击属性面板中的【页面属性】按 钮、或右击页面空白区从选项中选择 “页面属性”操作，都可以打开“页面 属性”对话框，如图3所示。
2015-3-28 14
5.简单网页的制作
学习内容：按照从易到难的学习原则， 现在从简单网页制作入手，开始学习网 页的制作。一个网站至少有一个主页 （首页）。 学习重点：下面我们就一起来创建一个 简单的动物天堂网站首页，这个页面中 没有采用布局定位等技术，主要是学习 插入文本、水平线、图像、日期、导航 栏、超级链接、背景声音、滚动字幕等 页面元素的方法。
10
2015-3-28
2015-3-28
11
3.网站提供交互性 网站在设计时应采用留言板、反馈表单等与浏览者进 行交互。 4.网站的访问速度 在设计网站时，考虑网站的访问速度是十分必要的。 5.网站链接结构 设计网站链接结构的原则是用最少的链接达到最佳浏 览效率。网站设计者希望浏览者既能方便快速地到达自 己需要的页面，又可清晰地知道自己的位置。 6.网站目录结构 尽量不要将所有文件都存放在根目录下；按栏目内容 分别建立子目录，每个主目录下都创建独立的images文 件夹；目录的层次不宜太深；不要使用中文目录，目录 名不宜过长。 2015-3-28 12
2.网页设计的原则
1.页面的有效性 网页要易读、命名要简洁、长度要适中。通常一个页面内容不 超过100KB，否则传输时速度较慢。 2.页面风格要统一 网站上所有网页中的背景、导航条、图像、文字等要有统一的 风格。 3.合理设计视觉效果 主要体现在网页结构和排版上，要善用表格来对网页中的各个 元素进行布局定位，以突出网页的重点。 4.慎用图像 使用图像时，要保证页面的下载速度和浏览器的兼容性，可为 每幅图像添加文字说明。 5.慎用Java程序 因为目前Java程序的运行速度较慢，所以不要使用大篇幅的 2015-3-28 Java 程序。在网页开发过程中不宜使用过多的新技术。 13
34
2015-3-28
图7：字体选择
2015-3-28
35
注意：
可以根据需要从系统字体中选择不同的 字体类型，这样很容易将页面制作得精 巧，并产生良好的视觉效果。但要注意， 无论对Web页面有何特别要求，都应该尽 量保持统一性，最好不要在页面上使用 过多的字体。 单击插入栏上的“文本”标签，会出现 许多文本格式控制按钮，如图8所示，通 过这些按钮可以方便地设置文本的格式。
2015-3-28 25
背景图像就是网页的“桌面”。 一般而言，背景颜色与前景文字的整体 颜色需要有一个较强的对比，例如背景 图像的颜色为淡色调，则前景文字或图 形要以深色显示，如此才能突出网页； 反之，若背景使用较深的色调，则前景 文字就需使用较浅且较亮的色调。
2015-3-28来自26二、制作简单网页7
2015-3-28
8
2015-3-28
9
5．食品批发商 / 进入该站首页，我们首先感受到的是生机 盎然的景象，色彩鲜艳的各类蔬菜给浏览者以 新鲜的视觉冲击，由此引发购买欲望。它同时 用淡淡的蔬菜图案作背景，时刻宣传公司的主 要业务，同时延长感官上的刺激时间。 通过上述几个网站的分析可以看出，如果 从塑造网上形象的角度考察，以下视觉元素是 不可缺少的。
2015-3-28
3
2．中国瓷器 / 该网站以白色为背景，营造出洁净、 细腻、典雅的氛围，同时与色彩斑斓的 瓷器形成强烈的反差，让人感觉到瓷器 工艺品的精致和美丽。这种颜色搭配是 展现色彩丰富的工艺品的一种和谐方 式。
2015-3-28
4
2015-3-28
这里所说简单网页，是指以文字和图片 为主要内容，没有采用布局定位技术、 HTML高级技术、Javescript脚本语言等 进行修饰的网页。
2015-3-28
27
1.加入文本
文字是网页上不可缺少的元素。文字是 网页的主体，一个网站意念的表达、内 容的体现等均需依靠文字加以传递。 当然，一个纯文字的网页看起来会很单 调，但在设计网页时，必须坚持以文字 为主，图像为辅的原则。
2015-3-28 20
图 3 页 面 属 性 设 置
2015-3-28 21
:
步骤2：设置背景颜色。选择“外观”分类
选项，在其“背景颜色”选项中设置背景 的颜色。在Dreamweaver中，使用网页安全 色调色板可以方便地改变页面的背景颜色， 调色板能够显示216种颜色。 步骤3：设置边界。在“外观”分类选项中， 分别将左、右、上、下边距设置为0。
2015-3-28 32
图6：文字属性面板
2015-3-28 33
如果在属性面板的字体下拉列表中找不到所需 要的字体，则需要对字体列表进行编辑添加， 以满足要求。具体操作步骤如下： 步骤1：选择图6中的“编辑字体列表”选项。 步骤2：弹出如图7所示的对话框。从右下边的 “可用字体”列表框中选择所要的字体。 步骤3：单击 《按钮，将其加入到左边的“选 择的字体”列表框中，再单击》按钮将其加入 到上边的“字体列表”框中。 步骤4：单击【确定】按钮，所选择的字体就 会出现在字体下拉列表框中。
2015-3-28 36
图8：插入栏上的文本标签
2015-3-28
37
2.插入水平线
在设计网页时，可以使用水平线以可视 方式分割文本和其他对象，插入水平线 的操作过程如下： 步骤1：将光标定位在需要插入水平线的 位置。 步骤2：执行【插入】→【HTML】→【水 平线】命令，或单击“HTML”插入栏中的 按钮，会插入一条水平线，“HTML”的插 入栏如图9所示。
2015-3-28
22
步骤4：设置页面标题。选择“标题
/编码”分类选项，在“标题”选项 中输入“动物天堂之门”，如图4所 示。 步骤5：设置各分类选项后，单击 【确定】按钮完成页面属性的设置。
2015-3-28
23
图4：标题设置
2015-3-28
24
注意：
页面标题主要用于识别文档。标题显示 在浏览器的标题栏上，通常会作为收藏 名称出现在收藏夹列表中。页面标题应 短小、含义明确、能够描述该文档的主 要内容。 设置页面标题的另一种方法是：在文档 工具栏的“标题”文本框中直接输入标 题。
4．北美工艺品展 / 从这个网站页面色彩的选择上，我 们可以感受到网页设计者对手工艺品的 认知，其色调选择和色彩搭配，突出了 手工艺品的巧夺天工。蓝色、灰白色、 草绿色、淡黄色都是手工艺品常用的颜 色，形成了站点风格的一致性。
2015-3-28
2015-3-28 16
图1：新建文 档对话框
2015-3-28
17
步骤2：保存页面文件。执行【文件】→ 【保存】命令或按快捷键Ctrl+S，在 “另存为”对话框中浏览找到D:\dwtt文 件夹，在“文件名”中输入default.htm， 如图2所示，单击【保存】按钮。
2015-3-28
18
31
2015-3-28
（2）文字修饰 对文字进行修饰，主要是在其属性面板 中进行的。在属性面板中可以对文字进 行字体、大小、对齐方式等进行设置。 设置字体的步骤为： 步骤1：选中要设置字体的文字。 步骤2：在属性面板中单击“字体”右边 的下三角按钮，弹出如图6所示的下拉列 表框，选择需要的字体。
5
3．古董仿制品 / 这个网站采用灰白底色作衬托，似 乎没有突出人们通常理解的古朴气质， 但它有可能适用于中世纪欧洲的传统灰 白色调。由于东西方文化有较大差异， 因此在设计传播中国文化的网站时，可 能更宜选择那些能体现东方古典风格的 颜色。
2015-3-28 6
1.网站的策划与设计
网站设计的基本原则 1.网站内容要新、专、精 网站的信息内容要有特色，网页内容要便于 阅读，内容设计要有组织，同时网站的内容应 及时更新。 2.网站整体风格要统一 网站的风格是指网站的整体形象给浏览者的 综合感受，是抽象的。风格就是与众不同，通 过网站的结构布局、内容、文字、标志、色调、 交互性等可以概括出一个网站的风格。
2015-3-28 1
下面，我们选择几个英文网站做色彩和站点 风格的分析：
1．利顿茶商/
利顿是历史悠久的茶类品牌，我们在平时常见的利顿红 茶、利顿冰茶都是其产品。在该企业站点中，突出体现的不 是利顿的悠久历史，而是其丰富的产品线、茶叶的历史和有 关人体健康的信息。 该站点的内容组织围绕利顿的产品线进行。利顿产品的 名称、商标、图形、功能和应用领域等信息一览无余，利顿 冰茶通过艺术图片展现在首页的左边，因此，站点所要突出 的是产品的内涵。 通过利顿健康中心，浏览者可以获得大量有关茶的信息， 使他们从潜意识中接受利顿关注消费者健康的理念。其实， 在有关茶的历史中，浏览者可以了解利顿茶品的悠久历史， 客观上起到激发消费欲望的作用。 另外，该站首页使用了利顿品牌所常用的黄色，这既是 2015-3-28 2 在网上扩大品牌效应，也是对公司整体形象的统一应用，从 而构成了企业识别系统（CIS）的重要部分。
2015-3-28 40
图10：水平线属性面板
图11：水平线快速标签编辑器
2015-3-28 41
步骤4：按F12键预览插入水平线后
的页面文件，效果如图12所示。
2015-3-28
42
图12：插入水平线
2015-3-28 43