【asp源码栏目提醒】:本文主要为网学会员提供“ASP动态网页设计与实现-源代码 - 计算机理论”,希望对需要ASP动态网页设计与实现-源代码 - 计算机理论网友有所帮助,学习一下!
第 1 章
ASP 基础【例 1-1】下面结合上一节内容,利用记事本创建一个静态网页。
实例步骤如下:(1)首先单击开始→
程序→附件→记事本。
启动记事本,界面如图 1.1 所示。
图 1.1 记事本操作界面(2)在记事本的工作区中中输入以下内容。
结果如图 1.2 所示。
第一个静态网页的具体内容 图 1.2 第一个网页代码 (3)文件→保存。
打开保存对话框如图 1.3 所示,将该对话框中保存类型选择为“所有文件”,在文件名中输入自己想保存的文件名,注意扩展名为:.htm 或.html。
按照图 1.3所示设置好后单击确定即保存了第一个网页。
图 1.3 保存网页 (4)找到所保存的文件,双击该文件,结果显示结果如图 1.4 所示。
图 1.4 第一个网页 第 2 章 Dreamweaver 基础 【例 2-1】创建一个站点“MyWebSite”。
实例步骤如下: (1)创建一个文件夹,用于保存即将创建的网站位置,这里假设在 D 盘中创建一个文件“D:MyWeb” 。
(2)启动 Dreamweaver。
结果如图 2.1 所示。
图 2.1 Dreamweaver 启动界面 。
(3)选择“站点”→ “新建站点” 出现“新建站点”向导,并在站点名字文本框中输入一个站点名字,这里输入“MyWebSite” 。
如图 2.2 所示。
图 2.2 创建站点向导 (3)单击“下一步”,默认选择,再单击下一步,在位置对话框中选择文件存储的位置,结果如图 2.3 所示。
图 2.3 选择文件存放位置(4)单击下一步,按照图 2.4 所示进行设置和选择。
图 2.4 向导第 3 部分(5)单击下一步,选择默认,再单击下一步,显示站点基本设置,如图 2.5 所示。
图 2.5 站点基本设置(6)单击完成,站点创建成功,结果如图 2.6 所示。
图 2.6 站点创建结果2.1.2 站点管理 如果已经有了一个 Web 站点,可以通过站点管理编辑该站点,步骤如下: (1)启动 Dreamweaver,在右边的文件选择框中选择所建立的站点,如图 2.7 所示 图 2.7 选择站点 。
(2)选择“站点”→ “管理站点” 出现“管理站点”对话框,如图 2.8 所示。
从该图中我们可以看到,Dreamweaver 可实现对站点进行编辑、复制删除、导出、导入等管理功能。
图 2.8 管理站点 【例 2-2】创建并编辑一个网页。
实例步骤如下: (1)选择“文件”→“新建文档”,打开新建文档对话框,如图 2.9 所示。
从图中我们看到,
文档的类别有基本页、动态页、模板页等等,这里选择基本页,然后在右边再选择HTML 类型。
图 2.9 新建
文档 (2)单击“创建”按钮,就创建好了一个新的空白网页,结果如图 2.10 所示。
图 2.10 空白网页 (3)输入文档内容。
在上图中输入以下内容: 这是我的第一个网页! 结果如图 2.11 所示。
图 2.11 输入网页内容 (4)代码模式。
上面是在设计模式下创建网页,我们还可以在代码模式下创建网页,在图 2.11 中在
工作区的左上角选中“代码”,结果如图 2.12 所示。
图 2.12 代码模式 (5)拆分模式。
在图 2.12 左上角选择“拆分”,结果如图 2.13 所示。
图 2.13 拆分模式 (6)保存网页。
选择“文件”→“保存”,出现保存文件对话框,在对话框中输入需要保存的文件名,这里为“MyFirstWebpage.html”,结果如图 2.14 所示。
图 2.14 拆分模式 (6)浏览网页。
在工具栏中选择“在在浏览器/调试”工具栏 ,打开浏览器,并自动在浏览器中打开我们所创建的新 Web 文件,结果如图 2.15 所示。
图 2.15 浏览网页 【例 2-3】对例 2-2 中网页的字体进行设置。
实例步骤为: (1)利用 Dreamweaver 打开第一个网页,如图 2.15 所示。
(2)选中其中要设置的文本,如图 2.16 所示。
图 2.16 选择文本 (3)在上图中的属性面板中,我可以直接设置字体、大小、颜色等等,具体设置以及结果如图 2.17 所示。
图 2.17 格式设置 2.添加字体 在设置字体的过程中,如果刚开始使用 Dreamweaver 工具,我们可以看到其中默认的字体很少,中文字体只有宋体和新宋体,满足不了我们的要求,为此应该在工具中添加新字体,添加的过程如下。
,打开编辑字体列表对话框, (1)选择“文本”→“字体”→“编辑字体列表(E)…”如图 2.18 所示。
2.18 编辑字体
列表对话框 (2)在可用字体中选择你想要添加的字体,例如“方正舒体”等,单击按钮 ,结果如图 2.19 所示。
2.19 添加字体列表 (3)单击“确认”即可将我们选中的字体添加到 Dreamweaver 工具
软件中,就可以使用了,重新执行第(1)步,就可以看见我们所添加的字体,结果如图 2.20 所示。
2.20 添加字体结果(4)反复执行上面几步,就可以添加你想添加的字体,结果如图 2.21 所示。
2.21 添加几种字体后结果【例 2-3】对例 2-3 中网页的字体进行样式设置。
实例步骤为:(1)选中需要设置的字体。
(2)加粗与倾斜。
在属性中单击按钮 ,再击按钮 ,结果如图 2.22 所示。
2.22 加粗与倾斜 , (3)下划线与删除线设置。
选择“文本”→“样式”→“已插入”“文本”→“样式” ,结果如图 2.23 所示→“删除线” 2.23 下划线与删除线 【例 2-4】利用表格对网页内容进行布局,实现展示电影图片及相关介绍。
实例步骤为: (1)材料准备。
在网站中新建一个文件 Image 用于存放图片资料。
在 Dreamweaver 的文件面板中选择所打开的网站,单击右键→“创建文件夹”→输入文件夹的名字“Image”,再将图片资源复制在该文件夹中,结果如图 2.38 所示。
图 2.38 准备资源 (2)选择资源图片。
选中第一个单元格,选择插入→图像,打开图像资源选择对话框,如图 2.39 所示,并选择资源。
图 2.39 选择资源 (3)单击确定, 然后选中所插入的图片,并在属性对话框中输入高度为 160、宽度 235,结果如图 2.40 所示。
图 2.40 插入资源 、 (4)重复(2)(3)步,在左下角单元格插入另外一张图片,图片的高度和宽度同上,结果如图 2.41 所示。
图 2.41 插入全部图片资源 (5)在右列表的两个单元格中分别输入内容,对图片进行详细介绍,并对文本进行排版,结果如图 2.42 所示。
图 2.42 编辑文本 【例 2-5】在例 2-4 的网页中加入新电影,用占位符代替图片。
实例步骤为: (1)在文档窗口中,在表格的一个单元格内单击一次(这里假定在图 2.42 中的表格最下面添加一行,选中左下角单元格) 。
(2)选择插入→图像对象→图像占位符。
弹出图像占位符对话框,如图 2.43 所示,并在对话框中输入图中相应的内容。
图 2.43 图像占位符对话框 其中的替换文本是 Web 页面上的图像的文字描述。
它属于
HTML 代码,不会显示在页面上。
对于大多数图像,提供替换文本是很重要的,这样使用屏幕阅读器或只显示文本的浏览器用户就可以访问这些图像所提供的文本信息。
而对于仅显示 Web 站点徽标的横幅图形,无需提供替换文本。
将图像占位符对话框中的替换文本文本框保留为空时,Dreamweaver 会在 img 标签中添加一个 alt 属性。
以后,如果您要向某个图像添加替换