大学计算机应用基础实践教程 共 页.

Presentation on theme: "大学计算机应用基础实践教程 共 页."— Presentation transcript:

1 大学计算机应用基础实践教程 共 页

2 实践项目九 网 页 制 作 共 页

3 主要内容 活动一 设计计算机基础学习园地网站
共 页

4 网站的设计风格清晰、明了、简单、活泼，在色彩的选择中注重活泼正气，不失华丽，尽量符合学生的审美要求
“计算机基础学习园地”网站主要为了传播计算机基础知识，其主要对象是大一学生，因此，不仅要准确发布知识内容，及时发布新知识、新技术，同时需要选用正确的显示方式（在页面布局中强调正面的布局结构和清晰明了的内容展示），使学生在学习知识的同时养成良好的表述习惯。 网站的设计风格清晰、明了、简单、活泼，在色彩的选择中注重活泼正气，不失华丽，尽量符合学生的审美要求 共 页

5 共 页

6 网站分为 6 个栏目，分别是课件、下载、计算机学习报、新技术讲座、双语学习、互动。
每个栏目下又分若干子栏目，每个栏目有若干个页面，每个页面的布局基本相同，本活动主要 对网站的属性进行设置，对页面中的文字进行处理。 共 页

7 1．Dreamweaver CS4 简介 Adobe Dreamweaver CS4 是建立Web 站点和应用程序的专业工具。它集成了可视布局工具、应用程序开发和代码编辑功能，其功能强大，能满足各个层次开发人员和设计人员的需求。 Dreamweaver 为专业人员提供了高效的工作环境，提供了从对基于CSS 的设计的领先支持到手工编码功能开发所需的工具。使用Dreamweaver 及所选择的服务器技术来创建功能强大的Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系统。 共 页

8 Adobe Dreamweaver CS4 是一款专业的HTML 编辑软件，可对Web 站点、Web 页和Web 应用程序进行设计、编码和开发。无论你是喜欢直接编写HTML 代码还是偏爱在可视化编辑环境中工作，都能在Dreamweaver CS4 中找到合适的工具，从而丰富自己的Web 创作体验。 利用Dreamweaver 中的可视化编辑功能，可以快速地创建页面而无须编写任何代码。同时Dreamweaver 还提供了许多与编码相关的工具和功能。并且，借助Dreamweaver，还可以使用服务器语言（例如ASP、ASP.NET、JSP 和PHP）生成支持动态数据库的Web 应用程序。 共 页

9 共 页

10 共 页

11 常用类别：可以创建和插入最常用的对象，例如图像和Flash 等。 布局类别：主要用于网页布局，可以插入表格、div 标签、层和框架。
表单类别：包含用于创建表单和插入表单元素的按钮。 数据类别：可以插入Spry 数据对象和其他动态元素，例如记录集、重复区域、显示区域 以及插入记录和更新记录等。 Spry 类别：包含一些用于构建 Spry 页面的按钮，例如Spry 文本域、Spry 菜单栏等。 文本类别：可以插入各种文本格式设置标签和列表格式设置标签。 收藏夹类别：可以将“插入”工具栏中最常用的按钮分组并组织到某一常用位置。 共 页

12 Dreamweaver CS4 将各种工具面板集成到面板组中，包括插入面板、行为面板、框架面板、文件面板、CSS 样式面板、历史面板等。用户可以根据自己的需要，选择隐藏和显示面板。选择“窗口”/“历史记录”命令，将展开“历史记录”面板， 共 页

13 共 页

14 共 页

15 共 页

16 共 页

17 2．Dreamweaver CS4 中站点的定义 站点是一个管理网页文档的场所。简单地说，一个个网页文档连接起来就构成了站点。站
点可以小到一个网页，也可大到一个网站。 Dreamweaver CS4 具有强大的站点管理功能，可以实现站点的即时修改，帮助用户管理和维护整个站点中的所有文档。它还可以自动更新和修复文档中的链接和路径，以及实现远程站点和本地站点文档的同步与更新。 共 页

18 用Dreamweaver CS4 制作网站，首先是创建站点，其实就是为网站指定本地的文件夹和服
点进行管理。 共 页

19 本地站点是指在本地计算机上用来存放网站的所有文件的文件夹。远程站点是在服务器上存放网站所有文件的文件夹。通过设置远程站点的地址、登录名等信息，建立该服务器与本地站点的联系，在本地站点与远程站点之间传递文件。 共 页

20 共 页

21 共 页

22 共 页

23 共 页

24 共 页

25 共 页

26 3．网页管理 使用 Dreamweaver CS4 既可以创建空白页和空白模板，也可以创建基于模板的页面以及基于Dreamweaver CS4 示例的页面。用户可以根据自身需要创建文档，并将文档保存在站点下,Dreamweaver CS4 所支持的文件类型见表9-1。 共 页

27 共 页

