实用文档
案例一 简单个人网站的制作
1.认识Dreamwaver开发环境
2.掌握站点、 网页的创建、保存、运行
2.掌握运用表格进行页面布局
4.熟练进行图片、文字、链接等网页元素的添加和属性设置。
创建个人网站 网站主要包括个人资料、我的相册和南山学院等项目运行效果如图9-1所示当点击“我的相册”运行效果如图9-2所示。当单击“南山学院”链接跳转到南山学院的主页。
图9-1 个人资料页面
图9-2 我的相册页面
本案例创建如图9-1所示的网站通过该案例学会网页创建、页面布局、元素添加设标准文案
实用文档
置、浏览页面等基本操作。
操作步骤
注准备一个image文件夹包括需要的图片文件。
1.启动Dreamweaver
打开“开始|程序|Dreamweaver”后弹出如图9-3所示的欢迎界面。
图9-3所示的欢迎界面 图9-4站点定义界面一
图9-5站点定义界面二
2.创建站点
选择菜单中“站点|新建”弹出“站点定义为”对话框如图9-4所示的站点定义界面一在文本框中输入站点名称“first”选择“下一步”选取默认信息至“共享文件”选项在“如何连接到远程服务器”下拉列表中选择“无”如图9-5站点定义界面二最终选择“完成”按钮。
3.添加文件
右键单击文件面板的站点弹出快捷菜单如图9-6所示。选择“新建文件”修改默认文件名为“index.html”相同操作添加页面“photo.html”。
标准文案
实用文档
图9-6 新建文件 图9-7 站点结构图
4.添加文件夹
将准备好的image文件夹复制到e \first文件夹下在文件属性中点击“刷新”按站点结构图。
5.页面属性设置
左键双击“index.html”页面文件在“文档”窗口会显示“index.html”页面如图9-8所示。点击“属性”栏中的“页面属性”按钮弹出页面属性对口话框如图9-9所示。在页面属性对话框中单击背景图像对应的“浏览”按钮弹出“选择图片文件源”对话框如图9-10所示选择“bg.gif ”图片上边距和下边距设置成 “0像素”在标题/编码分类中标题文本框输入“我的主页”如图9-11所示。选择“确定”按钮完成页面属性的设置界面效果如图9-12所示。
图9-8 index文件界面
标准文案
实用文档
图9-9 页面属性对话框一
图9-10 “选择图片文件源”对话框 图9-11页面属性二
图9-12 页面效果
6.表格布局
选择“插入|常用|表格” 图标为在弹出的表格对话框中输入下列的属标准文案
实用文档
性。行数 3 列数2表格宽度 800像素边框1像素。单击“确定”按钮后显示效果如图9-13表格对话框所示。
图 9-13 表格对话框
7.表格属性设置
1表格居中显示。将“属性”栏中对齐方式设置为“居中对齐” 。
2合并单元格。左键选中表格第1行右键单击|表格|合并表格第3行操作相同。
(3设置单元格属性。
1单击表格第1行在“属性”栏中设置单元格属性。如表9-1-1所以。
表9-1-1第一行属性值
2分别单击第2行第1个单元格设置属性及属性值如下表。单击第2行第2个单元格设置属性及属性值如下表。
4单击第3行单元格设置属性及属性值如下表。
表格设置完的效果如图9-13所示。
标准文案
实用文档
图9-13表格布局效果图
8.插入表格
单击第2行第1个单元格选择“插入|常用|表格”选择4行 1列宽度100%在第2行第2个单元格选择“插入|常用|表格”选择8行 2列。并将第1列第3行道第8行合并单元格对表格的操作后如图9-14所示。
图9-14在页面中插入表格效果图
9.插入图片
在左侧表格的相应位置选择“插入|常用|图片”选择图片“welcome.gif”调整至合适大小在右侧表格的第3行第1个单元格选择“插入|常用|图片”选择“cat. jpg” ,设置图片属性宽200px高260px。效果图如9-15所示。
标准文案
实用文档
图9-15 插入图片效果图
10.设置链接
在左侧表格“插入|常用|链接”制作“我的首页”超链接在对话康中输入相应信息如图9-16所示。同样制作“我的相册”超链接及“我的母校”超链接。并设置中对齐。
图9-16 我的首页的超链接 图9-17南山学院超链接
11.输入文字并设置字体
①在相应的位置输入应的文字。
② “个人档案”设置为字号为36px颜色为#663399居中。设置其所在单元格背景图片为“imag e/l i.gif”。
③左键第1行 “插入|布局|绘制AP Div” 当出现十字架后拖拽合适宽度输入“欢迎光临奋斗网站”。在属性栏中设置文字的属性如图9-18。设置字号为48号“奋斗”两字为绿色。
图9-18 文字属性设置
标准文案
实用文档
12保存页面。选择“文件|保存”。
13复制页面
复制整个index.html页面。粘贴至photo.html页面。
14删除表格
选择“个人档案”表格按Delete键删除表格。
按照样张及以上操作实现对photo.html页面的制作。插入4行两列表格 “插入|图片”设置图片合适大小。
15. 保存页面。选择“文件|保存”。
16运行页面.运行键盘中F12键.按提示保存页面。运行结果如样张所示。
标准文案
DogYun怎么样?DogYun是一家2019年成立的国人主机商,称为狗云,提供VPS及独立服务器租用,其中VPS分为经典云和动态云(支持小时计费及随时可删除),DogYun云服务器基于Kernel-based Virtual Machine(Kvm)硬件的完全虚拟化架构,您可以在弹性云中,随时调整CPU,内存,硬盘,网络,IPv4路线(如果该数据中心接入了多条路线)等。DogYun弹性云服务器优...
对于Megalayer云服务器提供商在之前也有对于他们家的美国服务器和香港服务器进行过评测和介绍,但是对于大部分网友来说需要独立服务器和站群服务器并不是特别的普及,我们很多网友使用较多的还是云服务器或者VPS主机比较多。在前面也有在"Megalayer新增香港VPS主机 1GB内存 50GB SSD 2M带宽 月59元"文章中有介绍到Megalayer商家有新增香港CN2优化VPS主机。那时候看这...
2022年春节假期陆续结束,根据惯例在春节之后各大云服务商会继续开始一年的促销活动。今年二月中旬会开启新春采购季的活动,我们已经看到腾讯云商家在春节期间已经有预告活动。当时已经看到有抢先优惠促销活动,目前我们企业和个人可以领取腾讯云代金券满减活动,以及企业用户可以领取域名优惠低至.COM域名1元。 直达链接 - 腾讯云新春采购活动抢先看活动时间:2022年1月20日至2022年2月15日我们可以在...