28 （1）选择“文件”/“新建”命令或通过“文件”面板新建文件（见图9-10）。
创建一个空白文档的步骤如下: （1）选择“文件”/“新建”命令或通过“文件”面板新建文件（见图9-10）。 （2）在“新建文档”对话框中选择“空白页”，单击“创建”按钮（见图9-13）。 （3）进入设计界面（见图9-14）。 共 页

29 共 页

30 （2）弹出“页面属性”对话框，单击“浏览”按钮。 （3）弹出“选择图像源文件”对话框,选择一个文件，单击“确定”按钮。
设置网页背景图 像的步骤如下: （1）选择“修改”/“页面属性”命令。 （2）弹出“页面属性”对话框，单击“浏览”按钮。 （3）弹出“选择图像源文件”对话框,选择一个文件，单击“确定”按钮。 共 页

31 （4）弹出“复制文件为”对话框，单击“保存”按钮。
（5）返回“页面属性”对话框，“背景图像”文本框的信息由系统自动填写，单击“确定”按钮；网页背景图像效果立即显现（见图9-20）。 共 页

32 共 页

33 共 页

34 共 页

35 共 页

36 共 页

37 共 页

38 一般的HTML 由标签（Tags）、代码（Codes）、注释（Comments）组成。HTML 标签的基本格式是：
<标签>页面内容</标签> 共 页

39 文本在网络上传输速度较快，用户可以很方便地浏览和下载文本信息，故其成为网页主要的信息载体。整齐划一、大小适中的文本能够体现网页的视觉效果。
5．文本 文本在网络上传输速度较快，用户可以很方便地浏览和下载文本信息，故其成为网页主要的信息载体。整齐划一、大小适中的文本能够体现网页的视觉效果。 标题、栏目名称等少量文本，可以选择直接在文档窗口中键入；段落文本，可以选择从其它文档中复制；整篇文章或表格，可以选择导入Word、Excel 文档（导入操作如图9-31 和图9-32 所示）。 共 页

40 在 Dreamweaver CS4 中输入文本时需要注意下列符号的输入，即不换行空格、换行符（按
【Shift+Enter】组合键）、日期（可通过“插入”/“日期”命令，方便地插入到页面的指定位置， 插入时可以通过“插入日期”对话框选择日期格式，如图9-33 所示）、注册商标、版权、货币 符号（选择“插入”面板中的“文本”/“字符”，就可看到特殊符号，如图9-34 所示，选择所 需的符号，即可插入到页面的指定位置）。 共 页

41 设置文本格式有两种方法：使用HTML 标签格式化文本，使用层叠样式表（CSS）。
线，文本颜色等。两者区别在于，使用HTML 标签仅仅对当前应用的文本有效，当改变设置时，无法实现文本自动更新。而CSS 则不同，通过CSS 事先定义好文本样式，当改变CSS 样式表时，所有应用该样式的文本将自动更新。此外，使用 CSS 能更精确地定义字体的大小，还可以确保字体在多个浏览器中的一致性。 共 页

42 （2）选择“文件”/“新建”命令（“新建文档”对话框如图9-13）创建本活动页面，文件名为“计算的数学理论1.html”。
（1）打开“计算机基础学习园地”站点。 （2）选择“文件”/“新建”命令（“新建文档”对话框如图9-13）创建本活动页面，文件名为“计算的数学理论1.html”。 （3）在“文档标题”文本框内输入“计算数学理论”。 （4）选择“插入”/“图像”命令在页面上插入图像，图像文件名分别为tt1.jpg 和lin_069.gif。 共 页

43 （5）打开站点中的“文字.txt”文件，全选其中的文字，利用剪贴板，将文字粘贴到当前页面中。
（6）选中第1 段文字，选择“格式”/“字体”命令，将其设置成楷体、20px。 （7）选中文字“计算理论”，将其设置成“标题2”格式，用相同的方式将“高等逻辑”、“形式语言与自动机理论”设置成“标题2”格式。 （8）将“计算理论”标题下的文字设置成隶书、20px；将“研究抽象的计算模型及其性质、可计算函数以及两者之间的关系。”设置成项目列表。 共 页

44 （11）选择“修改”/“页面属性”命令，将页面背景图像设置成blockrcontent1.jpg；在页面末尾，插入图像0fh.gif。
（9）选中“高等逻辑”标题下的文字“时序逻辑、模态逻辑、概率逻辑、非单调逻辑、归纳逻辑、模糊逻辑等”，选择“插入”面板的“文本”中的编号列表。 （10）将光标定位在“计算理论”标题上，使用“插入”面板的“常用”中的水平线，在第1 段和“计算理论”标题之间插入一条水平线，在水平线属性面板中将其高度设置成8 像素，选中水平线并右击，在弹出的快捷菜单中选择“编辑标签”命令打开标签编辑器，选择“浏览器指定的”，输入水平线颜色值（#0000FF）或通过拾色板选择颜色。 （11）选择“修改”/“页面属性”命令，将页面背景图像设置成blockrcontent1.jpg；在页面末尾，插入图像0fh.gif。 共 页

45 谢谢 共 页